feat(frontend): redesign homepage and file config form with aurora palette

Rebuild the visual identity from the actual Ombrora mark (violet/cyan aurora
blobs) instead of the generic blue/amber scheme, add Bricolage Grotesque and
IBM Plex Mono for display and code-like text, and give the hero an animated
aurora backdrop, gradient headline, and a format-pair marquee driven by the
real registered converters.

Rework the file config form: target format and icon size are both chip
groups now instead of a native select, and quality/compression sliders get a
gradient-filled track, custom thumb, and a mono value pill to match. File
type icons are color-coded by family (images/documents/fonts/ebooks) and
reused across FileConfigCard, FileCard, and FormatsGrid.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

frontend/src/FileCard.jsx

@@ -1,8 +1,13 @@
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { File as FileIcon, CircleNotch, DownloadSimple } from '@phosphor-icons/react';
+import { CircleNotch, DownloadSimple, CheckCircle, WarningCircle } from '@phosphor-icons/react';
 import { fetchJobStatus, downloadUrl } from './api.js';
 import { formatBytes } from './utils/formatBytes.js';
+import { fileTypeMeta } from './utils/fileFamily.js';
+
+function extensionOf(fileName) {
+  return fileName.split('.').pop();
+}
 
 export function FileCard({ fileName, fileSize, targetFormat, jobId, initialError }) {
   const { t } = useTranslation();
@@ -29,27 +34,42 @@ export function FileCard({ fileName, fileSize, targetFormat, jobId, initialError
     };
   }, [jobId, initialError]);
 
+  const { Icon, colorVar } = fileTypeMeta(extensionOf(fileName));
+
   return (
-    <li className="file-card">
+    <li className={`file-card file-card-${status}`}>
       <div className="file-tile-header">
-        <FileIcon size={24} weight="regular" />
+        <span className="file-tile-icon" style={{ '--tile-color': `var(${colorVar})` }}>
+          <Icon size={20} weight="regular" />
+        </span>
         <span className="file-tile-name">{fileName}</span>
         {targetFormat && <span className="format-badge">{targetFormat.toUpperCase()}</span>}
         <span className="file-tile-size">{formatBytes(fileSize)}</span>
       </div>
       {(status === 'pending' || status === 'processing') && (
+        <div className="job-progress">
           <span className="job-status">
             <CircleNotch size={18} weight="bold" className="spin" />
             {t('job.converting')}
           </span>
+          <span className="progress-track" aria-hidden="true">
+            <span className="progress-fill" />
+          </span>
+        </div>
       )}
       {status === 'done' && (
         <a className="download-button" href={downloadUrl(jobId)}>
+          <CheckCircle size={18} weight="fill" className="status-icon-success" />
           <DownloadSimple size={20} weight="regular" />
           {t('job.download')} ({formatBytes(outputSize)})
         </a>
       )}
-      {status === 'failed' && <span className="error">{errorMessage}</span>}
+      {status === 'failed' && (
+        <span className="error">
+          <WarningCircle size={18} weight="fill" />
+          {errorMessage}
+        </span>
+      )}
     </li>
   );
 }

frontend/src/api.js

@@ -4,6 +4,11 @@ export async function fetchFormats(source) {
   return data.targets;
 }
 
