deploy: switch to chatterbox requirements @ 219b12b

.gitattributes

@@ -9,3 +9,6 @@ deploy.sh         export-ignore
 Dockerfile        export-ignore
 .dockerignore     export-ignore
 social_media_distributor/ export-ignore
+frontend/         export-ignore
+batch_translate.py export-ignore
+client_insta_links.jsonl export-ignore

.gitignore

@@ -23,6 +23,7 @@ tmp/
 uploads/
 outputs/
 data/
+batch_outputs/
 # Subproject runtime artifacts (not for HF Space)
 social_distributor/.venv/
 social_distributor/poster/auth/storage/

frontend/app.js

@@ -1,1318 +0,0 @@
-/* ═══════════════════════════════════════════════════════
-   app.js — VideoVoice Frontend Application
-   ═══════════════════════════════════════════════════════ */
-
-// ── Configuration ───────────────────────────────────────
-const API_BASE = window.location.origin;
-
-// ── DOM Cache ───────────────────────────────────────────
-const $ = (sel) => document.querySelector(sel);
-const $$ = (sel) => [...document.querySelectorAll(sel)];
-
-// ── Scroll-triggered Reveal Animations ──────────────────
-const revealObserver = new IntersectionObserver(
-  (entries) => {
-    entries.forEach((entry) => {
-      if (entry.isIntersecting) {
-        const siblings = [...entry.target.parentElement.querySelectorAll('.reveal:not(.visible)')];
-        const delay = siblings.indexOf(entry.target) * 80;
-        setTimeout(() => entry.target.classList.add('visible'), Math.max(delay, 0));
-        revealObserver.unobserve(entry.target);
-      }
-    });
-  },
-  { threshold: 0.1 }
-);
-$$('.reveal').forEach((el) => revealObserver.observe(el));
-
-// ── Nav scroll effect ───────────────────────────────────
-const nav = $('#navbar');
-let lastScroll = 0;
-window.addEventListener('scroll', () => {
-  const scrollY = window.scrollY;
-  if (scrollY > 50) {
-    nav.classList.add('scrolled');
-  } else {
-    nav.classList.remove('scrolled');
-  }
-  lastScroll = scrollY;
-}, { passive: true });
-
-// ── Mobile menu ─────────────────────────────────────────
-const mobileBtn = $('#mobile-menu-btn');
-const mobileNav = $('#mobile-nav');
-if (mobileBtn) {
-  mobileBtn.addEventListener('click', () => {
-    mobileBtn.classList.toggle('active');
-    mobileNav.classList.toggle('open');
-  });
-  // Close on link click
-  $$('#mobile-nav a').forEach(a => {
-    a.addEventListener('click', () => {
-      mobileBtn.classList.remove('active');
-      mobileNav.classList.remove('open');
-    });
-  });
-}
-
-// ── Active nav highlight ────────────────────────────────
-const sections = $$('section[id]');
-const navLinks = $$('.nav-links a:not(.btn)');
-const navObserver = new IntersectionObserver(
-  (entries) => {
-    entries.forEach((entry) => {
-      if (entry.isIntersecting) {
-        navLinks.forEach((link) => {
-          const isActive = link.getAttribute('href') === `#${entry.target.id}`;
-          link.style.color = isActive ? 'var(--accent)' : '';
-        });
-      }
-    });
-  },
-  { threshold: 0.3 }
-);
-sections.forEach((s) => navObserver.observe(s));
-
-// ════════════════════════════════════════════════════════
-// SHOWCASE (before / after comparison rows)
-// ════════════════════════════════════════════════════════
-const showcaseContainer = $('#showcase-container');
-const showcaseLoading = $('#showcase-loading');
-const showcaseError = $('#showcase-error');
-const showcaseRows = $('#showcase-rows');
-
-// Fallback masonry elements
-const demoVideosWall = $('#demo-videos-wall');
-const demoVideosLoading = $('#demo-videos-loading');
-const demoVideosError = $('#demo-videos-error');
-const demoVideosEmpty = $('#demo-videos-empty');
-const demoVideosLanes = $('#demo-videos-lanes');
-
-if (showcaseContainer) {
-  loadShowcase();
-}
-
-async function loadShowcase() {
-  setShowcaseState('loading');
-
-  try {
-    const res = await fetch(`${API_BASE}/api/showcase`);
-    if (!res.ok) throw new Error('Failed to load showcase');
-
-    const payload = await res.json();
-    const showcases = Array.isArray(payload?.showcases) ? payload.showcases : [];
-
-    if (showcases.length === 0) {
-      // Fall back to old masonry grid
-      setShowcaseState('hidden');
-      loadDemoVideosFallback();
-      return;
-    }
-
-    renderShowcaseRows(showcases);
-    setShowcaseState('ready');
-  } catch (err) {
-    console.error('Showcase load failed, falling back:', err);
-    setShowcaseState('hidden');
-    loadDemoVideosFallback();
-  }
-}
-
-function setShowcaseState(state) {
-  if (showcaseLoading) showcaseLoading.hidden = true;
-  if (showcaseError) showcaseError.hidden = true;
-  if (showcaseRows) showcaseRows.hidden = state !== 'ready';
-
-  if (state === 'loading' && showcaseLoading) showcaseLoading.hidden = false;
-  if (state === 'error' && showcaseError) showcaseError.hidden = false;
-  if (state === 'hidden' && showcaseContainer) showcaseContainer.hidden = true;
-}
-
-// ── Platform icon SVGs ────────────────────────
-const PLATFORM_ICONS = {
-  youtube: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M23.5 6.19a3.02 3.02 0 0 0-2.12-2.14C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.38.55A3.02 3.02 0 0 0 .5 6.19 31.6 31.6 0 0 0 0 12a31.6 31.6 0 0 0 .5 5.81 3.02 3.02 0 0 0 2.12 2.14c1.88.55 9.38.55 9.38.55s7.5 0 9.38-.55a3.02 3.02 0 0 0 2.12-2.14A31.6 31.6 0 0 0 24 12a31.6 31.6 0 0 0-.5-5.81zM9.75 15.02V8.98L15.5 12l-5.75 3.02z"/></svg>`,
-  instagram: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.97.24 2.44.41a4.08 4.08 0 0 1 1.52.99c.47.47.77.93.99 1.52.17.47.36 1.27.41 2.44.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.24 1.97-.41 2.44a4.08 4.08 0 0 1-.99 1.52 4.08 4.08 0 0 1-1.52.99c-.47.17-1.27.36-2.44.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.97-.24-2.44-.41a4.08 4.08 0 0 1-1.52-.99 4.08 4.08 0 0 1-.99-1.52c-.17-.47-.36-1.27-.41-2.44C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.05-1.17.24-1.97.41-2.44a4.08 4.08 0 0 1 .99-1.52 4.08 4.08 0 0 1 1.52-.99c.47-.17 1.27-.36 2.44-.41C8.42 2.17 8.8 2.16 12 2.16zM12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.33 4.14.63a5.87 5.87 0 0 0-2.13 1.38A5.87 5.87 0 0 0 .63 4.14C.33 4.9.13 5.78.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.27.26 2.15.56 2.91a5.87 5.87 0 0 0 1.38 2.13 5.87 5.87 0 0 0 2.13 1.38c.76.3 1.64.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.27-.06 2.15-.26 2.91-.56a5.87 5.87 0 0 0 2.13-1.38 5.87 5.87 0 0 0 1.38-2.13c.3-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.91a5.87 5.87 0 0 0-1.38-2.13A5.87 5.87 0 0 0 19.86.63C19.1.33 18.22.13 16.95.07 15.67.01 15.26 0 12 0zm0 5.84a6.16 6.16 0 1 0 0 12.32 6.16 6.16 0 0 0 0-12.32zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm7.85-10.4a1.44 1.44 0 1 0-2.88 0 1.44 1.44 0 0 0 2.88 0z"/></svg>`,
-};
-
-function renderShowcaseRows(showcases) {
-  if (!showcaseRows) return;
-  showcaseRows.innerHTML = '';
-
-  showcases.forEach((entry) => {
-    const row = document.createElement('div');
-    row.className = 'showcase-row reveal';
-
-    // ── Row header ──
-    const header = document.createElement('div');
-    header.className = 'showcase-row-header';
-
-    const iconWrap = document.createElement('div');
-    iconWrap.className = `showcase-platform-icon showcase-platform-icon--${entry.platform || 'youtube'}`;
-    iconWrap.innerHTML = PLATFORM_ICONS[entry.platform] || PLATFORM_ICONS.youtube;
-
-    const info = document.createElement('div');
-    info.className = 'showcase-row-info';
-    info.innerHTML = `<div class="showcase-row-title">${escapeHtml(entry.title || '')}</div>
-      <div class="showcase-row-desc">${escapeHtml(entry.description || '')}</div>`;
-
-    header.appendChild(iconWrap);
-    header.appendChild(info);
-    row.appendChild(header);
-
-    // ── Mobile tabs ──
-    const allCards = [];
-    const tabs = document.createElement('div');
-    tabs.className = 'showcase-tabs';
-
-    // ── Cards flow: Original → Their Dub → Our Dub ──
-    const flow = document.createElement('div');
-    flow.className = 'showcase-flow';
-
-    // Original card
-    const original = entry.original || {};
-    const origCard = createShowcaseCard({
-      type: original.type,
-      embed_url: original.embed_url,
-      language: original.language || 'Original',
-      cardStyle: 'original',
-    });
-    allCards.push({ card: origCard, label: 'Original' });
-    flow.appendChild(origCard);
-
-    // Their dub card (YouTube/Insta auto-dub)
-    const theirDub = entry.their_dub || {};
-    if (theirDub.url || theirDub.filename) {
-      const theirCard = createShowcaseCard({
-        type: 'local',
-        url: theirDub.url,
-        language: theirDub.language || 'Their Dub',
-        cardStyle: 'their-dub',
-      });
-      allCards.push({ card: theirCard, label: theirDub.language || 'Their Dub' });
-      flow.appendChild(theirCard);
-    }
-
-    // Our dub card (VideoVoice)
-    const ourDub = entry.our_dub || {};
-    if (ourDub.url || ourDub.filename) {
-      const ourCard = createShowcaseCard({
-        type: 'local',
-        url: ourDub.url,
-        language: ourDub.language || 'Our Dub',
-        cardStyle: 'our-dub',
-      });
-      allCards.push({ card: ourCard, label: ourDub.language || 'Our Dub' });
-      flow.appendChild(ourCard);
-    }
-
-    // Build tab buttons
-    allCards.forEach((item, idx) => {
-      const tab = document.createElement('button');
-      tab.className = 'showcase-tab' + (idx === 0 ? ' showcase-tab--active' : '');
-      tab.textContent = item.label;
-      tab.addEventListener('click', () => {
-        tabs.querySelectorAll('.showcase-tab').forEach((t) => t.classList.remove('showcase-tab--active'));
-        tab.classList.add('showcase-tab--active');
-        allCards.forEach((c) => c.card.classList.remove('showcase-card--active'));
-        item.card.classList.add('showcase-card--active');
-      });
-      tabs.appendChild(tab);
-    });
-
-    // First card is active by default on mobile
-    allCards[0].card.classList.add('showcase-card--active');
-
-    row.appendChild(tabs);
-    row.appendChild(flow);
-
-    // Playback sync within row
-    setupShowcasePlaybackSync(flow);
-
-    showcaseRows.appendChild(row);
-  });
-
-  // Re-observe new reveal elements
-  showcaseRows.querySelectorAll('.reveal').forEach((el) => {
-    revealObserver.observe(el);
-  });
-}
-
-function createShowcaseCard({ type, embed_url, url, language, cardStyle }) {
-  const card = document.createElement('article');
-  card.className = `showcase-card showcase-card--${cardStyle}`;
-
-  // Label pill
-  const label = document.createElement('div');
-  label.className = `showcase-label showcase-label--${cardStyle}`;
-  label.textContent = language;
-  card.appendChild(label);
-
-  // Video / embed frame
-  const frame = document.createElement('div');
-  frame.className = 'showcase-video-frame';
-
-  if ((type === 'youtube' || type === 'instagram') && embed_url) {
-    const iframe = document.createElement('iframe');
-    iframe.src = embed_url;
-    iframe.allow = 'autoplay; encrypted-media';
-    iframe.allowFullscreen = true;
-    iframe.loading = 'lazy';
-    iframe.title = `${language} - Original`;
-    frame.appendChild(iframe);
-  } else {
-    const video = document.createElement('video');
-    video.className = 'showcase-video';
-    video.controls = true;
-    video.playsInline = true;
-    video.preload = 'none';
-    video.setAttribute('playsinline', '');
-    if (url) video.src = url;
-    frame.appendChild(video);
-  }
-
-  card.appendChild(frame);
-
-  // Info
-  const info = document.createElement('div');
-  info.className = 'showcase-card-info';
-  const title = document.createElement('div');
-  title.className = 'showcase-card-title';
-  title.textContent = language;
-  info.appendChild(title);
-  card.appendChild(info);
-
-  return card;
-}
-
-function setupShowcasePlaybackSync(container) {
-  if (!container) return;
-  container.addEventListener(
-    'play',
-    (event) => {
-      const current = event.target;
-      if (!(current instanceof HTMLVideoElement)) return;
-      container.querySelectorAll('.showcase-video').forEach((v) => {
-        if (v !== current) v.pause();
-      });
-    },
-    true
-  );
-}
-
-function escapeHtml(str) {
-  const div = document.createElement('div');
-  div.textContent = str;
-  return div.innerHTML;
-}
-
-// ════════════════════════════════════════════════════════
-// DEMO VIDEOS WALL — fallback (outputs/ + data)
-// ════════════════════════════════════════════════════════
-function loadDemoVideosFallback() {
-  if (!demoVideosWall || !demoVideosLanes) return;
-  demoVideosWall.hidden = false;
-  setDemoState('loading');
-
-  fetch(`${API_BASE}/api/demo-videos`)
-    .then((res) => {
-      if (!res.ok) throw new Error('Failed to load demo videos');
-      return res.json();
-    })
-    .then((payload) => {
-      const videos = Array.isArray(payload?.videos) ? payload.videos : [];
-      if (videos.length === 0) {
-        setDemoState('empty');
-        return;
-      }
-      renderDemoVideos(videos);
-      setDemoState('ready');
-      setupDemoPlaybackSync(demoVideosLanes);
-    })
-    .catch((err) => {
-      console.error(err);
-      setDemoState('error');
-    });
-}
-
-function setDemoState(state) {
-  if (!demoVideosLanes) return;
-  [demoVideosLoading, demoVideosError, demoVideosEmpty].forEach((el) => {
-    if (el) el.hidden = true;
-  });
-  demoVideosLanes.hidden = state !== 'ready';
-
-  if (state === 'loading' && demoVideosLoading) demoVideosLoading.hidden = false;
-  if (state === 'error' && demoVideosError) demoVideosError.hidden = false;
-  if (state === 'empty' && demoVideosEmpty) demoVideosEmpty.hidden = false;
-}
-
-function renderDemoVideos(videos) {
-  const lanes = [...demoVideosLanes.querySelectorAll('.demos-lane')];
-  if (lanes.length === 0) return;
-
-  lanes.forEach((lane) => (lane.innerHTML = ''));
-
-  videos.forEach((video, idx) => {
-    const lane = lanes[idx % lanes.length];
-    lane.appendChild(createDemoCard(video));
-  });
-}
-
-function createDemoCard(videoData) {
-  const card = document.createElement('article');
-  card.className = 'demo-card';
-
-  const frame = document.createElement('div');
-  frame.className = 'demo-video-frame';
-
-  const video = document.createElement('video');
-  video.className = 'demo-video';
-  video.controls = true;
-  video.playsInline = true;
-  video.preload = 'metadata';
-  video.src = videoData.url;
-  video.setAttribute('playsinline', '');
-
-  const badge = document.createElement('div');
-  badge.className = 'demo-badge';
-  badge.textContent = (videoData.folder || 'demo').toUpperCase();
-
-  const info = document.createElement('div');
-  info.className = 'demo-info';
-
-  const title = document.createElement('h4');
-  title.textContent = formatDemoTitle(videoData.name || 'Video');
-
-  const meta = document.createElement('p');
-  meta.className = 'demo-meta';
-  meta.textContent = `${videoData.folder || 'demo'} • ${formatBytes(videoData.size_bytes)} • ${formatDemoDate(videoData.modified_at)}`;
-
-  frame.appendChild(video);
-  frame.appendChild(badge);
-  info.appendChild(title);
-  info.appendChild(meta);
-  card.appendChild(frame);
-  card.appendChild(info);
-  return card;
-}
-
-function formatDemoTitle(fileName) {
-  const withoutExt = String(fileName).replace(/\.[^/.]+$/, '');
-  const normalized = withoutExt.replace(/[_-]+/g, ' ').replace(/\s+/g, ' ').trim();
-  return normalized || String(fileName);
-}
-
-function formatBytes(bytes) {
-  const size = Number(bytes);
-  if (!Number.isFinite(size) || size <= 0) return 'Unknown size';
-  const units = ['B', 'KB', 'MB', 'GB'];
-  let value = size;
-  let unitIdx = 0;
-  while (value >= 1024 && unitIdx < units.length - 1) {
-    value /= 1024;
-    unitIdx += 1;
-  }
-  return `${value.toFixed(unitIdx === 0 ? 0 : 1)} ${units[unitIdx]}`;
-}
-
-function formatDemoDate(modifiedAt) {
-  const raw = Number(modifiedAt);
-  if (!Number.isFinite(raw) || raw <= 0) return 'Unknown date';
-  const ms = raw > 1e12 ? raw : raw * 1000;
-  const date = new Date(ms);
-  if (Number.isNaN(date.getTime())) return 'Unknown date';
-  return date.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
-}
-
-function setupDemoPlaybackSync(container) {
-  if (!container || container.dataset.playbackSync === 'ready') return;
-  container.dataset.playbackSync = 'ready';
-
-  container.addEventListener(
-    'play',
-    (event) => {
-      const currentVideo = event.target;
-      if (!(currentVideo instanceof HTMLVideoElement) || !currentVideo.classList.contains('demo-video')) {
-        return;
-      }
-      container.querySelectorAll('.demo-video').forEach((video) => {
-        if (video !== currentVideo) video.pause();
-      });
-    },
-    true
-  );
-}
-
-// ════════════════════════════════════════════════════════
-// TAB SWITCHING (URL / Upload)
-// ════════════════════════════════════════════════════════
-const tabBtns = $$('.tab-btn');
-const tabContents = $$('.tab-content');
-
-tabBtns.forEach(btn => {
-  btn.addEventListener('click', () => {
-    const target = btn.dataset.tab;
-    tabBtns.forEach(b => b.classList.remove('active'));
-    tabContents.forEach(c => c.classList.remove('active'));
-    btn.classList.add('active');
-    $(`#content-${target}`).classList.add('active');
-  });
-});
-
-// ════════════════════════════════════════════════════════
-// DRAG & DROP FILE UPLOAD
-// ════════════════════════════════════════════════════════
-const dropZone = $('#drop-zone');
-const fileInput = $('#file-input');
-const filePreview = $('#file-preview');
-const fileName = $('#file-name');
-const fileRemove = $('#file-remove');
-let selectedFile = null;
-
-if (dropZone) {
-  // Click to browse
-  dropZone.addEventListener('click', (e) => {
-    if (e.target === fileRemove || fileRemove.contains(e.target)) return;
-    if (!selectedFile) fileInput.click();
-  });
-
-  // Drag events
-  ['dragenter', 'dragover'].forEach(evt => {
-    dropZone.addEventListener(evt, (e) => {
-      e.preventDefault();
-      dropZone.classList.add('drag-over');
-    });
-  });
-  ['dragleave', 'drop'].forEach(evt => {
-    dropZone.addEventListener(evt, (e) => {
-      e.preventDefault();
-      dropZone.classList.remove('drag-over');
-    });
-  });
-
-  dropZone.addEventListener('drop', (e) => {
-    const file = e.dataTransfer.files[0];
-    if (file) handleFileSelect(file);
-  });
-
-  fileInput.addEventListener('change', () => {
-    if (fileInput.files[0]) handleFileSelect(fileInput.files[0]);
-  });
-
-  fileRemove.addEventListener('click', (e) => {
-    e.stopPropagation();
-    clearFile();
-  });
-}
-
-function handleFileSelect(file) {
-  // Validate type
-  const validTypes = ['video/mp4', 'video/quicktime', 'video/webm'];
-  if (!validTypes.includes(file.type)) {
-    showToast('Please upload an MP4, MOV, or WebM file.', 'error');
-    return;
-  }
-  // (Upload size validation removed)
-
-  selectedFile = file;
-  fileName.textContent = `${file.name} (${(file.size / 1024 / 1024).toFixed(1)}MB)`;
-  dropZone.querySelector('.drop-zone-content').style.display = 'none';
-  filePreview.style.display = 'flex';
-
-  // Show video preview
-  showUploadPreview(file);
-}
-
-function clearFile() {
-  selectedFile = null;
-  fileInput.value = '';
-  dropZone.querySelector('.drop-zone-content').style.display = '';
-  filePreview.style.display = 'none';
-  hideUploadPreview();
-}
-
-// ════════════════════════════════════════════════════════
-// VIDEO PREVIEWS
-// ════════════════════════════════════════════════════════
-let uploadObjectUrl = null;
-
-function showUploadPreview(file) {
-  const preview = $('#upload-preview');
-  const video = $('#upload-preview-video');
-  if (!preview || !video) return;
-
-  // Revoke previous object URL
-  if (uploadObjectUrl) URL.revokeObjectURL(uploadObjectUrl);
-  uploadObjectUrl = URL.createObjectURL(file);
-
-  video.src = uploadObjectUrl;
-  video.play().catch(() => {});
-  preview.style.display = '';
-}
-
-function hideUploadPreview() {
-  const preview = $('#upload-preview');
-  const video = $('#upload-preview-video');
-  if (!preview || !video) return;
-
-  video.pause();
-  video.removeAttribute('src');
-  video.load();
-  if (uploadObjectUrl) {
-    URL.revokeObjectURL(uploadObjectUrl);
-    uploadObjectUrl = null;
-  }
-  preview.style.display = 'none';
-}
-
-// Upload preview remove button
-const uploadPreviewRemove = $('#upload-preview-remove');
-if (uploadPreviewRemove) {
-  uploadPreviewRemove.addEventListener('click', () => clearFile());
-}
-
-function detectPlatform(url) {
-  if (/instagram\.com|instagr\.am/i.test(url)) return { name: 'Instagram Reel', icon: '&#9654;', cls: 'ig', emoji: '📸' };
-  if (/youtube\.com\/shorts/i.test(url)) return { name: 'YouTube Short', icon: '&#9654;', cls: 'yt', emoji: '▶' };
-  if (/tiktok\.com/i.test(url)) return { name: 'TikTok', icon: '♪', cls: 'tt', emoji: '♪' };
-  if (/youtube\.com|youtu\.be/i.test(url)) return { name: 'YouTube', icon: '&#9654;', cls: 'yt', emoji: '▶' };
-  return { name: 'Video URL', icon: '🔗', cls: 'generic', emoji: '🔗' };
-}
-
-function showUrlPreview(url) {
-  const preview = $('#url-preview');
-  if (!preview) return;
-
-  const platform = detectPlatform(url);
-  const iconEl = $('#url-preview-icon');
-  const platformEl = $('#url-preview-platform');
-  const linkEl = $('#url-preview-link');
-
-  iconEl.className = 'url-preview-icon ' + platform.cls;
-  iconEl.innerHTML = platform.emoji;
-  platformEl.textContent = platform.name + ' detected';
-  linkEl.textContent = url;
-
-  preview.style.display = '';
-}
-
-function hideUrlPreview() {
-  const preview = $('#url-preview');
-  if (!preview) return;
-  preview.style.display = 'none';
-}
-
-// URL preview remove button
-const urlPreviewRemove = $('#url-preview-remove');
-if (urlPreviewRemove) {
-  urlPreviewRemove.addEventListener('click', () => {
-    $('#video-url').value = '';
-    hideUrlPreview();
-  });
-}
-
-// Show URL preview on paste / input
-const videoUrlInput = $('#video-url');
-if (videoUrlInput) {
-  let urlDebounce = null;
-  videoUrlInput.addEventListener('input', () => {
-    clearTimeout(urlDebounce);
-    const url = videoUrlInput.value.trim();
-    if (!url) {
-      hideUrlPreview();
-      return;
-    }
-    urlDebounce = setTimeout(() => {
-      try { new URL(url); showUrlPreview(url); } catch { hideUrlPreview(); }
-    }, 400);
-  });
-}
-
-// ════════════════════════════════════════════════════════
-// LANGUAGE SWAP
-// ════════════════════════════════════════════════════════
-const langSwap = $('#lang-swap');
-if (langSwap) {
-  langSwap.addEventListener('click', () => {
-    const source = $('#source-lang');
-    const target = $('#target-lang');
-    const sv = source.value;
-    const tv = target.value;
-    // Only swap if the value exists in both dropdowns
-    if ([...source.options].some(o => o.value === tv) &&
-      [...target.options].some(o => o.value === sv)) {
-      source.value = tv;
-      target.value = sv;
-    }
-    // Rotate animation
-    langSwap.style.transform = `rotate(${(parseFloat(langSwap.dataset.rot || 0)) + 180}deg)`;
-    langSwap.dataset.rot = (parseFloat(langSwap.dataset.rot || 0)) + 180;
-  });
-}
-
-// ════════════════════════════════════════════════════════
-// TRANSLATE SUBMISSION
-// ════════════════════════════════════════════════════════
-const translateBtn = $('#translate-btn');
-const appInput = $('#app-input');
-const appProcessing = $('#app-processing');
-const appResult = $('#app-result');
-
-if (translateBtn) {
-  translateBtn.addEventListener('click', async () => {
-    const activeTab = $('.tab-btn.active')?.dataset.tab;
-    const targetLang = $('#target-lang').value;
-
-    // Gather input
-    let videoUrl = null;
-    let file = null;
-
-    if (activeTab === 'url') {
-      videoUrl = $('#video-url').value.trim();
-      if (!videoUrl) {
-        showToast('Please paste a video URL.', 'error');
-        return;
-      }
-    } else {
-      file = selectedFile;
-      if (!file) {
-        showToast('Please select a video file.', 'error');
-        return;
-      }
-    }
-
-    // Switch to processing view
-    setState('processing');
-
-    // On mobile the input panel is hidden (display:none) so the user
-    // loses playback controls — pause the video to prevent audio leak.
-    const uploadVideo = $('#upload-preview-video');
-    if (uploadVideo && window.innerWidth <= 999) { uploadVideo.pause(); }
-
-    // Read voice model mode
-    const voiceMode = document.querySelector('input[name="voice_mode"]:checked')?.value || 'chatterbox';
-
-    // Build form data
-    const formData = new FormData();
-    if (file) {
-      formData.append('file', file);
-    } else {
-      formData.append('url', videoUrl);
-    }
-    formData.append('target_language', targetLang);
-    formData.append('source_language', $('#source-lang').value);
-    formData.append('voice_mode', voiceMode);
-    formData.append('captions', $('#captions-toggle').checked ? 'true' : 'false');
-    formData.append('preserve_music', $('#music-toggle').checked ? 'true' : 'false');
-
-    try {
-      // Submit job
-      const res = await fetch(`${API_BASE}/api/jobs`, {
-        method: 'POST',
-        body: formData,
-      });
-
-      if (!res.ok) {
-        const err = await res.json().catch(() => ({ detail: 'Server error' }));
-        throw new Error(err.detail || 'Failed to start job');
-      }
-
-      const { job_id } = await res.json();
-
-      // Stream progress via SSE
-      streamProgress(job_id, targetLang);
-    } catch (err) {
-      showToast(err.message, 'error');
-      setState('input');
-    }
-  });
-}
-
-function streamProgress(jobId, targetLang) {
-  const log = $('#processing-log');
-  const progressBar = $('#progress-bar');
-  const stepText = $('#processing-step');
-  const previewPanel = $('#voice-preview-panel');
-  log.innerHTML = '';
-
-  const voiceMode = document.querySelector('input[name="voice_mode"]:checked')?.value || 'chatterbox';
-  const totalSteps = voiceMode === 'preview_both' ? 7 : 6;
-
-  let currentStep = 0;
-  let cursor = 0;
-  let stopped = false;
-  let previewBound = false;
-
-  let waitHeader = null;  // "Waiting for GPU..." static line
-  let waitDetail = null;  // "2 jobs ahead (Step 4/6 — Synthesising)" live line
-
-  async function poll() {
-    if (stopped) return;
-    try {
-      const res = await fetch(`${API_BASE}/api/jobs/${jobId}?after=${cursor}`);
-      if (!res.ok) throw new Error('Poll failed');
-      const { messages, next, wait_status } = await res.json();
-      cursor = next;
-
-      // Show / update queue status
-      if (wait_status) {
-        if (!waitHeader) {
-          waitHeader = document.createElement('div');
-          waitHeader.className = 'terminal-line';
-          waitHeader.style.opacity = '1';
-          waitHeader.style.color = 'var(--accent)';
-          waitHeader.style.fontWeight = '600';
-          waitHeader.textContent = 'Waiting for GPU...';
-          log.appendChild(waitHeader);
-
-          waitDetail = document.createElement('div');
-          waitDetail.className = 'terminal-line';
-          waitDetail.style.opacity = '1';
-          waitDetail.style.color = 'var(--text-2)';
-          log.appendChild(waitDetail);
-        }
-        waitDetail.textContent = wait_status;
-        stepText.textContent = wait_status;
-      } else if (waitHeader) {
-        // GPU acquired — remove both wait lines
-        waitHeader.remove();
-        if (waitDetail) waitDetail.remove();
-        waitHeader = null;
-        waitDetail = null;
-      }
-
-      for (const data of messages) {
-        handleMessage(data);
-        if (stopped) return;
-      }
-    } catch (err) {
-      console.warn('Poll error:', err);
-    }
-    if (!stopped) setTimeout(poll, 500);
-  }
-
-  function handleMessage(data) {
-    if (data.type === 'progress') {
-      const line = document.createElement('div');
-      line.className = 'terminal-line';
-      line.style.opacity = '1';
-      line.textContent = data.message;
-      log.appendChild(line);
-      log.scrollTop = log.scrollHeight;
-
-      if (data.step) {
-        currentStep = data.step;
-        const pct = Math.round((currentStep / totalSteps) * 100);
-        progressBar.style.width = `${pct}%`;
-        stepText.textContent = data.message;
-      }
-    }
-
-    // ── Voice preview event ─────────────────────────────
-    if (data.type === 'voice_preview') {
-      currentStep = data.step || 4;
-      const pct = Math.round((currentStep / totalSteps) * 100);
-      progressBar.style.width = `${pct}%`;
-      stepText.textContent = '🎧 Previews ready — choose your voice model';
-
-      const spinner = $('.processing-spinner');
-      if (spinner) spinner.style.display = 'none';
-      const header = $('.processing-header h3');
-      if (header) header.textContent = 'Choose your voice';
-
-      if (previewPanel) {
-        previewPanel.style.display = 'block';
-        requestAnimationFrame(() => previewPanel.classList.add('visible'));
-
-        const previews = data.previews || {};
-        Object.entries(previews).forEach(([model, url]) => {
-          const audio = $(`#preview-audio-${model}`);
-          const card = $(`#voice-card-${model}`);
-          if (audio && url) {
-            audio.src = `${API_BASE}${url}`;
-            audio.preload = 'auto';
-            audio.load();
-            if (card) card.classList.remove('unavailable');
-          } else if (card) {
-            card.classList.add('unavailable');
-          }
-        });
-
-        if (!previewBound) {
-          previewBound = true;
-          $$('.voice-select-btn').forEach(btn => {
-            btn.addEventListener('click', (e) => {
-              e.preventDefault();
-              const model = btn.dataset.model;
-              selectModel(jobId, model, previewPanel);
-            }, { once: true });
-          });
-          initPlayPauseButtons();
-        }
-      }
-    }
-
-    if (data.type === 'complete') {
-      stopped = true;
-      progressBar.style.width = '100%';
-
-      const spinner = $('.processing-spinner');
-      if (spinner) spinner.style.display = 'none';
-      const header = $('.processing-header h3');
-      if (header) header.textContent = 'Translation complete';
-      stepText.textContent = `Done in ${data.elapsed || '—'}s`;
-
-      const video = $('#result-video');
-      video.src = `${API_BASE}/api/jobs/${jobId}/result`;
-      $('#result-meta').textContent = `Translated to ${targetLang} · Processed in ${data.elapsed || '—'}s`;
-      $('#download-btn').href = `${API_BASE}/api/jobs/${jobId}/result`;
-
-      document.querySelector('.result-skeleton').style.display = 'none';
-      document.querySelector('.result-content-wrap').style.display = 'block';
-
-      setTimeout(() => setState('result'), 600);
-    }
-
-    if (data.type === 'error') {
-      stopped = true;
-      showToast(data.message || 'Pipeline error occurred', 'error');
-      setState('input');
-    }
-  }
-
-  // Start polling
-  poll();
-}
-
-async function selectModel(jobId, modelName, previewPanel) {
-  try {
-    // Visually mark selected card
-    $$('.voice-card').forEach(c => c.classList.remove('selected'));
-    $(`#voice-card-${modelName}`)?.classList.add('selected');
-
-    // Disable all select buttons
-    $$('.voice-select-btn').forEach(btn => {
-      btn.disabled = true;
-      if (btn.dataset.model === modelName) {
-        btn.innerHTML = `
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-            <path d="M20 6L9 17l-5-5" />
-          </svg>
-          Selected ✓`;
-      }
-    });
-
-    // Stop any playing audio and reset play/pause buttons
-    $$('.preview-audio').forEach(a => { a.pause(); a.currentTime = 0; });
-    $$('.play-pause-btn').forEach(b => {
-      b.querySelector('.icon-play').style.display = '';
-      b.querySelector('.icon-pause').style.display = 'none';
-    });
-
-    // POST selection to server
-    const res = await fetch(`${API_BASE}/api/jobs/${jobId}/select-model`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ model: modelName }),
-    });
-
-    if (!res.ok) throw new Error('Failed to select model');
-
-    // Collapse preview panel after a short delay
-    setTimeout(() => {
-      if (previewPanel) {
-        previewPanel.classList.remove('visible');
-        previewPanel.classList.add('collapsed');
-      }
-      // Restore spinner
-      const spinner = $('.processing-spinner');
-      if (spinner) spinner.style.display = '';
-      const header = $('.processing-header h3');
-      if (header) header.textContent = 'Synthesising with ' + modelName + '...';
-    }, 800);
-
-    showToast(`Selected ${modelName} — continuing synthesis...`, 'info');
-
-  } catch (err) {
-    showToast(err.message, 'error');
-  }
-}
-
-function setState(state) {
-  const container = document.querySelector('.app-container');
-  container.classList.remove('state-input', 'state-processing', 'state-result');
-  container.classList.add(`state-${state}`);
-
-  if (state !== 'input') {
-    container.style.maxWidth = '100%';
-  } else {
-    container.style.maxWidth = '640px';
-    // If going back to input, reset skeleton visibility
-    const skeleton = document.querySelector('.result-skeleton');
-    const contentWrap = document.querySelector('.result-content-wrap');
-    if (skeleton && contentWrap) {
-      skeleton.style.display = '';
-      contentWrap.style.display = 'none';
-    }
-    // Reset voice preview panel
-    const previewPanel = $('#voice-preview-panel');
-    if (previewPanel) {
-      previewPanel.style.display = 'none';
-      previewPanel.classList.remove('visible', 'collapsed');
-    }
-    // Reset spinner
-    const spinner = $('.processing-spinner');
-    if (spinner) spinner.style.display = '';
-    const procHeader = $('.processing-header h3');
-    if (procHeader) procHeader.textContent = 'Translating your video...';
-  }
-
-  // Disable input controls during processing/result
-  const isNotInput = state !== 'input';
-  $('#file-input').disabled = isNotInput;
-  $('#video-url').disabled = isNotInput;
-  $('#translate-btn').disabled = isNotInput;
-  $('#source-lang').disabled = isNotInput;
-  $('#target-lang').disabled = isNotInput;
-  $('#captions-toggle').disabled = isNotInput;
-  $('#music-toggle').disabled = isNotInput;
-}
-
-// New video button
-const newVideoBtn = $('#new-video-btn');
-if (newVideoBtn) {
-  newVideoBtn.addEventListener('click', () => {
-    clearFile();
-    $('#video-url').value = '';
-    hideUrlPreview();
-    setState('input');
-  });
-}
-
-// ════════════════════════════════════════════════════════
-// TOAST NOTIFICATIONS
-// ════════════════════════════════════════════════════════
-function showToast(message, type = 'info') {
-  const existing = $('.toast');
-  if (existing) existing.remove();
-
-  const toast = document.createElement('div');
-  toast.className = `toast toast-${type}`;
-  toast.innerHTML = `
-    <span>${message}</span>
-    <button onclick="this.parentElement.remove()" aria-label="Dismiss">&times;</button>
-  `;
-  document.body.appendChild(toast);
-
-  // Add styles if not present
-  if (!$('#toast-styles')) {
-    const style = document.createElement('style');
-    style.id = 'toast-styles';
-    style.textContent = `
-      .toast {
-        position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
-        background: var(--surface); border: 1px solid var(--border);
-        border-radius: 12px; padding: 12px 20px;
-        display: flex; align-items: center; gap: 12px;
-        font-size: .875rem; color: var(--text);
-        box-shadow: 0 12px 40px rgba(0,0,0,.5);
-        z-index: 10000; animation: toast-in .3s ease;
-      }
-      .toast-error { border-color: var(--red); }
-      .toast button {
-        background: none; border: none; color: var(--text-3);
-        font-size: 1.2rem; cursor: pointer; padding: 0 4px;
-      }
-      @keyframes toast-in {
-        from { opacity: 0; transform: translateX(-50%) translateY(12px); }
-        to { opacity: 1; transform: translateX(-50%) translateY(0); }
-      }
-    `;
-    document.head.appendChild(style);
-  }
-
-  setTimeout(() => { if (toast.parentElement) toast.remove(); }, 5000);
-}
-
-// ════════════════════════════════════════════════════════
-// CUSTOM PLAY / PAUSE FOR VOICE PREVIEW
-// ════════════════════════════════════════════════════════
-function _setPlaying(btn, playing) {
-  btn.querySelector('.icon-play').style.display = playing ? 'none' : 'block';
-  btn.querySelector('.icon-pause').style.display = playing ? 'block' : 'none';
-}
-
-function initPlayPauseButtons() {
-  // Remove old listeners by cloning buttons
-  $$('.play-pause-btn').forEach(oldBtn => {
-    const btn = oldBtn.cloneNode(true);
-    oldBtn.replaceWith(btn);
-
-    btn.addEventListener('click', async () => {
-      const audio = document.getElementById(btn.dataset.target);
-      if (!audio || !audio.src) return;
-
-      if (audio.paused) {
-        // Pause all other previews first
-        $$('.preview-audio').forEach(a => { if (a !== audio && !a.paused) { a.pause(); a.currentTime = 0; } });
-        $$('.play-pause-btn').forEach(b => { if (b !== btn) _setPlaying(b, false); });
-
-        btn.classList.add('loading');
-        try {
-          await audio.play();
-        } catch (e) {
-          console.warn('Audio play failed:', e);
-        }
-        btn.classList.remove('loading');
-        _setPlaying(btn, !audio.paused);
-      } else {
-        audio.pause();
-        _setPlaying(btn, false);
-      }
-    });
-  });
-
-  // Progress + time updates
-  $$('.preview-audio').forEach(audio => {
-    const player = audio.closest('.voice-card-player');
-    if (!player) return;
-    const bar = player.querySelector('.audio-progress-bar');
-    const timeEl = player.querySelector('.audio-time');
-    const progressTrack = player.querySelector('.audio-progress');
-
-    function findBtn() { return player.querySelector('.play-pause-btn'); }
-
-    audio.addEventListener('timeupdate', () => {
-      if (!audio.duration) return;
-      const pct = (audio.currentTime / audio.duration) * 100;
-      if (bar) bar.style.width = pct + '%';
-      if (timeEl) {
-        const rem = Math.max(0, Math.ceil(audio.duration - audio.currentTime));
-        const m = Math.floor(rem / 60);
-        const s = String(rem % 60).padStart(2, '0');
-        timeEl.textContent = m + ':' + s;
-      }
-    });
-
-    audio.addEventListener('loadedmetadata', () => {
-      if (timeEl && audio.duration && isFinite(audio.duration)) {
-        const d = Math.ceil(audio.duration);
-        const m = Math.floor(d / 60);
-        const s = String(d % 60).padStart(2, '0');
-        timeEl.textContent = m + ':' + s;
-      }
-    });
-
-    audio.addEventListener('ended', () => {
-      if (bar) bar.style.width = '0%';
-      if (timeEl) timeEl.textContent = '0:00';
-      const btn = findBtn();
-      if (btn) _setPlaying(btn, false);
-    });
-
-    audio.addEventListener('error', () => {
-      console.warn('Audio error for', audio.id, audio.error);
-      const btn = findBtn();
-      if (btn) { btn.classList.remove('loading'); _setPlaying(btn, false); }
-    });
-
-    // Click on progress bar to seek
-    if (progressTrack) {
-      progressTrack.addEventListener('click', (e) => {
-        if (!audio.duration) return;
-        const rect = progressTrack.getBoundingClientRect();
-        const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
-        audio.currentTime = pct * audio.duration;
-      });
-    }
-  });
-}
-
-// ════════════════════════════════════════════════════════
-// COMMAND PALETTE (⌘K / Ctrl+K)
-// ════════════════════════════════════════════════════════
-const cmdOverlay = $('#cmd-palette-overlay');
-const cmdSearch = $('#cmd-search');
-const cmdResultsContainer = $('#cmd-results');
-
-const cmdActions = [
-  {
-    group: 'Navigation', items: [
-      { label: 'Go to Home', icon: '🏠', action: () => scrollToSection('#hero') },
-      { label: 'How it Works', icon: '⚡', action: () => scrollToSection('#how-it-works') },
-      { label: 'See Demos', icon: '🎬', action: () => scrollToSection('#demos') },
-      { label: 'Try Now — Free', icon: '🚀', action: () => scrollToSection('#app') },
-      { label: 'View Pricing', icon: '💰', action: () => scrollToSection('#pricing') },
-    ]
-  },
-  {
-    group: 'Actions', items: [
-      { label: 'Upload Video', icon: '📤', action: () => { scrollToSection('#app'); setTimeout(() => { $('#tab-upload')?.click(); }, 400); } },
-      { label: 'Paste URL', icon: '🔗', action: () => { scrollToSection('#app'); setTimeout(() => { $('#tab-url')?.click(); }, 400); } },
-      { label: 'Toggle Dark Mode', icon: '🌙', hint: 'Already dark ✓', action: () => { } },
-    ]
-  },
-  {
-    group: 'Languages', items: [
-      { label: 'Translate to English', icon: '🇬🇧', action: () => setLang('English') },
-      { label: 'Translate to Spanish', icon: '🇪🇸', action: () => setLang('Spanish') },
-      { label: 'Translate to French', icon: '🇫🇷', action: () => setLang('French') },
-      { label: 'Translate to German', icon: '🇩🇪', action: () => setLang('German') },
-      { label: 'Translate to Hindi', icon: '🇮🇳', action: () => setLang('Hindi') },
-      { label: 'Translate to Japanese', icon: '🇯🇵', action: () => setLang('Japanese') },
-      { label: 'Translate to Chinese', icon: '🇨🇳', action: () => setLang('Chinese') },
-      { label: 'Translate to Arabic', icon: '🇸🇦', action: () => setLang('Arabic') },
-      { label: 'Translate to Korean', icon: '🇰🇷', action: () => setLang('Korean') },
-      { label: 'Translate to Portuguese', icon: '🇧🇷', action: () => setLang('Portuguese') },
-      { label: 'Translate to Italian', icon: '🇮🇹', action: () => setLang('Italian') },
-    ]
-  },
-];
-
-function setLang(lang) {
-  const target = $('#target-lang');
-  if (target) target.value = lang;
-  scrollToSection('#app');
-}
-
-function scrollToSection(selector) {
-  const el = $(selector);
-  if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
-}
-
-// Open / close
-function openCmdPalette() {
-  cmdOverlay.classList.add('open');
-  cmdSearch.value = '';
-  renderCmdResults('');
-  setTimeout(() => cmdSearch.focus(), 100);
-}
-function closeCmdPalette() {
-  cmdOverlay.classList.remove('open');
-}
-
-// Keyboard shortcut
-document.addEventListener('keydown', (e) => {
-  if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
-    e.preventDefault();
-    if (cmdOverlay.classList.contains('open')) {
-      closeCmdPalette();
-    } else {
-      openCmdPalette();
-    }
-  }
-  if (e.key === 'Escape' && cmdOverlay.classList.contains('open')) {
-    closeCmdPalette();
-  }
-});
-
-// Close on overlay click
-if (cmdOverlay) {
-  cmdOverlay.addEventListener('click', (e) => {
-    if (e.target === cmdOverlay) closeCmdPalette();
-  });
-}
-
-// Search filtering
-let activeIndex = 0;
-if (cmdSearch) {
-  cmdSearch.addEventListener('input', () => {
-    renderCmdResults(cmdSearch.value);
-  });
-
-  // Arrow key navigation
-  cmdSearch.addEventListener('keydown', (e) => {
-    const items = $$('.cmd-item');
-    if (e.key === 'ArrowDown') {
-      e.preventDefault();
-      activeIndex = Math.min(activeIndex + 1, items.length - 1);
-      updateActiveItem(items);
-    } else if (e.key === 'ArrowUp') {
-      e.preventDefault();
-      activeIndex = Math.max(activeIndex - 1, 0);
-      updateActiveItem(items);
-    } else if (e.key === 'Enter') {
-      e.preventDefault();
-      if (items[activeIndex]) items[activeIndex].click();
-    }
-  });
-}
-
-function updateActiveItem(items) {
-  items.forEach((item, i) => {
-    item.classList.toggle('active', i === activeIndex);
-    if (i === activeIndex) item.scrollIntoView({ block: 'nearest' });
-  });
-}
-
-function renderCmdResults(query) {
-  if (!cmdResultsContainer) return;
-  const q = query.toLowerCase().trim();
-  activeIndex = 0;
-  let html = '';
-
-  cmdActions.forEach(group => {
-    const filtered = group.items.filter(item =>
-      !q || item.label.toLowerCase().includes(q)
-    );
-    if (filtered.length === 0) return;
-
-    html += `<div class="cmd-group-label">${group.group}</div>`;
-    filtered.forEach((item, idx) => {
-      html += `
-        <div class="cmd-item" data-group="${group.group}" data-label="${item.label}">
-          <div class="cmd-item-icon">${item.icon}</div>
-          <span class="cmd-item-text">${item.label}</span>
-          ${item.hint ? `<span class="cmd-item-hint">${item.hint}</span>` : ''}
-        </div>
-      `;
-    });
-  });
-
-  if (!html) {
-    html = `<div style="padding: 32px; text-align: center; color: var(--text-3); font-size: .875rem;">No results for "${query}"</div>`;
-  }
-
-  cmdResultsContainer.innerHTML = html;
-
-  // Bind click handlers
-  $$('.cmd-item').forEach((el, idx) => {
-    el.addEventListener('click', () => {
-      const label = el.dataset.label;
-      const group = el.dataset.group;
-      const groupData = cmdActions.find(g => g.group === group);
-      const itemData = groupData?.items.find(i => i.label === label);
-      if (itemData) {
-        closeCmdPalette();
-        itemData.action();
-      }
-    });
-    el.addEventListener('mouseenter', () => {
-      activeIndex = idx;
-      updateActiveItem($$('.cmd-item'));
-    });
-  });
-
-  // Highlight first
-  const items = $$('.cmd-item');
-  if (items[0]) items[0].classList.add('active');
-}
-
-// ── CMD palette trigger button in nav ───────────────────
-const cmdTrigger = $('#cmd-trigger');
-if (cmdTrigger) {
-  cmdTrigger.addEventListener('click', (e) => {
-    e.preventDefault();
-    openCmdPalette();
-  });
-}
-
-// ════════════════════════════════════════════════════════
-// FREE QUOTA TRACKING (localStorage)
-// ════════════════════════════════════════════════════════
-function getUsedVideos() {
-  return parseInt(localStorage.getItem('vv_used') || '0', 10);
-}
-function incrementUsedVideos() {
-  localStorage.setItem('vv_used', (getUsedVideos() + 1).toString());
-}

