<!DOCTYPE html>
<html lang="ru" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="theme-color" content="#6366F1">
  <title>Фронт Фактов — Разоблачай фейки! Квиз-игра для iOS и Android</title>
  <meta name="description" content="Ежедневные утверждения: отличай факты от фейков. Свайпай карточки, узнавай объяснения из проверенных источников, соревнуйся в рейтинге. Бесплатно для iOS и Android.">
  <meta name="keywords" content="факты фейки квиз, разоблачение фейков, викторина факты, ежедневная игра знания, свайп факты, fact or fake app, trivia quiz game">
  <meta name="robots" content="index, follow">
  <link rel="canonical" href="https://factfront.org/">
  <link rel="alternate" hreflang="ru" href="https://factfront.org/">
  <link rel="alternate" hreflang="en" href="https://factfront.org/?lang=en">
  <link rel="alternate" hreflang="x-default" href="https://factfront.org/">

  <!-- Open Graph -->
  <meta property="og:title" content="Фронт Фактов — Разоблачай фейки! Квиз-игра для iOS и Android">
  <meta property="og:description" content="Ежедневные утверждения: отличай факты от фейков. Свайпай карточки, узнавай объяснения из проверенных источников, соревнуйся в рейтинге. Бесплатно для iOS и Android.">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://factfront.org/">
  <meta property="og:image" content="https://factfront.org/og-image.png">
  <meta property="og:locale" content="ru_RU">
  <meta property="og:site_name" content="Фронт Фактов">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Фронт Фактов — Разоблачай фейки! Квиз-игра для iOS и Android">
  <meta name="twitter:description" content="Ежедневные утверждения: отличай факты от фейков. Бесплатно для iOS и Android.">
  <meta name="twitter:image" content="https://factfront.org/og-image.png">

  <!-- JSON-LD: MobileApplication -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "MobileApplication",
    "name": "Фронт Фактов",
    "alternateName": "Fact Front",
    "description": "Ежедневные утверждения: отличай факты от фейков. Свайпай карточки, узнавай объяснения из проверенных источников, соревнуйся в рейтинге.",
    "operatingSystem": "iOS, Android",
    "applicationCategory": "GameApplication",
    "offers": {
      "@type": "Offer",
      "price": "0",
      "priceCurrency": "RUB"
    },
    "url": "https://factfront.org/",
    "inLanguage": ["ru", "en"]
  }
  </script>

  <!-- JSON-LD: WebSite -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebSite",
    "name": "Фронт Фактов",
    "alternateName": "Fact Front",
    "url": "https://factfront.org/",
    "description": "Лендинг мобильной квиз-игры Фронт Фактов",
    "potentialAction": {
      "@type": "SearchAction",
      "target": "https://factfront.org/?lang={lang}",
      "query-input": "required name=lang"
    }
  }
  </script>

  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap" rel="stylesheet">

  <style>
    /* ===== CSS CUSTOM PROPERTIES ===== */
    :root {
      --bg: #F8FAFC;
      --bg-rgb: 248, 250, 252;
      --surface: #FFFFFF;
      --surface-v: #F1F5F9;
      --primary: #6366F1;
      --primary-light: #EEF2FF;
      --primary-dark: #4F46E5;
      --accent: #F59E0B;
      --accent-light: #FEF3C7;
      --emerald: #10B981;
      --text-1: #0F172A;
      --text-2: #64748B;
      --text-3: #94A3B8;
      --border: #E2E8F0;
      --shadow: 0 4px 24px rgba(99,102,241,0.10);
      --grad-hero: linear-gradient(135deg, #EEF2FF 0%, #F8FAFC 100%);
      --grad-primary: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
      --radius-card: 20px;
      --radius-btn: 14px;
      /* Phone light theme */
      --ph-bg: #ECEEF8;
      --ph-border: #CDD0E8;
      --ph-notch: #D4D6EC;
      --ph-screen: #ECEEF8;
      --ph-x-bg: #FFFFFF;
      --ph-x-color: #94A3B8;
      --ph-bar-track: rgba(99,102,241,0.15);
      --ph-counter: #94A3B8;
      --ph-card-bg: #FFFFFF;
      --ph-card-shadow: 0 4px 20px rgba(99,102,241,0.14);
      --ph-card-bg2: #F5F6FF;
      --ph-card-bg3: #EFF0FA;
      --ph-card-text: #1E1B4B;
      --ph-cat-bg: rgba(99,102,241,0.08);
      --ph-cat-border: rgba(99,102,241,0.18);
      --ph-cat-text: #5B5FC7;
      --ph-quote: #6366F1;
      --ph-btn-fake-bg: rgba(239,68,68,0.09);
      --ph-btn-fake-border: rgba(239,68,68,0.28);
      --ph-btn-fake-text: #DC2626;
      --ph-btn-fact-bg: rgba(16,185,129,0.09);
      --ph-btn-fact-border: rgba(16,185,129,0.28);
      --ph-btn-fact-text: #059669;
      --ph-result-bg: #FFFFFF;
      --ph-result-text: #64748B;
      --ph-result-correct: #10B981;
      --ph-result-wrong: #EF4444;
    }
    [data-theme="dark"] {
      --bg: #0F172A;
      --bg-rgb: 15, 23, 42;
      --surface: #1E293B;
      --surface-v: #334155;
      --primary: #818CF8;
      --primary-light: #1E1B4B;
      --primary-dark: #6366F1;
      --accent: #FBBF24;
      --accent-light: #451A03;
      --emerald: #34D399;
      --text-1: #F1F5F9;
      --text-2: #94A3B8;
      --text-3: #64748B;
      --border: #334155;
      --shadow: 0 4px 24px rgba(0,0,0,0.40);
      --grad-hero: linear-gradient(135deg, #1E1B4B 0%, #0F172A 100%);
      --grad-primary: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
      /* Phone dark theme */
      --ph-bg: #0D1117;
      --ph-border: #2D3748;
      --ph-notch: #1E293B;
      --ph-screen: #0D1117;
      --ph-x-bg: #1E293B;
      --ph-x-color: #64748B;
      --ph-bar-track: #1E293B;
      --ph-counter: #475569;
      --ph-card-bg: #1A2234;
      --ph-card-shadow: 0 4px 20px rgba(0,0,0,0.5);
      --ph-card-bg2: #1e2b40;
      --ph-card-bg3: #21304a;
      --ph-card-text: #E2E8F0;
      --ph-cat-bg: rgba(99,102,241,0.15);
      --ph-cat-border: rgba(99,102,241,0.3);
      --ph-cat-text: #818CF8;
      --ph-quote: #4F46E5;
      --ph-btn-fake-bg: rgba(239,68,68,0.1);
      --ph-btn-fake-border: rgba(239,68,68,0.4);
      --ph-btn-fake-text: #F87171;
      --ph-btn-fact-bg: rgba(16,185,129,0.1);
      --ph-btn-fact-border: rgba(16,185,129,0.45);
      --ph-btn-fact-text: #34D399;
      --ph-result-bg: #0D1117;
      --ph-result-text: #94A3B8;
      --ph-result-correct: #34D399;
      --ph-result-wrong: #F87171;
    }

    /* ===== RESET & BASE ===== */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Nunito', system-ui, sans-serif;
      background: var(--bg);
      color: var(--text-1);
      line-height: 1.6;
      transition: background 0.3s, color 0.3s;
    }
    .container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
    section { padding: 80px 0; }
    @media (max-width: 768px) { section { padding: 56px 0; } }

    /* ===== HEADER ===== */
    .header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      background: rgba(var(--bg-rgb), 0.85);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
      transition: background 0.3s;
    }
    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 20px;
      max-width: 1100px;
      margin: 0 auto;
    }
    .logo {
      font-size: 18px;
      font-weight: 800;
      color: var(--text-1);
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
    }
    .logo .logo-icon { font-size: 20px; }
    .header-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .lang-switcher {
      display: flex;
      align-items: center;
      background: var(--surface-v);
      border-radius: 8px;
      padding: 2px;
      gap: 2px;
    }
    .lang-btn {
      padding: 5px 10px;
      border-radius: 6px;
      border: none;
      background: transparent;
      color: var(--text-2);
      font-size: 13px;
      font-weight: 700;
      font-family: inherit;
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
    }
    .lang-btn.active {
      background: var(--surface);
      color: var(--primary);
      box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    }
    .theme-btn {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--surface);
      font-size: 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s;
    }
    .theme-btn:hover { background: var(--surface-v); }

    /* ===== BUTTONS ===== */
    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 14px 28px;
      background: var(--grad-primary);
      color: white;
      border-radius: var(--radius-btn);
      font-weight: 700;
      font-size: 15px;
      text-decoration: none;
      border: none;
      cursor: pointer;
      transition: opacity 0.2s, transform 0.15s;
      font-family: inherit;
    }
    .btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
    .btn-primary-sm {
      padding: 10px 20px;
      font-size: 14px;
    }

    /* ===== STORE BUTTONS ===== */
    .store-btn {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 14px 24px;
      background: rgba(255,255,255,0.15);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1.5px solid rgba(255,255,255,0.3);
      border-radius: 14px;
      color: white;
      text-decoration: none;
      min-width: 200px;
      min-height: 56px;
      transition: background 0.2s, transform 0.15s;
      font-family: inherit;
    }
    .store-btn:hover {
      background: rgba(255,255,255,0.25);
      transform: translateY(-2px);
    }
    .store-btn svg {
      width: 32px;
      height: 32px;
      fill: white;
      flex-shrink: 0;
    }
    .store-btn span {
      display: flex;
      flex-direction: column;
      text-align: left;
    }
    .store-btn small {
      font-size: 11px;
      opacity: 0.85;
      font-weight: 400;
    }
    .store-btn strong {
      font-size: 17px;
      font-weight: 700;
      line-height: 1.2;
    }

    /* ===== HERO ===== */
    .hero {
      padding-top: 100px;
      padding-bottom: 80px;
      background: var(--grad-hero);
      position: relative;
      overflow: hidden;
    }
    .hero::before {
      content: '';
      position: absolute;
      top: -120px;
      right: -120px;
      width: 500px;
      height: 500px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(99,102,241,0.12) 0%, transparent 70%);
      pointer-events: none;
    }
    .hero::after {
      content: '';
      position: absolute;
      bottom: -80px;
      left: -80px;
      width: 350px;
      height: 350px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(245,158,11,0.10) 0%, transparent 70%);
      pointer-events: none;
    }
    .hero-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 20px;
      position: relative;
      z-index: 1;
    }
    @media (max-width: 768px) {
      .hero-inner {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
      }
    }
    .hero-overline {
      display: inline-block;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--primary);
      background: var(--primary-light);
      padding: 5px 12px;
      border-radius: 20px;
      margin-bottom: 16px;
    }
    .hero h1 {
      font-size: clamp(28px, 4vw, 46px);
      font-weight: 900;
      line-height: 1.15;
      color: var(--text-1);
      margin-bottom: 16px;
    }
    .hero-subtitle {
      font-size: 17px;
      color: var(--text-2);
      margin-bottom: 24px;
      line-height: 1.7;
    }
    .hero-fact-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 14px 18px;
      font-size: 14px;
      color: var(--text-2);
      margin-bottom: 28px;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      box-shadow: var(--shadow);
    }
    .hero-fact-card .fact-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
    .hero-cta {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 14px;
    }
    @media (max-width: 768px) {
      .hero-cta { justify-content: center; }
    }
    .hero-cta-note {
      font-size: 13px;
      color: var(--text-3);
    }

    /* ===== PHONE MOCKUP ===== */
    .phone-wrap {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .phone {
      width: 240px;
      height: 446px;
      border-radius: 36px;
      border: 2px solid var(--ph-border);
      background: var(--ph-bg);
      box-shadow: 0 24px 64px rgba(0,0,0,0.55), 0 0 0 1px rgba(99,102,241,0.15), 0 8px 32px rgba(99,102,241,0.12);
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow: hidden;
      position: relative;
      animation: phone-float 4s ease-in-out infinite;
    }
    @keyframes phone-float {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-10px); }
    }
    .phone-notch {
      width: 70px;
      height: 6px;
      background: var(--ph-notch);
      border-radius: 3px;
      margin: 10px 0 6px;
      flex-shrink: 0;
    }
    .phone-screen {
      flex: 1;
      width: 100%;
      display: flex;
      flex-direction: column;
      padding: 4px 12px 12px;
      position: relative;
      overflow: hidden;
      background: var(--ph-screen);
    }
    /* Шапка: × + прогресс + счёт */
    .phone-header {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
      padding-bottom: 6px;
    }
    .phone-header-x {
      width: 22px; height: 22px;
      border-radius: 50%;
      background: var(--ph-x-bg);
      display: flex; align-items: center; justify-content: center;
      font-size: 9px; color: var(--ph-x-color);
      flex-shrink: 0; font-weight: 900;
    }
    .phone-header-bar {
      flex: 1; height: 4px;
      background: var(--ph-bar-track);
      border-radius: 2px; overflow: hidden;
    }
    .phone-header-fill {
      height: 100%;
      background: linear-gradient(90deg, #6366F1, #8B5CF6);
      border-radius: 2px;
      transition: width 0.4s ease;
    }
    .phone-header-score {
      display: flex; align-items: center; gap: 2px;
      background: rgba(16,185,129,0.12);
      border: 1px solid rgba(16,185,129,0.28);
      border-radius: 10px;
      padding: 2px 6px;
      font-size: 8px; font-weight: 700; color: #34D399;
      flex-shrink: 0;
    }
    /* Счётчик карточек */
    .phone-counter {
      text-align: center;
      font-size: 9px; font-weight: 600;
      color: var(--ph-counter);
      padding-bottom: 6px;
      flex-shrink: 0;
    }
    .phone-deck {
      height: 224px;
      flex-shrink: 0;
      position: relative;
      width: 100%;
      perspective: 700px;
    }
    /* Карточки в стеке */
    .phone-deck-card {
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 212px;
      border-radius: 16px;
      transform-style: preserve-3d;
      transition: transform 0.5s ease, opacity 0.35s ease;
      cursor: default;
    }
    .phone-deck-card:nth-child(1) { transform: translateY(0); z-index: 5; background: var(--ph-card-bg); box-shadow: var(--ph-card-shadow); }
    .phone-deck-card:nth-child(2) { transform: translateY(4px); z-index: 4; opacity: 1; background: var(--ph-card-bg2); }
    .phone-deck-card:nth-child(3) { transform: translateY(8px); z-index: 3; opacity: 0.8; background: var(--ph-card-bg3); }
    .phone-deck-card.flipped { transform: translateY(0) rotateY(180deg) !important; z-index: 5; }
    .phone-deck-card.answered-correct { transform: translateX(130px) rotateY(180deg) !important; opacity: 0; pointer-events: none; transition: transform 0.4s ease, opacity 0.4s ease; }
    .phone-deck-card.answered-wrong   { transform: translateX(-130px) rotateY(180deg) !important; opacity: 0; pointer-events: none; transition: transform 0.4s ease, opacity 0.4s ease; }
    /* Лицо и изнанка карточки */
    .phone-card-front,
    .phone-card-back {
      position: absolute;
      inset: 0;
      border-radius: 16px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 12px 12px 10px;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }
    .phone-card-front { background: inherit; }
    .phone-card-front::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(90deg, #6366F1, #A78BFA);
    }
    .phone-card-back {
      transform: rotateY(180deg);
      background: var(--ph-result-bg);
      gap: 8px;
    }
    .phone-card-back::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; height: 3px;
    }
    .phone-card-back.correct::before { background: linear-gradient(90deg, #10B981, #34D399); }
    .phone-card-back.wrong::before   { background: linear-gradient(90deg, #EF4444, #F87171); }
    .phone-flip-badge { font-size: 12px; font-weight: 900; }
    .phone-flip-badge.correct { color: var(--ph-result-correct); }
    .phone-flip-badge.wrong   { color: var(--ph-result-wrong); }
    .phone-flip-text {
      font-size: 9px; color: var(--ph-result-text);
      line-height: 1.5; text-align: center;
      overflow-y: auto; max-height: 88px;
    }
    .phone-btn-next {
      background: #6366F1;
      border: 1.5px solid #4F46E5;
      color: white;
    }
    /* Подсказка под телефоном */
    .phone-hint {
      text-align: center;
      font-size: 18px; font-weight: 800;
      color: #6366F1;
      margin-top: 14px;
      letter-spacing: 0.3px;
      text-shadow: 0 0 16px rgba(99,102,241,0.55);
      animation: hint-float 1.6s ease-in-out infinite;
      transition: opacity 0.5s;
    }
    .phone-hint.hidden { opacity: 0 !important; pointer-events: none; animation: none; }
    @keyframes hint-float {
      0%, 100% { transform: translateY(0) scale(1); opacity: 0.85; }
      50%       { transform: translateY(-6px) scale(1.04); opacity: 1; }
    }
    .phone-card-category {
      background: var(--ph-cat-bg);
      border: 1px solid var(--ph-cat-border);
      border-radius: 8px;
      padding: 2px 8px;
      font-size: 7px; font-weight: 800;
      letter-spacing: 1.5px; text-transform: uppercase;
      color: var(--ph-cat-text);
    }
    .phone-card-quote {
      font-size: 18px; font-weight: 900;
      color: var(--ph-quote); line-height: 1;
      user-select: none;
    }
    .phone-card-text {
      font-size: 11px;
      font-weight: 700;
      color: var(--ph-card-text);
      line-height: 1.45;
      text-align: center;
    }
    .phone-btns {
      display: flex;
      gap: 7px;
      padding-top: 8px;
      flex-shrink: 0;
    }
    .phone-btn {
      flex: 1;
      padding: 9px 4px;
      border-radius: 14px;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
      font-family: inherit;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: transform 0.15s, opacity 0.15s;
      letter-spacing: 0.3px;
    }
    .phone-btn:hover { transform: scale(1.04); }
    .phone-btn:active { transform: scale(0.97); }
    .phone-btn-yes {
      background: var(--ph-btn-fact-bg);
      border: 1.5px solid var(--ph-btn-fact-border);
      color: var(--ph-btn-fact-text);
    }
    .phone-btn-no {
      background: var(--ph-btn-fake-bg);
      border: 1.5px solid var(--ph-btn-fake-border);
      color: var(--ph-btn-fake-text);
    }
    .phone-btn:disabled { opacity: 0.4; cursor: default; transform: none; }
    /* Результат */
    .phone-result {
      position: absolute;
      inset: 0;
      z-index: 10;
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 16px 12px;
      background: var(--ph-result-bg);
      text-align: center;
      gap: 10px;
      animation: result-in 0.3s ease;
    }
    @keyframes result-in {
      from { opacity: 0; transform: scale(0.96); }
      to { opacity: 1; transform: scale(1); }
    }
    .phone-result-badge {
      font-size: 22px;
      font-weight: 900;
      line-height: 1;
    }
    .phone-result-badge.correct { color: var(--ph-result-correct); }
    .phone-result-badge.wrong { color: var(--ph-result-wrong); }
    .phone-result-text {
      font-size: 10px;
      color: var(--ph-result-text);
      line-height: 1.55;
      max-height: 120px;
      overflow-y: auto;
    }
    .phone-next-btn {
      background: #6366F1;
      color: white;
      border: none;
      border-radius: 12px;
      padding: 8px 22px;
      font-size: 11px;
      font-weight: 800;
      cursor: pointer;
      font-family: inherit;
      transition: opacity 0.15s;
    }
    .phone-next-btn:hover { opacity: 0.85; }
    /* Модалка */
    .phone-modal {
      position: absolute;
      inset: 0;
      z-index: 20;
      background: linear-gradient(160deg, #1E1B4B 0%, #312E81 50%, #1E1B4B 100%);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 16px 12px;
      animation: result-in 0.4s ease;
    }
    .phone-modal-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      text-align: center;
    }
    .phone-modal-emoji { font-size: 38px; }
    .phone-modal-title { font-size: 17px; font-weight: 900; color: white; }
    .phone-modal-text { font-size: 10px; color: rgba(255,255,255,0.75); line-height: 1.55; }
    .phone-modal-btn {
      background: rgba(255,255,255,0.12);
      border: 1.5px solid rgba(255,255,255,0.3);
      color: white;
      border-radius: 14px;
      padding: 9px 18px;
      font-size: 11px;
      font-weight: 800;
      text-decoration: none;
      display: block;
      transition: opacity 0.15s;
    }
    .phone-modal-btn:hover { opacity: 0.85; }
    /* Прогресс-точки (оставляем для совместимости, но скрыты) */
    .phone-progress { display: none; }
    .phone-progress-dot { display: none; }

    /* ===== SECTION TITLES ===== */
    .section-title {
      font-size: clamp(22px, 3vw, 32px);
      font-weight: 900;
      color: var(--text-1);
      text-align: center;
      margin-bottom: 12px;
    }
    .section-subtitle {
      font-size: 16px;
      color: var(--text-2);
      text-align: center;
      max-width: 560px;
      margin: 0 auto 48px;
      line-height: 1.7;
    }

    /* ===== HOW IT WORKS ===== */
    .how-section { background: var(--surface); }
    .how-steps {
      display: grid;
      grid-template-columns: 1fr auto 1fr auto 1fr;
      gap: 0;
      align-items: start;
      margin-top: 48px;
    }
    @media (max-width: 768px) {
      .how-steps {
        grid-template-columns: 1fr;
        gap: 24px;
      }
      .how-arrow { display: none; }
    }
    .how-arrow {
      display: flex;
      align-items: center;
      justify-content: center;
      padding-top: 40px;
      color: var(--text-3);
      font-size: 24px;
      flex-shrink: 0;
    }
    .how-card {
      background: var(--surface-v);
      border-radius: var(--radius-card);
      padding: 28px 22px;
      text-align: center;
      border: 1px solid var(--border);
    }
    .how-icon {
      font-size: 36px;
      display: block;
      margin-bottom: 14px;
    }
    .how-step-num {
      display: inline-block;
      background: var(--primary-light);
      color: var(--primary);
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 1px;
      padding: 3px 10px;
      border-radius: 20px;
      margin-bottom: 10px;
    }
    .how-card h3 {
      font-size: 16px;
      font-weight: 800;
      color: var(--text-1);
      margin-bottom: 8px;
    }
    .how-card p {
      font-size: 13px;
      color: var(--text-2);
      line-height: 1.6;
    }

    /* ===== FEATURES ===== */
    .features-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 48px;
    }
    @media (max-width: 900px) {
      .features-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 600px) {
      .features-grid { grid-template-columns: 1fr; }
    }
    .feature-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-card);
      padding: 24px 20px;
      transition: box-shadow 0.2s, transform 0.2s;
    }
    .feature-card:hover {
      box-shadow: var(--shadow);
      transform: translateY(-2px);
    }
    .feature-icon {
      font-size: 28px;
      margin-bottom: 12px;
      display: block;
    }
    .feature-card h3 {
      font-size: 15px;
      font-weight: 800;
      color: var(--text-1);
      margin-bottom: 6px;
    }
    .feature-card p {
      font-size: 13px;
      color: var(--text-2);
      line-height: 1.6;
    }

    /* ===== SOCIAL PROOF ===== */
    .social-section { background: var(--surface-v); }
    .stats-row {
      display: flex;
      justify-content: center;
      gap: 32px;
      flex-wrap: wrap;
      margin-bottom: 56px;
    }
    .stat-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-card);
      padding: 28px 36px;
      text-align: center;
      min-width: 160px;
      box-shadow: var(--shadow);
    }
    .stat-value {
      font-size: 36px;
      font-weight: 900;
      color: var(--primary);
      display: block;
    }
    .stat-label {
      font-size: 13px;
      color: var(--text-2);
      margin-top: 4px;
    }
    .preview-wrap {
      max-width: 480px;
      margin: 0 auto;
    }
    .preview-card {
      background: var(--grad-primary);
      border-radius: var(--radius-card);
      padding: 28px 24px 22px;
      color: white;
      margin-bottom: 16px;
    }
    .preview-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      opacity: 0.75;
      margin-bottom: 12px;
    }
    .preview-statement {
      font-size: 17px;
      font-weight: 700;
      line-height: 1.45;
    }
    .preview-actions {
      display: flex;
      gap: 12px;
    }
    .fact-answer-btn {
      flex: 1;
      padding: 14px;
      border-radius: 12px;
      border: none;
      font-size: 15px;
      font-weight: 800;
      cursor: pointer;
      transition: transform 0.15s, opacity 0.15s;
      font-family: inherit;
    }
    .fact-answer-btn:hover { transform: translateY(-2px); opacity: 0.9; }
    .btn-fact { background: #DCFCE7; color: #16A34A; }
    .btn-myth { background: #FEE2E2; color: #DC2626; }
    .fact-reveal {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 18px 20px;
      font-size: 14px;
      color: var(--text-2);
      line-height: 1.6;
      display: none;
      box-shadow: var(--shadow);
    }

    /* ===== DOWNLOAD CTA ===== */
    .download-section {
      background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
      color: white;
      text-align: center;
    }
    .download-section .section-overline {
      display: inline-block;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: rgba(255,255,255,0.8);
      background: rgba(255,255,255,0.12);
      padding: 5px 14px;
      border-radius: 20px;
      margin-bottom: 20px;
    }
    .download-section h2 {
      font-size: clamp(24px, 3vw, 36px);
      font-weight: 900;
      color: white;
      margin-bottom: 12px;
    }
    .download-section .dl-subtitle {
      font-size: 16px;
      color: rgba(255,255,255,0.8);
      margin-bottom: 40px;
    }
    .store-btns {
      display: flex;
      justify-content: center;
      gap: 16px;
      flex-wrap: wrap;
    }

    /* ===== FOOTER ===== */
    .footer {
      background: var(--surface);
      border-top: 1px solid var(--border);
      padding: 40px 0;
    }
    .footer-inner {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 24px;
      flex-wrap: wrap;
    }
    .footer-left .logo {
      margin-bottom: 8px;
      display: inline-flex;
    }
    .footer-tagline {
      font-size: 13px;
      color: var(--text-2);
      margin-bottom: 10px;
    }
    .footer-link {
      font-size: 13px;
      color: var(--text-3);
      text-decoration: none;
    }
    .footer-link:hover { color: var(--primary); }
    .footer-right {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    /* ===== UTILITIES ===== */
    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0,0,0,0);
      white-space: nowrap;
    }

    /* ===== STORE BUTTON WRAP (QR + COPY) ===== */
    .store-btn-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }
    .store-extras {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .copy-btn,
    .qr-toggle-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 14px;
      background: rgba(255,255,255,0.15);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,0.25);
      border-radius: 10px;
      color: rgba(255,255,255,0.9);
      font-size: 12px;
      font-weight: 700;
      font-family: inherit;
      cursor: pointer;
      transition: background 0.2s, transform 0.15s;
      white-space: nowrap;
    }
    .copy-btn:hover,
    .qr-toggle-btn:hover {
      background: rgba(255,255,255,0.25);
      transform: translateY(-1px);
    }
    .copy-btn svg,
    .qr-toggle-btn svg {
      width: 14px;
      height: 14px;
      fill: rgba(255,255,255,0.9);
      flex-shrink: 0;
    }
    .qr-wrap {
      position: relative;
    }
    .qr-popup {
      position: absolute;
      bottom: calc(100% + 10px);
      left: 50%;
      transform: translateX(-50%);
      background: rgba(15, 23, 42, 0.95);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 16px;
      padding: 16px;
      text-align: center;
      z-index: 50;
      box-shadow: 0 8px 32px rgba(0,0,0,0.4);
      min-width: 180px;
      animation: qr-popup-in 0.18s ease;
    }
    @keyframes qr-popup-in {
      from { opacity: 0; transform: translateX(-50%) translateY(6px); }
      to   { opacity: 1; transform: translateX(-50%) translateY(0); }
    }
    .qr-popup::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: 7px solid transparent;
      border-top-color: rgba(15, 23, 42, 0.95);
    }
    .qr-svg-wrap svg {
      display: block;
      margin: 0 auto 8px;
      border-radius: 8px;
    }
    .qr-popup p {
      font-size: 11px;
      color: rgba(255,255,255,0.7);
      margin: 0;
    }

    /* ===== COPY TOAST ===== */
    #copy-toast {
      position: fixed;
      bottom: 28px;
      left: 50%;
      transform: translateX(-50%) translateY(20px);
      background: #1E293B;
      color: #F1F5F9;
      padding: 10px 22px;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 700;
      box-shadow: 0 4px 20px rgba(0,0,0,0.35);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s, transform 0.2s;
      z-index: 9999;
      white-space: nowrap;
    }
    #copy-toast.visible {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    /* ===== INTERACTIVE FACT CARD (REDESIGN) ===== */
    .fact-reveal {
      display: none;
      flex-direction: column;
      gap: 12px;
    }
    .fact-reveal-header {
      font-size: 17px;
      font-weight: 800;
      padding: 10px 14px;
      border-radius: 10px;
      text-align: center;
    }
    .fact-reveal-header.correct {
      background: rgba(16,185,129,0.15);
      color: #10B981;
    }
    .fact-reveal-header.incorrect {
      background: rgba(239,68,68,0.15);
      color: #EF4444;
    }
    .fact-reveal-text {
      font-size: 14px;
      color: var(--text-2);
      line-height: 1.6;
    }
    .fact-reset-btn {
      align-self: center;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 10px 22px;
      background: var(--primary-light);
      color: var(--primary);
      border: 1.5px solid var(--primary);
      border-radius: 12px;
      font-size: 14px;
      font-weight: 700;
      font-family: inherit;
      cursor: pointer;
      transition: background 0.15s, transform 0.15s;
      margin-top: 4px;
    }
    .fact-reset-btn:hover {
      background: var(--primary);
      color: white;
      transform: translateY(-1px);
    }
    .fact-answer-btn.answered-correct {
      background: #DCFCE7;
      color: #16A34A;
      outline: 3px solid #10B981;
      transform: scale(1.04);
    }
    .fact-answer-btn.answered-incorrect {
      background: #FEE2E2;
      color: #DC2626;
      outline: 3px solid #EF4444;
      transform: scale(1.04);
    }
    .fact-answer-btn:disabled {
      cursor: default;
      opacity: 0.7;
    }
    .fact-answer-btn:disabled:not(.answered-correct):not(.answered-incorrect) {
      opacity: 0.4;
    }
    .preview-reveal-wrap {
      overflow: hidden;
      max-height: 0;
      transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
      opacity: 0;
    }
    .preview-reveal-wrap.open {
      max-height: 300px;
      opacity: 1;
    }

    /* ===== RESPONSIVE ===== */

    /* Hero: одноколоночная раскладка на < 900px */
    @media (max-width: 900px) {
      .hero-inner {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
      }
      .hero-cta { justify-content: center; }
      .phone-wrap {
        width: 100%;
        display: flex;
        justify-content: center;
      }
      .phone-wrap > div {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }

    /* Phone size на мобильных */
    @media (max-width: 480px) {
      .phone {
        width: 200px;
        height: 420px;
      }
    }

    /* How it works: 1 колонка на < 900px */
    @media (max-width: 900px) {
      .how-steps {
        grid-template-columns: 1fr;
        gap: 24px;
      }
      .how-arrow { display: none; }
    }

    /* Features grid */
    @media (max-width: 900px) and (min-width: 481px) {
      .features-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 480px) {
      .features-grid { grid-template-columns: 1fr; }
    }

    /* Stats */
    @media (max-width: 480px) {
      .stats-row { flex-direction: column; align-items: center; }
      .stat-card { width: 100%; max-width: 280px; }
    }

    /* Download section */
    @media (max-width: 600px) {
      .store-btns {
        flex-direction: column;
        align-items: center;
      }
      .store-btn-wrap {
        width: 100%;
        max-width: 320px;
      }
      .store-btn {
        width: 100%;
        min-width: unset;
        justify-content: center;
      }
    }

    /* Footer */
    @media (max-width: 600px) {
      .footer-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
      }
    }

    /* Header: убрать текст кнопки Download на < 480px */
    @media (max-width: 480px) {
      .btn-primary.btn-primary-sm .btn-download-text { display: none; }
    }

    /* Section padding на мобильных */
    @media (max-width: 480px) {
      section { padding: 40px 0; }
    }

    /* Typography clamp */
    .hero h1 {
      font-size: clamp(24px, 5vw, 42px);
    }
    .section-title {
      font-size: clamp(20px, 3.5vw, 32px);
    }
  </style>
