diff --git a/app/page.js b/app/page.js
index 600a796..e31eb6f 100644
--- a/app/page.js
+++ b/app/page.js
@@ -6,21 +6,23 @@ import HeroImage from '@/components/HeroImage';
 import Stats from '@/components/Stats';
 import NowBlock from '@/components/NowBlock';
 import NotesBlock from '@/components/NotesBlock';
+import SeriesGrid from '@/components/SeriesGrid';
 import Reveal from '@/components/Reveal';
-import { listArticles, listTags, getStats, getLive, listNotes } from '@/lib/engine';
+import { listArticles, listTags, getStats, getLive, listNotes, listSeries } from '@/lib/engine';
 import { Sparkles, ArrowRight } from 'lucide-react';
 
 export const dynamic = 'force-dynamic';
 
 export default async function HomePage() {
-  let articles = [], tags = [], stats = null, live = null, notes = [];
+  let articles = [], tags = [], stats = null, live = null, notes = [], series = [];
   try {
-    [articles, tags, stats, live, notes] = await Promise.all([
+    [articles, tags, stats, live, notes, series] = await Promise.all([
       listArticles({ limit: 13 }),
       listTags(),
       getStats(),
       getLive(),
       listNotes({ limit: 6 }),
+      listSeries(),
     ]);
   } catch (err) {
     console.error('Home load failed:', err.message);
@@ -88,6 +90,15 @@ export default async function HomePage() {
         </Reveal>
       )}
 
+      {/* Серии */}
+      {series.length > 0 && (
+        <Reveal>
+          <div className="reveal">
+            <SeriesGrid series={series} />
+          </div>
+        </Reveal>
+      )}
+
       {/* Rest */}
       {rest.length > 0 && (
         <Reveal>
diff --git a/app/series/[slug]/page.js b/app/series/[slug]/page.js
new file mode 100644
index 0000000..e31d5e1
--- /dev/null
+++ b/app/series/[slug]/page.js
@@ -0,0 +1,83 @@
+import { notFound } from 'next/navigation';
+import Link from 'next/link';
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
+import ArticleCard from '@/components/ArticleCard';
+import { getSeries } from '@/lib/engine';
+import { Sparkles, Plug, Zap, Layers, ArrowLeft } from 'lucide-react';
+
+const ICONS = { Sparkles, Plug, Zap, Layers };
+const COLORS = {
+  emerald: { bg: 'rgb(16 185 129 / 0.1)', text: '#10b981' },
+  teal:    { bg: 'rgb(20 184 166 / 0.1)', text: '#14b8a6' },
+  amber:   { bg: 'rgb(245 158 11 / 0.1)', text: '#f59e0b' },
+  indigo:  { bg: 'rgb(99 102 241 / 0.1)', text: '#6366f1' },
+};
+
+export const dynamic = 'force-dynamic';
+
+export async function generateMetadata({ params }) {
+  const { slug } = await params;
+  const s = await getSeries(slug);
+  if (!s) return { title: 'Серия не найдена' };
+  return {
+    title: s.title,
+    description: s.intro,
+  };
+}
+
+export default async function SeriesPage({ params }) {
+  const { slug } = await params;
+  const s = await getSeries(slug);
+  if (!s) notFound();
+  const Icon = ICONS[s.icon] || Layers;
+  const color = COLORS[s.color] || COLORS.emerald;
+
+  return (
+    <>
+      <Header />
+      <main className="pt-8 pb-16">
+        <div className="container-wide mb-8">
+          <Link href="/" className="btn btn-ghost text-sm mb-6 -ml-2">
+            <ArrowLeft className="w-4 h-4" /> Все статьи
+          </Link>
+
+          <div className="flex items-center gap-3 mb-4">
+            <div
+              className="w-12 h-12 sm:w-14 sm:h-14 rounded-xl flex items-center justify-center"
+              style={{ background: color.bg }}
+            >
+              <Icon className="w-6 h-6 sm:w-7 sm:h-7" style={{ color: color.text }} />
+            </div>
+            <div className="text-xs mute uppercase tracking-widest">Серия</div>
+          </div>
+
+          <h1 className="text-3xl sm:text-5xl font-bold ink leading-tight mb-3">
+            {s.title}
+          </h1>
+          {s.intro && (
+            <p className="mute text-base sm:text-lg max-w-2xl leading-relaxed">{s.intro}</p>
+          )}
+          <div className="text-xs mute mt-4">
+            {s.articles?.length || 0} {(s.articles?.length || 0) === 1 ? 'материал' : 'материалов'} в серии
+          </div>
+        </div>
+
+        {s.articles?.length > 0 ? (
+          <div className="container-wide">
+            <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
+              {s.articles.map(a => <ArticleCard key={a.id} article={a} />)}
+            </div>
+          </div>
+        ) : (
+          <div className="container-wide">
+            <div className="article-card p-8 text-center mute">
+              Скоро здесь появятся статьи. Серия только формируется.
+            </div>
+          </div>
+        )}
+      </main>
+      <Footer />
+    </>
+  );
+}
diff --git a/app/sitemap.js b/app/sitemap.js
index 10d7e6b..e4967b8 100644
--- a/app/sitemap.js
+++ b/app/sitemap.js
@@ -1,16 +1,18 @@
-import { listArticles, listTags } from '@/lib/engine';
+import { listArticles, listTags, listSeries } from '@/lib/engine';
 
 const SITE = 'https://zeropost.ru';
 
 export default async function sitemap() {
-  const [articles, tags] = await Promise.all([
+  const [articles, tags, series] = await Promise.all([
     listArticles({ limit: 200 }).catch(() => []),
     listTags().catch(() => []),
+    listSeries().catch(() => []),
   ]);
 
   const staticPages = [
     { url: `${SITE}/`, lastModified: new Date(), changeFrequency: 'daily', priority: 1 },
     { url: `${SITE}/about`, lastModified: new Date(), changeFrequency: 'monthly', priority: 0.5 },
+    { url: `${SITE}/notes`, lastModified: new Date(), changeFrequency: 'daily', priority: 0.6 },
   ];
 
   const articlePages = articles.map(a => ({
@@ -27,5 +29,12 @@ export default async function sitemap() {
     priority: 0.6,
   }));
 
-  return [...staticPages, ...articlePages, ...tagPages];
+  const seriesPages = series.map(s => ({
+    url: `${SITE}/series/${s.slug}`,
+    lastModified: s.updated_at ? new Date(s.updated_at) : new Date(),
+    changeFrequency: 'weekly',
+    priority: 0.7,
+  }));
+
+  return [...staticPages, ...articlePages, ...seriesPages, ...tagPages];
 }
diff --git a/components/SeriesGrid.js b/components/SeriesGrid.js
new file mode 100644
index 0000000..3c7d8fc
--- /dev/null
+++ b/components/SeriesGrid.js
@@ -0,0 +1,59 @@
+import Link from 'next/link';
+import { Sparkles, Plug, Zap, Layers, ArrowRight } from 'lucide-react';
+
+const ICONS = { Sparkles, Plug, Zap, Layers };
+const COLORS = {
+  emerald: { bg: 'rgb(16 185 129 / 0.1)', dot: '#10b981', text: '#059669' },
+  teal:    { bg: 'rgb(20 184 166 / 0.1)', dot: '#14b8a6', text: '#0d9488' },
+  amber:   { bg: 'rgb(245 158 11 / 0.1)', dot: '#f59e0b', text: '#d97706' },
+  indigo:  { bg: 'rgb(99 102 241 / 0.1)', dot: '#6366f1', text: '#4f46e5' },
+};
+
+export default function SeriesGrid({ series }) {
+  if (!series || series.length === 0) return null;
+  return (
+    <section className="container-wide pb-12">
+      <div className="flex items-center justify-between mb-4 sm:mb-5">
+        <h2 className="text-xs sm:text-sm font-medium uppercase tracking-widest mute">
+          Серии
+        </h2>
+      </div>
+      <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5">
+        {series.map(s => {
+          const Icon = ICONS[s.icon] || Layers;
+          const c = COLORS[s.color] || COLORS.emerald;
+          return (
+            <Link
+              key={s.id}
+              href={`/series/${s.slug}`}
+              className="article-card group p-5 sm:p-6 flex flex-col"
+            >
+              <div className="flex items-center gap-3 mb-3">
+                <div
+                  className="w-10 h-10 rounded-lg flex items-center justify-center"
+                  style={{ background: c.bg }}
+                >
+                  <Icon className="w-5 h-5" style={{ color: c.dot }} />
+                </div>
+                <span className="text-xs mute">
+                  {s.articles_count} {s.articles_count === 1 ? 'материал' : 'материалов'}
+                </span>
+              </div>
+              <h3 className="text-lg sm:text-xl font-bold ink mb-2 leading-snug group-hover:accent transition-colors">
+                {s.title}
+              </h3>
+              {s.intro && (
+                <p className="mute text-sm leading-relaxed mb-4 line-clamp-3 flex-1">
+                  {s.intro}
+                </p>
+              )}
+              <div className="inline-flex items-center gap-1 text-sm font-medium" style={{ color: c.text }}>
+                Открыть серию <ArrowRight className="w-3.5 h-3.5" />
+              </div>
+            </Link>
+          );
+        })}
+      </div>
+    </section>
+  );
+}
diff --git a/components/Stats.js b/components/Stats.js
index 4b78a79..59d126a 100644
--- a/components/Stats.js
+++ b/components/Stats.js
@@ -1,6 +1,41 @@
+'use client';
+import { useEffect, useRef, useState } from 'react';
 import { BookOpen, Clock, Brain, Eye } from 'lucide-react';
 
-function StatCard({ icon: Icon, value, label }) {
+function fmt(n) {
+  if (!n) return '0';
+  if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M';
+  if (n >= 1_000) return (n / 1_000).toFixed(1) + 'K';
+  return Math.round(n).toLocaleString('ru-RU');
+}
+
+/** Плавный count-up от 0 до value за ~1.2 секунды */
+function useCountUp(target, run) {
+  const [val, setVal] = useState(0);
+  useEffect(() => {
+    if (!run || !target) { setVal(target || 0); return; }
+    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    if (reduce) { setVal(target); return; }
+    let start = null;
+    const duration = 1200;
+    let raf = 0;
+    const step = (ts) => {
+      if (!start) start = ts;
+      const t = Math.min(1, (ts - start) / duration);
+      // easeOutQuart для приятной кривой
+      const eased = 1 - Math.pow(1 - t, 4);
+      setVal(Math.floor(target * eased));
+      if (t < 1) raf = requestAnimationFrame(step);
+      else setVal(target);
+    };
+    raf = requestAnimationFrame(step);
+    return () => cancelAnimationFrame(raf);
+  }, [target, run]);
+  return val;
+}
+
+function StatCard({ icon: Icon, value, label, run }) {
+  const animated = useCountUp(value || 0, run);
   return (
     <div className="article-card flex items-center gap-3 sm:gap-4 p-4 sm:p-5">
       <div
@@ -10,32 +45,37 @@ function StatCard({ icon: Icon, value, label }) {
         <Icon className="w-4 h-4 sm:w-5 sm:h-5 accent" />
       </div>
       <div className="min-w-0">
-        <div className="text-xl sm:text-2xl font-bold ink leading-none mb-1 tabular-nums">{value}</div>
+        <div className="text-xl sm:text-2xl font-bold ink leading-none mb-1 tabular-nums">{fmt(animated)}</div>
         <div className="text-[10px] sm:text-xs mute uppercase tracking-wider truncate">{label}</div>
       </div>
     </div>
   );
 }
 
-function fmt(n) {
-  if (!n) return '0';
-  if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M';
-  if (n >= 1_000) return (n / 1_000).toFixed(1) + 'K';
-  return n.toLocaleString('ru-RU');
-}
-
 export default function Stats({ data }) {
+  const ref = useRef(null);
+  const [run, setRun] = useState(false);
+
+  useEffect(() => {
+    if (!ref.current) return;
+    const io = new IntersectionObserver((entries) => {
+      if (entries[0].isIntersecting) { setRun(true); io.disconnect(); }
+    }, { threshold: 0.3 });
+    io.observe(ref.current);
+    return () => io.disconnect();
+  }, []);
+
   if (!data) return null;
   return (
-    <section className="container-wide pb-12">
+    <section ref={ref} className="container-wide pb-12">
       <h2 className="text-xs sm:text-sm font-medium uppercase tracking-widest mute mb-4 sm:mb-5">
         Что уже написал ИИ
       </h2>
       <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
-        <StatCard icon={BookOpen} value={fmt(data.articles_count)} label="статей" />
-        <StatCard icon={Clock} value={fmt(data.total_reading_min)} label="мин чтения" />
-        <StatCard icon={Brain} value={fmt(data.tokens_out)} label="токенов" />
-        <StatCard icon={Eye} value={fmt(data.total_views)} label="просмотров" />
+        <StatCard icon={BookOpen} value={data.articles_count} label="статей" run={run} />
+        <StatCard icon={Clock} value={data.total_reading_min} label="мин чтения" run={run} />
+        <StatCard icon={Brain} value={data.tokens_out} label="токенов" run={run} />
+        <StatCard icon={Eye} value={data.total_views} label="просмотров" run={run} />
       </div>
     </section>
   );
diff --git a/lib/engine.js b/lib/engine.js
index f63c2ba..2e27870 100644
--- a/lib/engine.js
+++ b/lib/engine.js
@@ -42,6 +42,16 @@ export async function getLive() {
   catch { return null; }
 }
 
+export async function listSeries() {
+  try { return await call('/api/series', { cache: 'no-store' }); }
+  catch { return []; }
+}
+
+export async function getSeries(slug) {
+  try { return await call(`/api/series/${slug}`, { cache: 'no-store' }); }
+  catch { return null; }
+}
+
 export async function listNotes({ limit = 20 } = {}) {
   try { return await call(`/api/notes?limit=${limit}`, { cache: 'no-store' }); }
   catch { return []; }