frontend/index.html

@@ -1,1089 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>VideoVoice — Translate Any Short Video in the Creator's Own Voice</title>
-  <meta name="description"
-    content="Paste a link or upload a short video. VideoVoice translates it into 23+ languages using AI voice cloning — preserving the original creator's voice." />
-  <meta name="theme-color" content="#000000" />
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&display=swap"
-    rel="stylesheet" />
-  <link rel="stylesheet" href="style.css?v=20260402" />
-</head>
-
-<body>
-  <!-- ── Navigation ────────────────────────────────────── -->
-  <nav class="nav" id="navbar">
-    <div class="nav-inner">
-      <a href="#" class="nav-logo">
-        <span class="logo-icon">▶</span>
-        <span class="logo-text">VideoVoice</span>
-      </a>
-      <div class="nav-links">
-        <a href="#how-it-works">How it works</a>
-        <a href="#demos">Demos</a>
-        <a href="#pricing">Pricing</a>
-        <a href="#" class="cmd-trigger-btn" id="cmd-trigger" title="Search (⌘K)">
-          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <circle cx="11" cy="11" r="8" />
-            <path d="M21 21l-4.35-4.35" />
-          </svg>
-          <span class="cmd-trigger-kbd">⌘K</span>
-        </a>
-        <a href="#app" class="btn btn-primary btn-sm">Try Now — Free</a>
-      </div>
-      <button class="mobile-menu-btn" id="mobile-menu-btn" aria-label="Toggle menu">
-        <span></span><span></span><span></span>
-      </button>
-    </div>
-    <div class="mobile-nav" id="mobile-nav">
-      <a href="#how-it-works">How it works</a>
-      <a href="#demos">Demos</a>
-      <a href="#pricing">Pricing</a>
-      <a href="#app" class="btn btn-primary">Try Now — Free</a>
-    </div>
-  </nav>
-
-  <!-- ── Hero ──────────────────────────────────────────── -->
-  <section class="hero" id="hero">
-
-    <!-- Phone tracks background -->
-    <div class="vid-tracks" aria-hidden="true">
-      <div class="track track-1">
-        <div class="rail" id="vt-r1a"></div>
-        <div class="rail" id="vt-r1b"></div>
-      </div>
-      <div class="track track-2">
-        <div class="rail" id="vt-r2a"></div>
-        <div class="rail" id="vt-r2b"></div>
-      </div>
-      <div class="track track-3">
-        <div class="rail" id="vt-r3a"></div>
-        <div class="rail" id="vt-r3b"></div>
-      </div>
-    </div>
-    <div class="vid-vignette" aria-hidden="true"></div>
-    <div class="vid-grain" aria-hidden="true"></div>
-
-    <!-- Hero content -->
-    <div class="hero-inner">
-      <div class="live-badge">Now live — 23+ languages</div>
-
-      <h1>Any short video.<br>In the creator's <em>own voice.</em></h1>
-
-      <p class="hero-sub">
-        Paste a Reel, Short, or TikTok link — our AI transcribes, translates,
-        and re-voices it using a zero-shot clone of the original speaker.
-        Same person. New language. Seconds.
-      </p>
-
-      <div class="hero-cta">
-        <a href="#app" class="btn btn-primary btn-lg" id="hero-cta-btn">
-          Try free
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-            <path d="M5 12h14M12 5l7 7-7 7" />
-          </svg>
-        </a>
-        <a href="#how-it-works" class="btn btn-ghost btn-lg">
-          See how it works
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <circle cx="12" cy="12" r="10" />
-            <polygon points="10 8 16 12 10 16 10 8" fill="currentColor" stroke="none" />
-          </svg>
-        </a>
-      </div>
-
-      <div class="hero-stats">
-        <div class="hero-stat">
-          <div class="hero-stat-n">23+</div>
-          <div class="hero-stat-l">Languages</div>
-        </div>
-        <div class="hero-stat-div"></div>
-        <div class="hero-stat">
-          <div class="hero-stat-n">&lt;2 min</div>
-          <div class="hero-stat-l">Processing</div>
-        </div>
-        <div class="hero-stat-div"></div>
-        <div class="hero-stat">
-          <div class="hero-stat-n">Zero-Shot</div>
-          <div class="hero-stat-l">Voice Clone</div>
-        </div>
-        <div class="hero-stat-div"></div>
-        <div class="hero-stat">
-          <div class="hero-stat-n">Free</div>
-          <div class="hero-stat-l">First video</div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Scroll hint -->
-    <div class="hero-scroll-hint" aria-hidden="true">
-      <span>Scroll</span>
-      <div class="hero-scroll-arr"></div>
-    </div>
-
-  </section>
-
-  <!-- ── How it works ──────────────────────────────────── -->
-  <section id="how-it-works" class="section">
-    <div class="container">
-      <div class="section-label reveal">
-        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
-        </svg>
-        HOW IT WORKS
-      </div>
-      <h2 class="section-title reveal">Three steps. Fully automated.</h2>
-      <p class="section-sub reveal">Upload your video, pick a language, and let our AI handle the rest.</p>
-
-      <div class="steps-grid">
-        <div class="step-card reveal">
-          <div class="step-number">01</div>
-          <div class="step-icon-wrap">
-            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-              <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12" />
-            </svg>
-          </div>
-          <h3>Upload or Paste Link</h3>
-          <p>Drop a video file or paste an Instagram Reel / YouTube Short URL. We accept any video up to 60 seconds.</p>
-        </div>
-
-        <div class="step-connector reveal">
-          <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
-            opacity="0.3">
-            <path d="M5 12h14M12 5l7 7-7 7" />
-          </svg>
-        </div>
-
-        <div class="step-card reveal">
-          <div class="step-number">02</div>
-          <div class="step-icon-wrap">
-            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-              <circle cx="12" cy="12" r="10" />
-              <path d="M12 6v6l4 2" />
-            </svg>
-          </div>
-          <h3>AI Translates & Clones</h3>
-          <p>Our pipeline transcribes, translates, and synthesizes new speech using a voice clone of the original
-            speaker.</p>
-        </div>
-
-        <div class="step-connector reveal">
-          <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
-            opacity="0.3">
-            <path d="M5 12h14M12 5l7 7-7 7" />
-          </svg>
-        </div>
-
-        <div class="step-card reveal">
-          <div class="step-number">03</div>
-          <div class="step-icon-wrap">
-            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-              <polygon points="5 3 19 12 5 21 5 3" />
-            </svg>
-          </div>
-          <h3>Preview & Download</h3>
-          <p>Watch your translated video right here. Download it in full quality and share it with the world.</p>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- ── Why VideoVoice ─────────────────────────────────── -->
-  <section id="why-us" class="section">
-    <div class="container">
-      <div class="section-label reveal">
-        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <path d="M9 18l6-6-6-6" />
-        </svg>
-        WHY VIDEOVOICE
-      </div>
-      <h2 class="section-title reveal">Auto-dub loses your voice. We keep it.</h2>
-      <p class="section-sub reveal">YouTube and Instagram translate with generic TTS. Your audience can tell.
-        VideoVoice clones your actual voice so your content sounds like <em>you</em> in every language.</p>
-
-      <!-- Contrast cards -->
-      <div class="contrast-grid reveal">
-        <div class="contrast-card contrast-them">
-          <div class="contrast-header">
-            <span class="contrast-badge them-badge">Platform auto-dub</span>
-          </div>
-          <ul class="contrast-list">
-            <li>
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M18 6L6 18M6 6l12 12"/></svg>
-              Generic robot voice
-            </li>
-            <li>
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M18 6L6 18M6 6l12 12"/></svg>
-              Locked to one platform
-            </li>
-            <li>
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M18 6L6 18M6 6l12 12"/></svg>
-              No control over output
-            </li>
-            <li>
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M18 6L6 18M6 6l12 12"/></svg>
-              Captions only (no voice dub)
-            </li>
-          </ul>
-        </div>
-
-        <div class="contrast-vs reveal">VS</div>
-
-        <div class="contrast-card contrast-us">
-          <div class="contrast-header">
-            <span class="contrast-badge us-badge">VideoVoice</span>
-          </div>
-          <ul class="contrast-list">
-            <li>
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
-              Your voice, cloned with AI
-            </li>
-            <li>
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
-              Download & post anywhere
-            </li>
-            <li>
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
-              Preview & choose voice model
-            </li>
-            <li>
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
-              Burn-in captions + voice dub
-            </li>
-          </ul>
-        </div>
-      </div>
-
-      <!-- Market comparison table -->
-      <div class="compare-wrap reveal">
-        <h3 class="compare-title">How we stack up</h3>
-        <p class="compare-sub">Honest pricing comparison with leading AI dubbing services.</p>
-        <div class="compare-table-scroll">
-          <table class="compare-table">
-            <thead>
-              <tr>
-                <th>Service</th>
-                <th>Starting price</th>
-                <th>Voice clone</th>
-                <th>Lip sync</th>
-                <th>Cross-platform</th>
-                <th>Captions</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td><strong>HeyGen</strong></td>
-                <td>$24/mo <span class="compare-note">15 min</span></td>
-                <td class="c-yes">Yes</td>
-                <td class="c-yes">Yes</td>
-                <td class="c-yes">Yes</td>
-                <td class="c-no">No</td>
-              </tr>
-              <tr>
-                <td><strong>Rask.ai</strong></td>
-                <td>$60/mo <span class="compare-note">25 min</span></td>
-                <td class="c-yes">Yes</td>
-                <td class="c-mid">Add-on</td>
-                <td class="c-yes">Yes</td>
-                <td class="c-yes">SRT export</td>
-              </tr>
-              <tr>
-                <td><strong>ElevenLabs</strong></td>
-                <td>$22/mo <span class="compare-note">char-based</span></td>
-                <td class="c-yes">Yes</td>
-                <td class="c-no">No</td>
-                <td class="c-yes">Yes</td>
-                <td class="c-no">No</td>
-              </tr>
-              <tr>
-                <td><strong>Synthesia</strong></td>
-                <td>$22/mo <span class="compare-note">10 min</span></td>
-                <td class="c-mid">Limited</td>
-                <td class="c-mid">Avatar only</td>
-                <td class="c-mid">Partial</td>
-                <td class="c-no">No</td>
-              </tr>
-              <tr>
-                <td><strong>YouTube</strong></td>
-                <td>Free</td>
-                <td class="c-no">No</td>
-                <td class="c-no">No</td>
-                <td class="c-no">YouTube only</td>
-                <td class="c-yes">Auto</td>
-              </tr>
-              <tr>
-                <td><strong>IG / TikTok</strong></td>
-                <td>Free</td>
-                <td class="c-no">No</td>
-                <td class="c-no">No</td>
-                <td class="c-no">In-app only</td>
-                <td class="c-mid">Captions only</td>
-              </tr>
-              <tr class="compare-highlight">
-                <td><strong>VideoVoice</strong></td>
-                <td>Free <span class="compare-note">1st video free</span></td>
-                <td class="c-yes">Yes</td>
-                <td class="c-no">No</td>
-                <td class="c-yes">Yes</td>
-                <td class="c-yes">Burn-in</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <p class="compare-footnote">Prices as of early 2025. VideoVoice is free during beta — no account needed.</p>
-      </div>
-
-    </div>
-  </section>
-
-  <!-- ── Features ──────────────────────────────────────── -->
-  <section class="section section-dark">
-    <div class="container">
-      <div class="section-label reveal">
-        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
-        </svg>
-        POWERED BY
-      </div>
-      <h2 class="section-title reveal">State-of-the-art AI pipeline</h2>
-      <p class="section-sub reveal">Six ML models working in harmony — from transcription to voice cloning.</p>
-
-      <div class="features-grid">
-        <div class="feature-card reveal">
-          <div class="feature-icon">🎙</div>
-          <h3>Whisper Large V3</h3>
-          <p>Precise transcription with word-level timestamps via OpenAI's most accurate speech model.</p>
-        </div>
-        <div class="feature-card reveal">
-          <div class="feature-icon">🌍</div>
-          <h3>LLM Translation</h3>
-          <p>Context-aware subtitle translation that preserves meaning, idioms, and technical terms.</p>
-        </div>
-        <div class="feature-card reveal">
-          <div class="feature-icon">🗣️</div>
-          <h3>Chatterbox Voice Clone</h3>
-          <p>Zero-shot multilingual voice cloning — the translated speech sounds like the original speaker.</p>
-        </div>
-        <div class="feature-card reveal">
-          <div class="feature-icon">⏱️</div>
-          <h3>Frame-Accurate Sync</h3>
-          <p>Dynamic time-stretching ensures the new audio perfectly aligns with the original video timing.</p>
-        </div>
-        <div class="feature-card reveal">
-          <div class="feature-icon">🔗</div>
-          <h3>URL Import</h3>
-          <p>Paste any Instagram Reel or YouTube Short link — we'll download and process it automatically.</p>
-        </div>
-        <div class="feature-card reveal">
-          <div class="feature-icon">📦</div>
-          <h3>Lossless Export</h3>
-          <p>Original video frames are never re-encoded. Only the audio track is replaced for maximum quality.</p>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- ── Demo Showcase ──────────────────────────────────── -->
-  <section id="demos" class="section">
-    <div class="container">
-      <div class="section-label reveal">
-        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <polygon points="23 7 16 12 23 17 23 7" />
-          <rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
-        </svg>
-        DEMO SHOWCASE
-      </div>
-      <h2 class="section-title reveal">Hear the difference</h2>
-      <p class="section-sub reveal">Original videos side-by-side with AI-dubbed translations. Same voice. New language.</p>
-
-      <div id="showcase-container" aria-live="polite">
-        <div class="demos-state demos-state-loading" id="showcase-loading">
-          Loading showcase...
-        </div>
-        <div class="demos-state demos-state-error" id="showcase-error" hidden>
-          Could not load showcase right now.
-        </div>
-        <div id="showcase-rows" hidden></div>
-      </div>
-
-      <!-- Fallback: old masonry grid if showcase is empty -->
-      <div class="demos-wall" id="demo-videos-wall" aria-live="polite" hidden>
-        <div class="demos-state demos-state-loading" id="demo-videos-loading" hidden>
-          Loading demo videos...
-        </div>
-        <div class="demos-state demos-state-error" id="demo-videos-error" hidden>
-          Could not load demo videos right now.
-        </div>
-        <div class="demos-state demos-state-empty" id="demo-videos-empty" hidden>
-          No demo videos are available yet.
-        </div>
-        <div class="demos-lanes" id="demo-videos-lanes" hidden>
-          <div class="demos-lane" data-lane="0"></div>
-          <div class="demos-lane" data-lane="1"></div>
-          <div class="demos-lane" data-lane="2"></div>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- ── App / Try Now ─────────────────────────────────── -->
-  <section id="app" class="section section-dark">
-    <div class="container">
-      <div class="section-label reveal">
-        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <path
-            d="M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z" />
-        </svg>
-        TRY IT NOW
-      </div>
-      <h2 class="section-title reveal">Translate your first video — free</h2>
-      <p class="section-sub reveal">No account needed. Paste a link or upload a file. Get your translated video in under
-        2 minutes.</p>
-
-      <div class="app-container state-input reveal">
-        <!-- Input state -->
-        <div class="app-panel" id="app-input">
-          <!-- Tab switcher -->
-          <div class="input-tabs">
-            <button class="tab-btn active" data-tab="url" id="tab-url">
-              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71" />
-                <path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71" />
-              </svg>
-              Paste URL
-            </button>
-            <button class="tab-btn" data-tab="upload" id="tab-upload">
-              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12" />
-              </svg>
-              Upload File
-            </button>
-          </div>
-
-          <!-- URL input -->
-          <div class="tab-content active" id="content-url">
-            <div class="url-input-wrap">
-              <input type="url" id="video-url" class="url-input"
-                placeholder="Paste Instagram Reel or YouTube Short URL..." autocomplete="off" />
-              <div class="url-platforms">
-                <span class="platform-tag">
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
-                    <path
-                      d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073z" />
-                  </svg>
-                  Instagram Reels
-                </span>
-                <span class="platform-tag">
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
-                    <path
-                      d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
-                  </svg>
-                  YouTube Shorts
-                </span>
-                <span class="platform-tag">
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
-                    <path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.1v-3.5a6.37 6.37 0 00-.79-.05A6.34 6.34 0 003.15 15.2a6.34 6.34 0 0010.86 4.43V13.1a8.78 8.78 0 005.58 2v-3.44a4.85 4.85 0 01-3.77-1.2v-3.77z"/>
-                  </svg>
-                  TikTok
-                </span>
-              </div>
-            </div>
-            <!-- URL preview card -->
-            <div class="url-preview-card" id="url-preview" style="display:none">
-              <div class="url-preview-icon" id="url-preview-icon"></div>
-              <div class="url-preview-details">
-                <span class="url-preview-platform" id="url-preview-platform"></span>
-                <span class="url-preview-link" id="url-preview-link"></span>
-              </div>
-              <button class="url-preview-remove" id="url-preview-remove" aria-label="Clear URL">✕</button>
-            </div>
-          </div>
-
-          <!-- File upload -->
-          <div class="tab-content" id="content-upload">
-            <div class="drop-zone" id="drop-zone">
-              <div class="drop-zone-content">
-                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
-                  class="drop-icon">
-                  <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12" />
-                </svg>
-                <p class="drop-text">Drag & drop your video here</p>
-                <p class="drop-hint">or click to browse · MP4, MOV, WebM · Under 60s</p>
-                <input type="file" id="file-input" accept="video/mp4,video/quicktime,video/webm" hidden />
-              </div>
-              <div class="drop-zone-file" id="file-preview" style="display:none">
-                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <polygon points="23 7 16 12 23 17 23 7" />
-                  <rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
-                </svg>
-                <span id="file-name">video.mp4</span>
-                <button class="file-remove" id="file-remove" aria-label="Remove file">✕</button>
-              </div>
-            </div>
-            <!-- Upload video preview -->
-            <div class="video-preview" id="upload-preview" style="display:none">
-              <div class="video-preview-inner">
-                <video id="upload-preview-video" controls playsinline loop></video>
-                <button class="video-preview-remove" id="upload-preview-remove" aria-label="Remove video">✕</button>
-              </div>
-            </div>
-          </div>
-
-          <!-- Language selector -->
-          <div class="language-row">
-            <div class="lang-select-wrap">
-              <label for="source-lang">From</label>
-              <select id="source-lang" class="lang-select">
-                <option value="ar">Arabic</option>
-                <option value="zh">Chinese</option>
-                <option value="da">Danish</option>
-                <option value="nl">Dutch</option>
-                <option value="en" selected>English</option>
-                <option value="fi">Finnish</option>
-                <option value="fr">French</option>
-                <option value="de">German</option>
-                <option value="el">Greek</option>
-                <option value="he">Hebrew</option>
-                <option value="hi">Hindi</option>
-                <option value="it">Italian</option>
-                <option value="ja">Japanese</option>
-                <option value="ko">Korean</option>
-                <option value="ms">Malay</option>
-                <option value="no">Norwegian</option>
-                <option value="pl">Polish</option>
-                <option value="pt">Portuguese</option>
-                <option value="ru">Russian</option>
-                <option value="es">Spanish</option>
-                <option value="sw">Swahili</option>
-                <option value="sv">Swedish</option>
-                <option value="tr">Turkish</option>
-                <option value="ur">Urdu</option>
-              </select>
-            </div>
-            <div class="lang-swap" id="lang-swap" title="Swap languages">
-              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M7 16V4m0 12l-4-4m4 4l4-4M17 8v12m0-12l4 4m-4-4l-4 4" />
-              </svg>
-            </div>
-            <div class="lang-select-wrap">
-              <label for="target-lang">To</label>
-              <select id="target-lang" class="lang-select">
-                <option value="Arabic">Arabic</option>
-                <option value="Chinese">Chinese</option>
-                <option value="Danish">Danish</option>
-                <option value="Dutch">Dutch</option>
-                <option value="English">English</option>
-                <option value="Finnish">Finnish</option>
-                <option value="French">French</option>
-                <option value="German">German</option>
-                <option value="Greek">Greek</option>
-                <option value="Hebrew">Hebrew</option>
-                <option value="Hindi">Hindi</option>
-                <option value="Italian">Italian</option>
-                <option value="Japanese">Japanese</option>
-                <option value="Korean">Korean</option>
-                <option value="Malay">Malay</option>
-                <option value="Norwegian">Norwegian</option>
-                <option value="Polish">Polish</option>
-                <option value="Portuguese">Portuguese</option>
-                <option value="Russian">Russian</option>
-                <option value="Spanish" selected>Spanish</option>
-                <option value="Swahili">Swahili</option>
-                <option value="Swedish">Swedish</option>
-                <option value="Turkish">Turkish</option>
-                <option value="Urdu">Urdu</option>
-              </select>
-            </div>
-          </div>
-
-          <!-- Voice model selector -->
-          <div class="voice-mode-group">
-            <label class="voice-mode-label">Voice Model</label>
-            <div class="voice-mode-options">
-              <label class="voice-mode-option" for="vm-preview">
-                <input type="radio" name="voice_mode" id="vm-preview" value="preview_both" checked />
-                <div class="voice-mode-card">
-                  <div class="voice-mode-card-inner">
-                    <span class="voice-mode-icon">🎧</span>
-                    <div>
-                      <strong>Preview both</strong>
-                      <span class="voice-mode-hint">Recommended — compare voices before full synthesis</span>
-                    </div>
-                  </div>
-                </div>
-              </label>
-              <label class="voice-mode-option" for="vm-chatterbox">
-                <input type="radio" name="voice_mode" id="vm-chatterbox" value="chatterbox" />
-                <div class="voice-mode-card">
-                  <div class="voice-mode-card-inner">
-                    <span class="voice-mode-icon">🗣️</span>
-                    <div>
-                      <strong>Chatterbox only</strong>
-                      <span class="voice-mode-hint">Resemble AI voice clone</span>
-                    </div>
-                  </div>
-                </div>
-              </label>
-            </div>
-          </div>
-
-          <!-- Captions toggle -->
-          <div class="option-row">
-            <label class="toggle-label" for="captions-toggle">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <rect x="1" y="4" width="22" height="16" rx="2"/>
-                <path d="M7 15h4M15 15h2M7 11h2M13 11h4"/>
-              </svg>
-              Burn-in captions
-            </label>
-            <label class="toggle-switch">
-              <input type="checkbox" id="captions-toggle" checked />
-              <span class="toggle-track"></span>
-            </label>
-          </div>
-
-          <!-- Preserve background music toggle -->
-          <div class="option-row">
-            <label class="toggle-label" for="music-toggle">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M9 18V5l12-2v13"/>
-                <circle cx="6" cy="18" r="3"/>
-                <circle cx="18" cy="16" r="3"/>
-              </svg>
-              Preserve background music
-            </label>
-            <label class="toggle-switch">
-              <input type="checkbox" id="music-toggle" />
-              <span class="toggle-track"></span>
-            </label>
-          </div>
-
-          <!-- Submit -->
-          <button class="btn btn-primary btn-xl btn-full" id="translate-btn">
-            <span class="btn-text">Translate Video</span>
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
-              stroke-linecap="round" stroke-linejoin="round">
-              <path d="M5 12h14M12 5l7 7-7 7" />
-            </svg>
-          </button>
-          <p class="free-note" id="free-note">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
-            </svg>
-            Your first video is <strong>completely free</strong> — no account required
-          </p>
-        </div>
-
-        <!-- Processing state -->
-        <div class="app-panel" id="app-processing">
-          <div class="processing-header">
-            <div class="processing-spinner"></div>
-            <h3>Translating your video...</h3>
-            <p id="processing-step">Initializing pipeline</p>
-          </div>
-
-          <div class="progress-bar-wrap">
-            <div class="progress-bar" id="progress-bar"></div>
-          </div>
-
-          <div class="terminal-mini">
-            <div class="terminal-bar">
-              <div class="terminal-dots">
-                <span class="dot red"></span><span class="dot yellow"></span><span class="dot green"></span>
-              </div>
-              <span class="terminal-title">pipeline output</span>
-            </div>
-            <div class="terminal-body terminal-scroll" id="processing-log"></div>
-          </div>
-
-          <!-- Voice Preview Panel (shown when previews are ready) -->
-          <div id="voice-preview-panel" class="voice-preview-panel" style="display:none">
-            <div class="voice-preview-header">
-              <div class="voice-preview-pulse"></div>
-              <h4>Choose your voice</h4>
-              <p>Listen to a 30-second preview from each model, then select your favourite</p>
-            </div>
-            <div class="voice-cards">
-              <div class="voice-card" data-model="chatterbox" id="voice-card-chatterbox">
-                <span class="voice-card-badge">🗣️ Chatterbox</span>
-                <div class="voice-card-player">
-                  <audio preload="none" id="preview-audio-chatterbox" class="preview-audio"></audio>
-                  <button class="play-pause-btn" data-target="preview-audio-chatterbox" aria-label="Play preview">
-                    <svg class="icon-play" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><polygon points="6,3 20,12 6,21"/></svg>
-                    <svg class="icon-pause" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" style="display:none"><rect x="5" y="3" width="4" height="18"/><rect x="15" y="3" width="4" height="18"/></svg>
-                  </button>
-                  <div class="audio-progress">
-                    <div class="audio-progress-bar"></div>
-                  </div>
-                  <span class="audio-time">0:00</span>
-                </div>
-                <button class="btn btn-primary btn-sm voice-select-btn" data-model="chatterbox" id="select-chatterbox">
-                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-                    <path d="M20 6L9 17l-5-5" />
-                  </svg>
-                  Select this voice
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Result state -->
-        <div class="app-panel" id="app-result">
-          <!-- Skeleton placeholder -->
-          <div class="result-skeleton">
-            <div class="skel-bar" style="height: 64px; border-radius: 12px; margin-bottom: 24px;"></div>
-            <div class="skel-bar" style="height: 380px; border-radius: 16px; margin-bottom: 24px;"></div>
-            <div class="skel-bar" style="height: 56px; border-radius: 12px;"></div>
-          </div>
-
-          <div class="result-content-wrap" style="display:none">
-            <div class="result-header">
-              <div class="result-check">
-                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-                  <path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
-                  <path d="M22 4L12 14.01l-3-3" />
-                </svg>
-              </div>
-              <h3>Translation complete!</h3>
-              <p id="result-meta">English → Spanish · Processed in 47s</p>
-            </div>
-
-            <div class="video-player-wrap">
-              <video id="result-video" controls playsinline class="result-video">
-                Your browser does not support the video tag.
-              </video>
-            </div>
-
-            <div class="result-actions">
-              <a href="#" class="btn btn-primary btn-lg" id="download-btn" download>
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3" />
-                </svg>
-                Download Video
-              </a>
-              <button class="btn btn-ghost btn-lg" id="new-video-btn">
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <path d="M12 5v14M5 12h14" />
-                </svg>
-                Translate Another
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- ── Pricing ───────────────────────────────────────── -->
-  <section id="pricing" class="section">
-    <div class="container">
-      <div class="section-label reveal">
-        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <line x1="12" y1="1" x2="12" y2="23" />
-          <path d="M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6" />
-        </svg>
-        PRICING
-      </div>
-      <h2 class="section-title reveal">Simple, creator-friendly pricing</h2>
-      <p class="section-sub reveal">Start free. Scale when you're ready. Built for creators, not enterprises.</p>
-
-      <div class="pricing-grid">
-        <!-- Free -->
-        <div class="pricing-card reveal">
-          <div class="pricing-badge">Try it</div>
-          <h3 class="pricing-name">Free</h3>
-          <div class="pricing-price">
-            <span class="price-amount">$0</span>
-          </div>
-          <p class="pricing-desc">Perfect for trying out VideoVoice with your first video.</p>
-          <ul class="pricing-features">
-            <li>
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-                <path d="M20 6L9 17l-5-5" />
-              </svg>
-              1 free video translation
-            </li>
-            <li>
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-                <path d="M20 6L9 17l-5-5" />
-              </svg>
-              Up to 60 seconds
-            </li>
-            <li>
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-                <path d="M20 6L9 17l-5-5" />
-              </svg>
-              All 23+ languages
-            </li>
-            <li>
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-                <path d="M20 6L9 17l-5-5" />
-              </svg>
-              Full quality download
-            </li>
-          </ul>
-          <a href="#app" class="btn btn-ghost btn-full">Get started</a>
-        </div>
-
-        <!-- Starter -->
-        <div class="pricing-card pricing-popular reveal">
-          <div class="pricing-badge popular-badge">Most popular</div>
-          <h3 class="pricing-name">Starter</h3>
-          <div class="pricing-price">
-            <span class="price-amount">$4.99</span>
-            <span class="price-period">/month</span>
-          </div>
-          <p class="pricing-desc">For creators who need regular translations for their content.</p>
-          <ul class="pricing-features">
-            <li>
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-                <path d="M20 6L9 17l-5-5" />
-              </svg>
-              10 videos per month
-            </li>
-            <li>
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-                <path d="M20 6L9 17l-5-5" />
-              </svg>
-              Up to 60 seconds each
-            </li>
-            <li>
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-                <path d="M20 6L9 17l-5-5" />
-              </svg>
-              Priority processing queue
-            </li>
-            <li>
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-                <path d="M20 6L9 17l-5-5" />
-              </svg>
-              HD quality export
-            </li>
-            <li>
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-                <path d="M20 6L9 17l-5-5" />
-              </svg>
-              Email support
-            </li>
-          </ul>
-          <a href="#" class="btn btn-primary btn-full" id="buy-starter">Get Starter</a>
-        </div>
-
-        <!-- Creator -->
-        <div class="pricing-card reveal">
-          <div class="pricing-badge">Best value</div>
-          <h3 class="pricing-name">Creator</h3>
-          <div class="pricing-price">
-            <span class="price-amount">$14.99</span>
-            <span class="price-period">/month</span>
-          </div>
-          <p class="pricing-desc">For professional creators and agencies scaling multilingual content.</p>
-          <ul class="pricing-features">
-            <li>
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-                <path d="M20 6L9 17l-5-5" />
-              </svg>
-              50 videos per month
-            </li>
-            <li>
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-                <path d="M20 6L9 17l-5-5" />
-              </svg>
-              Up to 60 seconds each
-            </li>
-            <li>
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-                <path d="M20 6L9 17l-5-5" />
-              </svg>
-              Fastest processing
-            </li>
-            <li>
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-                <path d="M20 6L9 17l-5-5" />
-              </svg>
-              All 23+ languages
-            </li>
-            <li>
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-                <path d="M20 6L9 17l-5-5" />
-              </svg>
-              Priority support
-            </li>
-            <li>
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-                <path d="M20 6L9 17l-5-5" />
-              </svg>
-              API access (coming soon)
-            </li>
-          </ul>
-          <a href="#" class="btn btn-ghost btn-full" id="buy-creator">Get Creator</a>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- ── CTA ───────────────────────────────────────────── -->
-  <section class="cta-section">
-    <div class="container">
-      <div class="cta-card reveal">
-        <h2>Ready to break the language barrier?</h2>
-        <p>Translate your first video for free. No account needed. Takes under 2 minutes.</p>
-        <a href="#app" class="btn btn-primary btn-lg">
-          Try VideoVoice Now
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-            <path d="M5 12h14M12 5l7 7-7 7" />
-          </svg>
-        </a>
-      </div>
-    </div>
-  </section>
-
-  <!-- ── Footer ────────────────────────────────────────── -->
-  <footer class="footer">
-    <div class="container footer-inner">
-      <div class="footer-brand">
-        <a href="#" class="nav-logo">
-          <span class="logo-icon">▶</span>
-          <span class="logo-text">VideoVoice</span>
-        </a>
-        <p>AI-powered video translation with voice cloning.<br />Same creator. New language. Seconds.</p>
-      </div>
-      <div class="footer-links">
-        <div class="footer-col">
-          <h4>Product</h4>
-          <a href="#how-it-works">How it works</a>
-          <a href="#demos">Demos</a>
-          <a href="#app">Try now</a>
-          <a href="#pricing">Pricing</a>
-        </div>
-        <div class="footer-col">
-          <h4>Legal</h4>
-          <a href="#">Privacy Policy</a>
-          <a href="#">Terms of Service</a>
-        </div>
-        <div class="footer-col">
-          <h4>Contact</h4>
-          <a href="mailto:hello@videovoice.ai">hello@videovoice.ai</a>
-        </div>
-      </div>
-    </div>
-    <div class="container footer-bottom">
-      <p>&copy; 2026 VideoVoice. All rights reserved.</p>
-    </div>
-  </footer>
-
-  <!-- ── Command Palette (⌘K) ──────────────────────────── -->
-  <div class="cmd-palette-overlay" id="cmd-palette-overlay">
-    <div class="cmd-palette">
-      <div class="cmd-search-wrap">
-        <svg class="cmd-search-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-          stroke-width="2">
-          <circle cx="11" cy="11" r="8" />
-          <path d="M21 21l-4.35-4.35" />
-        </svg>
-        <input type="text" class="cmd-search" id="cmd-search" placeholder="Search actions, navigate, set language..."
-          autocomplete="off" />
-        <span class="cmd-kbd">ESC</span>
-      </div>
-      <div class="cmd-results" id="cmd-results"></div>
-      <div class="cmd-footer">
-        <div class="cmd-footer-keys">
-          <kbd>↑</kbd><kbd>↓</kbd> <span>to navigate</span>
-        </div>
-        <div class="cmd-footer-keys">
-          <kbd>↵</kbd> <span>to select</span>
-        </div>
-        <div class="cmd-footer-keys">
-          <kbd>esc</kbd> <span>to close</span>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- ── Video phone tracks script ── -->
-  <script>
-    (function () {
-      const vids = [
-        { src: 'https://videos.pexels.com/video-files/3571264/3571264-hd_1280_720_30fps.mp4', platform: 'tiktok', handle: '@miachef', desc: 'Homemade pasta from scratch 🍝', lang: 'ES → EN' },
-        { src: 'https://videos.pexels.com/video-files/4064155/4064155-hd_1280_720_25fps.mp4', platform: 'reels', handle: '@seoulfashion', desc: 'K-fashion haul 2025 🛍️', lang: 'KR → FR' },
-        { src: 'https://videos.pexels.com/video-files/5329430/5329430-hd_1280_720_30fps.mp4', platform: 'shorts', handle: '@priya.fit', desc: '5-min morning routine 🔥', lang: 'HI → EN' },
-        { src: 'https://videos.pexels.com/video-files/3209828/3209828-hd_1280_720_25fps.mp4', platform: 'tiktok', handle: '@food.tales', desc: 'Street food in Mexico City 🌮', lang: 'PT → EN' },
-        { src: 'https://videos.pexels.com/video-files/6804077/6804077-hd_1280_720_30fps.mp4', platform: 'reels', handle: '@linabeauty', desc: 'Skincare routine that changed my life ✨', lang: 'FR → EN' },
-        { src: 'https://videos.pexels.com/video-files/5698697/5698697-hd_1280_720_25fps.mp4', platform: 'shorts', handle: '@maya.style', desc: 'Thrift flip challenge 💫', lang: 'DE → EN' },
-        { src: 'https://videos.pexels.com/video-files/3195394/3195394-hd_1280_720_25fps.mp4', platform: 'tiktok', handle: '@chefmarco', desc: 'Risotto trick no one tells you 🍚', lang: 'IT → EN' },
-        { src: 'https://videos.pexels.com/video-files/4126542/4126542-hd_1280_720_30fps.mp4', platform: 'reels', handle: '@lara.beats', desc: 'New single just dropped 🎵', lang: 'AR → EN' },
-        { src: 'https://videos.pexels.com/video-files/5713888/5713888-hd_1280_720_25fps.mp4', platform: 'shorts', handle: '@dancestudio', desc: 'Viral choreography tutorial 💃', lang: 'JP → EN' },
-        { src: 'https://videos.pexels.com/video-files/3048527/3048527-hd_1280_720_25fps.mp4', platform: 'tiktok', handle: '@zenwithyoga', desc: 'Morning flow for beginners 🧘', lang: 'ZH → EN' },
-        { src: 'https://videos.pexels.com/video-files/4101665/4101665-hd_1280_720_30fps.mp4', platform: 'reels', handle: '@alexlifts', desc: 'Clean bulk meal prep 💪', lang: 'RU → EN' },
-        { src: 'https://videos.pexels.com/video-files/856797/856797-hd_1280_720_30fps.mp4', platform: 'shorts', handle: '@wanderlust', desc: 'Bali hidden beaches 🌊', lang: 'ID → EN' },
-      ];
-
-      const svgHeart = `<svg viewBox="0 0 24 24" fill="white" opacity="0.9"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>`;
-      const svgShare = `<svg viewBox="0 0 24 24" fill="white" opacity="0.9"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/></svg>`;
-      const svgMute = `<svg viewBox="0 0 24 24" fill="rgba(255,255,255,0.7)"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/></svg>`;
-
-      const platClass = { tiktok: 'vid-p-tiktok', reels: 'vid-p-reels', shorts: 'vid-p-shorts' };
-      const platLabel = { tiktok: 'TikTok', reels: 'Reels', shorts: 'Shorts' };
-
-      function makePhone(data) {
-        const el = document.createElement('div');
-        el.className = 'vid-phone';
-        el.innerHTML = `
-          <video src="${data.src}" autoplay muted loop playsinline preload="none"></video>
-          <div class="vid-phone-scrim"></div>
-          <span class="vid-badge-plat ${platClass[data.platform]}">${platLabel[data.platform]}</span>
-          <div class="vid-muted-icon">${svgMute}</div>
-          <div class="vid-xlate">
-            <div class="vid-xlate-dot"></div>
-            ${data.lang}
-            <div class="vid-wave"><b></b><b></b><b></b><b></b><b></b></div>
-          </div>
-          <div class="vid-phone-actions">
-            <div class="vid-act-btn">${svgHeart}</div>
-            <div class="vid-act-btn">${svgShare}</div>
-          </div>
-          <div class="vid-info">
-            <div class="vid-handle">${data.handle}</div>
-            <div class="vid-desc">${data.desc}</div>
-          </div>`;
-        el.querySelector('video').addEventListener('error', () => { el.style.display = 'none'; });
-        return el;
-      }
-
-      function fillTrack(railAId, railBId, items) {
-        const a = document.getElementById(railAId);
-        const b = document.getElementById(railBId);
-        [...items, ...items].forEach(d => { a.appendChild(makePhone(d)); b.appendChild(makePhone(d)); });
-      }
-
-      fillTrack('vt-r1a', 'vt-r1b', vids.slice(0, 4));
-      fillTrack('vt-r2a', 'vt-r2b', vids.slice(4, 8));
-      fillTrack('vt-r3a', 'vt-r3b', vids.slice(8, 12));
-
-      // Stagger translation pill animations
-      document.querySelectorAll('.vid-xlate').forEach((x, i) => {
-        const onDelay = (i * 1300 + Math.random() * 800) % 7000;
-        function show() { x.classList.add('on'); setTimeout(hide, 2800 + Math.random() * 1000); }
-        function hide() { x.classList.remove('on'); setTimeout(show, 3000 + Math.random() * 2000); }
-        setTimeout(show, onDelay);
-      });
-
-      // Pause scroll on hover
-      document.querySelectorAll('.vid-phone').forEach(p => {
-        p.addEventListener('mouseenter', () => document.querySelectorAll('.vid-tracks .rail').forEach(r => r.style.animationPlayState = 'paused'));
-        p.addEventListener('mouseleave', () => document.querySelectorAll('.vid-tracks .rail').forEach(r => r.style.animationPlayState = 'running'));
-      });
-    })();
-  </script>
-
-  <script src="app.js?v=20260402d"></script>
-</body>
-
-</html>