+export async function fetchConfig() {
+  const response = await fetch('/api/config');
+  return response.json();
+}
+
 export async function uploadFiles(items) {
   const formData = new FormData();
   const targetFormats = [];

frontend/src/components/FileConfigCard.jsx

@@ -1,96 +1,131 @@
-import { File as FileIcon } from '@phosphor-icons/react';
 import { formatBytes } from '../utils/formatBytes.js';
+import { fileTypeMeta } from '../utils/fileFamily.js';
 
 const QUALITY_FORMATS = ['jpg', 'jpeg', 'webp', 'avif', 'tiff'];
 const ICON_SIZES = [16, 32, 48, 256, 512];
 const DEFAULT_ICON_SIZE = 256;
 
+function extensionOf(fileName) {
+  return fileName.split('.').pop();
+}
+
+function rangeProgress(value, min, max) {
+  return `${((value - min) / (max - min)) * 100}%`;
+}
+
+function RangeField({ label, value, min, max, onChange }) {
+  return (
+    <div className="range-field">
+      <div className="range-field-header">
+        <span>{label}</span>
+        <span className="value-pill">{value}</span>
+      </div>
+      <input
+        type="range"
+        min={min}
+        max={max}
+        value={value}
+        style={{ '--range-progress': rangeProgress(value, min, max) }}
+        onChange={(event) => onChange(Number(event.target.value))}
+      />
+    </div>
+  );
+}
+
 export function FileConfigCard({ item, index, t, onTargetFormatChange, onQualityChange, onIconSizeChange }) {
+  const { Icon, colorVar } = fileTypeMeta(extensionOf(item.file.name));
+
   return (
     <li className="file-config-card">
       <div className="file-tile-header">
-        <FileIcon size={24} weight="regular" />
+        <span className="file-tile-icon" style={{ '--tile-color': `var(${colorVar})` }}>
+          <Icon size={20} weight="regular" />
+        </span>
         <span className="file-tile-name">{item.file.name}</span>
         <span className="file-tile-size">{formatBytes(item.file.size)}</span>
       </div>
 
       {item.targets.length > 0 ? (
         <div className="file-config-controls">
-          <div className="format-select-group">
+          <div className="chip-field">
-            <select
+            <span>{t('quality.targetFormat')}</span>
-              className="format-select"
+            <div className="chip-group" role="group" aria-label={t('quality.targetFormat')}>
-              value={item.targetFormat ?? ''}
-              onChange={(event) => onTargetFormatChange(index, event.target.value)}
-            >
               {item.targets.map((target) => (
-                <option key={target} value={target}>
+                <button
-                  {target}
+                  key={target}
-                </option>
+                  type="button"
+                  className={`chip${item.targetFormat === target ? ' chip-active' : ''}`}
+                  aria-pressed={item.targetFormat === target}
+                  onClick={() => onTargetFormatChange(index, target)}
+                >
+                  {target.toUpperCase()}
+                </button>
               ))}
-            </select>
+            </div>
-            {item.targetFormat && <span className="format-badge">{item.targetFormat.toUpperCase()}</span>}
           </div>
 
           {QUALITY_FORMATS.includes(item.targetFormat) && (
-            <label>
+            <RangeField
-              {t('quality.label', { value: item.quality })}
+              label={t('quality.label')}
-              <input
-                type="range"
-                min="1"
-                max="100"
               value={item.quality}
-                onChange={(event) => onQualityChange(index, Number(event.target.value))}
+              min={1}
+              max={100}
+              onChange={(value) => onQualityChange(index, value)}
             />
-            </label>
           )}
 
           {item.targetFormat === 'png' && (
-            <label>
+            <RangeField
-              {t('quality.compression', { value: item.quality })}
+              label={t('quality.compression')}
-              <input
-                type="range"
-                min="0"
-                max="9"
               value={item.quality}
-                onChange={(event) => onQualityChange(index, Number(event.target.value))}
+              min={0}
+              max={9}
+              onChange={(value) => onQualityChange(index, value)}
             />
-            </label>
           )}
 
           {item.targetFormat === 'ico' && (
-            <label>
+            <div className="chip-field">
-              {t('quality.iconSize')}
+              <span>{t('quality.iconSize')}</span>
-              <select
+              <div className="chip-group" role="group" aria-label={t('quality.iconSize')}>
-                value={item.iconSize ?? DEFAULT_ICON_SIZE}
-                onChange={(event) => onIconSizeChange(index, Number(event.target.value))}
-              >
                 {ICON_SIZES.map((size) => (
-                  <option key={size} value={size}>
+                  <button
+                    key={size}
+                    type="button"
+                    className={`chip${(item.iconSize ?? DEFAULT_ICON_SIZE) === size ? ' chip-active' : ''}`}
+                    aria-pressed={(item.iconSize ?? DEFAULT_ICON_SIZE) === size}
+                    onClick={() => onIconSizeChange(index, size)}
+                  >
                     {size}px
-                  </option>
+                  </button>
                 ))}
-              </select>
+              </div>
-            </label>
+            </div>
           )}
 
           {item.targetFormat === 'pdf' && (
-            <label>
+            <div className="pdf-field">
+              <label className="switch-row">
+                <span className="switch">
                   <input
                     type="checkbox"
                     checked={item.quality !== null}
                     onChange={(event) => onQualityChange(index, event.target.checked ? 90 : null)}
                   />
-              {t('quality.compressPdf')}
+                  <span className="switch-track" aria-hidden="true" />
+                </span>
+                <span>{t('quality.compressPdf')}</span>
+              </label>
               {item.quality !== null && (
-                <input
+                <RangeField
-                  type="range"
+                  label={t('quality.label')}
-                  min="1"
-                  max="100"
                   value={item.quality}
-                  onChange={(event) => onQualityChange(index, Number(event.target.value))}
+                  min={1}
+                  max={100}
+                  onChange={(value) => onQualityChange(index, value)}
                 />
               )}
-            </label>
+            </div>
           )}
         </div>
       ) : (

frontend/src/components/FormatMarquee.jsx

@@ -0,0 +1,31 @@
+import { ArrowRight } from '@phosphor-icons/react';
+
+const PAIRS = [
+  ['heic', 'jpg'],
+  ['png', 'webp'],
+  ['docx', 'pdf'],
+  ['ttf', 'woff'],
+  ['epub', 'mobi'],
+];
+
+function Pill({ from, to }) {
+  return (
+    <span className="format-pill">
+      <span>{from.toUpperCase()}</span>
+      <ArrowRight size={12} weight="bold" />
+      <span>{to.toUpperCase()}</span>
+    </span>
+  );
+}
+
+export function FormatMarquee() {
+  return (
+    <div className="format-marquee" aria-hidden="true">
+      <div className="format-marquee-track">
+        {[...PAIRS, ...PAIRS].map(([from, to], index) => (
+          <Pill key={`${from}-${to}-${index}`} from={from} to={to} />
+        ))}
+      </div>
+    </div>
+  );
+}

frontend/src/components/FormatsGrid.jsx

@@ -1,18 +1,32 @@
 import { useTranslation } from 'react-i18next';
+import { Image, FileText, TextAa, BookOpen } from '@phosphor-icons/react';
 import { FORMAT_FAMILIES } from '../data/formats.js';
 
+const FAMILY_ICONS = {
+  images: Image,
+  documents: FileText,
+  fonts: TextAa,
+  ebooks: BookOpen,
+};
+
 export function FormatsGrid() {
   const { t } = useTranslation();
   return (
     <section className="formats-grid-section">
       <h2>{t('formats.title')}</h2>
       <div className="formats-grid">
-        {FORMAT_FAMILIES.map(({ key, formats }) => (
+        {FORMAT_FAMILIES.map(({ key, formats }) => {
-          <div key={key} className="formats-family">
+          const Icon = FAMILY_ICONS[key];
+          return (
+            <div key={key} className="formats-family" style={{ '--tile-color': `var(--color-family-${key})` }}>
+              <span className="formats-family-icon">
+                <Icon size={22} weight="regular" />
+              </span>
               <h3>{t(`formats.${key}`)}</h3>
               <p>{formats.join(', ').toUpperCase()}</p>
             </div>
-        ))}
+          );
+        })}
       </div>
     </section>
   );

frontend/src/components/ReassuranceStrip.jsx

@@ -1,5 +1,7 @@
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Clock, LockKey, CloudArrowUp, HardDrives } from '@phosphor-icons/react';
+import { fetchConfig } from '../api.js';
 
 const ITEMS = [
   { key: 'autoDelete', Icon: Clock },
@@ -10,14 +12,29 @@ const ITEMS = [
 
 export function ReassuranceStrip() {
   const { t } = useTranslation();
+  const [config, setConfig] = useState(null);
+
+  useEffect(() => {
+    fetchConfig().then(setConfig).catch(() => {});
+  }, []);
+
+  if (!config) return null;
+
+  const values = {
+    autoDelete: config.retentionHours,
+    maxSize: config.maxFileSizeMb,
+  };
+
   return (
     <section className="reassurance">
       <h2>{t('reassurance.title')}</h2>
       <ul className="reassurance-list">
         {ITEMS.map(({ key, Icon }) => (
           <li key={key}>
-            <Icon size={24} weight="regular" />
+            <span className="reassurance-icon">
-            <span>{t(`reassurance.${key}`)}</span>
+              <Icon size={22} weight="regular" />
+            </span>
+            <span>{t(`reassurance.${key}`, { value: values[key] })}</span>
           </li>
         ))}
       </ul>

frontend/src/index.css

@@ -1,34 +1,56 @@
-@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Bricolage+Grotesque:opsz,wght@12..96,500..800&family=IBM+Plex+Mono:wght@500;600&display=swap');
 
 :root {
-  --color-primary: #2563eb;
+  /* interactive-safe (AA-contrast) roles */
+  --color-primary: #6d28d9;
   --color-on-primary: #ffffff;
-  --color-secondary: #3b82f6;
+  --color-secondary: #0e7ea8;
-  --color-accent: #d97706;
+  --color-background: #faf9fe;
-  --color-background: #f8fafc;
+  --color-foreground: #150f26;
-  --color-foreground: #0f172a;
+  --color-muted: #ede6ff;
-  --color-muted: #f1f5fd;
+  --color-border: #e3daf7;
-  --color-border: #e4ecfc;
   --color-destructive: #dc2626;
-  --color-ring: #2563eb;
+  --color-ring: #6d28d9;
+
+  /* decorative aurora duo, drawn from the Ombrora mark — used for gradients, blobs, glow */
+  --color-aurora-violet: #7e14ff;
+  --color-aurora-cyan: #47bfff;
+  --color-aurora-mist: #ede6ff;
+  --gradient-aurora: linear-gradient(135deg, var(--color-aurora-violet), var(--color-aurora-cyan));
+
+  /* file-family accents, reused for icon chips across the upload flow */
+  --color-family-images: var(--color-aurora-violet);
+  --color-family-documents: var(--color-aurora-cyan);
+  --color-family-fonts: #f5a524;
+  --color-family-ebooks: #10b981;
 
   --font-sans: 'Plus Jakarta Sans', system-ui, 'Segoe UI', Roboto, sans-serif;
+  --font-display: 'Bricolage Grotesque', var(--font-sans);
+  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
 
   color-scheme: light dark;
   font: 16px/1.5 var(--font-sans);
 }
 
 :root[data-theme='dark'] {
-  --color-primary: #3b82f6;
+  --color-primary: #9b6bff;
-  --color-on-primary: #0f172a;
+  --color-on-primary: #150f26;
-  --color-secondary: #60a5fa;
+  --color-secondary: #47bfff;
-  --color-accent: #f59e0b;
+  --color-background: #0d0a18;
-  --color-background: #0f172a;
+  --color-foreground: #f3f0ff;
-  --color-foreground: #f1f5f9;
+  --color-muted: #1c1530;
-  --color-muted: #1e293b;
+  --color-border: #332853;
-  --color-border: #334155;
+  --color-destructive: #fb7185;
-  --color-destructive: #f87171;
+  --color-ring: #9b6bff;
-  --color-ring: #3b82f6;
+
+  --color-aurora-violet: #9b6bff;
+  --color-aurora-cyan: #47bfff;
+  --color-aurora-mist: #241a3d;
+
+  --color-family-images: var(--color-aurora-violet);
+  --color-family-documents: var(--color-aurora-cyan);
+  --color-family-fonts: #ffb84d;
+  --color-family-ebooks: #34d399;
 }
 
 *, *::before, *::after {

frontend/src/locales/en.json

@@ -7,6 +7,7 @@
     "themeToDark": "Switch to dark mode"
   },
   "hero": {
+    "kicker": "Drop. Convert. Done.",
     "title": "Convert your files online, for free",
     "subtitle": "Drag and drop your files, pick the output format, download the result. No install, no account.",
     "dropzoneLabel": "Drag your files here or click to browse",
@@ -14,8 +15,9 @@
     "unsupportedFormat": "Unsupported format"
   },
   "quality": {
-    "label": "Quality ({{value}})",
+    "targetFormat": "Convert to",
-    "compression": "Compression ({{value}})",
+    "label": "Quality",
+    "compression": "Compression",
     "iconSize": "Icon size",
     "compressPdf": "Compress as JPEG"
   },
@@ -25,10 +27,10 @@
   },
   "reassurance": {
     "title": "Why you can trust us",
-    "autoDelete": "Files deleted automatically after 1h",
+    "autoDelete": "Files deleted automatically after {{value}}h",
     "noAccount": "No account required",
     "online": "100% online — nothing to install",
-    "maxSize": "Up to 100MB per file"
+    "maxSize": "Up to {{value}}MB per file"
   },
   "formats": {
     "title": "Supported formats",

frontend/src/locales/fr.json

@@ -7,6 +7,7 @@
     "themeToDark": "Activer le mode sombre"
   },
   "hero": {
+    "kicker": "Glissez. Convertissez. Terminé.",
     "title": "Convertissez vos fichiers en ligne, gratuitement",
     "subtitle": "Glissez-déposez vos fichiers, choisissez le format de sortie, téléchargez le résultat. Aucune installation, aucun compte.",
     "dropzoneLabel": "Glissez vos fichiers ici ou cliquez pour parcourir",
@@ -14,8 +15,9 @@
     "unsupportedFormat": "Format non supporté"
   },
   "quality": {
-    "label": "Qualité ({{value}})",
+    "targetFormat": "Convertir en",
-    "compression": "Compression ({{value}})",
+    "label": "Qualité",
+    "compression": "Compression",
     "iconSize": "Taille de l'icône",
     "compressPdf": "Compresser en JPEG"
   },
@@ -25,10 +27,10 @@
   },
   "reassurance": {
     "title": "Pourquoi nous faire confiance",
-    "autoDelete": "Fichiers supprimés automatiquement après 1h",
+    "autoDelete": "Fichiers supprimés automatiquement après {{value}}h",
     "noAccount": "Aucun compte requis",
     "online": "100% en ligne — rien à installer",
-    "maxSize": "Jusqu'à 100 Mo par fichier"
+    "maxSize": "Jusqu'à {{value}} Mo par fichier"
   },
   "formats": {
     "title": "Formats pris en charge",

frontend/src/pages/HomePage.jsx

@@ -7,6 +7,7 @@ import { Dropzone } from '../components/Dropzone.jsx';
 import { FileConfigCard } from '../components/FileConfigCard.jsx';
 import { ReassuranceStrip } from '../components/ReassuranceStrip.jsx';
 import { FormatsGrid } from '../components/FormatsGrid.jsx';
+import { FormatMarquee } from '../components/FormatMarquee.jsx';
 import { SeoHead } from '../components/SeoHead.jsx';
 import '../styles/home.css';
 import '../styles/sections.css';
@@ -93,9 +94,13 @@ export function HomePage() {
     <>
       <SeoHead lang={lang} />
       <section className="hero">
-        <h1>{t('hero.title')}</h1>
+        <div className="hero-aurora" aria-hidden="true" />
+        <div className="hero-content">
+          <span className="hero-kicker">{t('hero.kicker')}</span>
+          <h1 className="hero-title">{t('hero.title')}</h1>
           <p>{t('hero.subtitle')}</p>
           <Dropzone label={t('hero.dropzoneLabel')} onFilesSelected={handleFilesSelected} />
+          <FormatMarquee />
 
           {pendingFiles.length > 0 && (
             <div className="pending-files">
@@ -139,6 +144,7 @@ export function HomePage() {
               )
             )}
           </ul>
+        </div>
       </section>
 
       <ReassuranceStrip />

frontend/src/styles/home.css

@@ -1,47 +1,157 @@
 .hero {
-  max-width: 720px;
+  position: relative;
-  margin: 0 auto;
+  overflow: hidden;
-  padding: 3rem 1.5rem;
+  padding: 5rem 1.5rem 3.5rem;
   text-align: center;
+  isolation: isolate;
 }
 
-.hero h1 {
+.hero-aurora {
-  font-size: 2.5rem;
+  position: absolute;
+  inset: -20% -10% auto -10%;
+  height: 32rem;
+  background-image:
+    radial-gradient(38rem 22rem at 18% 15%, color-mix(in srgb, var(--color-aurora-violet) 32%, transparent), transparent 70%),
+    radial-gradient(34rem 20rem at 82% 25%, color-mix(in srgb, var(--color-aurora-cyan) 28%, transparent), transparent 70%),
+    radial-gradient(30rem 18rem at 50% 0%, color-mix(in srgb, var(--color-aurora-mist) 55%, transparent), transparent 75%);
+  filter: blur(10px);
+  animation: aurora-drift 22s ease-in-out infinite alternate;
+  pointer-events: none;
+  z-index: -1;
+}
+
+@keyframes aurora-drift {
+  from {
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  to {
+    transform: translate3d(1.5%, 2%, 0) scale(1.04);
+  }
+}
+
+.hero-content {
+  max-width: 720px;
+  margin: 0 auto;
+}
+
+.hero-kicker {
+  display: inline-block;
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--color-primary);
+  background: var(--color-muted);
+  border: 1px solid var(--color-border);
+  border-radius: 999px;
+  padding: 0.4rem 0.9rem;
+  margin: 0 0 1.25rem;
+}
+
+.hero-title {
+  font-family: var(--font-display);
+  font-size: clamp(2.25rem, 4.5vw + 1rem, 3.5rem);
+  font-weight: 700;
+  line-height: 1.08;
+  letter-spacing: -0.01em;
   margin: 0 0 1rem;
+  background: var(--gradient-aurora);
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
 }
 
 .hero p {
   color: var(--color-foreground);
-  opacity: 0.8;
+  opacity: 0.72;
+  font-size: 1.05rem;
   margin: 0 0 2rem;
 }
 
 .dropzone {
+  position: relative;
   border: 2px dashed var(--color-border);
-  border-radius: 12px;
+  border-radius: 20px;
-  padding: 2.5rem 1.5rem;
+  padding: 3rem 1.5rem;
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 0.75rem;
+  gap: 0.85rem;
   cursor: pointer;
   min-height: 44px;
+  background: color-mix(in srgb, var(--color-muted) 45%, transparent);
+  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
+}
+
+.dropzone:hover {
+  border-color: var(--color-primary);
+  transform: translateY(-2px);
 }
 
 .dropzone-active {
   border-color: var(--color-primary);
+  border-style: solid;
   background: var(--color-muted);
+  box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-aurora-violet) 14%, transparent);
 }
 
 .dropzone-input {
   display: none;
 }
 
+.dropzone svg {
+  color: var(--color-primary);
+}
+
+.format-marquee {
+  overflow: hidden;
+  margin: 1.75rem auto 0;
+  max-width: 100%;
+  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
+}
+
+.format-marquee-track {
+  display: flex;
+  width: max-content;
+  gap: 0.6rem;
+  animation: marquee-scroll 26s linear infinite;
+}
+
+@keyframes marquee-scroll {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-50%);
+  }
+}
+
+.format-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--color-foreground);
+  opacity: 0.8;
+  background: var(--color-muted);
+  border: 1px solid var(--color-border);
+  border-radius: 999px;
+  padding: 0.4rem 0.85rem;
+  white-space: nowrap;
+}
+
+.format-pill svg {
+  color: var(--color-primary);
+}
+
 .pending-files ul,
 .job-list {
   list-style: none;
   padding: 0;
-  margin: 1.5rem 0;
+  margin: 1.75rem 0;
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
@@ -50,22 +160,47 @@
 
 .file-config-card,
 .file-card {
+  position: relative;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 0.75rem;
-  padding: 1rem;
+  padding: 1.1rem;
   border: 1px solid var(--color-border);
-  border-radius: 8px;
+  border-radius: 16px;
+  background: var(--color-background);
+  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-foreground) 4%, transparent);
+  transition: box-shadow 200ms ease, transform 200ms ease;
+}
+
+.file-config-card:hover,
+.file-card:hover {
+  box-shadow: 0 8px 24px color-mix(in srgb, var(--color-foreground) 8%, transparent);
+}
+
+.file-card-failed {
+  border-color: color-mix(in srgb, var(--color-destructive) 45%, var(--color-border));
 }
 
 .file-tile-header {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.65rem;
   flex: 1 1 100%;
 }
 
+.file-tile-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  flex-shrink: 0;
+  border-radius: 10px;
+  color: var(--tile-color, var(--color-primary));
+  background: color-mix(in srgb, var(--tile-color, var(--color-primary)) 16%, transparent);
+}
+
 .file-tile-name {
   font-weight: 500;
   flex: 1 1 auto;
@@ -73,73 +208,231 @@
 }
 
 .file-tile-size {
-  font-size: 0.875rem;
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
   color: var(--color-foreground);
-  opacity: 0.65;
+  opacity: 0.6;
   white-space: nowrap;
 }
 
 .file-config-controls {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.65rem;
   flex: 1 1 100%;
 }
 
-.file-config-controls label {
+.range-field {
   display: flex;
-  align-items: center;
+  flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.4rem;
   font-size: 0.875rem;
+  flex: 1 1 220px;
 }
 
-.format-select-group {
+.range-field-header {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   gap: 0.5rem;
 }
 
-.format-select {
+.value-pill {
-  appearance: none;
+  font-family: var(--font-mono);
-  background-color: var(--color-background);
+  font-size: 0.75rem;
-  color: var(--color-foreground);
+  font-weight: 600;
-  border: 1px solid var(--color-border);
+  color: var(--color-primary);
-  border-radius: 8px;
+  background: var(--color-muted);
-  padding: 0.5rem 2rem 0.5rem 0.75rem;
+  border-radius: 999px;
-  font-weight: 500;
+  padding: 0.15rem 0.55rem;
-  min-height: 44px;
-  background-image:
-    linear-gradient(45deg, transparent 50%, var(--color-foreground) 50%),
-    linear-gradient(135deg, var(--color-foreground) 50%, transparent 50%);
-  background-position:
-    calc(100% - 17px) calc(1.15em),
-    calc(100% - 12px) calc(1.15em);
-  background-size: 5px 5px, 5px 5px;
-  background-repeat: no-repeat;
 }
 
-.format-select:focus-visible {
+.range-field input[type='range'],
-  border-color: var(--color-ring);
+.switch-row input[type='range'] {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 6px;
+  border-radius: 999px;
+  background: linear-gradient(
+    to right,
+    var(--color-primary) var(--range-progress, 50%),
+    var(--color-border) var(--range-progress, 50%)
+  );
+  outline: none;
+}
+
+.range-field input[type='range']::-webkit-slider-thumb,
+.switch-row input[type='range']::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--color-background);
+  border: 3px solid var(--color-primary);
+  box-shadow: 0 1px 3px color-mix(in srgb, var(--color-foreground) 25%, transparent);
+  cursor: pointer;
+}
+
+.range-field input[type='range']::-moz-range-track,
+.switch-row input[type='range']::-moz-range-track {
+  height: 6px;
+  border-radius: 999px;
+  background: var(--color-border);
+}
+
+.range-field input[type='range']::-moz-range-progress,
+.switch-row input[type='range']::-moz-range-progress {
+  height: 6px;
+  border-radius: 999px;
+  background: var(--color-primary);
+}
+
+.range-field input[type='range']::-moz-range-thumb,
+.switch-row input[type='range']::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--color-background);
+  border: 3px solid var(--color-primary);
+  cursor: pointer;
+}
+
+.range-field input[type='range']:focus-visible,
+.switch-row input[type='range']:focus-visible {
+  outline: 2px solid var(--color-ring);
+  outline-offset: 3px;
+}
+
+.chip-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  font-size: 0.875rem;
+  flex: 1 1 100%;
+}
+
+.pdf-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+  flex: 1 1 100%;
+}
+
+.chip-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+}
+
+.chip {
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--color-foreground);
+  background: var(--color-muted);
+  border: 1px solid var(--color-border);
+  border-radius: 999px;
+  padding: 0.4rem 0.75rem;
+  min-height: 36px;
+  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
+}
+
+.chip-active {
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+  color: var(--color-on-primary);
+}
+
+.switch-row {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  font-size: 0.875rem;
+  flex-wrap: wrap;
+}
+
+.switch {
+  position: relative;
+  display: inline-flex;
+  width: 38px;
+  height: 22px;
+  flex-shrink: 0;
+}
+
+.switch input {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  margin: 0;
+  cursor: pointer;
+}
+
+.switch-track {
+  position: absolute;
+  inset: 0;
+  background: var(--color-border);
+  border-radius: 999px;
+  transition: background 150ms ease;
+}
+
+.switch-track::before {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--color-background);
+  transition: transform 150ms ease;
+}
+
+.switch input:checked + .switch-track {
+  background: var(--color-primary);
+}
+
+.switch input:checked + .switch-track::before {
+  transform: translateX(16px);
+}
+
+.switch input:focus-visible + .switch-track {
+  outline: 2px solid var(--color-ring);
+  outline-offset: 2px;
 }
 
 .format-badge {
+  font-family: var(--font-mono);
   background: var(--color-muted);
   color: var(--color-primary);
   border-radius: 999px;
   padding: 0.25rem 0.6rem;
   font-size: 0.75rem;
-  font-weight: 700;
+  font-weight: 600;
-  letter-spacing: 0.03em;
+  letter-spacing: 0.02em;
 }
 
 .convert-button {
-  background: var(--color-accent);
+  background: var(--color-primary);
   color: var(--color-on-primary);
   border: none;
-  border-radius: 8px;
+  border-radius: 10px;
-  padding: 0.75rem 1.5rem;
+  padding: 0.85rem 1.75rem;
   font-weight: 600;
   min-height: 44px;
+  transition: box-shadow 200ms ease, transform 200ms ease;
+}
+
+.convert-button:hover {
+  box-shadow: 0 10px 24px color-mix(in srgb, var(--color-aurora-violet) 35%, transparent);
+  transform: translateY(-1px);
+}
+
+.job-progress {
+  flex: 1 1 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
 }
 
 .job-status {
@@ -148,6 +441,34 @@
   gap: 0.5rem;
   color: var(--color-foreground);
   opacity: 0.75;
+  font-size: 0.875rem;
+}
+
+.progress-track {
+  display: block;
+  width: 100%;
+  height: 4px;
+  border-radius: 999px;
+  background: var(--color-muted);
+  overflow: hidden;
+}
+
+.progress-fill {
+  display: block;
+  width: 40%;
+  height: 100%;
+  border-radius: 999px;
+  background: var(--gradient-aurora);
+  animation: progress-slide 1.4s ease-in-out infinite;
+}
+
+@keyframes progress-slide {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(250%);
+  }
 }
 
 .spin {
@@ -167,42 +488,53 @@
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
-  background: var(--color-accent);
+  background: var(--color-primary);
   color: var(--color-on-primary);
   border: none;
-  border-radius: 8px;
+  border-radius: 10px;
   padding: 0.6rem 1.25rem;
   font-weight: 600;
   min-height: 44px;
   text-decoration: none;
+  transition: box-shadow 200ms ease, transform 200ms ease;
 }
 
 .download-button:hover {
-  filter: brightness(1.05);
+  box-shadow: 0 10px 24px color-mix(in srgb, var(--color-aurora-cyan) 35%, transparent);
+  transform: translateY(-1px);
+}
+
+.status-icon-success {
+  color: #10b981;
 }
 
 .error {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
   color: var(--color-destructive);
+  font-size: 0.9rem;
 }
 
 @media (min-width: 768px) {
   .file-config-controls {
     flex-direction: row;
     align-items: center;
+    flex-wrap: wrap;
     flex: 1 1 auto;
   }
 }
 
 @media (max-width: 480px) {
   .hero {
-    padding: 2rem 1rem;
+    padding: 3rem 1rem 2.5rem;
   }
 
-  .hero h1 {
+  .hero-title {
-    font-size: 1.75rem;
+    font-size: 2rem;
   }
 
   .dropzone {
-    padding: 1.75rem 1rem;
+    padding: 2.25rem 1rem;
   }
 }

frontend/src/styles/layout.css

@@ -1,14 +1,20 @@
 .site-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 1rem 1.5rem;
   border-bottom: 1px solid var(--color-border);
+  background: color-mix(in srgb, var(--color-background) 82%, transparent);
+  backdrop-filter: blur(10px);
 }
 
 .brand {
+  font-family: var(--font-display);
   font-weight: 700;
-  font-size: 1.25rem;
+  font-size: 1.35rem;
   text-decoration: none;
   color: var(--color-foreground);
 }
