diff --git a/app/teknav-en.jsx b/app/teknav-en.jsx
new file mode 100644
index 0000000..4e11898
--- /dev/null
+++ b/app/teknav-en.jsx
@@ -0,0 +1,519 @@
+// teknav-en.jsx — English landing page (mirrors Persian homepage quality)
+import { useState, useEffect, useRef } from 'react';
+import { TeknavData } from './teknav-data.js';
+import { useNav } from './teknav-ui.jsx';
+import { LazyDiagram } from './src/components/lazy-diagram.jsx';
+import { iconNode } from './src/lib/icon.jsx';
+import pencilIcon from './src/assets/icons/pencil.svg';
+
+// ── English copy maps ────────────────────────────────────────────────────────
+const EN_TITLES = {
+  'tekrag-persian-data-centric-rag-benchmark': 'TekRAG-Persian: A Data-Centric Benchmark for Persian Technical RAG',
+  'mcp-model-context-protocol-2026': 'Model Context Protocol in 2026: Architecture, Tools, and Agentic AI',
+  'ai-data-centric-2026': 'Data-Centric AI in 2026: Why Clean Data Beats Bigger Models',
+  'cve-2026-41940-cpanel-zero-day-analysis': 'CVE-2026-41940: Technical Analysis of a cPanel Zero-Day',
+  'agentic-ai-production-2026': 'Agentic AI in Production: Reliability, Tools, and Governance',
+  'llm-security': 'LLM Security: Prompt Injection, RAG Attacks, and Defensive Design',
+  'data-governance-2026': 'Data Governance in 2026: Metadata, Lineage, and AI-Ready Data',
+  'open-source-ai-sovereignty': 'Open-Source AI and Digital Sovereignty',
+  'deepseek-v4-engram': 'DeepSeek-V4 and Efficient Reasoning Architectures',
+  'post-quantum-cryptography-qday': 'Post-Quantum Cryptography and the Road to Q-Day',
+};
+
+const EN_SUMMARIES = {
+  'tekrag-persian-data-centric-rag-benchmark': 'A research-grade benchmark for Persian technical question answering, hallucination evaluation, citation grounding, and data-centric RAG — comparing raw, cleaned, and metadata-enriched corpus variants.',
+  'mcp-model-context-protocol-2026': 'A technical deep-dive into the Model Context Protocol as the emerging standard connecting large language models to tools, resources, prompts, and autonomous agent workflows.',
+  'ai-data-centric-2026': 'A practical examination of why data quality, labeling precision, provenance tracking, and pipeline hygiene matter more as frontier models become increasingly capable.',
+  'cve-2026-41940-cpanel-zero-day-analysis': 'A security-focused breakdown of exploit surface, privilege escalation path, operational impact timeline, patching priorities, and defensive monitoring recommendations.',
+  'agentic-ai-production-2026': 'A field guide to moving AI agents from controlled demos into production systems with proper telemetry, permission scoping, evaluation loops, and failure recovery.',
+  'llm-security': 'Threat models and defensive controls for prompt injection, indirect instruction attacks, insecure tool use, retrieval poisoning, and multi-agent trust boundaries.',
+  'data-governance-2026': 'How metadata management, data lineage, policy enforcement, quality gates, and semantic layers shape dependable AI systems and analytics infrastructure.',
+  'open-source-ai-sovereignty': 'Why open model weights, transparent architectures, and local deployment matter for strategic control over AI infrastructure and long-term technology independence.',
+  'deepseek-v4-engram': 'A close look at memory architecture, mixture-of-experts efficiency, inference cost pressures, and what efficient reasoning architectures reveal about the frontier.',
+  'post-quantum-cryptography-qday': 'A clear explanation of quantum computing risk, NIST standardization, cryptographic migration strategy, and why organizations need post-quantum planning today.',
+};
+
+const EN_CATEGORIES = {
+  ai: { name: 'Artificial Intelligence', desc: 'LLMs, agents, model safety, and AI infrastructure' },
+  data: { name: 'Data Science', desc: 'RAG, data-centric AI, governance, and benchmarks' },
+  security: { name: 'Cybersecurity', desc: 'Vulnerabilities, LLM security, and defense' },
+  hardware: { name: 'Hardware', desc: 'AI chips, semiconductors, and compute strategy' },
+  software: { name: 'Software Engineering', desc: 'Architecture, systems design, and tooling' },
+  startup: { name: 'Startups & Markets', desc: 'Technology markets, product strategy, and venture' },
+  future: { name: 'Future of Technology', desc: 'Long-horizon trends and societal impact' },
+};
+
+function enTitle(article) {
+  return EN_TITLES[article.slug] || article.seoTitle || article.ogTitle || article.title;
+}
+function enSummary(article) {
+  return EN_SUMMARIES[article.slug] || article.ogDescription || article.metaDescription || article.summary || '';
+}
+function enCategory(article) {
+  return EN_CATEGORIES[article.category]?.name || article.categoryName || 'Technology';
+}
+function enAuthor(article) {
+  const a = TeknavData.authors.find((x) => x.id === article.authorId);
+  return a?.nameEn || (a?.slug === 'arsam-sabbagh' ? 'Arsam Sabbagh' : article.authorName);
+}
+
+function publishedArticles() {
+  return TeknavData.articles
+    .filter((a) => a.status !== 'پیش‌نویس' && a.status !== 'در انتظار بررسی')
+    .slice()
+    .sort((a, b) => String(b.dateEn || '').localeCompare(String(a.dateEn || '')));
+}
+
+// ── Animated neural background (same as Persian hero) ───────────────────────
+function HeroBg() {
+  const ref = useRef();
+  useEffect(() => {
+    const canvas = ref.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    let raf, t = 0;
+    const palette = ['rgba(15,107,115,', 'rgba(196,106,77,', 'rgba(47,143,107,'];
+    const nodes = Array.from({ length: 28 }, (_, i) => ({
+      x: Math.random() * canvas.width, y: Math.random() * canvas.height,
+      vx: (Math.random() - 0.5) * 0.32, vy: (Math.random() - 0.5) * 0.32,
+      r: Math.random() * 3 + 1.5,
+      color: palette[i % palette.length],
+      phase: Math.random() * Math.PI * 2,
+    }));
+    const resize = () => { canvas.width = canvas.offsetWidth; canvas.height = canvas.offsetHeight; };
+    resize();
+    window.addEventListener('resize', resize);
+    const draw = () => {
+      t += 0.012;
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      nodes.forEach((n) => {
+        n.x += n.vx; n.y += n.vy;
+        if (n.x < 0 || n.x > canvas.width) n.vx *= -1;
+        if (n.y < 0 || n.y > canvas.height) n.vy *= -1;
+        nodes.forEach((m) => {
+          const d = Math.hypot(n.x - m.x, n.y - m.y);
+          if (d < 120) {
+            ctx.beginPath(); ctx.moveTo(n.x, n.y); ctx.lineTo(m.x, m.y);
+            ctx.strokeStyle = `rgba(15,107,115,${0.15 * (1 - d / 120)})`;
+            ctx.lineWidth = 0.7; ctx.stroke();
+          }
+        });
+        const pulse = 0.45 + 0.18 * Math.sin(t + n.phase);
+        ctx.beginPath(); ctx.arc(n.x, n.y, n.r, 0, Math.PI * 2);
+        ctx.fillStyle = n.color + pulse + ')'; ctx.fill();
+      });
+      raf = requestAnimationFrame(draw);
+    };
+    draw();
+    return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', resize); };
+  }, []);
+  return <canvas ref={ref} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }} />;
+}
+
+// ── CountUp animation ────────────────────────────────────────────────────────
+function CountUp({ to, suffix = '', duration = 1400 }) {
+  const [n, setN] = useState(0);
+  const ref = useRef();
+  const started = useRef(false);
+  useEffect(() => {
+    const obs = new IntersectionObserver(([e]) => {
+      if (e.isIntersecting && !started.current) {
+        started.current = true;
+        const start = performance.now();
+        const tick = (now) => {
+          const p = Math.min((now - start) / duration, 1);
+          setN(Math.round(to * (1 - Math.pow(1 - p, 3))));
+          if (p < 1) requestAnimationFrame(tick);
+        };
+        requestAnimationFrame(tick);
+      }
+    }, { threshold: 0.4 });
+    if (ref.current) obs.observe(ref.current);
+    return () => obs.disconnect();
+  }, [to, duration]);
+  return <span ref={ref}>{n.toLocaleString()}{suffix}</span>;
+}
+
+// ── Article card (English) ───────────────────────────────────────────────────
+function EnArticleCard({ article, delay = 0, featured = false }) {
+  const { navigate } = useNav();
+  const [vis, setVis] = useState(false);
+  const ref = useRef();
+  useEffect(() => {
+    const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) setVis(true); }, { threshold: 0.08 });
+    if (ref.current) obs.observe(ref.current);
+    return () => obs.disconnect();
+  }, []);
+
+  return (
+    <article
+      ref={ref}
+      onClick={() => navigate('/article/' + article.slug)}
+      style={{
+        background: '#fff', borderRadius: featured ? 16 : 12,
+        border: featured ? '1px solid #0F6B7340' : '1px solid #E4DDD2',
+        padding: featured ? 0 : 22, cursor: 'pointer',
+        opacity: vis ? 1 : 0, transform: vis ? 'translateY(0)' : 'translateY(20px)',
+        transition: `opacity 0.45s ${delay}ms, transform 0.45s ${delay}ms, box-shadow 0.2s`,
+        boxShadow: featured ? '0 4px 28px rgba(15,107,115,0.10)' : '0 2px 10px rgba(0,0,0,0.04)',
+        overflow: 'hidden',
+        display: featured ? 'grid' : 'flex',
+        gridTemplateColumns: featured ? '1fr 1fr' : undefined,
+        flexDirection: featured ? undefined : 'column',
+      }}
+      onMouseEnter={(e) => e.currentTarget.style.boxShadow = featured ? '0 10px 40px rgba(15,107,115,0.16)' : '0 6px 24px rgba(0,0,0,0.09)'}
+      onMouseLeave={(e) => e.currentTarget.style.boxShadow = featured ? '0 4px 28px rgba(15,107,115,0.10)' : '0 2px 10px rgba(0,0,0,0.04)'}
+    >
+      {featured ? (
+        <>
+          <div style={{ padding: '32px 32px 28px' }}>
+            <div style={{ display: 'flex', gap: 8, marginBottom: 14, flexWrap: 'wrap' }}>
+              <span style={{ background: '#0F6B7315', color: '#0F6B73', borderRadius: 6, padding: '3px 10px', fontSize: 11, fontWeight: 700 }}>Featured Research</span>
+              <span style={{ background: '#F4EFE6', color: '#A8512E', borderRadius: 6, padding: '3px 10px', fontSize: 11, fontWeight: 700 }}>{enCategory(article)}</span>
+              <span style={{ background: '#F4EFE6', color: '#5F6B6D', borderRadius: 6, padding: '3px 10px', fontSize: 11 }}>{article.readTime} min read</span>
+            </div>
+            <h2 style={{ fontSize: 'clamp(18px,2.4vw,26px)', fontWeight: 800, color: '#0F2A2E', margin: '0 0 14px', lineHeight: 1.4 }}>
+              {enTitle(article)}
+            </h2>
+            <p style={{ fontSize: 14, color: '#4A5A5C', lineHeight: 1.85, margin: '0 0 22px' }}>
+              {enSummary(article).slice(0, 240)}
+            </p>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 12, paddingTop: 16, borderTop: '1px solid #E4DDD2' }}>
+              <div style={{ width: 34, height: 34, borderRadius: '50%', background: '#0F6B7322', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, fontWeight: 700, color: '#0F6B73', flexShrink: 0 }}>
+                {enAuthor(article)?.[0] || 'A'}
+              </div>
+              <div>
+                <div style={{ fontSize: 13, fontWeight: 600, color: '#263238' }}>{enAuthor(article)}</div>
+                <div style={{ fontSize: 11, color: '#5F6B6D' }}>{article.dateEn} · Teknav</div>
+              </div>
+            </div>
+          </div>
+          <div style={{ background: '#F4EFE6', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24, minHeight: 260 }}>
+            <LazyDiagram type={article.diagram} />
+          </div>
+        </>
+      ) : (
+        <>
+          <div style={{ height: 110, background: '#F4EFE6', borderRadius: 8, marginBottom: 16, overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            <div style={{ transform: 'scale(0.68)', transformOrigin: 'center', width: '100%' }}>
+              <LazyDiagram type={article.diagram} compact />
+            </div>
+          </div>
+          <div style={{ display: 'flex', gap: 6, marginBottom: 10, flexWrap: 'wrap' }}>
+            <span style={{ background: '#F4EFE6', color: '#A8512E', borderRadius: 5, padding: '2px 8px', fontSize: 10, fontWeight: 700 }}>{enCategory(article)}</span>
+            <span style={{ background: '#F4EFE6', color: '#5F6B6D', borderRadius: 5, padding: '2px 8px', fontSize: 10 }}>{article.readTime} min</span>
+          </div>
+          <h3 style={{ fontSize: 14, fontWeight: 700, color: '#263238', margin: '0 0 8px', lineHeight: 1.5, flex: 1 }}>
+            {enTitle(article)}
+          </h3>
+          <p style={{ fontSize: 12, color: '#5F6B6D', lineHeight: 1.7, margin: '0 0 14px' }}>
+            {enSummary(article).slice(0, 110)}…
+          </p>
+          <div style={{ fontSize: 11, color: '#8A9A9C', marginTop: 'auto' }}>
+            {enAuthor(article)} · {article.dateEn}
+          </div>
+        </>
+      )}
+    </article>
+  );
+}
+
+// ── Main page ────────────────────────────────────────────────────────────────
+function EnglishHomePage() {
+  const { navigate } = useNav();
+  const articles = publishedArticles();
+  const featured = articles.find((a) => a.slug === 'tekrag-persian-data-centric-rag-benchmark') || articles[0];
+  const grid = articles.filter((a) => a.id !== featured?.id).slice(0, 6);
+  const popularArticles = [...articles].sort((a, b) => (b.views || 0) - (a.views || 0)).slice(0, 3);
+
+  const stats = [
+    { label: 'Articles published', to: 180, suffix: '+', icon: '◉' },
+    { label: 'Active writers', to: 3, suffix: '', icon: pencilIcon },
+    { label: 'Monthly readers', to: 45000, suffix: '+', icon: '◐' },
+    { label: 'Avg. read time', to: 8, suffix: ' min', icon: '◷' },
+  ];
+
+  const categories = TeknavData.categories.map((cat) => ({
+    ...cat,
+    enName: EN_CATEGORIES[cat.id]?.name || cat.name,
+    enDesc: EN_CATEGORIES[cat.id]?.desc || cat.description,
+  }));
+
+  const authors = TeknavData.authors.map((a) => ({
+    ...a,
+    enName: a.nameEn || (a.slug === 'arsam-sabbagh' ? 'Arsam Sabbagh' : a.name),
+    enRole: a.specialtyEn || 'Technology writer and analyst',
+    enBio: a.bioEn || 'Teknav contributor covering technology, strategy, and applied engineering for Persian-speaking readers.',
+  }));
+
+  return (
+    <div dir="ltr" lang="en" style={{ background: '#FAF7F0', minHeight: '100vh', fontFamily: "-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Arial,sans-serif", color: '#132326' }}>
+
+      {/* ── Own sticky header ─────────────────────────────────────────────── */}
+      <header style={{ position: 'sticky', top: 0, zIndex: 50, background: 'rgba(250,247,240,0.94)', backdropFilter: 'blur(14px)', borderBottom: '1px solid #E4DDD2', padding: '0 28px', height: 60, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20 }}>
+        <a onClick={(e) => { e.preventDefault(); navigate('/en'); }} href="/en" style={{ display: 'flex', alignItems: 'baseline', gap: 10, textDecoration: 'none' }}>
+          <span style={{ fontSize: 22, fontWeight: 900, color: '#0F2A2E', letterSpacing: '-0.02em' }}>Teknav</span>
+          <span style={{ fontSize: 10, color: '#C46A4D', fontWeight: 700, letterSpacing: '0.14em' }}>ENGLISH</span>
+        </a>
+        <nav style={{ display: 'flex', alignItems: 'center', gap: 20, flexWrap: 'wrap' }}>
+          <a href="#articles" style={{ color: '#4A5A5C', textDecoration: 'none', fontSize: 13, fontWeight: 500 }}>Articles</a>
+          <a href="#topics" style={{ color: '#4A5A5C', textDecoration: 'none', fontSize: 13, fontWeight: 500 }}>Topics</a>
+          <a href="#authors" style={{ color: '#4A5A5C', textDecoration: 'none', fontSize: 13, fontWeight: 500 }}>Writers</a>
+          <button
+            onClick={() => navigate('/')}
+            style={{ background: 'transparent', border: '1px solid #0F6B73', color: '#0F6B73', borderRadius: 7, padding: '6px 14px', fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}
+          >
+            ← Persian site
+          </button>
+        </nav>
+      </header>
+
+      {/* ── Hero ─────────────────────────────────────────────────────────── */}
+      <div style={{ position: 'relative', background: '#F4F1EC', overflow: 'hidden', minHeight: 520 }}>
+        <div style={{ position: 'absolute', top: '15%', right: '8%', width: 480, height: 480, borderRadius: '50%', background: 'radial-gradient(circle, rgba(15,107,115,0.09) 0%, transparent 70%)', pointerEvents: 'none' }} />
+        <div style={{ position: 'absolute', bottom: '0%', left: '12%', width: 340, height: 340, borderRadius: '50%', background: 'radial-gradient(circle, rgba(196,106,77,0.09) 0%, transparent 70%)', pointerEvents: 'none' }} />
+        <div style={{ position: 'absolute', inset: 0, backgroundImage: 'linear-gradient(rgba(15,42,46,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,42,46,0.035) 1px, transparent 1px)', backgroundSize: '48px 48px', maskImage: 'radial-gradient(circle at 50% 40%, #000 30%, transparent 75%)', WebkitMaskImage: 'radial-gradient(circle at 50% 40%, #000 30%, transparent 75%)', pointerEvents: 'none' }} />
+        <HeroBg />
+        <div style={{ position: 'relative', zIndex: 2, maxWidth: 1240, margin: '0 auto', padding: '80px 28px 72px', display: 'grid', gridTemplateColumns: 'minmax(0,1.3fr) minmax(280px,0.7fr)', gap: 48, alignItems: 'center' }}>
+          <div>
+            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'rgba(15,107,115,0.08)', border: '1px solid rgba(15,107,115,0.22)', color: '#0F6B73', padding: '6px 16px', borderRadius: 999, fontSize: 11, fontWeight: 700, marginBottom: 26, letterSpacing: '0.07em', animation: 'enReveal 0.6s 0.1s both' }}>
+              <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#0F6B73', display: 'inline-block', animation: 'enPulse 2.2s infinite' }} />
+              Deep technology narratives from Iran
+            </div>
+            <h1 style={{ fontSize: 'clamp(36px,5.5vw,62px)', fontWeight: 800, color: '#0F2A2E', margin: '0 0 20px', lineHeight: 1.12, letterSpacing: '-0.02em', animation: 'enReveal 0.7s 0.3s both' }}>
+              Teknav tracks AI, data,<br />security &amp; the future<br />
+              <span style={{ background: 'linear-gradient(90deg, #0F6B73, #D49A2A)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>of technology.</span>
+            </h1>
+            <p style={{ fontSize: 16, color: '#4A5A5C', lineHeight: 1.85, margin: '0 0 32px', maxWidth: 580, animation: 'enReveal 0.7s 0.55s both' }}>
+              Independent editorial research for engineers, founders, and analysts. Persian-first publication — this page gives international readers an English overview of Teknav's analysis and research.
+            </p>
+            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', animation: 'enReveal 0.7s 0.8s both' }}>
+              <button onClick={() => { document.getElementById('articles')?.scrollIntoView({ behavior: 'smooth' }); }} style={{ background: '#0F6B73', color: '#fff', border: 'none', padding: '13px 28px', borderRadius: 9, fontSize: 14, fontWeight: 700, cursor: 'pointer', fontFamily: 'inherit', boxShadow: '0 6px 20px rgba(15,107,115,0.28)', transition: 'all 0.2s' }}
+                onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 10px 26px rgba(15,107,115,0.36)'; }}
+                onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 6px 20px rgba(15,107,115,0.28)'; }}>
+                Browse research →
+              </button>
+              <button onClick={() => navigate('/article/tekrag-persian-data-centric-rag-benchmark')} style={{ background: 'rgba(196,106,77,0.08)', color: '#A8512E', border: '1px solid rgba(196,106,77,0.4)', padding: '13px 26px', borderRadius: 9, fontSize: 14, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', transition: 'all 0.2s' }}
+                onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(196,106,77,0.16)'}
+                onMouseLeave={(e) => e.currentTarget.style.background = 'rgba(196,106,77,0.08)'}>
+                Read TekRAG-Persian
+              </button>
+            </div>
+          </div>
+          {/* Hero card */}
+          {featured && (
+            <div onClick={() => navigate('/article/' + featured.slug)} style={{ background: '#fff', border: '1px solid #E4DDD2', borderRadius: 14, padding: '22px 24px', cursor: 'pointer', boxShadow: '0 12px 38px rgba(15,42,46,0.08)', position: 'relative', overflow: 'hidden', animation: 'enReveal 0.7s 1.05s both', transition: 'box-shadow 0.2s' }}
+              onMouseEnter={(e) => e.currentTarget.style.boxShadow = '0 18px 50px rgba(15,42,46,0.13)'}
+              onMouseLeave={(e) => e.currentTarget.style.boxShadow = '0 12px 38px rgba(15,42,46,0.08)'}>
+              <div style={{ position: 'absolute', top: 0, left: 0, bottom: 0, width: 4, background: 'linear-gradient(180deg,#D49A2A,#C46A4D)' }} />
+              <div style={{ fontSize: 10, color: '#C46A4D', fontWeight: 700, marginBottom: 10, letterSpacing: '0.1em' }}>✦ FEATURED ARTICLE</div>
+              <div style={{ fontSize: 16, fontWeight: 700, color: '#0F2A2E', lineHeight: 1.55, marginBottom: 12, transition: 'color 0.15s' }}>
+                {enTitle(featured)}
+              </div>
+              <div style={{ fontSize: 12, color: '#5F6B6D', display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+                <span style={{ fontWeight: 600, color: '#0F6B73' }}>{enAuthor(featured)}</span>
+                <span style={{ opacity: 0.4 }}>·</span>
+                <span>{featured.readTime} min read</span>
+                <span style={{ opacity: 0.4 }}>·</span>
+                <span>{enCategory(featured)}</span>
+              </div>
+            </div>
+          )}
+        </div>
+        <svg viewBox="0 0 1440 50" preserveAspectRatio="none" style={{ position: 'absolute', bottom: -1, left: 0, width: '100%', height: 42, display: 'block', pointerEvents: 'none' }}>
+          <path d="M0,34 C240,50 480,8 720,25 C960,42 1200,12 1440,28 L1440,50 L0,50 Z" fill="#ebe3d2" />
+        </svg>
+      </div>
+
+      {/* ── Stats bar ─────────────────────────────────────────────────────── */}
+      <div style={{ background: '#ebe3d2', padding: '36px 24px', borderTop: '1px solid rgba(15,42,46,0.06)', borderBottom: '1px solid rgba(15,42,46,0.06)' }}>
+        <div style={{ maxWidth: 1240, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 16 }} className="en-stats-grid">
+          {stats.map((s, i) => (
+            <div key={s.label} style={{ textAlign: 'center', padding: '10px 8px', position: 'relative' }}>
+              <div style={{ fontSize: 13, color: '#0F6B73', marginBottom: 6, opacity: 0.7 }}>{iconNode(s.icon)}</div>
+              <div style={{ fontSize: 28, fontWeight: 900, color: '#A8761B', marginBottom: 4, letterSpacing: '-0.01em' }}>
+                <CountUp to={s.to} suffix={s.suffix} />
+              </div>
+              <div style={{ fontSize: 12, color: '#4A5A5C', fontWeight: 500 }}>{s.label}</div>
+              {i < stats.length - 1 && <div style={{ position: 'absolute', right: 0, top: '20%', height: '60%', width: 1, background: 'rgba(15,42,46,0.08)' }} />}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '0 24px' }}>
+
+        {/* ── Featured article ───────────────────────────────────────────── */}
+        {featured && (
+          <section id="articles" style={{ padding: '64px 0 32px' }}>
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 24, flexWrap: 'wrap', gap: 12 }}>
+              <div>
+                <p style={{ margin: '0 0 4px', color: '#A8512E', fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Featured</p>
+                <h2 style={{ margin: 0, fontSize: 'clamp(20px,2.5vw,28px)', fontWeight: 800, color: '#263238' }}>Latest research</h2>
+              </div>
+            </div>
+            <EnArticleCard article={featured} featured />
+          </section>
+        )}
+
+        {/* ── Article grid ───────────────────────────────────────────────── */}
+        <section style={{ padding: '20px 0 48px' }}>
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 24, flexWrap: 'wrap', gap: 12 }}>
+            <div>
+              <p style={{ margin: '0 0 4px', color: '#A8512E', fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Analysis</p>
+              <h2 style={{ margin: 0, fontSize: 'clamp(20px,2.5vw,28px)', fontWeight: 800, color: '#263238' }}>Recent articles</h2>
+            </div>
+            <button onClick={() => navigate('/articles')} style={{ background: 'none', border: '1px solid #E4DDD2', color: '#0F6B73', padding: '8px 18px', borderRadius: 8, fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}>
+              All articles →
+            </button>
+          </div>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0,1fr))', gap: 18 }} className="en-article-grid">
+            {grid.map((a, i) => <EnArticleCard key={a.id} article={a} delay={i * 70} />)}
+          </div>
+        </section>
+
+        {/* ── Most read ─────────────────────────────────────────────────── */}
+        <section style={{ padding: '0 0 48px' }}>
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 24, flexWrap: 'wrap', gap: 12 }}>
+            <div>
+              <p style={{ margin: '0 0 4px', color: '#A8512E', fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Popular</p>
+              <h2 style={{ margin: 0, fontSize: 'clamp(20px,2.5vw,28px)', fontWeight: 800, color: '#263238' }}>Most read</h2>
+            </div>
+          </div>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+            {popularArticles.map((a, i) => (
+              <div key={a.id} onClick={() => navigate('/article/' + a.slug)} style={{ display: 'flex', gap: 20, padding: '18px 0', borderBottom: '1px solid #E4DDD2', cursor: 'pointer', alignItems: 'flex-start', transition: 'background 0.15s', borderRadius: 4 }}
+                onMouseEnter={(e) => e.currentTarget.style.background = '#F4EFE630'}
+                onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
+                <div style={{ fontSize: 32, fontWeight: 900, color: '#E4DDD2', minWidth: 40, lineHeight: 1, fontVariantNumeric: 'tabular-nums' }}>0{i + 1}</div>
+                <div style={{ flex: 1 }}>
+                  <div style={{ display: 'flex', gap: 6, marginBottom: 6, flexWrap: 'wrap' }}>
+                    <span style={{ background: '#F4EFE6', color: '#A8512E', borderRadius: 5, padding: '2px 8px', fontSize: 10, fontWeight: 700 }}>{enCategory(a)}</span>
+                    <span style={{ background: '#F4EFE6', color: '#5F6B6D', borderRadius: 5, padding: '2px 8px', fontSize: 10 }}>{a.readTime} min</span>
+                  </div>
+                  <h3 style={{ fontSize: 15, fontWeight: 700, color: '#263238', margin: '0 0 6px', lineHeight: 1.45 }}>{enTitle(a)}</h3>
+                  <div style={{ fontSize: 11, color: '#8A9A9C' }}>{enAuthor(a)} · {(a.views || 0).toLocaleString()} views</div>
+                </div>
+                <div style={{ width: 72, height: 72, background: '#F4EFE6', borderRadius: 8, overflow: 'hidden', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                  <div style={{ transform: 'scale(0.52)', transformOrigin: 'center' }}>
+                    <LazyDiagram type={a.diagram} compact />
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        {/* ── Categories ────────────────────────────────────────────────── */}
+        <section id="topics" style={{ padding: '0 0 48px' }}>
+          <div style={{ marginBottom: 24 }}>
+            <p style={{ margin: '0 0 4px', color: '#A8512E', fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Site map</p>
+            <h2 style={{ margin: 0, fontSize: 'clamp(20px,2.5vw,28px)', fontWeight: 800, color: '#263238' }}>Topics we cover</h2>
+          </div>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px,1fr))', gap: 12 }} className="en-cat-grid">
+            {categories.map((cat) => (
+              <div key={cat.id} onClick={() => navigate('/category/' + cat.slug)} style={{ background: '#fff', border: `1px solid ${cat.color}30`, borderLeft: `3px solid ${cat.color}`, borderRadius: 10, padding: '18px 16px', cursor: 'pointer', transition: 'all 0.2s' }}
+                onMouseEnter={(e) => e.currentTarget.style.background = cat.color + '0A'}
+                onMouseLeave={(e) => e.currentTarget.style.background = '#fff'}>
+                <div style={{ fontSize: 14, fontWeight: 700, color: '#263238', marginBottom: 5 }}>{cat.enName}</div>
+                <div style={{ fontSize: 11, color: '#5F6B6D', marginBottom: 10, lineHeight: 1.5 }}>{cat.enDesc}</div>
+                <div style={{ fontSize: 11, color: cat.color, fontWeight: 600 }}>{cat.articleCount} articles →</div>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        {/* ── Authors ───────────────────────────────────────────────────── */}
+        <section id="authors" style={{ padding: '0 0 48px' }}>
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 24, flexWrap: 'wrap', gap: 12 }}>
+            <div>
+              <p style={{ margin: '0 0 4px', color: '#A8512E', fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Team</p>
+              <h2 style={{ margin: 0, fontSize: 'clamp(20px,2.5vw,28px)', fontWeight: 800, color: '#263238' }}>Writers &amp; analysts</h2>
+            </div>
+            <button onClick={() => navigate('/authors')} style={{ background: 'none', border: '1px solid #E4DDD2', color: '#0F6B73', padding: '8px 18px', borderRadius: 8, fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}>
+              All writers →
+            </button>
+          </div>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(260px,1fr))', gap: 16 }}>
+            {authors.map((a) => (
+              <div key={a.id} onClick={() => navigate(a.username ? `/profile/@${a.username}` : `/author/${a.slug}`)} style={{ background: '#fff', border: '1px solid #E4DDD2', borderRadius: 12, padding: '22px', cursor: 'pointer', transition: 'all 0.2s' }}
+                onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = '0 8px 24px rgba(0,0,0,0.07)'; }}
+                onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 14 }}>
+                  <div style={{ width: 48, height: 48, borderRadius: '50%', background: '#0F6B7322', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20, fontWeight: 700, color: '#0F6B73', flexShrink: 0 }}>
+                    {a.enName?.[0] || 'A'}
+                  </div>
+                  <div>
+                    <div style={{ fontSize: 15, fontWeight: 700, color: '#263238', marginBottom: 2 }}>{a.enName}</div>
+                    <div style={{ fontSize: 11, color: '#0F6B73', fontWeight: 600 }}>{a.enRole}</div>
+                  </div>
+                </div>
+                <p style={{ fontSize: 12, color: '#5F6B6D', lineHeight: 1.75, margin: '0 0 12px' }}>
+                  {a.enBio?.slice(0, 160)}…
+                </p>
+                <div style={{ fontSize: 11, color: '#8A9A9C' }}>{a.articleCount} articles published</div>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        {/* ── Newsletter CTA ─────────────────────────────────────────────── */}
+        <section style={{ padding: '0 0 72px' }}>
+          <div style={{ background: '#ebe3d2', borderRadius: 18, padding: '52px 40px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 32, flexWrap: 'wrap', position: 'relative', overflow: 'hidden', border: '1px solid rgba(15,42,46,0.06)' }}>
+            <div style={{ position: 'absolute', top: -60, right: -60, width: 240, height: 240, borderRadius: '50%', background: 'radial-gradient(circle, rgba(15,107,115,0.10) 0%, transparent 70%)', pointerEvents: 'none' }} />
+            <div style={{ position: 'relative' }}>
+              <div style={{ fontSize: 11, color: '#A8512E', fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 10 }}>Newsletter</div>
+              <h2 style={{ fontSize: 'clamp(20px,2.5vw,30px)', fontWeight: 800, color: '#0F2A2E', margin: '0 0 10px', lineHeight: 1.3 }}>Weekly technology signals from Teknav</h2>
+              <p style={{ color: '#4A5A5C', lineHeight: 1.8, maxWidth: 520, margin: 0, fontSize: 14 }}>
+                The Persian newsletter covers AI, cybersecurity, software, hardware, startups, and data — published weekly for Iranian engineering teams.
+              </p>
+            </div>
+            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', flexShrink: 0 }}>
+              <button onClick={() => navigate('/newsletter')} style={{ background: '#0F6B73', color: '#fff', border: 'none', padding: '13px 26px', borderRadius: 9, fontSize: 14, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', transition: 'all 0.2s' }}
+                onMouseEnter={(e) => e.currentTarget.style.background = '#0d5c63'}
+                onMouseLeave={(e) => e.currentTarget.style.background = '#0F6B73'}>
+                Open archive →
+              </button>
+            </div>
+          </div>
+        </section>
+      </div>
+
+      {/* ── Footer ───────────────────────────────────────────────────────── */}
+      <footer style={{ background: '#0F2A2E', color: '#C8D4D5', padding: '40px 28px', marginTop: 'auto' }}>
+        <div style={{ maxWidth: 1240, margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap' }}>
+          <div>
+            <div style={{ fontSize: 22, fontWeight: 900, color: '#FAF7F0', marginBottom: 4 }}>Teknav</div>
+            <div style={{ fontSize: 12, color: '#7A9A9C' }}>Deep technology narratives from Iran's Persian-language tech media.</div>
+          </div>
+          <nav style={{ display: 'flex', gap: 18, flexWrap: 'wrap' }}>
+            {[['English Home', '/en'], ['All Articles', '/articles'], ['Authors', '/authors'], ['Newsletter', '/newsletter']].map(([label, path]) => (
+              <button key={path} onClick={() => navigate(path)} style={{ background: 'none', border: 'none', color: '#A8C0C2', fontSize: 13, cursor: 'pointer', fontFamily: 'inherit', padding: 0, transition: 'color 0.15s' }}
+                onMouseEnter={(e) => e.currentTarget.style.color = '#FAF7F0'}
+                onMouseLeave={(e) => e.currentTarget.style.color = '#A8C0C2'}>
+                {label}
+              </button>
+            ))}
+          </nav>
+          <div style={{ fontSize: 12, color: '#4A6A6C' }}>© 2025 Teknav · teknav.ir</div>
+        </div>
+      </footer>
+
+      <style>{`
+        @keyframes enReveal { from { opacity:0; filter:blur(5px); transform:translateY(16px); } to { opacity:1; filter:blur(0); transform:translateY(0); } }
+        @keyframes enPulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:0.5;transform:scale(1.4);} }
+        @media (max-width: 900px) {
+          .en-stats-grid { grid-template-columns: repeat(2,1fr) !important; }
+          .en-article-grid { grid-template-columns: 1fr 1fr !important; }
+        }
+        @media (max-width: 620px) {
+          .en-article-grid { grid-template-columns: 1fr !important; }
+          .en-cat-grid { grid-template-columns: 1fr 1fr !important; }
+          .en-stats-grid { grid-template-columns: 1fr 1fr !important; }
+        }
+      `}</style>
+    </div>
+  );
+}
+
+export { EnglishHomePage };