frontend/style.css

@@ -1,3469 +0,0 @@
-/* ════════════════════════════════════════════════════════════
-   VideoVoice — Production Design System
-   Inspired by Sploink.ai: deep black, orange accent, terminal UI
-   ════════════════════════════════════════════════════════════ */
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-:root {
-  /* ── Palette ─────────────────── */
-  --bg: #07090f;
-  --bg-elevated: #0d1020;
-  --surface: #121526;
-  --surface-2: #171c32;
-  --border: rgba(255, 255, 255, 0.08);
-  --border-hover: rgba(255, 255, 255, 0.18);
-
-  /* Accent */
-  --accent: #5b6ef5;
-  --accent2: #a78bfa;
-  --accent-hover: #7b8df7;
-  --accent-glow: rgba(91, 110, 245, 0.38);
-  --accent-dim: rgba(91, 110, 245, 0.12);
-
-  /* Semantic */
-  --green: #5bf0a0;
-  --green-dim: rgba(91, 240, 160, 0.12);
-  --blue: #5b6ef5;
-  --red: #ef4444;
-  --yellow: #eab308;
-
-  /* Text */
-  --text: #f0f0f6;
-  --text-2: rgba(240, 240, 246, 0.55);
-  --text-3: rgba(240, 240, 246, 0.28);
-
-  /* Geometry */
-  --radius: 12px;
-  --radius-lg: 16px;
-  --radius-xl: 20px;
-  --container: 1120px;
-
-  /* Type */
-  --font: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
-  --font-display: 'Syne', var(--font);
-  --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
-}
-
-html {
-  scroll-behavior: smooth;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-body {
-  background: var(--bg);
-  color: var(--text);
-  font-family: var(--font);
-  font-size: 15px;
-  line-height: 1.6;
-  overflow-x: hidden;
-}
-
-/* ── Selection ─────────────────────────────────────────── */
-::selection {
-  background: var(--accent);
-  color: #fff;
-}
-
-/* ════════════════════════════════════════════════════════
-   LAYOUT
-   ════════════════════════════════════════════════════════ */
-.container {
-  max-width: var(--container);
-  margin: 0 auto;
-  padding: 0 24px;
-}
-
-/* ════════════════════════════════════════════════════════
-   DOT GRID BACKGROUND
-   ════════════════════════════════════════════════════════ */
-.dot-grid {
-  position: fixed;
-  inset: 0;
-  z-index: 0;
-  pointer-events: none;
-  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
-  background-size: 32px 32px;
-}
-
-/* ════════════════════════════════════════════════════════
-   NAVIGATION
-   ════════════════════════════════════════════════════════ */
-.nav {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 1000;
-  background: rgba(7, 9, 15, 0.85);
-  backdrop-filter: blur(20px) saturate(1.5);
-  -webkit-backdrop-filter: blur(20px) saturate(1.5);
-  border-bottom: 1px solid var(--border);
-  transition: background .3s, box-shadow .3s;
-}
-
-.nav.scrolled {
-  background: rgba(7, 9, 15, 0.97);
-  box-shadow: 0 4px 30px rgba(0, 0, 0, .4);
-}
-
-.nav-inner {
-  max-width: var(--container);
-  margin: 0 auto;
-  padding: 0 24px;
-  height: 64px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-/* Logo */
-.nav-logo {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  text-decoration: none;
-  font-weight: 700;
-  font-size: 1.15rem;
-  color: var(--text);
-  transition: opacity .2s;
-}
-
-.nav-logo:hover {
-  opacity: .8;
-}
-
-.logo-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
-  border-radius: 8px;
-  font-size: .85rem;
-  color: #fff;
-}
-
-.logo-text {
-  font-family: var(--font-display);
-  letter-spacing: -0.02em;
-}
-
-/* Links */
-.nav-links {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.nav-links a {
-  color: var(--text-2);
-  text-decoration: none;
-  font-size: .875rem;
-  font-weight: 500;
-  padding: 6px 14px;
-  border-radius: 8px;
-  transition: color .2s, background .2s;
-}
-
-.nav-links a:hover {
-  color: var(--text);
-  background: rgba(255, 255, 255, 0.05);
-}
-
-/* Mobile menu */
-.mobile-menu-btn {
-  display: none;
-  flex-direction: column;
-  gap: 5px;
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 4px;
-}
-
-.mobile-menu-btn span {
-  display: block;
-  width: 22px;
-  height: 2px;
-  background: var(--text-2);
-  border-radius: 2px;
-  transition: all .3s;
-}
-
-.mobile-menu-btn.active span:nth-child(1) {
-  transform: translateY(7px) rotate(45deg);
-}
-
-.mobile-menu-btn.active span:nth-child(2) {
-  opacity: 0;
-}
-
-.mobile-menu-btn.active span:nth-child(3) {
-  transform: translateY(-7px) rotate(-45deg);
-}
-
-.mobile-nav {
-  display: none;
-  flex-direction: column;
-  gap: 4px;
-  padding: 12px 24px 20px;
-  background: rgba(10, 10, 10, 0.98);
-  border-bottom: 1px solid var(--border);
-}
-
-.mobile-nav.open {
-  display: flex;
-}
-
-.mobile-nav a {
-  color: var(--text-2);
-  text-decoration: none;
-  padding: 12px 0;
-  font-size: .95rem;
-  border-bottom: 1px solid var(--border);
-}
-
-.mobile-nav a:last-child {
-  border: none;
-}
-
-/* ⌘K Trigger */
-.cmd-trigger-btn {
-  display: flex !important;
-  align-items: center;
-  gap: 6px;
-  padding: 5px 10px !important;
-  background: var(--surface) !important;
-  border: 1px solid var(--border) !important;
-  border-radius: 8px !important;
-  font-size: .75rem !important;
-  color: var(--text-3) !important;
-  cursor: pointer;
-  transition: all .2s !important;
-}
-
-.cmd-trigger-btn:hover {
-  border-color: var(--border-hover) !important;
-  color: var(--text-2) !important;
-  background: var(--surface-2) !important;
-}
-
-.cmd-trigger-kbd {
-  font-family: var(--font-mono);
-  font-size: .65rem;
-  opacity: .6;
-}
-
-/* ════════════════════════════════════════════════════════
-   BUTTONS
-   ════════════════════════════════════════════════════════ */
-.btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 24px;
-  border-radius: 50px;
-  font-size: .875rem;
-  font-weight: 500;
-  font-family: var(--font);
-  text-decoration: none;
-  cursor: pointer;
-  border: none;
-  transition: transform .15s, box-shadow .15s, color .15s, border-color .15s;
-}
-
-.btn-primary {
-  background: var(--accent);
-  color: #fff;
-  box-shadow: 0 0 32px var(--accent-glow);
-}
-
-.btn-primary:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 0 50px rgba(91, 110, 245, 0.65);
-}
-
-.btn-ghost {
-  background: transparent;
-  color: var(--text-2);
-  border: 1px solid rgba(255, 255, 255, 0.12);
-}
-
-.btn-ghost:hover {
-  color: var(--text);
-  border-color: rgba(255, 255, 255, 0.25);
-}
-
-/* Size variants */
-.btn-sm {
-  padding: 7px 16px;
-  font-size: .8rem;
-}
-
-.btn-lg {
-  padding: 12px 28px;
-  font-size: 15px;
-}
-
-.btn-xl {
-  padding: 18px 40px;
-  font-size: 1.05rem;
-}
-
-.btn-full {
-  width: 100%;
-  justify-content: center;
-}
-
-/* ════════════════════════════════════════════════════════
-   HERO SECTION
-   ════════════════════════════════════════════════════════ */
-.hero {
-  position: relative;
-  width: 100vw;
-  height: 100vh;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* Hero inner — centered content */
-.hero-inner {
-  position: relative;
-  z-index: 5;
-  text-align: center;
-  padding: 0 20px;
-  max-width: 740px;
-  animation: hero-rise 1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
-}
-
-@keyframes hero-rise {
-  from {
-    opacity: 0;
-    transform: translateY(28px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* Live badge */
-.live-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  font-size: 11px;
-  font-weight: 500;
-  letter-spacing: 0.7px;
-  text-transform: uppercase;
-  color: var(--accent2);
-  border: 1px solid rgba(167, 139, 250, 0.28);
-  padding: 5px 14px;
-  border-radius: 20px;
-  background: rgba(167, 139, 250, 0.07);
-  margin-bottom: 26px;
-}
-
-.live-badge::before {
-  content: '';
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--green);
-  box-shadow: 0 0 6px var(--green);
-  animation: live-pulse 2s ease infinite;
-}
-
-@keyframes live-pulse {
-
-  0%,
-  100% {
-    opacity: 1;
-  }
-
-  50% {
-    opacity: 0.35;
-  }
-}
-
-/* Heading */
-.hero-inner h1 {
-  font-family: var(--font-display);
-  font-weight: 800;
-  font-size: clamp(34px, 5.8vw, 70px);
-  line-height: 1.05;
-  color: var(--text);
-  letter-spacing: -0.03em;
-  margin-bottom: 20px;
-}
-
-.hero-inner h1 em {
-  font-style: normal;
-  background: linear-gradient(110deg, #5b6ef5 0%, #a78bfa 45%, #f472b6 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-/* Sub */
-.hero-sub {
-  font-size: clamp(13px, 1.5vw, 17px);
-  color: var(--text-2);
-  line-height: 1.7;
-  max-width: 500px;
-  margin: 0 auto 36px;
-  font-weight: 300;
-}
-
-/* CTAs */
-.hero-cta {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  flex-wrap: wrap;
-}
-
-/* Stats row */
-.hero-stats {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 28px;
-  margin-top: 44px;
-  flex-wrap: wrap;
-}
-
-.hero-stat {
-  text-align: center;
-}
-
-.hero-stat-n {
-  font-family: var(--font-display);
-  font-size: 22px;
-  font-weight: 700;
-  color: var(--text);
-}
-
-.hero-stat-l {
-  font-size: 10px;
-  color: var(--text-2);
-  text-transform: uppercase;
-  letter-spacing: 0.6px;
-  margin-top: 2px;
-}
-
-.hero-stat-div {
-  width: 1px;
-  height: 30px;
-  background: rgba(255, 255, 255, 0.1);
-}
-
-/* Scroll hint */
-.hero-scroll-hint {
-  position: absolute;
-  bottom: 24px;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 6;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 5px;
-  opacity: 0.3;
-}
-
-.hero-scroll-hint span {
-  font-size: 9px;
-  color: #fff;
-  text-transform: uppercase;
-  letter-spacing: 1.2px;
-}
-
-.hero-scroll-arr {
-  width: 18px;
-  height: 18px;
-  border-right: 1.5px solid #fff;
-  border-bottom: 1.5px solid #fff;
-  transform: rotate(45deg);
-  animation: scroll-bounce 1.4s ease infinite;
-}
-
-@keyframes scroll-bounce {
-
-  0%,
-  100% {
-    transform: rotate(45deg) translateY(0);
-  }
-
-  50% {
-    transform: rotate(45deg) translateY(5px);
-  }
-}
-
-/* ── Video Phone Tracks (hero background) ──────────────── */
-.vid-tracks {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 28px;
-  transform: rotate(-6deg) scale(1.18);
-  transform-origin: center center;
-  z-index: 0;
-  pointer-events: none;
-  overflow: hidden;
-}
-
-.vid-tracks .track {
-  display: flex;
-  width: 100%;
-  overflow: hidden;
-  gap: 20px;
-}
-
-.vid-tracks .rail {
-  display: flex;
-  gap: 20px;
-  flex-shrink: 0;
-}
-
-.vid-tracks .track-1 .rail {
-  animation: vt-scroll-left 28s linear infinite;
-}
-
-.vid-tracks .track-2 .rail {
-  animation: vt-scroll-right 22s linear infinite;
-}
-
-.vid-tracks .track-3 .rail {
-  animation: vt-scroll-left 32s linear infinite;
-  animation-delay: -8s;
-}
-
-@keyframes vt-scroll-left {
-  from {
-    transform: translateX(0);
-  }
-
-  to {
-    transform: translateX(-50%);
-  }
-}
-
-@keyframes vt-scroll-right {
-  from {
-    transform: translateX(-50%);
-  }
-
-  to {
-    transform: translateX(0);
-  }
-}
-
-.vid-phone {
-  position: relative;
-  flex-shrink: 0;
-  width: 155px;
-  height: 275px;
-  border-radius: 20px;
-  background: #0d1020;
-  border: 1.5px solid rgba(255, 255, 255, 0.10);
-  overflow: hidden;
-  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.55), 0 24px 50px rgba(0, 0, 0, 0.55);
-}
-
-.vid-phone::after {
-  content: '';
-  position: absolute;
-  top: 9px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 46px;
-  height: 5px;
-  background: rgba(0, 0, 0, 0.6);
-  border-radius: 10px;
-  z-index: 20;
-}
-
-.vid-phone video {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: center top;
-  border-radius: 20px;
-}
-
-.vid-phone-scrim {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 55%;
-  background: linear-gradient(transparent, rgba(0, 0, 0, 0.78));
-  z-index: 5;
-  pointer-events: none;
-}
-
-.vid-badge-plat {
-  position: absolute;
-  top: 16px;
-  left: 10px;
-  font-size: 7.5px;
-  font-weight: 600;
-  letter-spacing: 0.5px;
-  padding: 2px 7px;
-  border-radius: 4px;
-  text-transform: uppercase;
-  z-index: 10;
-  backdrop-filter: blur(6px);
-}
-
-.vid-p-tiktok {
-  background: rgba(0, 0, 0, 0.50);
-  color: #fff;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-.vid-p-reels {
-  background: rgba(200, 50, 150, 0.4);
-  color: #ffb0df;
-  border: 1px solid rgba(255, 100, 200, 0.25);
-}
-
-.vid-p-shorts {
-  background: rgba(200, 30, 30, 0.4);
-  color: #ffaaaa;
-  border: 1px solid rgba(255, 80, 80, 0.25);
-}
-
-.vid-xlate {
-  position: absolute;
-  top: 30px;
-  left: 8px;
-  right: 8px;
-  background: rgba(91, 110, 245, 0.82);
-  backdrop-filter: blur(5px);
-  border-radius: 7px;
-  padding: 4px 8px;
-  font-size: 8px;
-  color: #fff;
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  z-index: 11;
-  opacity: 0;
-  transform: translateY(-3px);
-  transition: opacity 0.35s ease, transform 0.35s ease;
-}
-
-.vid-xlate.on {
-  opacity: 1;
-  transform: translateY(0);
-}
-
-.vid-xlate-dot {
-  width: 5px;
-  height: 5px;
-  border-radius: 50%;
-  background: #5bf0a0;
-  flex-shrink: 0;
-  animation: vt-blink 1s ease infinite;
-}
-
-@keyframes vt-blink {
-
-  0%,
-  100% {
-    opacity: 1;
-  }
-
-  50% {
-    opacity: 0.3;
-  }
-}
-
-.vid-wave {
-  display: flex;
-  align-items: center;
-  gap: 1.5px;
-  margin-left: auto;
-}
-
-.vid-wave b {
-  display: block;
-  width: 2px;
-  background: rgba(255, 255, 255, 0.9);
-  border-radius: 1px;
-  animation: vt-wave 0.7s ease-in-out infinite alternate;
-}
-
-.vid-wave b:nth-child(1) {
-  height: 3px;
-  animation-delay: 0s;
-}
-
-.vid-wave b:nth-child(2) {
-  height: 7px;
-  animation-delay: 0.12s;
-}
-
-.vid-wave b:nth-child(3) {
-  height: 4px;
-  animation-delay: 0.24s;
-}
-
-.vid-wave b:nth-child(4) {
-  height: 8px;
-  animation-delay: 0.08s;
-}
-
-.vid-wave b:nth-child(5) {
-  height: 3px;
-  animation-delay: 0.20s;
-}
-
-@keyframes vt-wave {
-  from {
-    transform: scaleY(0.35);
-  }
-
-  to {
-    transform: scaleY(1);
-  }
-}
-
-.vid-phone-actions {
-  position: absolute;
-  right: 8px;
-  bottom: 64px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  z-index: 10;
-}
-
-.vid-act-btn {
-  width: 30px;
-  height: 30px;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.18);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.vid-act-btn svg {
-  width: 13px;
-  height: 13px;
-}
-
-.vid-info {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  padding: 0 10px 10px;
-  z-index: 10;
-}
-
-.vid-handle {
-  font-size: 9.5px;
-  font-weight: 600;
-  color: #fff;
-  margin-bottom: 3px;
-}
-
-.vid-desc {
-  font-size: 8px;
-  color: rgba(255, 255, 255, 0.72);
-  line-height: 1.3;
-}
-
-.vid-muted-icon {
-  position: absolute;
-  top: 16px;
-  right: 10px;
-  width: 18px;
-  height: 18px;
-  background: rgba(0, 0, 0, 0.45);
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 12;
-}
-
-.vid-muted-icon svg {
-  width: 10px;
-  height: 10px;
-  fill: rgba(255, 255, 255, 0.7);
-}
-
-.vid-vignette {
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  background:
-    radial-gradient(ellipse 50% 60% at 50% 50%, rgba(7, 9, 15, 0.88) 20%, transparent 72%),
-    radial-gradient(ellipse 100% 30% at 50% 0%, rgba(7, 9, 15, 0.95) 0%, transparent 100%),
-    radial-gradient(ellipse 100% 30% at 50% 100%, rgba(7, 9, 15, 0.95) 0%, transparent 100%);
-  pointer-events: none;
-}
-
-.vid-grain {
-  position: absolute;
-  inset: 0;
-  z-index: 2;
-  opacity: 0.04;
-  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
-  background-repeat: repeat;
-  background-size: 200px;
-  pointer-events: none;
-}
-
-/* ── Terminal Preview ─────────────────────────────────── */
-.terminal-preview {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-  max-width: 720px;
-  margin: 0 auto;
-  box-shadow:
-    0 0 0 1px rgba(255, 255, 255, 0.03),
-    0 20px 60px rgba(0, 0, 0, 0.5),
-    0 0 80px rgba(91, 110, 245, 0.04);
-}
-
-.terminal-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
-  background: var(--bg-elevated);
-  border-bottom: 1px solid var(--border);
-}
-
-.terminal-dots {
-  display: flex;
-  gap: 7px;
-}
-
-.terminal-dots .dot {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-}
-
-.dot.red {
-  background: #ff5f57;
-}
-
-.dot.yellow {
-  background: #febc2e;
-}
-
-.dot.green {
-  background: #28c840;
-}
-
-.terminal-title {
-  font-family: var(--font-mono);
-  font-size: .75rem;
-  color: var(--text-3);
-  letter-spacing: .03em;
-}
-
-.terminal-status {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: .75rem;
-  color: var(--green);
-  font-weight: 600;
-}
-
-.pulse-dot {
-  width: 6px;
-  height: 6px;
-  background: var(--green);
-  border-radius: 50%;
-  animation: pulse-dot 2s ease-in-out infinite;
-}
-
-.terminal-body {
-  padding: 16px 20px;
-  font-family: var(--font-mono);
-  font-size: .8rem;
-  line-height: 1.9;
-  max-height: 320px;
-  overflow-y: auto;
-}
-
-.terminal-line {
-  color: var(--text-2);
-  opacity: 0;
-  animation: terminal-fade-in .4s ease forwards;
-}
-
-.terminal-line:nth-child(1) {
-  animation-delay: .3s;
-}
-
-.terminal-line:nth-child(2) {
-  animation-delay: .6s;
-}
-
-.terminal-line:nth-child(3) {
-  animation-delay: 1s;
-}
-
-.terminal-line:nth-child(4) {
-  animation-delay: 1.3s;
-}
-
-.terminal-line:nth-child(5) {
-  animation-delay: 1.7s;
-}
-
-.terminal-line:nth-child(6) {
-  animation-delay: 2s;
-}
-
-.terminal-line:nth-child(7) {
-  animation-delay: 2.4s;
-}
-
-.terminal-line:nth-child(8) {
-  animation-delay: 2.7s;
-}
-
-.terminal-line:nth-child(9) {
-  animation-delay: 3.1s;
-}
-
-.terminal-line:nth-child(10) {
-  animation-delay: 3.4s;
-}
-
-.terminal-line:nth-child(11) {
-  animation-delay: 3.8s;
-}
-
-.terminal-line:nth-child(12) {
-  animation-delay: 4.2s;
-}
-
-@keyframes terminal-fade-in {
-  from {
-    opacity: 0;
-    transform: translateY(4px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.t-step {
-  color: var(--accent);
-  font-weight: 700;
-}
-
-.t-muted {
-  color: var(--text-3);
-}
-
-.t-check {
-  color: var(--green);
-  font-weight: 700;
-}
-
-.t-done {}
-
-.terminal-line.complete {
-  color: var(--green);
-  font-weight: 600;
-}
-
-/* ════════════════════════════════════════════════════════
-   STATS BAR
-   ════════════════════════════════════════════════════════ */
-.stats-section {
-  padding: 64px 0;
-  border-top: 1px solid var(--border);
-  border-bottom: 1px solid var(--border);
-  background: var(--bg-elevated);
-  position: relative;
-  z-index: 1;
-}
-
-.stats-bar {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0;
-  flex-wrap: wrap;
-}
-
-.stat-item {
-  flex: 1;
-  min-width: 160px;
-  text-align: center;
-  padding: 12px 24px;
-}
-
-.stat-value {
-  font-family: var(--font-display);
-  font-size: 2.8rem;
-  font-weight: 700;
-  letter-spacing: -0.03em;
-  color: var(--text);
-  line-height: 1;
-  margin-bottom: 6px;
-}
-
-.stat-label {
-  font-size: .8rem;
-  color: var(--text-3);
-  text-transform: uppercase;
-  letter-spacing: .08em;
-  font-weight: 500;
-}
-
-.stat-divider {
-  width: 1px;
-  height: 48px;
-  background: var(--border);
-}
-
-/* ════════════════════════════════════════════════════════
-   SECTIONS (shared)
-   ════════════════════════════════════════════════════════ */
-.section {
-  padding: 100px 0;
-  position: relative;
-  z-index: 1;
-}
-
-.section-dark {
-  background: var(--bg);
-  padding: 100px 0;
-  position: relative;
-  z-index: 1;
-}
-
-.section-label {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  font-size: .75rem;
-  font-weight: 600;
-  color: var(--accent);
-  text-transform: uppercase;
-  letter-spacing: .08em;
-  margin-bottom: 16px;
-  font-family: var(--font-mono);
-}
-
-.section-title {
-  font-family: var(--font-display);
-  font-size: clamp(1.8rem, 4vw, 2.8rem);
-  font-weight: 700;
-  letter-spacing: -0.03em;
-  text-align: left;
-  margin-bottom: 12px;
-  line-height: 1.15;
-}
-
-.section-sub {
-  color: var(--text-2);
-  text-align: left;
-  margin-bottom: 56px;
-  font-size: 1.05rem;
-  max-width: 540px;
-}
-
-/* ════════════════════════════════════════════════════════
-   HOW IT WORKS — Steps Grid
-   ════════════════════════════════════════════════════════ */
-.steps-grid {
-  display: flex;
-  align-items: center;
-  gap: 0;
-  flex-wrap: wrap;
-  justify-content: center;
-}
-
-.step-card {
-  flex: 1;
-  min-width: 240px;
-  max-width: 320px;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-  padding: 32px 28px;
-  position: relative;
-  transition: all .35s cubic-bezier(.4, 0, .2, 1);
-}
-
-.step-card:hover {
-  transform: translateY(-4px);
-  border-color: rgba(91, 110, 245, 0.3);
-  box-shadow:
-    0 12px 40px rgba(0, 0, 0, .3),
-    0 0 40px rgba(91, 110, 245, 0.06);
-}
-
-.step-number {
-  font-family: var(--font-display);
-  font-size: 3.5rem;
-  font-weight: 700;
-  color: rgba(91, 110, 245, 0.08);
-  line-height: 1;
-  margin-bottom: 16px;
-}
-
-.step-icon-wrap {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 52px;
-  height: 52px;
-  background: var(--accent-dim);
-  border-radius: var(--radius);
-  margin-bottom: 20px;
-  color: var(--accent);
-}
-
-.step-card h3 {
-  font-family: var(--font-display);
-  font-size: 1.1rem;
-  font-weight: 600;
-  margin-bottom: 8px;
-  letter-spacing: -0.01em;
-}
-
-.step-card p {
-  color: var(--text-2);
-  font-size: .88rem;
-  line-height: 1.6;
-}
-
-/* Connector arrows */
-.step-connector {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 8px;
-  color: var(--text-3);
-}
-
-/* ════════════════════════════════════════════════════════
-   WHY US — CONTRAST + COMPARISON
-   ════════════════════════════════════════════════════════ */
-
-/* Contrast grid (them vs us) */
-.contrast-grid {
-  display: grid;
-  grid-template-columns: 1fr auto 1fr;
-  gap: 24px;
-  align-items: stretch;
-  margin-bottom: 64px;
-}
-
-.contrast-card {
-  padding: 28px;
-  border-radius: var(--radius-lg);
-  border: 1px solid var(--border);
-}
-
-.contrast-them {
-  background: rgba(255, 60, 60, 0.04);
-  border-color: rgba(255, 80, 80, 0.15);
-}
-
-.contrast-us {
-  background: rgba(91, 110, 245, 0.06);
-  border-color: rgba(91, 110, 245, 0.2);
-}
-
-.contrast-header {
-  margin-bottom: 20px;
-}
-
-.contrast-badge {
-  display: inline-block;
-  font-size: .75rem;
-  font-weight: 700;
-  letter-spacing: .06em;
-  text-transform: uppercase;
-  padding: 5px 12px;
-  border-radius: 20px;
-}
-
-.them-badge {
-  background: rgba(255, 60, 60, 0.1);
-  color: #ff6b6b;
-  border: 1px solid rgba(255, 80, 80, 0.2);
-}
-
-.us-badge {
-  background: var(--accent-dim);
-  color: var(--accent);
-  border: 1px solid rgba(91, 110, 245, 0.25);
-}
-
-.contrast-list {
-  list-style: none;
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-}
-
-.contrast-list li {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  font-size: .9rem;
-  color: var(--text-2);
-}
-
-.contrast-them .contrast-list svg {
-  color: #ff6b6b;
-  flex-shrink: 0;
-}
-
-.contrast-us .contrast-list svg {
-  color: #5bf0a0;
-  flex-shrink: 0;
-}
-
-.contrast-vs {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-family: var(--font-heading);
-  font-size: 1rem;
-  font-weight: 700;
-  color: var(--text-3);
-  letter-spacing: .1em;
-}
-
-/* Comparison table */
-.compare-wrap {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-xl);
-  padding: 36px;
-}
-
-.compare-title {
-  font-family: var(--font-heading);
-  font-size: 1.4rem;
-  font-weight: 700;
-  color: var(--text);
-  margin-bottom: 6px;
-}
-
-.compare-sub {
-  font-size: .9rem;
-  color: var(--text-3);
-  margin-bottom: 28px;
-}
-
-.compare-table-scroll {
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-}
-
-.compare-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: .85rem;
-}
-
-.compare-table th {
-  text-align: left;
-  padding: 12px 14px;
-  font-size: .7rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: .06em;
-  color: var(--text-3);
-  border-bottom: 1px solid var(--border);
-  white-space: nowrap;
-}
-
-.compare-table td {
-  padding: 14px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
-  color: var(--text-2);
-  white-space: nowrap;
-}
-
-.compare-table tbody tr:hover {
-  background: rgba(255, 255, 255, 0.02);
-}
-
-.compare-highlight {
-  background: rgba(91, 110, 245, 0.06) !important;
-  border-radius: var(--radius);
-}
-
-.compare-highlight td {
-  color: var(--text);
-  font-weight: 500;
-  border-bottom-color: rgba(91, 110, 245, 0.15);
-}
-
-.compare-highlight td:first-child {
-  color: var(--accent);
-}
-
-.compare-note {
-  font-size: .7rem;
-  color: var(--text-3);
-  margin-left: 4px;
-}
-
-.c-yes {
-  color: #5bf0a0 !important;
-}
-
-.c-no {
-  color: #ff6b6b !important;
-}
-
-.c-mid {
-  color: #f5c85b !important;
-}
-
-.compare-footnote {
-  margin-top: 16px;
-  font-size: .75rem;
-  color: var(--text-3);
-  text-align: center;
-}
-
-/* ════════════════════════════════════════════════════════
-   FEATURES GRID
-   ════════════════════════════════════════════════════════ */
-.features-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 16px;
-}
-
-.feature-card {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 28px 24px;
-  transition: all .3s cubic-bezier(.4, 0, .2, 1);
-}
-
-.feature-card:hover {
-  border-color: rgba(91, 110, 245, 0.25);
-  transform: translateY(-2px);
-  box-shadow: 0 8px 30px rgba(0, 0, 0, .3);
-}
-
-.feature-icon {
-  font-size: 1.6rem;
-  margin-bottom: 14px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 44px;
-  height: 44px;
-  background: var(--accent-dim);
-  border-radius: 10px;
-}
-
-.feature-card h3 {
-  font-family: var(--font-display);
-  font-size: 1rem;
-  font-weight: 600;
-  margin-bottom: 8px;
-  letter-spacing: -0.01em;
-}
-
-.feature-card p {
-  color: var(--text-2);
-  font-size: .85rem;
-  line-height: 1.55;
-}
-
-/* ════════════════════════════════════════════════════════
-   DEMO VIDEOS
-   ════════════════════════════════════════════════════════ */
-.demos-wall {
-  margin-top: 24px;
-  min-height: 220px;
-}
-
-.demos-state {
-  text-align: center;
-  font-size: .9rem;
-  color: var(--text-2);
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-  padding: 20px;
-}
-
-.demos-state-error {
-  color: #ffb4b4;
-  border-color: rgba(255, 84, 84, 0.35);
-  background: rgba(255, 84, 84, 0.08);
-}
-
-.demos-lanes {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 20px;
-  align-items: start;
-}
-
-.demos-lane {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  transform: translate3d(0, 0, 0);
-  will-change: transform;
-}
-
-.demos-wall.parallax-enabled .demos-lane {
-  transition: transform .06s linear;
-}
-
-.demo-card {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
-}
-
-.demo-card:hover {
-  transform: translateY(-3px);
-  border-color: rgba(91, 110, 245, 0.25);
-  box-shadow: 0 16px 50px rgba(0, 0, 0, .4);
-}
-
-.demo-video-frame {
-  aspect-ratio: 9/16;
-  background: linear-gradient(135deg, var(--surface-2), var(--bg-elevated));
-  position: relative;
-  overflow: hidden;
-}
-
-.demo-video {
-  width: 100%;
-  height: 100%;
-  display: block;
-  object-fit: cover;
-  background: #000;
-}
-
-.demo-video:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: -2px;
-}
-
-.demo-badge {
-  position: absolute;
-  top: 12px;
-  left: 12px;
-  background: rgba(0, 0, 0, 0.7);
-  backdrop-filter: blur(8px);
-  padding: 4px 10px;
-  border-radius: 6px;
-  font-size: .75rem;
-  font-weight: 700;
-  letter-spacing: .04em;
-  text-transform: uppercase;
-  color: var(--text);
-  z-index: 1;
-}
-
-.demo-info {
-  padding: 16px 20px;
-}
-
-.demo-info h4 {
-  font-size: .92rem;
-  font-weight: 600;
-  margin-bottom: 6px;
-  line-height: 1.3;
-  word-break: break-word;
-}
-
-.demo-meta {
-  font-size: .8rem;
-  color: var(--text-2);
-  line-height: 1.45;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .demos-lane {
-    transform: none !important;
-    transition: none !important;
-  }
-}
-
-/* ════════════════════════════════════════════════════════
-   SHOWCASE (before / after comparison rows)
-   ════════════════════════════════════════════════════════ */
-#showcase-container {
-  margin-top: 24px;
-}
-
-.showcase-row {
-  margin-bottom: 56px;
-  padding-bottom: 56px;
-  border-bottom: 1px solid var(--border);
-}
-
-.showcase-row:last-child {
-  border-bottom: none;
-  margin-bottom: 0;
-  padding-bottom: 0;
-}
-
-/* ── Row header ────────────────────────────── */
-.showcase-row-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 24px;
-}
-
-.showcase-platform-icon {
-  width: 36px;
-  height: 36px;
-  border-radius: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.showcase-platform-icon--youtube {
-  background: rgba(255, 0, 0, 0.12);
-  color: #ff4444;
-}
-
-.showcase-platform-icon--instagram {
-  background: linear-gradient(135deg, rgba(131, 58, 180, 0.15), rgba(253, 29, 29, 0.15), rgba(252, 176, 69, 0.15));
-  color: #e1306c;
-}
-
-.showcase-platform-icon svg {
-  width: 20px;
-  height: 20px;
-}
-
-.showcase-row-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.showcase-row-title {
-  font-family: var(--font-display);
-  font-size: 1.15rem;
-  font-weight: 600;
-  color: var(--text);
-  line-height: 1.3;
-}
-
-.showcase-row-desc {
-  font-size: 0.85rem;
-  color: var(--text-2);
-  margin-top: 2px;
-}
-
-/* ── Cards flow ────────────────────────────── */
-.showcase-flow {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-  gap: 20px;
-  align-items: start;
-}
-
-.showcase-card {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
-}
-
-.showcase-card:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 16px 50px rgba(0, 0, 0, .4);
-}
-
-/* Card style variants: original / their-dub / our-dub */
-.showcase-card--original {
-  border-color: rgba(255, 255, 255, 0.15);
-}
-
-.showcase-card--original:hover {
-  border-color: rgba(255, 255, 255, 0.3);
-}
-
-.showcase-card--their-dub {
-  border-color: rgba(239, 68, 68, 0.15);
-}
-
-.showcase-card--their-dub:hover {
-  border-color: rgba(239, 68, 68, 0.3);
-}
-
-.showcase-card--our-dub {
-  border-color: var(--green-dim);
-}
-
-.showcase-card--our-dub:hover {
-  border-color: rgba(91, 240, 160, 0.3);
-  box-shadow: 0 16px 50px rgba(0, 0, 0, .4), 0 0 20px rgba(91, 240, 160, 0.08);
-}
-
-/* ── Language label pill ───────────────────── */
-.showcase-label {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 12px;
-  margin: 12px 12px 0;
-  font-size: 0.7rem;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  border-radius: 20px;
-  line-height: 1;
-}
-
-.showcase-label--original {
-  background: rgba(255, 255, 255, 0.08);
-  color: var(--text-2);
-}
-
-.showcase-label--their-dub {
-  background: rgba(239, 68, 68, 0.1);
-  color: #f87171;
-}
-
-.showcase-label--our-dub {
-  background: var(--green-dim);
-  color: var(--green);
-}
-
-/* ── Video / embed frame ───────────────────── */
-.showcase-video-frame {
-  position: relative;
-  aspect-ratio: 9 / 16;
-  background: linear-gradient(135deg, var(--surface-2), var(--bg-elevated));
-  overflow: hidden;
-}
-
-.showcase-video-frame video {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  background: #000;
-}
-
-.showcase-video-frame video:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: -2px;
-}
-
-.showcase-video-frame iframe {
-  width: 100%;
-  height: 100%;
-  border: none;
-  background: #000;
-}
-
-/* ── Card info ─────────────────────────────── */
-.showcase-card-info {
-  padding: 12px 16px 16px;
-}
-
-.showcase-card-title {
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: var(--text);
-  line-height: 1.3;
-}
-
-/* ── Flow arrow (desktop only) ─────────────── */
-.showcase-arrow {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--text-3);
-  font-size: 1.4rem;
-  padding: 0 4px;
-  align-self: center;
-}
-
-/* ── Mobile tabs ───────────────────────────── */
-.showcase-tabs {
-  display: none;
-  gap: 4px;
-  margin-bottom: 16px;
-  padding: 4px;
-  background: var(--surface);
-  border-radius: var(--radius);
-  border: 1px solid var(--border);
-  overflow-x: auto;
-}
-
-.showcase-tab {
-  flex: 1;
-  min-width: 0;
-  padding: 8px 12px;
-  font-size: 0.75rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--text-2);
-  background: transparent;
-  border: none;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: background .2s, color .2s;
-  white-space: nowrap;
-  text-align: center;
-}
-
-.showcase-tab:hover {
-  color: var(--text);
-  background: rgba(255, 255, 255, 0.05);
-}
-
-.showcase-tab--active {
-  color: var(--text);
-  background: var(--accent-dim);
-}
-
-/* ── Responsive ────────────────────────────── */
-@media (max-width: 900px) {
-  .showcase-flow {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .showcase-arrow {
-    display: none;
-  }
-}
-
-@media (max-width: 640px) {
-  .showcase-tabs {
-    display: flex;
-  }
-
-  .showcase-flow {
-    grid-template-columns: 1fr;
-    max-width: 340px;
-    margin: 0 auto;
-  }
-
-  .showcase-card {
-    display: none;
-  }
-
-  .showcase-card--active {
-    display: block;
-  }
-
-  .showcase-arrow {
-    display: none;
-  }
-}
-
-/* ════════════════════════════════════════════════════════
-   APP / TRY NOW
-   ════════════════════════════════════════════════════════ */
-.app-container {
-  max-width: 640px;
-  /* expanded via JS to 100% on state change */
-  margin: 0 auto;
-  background: var(--surface);
-  border: 1px solid rgba(91, 110, 245, 0.25);
-  border-radius: var(--radius-xl);
-  overflow: hidden;
-  box-shadow:
-    0 0 0 1px rgba(91, 110, 245, 0.05),
-    0 0 20px rgba(91, 110, 245, 0.08),
-    0 20px 60px rgba(0, 0, 0, .4);
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  gap: 0;
-  transition: max-width 0s, box-shadow 0.6s ease, border-color 0.6s ease;
-}
-
-/* Glow intensifies when pipeline is processing */
-.app-container.state-processing {
-  border-color: rgba(91, 110, 245, 0.5);
-  box-shadow:
-    0 0 0 1px rgba(91, 110, 245, 0.1),
-    0 0 30px rgba(91, 110, 245, 0.2),
-    0 0 60px rgba(91, 110, 245, 0.1),
-    0 20px 60px rgba(0, 0, 0, .4);
-  animation: pulse-glow 2s ease-in-out infinite;
-}
-
-@keyframes pulse-glow {
-
-  0%,
-  100% {
-    box-shadow:
-      0 0 0 1px rgba(91, 110, 245, 0.1),
-      0 0 30px rgba(91, 110, 245, 0.2),
-      0 0 60px rgba(91, 110, 245, 0.1),
-      0 20px 60px rgba(0, 0, 0, .4);
-  }
-
-  50% {
-    box-shadow:
-      0 0 0 1px rgba(91, 110, 245, 0.2),
-      0 0 40px rgba(91, 110, 245, 0.3),
-      0 0 80px rgba(91, 110, 245, 0.15),
-      0 20px 60px rgba(0, 0, 0, .4);
-  }
-}
-
-
-/* Tab switcher */
-.input-tabs {
-  display: flex;
-  border-bottom: 1px solid var(--border);
-}
-
-.tab-btn {
-  flex: 1;
-  padding: 14px;
-  background: none;
-  border: none;
-  color: var(--text-3);
-  font-family: var(--font);
-  font-size: .875rem;
-  font-weight: 500;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  transition: all .2s;
-  position: relative;
-}
-
-.tab-btn:hover {
-  color: var(--text-2);
-  background: rgba(255, 255, 255, 0.02);
-}
-
-.tab-btn.active {
-  color: var(--accent);
-}
-
-.tab-btn.active::after {
-  content: '';
-  position: absolute;
-  bottom: -1px;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: var(--accent);
-}
-
-/* Tab content */
-.tab-content {
-  display: none;
-}
-
-.tab-content.active {
-  display: block;
-}
-
-/* App panel inner */
-.app-panel {
-  padding: 28px;
-  flex: 0 0 0%;
-  width: 0;
-  opacity: 0;
-  overflow: hidden;
-  transform: translateX(20px);
-  transition:
-    flex 0.45s cubic-bezier(0.4, 0, 0.2, 1),
-    opacity 0.4s ease,
-    transform 0.4s ease,
-    padding 0.45s ease;
-  pointer-events: none;
-}
-
-/* Left panel always visible from start */
-#app-input {
-  flex: 0 0 100%;
-  width: 100%;
-  opacity: 1;
-  transform: none;
-  pointer-events: auto;
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-/* STATE: processing — left shrinks, center appears, right skeleton appears */
-.state-processing #app-input {
-  flex: 0 0 32%;
-  opacity: 0.55;
-  transform: none;
-}
-
-/* Block form controls but keep video previews interactive */
-.state-processing #app-input .input-tabs,
-.state-processing #app-input .tab-content> :not(.video-preview):not(.url-preview-card),
-.state-processing #app-input .language-row,
-.state-processing #app-input .voice-mode-group,
-.state-processing #app-input .option-row,
-.state-processing #app-input .btn,
-.state-processing #app-input .free-note {
-  pointer-events: none;
-}
-
-.state-processing #app-input .video-preview,
-.state-processing #app-input .url-preview-card {
-  pointer-events: auto;
-  opacity: 1;
-}
-
-.state-processing #app-processing {
-  flex: 0 0 36%;
-  opacity: 1;
-  transform: none;
-  pointer-events: auto;
-  transition-delay: 0.1s;
-  /* stagger: center arrives second */
-}
-
-.state-processing #app-result {
-  flex: 0 0 32%;
-  opacity: 1;
-  transform: none;
-  pointer-events: none;
-  transition-delay: 0.2s;
-  /* stagger: right arrives third */
-}
-
-/* STATE: result — right panel gets focus */
-.state-result #app-input {
-  flex: 0 0 28%;
-  opacity: 0.45;
-}
-
-.state-result #app-input .input-tabs,
-.state-result #app-input .tab-content> :not(.video-preview):not(.url-preview-card),
-.state-result #app-input .language-row,
-.state-result #app-input .voice-mode-group,
-.state-result #app-input .option-row,
-.state-result #app-input .btn,
-.state-result #app-input .free-note {
-  pointer-events: none;
-}
-
-.state-result #app-input .video-preview,
-.state-result #app-input .url-preview-card {
-  pointer-events: auto;
-  opacity: 1;
-}
-
-.state-result #app-processing {
-  flex: 0 0 28%;
-  opacity: 0.55;
-  pointer-events: none;
-}
-
-.state-result #app-result {
-  flex: 0 0 44%;
-  /* right panel gets extra weight */
-  opacity: 1;
-  pointer-events: auto;
-  transition-delay: 0s;
-}
-
-/* Skeleton placeholder */
-.result-skeleton {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.result-skeleton .skel-bar {
-  background: linear-gradient(90deg, #111520 25%, #1a2038 50%, #111520 75%);
-  background-size: 200% 100%;
-  animation: shimmer 1.4s infinite;
-  border-radius: 6px;
-}
-
-@keyframes shimmer {
-  0% {
-    background-position: 200% 0;
-  }
-
-  100% {
-    background-position: -200% 0;
-  }
-}
-
-/* URL input */
-.url-input-wrap {
-  margin-bottom: 16px;
-}
-
-.url-input {
-  width: 100%;
-  padding: 14px 16px;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  color: var(--text);
-  font-family: var(--font);
-  font-size: .9rem;
-  outline: none;
-  transition: border-color .2s, box-shadow .2s;
-}
-
-.url-input:focus {
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--accent-dim);
-}
-
-.url-input::placeholder {
-  color: var(--text-3);
-}
-
-.url-platforms {
-  display: flex;
-  gap: 12px;
-  margin-top: 10px;
-}
-
-.platform-tag {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: .75rem;
-  color: var(--text-3);
-}
-
-.platform-tag svg {
-  opacity: .5;
-}
-
-/* Drop zone */
-.drop-zone {
-  border: 2px dashed var(--border);
-  border-radius: var(--radius);
-  padding: 40px 24px;
-  text-align: center;
-  cursor: pointer;
-  transition: all .3s;
-  margin-bottom: 16px;
-}
-
-.drop-zone:hover,
-.drop-zone.drag-over {
-  border-color: var(--accent);
-  background: var(--accent-dim);
-}
-
-.drop-icon {
-  color: var(--text-3);
-  margin-bottom: 12px;
-  transition: color .3s;
-}
-
-.drop-zone:hover .drop-icon {
-  color: var(--accent);
-}
-
-.drop-text {
-  font-weight: 600;
-  margin-bottom: 6px;
-}
-
-.drop-hint {
-  color: var(--text-3);
-  font-size: .8rem;
-}
-
-/* File preview */
-.drop-zone-file {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 14px 16px;
-  background: var(--accent-dim);
-  border: 1px solid rgba(91, 110, 245, 0.2);
-  border-radius: var(--radius);
-  color: var(--accent);
-  font-size: .875rem;
-}
-
-.file-remove {
-  margin-left: auto;
-  background: none;
-  border: none;
-  color: var(--text-3);
-  cursor: pointer;
-  font-size: 1rem;
-  padding: 4px;
-  transition: color .2s;
-}
-
-.file-remove:hover {
-  color: var(--red);
-}
-
-/* Video preview */
-.video-preview {
-  margin-top: 12px;
-  animation: fade-in .3s ease;
-}
-
-@keyframes fade-in {
-  from {
-    opacity: 0;
-    transform: translateY(6px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.video-preview-inner {
-  position: relative;
-  border-radius: var(--radius);
-  overflow: hidden;
-  border: 1px solid var(--border);
-  background: #000;
-  max-height: 280px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.video-preview-inner video {
-  width: 100%;
-  max-height: 280px;
-  object-fit: contain;
-  display: block;
-}
-
-.video-preview-remove {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  background: rgba(0, 0, 0, 0.7);
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  color: #fff;
-  font-size: .85rem;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: background .2s;
-  z-index: 2;
-}
-
-.video-preview-remove:hover {
-  background: rgba(220, 50, 50, 0.8);
-}
-
-.video-preview-info {
-  margin-top: 6px;
-  font-size: .75rem;
-  color: var(--text-3);
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-/* URL preview card */
-.url-preview-card {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-top: 12px;
-  padding: 12px 14px;
-  background: var(--surface-2);
-  border: 1px solid var(--accent);
-  border-radius: var(--radius);
-  animation: fade-in .3s ease;
-}
-
-.url-preview-icon {
-  width: 40px;
-  height: 40px;
-  border-radius: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  font-size: 1.2rem;
-}
-
-.url-preview-icon.ig {
-  background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
-}
-
-.url-preview-icon.yt {
-  background: #cc0000;
-}
-
-.url-preview-icon.tt {
-  background: #010101;
-  border: 1px solid rgba(255, 255, 255, 0.15);
-}
-
-.url-preview-icon.generic {
-  background: var(--accent-dim);
-}
-
-.url-preview-details {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.url-preview-platform {
-  font-size: .85rem;
-  font-weight: 600;
-  color: var(--text);
-}
-
-.url-preview-link {
-  font-size: .72rem;
-  color: var(--text-3);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.url-preview-remove {
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.06);
-  border: 1px solid var(--border);
-  color: var(--text-3);
-  font-size: .85rem;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  transition: background .2s, color .2s;
-}
-
-.url-preview-remove:hover {
-  background: rgba(220, 50, 50, 0.3);
-  color: #fff;
-}
-
-/* Language row */
-.language-row {
-  display: flex;
-  align-items: flex-end;
-  gap: 12px;
-  margin-bottom: 20px;
-}
-
-.lang-select-wrap {
-  flex: 1;
-}
-
-.lang-select-wrap label {
-  display: block;
-  font-size: .75rem;
-  font-weight: 600;
-  color: var(--text-3);
-  text-transform: uppercase;
-  letter-spacing: .06em;
-  margin-bottom: 6px;
-}
-
-.lang-select {
-  width: 100%;
-  padding: 12px 14px;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  color: var(--text);
-  font-family: var(--font);
-  font-size: .875rem;
-  outline: none;
-  cursor: pointer;
-  appearance: none;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 12px center;
-  transition: border-color .2s;
-}
-
-.lang-select:focus {
-  border-color: var(--accent);
-}
-
-.lang-swap {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 44px;
-  height: 44px;
-  background: var(--surface-2);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  color: var(--text-3);
-  cursor: pointer;
-  transition: all .2s;
-  flex-shrink: 0;
-}
-
-.lang-swap:hover {
-  border-color: var(--accent);
-  color: var(--accent);
-}
-
-/* Captions toggle option row */
-.option-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 14px;
-  margin-bottom: 16px;
-  background: var(--surface-2);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-}
-
-.toggle-label {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: .85rem;
-  font-weight: 500;
-  color: var(--text-2);
-  cursor: pointer;
-  user-select: none;
-}
-
-.toggle-switch {
-  position: relative;
-  display: inline-block;
-  width: 40px;
-  height: 22px;
-  cursor: pointer;
-}
-
-.toggle-switch input {
-  display: none;
-}
-
-.toggle-track {
-  position: absolute;
-  inset: 0;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  transition: background .2s, border-color .2s;
-}
-
-.toggle-track::after {
-  content: '';
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 16px;
-  height: 16px;
-  background: var(--text-3);
-  border-radius: 50%;
-  transition: transform .2s, background .2s;
-}
-
-.toggle-switch input:checked+.toggle-track {
-  background: var(--accent);
-  border-color: var(--accent);
-}
-
-.toggle-switch input:checked+.toggle-track::after {
-  transform: translateX(18px);
-  background: #fff;
-}
-
-/* Free note */
-.free-note {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  font-size: .8rem;
-  color: var(--text-3);
-  margin-top: 14px;
-}
-
-/* ── Processing state ──────────────────────────────────── */
-.processing-header {
-  text-align: center;
-  margin-bottom: 24px;
-}
-
-.processing-spinner {
-  width: 36px;
-  height: 36px;
-  border: 3px solid var(--border);
-  border-top-color: var(--accent);
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin: 0 auto 14px;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.processing-header h3 {
-  font-size: 1.1rem;
-  margin-bottom: 4px;
-}
-
-#processing-step {
-  color: var(--text-2);
-  font-size: .85rem;
-}
-
-.progress-bar-wrap {
-  height: 4px;
-  background: var(--border);
-  border-radius: 4px;
-  overflow: hidden;
-  margin-bottom: 20px;
-}
-
-.progress-bar {
-  height: 100%;
-  width: 0%;
-  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
-  border-radius: 4px;
-  transition: width .4s ease;
-}
-
-.terminal-mini {
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  overflow: hidden;
-}
-
-.terminal-scroll {
-  max-height: 220px;
-  overflow-y: auto;
-}
-
-/* ═══════════════════════════════════════════════════════
-   VOICE MODEL SELECTOR (input form)
-   ═══════════════════════════════════════════════════════ */
-.voice-mode-group {
-  margin-bottom: 20px;
-}
-
-.voice-mode-label {
-  display: block;
-  font-size: .75rem;
-  font-weight: 600;
-  color: var(--text-3);
-  text-transform: uppercase;
-  letter-spacing: .06em;
-  margin-bottom: 10px;
-}
-
-.voice-mode-options {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.voice-mode-option {
-  cursor: pointer;
-  display: block;
-}
-
-.voice-mode-option input[type="radio"] {
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.voice-mode-card {
-  background: var(--bg);
-  border: 1.5px solid var(--border);
-  border-radius: var(--radius);
-  padding: 12px 16px;
-  transition: all .25s cubic-bezier(.4, 0, .2, 1);
-}
-
-.voice-mode-card:hover {
-  border-color: rgba(91, 110, 245, 0.25);
-  background: rgba(91, 110, 245, 0.03);
-}
-
-.voice-mode-option input:checked+.voice-mode-card {
-  border-color: var(--accent);
-  background: var(--accent-dim);
-  box-shadow: 0 0 0 1px var(--accent), 0 4px 16px rgba(91, 110, 245, 0.1);
-}
-
-.voice-mode-card-inner {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.voice-mode-icon {
-  font-size: 1.3rem;
-  flex-shrink: 0;
-  width: 36px;
-  height: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(255, 255, 255, 0.04);
-  border-radius: 8px;
-}
-
-.voice-mode-card strong {
-  display: block;
-  font-size: .875rem;
-  font-weight: 600;
-  color: var(--text);
-  margin-bottom: 2px;
-}
-
-.voice-mode-hint {
-  display: block;
-  font-size: .75rem;
-  color: var(--text-3);
-  line-height: 1.3;
-}
-
-/* ═══════════════════════════════════════════════════════
-   VOICE PREVIEW PANEL (processing section)
-   ═══════════════════════════════════════════════════════ */
-.voice-preview-panel {
-  margin-top: 20px;
-  background: linear-gradient(135deg,
-      rgba(91, 110, 245, 0.05) 0%,
-      rgba(167, 139, 250, 0.05) 100%);
-  border: 1px solid rgba(91, 110, 245, 0.18);
-  border-radius: var(--radius-lg);
-  padding: 24px;
-  opacity: 0;
-  transform: translateY(16px);
-  transition: all .5s cubic-bezier(.4, 0, .2, 1);
-}
-
-.voice-preview-panel.visible {
-  opacity: 1;
-  transform: translateY(0);
-}
-
-.voice-preview-panel.collapsed {
-  opacity: 0;
-  transform: translateY(-8px) scale(0.98);
-  max-height: 0;
-  padding: 0 24px;
-  margin-top: 0;
-  overflow: hidden;
-  border-color: transparent;
-  transition: all .4s cubic-bezier(.4, 0, .2, 1);
-}
-
-.voice-preview-header {
-  text-align: center;
-  margin-bottom: 20px;
-  position: relative;
-}
-
-.voice-preview-pulse {
-  width: 10px;
-  height: 10px;
-  background: var(--accent);
-  border-radius: 50%;
-  margin: 0 auto 12px;
-  animation: preview-pulse 1.5s ease infinite;
-  box-shadow: 0 0 12px rgba(91, 110, 245, 0.4);
-}
-
-@keyframes preview-pulse {
-
-  0%,
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-
-  50% {
-    transform: scale(1.4);
-    opacity: 0.6;
-  }
-}
-
-.voice-preview-header h4 {
-  font-family: var(--font-display);
-  font-size: 1.15rem;
-  font-weight: 700;
-  margin-bottom: 6px;
-  letter-spacing: -0.01em;
-  background: linear-gradient(135deg, var(--text), var(--accent));
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-.voice-preview-header p {
-  color: var(--text-3);
-  font-size: .8rem;
-}
-
-.voice-cards {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.voice-card {
-  background: var(--surface);
-  border: 1.5px solid var(--border);
-  border-radius: var(--radius);
-  padding: 12px 16px;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 14px;
-  transition: all .3s cubic-bezier(.4, 0, .2, 1);
-  position: relative;
-  overflow: hidden;
-}
-
-.voice-card::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: radial-gradient(ellipse at top left, rgba(91, 110, 245, 0.07) 0%, transparent 60%);
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity .3s;
-}
-
-.voice-card:hover {
-  border-color: rgba(91, 110, 245, 0.35);
-  box-shadow: 0 8px 30px rgba(0, 0, 0, .3);
-}
-
-.voice-card:hover::before {
-  opacity: 1;
-}
-
-.voice-card.selected {
-  border-color: var(--accent);
-  box-shadow:
-    0 0 0 1px var(--accent),
-    0 0 40px rgba(91, 110, 245, 0.12),
-    0 8px 30px rgba(0, 0, 0, .3);
-}
-
-.voice-card.selected::before {
-  opacity: 1;
-}
-
-.voice-card.unavailable {
-  opacity: 0.35;
-  pointer-events: none;
-}
-
-.voice-card-badge {
-  font-weight: 700;
-  font-size: .85rem;
-  color: var(--text);
-  letter-spacing: -0.01em;
-  white-space: nowrap;
-  flex-shrink: 0;
-  min-width: 110px;
-  position: relative;
-  z-index: 1;
-}
-
-.voice-card-player {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  flex: 1;
-  min-width: 120px;
-}
-
-.voice-card-player audio {
-  display: none;
-}
-
-.play-pause-btn {
-  flex-shrink: 0;
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  border: 2px solid var(--accent);
-  background: var(--accent);
-  color: #fff;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: transform .15s, background .2s, opacity .2s;
-  position: relative;
-  z-index: 2;
-}
-
-.play-pause-btn svg {
-  display: block;
-  pointer-events: none;
-}
-
-.play-pause-btn:hover {
-  transform: scale(1.1);
-  background: var(--accent-hover);
-}
-
-.play-pause-btn:active {
-  transform: scale(.95);
-}
-
-.play-pause-btn.loading {
-  opacity: .5;
-  pointer-events: none;
-}
-
-.audio-progress {
-  flex: 1;
-  height: 6px;
-  background: rgba(255, 255, 255, .1);
-  border-radius: 4px;
-  overflow: hidden;
-  cursor: pointer;
-  position: relative;
-  z-index: 1;
-}
-
-.audio-progress-bar {
-  height: 100%;
-  width: 0%;
-  background: var(--accent);
-  border-radius: 4px;
-  transition: width .1s linear;
-}
-
-.audio-time {
-  font-size: .75rem;
-  color: var(--text-2);
-  min-width: 32px;
-  text-align: right;
-  font-variant-numeric: tabular-nums;
-}
-
-.voice-select-btn {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  padding: 8px 16px;
-  font-size: .78rem;
-  font-weight: 600;
-  transition: all .25s;
-  white-space: nowrap;
-  position: relative;
-  z-index: 1;
-  margin-left: auto;
-}
-
-.voice-select-btn:disabled {
-  opacity: 0.7;
-}
-
-/* ── Result state ──────────────────────────────────────── */
-.result-header {
-  text-align: center;
-  margin-bottom: 20px;
-}
-
-.result-check {
-  color: var(--green);
-  margin-bottom: 10px;
-}
-
-.result-header h3 {
-  font-size: 1.2rem;
-  margin-bottom: 4px;
-}
-
-#result-meta {
-  color: var(--text-2);
-  font-size: .85rem;
-}
-
-.video-player-wrap {
-  border-radius: var(--radius);
-  overflow: hidden;
-  margin-bottom: 20px;
-  background: #000;
-}
-
-.result-video {
-  width: 100%;
-  display: block;
-  max-height: 400px;
-}
-
-.result-actions {
-  display: flex;
-  gap: 12px;
-}
-
-.result-actions .btn {
-  flex: 1;
-  justify-content: center;
-}
-
-/* ════════════════════════════════════════════════════════
-   PRICING
-   ════════════════════════════════════════════════════════ */
-.pricing-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 20px;
-  align-items: start;
-}
-
-.pricing-card {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-xl);
-  padding: 36px 28px;
-  position: relative;
-  transition: all .35s cubic-bezier(.4, 0, .2, 1);
-}
-
-.pricing-card:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
-}
-
-/* Popular card */
-.pricing-popular {
-  border-color: var(--accent);
-  box-shadow:
-    0 0 0 1px var(--accent),
-    0 0 60px rgba(91, 110, 245, 0.08);
-}
-
-.pricing-popular:hover {
-  box-shadow:
-    0 0 0 1px var(--accent),
-    0 12px 60px rgba(91, 110, 245, 0.15);
-}
-
-.pricing-badge {
-  font-size: .7rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: .08em;
-  color: var(--text-3);
-  margin-bottom: 8px;
-}
-
-.popular-badge {
-  color: var(--accent);
-}
-
-.pricing-name {
-  font-family: var(--font-display);
-  font-size: 1.3rem;
-  font-weight: 700;
-  margin-bottom: 12px;
-}
-
-.pricing-price {
-  margin-bottom: 12px;
-  display: flex;
-  align-items: baseline;
-  gap: 2px;
-}
-
-.price-amount {
-  font-family: var(--font-display);
-  font-size: 2.8rem;
-  font-weight: 700;
-  letter-spacing: -0.03em;
-}
-
-.price-period {
-  color: var(--text-3);
-  font-size: .9rem;
-}
-
-.pricing-desc {
-  color: var(--text-2);
-  font-size: .85rem;
-  margin-bottom: 24px;
-  line-height: 1.5;
-}
-
-.pricing-features {
-  list-style: none;
-  margin-bottom: 28px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.pricing-features li {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  font-size: .875rem;
-  color: var(--text-2);
-}
-
-.pricing-features li svg {
-  color: var(--green);
-  flex-shrink: 0;
-}
-
-/* ════════════════════════════════════════════════════════
-   CTA SECTION
-   ════════════════════════════════════════════════════════ */
-.cta-section {
-  padding: 80px 0;
-  position: relative;
-  z-index: 1;
-}
-
-.cta-card {
-  background: linear-gradient(135deg, var(--surface), var(--surface-2));
-  border: 1px solid rgba(91, 110, 245, 0.15);
-  border-radius: var(--radius-xl);
-  padding: 64px 48px;
-  text-align: center;
-  position: relative;
-  overflow: hidden;
-}
-
-.cta-card::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: radial-gradient(ellipse at top, rgba(91, 110, 245, 0.06) 0%, transparent 60%);
-  pointer-events: none;
-}
-
-.cta-card h2 {
-  font-family: var(--font-display);
-  font-size: clamp(1.6rem, 3vw, 2.2rem);
-  font-weight: 700;
-  margin-bottom: 12px;
-  letter-spacing: -0.02em;
-  position: relative;
-}
-
-.cta-card p {
-  color: var(--text-2);
-  font-size: 1rem;
-  margin-bottom: 28px;
-  position: relative;
-}
-
-.cta-card .btn {
-  position: relative;
-}
-
-/* ════════════════════════════════════════════════════════
-   FOOTER
-   ════════════════════════════════════════════════════════ */
-.footer {
-  padding: 64px 0 0;
-  border-top: 1px solid var(--border);
-  position: relative;
-  z-index: 1;
-}
-
-.footer-inner {
-  display: flex;
-  justify-content: space-between;
-  gap: 48px;
-  flex-wrap: wrap;
-}
-
-.footer-brand {
-  max-width: 280px;
-}
-
-.footer-brand p {
-  color: var(--text-3);
-  font-size: .85rem;
-  margin-top: 12px;
-  line-height: 1.6;
-}
-
-.footer-links {
-  display: flex;
-  gap: 64px;
-}
-
-.footer-col h4 {
-  font-size: .75rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: .08em;
-  color: var(--text-3);
-  margin-bottom: 16px;
-}
-
-.footer-col a {
-  display: block;
-  color: var(--text-2);
-  text-decoration: none;
-  font-size: .875rem;
-  padding: 4px 0;
-  transition: color .2s;
-}
-
-.footer-col a:hover {
-  color: var(--text);
-}
-
-.footer-bottom {
-  margin-top: 40px;
-  padding: 20px 0;
-  border-top: 1px solid var(--border);
-}
-
-.footer-bottom p {
-  color: var(--text-3);
-  font-size: .8rem;
-}
-
-/* ════════════════════════════════════════════════════════
-   COMMAND PALETTE (⌘K)
-   ════════════════════════════════════════════════════════ */
-.cmd-palette-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.7);
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
-  z-index: 9999;
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  padding-top: 20vh;
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity .2s, visibility .2s;
-}
-
-.cmd-palette-overlay.open {
-  opacity: 1;
-  visibility: visible;
-}
-
-.cmd-palette {
-  width: 560px;
-  max-width: calc(100vw - 48px);
-  background: var(--surface);
-  border: 1px solid var(--border-hover);
-  border-radius: var(--radius-lg);
-  box-shadow:
-    0 0 0 1px rgba(255, 255, 255, 0.05),
-    0 24px 80px rgba(0, 0, 0, .6);
-  overflow: hidden;
-  transform: translateY(-12px) scale(.97);
-  transition: transform .25s cubic-bezier(.4, 0, .2, 1);
-}
-
-.cmd-palette-overlay.open .cmd-palette {
-  transform: translateY(0) scale(1);
-}
-
-.cmd-search-wrap {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 16px 20px;
-  border-bottom: 1px solid var(--border);
-}
-
-.cmd-search-icon {
-  color: var(--text-3);
-  flex-shrink: 0;
-}
-
-.cmd-search {
-  flex: 1;
-  background: none;
-  border: none;
-  color: var(--text);
-  font-family: var(--font);
-  font-size: .95rem;
-  outline: none;
-}
-
-.cmd-search::placeholder {
-  color: var(--text-3);
-}
-
-.cmd-kbd {
-  font-family: var(--font-mono);
-  font-size: .7rem;
-  color: var(--text-3);
-  background: var(--bg);
-  border: 1px solid var(--border);
-  padding: 3px 8px;
-  border-radius: 5px;
-  flex-shrink: 0;
-}
-
-.cmd-results {
-  max-height: 320px;
-  overflow-y: auto;
-  padding: 8px;
-}
-
-.cmd-group-label {
-  font-size: .7rem;
-  font-weight: 600;
-  color: var(--text-3);
-  text-transform: uppercase;
-  letter-spacing: .08em;
-  padding: 8px 12px 4px;
-}
-
-.cmd-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 10px 12px;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: background .15s;
-  color: var(--text-2);
-  font-size: .875rem;
-  text-decoration: none;
-}
-
-.cmd-item:hover,
-.cmd-item.active {
-  background: rgba(91, 110, 245, 0.08);
-  color: var(--text);
-}
-
-.cmd-item-icon {
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--bg);
-  border-radius: 8px;
-  color: var(--text-3);
-  flex-shrink: 0;
-}
-
-.cmd-item:hover .cmd-item-icon,
-.cmd-item.active .cmd-item-icon {
-  color: var(--accent);
-  background: var(--accent-dim);
-}
-
-.cmd-item-text {
-  flex: 1;
-}
-
-.cmd-item-hint {
-  font-size: .75rem;
-  color: var(--text-3);
-}
-
-.cmd-footer {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 10px 20px;
-  border-top: 1px solid var(--border);
-  font-size: .7rem;
-  color: var(--text-3);
-}
-
-.cmd-footer-keys {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.cmd-footer-keys kbd {
-  font-family: var(--font-mono);
-  background: var(--bg);
-  border: 1px solid var(--border);
-  padding: 1px 6px;
-  border-radius: 4px;
-  font-size: .65rem;
-}
-
-/* ════════════════════════════════════════════════════════
-   REVEAL ANIMATION
-   ════════════════════════════════════════════════════════ */
-.reveal {
-  opacity: 0;
-  transform: translateY(24px);
-  transition: opacity .7s cubic-bezier(.4, 0, .2, 1), transform .7s cubic-bezier(.4, 0, .2, 1);
-}
-
-.reveal.visible {
-  opacity: 1;
-  transform: translateY(0);
-}
-
-/* ════════════════════════════════════════════════════════
-   RESPONSIVE
-   ════════════════════════════════════════════════════════ */
-@media (max-width: 999px) {
-  .app-container {
-    flex-direction: column;
-    max-width: 100%;
-  }
-
-  .app-panel {
-    flex: 0 0 auto !important;
-    width: 100% !important;
-    /* swap width animation for vertical slide */
-    transform: translateY(16px);
-    transition:
-      opacity 0.4s ease,
-      transform 0.4s ease;
-  }
-
-  /* On mobile: hide input panel during processing so logs are visible */
-  .state-processing #app-input {
-    display: none !important;
-  }
-
-  /* Processing panel: force visible with all overrides */
-  .state-processing #app-processing {
-    display: block !important;
-    opacity: 1 !important;
-    overflow: visible !important;
-    width: 100% !important;
-    height: auto !important;
-    transform: none !important;
-    pointer-events: auto !important;
-  }
-
-  .state-processing #app-result {
-    transform: translateY(0);
-    opacity: 1;
-  }
-
-  /* On mobile: hide input + processing during result so video is front and center */
-  .state-result #app-input,
-  .state-result #app-processing {
-    display: none !important;
-  }
-
-  .state-result #app-result {
-    display: block !important;
-    opacity: 1 !important;
-    overflow: visible !important;
-    transform: none !important;
-    pointer-events: auto !important;
-  }
-}
-
-@media (max-width: 900px) {
-  .features-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .demos-lanes {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .pricing-grid {
-    grid-template-columns: 1fr;
-    max-width: 400px;
-    margin: 0 auto;
-  }
-
-  .footer-links {
-    gap: 32px;
-  }
-
-  .contrast-grid {
-    grid-template-columns: 1fr;
-    gap: 12px;
-  }
-
-  .contrast-vs {
-    padding: 4px 0;
-  }
-
-  .compare-wrap {
-    padding: 20px;
-  }
-}
-
-@media (max-width: 640px) {
-  .nav-links {
-    display: none;
-  }
-
-  .mobile-menu-btn {
-    display: flex;
-  }
-
-  .hero-stats {
-    gap: 16px;
-    margin-top: 32px;
-  }
-
-  .hero-stat-div {
-    width: 40px;
-    height: 1px;
-  }
-
-  .steps-grid {
-    flex-direction: column;
-  }
-
-  .step-connector {
-    transform: rotate(90deg);
-    padding: 8px 0;
-  }
-
-  .features-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .demos-lanes {
-    grid-template-columns: 1fr;
-    max-width: 340px;
-    margin: 0 auto;
-  }
-
-  .demos-lane {
-    transform: none !important;
-  }
-
-  .language-row {
-    flex-direction: column;
-  }
-
-  .lang-swap {
-    align-self: center;
-    transform: rotate(90deg);
-  }
-
-  .result-actions {
-    flex-direction: column;
-  }
-
-  .voice-card {
-    flex-wrap: wrap;
-  }
-
-  .voice-card-player {
-    width: 100%;
-  }
-
-  .voice-preview-panel {
-    padding: 16px;
-  }
-
-  .terminal-body {
-    max-height: 50vh;
-  }
-
-  .footer-inner {
-    flex-direction: column;
-    gap: 32px;
-  }
-
-  .footer-links {
-    flex-direction: column;
-    gap: 24px;
-  }
-
-  .cta-card {
-    padding: 40px 24px;
-  }
-}
-
-/* Scrollbar */
-::-webkit-scrollbar {
-  width: 6px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--border);
-  border-radius: 3px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: var(--border-hover);
-}