@@ -37,13 +43,19 @@
 .theme-toggle {
   background: none;
   border: 1px solid var(--color-border);
-  border-radius: 8px;
+  border-radius: 10px;
   width: 44px;
   height: 44px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: var(--color-foreground);
+  transition: border-color 150ms ease, color 150ms ease;
+}
+
+.theme-toggle:hover {
+  border-color: var(--color-primary);
+  color: var(--color-primary);
 }
 
 .site-footer {

frontend/src/styles/sections.css

@@ -2,14 +2,21 @@
 .formats-grid-section {
   max-width: 960px;
   margin: 0 auto;
-  padding: 2.5rem 1.5rem;
+  padding: 3rem 1.5rem;
   text-align: center;
 }
 
+.reassurance h2,
+.formats-grid-section h2 {
+  font-family: var(--font-display);
+  font-size: 1.5rem;
+  font-weight: 700;
+}
+
 .reassurance-list {
   list-style: none;
   padding: 0;
-  margin: 1.5rem 0 0;
+  margin: 1.75rem 0 0;
   display: grid;
   grid-template-columns: 1fr;
   gap: 1rem;
@@ -18,25 +25,61 @@
 .reassurance-list li {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: 0.85rem;
-  padding: 1rem;
+  padding: 1.1rem;
   border: 1px solid var(--color-border);
-  border-radius: 8px;
+  border-radius: 14px;
   text-align: left;
+  transition: box-shadow 200ms ease, transform 200ms ease;
+}
+
+.reassurance-list li:hover {
+  box-shadow: 0 8px 24px color-mix(in srgb, var(--color-foreground) 6%, transparent);
+  transform: translateY(-2px);
+}
+
+.reassurance-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+  border-radius: 12px;
+  color: var(--color-primary);
+  background: var(--color-muted);
 }
 
 .formats-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 1rem;
-  margin-top: 1.5rem;
+  margin-top: 1.75rem;
 }
 
 .formats-family {
-  padding: 1rem;
+  padding: 1.25rem;
   border: 1px solid var(--color-border);
-  border-radius: 8px;
+  border-radius: 14px;
   text-align: left;
+  transition: box-shadow 200ms ease, transform 200ms ease;
+}
+
+.formats-family:hover {
+  box-shadow: 0 8px 24px color-mix(in srgb, var(--color-foreground) 6%, transparent);
+  transform: translateY(-2px);
+}
+
+.formats-family-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  margin-bottom: 0.75rem;
+  border-radius: 12px;
+  color: var(--tile-color, var(--color-primary));
+  background: color-mix(in srgb, var(--tile-color, var(--color-primary)) 16%, transparent);
 }
 
 .formats-family h3 {
@@ -45,8 +88,9 @@
 
 .formats-family p {
   margin: 0;
-  opacity: 0.8;
+  font-family: var(--font-mono);
-  font-size: 0.875rem;
+  opacity: 0.75;
+  font-size: 0.8rem;
 }
 
 @media (min-width: 768px) {

frontend/src/utils/fileFamily.js

@@ -0,0 +1,22 @@
+import { Image, FileText, TextAa, BookOpen, File as FileIcon } from '@phosphor-icons/react';
+import { FORMAT_FAMILIES } from '../data/formats.js';
+
+const FAMILY_ICONS = {
+  images: Image,
+  documents: FileText,
+  fonts: TextAa,
+  ebooks: BookOpen,
+};
+
+export function familyForExtension(extension) {
+  const ext = extension?.toLowerCase();
+  return FORMAT_FAMILIES.find((family) => family.formats.includes(ext))?.key ?? null;
+}
+
+export function fileTypeMeta(extension) {
+  const family = familyForExtension(extension);
+  return {
+    Icon: FAMILY_ICONS[family] ?? FileIcon,
+    colorVar: family ? `--color-family-${family}` : '--color-primary',
+  };
+}