</head>
<body>

  <!-- ===== HEADER ===== -->
  <header class="header" role="banner">
    <div class="header-inner">
      <a href="/" class="logo">
        <span class="logo-icon">⚡</span>
        <span data-ru="Фронт Фактов" data-en="Fact Front">Фронт Фактов</span>
      </a>
      <div class="header-actions">
        <a href="#download" class="btn-primary btn-primary-sm"><span class="btn-download-text" data-ru="Скачать" data-en="Download">Скачать</span></a>
        <div class="lang-switcher" role="group" aria-label="Language switcher">
          <button class="lang-btn" data-lang="ru" aria-pressed="true">RU</button>
          <button class="lang-btn" data-lang="en" aria-pressed="false">EN</button>
        </div>
        <button class="theme-btn" id="theme-toggle" aria-label="Switch to dark mode">🌙</button>
      </div>
    </div>
  </header>

  <!-- ===== HERO ===== -->
  <section class="hero" aria-label="Hero">
    <div class="hero-inner">
      <div class="hero-content">
        <div class="hero-overline" data-ru="МОБИЛЬНАЯ КВИЗ-ИГРА" data-en="MOBILE QUIZ GAME">МОБИЛЬНАЯ КВИЗ-ИГРА</div>
        <h1 data-ru="Фронт Фактов — Разоблачай фейки!" data-en="Fact Front — Bust the Fakes!">Фронт Фактов — Разоблачай фейки!</h1>
        <p class="hero-subtitle" data-ru="Ежедневные утверждения — отличай правду от вымысла. Свайпай, узнавай, побеждай!" data-en="Daily statements — tell fact from fiction. Swipe, learn, win!">Ежедневные утверждения — отличай правду от вымысла. Свайпай, узнавай, побеждай!</p>
        <div class="hero-fact-card">
          <span class="fact-icon">💡</span>
          <span data-ru='"Великая Китайская стена видна из космоса" — факт или фейк?' data-en='"The Great Wall of China is visible from space" — fact or fake?'>"Великая Китайская стена видна из космоса" — факт или фейк?</span>
        </div>
        <div class="hero-cta">
          <a id="hero-ios" href="https://apps.apple.com/us/app/fact-front/id6759835633" class="btn-primary">
            <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
              <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
            </svg>
            App Store
          </a>
          <a id="hero-android" href="https://play.google.com/store/apps/details?id=com.factfront.app" class="btn-primary" style="background: linear-gradient(135deg, #059669 0%, #10B981 100%);">
            <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
              <path d="M3.18 23.76c.3.17.64.23.99.17l12.49-7.18-2.78-2.78-10.7 9.79zM.75 1.29C.28 1.8 0 2.57 0 3.55v16.9c0 .98.28 1.75.76 2.26l.12.11 9.47-9.47v-.22L.87 3.65.75 1.29zM21.06 10.68l-2.73-1.58-3.07 3.07 3.07 3.06 2.74-1.58c.78-.45.78-1.52-.01-2zM3.18.24L15.67 7.4l-2.78 2.78L2.19.39c.35-.06.71 0 .99.17v-.32z"/>
            </svg>
            Google Play
          </a>
        </div>
        <p class="hero-cta-note" data-ru="Бесплатно · iOS и Android" data-en="Free · iOS and Android">Бесплатно · iOS и Android</p>
      </div>

      <!-- Phone mockup -->
      <div class="phone-wrap" aria-hidden="true">
        <div>
        <div class="phone">
          <div class="phone-notch"></div>
          <div class="phone-screen">
            <!-- Шапка -->
            <div class="phone-header">
              <div class="phone-header-x">✕</div>
              <div class="phone-header-bar">
                <div class="phone-header-fill" id="phone-progress-fill" style="width:0%"></div>
              </div>
              <div class="phone-header-score">🔥 0</div>
            </div>
            <!-- Счётчик -->
            <div class="phone-counter" id="phone-counter">1 / 5</div>
            <!-- Стек карточек -->
            <div class="phone-deck" id="phone-deck"></div>
            <!-- Кнопки ответа -->
            <div class="phone-btns" id="phone-btns">
              <button class="phone-btn phone-btn-no" id="phone-btn-fake">
                <span>✕</span>
                <span data-ru="Фейк" data-en="Fake">Фейк</span>
              </button>
              <button class="phone-btn phone-btn-yes" id="phone-btn-fact">
                <span>✓</span>
                <span data-ru="Факт" data-en="Fact">Факт</span>
              </button>
            </div>
            <!-- Результат ответа -->
            <div class="phone-result" id="phone-result" hidden>
              <div class="phone-result-badge" id="phone-result-badge"></div>
              <div class="phone-result-text" id="phone-result-text"></div>
              <button class="phone-next-btn" id="phone-next-btn" data-ru="Далее →" data-en="Next →">Далее →</button>
            </div>
            <!-- Модалка после 5 карточек -->
            <div class="phone-modal" id="phone-modal" hidden>
              <div class="phone-modal-inner">
                <div class="phone-modal-emoji">🎉</div>
                <div class="phone-modal-title" data-ru="Молодец!" data-en="Great job!">Молодец!</div>
                <div class="phone-modal-text" data-ru="Скачай приложение и продолжи бесплатно — новые факты каждый день!" data-en="Download the app and continue for free — new facts every day!">Скачай приложение и продолжи бесплатно — новые факты каждый день!</div>
                <a href="#download" class="phone-modal-btn" data-ru="📲 Скачать бесплатно" data-en="📲 Download Free">📲 Скачать бесплатно</a>
              </div>
            </div>
          </div>
        </div>
        <p class="phone-hint" id="phone-hint" data-ru="👆 Нажми Факт или Фейк!" data-en="👆 Tap Fact or Fake!">👆 Нажми Факт или Фейк!</p>
        </div>
      </div>
    </div>
  </section>

  <!-- ===== HOW IT WORKS ===== -->
  <section class="how-section" aria-labelledby="how-title">
    <div class="container">
      <h2 class="section-title" id="how-title" data-ru="Как это работает?" data-en="How It Works">Как это работает?</h2>
      <div class="how-steps">
        <div class="how-card">
          <span class="how-icon">📬</span>
          <div class="how-step-num" data-ru="Шаг 1" data-en="Step 1">Шаг 1</div>
          <h3 data-ru="Получи утверждение" data-en="Get a statement">Получи утверждение</h3>
          <p data-ru="Каждый день — новый набор утверждений о науке, истории, природе и не только" data-en="Every day — a new set of statements about science, history, nature, and more">Каждый день — новый набор утверждений о науке, истории, природе и не только</p>
        </div>
        <div class="how-arrow" aria-hidden="true">→</div>
        <div class="how-card">
          <span class="how-icon">👆</span>
          <div class="how-step-num" data-ru="Шаг 2" data-en="Step 2">Шаг 2</div>
          <h3 data-ru="Свайпни карточку" data-en="Swipe the card">Свайпни карточку</h3>
          <p data-ru="Считаешь правдой — свайпни вправо ✅. Думаешь фейк — свайпни влево ❌. Всё просто!" data-en="Think it's true — swipe right ✅. Think it's fake — swipe left ❌. Simple!">Считаешь правдой — свайпни вправо ✅. Думаешь фейк — свайпни влево ❌. Всё просто!</p>
        </div>
        <div class="how-arrow" aria-hidden="true">→</div>
        <div class="how-card">
          <span class="how-icon">📖</span>
          <div class="how-step-num" data-ru="Шаг 3" data-en="Step 3">Шаг 3</div>
          <h3 data-ru="Узнай объяснение" data-en="Learn the explanation">Узнай объяснение</h3>
          <p data-ru="После каждого ответа — подробное объяснение из проверенных источников." data-en="After every answer — a detailed explanation from verified sources.">После каждого ответа — подробное объяснение из проверенных источников.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- ===== FEATURES ===== -->
  <section aria-labelledby="features-title">
    <div class="container">
      <h2 class="section-title" id="features-title" data-ru="Почему Фронт Фактов?" data-en="Why Fact Front?">Почему Фронт Фактов?</h2>
      <p class="section-subtitle" data-ru="Всё, что нужно для ежедневного интеллектуального вызова" data-en="Everything you need for a daily intellectual challenge">Всё, что нужно для ежедневного интеллектуального вызова</p>
      <div class="features-grid">
        <div class="feature-card">
          <span class="feature-icon">🔥</span>
          <h3 data-ru="Ежедневный набор" data-en="Daily Set">Ежедневный набор</h3>
          <p data-ru="Минимум 15 новых утверждений каждый день. Не пропусти — набор обновляется в полночь" data-en="At least 15 new statements every day. Set refreshes at midnight">Минимум 15 новых утверждений каждый день. Не пропусти — набор обновляется в полночь</p>
        </div>
        <div class="feature-card">
          <span class="feature-icon">🗂️</span>
          <h3 data-ru="Темы на любой вкус" data-en="Topics for Every Taste">Темы на любой вкус</h3>
          <p data-ru="Наука, история, природа, технологии, спорт и многое другое" data-en="Science, history, nature, technology, sports, and more">Наука, история, природа, технологии, спорт и многое другое</p>
        </div>
        <div class="feature-card">
          <span class="feature-icon">📅</span>
          <h3 data-ru="Серия побед" data-en="Win Streak">Серия побед</h3>
          <p data-ru="Играй каждый день и наращивай стрик. 7 дней, 30 дней, 100 дней!" data-en="Play every day and build your streak. 7, 30, 100 days!">Играй каждый день и наращивай стрик. 7 дней, 30 дней, 100 дней!</p>
        </div>
        <div class="feature-card">
          <span class="feature-icon">🏆</span>
          <h3 data-ru="Глобальный рейтинг" data-en="Global Leaderboard">Глобальный рейтинг</h3>
          <p data-ru="Соревнуйся с игроками по всему миру. Еженедельный и общий рейтинг" data-en="Compete with players worldwide. Weekly and all-time leaderboards">Соревнуйся с игроками по всему миру. Еженедельный и общий рейтинг</p>
        </div>
        <div class="feature-card">
          <span class="feature-icon">📚</span>
          <h3 data-ru="Проверенные факты" data-en="Verified Facts">Проверенные факты</h3>
          <p data-ru="Каждое утверждение — с подробным объяснением и ссылкой на источник" data-en="Every statement comes with a detailed explanation and source link">Каждое утверждение — с подробным объяснением и ссылкой на источник</p>
        </div>
        <div class="feature-card">
          <span class="feature-icon">⭐</span>
          <h3 data-ru="Тематические подборки" data-en="Thematic Collections">Тематические подборки</h3>
          <p data-ru="Специальные коллекции: Фейки о здоровье, Факты о космосе, История в фактах" data-en="Special collections: Health Fakes, Space Facts, History in Facts">Специальные коллекции: Фейки о здоровье, Факты о космосе, История в фактах</p>
        </div>
      </div>
    </div>
  </section>

  <!-- ===== SOCIAL PROOF ===== -->
  <section class="social-section" aria-labelledby="social-title">
    <div class="container">
      <h2 class="section-title" id="social-title" data-ru="Присоединяйся к сообществу" data-en="Join the Community">Присоединяйся к сообществу</h2>
      <div class="stats-row" role="list">
        <div class="stat-card" role="listitem">
          <span class="stat-value">1 000+</span>
          <span class="stat-label" data-ru="Проверенных фактов" data-en="Verified Facts">Проверенных фактов</span>
        </div>
        <div class="stat-card" role="listitem">
          <span class="stat-value">10+</span>
          <span class="stat-label" data-ru="Тематических категорий" data-en="Topic Categories">Тематических категорий</span>
        </div>
        <div class="stat-card" role="listitem">
          <span class="stat-value">10 000+</span>
          <span class="stat-label" data-ru="Активных игроков" data-en="Active Players">Активных игроков</span>
        </div>
      </div>

      <!-- Interactive fact preview -->
      <div class="preview-wrap" id="fact-preview" aria-label="Interactive fact preview">
        <div class="preview-card">
          <div class="preview-label" data-ru="Факт или фейк?" data-en="Fact or fake?">Факт или фейк?</div>
          <div class="preview-statement" data-ru="Люди используют только 10% своего мозга" data-en="Humans only use 10% of their brain">Люди используют только 10% своего мозга</div>
        </div>
        <div class="preview-actions" id="preview-actions" role="group" aria-label="Answer buttons">
          <button class="fact-answer-btn btn-myth" data-answer="fake" data-ru="❌ Фейк" data-en="❌ Fake">❌ Фейк</button>
          <button class="fact-answer-btn btn-fact" data-answer="fact" data-ru="✅ Факт" data-en="✅ Fact">✅ Факт</button>
        </div>
        <div class="preview-reveal-wrap" id="preview-reveal-wrap">
          <div class="fact-reveal" id="fact-reveal" role="status" aria-live="polite">
            <div class="fact-reveal-header" id="fact-reveal-header"></div>
            <div class="fact-reveal-text">
              <span data-ru="МРТ-сканирование показывает активность во всех областях мозга в течение дня. Мозг работает полностью." data-en="MRI scans show activity in all brain regions throughout the day. The brain works fully.">МРТ-сканирование показывает активность во всех областях мозга в течение дня. Мозг работает полностью.</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ===== DOWNLOAD CTA ===== -->
  <section class="download-section" id="download" aria-labelledby="download-title">
    <div class="container">
      <div class="section-overline" data-ru="СКАЧИВАЙ БЕСПЛАТНО" data-en="FREE DOWNLOAD">СКАЧИВАЙ БЕСПЛАТНО</div>
      <h2 id="download-title" data-ru="Начни разоблачать фейки прямо сейчас" data-en="Start busting fakes right now">Начни разоблачать фейки прямо сейчас</h2>
      <p class="dl-subtitle" data-ru="Новый набор фактов каждый день. Бесплатно, навсегда." data-en="New facts every day. Free, forever.">Новый набор фактов каждый день. Бесплатно, навсегда.</p>
      <div class="store-btns">
        <!-- iOS -->
        <div class="store-btn-wrap">
          <a id="download-ios" href="https://apps.apple.com/us/app/fact-front/id6759835633" class="store-btn">
            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
              <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
            </svg>
            <span>
              <small data-ru="Загрузить в" data-en="Download on the">Загрузить в</small>
              <strong>App Store</strong>
            </span>
          </a>
          <div class="store-extras">
            <button class="copy-btn" data-url="https://apps.apple.com/us/app/fact-front/id6759835633" aria-label="Copy App Store link">
              <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>
              <span data-ru="Скопировать" data-en="Copy link">Скопировать</span>
            </button>
            <div class="qr-wrap" id="qr-wrap-ios">
              <button class="qr-toggle-btn" data-target="qr-popup-ios" aria-label="Show QR code for App Store" aria-expanded="false">
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M3 3h7v7H3zm1 1v5h5V4zm1 1h3v3H5zm9-2h7v7h-7zm1 1v5h5V4zm1 1h3v3h-3zM3 14h7v7H3zm1 1v5h5v-5zm1 1h3v3H5zm9 0h2v2h-2zm2 2h2v2h-2zm-2 2h2v2h-2zm4-4h2v2h-2zm-2 4h2v2h-2zm2 2h2v2h-2zm-4-2h2v2h-2z"/></svg>
                <span data-ru="QR-код" data-en="QR code">QR-код</span>
              </button>
              <div class="qr-popup" id="qr-popup-ios" hidden>
                <div class="qr-svg-wrap"><svg xmlns="http://www.w3.org/2000/svg" width="152" height="152" viewBox="0 0 31 31" shape-rendering="crispEdges"><path fill="#FFFFFF" d="M0 0h31v31H0z"/><path stroke="#0F172A" d="M1 1.5h7M10 1.5h4M15 1.5h1M17 1.5h4M23 1.5h7M1 2.5h1M7 2.5h1M9 2.5h1M11 2.5h1M14 2.5h1M16 2.5h1M18 2.5h1M21 2.5h1M23 2.5h1M29 2.5h1M1 3.5h1M3 3.5h3M7 3.5h1M10 3.5h1M17 3.5h1M21 3.5h1M23 3.5h1M25 3.5h3M29 3.5h1M1 4.5h1M3 4.5h3M7 4.5h1M9 4.5h1M14 4.5h3M18 4.5h1M20 4.5h1M23 4.5h1M25 4.5h3M29 4.5h1M1 5.5h1M3 5.5h3M7 5.5h1M10 5.5h5M17 5.5h1M20 5.5h2M23 5.5h1M25 5.5h3M29 5.5h1M1 6.5h1M7 6.5h1M9 6.5h1M14 6.5h4M21 6.5h1M23 6.5h1M29 6.5h1M1 7.5h7M9 7.5h1M11 7.5h1M13 7.5h1M15 7.5h1M17 7.5h1M19 7.5h1M21 7.5h1M23 7.5h7M10 8.5h4M15 8.5h3M20 8.5h2M1 9.5h5M7 9.5h3M14 9.5h2M18 9.5h1M20 9.5h1M22 9.5h1M24 9.5h1M26 9.5h1M28 9.5h1M2 10.5h2M8 10.5h1M10 10.5h5M20 10.5h4M25 10.5h1M29 10.5h1M2 11.5h1M4 11.5h4M13 11.5h4M18 11.5h2M21 11.5h1M23 11.5h2M1 12.5h2M5 12.5h2M8 12.5h1M10 12.5h2M13 12.5h1M16 12.5h2M20 12.5h1M22 12.5h2M25 12.5h2M28 12.5h1M1 13.5h3M6 13.5h2M9 13.5h2M12 13.5h1M14 13.5h6M24 13.5h1M26 13.5h2M1 14.5h1M3 14.5h1M5 14.5h2M9 14.5h1M12 14.5h2M15 14.5h1M17 14.5h9M29 14.5h1M2 15.5h2M7 15.5h3M15 15.5h4M22 15.5h1M25 15.5h3M2 16.5h1M4 16.5h3M8 16.5h1M13 16.5h1M20 16.5h2M25 16.5h1M28 16.5h1M2 17.5h1M5 17.5h1M7 17.5h2M10 17.5h3M14 17.5h1M16 17.5h1M18 17.5h1M20 17.5h1M24 17.5h1M26 17.5h2M1 18.5h3M5 18.5h2M12 18.5h3M17 18.5h1M19 18.5h2M23 18.5h3M27 18.5h1M29 18.5h1M1 19.5h1M3 19.5h1M7 19.5h1M14 19.5h4M19 19.5h1M21 19.5h2M25 19.5h1M27 19.5h1M1 20.5h1M4 20.5h3M9 20.5h3M15 20.5h2M21 20.5h2M25 20.5h1M28 20.5h1M1 21.5h1M4 21.5h2M7 21.5h4M14 21.5h3M18 21.5h1M21 21.5h5M27 21.5h3M9 22.5h1M12 22.5h3M17 22.5h1M21 22.5h1M25 22.5h5M1 23.5h7M9 23.5h1M11 23.5h1M16 23.5h1M19 23.5h3M23 23.5h1M25 23.5h3M1 24.5h1M7 24.5h1M10 24.5h1M12 24.5h1M15 24.5h1M17 24.5h1M19 24.5h3M25 24.5h1M1 25.5h1M3 25.5h3M7 25.5h1M9 25.5h3M14 25.5h3M18 25.5h1M21 25.5h5M27 25.5h1M1 26.5h1M3 26.5h3M7 26.5h1M9 26.5h2M12 26.5h2M17 26.5h1M24 26.5h1M26 26.5h2M29 26.5h1M1 27.5h1M3 27.5h3M7 27.5h1M9 27.5h2M13 27.5h1M15 27.5h3M19 27.5h3M23 27.5h6M1 28.5h1M7 28.5h1M9 28.5h4M17 28.5h1M19 28.5h1M21 28.5h2M24 28.5h3M28 28.5h1M1 29.5h7M9 29.5h1M14 29.5h1M18 29.5h3M22 29.5h1M25 29.5h1M27 29.5h1"/></svg></div>
                <p data-ru="Наведи камеру телефона" data-en="Scan with your phone">Наведи камеру телефона</p>
              </div>
            </div>
          </div>
        </div>

        <!-- Android -->
        <div class="store-btn-wrap">
          <a id="download-android" href="https://play.google.com/store/apps/details?id=com.factfront.app" class="store-btn">
            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
              <path d="M3.18 23.76c.3.17.64.23.99.17l12.49-7.18-2.78-2.78-10.7 9.79zM.75 1.29C.28 1.8 0 2.57 0 3.55v16.9c0 .98.28 1.75.76 2.26l.12.11 9.47-9.47v-.22L.87 3.65.75 1.29zM21.06 10.68l-2.73-1.58-3.07 3.07 3.07 3.06 2.74-1.58c.78-.45.78-1.52-.01-2zM3.18.24L15.67 7.4l-2.78 2.78L2.19.39c.35-.06.71 0 .99.17v-.32z"/>
            </svg>
            <span>
              <small data-ru="Получить в" data-en="Get it on">Получить в</small>
              <strong>Google Play</strong>
            </span>
          </a>
          <div class="store-extras">
            <button class="copy-btn" data-url="https://play.google.com/store/apps/details?id=com.factfront.app" aria-label="Copy Google Play link">
              <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>
              <span data-ru="Скопировать" data-en="Copy link">Скопировать</span>
            </button>
            <div class="qr-wrap" id="qr-wrap-android">
              <button class="qr-toggle-btn" data-target="qr-popup-android" aria-label="Show QR code for Google Play" aria-expanded="false">
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M3 3h7v7H3zm1 1v5h5V4zm1 1h3v3H5zm9-2h7v7h-7zm1 1v5h5V4zm1 1h3v3h-3zM3 14h7v7H3zm1 1v5h5v-5zm1 1h3v3H5zm9 0h2v2h-2zm2 2h2v2h-2zm-2 2h2v2h-2zm4-4h2v2h-2zm-2 4h2v2h-2zm2 2h2v2h-2zm-4-2h2v2h-2z"/></svg>
                <span data-ru="QR-код" data-en="QR code">QR-код</span>
              </button>
              <div class="qr-popup" id="qr-popup-android" hidden>
                <div class="qr-svg-wrap"><svg xmlns="http://www.w3.org/2000/svg" width="152" height="152" viewBox="0 0 37 37" shape-rendering="crispEdges"><path fill="#FFFFFF" d="M0 0h37v37H0z"/><path stroke="#0F172A" d="M0 0.5h7m2 0h2m1 0h4m2 0h1m1 0h3m1 0h3m1 0h1m1 0h7M0 1.5h1m5 0h1m7 0h2m1 0h3m5 0h3m2 0h1m5 0h1M0 2.5h1m1 0h3m1 0h1m1 0h2m3 0h3m3 0h4m1 0h1m1 0h1m1 0h1m1 0h1m1 0h3m1 0h1M0 3.5h1m1 0h3m1 0h1m1 0h2m3 0h1m2 0h5m1 0h1m2 0h2m3 0h1m1 0h3m1 0h1M0 4.5h1m1 0h3m1 0h1m1 0h2m3 0h1m4 0h3m1 0h2m4 0h1m1 0h1m1 0h3m1 0h1M0 5.5h1m5 0h1m1 0h7m3 0h1m3 0h1m3 0h3m1 0h1m5 0h1M0 6.5h7m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h7M8 7.5h1m1 0h3m1 0h1m1 0h1m6 0h1m4 0h1M0 8.5h1m1 0h5m2 0h2m4 0h1m2 0h1m1 0h6m4 0h5M0 9.5h1m3 0h1m5 0h2m3 0h3m3 0h1m6 0h1m2 0h1m3 0h1M0 10.5h3m1 0h4m1 0h3m1 0h1m3 0h1m2 0h9m1 0h1m1 0h2m1 0h2M2 11.5h2m3 0h1m5 0h1m2 0h1m4 0h1m1 0h1m2 0h1m1 0h1m1 0h2m1 0h1m2 0h1M1 12.5h3m2 0h1m3 0h4m2 0h2m2 0h1m1 0h5m2 0h4m1 0h3M4 13.5h1m2 0h1m2 0h2m4 0h6m1 0h3m2 0h1m2 0h1M0 14.5h1m1 0h1m2 0h3m3 0h3m1 0h1m1 0h1m3 0h1m3 0h4m1 0h4m1 0h2M0 15.5h6m1 0h1m1 0h2m1 0h1m2 0h4m2 0h2m5 0h5m2 0h2M0 16.5h1m3 0h1m1 0h1m2 0h1m1 0h2m1 0h1m1 0h1m4 0h1m1 0h1m1 0h3m1 0h2m1 0h1m1 0h1M2 17.5h1m4 0h1m1 0h1m2 0h1m1 0h2m2 0h1m1 0h1m1 0h1m1 0h2m2 0h1m2 0h1m2 0h2M1 18.5h1m4 0h1m3 0h1m3 0h3m2 0h1m2 0h1m3 0h2m1 0h1m2 0h1m2 0h2M1 19.5h1m1 0h1m4 0h5m2 0h1m2 0h5m1 0h1m5 0h3m3 0h1M0 20.5h1m3 0h1m1 0h2m2 0h1m4 0h1m1 0h1m1 0h2m1 0h1m1 0h4m1 0h2m1 0h3M1 21.5h1m2 0h1m3 0h1m2 0h1m1 0h2m1 0h1m1 0h3m1 0h2m4 0h1m4 0h1M1 22.5h2m1 0h1m1 0h3m4 0h1m1 0h2m1 0h1m1 0h1m1 0h1m4 0h1m2 0h4m1 0h2M0 23.5h1m2 0h2m4 0h4m1 0h2m7 0h1m2 0h1m1 0h2m1 0h2m2 0h1M2 24.5h1m1 0h1m1 0h1m4 0h1m1 0h1m4 0h1m1 0h7m1 0h3m1 0h1m1 0h2M0 25.5h1m6 0h6m2 0h2m4 0h1m4 0h1m1 0h2m3 0h1M0 26.5h1m2 0h1m1 0h2m3 0h2m1 0h2m5 0h1m2 0h2m1 0h2m2 0h2m2 0h3M0 27.5h1m2 0h2m2 0h1m1 0h1m1 0h2m3 0h1m4 0h1m1 0h1m2 0h1m1 0h5m2 0h1M0 28.5h1m3 0h1m1 0h1m1 0h2m2 0h1m1 0h1m2 0h1m4 0h4m1 0h9M8 29.5h1m1 0h4m2 0h2m1 0h3m1 0h1m3 0h2m3 0h2m1 0h1M0 30.5h7m6 0h1m1 0h3m2 0h2m6 0h1m1 0h1m1 0h1m1 0h1m1 0h1M0 31.5h1m5 0h1m1 0h1m2 0h2m2 0h1m1 0h8m2 0h2m3 0h2m1 0h1M0 32.5h1m1 0h3m1 0h1m1 0h2m1 0h2m1 0h3m2 0h1m1 0h1m2 0h9m1 0h1m1 0h1M0 33.5h1m1 0h3m1 0h1m1 0h1m2 0h3m1 0h1m2 0h1m1 0h3m1 0h3m2 0h2m1 0h1m1 0h2M0 34.5h1m1 0h3m1 0h1m1 0h1m2 0h2m2 0h2m2 0h1m1 0h2m1 0h6m4 0h1m1 0h1M0 35.5h1m5 0h1m4 0h1m2 0h2m2 0h5m1 0h1m2 0h4m1 0h1m3 0h1M0 36.5h7m1 0h1m1 0h1m1 0h1m1 0h2m1 0h1m1 0h1m4 0h3m3 0h1m1 0h5"/></svg></div>
                <p data-ru="Наведи камеру телефона" data-en="Scan with your phone">Наведи камеру телефона</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Copy toast -->
      <div id="copy-toast" role="alert" aria-live="polite">
        <span id="copy-toast-text" data-ru="Ссылка скопирована!" data-en="Link copied!">Ссылка скопирована!</span>
      </div>
    </div>
  </section>

  <!-- ===== FOOTER ===== -->
  <footer class="footer" role="contentinfo">
    <div class="container">
      <div class="footer-inner">
        <div class="footer-left">
          <a href="/" class="logo">
            <span class="logo-icon">⚡</span>
            <span data-ru="Фронт Фактов" data-en="Fact Front">Фронт Фактов</span>
          </a>
          <p class="footer-tagline" data-ru="Разоблачай фейки каждый день" data-en="Bust fakes every day">Разоблачай фейки каждый день</p>
          <a href="/privacy-policy/" class="footer-link" data-ru="Политика конфиденциальности" data-en="Privacy Policy">Политика конфиденциальности</a>
        </div>
        <div class="footer-right">
          <div class="lang-switcher" role="group" aria-label="Language switcher">
            <button class="lang-btn" data-lang="ru" aria-pressed="true">RU</button>
            <button class="lang-btn" data-lang="en" aria-pressed="false">EN</button>
          </div>
          <button class="theme-btn" id="theme-toggle-footer" aria-label="Switch to dark mode">🌙</button>
        </div>
      </div>
    </div>
  </footer>

  <script>
    // ===== INITIALIZATION =====
    (function() {
      var urlLang = new URLSearchParams(location.search).get('lang');
      var savedLang = localStorage.getItem('ff_lang');
      var browserLang = (navigator.language || '').toLowerCase();
      var lang = urlLang || savedLang || (browserLang.startsWith('ru') ? 'ru' : 'en');

      var savedTheme = localStorage.getItem('ff_theme');
      var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
      var theme = savedTheme || (prefersDark ? 'dark' : 'light');

      // Apply early to avoid flash
      document.documentElement.setAttribute('data-theme', theme);
      document.documentElement.lang = lang;

      window.__ffLang = lang;
      window.__ffTheme = theme;
    })();

    function updateMeta(lang) {
      var isRu = lang === 'ru';
      document.title = isRu
        ? 'Фронт Фактов — Разоблачай фейки! Квиз-игра для iOS и Android'
        : 'Fact Front — Bust the Fakes! Daily Trivia Quiz for iOS & Android';
      var desc = document.querySelector('meta[name=description]');
      if (desc) {
        desc.content = isRu
          ? 'Ежедневные утверждения: отличай факты от фейков. Свайпай карточки, узнавай объяснения из проверенных источников, соревнуйся в рейтинге. Бесплатно для iOS и Android.'
          : 'Daily statements: tell fact from fiction with a swipe. Learn explanations from verified sources, compete on the leaderboard. Free for iOS & Android.';
      }
      document.documentElement.lang = lang;
    }

    function applyLang(newLang) {
      document.querySelectorAll('[data-ru][data-en]').forEach(function(el) {
        el.textContent = el.dataset[newLang] || el.dataset.ru;
      });
      document.querySelectorAll('[data-ru-html][data-en-html]').forEach(function(el) {
        el.innerHTML = el.dataset[newLang + 'Html'] || el.dataset.ruHtml;
      });
      document.querySelectorAll('.lang-btn').forEach(function(btn) {
        var isActive = btn.dataset.lang === newLang;
        btn.classList.toggle('active', isActive);
        btn.setAttribute('aria-pressed', String(isActive));
      });
      updateMeta(newLang);
      localStorage.setItem('ff_lang', newLang);
      document.documentElement.lang = newLang;
    }

    function applyTheme(newTheme) {
      document.documentElement.setAttribute('data-theme', newTheme);
      var icon = newTheme === 'dark' ? '☀️' : '🌙';
      var ariaLabel = newTheme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode';
      var themeBtn = document.getElementById('theme-toggle');
      var themeBtnFooter = document.getElementById('theme-toggle-footer');
      if (themeBtn) {
        themeBtn.textContent = icon;
        themeBtn.setAttribute('aria-label', ariaLabel);
      }
      if (themeBtnFooter) {
        themeBtnFooter.textContent = icon;
        themeBtnFooter.setAttribute('aria-label', ariaLabel);
      }
      localStorage.setItem('ff_theme', newTheme);
    }

    window.addEventListener('DOMContentLoaded', function() {
      var lang = window.__ffLang || 'ru';
      var theme = window.__ffTheme || 'light';

      applyLang(lang);
      applyTheme(theme);

      // Language button handlers
      document.querySelectorAll('.lang-btn').forEach(function(btn) {
        btn.addEventListener('click', function() {
          applyLang(btn.dataset.lang);
        });
      });

      // Theme toggle handlers
      var themeBtn = document.getElementById('theme-toggle');
      if (themeBtn) {
        themeBtn.addEventListener('click', function() {
          var current = document.documentElement.getAttribute('data-theme');
          applyTheme(current === 'dark' ? 'light' : 'dark');
        });
      }

      var themeBtnFooter = document.getElementById('theme-toggle-footer');
      if (themeBtnFooter) {
        themeBtnFooter.addEventListener('click', function() {
          var current = document.documentElement.getAttribute('data-theme');
          applyTheme(current === 'dark' ? 'light' : 'dark');
        });
      }

      // ===== INTERACTIVE FACT CARD =====
      var CORRECT_ANSWER = 'fake';
      var factReveal = document.getElementById('fact-reveal');
      var factRevealHeader = document.getElementById('fact-reveal-header');
      var previewRevealWrap = document.getElementById('preview-reveal-wrap');
      var previewActions = document.getElementById('preview-actions');
      var factResetBtn = document.getElementById('fact-reset-btn');
      var factBtns = document.querySelectorAll('.fact-answer-btn');

      function resetFactCard() {
        if (factReveal) factReveal.style.display = 'none';
        if (previewRevealWrap) previewRevealWrap.classList.remove('open');
        if (previewActions) {
          previewActions.style.display = 'flex';
          factBtns.forEach(function(b) {
            b.disabled = false;
            b.classList.remove('answered-correct', 'answered-incorrect');
            b.style.transform = '';
          });
        }
        var currentLang = localStorage.getItem('ff_lang') || window.__ffLang || 'ru';
        document.querySelectorAll('[data-ru][data-en]').forEach(function(el) {
          el.textContent = el.dataset[currentLang] || el.dataset.ru;
        });
      }

      if (factBtns.length) {
        factBtns.forEach(function(btn) {
          btn.addEventListener('click', function() {
            var answered = btn.dataset.answer;
            var isCorrect = (answered === CORRECT_ANSWER);
            var currentLang = localStorage.getItem('ff_lang') || window.__ffLang || 'ru';

            // Highlight buttons
            factBtns.forEach(function(b) {
              b.disabled = true;
              if (b.dataset.answer === answered) {
                b.classList.add(isCorrect ? 'answered-correct' : 'answered-incorrect');
              } else {
                b.style.opacity = '0.4';
              }
            });

            // Set result header
            if (factRevealHeader) {
              factRevealHeader.className = 'fact-reveal-header ' + (isCorrect ? 'correct' : 'incorrect');
              if (isCorrect) {
                factRevealHeader.textContent = currentLang === 'ru' ? 'Правильно! ✅' : 'Correct! ✅';
              } else {
                factRevealHeader.textContent = currentLang === 'ru' ? 'Неправильно ❌' : 'Incorrect ❌';
              }
            }

            // Reveal with animation
            if (factReveal) factReveal.style.display = 'flex';
            if (previewRevealWrap) {
              requestAnimationFrame(function() {
                previewRevealWrap.classList.add('open');
              });
            }

            // Re-apply language to all newly visible text
            document.querySelectorAll('[data-ru][data-en]').forEach(function(el) {
              el.textContent = el.dataset[currentLang] || el.dataset.ru;
            });
          });
        });
      }

      if (factResetBtn) {
        factResetBtn.addEventListener('click', function() {
          resetFactCard();
        });
      }

      // ===== QR CODES & COPY =====
      var copyToast = document.getElementById('copy-toast');
      var copyToastText = document.getElementById('copy-toast-text');
      var toastTimer = null;

      function showToast() {
        var currentLang = localStorage.getItem('ff_lang') || window.__ffLang || 'ru';
        if (copyToastText) {
          copyToastText.textContent = currentLang === 'ru' ? 'Ссылка скопирована!' : 'Link copied!';
        }
        if (copyToast) {
          copyToast.classList.add('visible');
          clearTimeout(toastTimer);
          toastTimer = setTimeout(function() {
            copyToast.classList.remove('visible');
          }, 2200);
        }
      }

      // Copy buttons
      document.querySelectorAll('.copy-btn').forEach(function(btn) {
        btn.addEventListener('click', function() {
          var url = btn.dataset.url;
          if (!url) return;
          if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(url).then(showToast).catch(function() {
              fallbackCopy(url);
            });
          } else {
            fallbackCopy(url);
          }
        });
      });

      function fallbackCopy(text) {
        var ta = document.createElement('textarea');
        ta.value = text;
        ta.style.position = 'fixed';
        ta.style.opacity = '0';
        document.body.appendChild(ta);
        ta.focus();
        ta.select();
        try { document.execCommand('copy'); showToast(); } catch(e) {}
        document.body.removeChild(ta);
      }

      // QR toggle buttons
      document.querySelectorAll('.qr-toggle-btn').forEach(function(btn) {
        btn.addEventListener('click', function(e) {
          e.stopPropagation();
          var targetId = btn.dataset.target;
          var popup = document.getElementById(targetId);
          if (!popup) return;

          var isHidden = popup.hidden;

          // Close all other popups
          document.querySelectorAll('.qr-popup').forEach(function(p) {
            p.hidden = true;
          });
          document.querySelectorAll('.qr-toggle-btn').forEach(function(b) {
            b.setAttribute('aria-expanded', 'false');
          });

          if (isHidden) {
            popup.hidden = false;
            btn.setAttribute('aria-expanded', 'true');
          }
        });
      });

      // Close QR popups when clicking outside
      document.addEventListener('click', function() {
        document.querySelectorAll('.qr-popup').forEach(function(p) {
          p.hidden = true;
        });
        document.querySelectorAll('.qr-toggle-btn').forEach(function(b) {
          b.setAttribute('aria-expanded', 'false');
        });
      });

      // ===== PHONE DECK GAME =====
      var DEMO_CARDS = [
        {
          ru: { text: 'Великая Китайская стена видна из космоса', category: 'ИСТОРИЯ', explanation: 'Это фейк! Стена слишком узкая (около 5–8 м) и невидима с орбиты невооружённым глазом. Это подтвердили китайские космонавты.', isTrue: false },
          en: { text: 'The Great Wall of China is visible from space', category: 'HISTORY', explanation: "It's a fake! The wall is too narrow (about 5–8 m wide) and invisible from orbit with the naked eye. Chinese astronauts confirmed this.", isTrue: false }
        },
        {
          ru: { text: 'Молния никогда не бьёт дважды в одно место', category: 'ФИЗИКА', explanation: 'Фейк! Молния часто бьёт в одно место многократно. Высокие здания и башни получают удары молнии сотни раз в год.', isTrue: false },
          en: { text: 'Lightning never strikes the same place twice', category: 'PHYSICS', explanation: "Fake! Lightning frequently strikes the same spot multiple times. Tall buildings and towers get struck hundreds of times per year.", isTrue: false }
        },
        {
          ru: { text: 'Мы используем только 10% своего мозга', category: 'НАУКА', explanation: 'Фейк! МРТ-исследования показывают, что мы используем практически все области мозга, хотя и не одновременно.', isTrue: false },
          en: { text: 'We only use 10% of our brain', category: 'SCIENCE', explanation: "Fake! MRI studies show we use virtually all brain regions, just not all simultaneously.", isTrue: false }
        },
        {
          ru: { text: 'Кровь в венах синяя', category: 'БИОЛОГИЯ', explanation: 'Фейк! Кровь всегда красная. Синий цвет вен — оптическая иллюзия из-за особенностей поглощения света кожей.', isTrue: false },
          en: { text: 'Blood in veins is blue', category: 'BIOLOGY', explanation: "Fake! Blood is always red. The blue color of veins is an optical illusion caused by how skin absorbs light.", isTrue: false }
        },
        {
          ru: { text: 'Золото нельзя растворить в воде', category: 'ХИМИЯ', explanation: 'Факт! Чистая вода не растворяет золото. Оно растворяется только в царской водке — смеси соляной и азотной кислот.', isTrue: true },
          en: { text: 'Gold cannot be dissolved in water', category: 'CHEMISTRY', explanation: "Fact! Pure water cannot dissolve gold. It only dissolves in aqua regia — a mixture of hydrochloric and nitric acids.", isTrue: true }
        }
      ];

      var phoneDeck = document.getElementById('phone-deck');
      var phoneResult = document.getElementById('phone-result');
      var phoneBtnFact = document.getElementById('phone-btn-fact');
      var phoneBtnFake = document.getElementById('phone-btn-fake');
      var phoneNextBtn = document.getElementById('phone-next-btn');
      var phoneModal = document.getElementById('phone-modal');
      var phoneResultBadge = document.getElementById('phone-result-badge');
      var phoneResultText = document.getElementById('phone-result-text');
      var phoneBtnsEl = document.getElementById('phone-btns');
      var phoneProgressFill = document.getElementById('phone-progress-fill');
      var phoneCounterEl = document.getElementById('phone-counter');
      var phoneScoreBadge = document.querySelector('.phone-header-score');

      var phoneCurrentCard = 0;
      var phoneAnswered = false;
      var phoneStreak = 0;
      var phoneLastCorrect = false;

      function phoneUpdateStreak(isCorrect) {
        if (isCorrect) {
          phoneStreak++;
          if (phoneScoreBadge) {
            phoneScoreBadge.textContent = '🔥 ' + phoneStreak;
            phoneScoreBadge.style.background = 'rgba(16,185,129,0.2)';
            phoneScoreBadge.style.borderColor = 'rgba(16,185,129,0.5)';
            phoneScoreBadge.style.color = '#34D399';
          }
        } else {
          phoneStreak = 0;
          if (phoneScoreBadge) {
            phoneScoreBadge.textContent = '🔥 0';
            phoneScoreBadge.style.background = 'rgba(239,68,68,0.15)';
            phoneScoreBadge.style.borderColor = 'rgba(239,68,68,0.4)';
            phoneScoreBadge.style.color = '#F87171';
            setTimeout(function() {
              phoneScoreBadge.style.background = '';
              phoneScoreBadge.style.borderColor = '';
              phoneScoreBadge.style.color = '';
            }, 1200);
          }
        }
      }

      function phoneGetLang() {
        return localStorage.getItem('ff_lang') || window.__ffLang || 'ru';
      }

      function phoneUpdateHeader() {
        if (phoneProgressFill) {
          phoneProgressFill.style.width = (phoneCurrentCard / DEMO_CARDS.length * 100) + '%';
        }
        if (phoneCounterEl) {
          phoneCounterEl.textContent = (phoneCurrentCard + 1) + ' / ' + DEMO_CARDS.length;
        }
      }

      function phoneRestoreBtns() {
        if (!phoneBtnsEl) return;
        var lng = phoneGetLang();
        phoneBtnsEl.innerHTML =
          '<button class="phone-btn phone-btn-no" id="phone-btn-fake"><span>✕</span><span>' + (lng === 'ru' ? 'Фейк' : 'Fake') + '</span></button>' +
          '<button class="phone-btn phone-btn-yes" id="phone-btn-fact"><span>✓</span><span>' + (lng === 'ru' ? 'Факт' : 'Fact') + '</span></button>';
        phoneBtnsEl.style.display = '';
      }

      function phoneBuildDeck() {
        phoneDeck.innerHTML = '';
        for (var i = phoneCurrentCard; i < DEMO_CARDS.length; i++) {
          var card = DEMO_CARDS[i];
          var lng = phoneGetLang();
          var d = card[lng] || card.ru;
          var cardEl = document.createElement('div');
          cardEl.className = 'phone-deck-card';
          cardEl.dataset.index = i;
          var frontContent =
            '<div class="phone-card-category">' + d.category + '</div>' +
            '<div class="phone-card-quote">«</div>' +
            '<div class="phone-card-text">' + d.text + '</div>' +
            '<div class="phone-card-quote">»</div>';
          if (i === phoneCurrentCard) {
            cardEl.innerHTML =
              '<div class="phone-card-front">' + frontContent + '</div>' +
              '<div class="phone-card-back" id="phone-card-back"></div>';
          } else {
            cardEl.innerHTML = '<div class="phone-card-front">' + frontContent + '</div>';
          }
          phoneDeck.appendChild(cardEl);
        }
        phoneAnswered = false;
        phoneUpdateHeader();
        phoneRestoreBtns();
      }

      function phoneUpdateProgress() {
        phoneUpdateHeader();
      }

      function phoneAnswer(userSaidTrue) {
        if (phoneAnswered || phoneCurrentCard >= DEMO_CARDS.length) return;
        phoneAnswered = true;

        var lng = phoneGetLang();
        var card = DEMO_CARDS[phoneCurrentCard];
        var d = card[lng] || card.ru;
        var isCorrect = (userSaidTrue === d.isTrue);
        phoneLastCorrect = isCorrect;

        // Fill back face
        var backEl = document.getElementById('phone-card-back');
        if (backEl) {
          var badgeText = lng === 'ru'
            ? (isCorrect ? '✅ Правильно!' : '❌ Неправильно')
            : (isCorrect ? '✅ Correct!' : '❌ Incorrect');
          backEl.className = 'phone-card-back ' + (isCorrect ? 'correct' : 'wrong');
          backEl.innerHTML =
            '<div class="phone-flip-badge ' + (isCorrect ? 'correct' : 'wrong') + '">' + badgeText + '</div>' +
            '<div class="phone-flip-text">' + d.explanation + '</div>';
        }

        // Flip top card
        var topCard = phoneDeck.querySelector('.phone-deck-card:first-child');
        if (topCard) topCard.classList.add('flipped');

        // Replace Fake/Fact with Next button
        if (phoneBtnsEl) {
          var nextText = lng === 'ru' ? 'Далее →' : 'Next →';
          phoneBtnsEl.innerHTML = '<button class="phone-btn phone-btn-next">' + nextText + '</button>';
        }

        // Hide hint
        var hintEl = document.getElementById('phone-hint');
        if (hintEl) hintEl.classList.add('hidden');

        phoneUpdateStreak(isCorrect);
      }

      function phoneNext() {
        // Slide flipped card off
        var topCard = phoneDeck.querySelector('.phone-deck-card:first-child');
        if (topCard) topCard.classList.add(phoneLastCorrect ? 'answered-correct' : 'answered-wrong');

        if (phoneBtnsEl) phoneBtnsEl.style.display = 'none';
        phoneCurrentCard++;
        phoneUpdateProgress();

        setTimeout(function() {
          if (phoneCurrentCard >= DEMO_CARDS.length) {
            phoneDeck.innerHTML = '';
            phoneModal.style.display = 'flex';
            var lng = phoneGetLang();
            document.querySelectorAll('#phone-modal [data-ru][data-en]').forEach(function(el) {
              el.textContent = el.dataset[lng] || el.dataset.ru;
            });
          } else {
            phoneBuildDeck();
          }
        }, 400);
      }

      if (phoneDeck) {
        phoneBuildDeck();

        // Event delegation — handles dynamic Fake/Fact/Next buttons
        if (phoneBtnsEl) {
          phoneBtnsEl.addEventListener('click', function(e) {
            var btn = e.target.closest('button');
            if (!btn) return;
            if (btn.classList.contains('phone-btn-next')) phoneNext();
            else if (btn.classList.contains('phone-btn-yes')) phoneAnswer(true);
            else if (btn.classList.contains('phone-btn-no')) phoneAnswer(false);
          });
        }

        // Обновлять карточки при смене языка
        document.querySelectorAll('.lang-btn').forEach(function(btn) {
          btn.addEventListener('click', function() {
            if (!phoneAnswered) phoneBuildDeck();
          });
        });
      }
    });
  </script>
</body>
</html>