server.py

@@ -91,7 +91,8 @@ ALLOWED_ORIGINS = _parse_allowed_origins(
 
 # ── App ────────────────────────────────────────────────
 router = APIRouter()
-limiter = Limiter(key_func=get_remote_address)
+_RATE_LIMIT_ENABLED = os.getenv("DISABLE_RATE_LIMIT", "").lower() not in ("1", "true", "yes")
+limiter = Limiter(key_func=get_remote_address, enabled=_RATE_LIMIT_ENABLED)
 # Note: app.state.limiter, exception handlers, and SlowAPIMiddleware
 # are now configured on the main Server instance in app.py.
 
@@ -856,7 +857,9 @@ async def startup_event():
     (ARTIFACTS_ROOT / "data").mkdir(parents=True, exist_ok=True)
     (ARTIFACTS_ROOT / "tmp").mkdir(parents=True, exist_ok=True)
 
-    if artifact_reaper_task is None or artifact_reaper_task.done():
+    if os.getenv("DISABLE_CLEANUP", "").lower() in ("1", "true", "yes"):
+        print("[reaper] DISABLE_CLEANUP is set — artifact reaper will not run")
+    elif artifact_reaper_task is None or artifact_reaper_task.done():
         artifact_reaper_task = asyncio.create_task(_artifact_reaper_loop())