<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Data Mirror | See Who Tracks You & Your Data's True Value</title>

  <!-- SEO -->
  <meta name="description" content="Wondering who tracks you online? Download Data Mirror, the free Chrome extension that reveals your data's market value and exposes hidden data resellers.">
  <meta name="keywords" content="privacy extension, data tracking, ad tracking, browser privacy, GDPR, data brokers, chrome extension, tracker detector, data value, qui vous traque">
  <meta name="author" content="Data Mirror">
  <meta name="robots" content="index, follow">
  <link rel="canonical" href="https://datamirror.eu/">

  <!-- Hreflang bilingue -->
  <link rel="alternate" hreflang="en" href="https://datamirror.eu/" />
  <link rel="alternate" hreflang="fr" href="https://datamirror.eu/fr/" />
  <link rel="alternate" hreflang="x-default" href="https://datamirror.eu/" />

  <!-- Open Graph -->
  <meta property="og:type" content="website">
  <meta property="og:site_name" content="Data Mirror">
  <meta property="og:title" content="Data Mirror | See Who Tracks You & Your Data's True Value">
  <meta property="og:description" content="Wondering who tracks you online? Download Data Mirror, the free Chrome extension that reveals your data's market value and exposes hidden data resellers.">
  <meta property="og:url" content="https://datamirror.eu/">
  <meta property="og:image" content="https://datamirror.eu/og-image.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:locale" content="en_US">
  <meta property="og:locale:alternate" content="fr_FR">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Data Mirror | See Who Tracks You & Your Data's True Value">
  <meta name="twitter:description" content="Wondering who tracks you online? Download Data Mirror, the free Chrome extension that reveals your data's market value and exposes hidden data resellers.">
  <meta name="twitter:image" content="https://datamirror.eu/og-image.png">

  <!-- Schema.org structured data -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": "SoftwareApplication",
        "name": "Data Mirror",
        "applicationCategory": "BrowserExtension",
        "operatingSystem": "Chrome OS, Windows, macOS, Linux",
        "offers": {"@type": "Offer", "price": "0", "priceCurrency": "EUR"},
        "description": "Data Mirror is a free Chrome extension that intercepts network requests to estimate in real-time the financial value of a user's browsing data, expose hidden trackers, Big Tech presence, and data resellers on any webpage.",
        "url": "https://datamirror.eu",
        "downloadUrl": "https://chromewebstore.google.com/detail/data-mirror/ncofhifocmjmmcgdaajjddbbepbcacbf",
        "softwareVersion": "1.0.0",
        "inLanguage": ["en", "fr"],
        "author": {"@type": "Organization", "name": "Data Mirror", "url": "https://datamirror.eu", "email": "hello@datamirror.eu"},
        "countryOfOrigin": "FR",
        "isAccessibleForFree": true,
        "featureList": [
          "Real-time tracker detection",
          "Market value estimation of browsing data",
          "Privacy score A-F grading",
          "Big Tech presence detection",
          "Data broker identification",
          "Country-level data flow mapping",
          "30-day browsing history value summary",
          "JSON and CSV data export",
          "100% local processing — no data transmitted"
        ]
      },
      {
        "@type": "FAQPage",
        "mainEntity": [
          {
            "@type": "Question",
            "name": "Does Data Mirror collect my browsing data?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Absolutely not. All analysis happens locally in your browser. Nothing is ever sent to our servers — we don't even have a server that collects user data. Everything stays on your device."
            }
          },
          {
            "@type": "Question",
            "name": "Will Data Mirror slow down my browsing?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "No. Data Mirror intercepts requests asynchronously — it never blocks or delays network calls. The analysis runs in the background without affecting page load times."
            }
          },
          {
            "@type": "Question",
            "name": "How accurate is the market value estimate?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "It's an educated estimate based on public market research (FTC, Cracked Labs, IAB RTB studies — last updated March 2026). The real-time advertising market is opaque by design, so we show a low/high range to reflect the uncertainty honestly."
            }
          },
          {
            "@type": "Question",
            "name": "What is the difference between a tracker and Big Tech?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Big Tech refers to major technology companies (Google, Meta, Amazon, etc.) whose infrastructure appears on most websites, often for legitimate purposes like maps or fonts. Trackers are specific domains known to profile users for advertising purposes, regardless of which company operates them."
            }
          },
          {
            "@type": "Question",
            "name": "What do the privacy grades A to F mean?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Each grade reflects the overall privacy exposure of a page, scored out of 100. A (85-100): Excellent — very few trackers, data stays mostly in the EU. B (70-84): Good — minor third-party exposure. C (55-69): Fair — several trackers or data leaving the EU. D (40-54): Concerning — multiple high-risk trackers. E (20-39): Poor — heavy tracking, resellers active. F (0-19): Critical — extreme exposure, data sent to high-risk regions."
            }
          }
        ]
      },
      {
        "@type": "WebSite",
        "name": "Data Mirror",
        "url": "https://datamirror.eu",
        "inLanguage": ["en", "fr"],
        "description": "Free Chrome extension that reveals the market value of your browsing data and exposes hidden trackers in real-time."
      }
    ]
  }
  </script>

  <!-- Favicon -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
  <style>
    :root {
      --green:       #00C96E;
      --green-light: #0D2A1E;
      --dark:        #0A0E13;
      --mid:         #1E2D3D;
      --text:        #E8F4FF;
      --muted:       #6B8FA8;
      --border:      #1E2D3D;
      --bg:          #0A0E13;
      --white:       #111820;
      --warn:        #FF7A00;
      --danger:      #FF2D2D;
      --amber:       #FFD700;
      --serif:       Georgia,'Times New Roman',serif;
      --sans:        -apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
      --mono:        'SF Mono','Monaco','Inconsolata','Fira Mono',monospace;
      --radius:      12px;
      --shadow:      0 4px 24px rgba(0,0,0,.3);
    }
    *{box-sizing:border-box;margin:0;padding:0;}
    html{scroll-behavior:smooth;}
    body{font-family:var(--sans);background:var(--bg);color:var(--text);font-size:16px;line-height:1.6;overflow-x:hidden;}
    body::before{content:'';position:fixed;inset:0;z-index:0;
      background-image:linear-gradient(rgba(0,201,110,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(0,201,110,.025) 1px,transparent 1px);
      background-size:48px 48px;pointer-events:none;}

    /* LANG BAR */
    .lang-bar{background:rgba(10,14,19,.95);border-bottom:1px solid var(--border);padding:6px 24px;display:flex;justify-content:flex-end;align-items:center;gap:6px;position:sticky;top:0;z-index:100;}
    .lang-btn{font-family:var(--mono);font-size:10px;padding:3px 10px;border-radius:20px;border:1px solid var(--border);background:none;cursor:pointer;color:var(--muted);transition:all .2s;letter-spacing:.05em;}
    .lang-btn.active{background:var(--green);color:#000;border-color:var(--green);}

    /* NAV */
    nav{max-width:1080px;margin:0 auto;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1;}
    .nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;}
    .nav-logo-icon{display:flex;align-items:center;justify-content:center;overflow:hidden;width:36px;height:36px;border-radius:8px;}
    .nav-logo-text{font-family:var(--mono);font-size:14px;font-weight:500;color:var(--text);letter-spacing:.06em;}
    .nav-logo-tld{color:var(--green);}
    .nav-blog{font-size:13px;color:var(--muted);padding:4px 12px;border:1px solid var(--border);border-radius:20px;text-decoration:none;transition:all .2s;white-space:nowrap;}
    .nav-blog:hover{color:var(--green);border-color:rgba(0,201,110,.4);}
    .nav-cta{font-family:var(--sans);font-size:14px;font-weight:500;padding:10px 22px;background:var(--green);color:#000;border:none;border-radius:40px;cursor:pointer;text-decoration:none;transition:all .2s;display:flex;align-items:center;gap:8px;}
    .nav-cta:hover{opacity:.9;transform:translateY(-1px);}

    /* HERO */
    .hero{max-width:1080px;margin:0 auto;padding:60px 24px 80px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative;z-index:1;}
    @media(max-width:760px){.hero{grid-template-columns:1fr;gap:40px;padding:40px 20px 60px;}.hero-visual{order:-1;}}
    .hero-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin-bottom:16px;opacity:0;animation:fadeUp .6s .1s forwards;display:flex;align-items:center;gap:8px;}
    .eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 2s infinite;flex-shrink:0;}
    .hero-title{font-family:var(--serif);font-size:clamp(32px,5vw,54px);line-height:1.1;color:var(--text);margin-bottom:20px;opacity:0;animation:fadeUp .6s .2s forwards;}
    .hero-title em{font-style:normal;color:var(--amber);}
    .hero-seo-h2{font-size:15px;color:var(--muted);line-height:1.6;margin-bottom:8px;font-weight:400;font-family:var(--font-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif);}
    .hero-sub{font-size:17px;color:var(--muted);line-height:1.7;margin-bottom:28px;max-width:460px;opacity:0;animation:fadeUp .6s .3s forwards;}

    /* Compteur inline */
    .hero-counter{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px;opacity:0;animation:fadeUp .6s .35s forwards;}
    .counter-chip{background:rgba(30,45,61,.5);border:1px solid var(--border);border-radius:8px;padding:10px 14px;text-align:center;min-width:110px;}
    .counter-chip.hl{border-color:rgba(255,215,0,.3);background:rgba(255,215,0,.05);}
    .cval{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--green);line-height:1;margin-bottom:3px;}
    .counter-chip.hl .cval{color:var(--amber);}
    .clbl{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;line-height:1.3;}

    .hero-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;opacity:0;animation:fadeUp .6s .4s forwards;}
    .btn-primary{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;background:var(--green);color:#000;border-radius:40px;font-size:15px;font-weight:500;text-decoration:none;transition:all .2s;border:none;cursor:pointer;}
    .btn-primary:hover{opacity:.9;transform:translateY(-2px);}
    .btn-secondary{font-size:14px;color:var(--muted);text-decoration:none;display:flex;align-items:center;gap:6px;transition:color .2s;}
    .btn-secondary:hover{color:var(--text);}
    .hero-badges{margin-top:28px;display:flex;gap:10px;flex-wrap:wrap;opacity:0;animation:fadeUp .6s .5s forwards;}
    .badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11px;padding:4px 10px;border-radius:20px;border:1px solid var(--border);color:var(--muted);}
    .badge.green{border-color:rgba(0,201,110,.4);color:var(--green);}

    /* MOCK */
    .hero-visual{opacity:0;animation:fadeIn .8s .5s forwards;}
    .mock-ext{background:#0D1117;border-radius:16px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 80px rgba(0,201,110,.04);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:12px;color:#E8F4FF;max-width:400px;margin:0 auto;}
    .mock-header{background:#0D1117;border-bottom:1px solid #1E2D3D;padding:9px 12px;display:flex;align-items:center;justify-content:space-between;}
    .mock-logo{display:flex;align-items:center;gap:8px;}
    .mock-logo-icon{display:flex;align-items:center;justify-content:center;overflow:hidden;width:24px;height:24px;border-radius:5px;}
    .mock-logo-text{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;color:#E8F4FF;}
    .mock-score{display:flex;align-items:center;gap:5px;background:#111820;border:1px solid #1E2D3D;border-radius:20px;padding:3px 9px;}
    .mock-grade{font-family:var(--mono);font-size:15px;font-weight:700;}
    .mock-grade-num{font-family:var(--mono);font-size:8px;color:#6B8FA8;}
    .mock-earn{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;background:rgba(255,176,0,.06);border-bottom:1px solid rgba(255,176,0,.12);}
    .mock-earn-label{font-size:11px;color:#FF9F0A;}
    .mock-earn-val{font-family:var(--mono);font-size:15px;font-weight:700;color:#FFD700;}
    .mock-earn-period{font-size:9px;color:#5A7A96;margin-left:4px;}
    .mock-alert{padding:3px 12px;font-size:9px;font-weight:600;color:#FF9F0A;background:rgba(255,122,0,.06);border-bottom:1px solid rgba(255,122,0,.15);display:flex;align-items:center;gap:5px;}
    .mock-stats{display:flex;padding:7px 12px;border-bottom:1px solid #1E2D3D;}
    .mock-stat{flex:1;text-align:center;}
    .mock-stat-val{font-family:var(--mono);font-size:14px;font-weight:700;}
    .mock-stat-val.g{color:#FF7A00;}.mock-stat-val.b{color:#00FF88;}
    .mock-stat-label{font-size:10px;color:#8BAEC8;margin-top:2px;}
    .mock-tabs{display:flex;border-bottom:1px solid #1E2D3D;margin-bottom:-1px;}
    .mock-tab{flex:1;padding:6px 2px;text-align:center;font-size:10px;font-weight:600;color:#5A7A96;border-bottom:2px solid transparent;}
    .mock-tab.act{color:#00C96E;border-bottom:2px solid #00C96E;}
    .mock-section{padding:10px 12px;border-bottom:1px solid #1E2D3D;}
    .mock-section-title{font-size:11px;font-weight:600;color:#8BAEC8;margin-bottom:7px;display:flex;align-items:center;gap:6px;}
    .mock-section-title::after{content:"";flex:1;height:1px;background:#1E2D3D;}
    .mock-pills{display:flex;flex-wrap:wrap;gap:4px;}
    .mock-pill{font-size:10px;padding:2px 8px;border-radius:20px;border:1px solid;font-weight:500;}
    .mock-tracker{display:flex;align-items:center;gap:6px;padding:4px 0;}
    .mock-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
    .mock-tracker-name{font-family:var(--mono);font-size:10px;flex:1;color:#8BAEC8;}
    .mock-tracker-type{font-size:10px;color:#5A7A96;background:#080C10;padding:1px 5px;border-radius:3px;}
    .mock-val-block{background:#111820;border:1px solid #1E2D3D;border-radius:8px;padding:10px 12px;}
    .mock-val-title{font-size:11px;font-weight:600;color:#FF9F0A;margin-bottom:8px;}
    .mock-val-row{display:flex;align-items:center;gap:8px;}
    .mock-val-cell{flex:1;text-align:center;}
    .mock-val-amount{font-family:var(--mono);font-size:16px;font-weight:700;color:#FFD700;}
    .mock-val-amount.high{color:#FF7A00;}
    .mock-val-sub{font-size:10px;color:#5A7A96;margin-top:2px;}
    .mock-val-sep{width:1px;height:28px;background:#1E2D3D;}
    .mock-vb{display:flex;justify-content:space-between;font-size:10px;color:#6B8FA8;padding:2px 0;border-top:1px solid #1E2D3D;margin-top:6px;}
    .mock-footer{padding:5px 12px;display:flex;align-items:center;justify-content:space-between;background:#0D1117;border-top:1px solid #1E2D3D;}
    .mock-footer-note{font-size:10px;color:#5A7A96;display:flex;align-items:center;gap:4px;}
    .mock-pulse{width:5px;height:5px;border-radius:50%;background:#00FF88;display:inline-block;animation:pulse 2s ease-in-out infinite;}
    .mock-coffee{display:flex;align-items:center;justify-content:center;padding:5px 12px;font-size:11px;font-weight:600;color:#00C96E;background:rgba(0,201,110,.04);border-top:1px solid rgba(0,201,110,.1);}

    /* TRUST BAR */
    .trust-bar{background:#0D1117;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:20px 24px;position:relative;z-index:1;}
    .trust-inner{max-width:1080px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:40px;flex-wrap:wrap;}
    .trust-item{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);}
    .trust-icon{font-size:18px;}

    /* SHOCK */
    .shock-wrap{position:relative;z-index:1;background:rgba(255,45,45,.04);border-top:1px solid rgba(255,45,45,.1);border-bottom:1px solid rgba(255,45,45,.1);padding:70px 24px;}
    .shock-inner{max-width:1080px;margin:0 auto;}
    .shock-label{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--danger);text-align:center;margin-bottom:40px;}
    .shock-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;}
    @media(max-width:680px){.shock-grid{grid-template-columns:1fr;}.shock-item:first-child{border-radius:12px 12px 0 0;}.shock-item:last-child{border-radius:0 0 12px 12px;}}
    .shock-item{background:rgba(10,14,19,.8);border:1px solid rgba(255,45,45,.08);padding:32px 24px;text-align:center;}
    .shock-item:first-child{border-radius:12px 0 0 12px;}
    .shock-item:last-child{border-radius:0 12px 12px 0;}
    .shock-num{font-family:var(--mono);font-size:52px;font-weight:700;color:var(--danger);line-height:1;margin-bottom:10px;}
    .shock-title{font-size:15px;font-weight:600;color:var(--text);margin-bottom:8px;}
    .shock-desc{font-size:13px;color:var(--muted);line-height:1.6;}

    /* SECTION */
    .section{max-width:1080px;margin:0 auto;padding:80px 24px;position:relative;z-index:1;}
    .section-label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin-bottom:12px;text-align:center;}
    .section-title{font-family:var(--serif);font-size:clamp(28px,4vw,42px);line-height:1.15;text-align:center;color:var(--text);margin-bottom:16px;}
    .section-title em{font-style:italic;color:var(--green);}
    .section-sub{font-size:16px;color:var(--muted);text-align:center;max-width:540px;margin:0 auto 56px;line-height:1.7;}

    /* STEPS */
    .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
    @media(max-width:680px){.steps{grid-template-columns:1fr;}}
    .step{text-align:center;padding:32px 24px;background:#0D1117;border-radius:var(--radius);border:1px solid var(--border);position:relative;transition:box-shadow .2s,transform .2s;}
    .step:hover{box-shadow:0 8px 32px rgba(0,201,110,.08);transform:translateY(-4px);}
    .step-num{font-family:var(--mono);font-size:11px;color:var(--green);letter-spacing:.1em;margin-bottom:16px;}
    .step-icon{width:56px;height:56px;margin:0 auto 20px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px;}
    .step-icon.blue{background:#0D1F3A;}
    .step-icon.green{background:var(--green-light);}
    .step-icon.amber{background:#2A1F00;}
    .step h3{font-family:var(--serif);font-size:20px;margin-bottom:10px;color:var(--text);}
    .step p{font-size:14px;color:var(--muted);line-height:1.7;}
    .step-connector{display:none;}
    @media(min-width:680px){.step-connector{display:block;position:absolute;top:50px;right:-20px;width:40px;height:2px;background:linear-gradient(90deg,var(--border),transparent);}}

    /* SCREENSHOTS */
    .screenshots-bg{background:#080C10;overflow:hidden;position:relative;z-index:1;}
    .screenshots-inner{max-width:1080px;margin:0 auto;padding:80px 24px;}
    .screenshots-inner .section-label{color:var(--green);}
    .screenshots-inner .section-title{color:var(--text);}
    .screenshots-inner .section-sub{color:#6B8FA8;}
    .screens-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
    @media(max-width:680px){.screens-grid{grid-template-columns:1fr;}}
    .screen-card{background:#111820;border:1px solid #1E2D3D;border-radius:var(--radius);overflow:hidden;transition:transform .2s;}
    .screen-card:hover{transform:translateY(-4px);}
    .screen-label{padding:10px 14px;border-bottom:1px solid #1E2D3D;font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#3A5570;}
    .screen-preview{padding:14px;min-height:160px;display:flex;flex-direction:column;gap:6px;}
    .sp-score-row{display:flex;gap:8px;margin-bottom:6px;}
    .sp-grade{font-family:var(--mono);font-size:32px;font-weight:700;line-height:1;}
    .sp-details{display:flex;flex-direction:column;justify-content:center;gap:2px;}
    .sp-geo-row{display:flex;align-items:center;gap:8px;margin-bottom:4px;}
    .sp-geo-label{font-size:10px;color:#6B8FA8;width:70px;flex-shrink:0;}
    .sp-geo-track{flex:1;height:5px;background:#1E2D3D;border-radius:3px;overflow:hidden;}
    .sp-geo-fill{height:100%;border-radius:3px;}
    .sp-geo-pct{font-family:var(--mono);font-size:9px;color:#6B8FA8;width:26px;text-align:right;}
    .sp-value-header{font-family:var(--mono);font-size:8px;color:#FF7A00;text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px;}
    .sp-value-row{display:flex;gap:8px;margin-bottom:8px;}
    .sp-value-cell{flex:1;text-align:center;}
    .sp-value-amount{font-family:var(--mono);font-size:20px;font-weight:700;}
    .sp-value-sub{font-size:8px;color:#6B8FA8;margin-top:2px;}

    /* MANIFESTO */
    .manifesto-bg{background:#0D2A1E;border-top:1px solid #1A4A30;border-bottom:1px solid #1A4A30;position:relative;z-index:1;}
    .manifesto-inner{max-width:720px;margin:0 auto;padding:80px 24px;text-align:center;}
    .manifesto-quote{font-family:var(--serif);font-size:clamp(22px,3vw,32px);line-height:1.4;color:var(--text);margin-bottom:28px;font-style:italic;}
    .manifesto-quote strong{font-style:normal;color:var(--green);}
    .manifesto-body{font-size:15px;color:var(--muted);line-height:1.8;margin-bottom:24px;}
    .manifesto-sig{font-family:var(--mono);font-size:12px;color:var(--muted);}

    /* FAQ */
    .faq-list{max-width:680px;margin:0 auto;}
    .faq-item{border-bottom:1px solid var(--border);padding:20px 0;}
    .faq-q{font-family:var(--serif);font-size:18px;color:var(--text);margin-bottom:10px;display:flex;align-items:flex-start;gap:12px;}
    .faq-q::before{content:'→';color:var(--green);flex-shrink:0;margin-top:2px;}
    .faq-a{font-size:15px;color:var(--muted);line-height:1.7;padding-left:24px;}

    /* CTA FINAL */
    .cta-final{text-align:center;padding:100px 24px;background:#060A0E;position:relative;overflow:hidden;z-index:1;}
    .cta-final::before{content:'';position:absolute;top:-100px;left:50%;transform:translateX(-50%);width:600px;height:600px;background:radial-gradient(circle,rgba(0,255,136,.08) 0%,transparent 70%);pointer-events:none;}
    .cta-final-title{font-family:var(--serif);font-size:clamp(32px,5vw,52px);color:var(--text);margin-bottom:16px;position:relative;}
    .cta-final-title em{font-style:italic;color:var(--green);}
    .cta-final-sub{font-size:16px;color:var(--muted);margin-bottom:40px;max-width:480px;margin-left:auto;margin-right:auto;line-height:1.7;}
    .cta-final-btn{display:inline-flex;align-items:center;gap:10px;padding:16px 36px;background:var(--green);color:#000;border-radius:40px;font-size:16px;font-weight:500;text-decoration:none;transition:all .2s;position:relative;}
    .cta-final-btn:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,201,110,.3);}
    .cta-note{margin-top:16px;font-size:12px;color:#3A5570;}

    /* FOOTER */
    footer{background:#060A0E;padding:32px 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;max-width:100%;position:relative;z-index:1;}
    .footer-logo{font-family:var(--mono);font-size:13px;color:#3A5570;letter-spacing:.06em;}
    .footer-logo span{color:var(--green);}
    .footer-links{display:flex;gap:20px;}
    .footer-links a{font-size:12px;color:#3A5570;text-decoration:none;transition:color .2s;}
    .footer-links a:hover{color:var(--green);}
    .footer-copy{font-size:11px;color:#2A3A4A;width:100%;text-align:center;padding-top:16px;border-top:1px solid #1E2D3D;margin-top:8px;}

    /* ANIMATIONS */
    @keyframes fadeUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
    @keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
    @keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(.7);}}
    .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s,transform .6s;}
    .reveal.visible{opacity:1;transform:translateY(0);}
  </style>
</head>
<body>

<div class="lang-bar">
  <button class="lang-btn active" onclick="setLang('en')" id="btn-en">EN</button>
  <button class="lang-btn" onclick="setLang('fr')" id="btn-fr">FR</button>
</div>

<nav>
  <a href="/" class="nav-logo">
    <div class="nav-logo-icon">
      <svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" width="36" height="36">
        <defs><linearGradient id="ng1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#00FF88"/><stop offset="100%" stop-color="#4A7AFF"/></linearGradient></defs>
        <rect width="128" height="128" rx="24" fill="#080C10"/>
        <rect x="2" y="2" width="124" height="124" rx="22" fill="none" stroke="url(#ng1)" stroke-width="2" opacity="0.6"/>
        <line x1="0" y1="43" x2="128" y2="43" stroke="#00FF88" stroke-width="0.5" opacity="0.15"/>
        <line x1="0" y1="85" x2="128" y2="85" stroke="#00FF88" stroke-width="0.5" opacity="0.15"/>
        <line x1="43" y1="0" x2="43" y2="128" stroke="#00FF88" stroke-width="0.5" opacity="0.15"/>
        <line x1="85" y1="0" x2="85" y2="128" stroke="#00FF88" stroke-width="0.5" opacity="0.15"/>
        <path d="M 20 64 Q 64 28 108 64 Q 64 100 20 64 Z" fill="none" stroke="url(#ng1)" stroke-width="3"/>
        <circle cx="64" cy="64" r="18" fill="none" stroke="url(#ng1)" stroke-width="2.5"/>
        <circle cx="64" cy="64" r="9" fill="url(#ng1)"/>
        <circle cx="64" cy="64" r="3" fill="#080C10"/>
        <path d="M 16 20 L 16 28 L 24 28" fill="none" stroke="#00FF88" stroke-width="1.5" opacity="0.5"/>
        <path d="M 112 20 L 112 28 L 104 28" fill="none" stroke="#00FF88" stroke-width="1.5" opacity="0.5"/>
        <path d="M 16 108 L 16 100 L 24 100" fill="none" stroke="#00FF88" stroke-width="1.5" opacity="0.5"/>
        <path d="M 112 108 L 112 100 L 104 100" fill="none" stroke="#00FF88" stroke-width="1.5" opacity="0.5"/>
      </svg>
    </div>
    <span class="nav-logo-text">DATA MIRROR<span class="nav-logo-tld">.EU</span></span>
  </a>
  <a href="/blog/" class="nav-blog" data-en="Blog" data-fr="Blog">Blog</a>
  <a href="https://chromewebstore.google.com/detail/data-mirror/ncofhifocmjmmcgdaajjddbbepbcacbf" class="nav-cta">
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z" fill="currentColor"/></svg>
    <span data-en="Install — Free" data-fr="Installer — Gratuit">Install — Free</span>
  </a>
</nav>

<!-- HERO -->
<div class="hero">
  <div class="hero-content">
    <p class="hero-eyebrow"><span class="eyebrow-dot"></span><span data-en="Free browser extension · Chrome" data-fr="Extension gratuite · Chrome">Free browser extension · Chrome</span></p>
    <h1 class="hero-title">
      <span data-en="Your data has a price." data-fr="Vos données ont un prix.">Your data has a price.</span><br>
      <em data-en="It's time you knew it." data-fr="Il est temps de le savoir.">It's time you knew it.</em>
    </h1>
    <!-- H2 descriptif pour Google — visuellement discret mais sémantiquement fort -->
    <h2 class="hero-seo-h2" data-en="The free Chrome extension that detects trackers, exposes data resellers, and reveals the market value of your browsing data in real-time." data-fr="L'extension Chrome gratuite qui détecte les trackers, expose les revendeurs de données et révèle la valeur marchande de votre navigation en temps réel.">The free Chrome extension that detects trackers, exposes data resellers, and reveals the market value of your browsing data in real-time.</h2>
    <p class="hero-sub" data-en="Every website you visit sells your browsing to advertisers — without telling you. Data Mirror shows exactly what's being sold, to whom, and what it's worth." data-fr="Chaque site que vous visitez vend votre navigation aux annonceurs — sans vous le dire. Data Mirror montre exactement ce qui est vendu, à qui, et ce que ça vaut.">Every website you visit sells your browsing to advertisers — without telling you. Data Mirror shows exactly what's being sold, to whom, and what it's worth.</p>

    <div class="hero-counter">
      <div class="counter-chip hl">
        <div class="cval" id="heroValue">$0.00</div>
        <div class="clbl" data-en="avg. value per session" data-fr="valeur moyenne / session">avg. value per session</div>
      </div>
      <div class="counter-chip">
        <div class="cval" id="heroTrackers">0</div>
        <div class="clbl" data-en="trackers / news site" data-fr="trackers / site d'info">trackers / news site</div>
      </div>
      <div class="counter-chip">
        <div class="cval" id="heroCompanies">0</div>
        <div class="clbl" data-en="data resellers monitored" data-fr="revendeurs surveillés">data resellers monitored</div>
      </div>
    </div>

    <div class="hero-actions">
      <a href="https://chromewebstore.google.com/detail/data-mirror/ncofhifocmjmmcgdaajjddbbepbcacbf" class="btn-primary">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z" fill="currentColor"/></svg>
        <span data-en="Add to Chrome — Free" data-fr="Ajouter à Chrome — Gratuit">Add to Chrome — Free</span>
      </a>
      <a href="#how" class="btn-secondary"><span data-en="How does it work?" data-fr="Comment ça marche ?">How does it work?</span> →</a>
    </div>
    <div class="hero-badges">
      <span class="badge green">✓ <span data-en="Zero data collection" data-fr="Zéro collecte">Zero data collection</span></span>
      <span class="badge">🔒 <span data-en="100% local" data-fr="100% local">100% local</span></span>
      <span class="badge">🇫🇷 <span data-en="Made in France" data-fr="Conçu en France">Made in France</span></span>
    </div>
  </div>

  <div class="hero-visual">
    <div class="mock-ext">

      <!-- HEADER -->
      <div class="mock-header">
        <div class="mock-logo">
          <div class="mock-logo-icon">
            <svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
              <defs><linearGradient id="mg1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#00FF88"/><stop offset="100%" stop-color="#4A7AFF"/></linearGradient></defs>
              <rect width="128" height="128" rx="22" fill="#080C10"/>
              <rect x="2" y="2" width="124" height="124" rx="20" fill="none" stroke="url(#mg1)" stroke-width="2" opacity="0.5"/>
              <line x1="0" y1="43" x2="128" y2="43" stroke="#00FF88" stroke-width="0.5" opacity="0.12"/>
              <line x1="0" y1="85" x2="128" y2="85" stroke="#00FF88" stroke-width="0.5" opacity="0.12"/>
              <line x1="43" y1="0" x2="43" y2="128" stroke="#00FF88" stroke-width="0.5" opacity="0.12"/>
              <line x1="85" y1="0" x2="85" y2="128" stroke="#00FF88" stroke-width="0.5" opacity="0.12"/>
              <path d="M 20 64 Q 64 28 108 64 Q 64 100 20 64 Z" fill="none" stroke="url(#mg1)" stroke-width="3"/>
              <circle cx="64" cy="64" r="18" fill="none" stroke="url(#mg1)" stroke-width="2.5"/>
              <circle cx="64" cy="64" r="9" fill="url(#mg1)"/>
              <circle cx="64" cy="64" r="3" fill="#080C10"/>
              <path d="M 16 20 L 16 28 L 24 28" fill="none" stroke="#00FF88" stroke-width="1.5" opacity="0.5"/>
              <path d="M 112 20 L 112 28 L 104 28" fill="none" stroke="#00FF88" stroke-width="1.5" opacity="0.5"/>
              <path d="M 16 108 L 16 100 L 24 100" fill="none" stroke="#00FF88" stroke-width="1.5" opacity="0.5"/>
              <path d="M 112 108 L 112 100 L 104 100" fill="none" stroke="#00FF88" stroke-width="1.5" opacity="0.5"/>
            </svg>
          </div>
          <span class="mock-logo-text">DATA MIRROR</span>
        </div>
        <div class="mock-score">
          <span class="mock-grade" style="color:#FF7A00">D</span>
          <div><div class="mock-grade-num">48/100</div><div style="font-size:7px;color:#FF7A00">Concerning</div></div>
        </div>
      </div>

      <!-- EARN BAR -->
      <div class="mock-earn">
        <span class="mock-earn-label">💰 <span data-en="You should have earned this" data-fr="Vous auriez dû toucher ça">You should have earned this</span></span>
        <div style="display:flex;align-items:baseline;gap:4px;">
          <span class="mock-earn-val">~$21</span>
          <span class="mock-earn-period">· 30d</span>
        </div>
      </div>

      <!-- ALERT -->
      <div class="mock-alert">⚠ <span data-en="Data is leaving the European Union" data-fr="Les données quittent l'UE">Data is leaving the European Union</span></div>

      <!-- STATS -->
      <div class="mock-stats">
        <div class="mock-stat"><div class="mock-stat-val g">4</div><div class="mock-stat-label" data-en="Countries" data-fr="Pays">Countries</div></div>
        <div class="mock-stat"><div class="mock-stat-val" style="color:#E8F4FF">247</div><div class="mock-stat-label" data-en="Requests" data-fr="Requêtes">Requests</div></div>
        <div class="mock-stat"><div class="mock-stat-val g">7</div><div class="mock-stat-label">Trackers</div></div>
        <div class="mock-stat"><div class="mock-stat-val b">3</div><div class="mock-stat-label">Big Tech</div></div>
        <div class="mock-stat"><div class="mock-stat-val" style="color:#FF9500">2</div><div class="mock-stat-label" data-en="Resellers" data-fr="Revendeurs">Resellers</div></div>
      </div>

      <!-- TABS -->
      <div class="mock-tabs">
        <div class="mock-tab act">Overview</div>
        <div class="mock-tab">Countries</div>
        <div class="mock-tab">Trackers</div>
        <div class="mock-tab">History</div>
        <div class="mock-tab">Export</div>
      </div>

      <!-- SECTION GEO -->
      <div class="mock-section">
        <div class="mock-section-title" data-en="Where your data goes" data-fr="Où vont vos données">Where your data goes</div>
        <div style="display:flex;flex-direction:column;gap:5px;">
          <div style="display:flex;align-items:center;gap:8px;">
            <div style="font-size:11px;color:#8BAEC8;width:60px;">🇫🇷 France</div>
            <div style="flex:1;height:5px;background:#1E2D3D;border-radius:3px;overflow:hidden;"><div style="width:30%;height:100%;background:#0055A4;border-radius:3px;"></div></div>
            <div style="font-size:10px;color:#8BAEC8;width:28px;text-align:right;">30%</div>
          </div>
          <div style="display:flex;align-items:center;gap:8px;">
            <div style="font-size:11px;color:#8BAEC8;width:60px;">🌎 Non-EU</div>
            <div style="flex:1;height:5px;background:#1E2D3D;border-radius:3px;overflow:hidden;"><div style="width:55%;height:100%;background:#FF7A00;border-radius:3px;"></div></div>
            <div style="font-size:10px;color:#8BAEC8;width:28px;text-align:right;">55%</div>
          </div>
        </div>
      </div>

      <!-- VALUE BLOCK -->
      <div class="mock-section">
        <div class="mock-val-block">
          <div class="mock-val-title">💰 <span data-en="This visit" data-fr="Cette visite">This visit</span></div>
          <div class="mock-val-row">
            <div class="mock-val-cell"><div class="mock-val-amount">$0.042</div><div class="mock-val-sub" data-en="Low" data-fr="Bas">Low</div></div>
            <div class="mock-val-sep"></div>
            <div class="mock-val-cell"><div class="mock-val-amount high">$0.38</div><div class="mock-val-sub" data-en="High" data-fr="Haut">High</div></div>
          </div>
          <div class="mock-vb"><span>· Tracking / Profiling</span><span style="color:#FF9F0A;">$0.008–$0.080</span></div>
          <div class="mock-vb" style="border-top:none;padding-top:0;"><span>· Real-time ad auction</span><span style="color:#FF9F0A;">$0.003–$0.015</span></div>
        </div>
      </div>

      <!-- TRACKERS -->
      <div class="mock-section">
        <div class="mock-section-title" data-en="Trackers detected" data-fr="Trackers détectés">Trackers detected</div>
        <div class="mock-tracker">
          <div class="mock-dot" style="background:#FF2D2D;box-shadow:0 0 4px #FF2D2D40"></div>
          <div class="mock-tracker-name">doubleclick.net</div>
          <div class="mock-tracker-type">Advertising</div>
          <div style="font-size:9px;color:#5A7A96;margin-left:auto">8×</div>
        </div>
        <div class="mock-tracker">
          <div class="mock-dot" style="background:#FF7A00"></div>
          <div class="mock-tracker-name">google-analytics.com</div>
          <div class="mock-tracker-type">Analytics</div>
          <div style="font-size:9px;color:#5A7A96;margin-left:auto">4×</div>
        </div>
      </div>

      <!-- FOOTER -->
      <div class="mock-footer">
        <div class="mock-footer-note"><span class="mock-pulse"></span> 247 <span data-en="req analysed" data-fr="req analysées">req analysed</span></div>
        <span style="font-size:9px;color:#5A7A96;">datamirror.eu</span>
      </div>
      <div class="mock-coffee">☕ Privacy costs nothing. A coffee helps though 😉</div>

    </div></div>
</div>

<!-- TRUST BAR -->
<div class="trust-bar">
  <div class="trust-inner">
    <div class="trust-item"><span class="trust-icon">🔒</span> <span data-en="100% local processing" data-fr="100% traitement local">100% local processing</span></div>
    <div class="trust-item"><span class="trust-icon">🚫</span> <span data-en="No data sent anywhere" data-fr="Aucune donnée envoyée">No data sent anywhere</span></div>
    <div class="trust-item"><span class="trust-icon">🌍</span> <span data-en="38 Big Tech + 24 resellers monitored" data-fr="38 Big Tech + 24 revendeurs surveillés">38 Big Tech + 24 resellers monitored</span></div>
    <div class="trust-item"><span class="trust-icon">🌐</span> <span data-en="1,000+ domains tracked" data-fr="1 000+ domaines suivis">1,000+ domains tracked</span></div>
    <div class="trust-item"><span class="trust-icon">💰</span> <span data-en="Market value per visit" data-fr="Valeur marchande par visite">Market value per visit</span></div>
  </div>
</div>

<!-- SHOCK STATS -->
<div class="shock-wrap">
  <div class="shock-inner">
    <p class="shock-label reveal" data-en="The numbers they don't want you to see" data-fr="Les chiffres qu'ils ne veulent pas que vous voyiez">The numbers they don't want you to see</p>
    <div class="shock-grid reveal">
      <div class="shock-item">
        <div class="shock-num">$4–12</div>
        <div class="shock-title" data-en="Per day, per user" data-fr="Par jour, par utilisateur">Per day, per user</div>
        <div class="shock-desc" data-en="The estimated value of your browsing data on the ad market. You generate it every day. You receive none of it." data-fr="La valeur estimée de votre navigation sur le marché pub. Vous la créez chaque jour. Vous n'en recevez rien.">The estimated value of your browsing data on the ad market. You generate it every day. You receive none of it.</div>
      </div>
      <div class="shock-item">
        <div class="shock-num">73%</div>
        <div class="shock-title" data-en="Of websites have hidden trackers" data-fr="Des sites ont des trackers cachés">Of websites have hidden trackers</div>
        <div class="shock-desc" data-en="News sites, government portals, healthcare websites — most sell your data without you knowing. Data Mirror makes it visible." data-fr="Sites d'info, portails gouvernementaux, sites de santé — la plupart vendent vos données sans que vous le sachiez.">News sites, government portals, healthcare websites — most sell your data without you knowing. Data Mirror makes it visible.</div>
      </div>
      <div class="shock-item">
        <div class="shock-num">0€</div>
        <div class="shock-title" data-en="You receive" data-fr="Vous recevez">You receive</div>
        <div class="shock-desc" data-en="Of the money your data generates. Data Mirror won't change that — but at least you'll know exactly what's happening." data-fr="De l'argent que génèrent vos données. Data Mirror ne changera pas ça — mais au moins vous saurez ce qui se passe.">Of the money your data generates. Data Mirror won't change that — but at least you'll know exactly what's happening.</div>
      </div>
    </div>
  </div>
</div>

<!-- HOW IT WORKS -->
<div class="section" id="how">
  <p class="section-label reveal" data-en="How it works" data-fr="Comment ça marche">How it works</p>
  <h2 class="section-title reveal" data-en="Three steps, zero effort" data-fr="Trois étapes, zéro effort">Three steps, zero effort</h2>
  <p class="section-sub reveal" data-en="Once installed, just browse normally. Data Mirror does everything in the background." data-fr="Une fois installée, naviguez normalement. Data Mirror fait tout en arrière-plan.">Once installed, just browse normally. Data Mirror does everything in the background.</p>
  <div class="steps reveal">
    <div class="step">
      <div class="step-num">01</div>
      <div class="step-icon blue">🌐</div>
      <h3 data-en="You browse" data-fr="Vous naviguez">You browse</h3>
      <p data-en="Visit any website as usual. Data Mirror silently intercepts all outgoing network requests in real time." data-fr="Visitez n'importe quel site normalement. Data Mirror intercepte silencieusement toutes les requêtes réseau sortantes.">Visit any website as usual. Data Mirror silently intercepts all outgoing network requests in real time.</p>
      <div class="step-connector"></div>
    </div>
    <div class="step">
      <div class="step-num">02</div>
      <div class="step-icon green" style="padding:0;overflow:hidden;">
        <svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" width="56" height="56">
          <defs><linearGradient id="sg1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#00FF88"/><stop offset="100%" stop-color="#4A7AFF"/></linearGradient></defs>
          <rect width="128" height="128" rx="24" fill="#080C10"/>
          <path d="M 20 64 Q 64 28 108 64 Q 64 100 20 64 Z" fill="none" stroke="url(#sg1)" stroke-width="3"/>
          <circle cx="64" cy="64" r="18" fill="none" stroke="url(#sg1)" stroke-width="2.5"/>
          <circle cx="64" cy="64" r="9" fill="url(#sg1)"/>
          <circle cx="64" cy="64" r="3" fill="#080C10"/>
        </svg>
      </div>
      <h3 data-en="We identify who profits" data-fr="On identifie qui en profite">We identify who profits</h3>
      <p data-en="Each request is matched against 38 Big Tech companies, 24 data resellers, and 1,000+ known tracking domains — entirely on your device." data-fr="Chaque requête est comparée à 38 Big Tech, 24 revendeurs et 1000+ domaines de tracking — entièrement sur votre appareil.">Each request is matched against 38 Big Tech companies, 24 data resellers, and 1,000+ known tracking domains — entirely on your device.</p>
      <div class="step-connector"></div>
    </div>
    <div class="step">
      <div class="step-num">03</div>
      <div class="step-icon amber">💰</div>
      <h3 data-en="You see the price tag" data-fr="Vous voyez l'étiquette prix">You see the price tag</h3>
      <p data-en="A privacy score A→F, the estimated market value per visit, and how much you should have earned over 30 days. Everything stays on your device — we never see any of it." data-fr="Un score A→F, la valeur marchande estimée par visite, et combien vous auriez dû toucher sur 30 jours. Tout reste sur votre appareil.">A privacy score A→F, the estimated market value per visit, and how much you should have earned over 30 days. Everything stays on your device — we never see any of it.</p>
    </div>
  </div>
</div>

<!-- SCREENSHOTS -->
<div class="screenshots-bg">
  <div class="screenshots-inner">
    <p class="section-label reveal" data-en="Inside the extension" data-fr="Dans l'extension">Inside the extension</p>
    <h2 class="section-title reveal" data-en="A dashboard built for clarity" data-fr="Un tableau de bord pensé pour la clarté">A dashboard built for clarity</h2>
    <p class="section-sub reveal" data-en="Raw data, beautifully presented. No fluff, just the truth about what's happening on every page you visit." data-fr="Des données brutes, présentées clairement. Pas de superflu, juste la vérité sur chaque page visitée.">Raw data, beautifully presented. No fluff, just the truth about what's happening on every page you visit.</p>
    <div class="screens-grid reveal">
      <div class="screen-card">
        <div class="screen-label" data-en="Privacy score A→F" data-fr="Score de confidentialité A→F">Privacy score A→F</div>
        <div class="screen-preview">
          <div class="sp-score-row">
            <div class="sp-grade" style="color:#7FFF00">B</div>
            <div class="sp-details">
              <span style="font-family:var(--mono);font-size:10px;color:#E8F4FF">70/100</span>
              <span style="font-size:9px;color:#7FFF00">Good</span>
            </div>
          </div>
          <div style="font-size:9px;color:#3A5570;font-family:var(--mono);margin-bottom:6px;text-transform:uppercase;letter-spacing:.08em" data-en="Geographic distribution" data-fr="Répartition géographique">Geographic distribution</div>
          <div class="sp-geo-row"><div class="sp-geo-label" style="font-family:var(--mono);font-size:9px">🇫🇷 France</div><div class="sp-geo-track"><div class="sp-geo-fill" style="width:30%;background:linear-gradient(90deg,#0055A4,#EF4135)"></div></div><div class="sp-geo-pct">30%</div></div>
          <div class="sp-geo-row"><div class="sp-geo-label" style="font-family:var(--mono);font-size:9px">🇪🇺 EU</div><div class="sp-geo-track"><div class="sp-geo-fill" style="width:20%;background:linear-gradient(90deg,#003399,#FFCC00)"></div></div><div class="sp-geo-pct">20%</div></div>
          <div class="sp-geo-row"><div class="sp-geo-label" style="font-family:var(--mono);font-size:9px">🌎 Non-EU</div><div class="sp-geo-track"><div class="sp-geo-fill" style="width:45%;background:#FF7A00"></div></div><div class="sp-geo-pct">45%</div></div>
          <div class="sp-geo-row"><div class="sp-geo-label" style="font-family:var(--mono);font-size:9px">🚨 High-risk</div><div class="sp-geo-track"><div class="sp-geo-fill" style="width:5%;background:#FF2D2D"></div></div><div class="sp-geo-pct">5%</div></div>
        </div>
      </div>
      <div class="screen-card">
        <div class="screen-label" data-en="Market value of your data" data-fr="Valeur marchande de vos données">Market value of your data</div>
        <div class="screen-preview">
          <div style="background:rgba(255,176,0,.06);border:1px solid rgba(255,176,0,.12);border-radius:6px;padding:8px 10px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;">
            <div style="font-family:var(--mono);font-size:8px;color:#FF9F0A;text-transform:uppercase;letter-spacing:.07em;">💰 You should have earned this</div>
            <div style="display:flex;align-items:baseline;gap:4px;">
              <span style="font-family:var(--mono);font-size:15px;font-weight:700;color:#FFD700;">~$21</span>
              <span style="font-family:var(--mono);font-size:8px;color:#6B8FA8;">· 30d</span>
            </div>
          </div>
          <div class="sp-value-header">💰 <span data-en="This visit" data-fr="Cette visite">This visit</span></div>
          <div class="sp-value-row">
            <div class="sp-value-cell"><div class="sp-value-amount" style="color:#FFD700">$0.042</div><div class="sp-value-sub" data-en="Low estimate" data-fr="Estimation basse">Low estimate</div></div>
            <div style="width:1px;background:#1E2D3D;margin:0 4px"></div>
            <div class="sp-value-cell"><div class="sp-value-amount" style="color:#FF7A00">$0.38</div><div class="sp-value-sub" data-en="High estimate" data-fr="Estimation haute">High estimate</div></div>
          </div>
          <div style="font-size:8px;color:#3A5570;font-family:var(--mono);margin:6px 0 4px">Breakdown</div>
          <div style="display:flex;flex-direction:column;gap:3px">
            <div style="display:flex;justify-content:space-between;font-size:9px;color:#6B8FA8"><span data-en="👁 Activity tracking" data-fr="👁 Tracking d'activité">👁 Activity tracking</span><span style="color:#FF7A00">$0.001–$0.020</span></div>
            <div style="display:flex;justify-content:space-between;font-size:9px;color:#6B8FA8"><span>📍 Geolocation</span><span style="color:#FF7A00">$0.002–$0.020</span></div>
            <div style="display:flex;justify-content:space-between;font-size:9px;color:#6B8FA8"><span data-en="💸 Real-time ad auction" data-fr="💸 Enchère pub temps réel">💸 Real-time ad auction</span><span style="color:#FF7A00">$0.003–$0.015</span></div>
          </div>
        </div>
      </div>
      <div class="screen-card">
        <div class="screen-label" data-en="30-day history" data-fr="Historique 30 jours">30-day history</div>
        <div class="screen-preview">
          <div style="font-family:var(--mono);font-size:8px;color:#FF7A00;text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px">💰 <span data-en="Your total data value" data-fr="Votre valeur totale">Your total data value</span></div>
          <div style="display:flex;gap:8px;margin-bottom:10px">
            <div style="flex:1;text-align:center"><div style="font-family:var(--mono);font-size:16px;font-weight:700;color:#FFD700">$0.087</div><div style="font-size:8px;color:#6B8FA8" data-en="Low" data-fr="Bas">Low</div></div>
            <div style="flex:1;text-align:center"><div style="font-family:var(--mono);font-size:16px;font-weight:700;color:#FF7A00">$0.80</div><div style="font-size:8px;color:#6B8FA8" data-en="High" data-fr="Haut">High</div></div>
          </div>
          <div style="display:flex;flex-direction:column;gap:4px">
            <div style="display:flex;align-items:center;gap:8px;padding:5px 7px;background:#080C10;border-radius:5px">
              <span style="font-family:var(--mono);font-size:13px;font-weight:700;color:#00FF88">A</span>
              <span style="font-family:var(--mono);font-size:9px;flex:1">elysee.fr</span>
              <span style="font-size:8px;color:#3A5570">just now</span>
            </div>
            <div style="display:flex;align-items:center;gap:8px;padding:5px 7px;background:#080C10;border-radius:5px">
              <span style="font-family:var(--mono);font-size:13px;font-weight:700;color:#FFD700">C</span>
              <span style="font-family:var(--mono);font-size:9px;flex:1">lemonde.fr</span>
              <span style="font-size:8px;color:#3A5570">5 min</span>
            </div>
            <div style="display:flex;align-items:center;gap:8px;padding:5px 7px;background:#080C10;border-radius:5px">
              <span style="font-family:var(--mono);font-size:13px;font-weight:700;color:#FF7A00">D</span>
              <span style="font-family:var(--mono);font-size:9px;flex:1">lefigaro.fr</span>
              <span style="font-size:8px;color:#3A5570">12 min</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- MANIFESTO -->
<div class="manifesto-bg">
  <div class="manifesto-inner">
    <p class="manifesto-quote reveal" data-en="Your data is being bought and sold <strong>thousands of times a day</strong>. You deserve to know by whom, for what, and how much it's worth." data-fr="Vos données sont achetées et vendues <strong>des milliers de fois par jour</strong>. Vous méritez de savoir par qui, pour quoi, et combien ça vaut.">"Your data is being bought and sold <strong>thousands of times a day</strong>. You deserve to know by whom, for what, and how much it's worth."</p>
    <p class="manifesto-body reveal" data-en="Data Mirror was built because privacy should not be a luxury for tech experts. It should be visible, understandable, and actionable for everyone. We built a tool that tells you the truth — about every website you visit, in plain language, with no agenda." data-fr="Data Mirror a été conçu parce que la privacy ne devrait pas être un privilège réservé aux experts tech. Elle devrait être visible, compréhensible et accessible pour tous. Nous avons construit un outil qui dit la vérité — sur chaque site visité, en clair, sans agenda.">Data Mirror was built because privacy should not be a luxury for tech experts. It should be visible, understandable, and actionable for everyone. We built a tool that tells you the truth — about every website you visit, in plain language, with no agenda.</p>
    <p class="manifesto-sig">— datamirror.eu · Privacy by design · Made in France 🇫🇷</p>
  </div>
</div>

<!-- FAQ -->
<div class="section">
  <p class="section-label reveal" data-en="Questions" data-fr="Questions">Questions</p>
  <h2 class="section-title reveal" data-en="Everything you need to know" data-fr="Tout ce que vous devez savoir">Everything you need to know</h2>
  <div class="faq-list reveal">
    <div class="faq-item">
      <div class="faq-q"><span data-en="Does Data Mirror collect my browsing data?" data-fr="Est-ce que Data Mirror collecte mes données de navigation ?">Does Data Mirror collect my browsing data?</span></div>
      <p class="faq-a" data-en="Absolutely not. All analysis happens locally in your browser. Nothing is ever sent to our servers — we don't even have a server that collects user data. Everything stays on your device." data-fr="Absolument pas. Toute l'analyse se fait localement dans votre navigateur. Rien n'est jamais envoyé à nos serveurs — nous n'avons même pas de serveur qui collecte des données. Tout reste sur votre appareil.">Absolutely not. All analysis happens locally in your browser. Nothing is ever sent to our servers — we don't even have a server that collects user data. Everything stays on your device.</p>
    </div>
    <div class="faq-item">
      <div class="faq-q"><span data-en="Will it slow down my browsing?" data-fr="Est-ce que ça ralentit ma navigation ?">Will it slow down my browsing?</span></div>
      <p class="faq-a" data-en="No. Data Mirror intercepts requests asynchronously — it never blocks or delays network calls. The analysis runs in the background without affecting page load times." data-fr="Non. Data Mirror intercepte les requêtes de manière asynchrone — il ne bloque jamais les appels réseau. L'analyse tourne en arrière-plan sans affecter les temps de chargement.">No. Data Mirror intercepts requests asynchronously — it never blocks or delays network calls. The analysis runs in the background without affecting page load times.</p>
    </div>
    <div class="faq-item">
      <div class="faq-q"><span data-en="How accurate is the market value estimate?" data-fr="À quel point l'estimation de valeur marchande est-elle précise ?">How accurate is the market value estimate?</span></div>
      <p class="faq-a" data-en="It's an educated estimate based on public market research (FTC, Cracked Labs, IAB RTB studies — last updated March 2026). The real-time advertising market is opaque by design, so we show a low/high range to reflect the uncertainty honestly." data-fr="C'est une estimation raisonnée basée sur des études publiques (FTC, Cracked Labs, études IAB RTB — mise à jour mars 2026). Le marché publicitaire est opaque par conception, donc nous montrons une fourchette basse/haute pour refléter l'incertitude honnêtement.">It's an educated estimate based on public market research (FTC, Cracked Labs, IAB RTB studies — last updated March 2026). The real-time advertising market is opaque by design, so we show a low/high range to reflect the uncertainty honestly.</p>
    </div>
    <div class="faq-item">
      <div class="faq-q"><span data-en="What's the difference between a tracker and Big Tech?" data-fr="Quelle est la différence entre un tracker et un Big Tech ?">What's the difference between a tracker and Big Tech?</span></div>
      <p class="faq-a" data-en="Big Tech refers to major technology companies (Google, Meta, Amazon, etc.) whose infrastructure appears on most websites, often for legitimate purposes like maps or fonts. Trackers are specific domains known to profile users for advertising purposes, regardless of which company operates them." data-fr="Big Tech désigne les grandes entreprises tech (Google, Meta, Amazon, etc.) dont l'infrastructure apparaît sur la plupart des sites. Les trackers sont des domaines spécifiques connus pour profiler les utilisateurs à des fins publicitaires.">Big Tech refers to major technology companies (Google, Meta, Amazon, etc.) whose infrastructure appears on most websites, often for legitimate purposes like maps or fonts. Trackers are specific domains known to profile users for advertising purposes, regardless of which company operates them.</p>
    </div>
    <div class="faq-item">
      <div class="faq-q"><span data-en="What do the grades A→F mean?" data-fr="Que signifient les notes A→F ?">What do the grades A→F mean?</span></div>
      <p class="faq-a" data-en="Each grade reflects the overall privacy exposure of a page, scored out of 100. A (85–100) — Excellent: very few trackers, data stays mostly in the EU. B (70–84) — Good: minor third-party exposure. C (55–69) — Fair: several trackers or data leaving the EU. D (40–54) — Concerning: multiple high-risk trackers. E (20–39) — Poor: heavy tracking, resellers active. F (0–19) — Critical: extreme exposure, data sent to high-risk regions." data-fr="A (85–100) — Excellent : très peu de trackers, données dans l'UE. B (70–84) — Bon : exposition mineure. C (55–69) — Acceptable : plusieurs trackers ou données hors UE. D (40–54) — Préoccupant : trackers à risque élevé. E (20–39) — Mauvais : tracking intensif. F (0–19) — Critique : exposition extrême.">Each grade reflects the overall privacy exposure of a page, scored out of 100. A (85–100) — Excellent: very few trackers, data stays mostly in the EU. B (70–84) — Good: minor third-party exposure. C (55–69) — Fair: several trackers or data leaving the EU. D (40–54) — Concerning: multiple high-risk trackers. E (20–39) — Poor: heavy tracking, resellers active. F (0–19) — Critical: extreme exposure, data sent to high-risk regions.</p>
    </div>
  </div>
</div>

<!-- CTA FINAL -->
<div class="cta-final">
  <h2 class="cta-final-title" data-en="Ready to see <em>the truth?</em>" data-fr="Prêt à voir <em>la vérité ?</em>">Ready to see <em>the truth?</em></h2>
  <p class="cta-final-sub" data-en="Install in 30 seconds. Discover where your data really goes." data-fr="Installez en 30 secondes. Découvrez où vont vraiment vos données.">Install in 30 seconds. Discover where your data really goes.</p>
  <a href="https://chromewebstore.google.com/detail/data-mirror/ncofhifocmjmmcgdaajjddbbepbcacbf" class="cta-final-btn">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z" fill="currentColor"/></svg>
    <span data-en="Add to Chrome — Free" data-fr="Ajouter à Chrome — Gratuit">Add to Chrome — Free</span>
  </a>
  <p class="cta-note" data-en="No account required · Privacy by design · Made in France 🇫🇷" data-fr="Aucun compte requis · Privacy by design · Conçu en France 🇫🇷">No account required · Privacy by design · Made in France 🇫🇷</p>
</div>

<footer>
  <div class="footer-logo">DATA MIRROR<span>.EU</span></div>
  <div class="footer-links">
    <a href="https://buymeacoffee.com/gregr4" target="_blank" data-en="Support ☕" data-fr="Soutenir ☕">Support ☕</a>
    <a href="/blog/" data-en="Blog" data-fr="Blog">Blog</a>
    <a href="https://www.linkedin.com/company/datamirror-eu" target="_blank" data-en="LinkedIn" data-fr="LinkedIn">LinkedIn</a>
    <a href="/privacy" data-en="Privacy Policy" data-fr="Politique de confidentialité">Privacy Policy</a>
    <a href="mailto:hello@datamirror.eu" data-en="Contact" data-fr="Contact">Contact</a>
  </div>
  <div class="footer-copy" data-en="© 2026 datamirror.eu — Free. Privacy by design. Made in France." data-fr="© 2026 datamirror.eu — Gratuit. Privacy by design. Conçu en France.">© 2026 datamirror.eu — Free. Privacy by design. Made in France.</div>
</footer>

<script>
function setLang(l){
  document.querySelectorAll('[data-en]').forEach(el=>{el.innerHTML=el.getAttribute('data-'+l);});
  document.getElementById('btn-en').classList.toggle('active',l==='en');
  document.getElementById('btn-fr').classList.toggle('active',l==='fr');
  document.documentElement.lang=l;
  localStorage.setItem('dm_lang',l);
  // SEO — title & meta description selon la langue
  if(l==='fr'){
    document.title="Data Mirror | L'Extension Chrome pour Voir Qui Vous Traque";
    document.querySelector('meta[name="description"]').setAttribute('content',"Qui vous traque sur le web ? Téléchargez Data Mirror, l'extension gratuite qui révèle la valeur de vos données et expose les traqueurs publicitaires.");
  } else {
    document.title="Data Mirror | See Who Tracks You & Your Data's True Value";
    document.querySelector('meta[name="description"]').setAttribute('content',"Wondering who tracks you online? Download Data Mirror, the free Chrome extension that reveals your data's market value and exposes hidden data resellers.");
  }
}
const sl=localStorage.getItem('dm_lang');
if(sl&&sl!=='en')setLang(sl);

// Scroll reveal
const observer=new IntersectionObserver(entries=>{
  entries.forEach(e=>{if(e.isIntersecting){e.target.classList.add('visible');observer.unobserve(e.target);}});
},{threshold:0.1});
document.querySelectorAll('.reveal').forEach(el=>observer.observe(el));

// Animated counters
function animateCounter(el,target,dec,prefix,dur){
  const s=performance.now();
  const u=(now)=>{
    const p=Math.min((now-s)/dur,1);
    const ease=1-Math.pow(1-p,3);
    el.textContent=prefix+(ease*target).toFixed(dec);
    if(p<1)requestAnimationFrame(u);
  };
  requestAnimationFrame(u);
}
const hc=document.querySelector('.hero-counter');
const cobs=new IntersectionObserver(entries=>{
  if(entries[0].isIntersecting){
    animateCounter(document.getElementById('heroValue'),0.38,2,'$',2000);
    animateCounter(document.getElementById('heroTrackers'),7,0,'',1500);
    animateCounter(document.getElementById('heroCompanies'),24,0,'',1800);
    cobs.disconnect();
  }
},{threshold:0.3});
cobs.observe(hc);
</script>
<!-- Cloudflare Pages Analytics --><script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "9fbc2871bb2043dfba449e22d0dbb6d9"}'></script><!-- Cloudflare Pages Analytics --></body>
</html>
