@work-graph/cli 0.2.7 → 0.2.9

package/vendor/src/publicSiteServer.mjs

@@ -8,16 +8,26 @@ import {
   buildLlmsTxt,
   buildMcpDiscovery,
   getLocalizedFaq,
+  getPublicSiteCompetitors,
   getPublicSiteCopy,
   getPublicSitePage,
   renderBvcExample,
   renderPublicDocMarkdown,
 } from './publicSiteContent.mjs';
+import {
+  localeFromPathname,
+  renderPublicSiteBootstrapScript,
+  renderPublicSiteControlsScript,
+  stripLocalePathPrefix,
+  withLocalePath,
+} from './publicSitePreferences.mjs';
 import { renderUiBadge, UI_BADGE_CSS } from './ui/atoms/badge.mjs';
 import { renderUiButton, UI_BUTTON_CSS } from './ui/atoms/button.mjs';
+import { highlightBvcBlock, highlightMcpFlow } from './codeSyntaxHighlight.mjs';
 import { renderInlineIcon, renderThemeIcon } from './ui/iconAssets.mjs';
 
 const PUBLIC_SITE_SCHEMA = 'workgraph.public-site.v1';
+const PUBLIC_SITE_GITHUB_URL = 'https://github.com/bvc-lang/work-graph';
 
 function escapeHtml(value) {
   return String(value ?? '')
@@ -39,7 +49,23 @@ function normalizeTheme(value) {
 }
 
 function publicSiteJsonLd(page) {
-  if (page.kind === 'faq') return buildFaqJsonLd(page.locale);
+  if (page.kind === 'home') {
+    const faqLd = buildFaqJsonLd(page.locale);
+    return {
+      '@context': 'https://schema.org',
+      '@graph': [
+        {
+          '@type': 'SoftwareApplication',
+          name: page.title,
+          description: page.description,
+          applicationCategory: 'DeveloperApplication',
+          softwareHelp: '/docs',
+          codeRepository: 'local-git-workspace',
+        },
+        { '@type': faqLd['@type'], mainEntity: faqLd.mainEntity },
+      ],
+    };
+  }
   return {
     '@context': 'https://schema.org',
     '@type': page.kind === 'doc' ? 'TechArticle' : 'SoftwareApplication',
@@ -51,73 +77,195 @@ function publicSiteJsonLd(page) {
   };
 }
 
-function withLangAndTheme(href, locale, theme) {
-  if (href.startsWith('#') || href.endsWith('.txt') || href.includes('.well-known')) return href;
-  const separator = href.includes('?') ? '&' : '?';
-  return `${href}${separator}lang=${locale}&theme=${theme}`;
-}
-
 function icon(name, size = 18) {
   return renderInlineIcon(`${name}-bold.svg`, { className: 'site-icon', size });
 }
 
-function renderThemeLocaleControls(locale, theme) {
+const STEP_NUMBER_ICON_NAMES = [
+  'number-one',
+  'number-two',
+  'number-three',
+  'number-four',
+  'number-five',
+  'number-six',
+];
+
+function renderStepNumberIcon(index) {
+  const name = STEP_NUMBER_ICON_NAMES[index] ?? 'number-one';
+  return renderInlineIcon(`${name}-fill.svg`, { className: 'step-number-icon-svg', size: 32 }, 'fill');
+}
+
+function featureIcon(name) {
+  return renderInlineIcon(`${name}-fill.svg`, { className: 'feature-column-icon-svg', size: 40 }, 'fill');
+}
+
+function comparisonStripIcon(name) {
+  return renderInlineIcon(`${name}-fill.svg`, { className: 'comparison-strip-icon-svg', size: 40 }, 'fill');
+}
+
+function workflowPipelineIcon(name) {
+  return renderInlineIcon(`${name}-fill.svg`, { className: 'workflow-pipeline-icon-svg', size: 32 }, 'fill');
+}
+
+function renderFeatureColumns({ title, items }) {
+  return `<section class="feature-columns-section">
+    <h2 class="feature-columns-heading">${escapeHtml(title)}</h2>
+    <div class="feature-columns">${items.map(({ iconName, heading, body }) => `<article class="feature-column">
+      <span class="feature-column-icon" aria-hidden="true">${featureIcon(iconName)}</span>
+      <h3>${escapeHtml(heading)}</h3>
+      <p>${escapeHtml(body)}</p>
+    </article>`).join('')}</div>
+  </section>`;
+}
+
+function renderIconLabelGridIcon() {
+  return renderInlineIcon('check-bold.svg', { className: 'icon-label-grid-icon-svg', size: 22 }, 'bold');
+}
+
+/** Full-viewport background band; content stays in __inner max-width column. */
+function wrapSiteSectionBand(content, { tone = 'muted', innerClass = '' } = {}) {
+  const innerAttr = innerClass ? ` ${innerClass}` : '';
+  return `<div class="site-section-band site-section-band--${tone}">
+    <div class="site-section-band__inner${innerAttr}">${content}</div>
+  </div>`;
+}
+
+function renderIconLabelGrid({ title, body, items }) {
+  return `<section class="icon-label-grid-section">
+    <div class="icon-label-grid-heading">
+      <h2>${escapeHtml(title)}</h2>
+      ${body ? `<p>${escapeHtml(body)}</p>` : ''}
+    </div>
+    <div class="icon-label-grid">${items.map((label) => `<div class="icon-label-grid-item">
+      <span class="icon-label-grid-icon" aria-hidden="true"><span class="icon-label-grid-icon-box">${renderIconLabelGridIcon()}</span></span>
+      <span class="icon-label-grid-label">${escapeHtml(label)}</span>
+    </div>`).join('')}</div>
+  </section>`;
+}
+
+function renderThemeToggleIcons() {
+  const moon = renderThemeIcon('moon', { className: 'site-icon theme-icon theme-icon-moon', size: 18 });
+  const sun = renderThemeIcon('sun', { className: 'site-icon theme-icon theme-icon-sun', size: 18 });
+  return `<span class="theme-toggle-icons" aria-hidden="true">${moon}${sun}</span>`;
+}
+
+function renderNavToggle(locale) {
   const copy = getPublicSiteCopy(locale);
-  const nextTheme = theme === 'dark' ? 'light' : 'dark';
-  const localeLinks = PUBLIC_SITE_LOCALES.map((candidate) => (
-    `<a class="locale-link${candidate === locale ? ' is-active' : ''}" href="?lang=${candidate}&theme=${theme}" hreflang="${candidate}" data-locale-value="${candidate}">${candidate.toUpperCase()}</a>`
-  )).join('');
-  return `<div class="site-controls" aria-label="${escapeAttr(copy.localeLabel)}">
-    <a class="theme-toggle wg-btn wg-btn--secondary wg-btn--sm" href="?lang=${locale}&theme=${nextTheme}" data-theme-toggle data-theme-value="${nextTheme}">${renderThemeIcon(nextTheme === 'dark' ? 'moon' : 'sun')} ${escapeHtml(copy.theme[nextTheme])}</a>
-    <span class="locale-links">${localeLinks}</span>
+  return `<button type="button" class="site-nav-toggle site-control-btn" data-nav-toggle aria-controls="site-nav" aria-expanded="false" aria-label="${escapeAttr(copy.nav.menuOpen)}" data-label-open="${escapeAttr(copy.nav.menuOpen)}" data-label-close="${escapeAttr(copy.nav.menuClose)}"><span class="site-nav-toggle-bars" aria-hidden="true"></span></button>`;
+}
+
+function renderHeaderGithubButton(locale) {
+  const label = locale === 'ru' ? 'GitHub репозиторий Work Graph' : 'Work Graph on GitHub';
+  const icon = renderInlineIcon('github-logo-fill.svg', { className: 'site-github-icon-svg', size: 20 }, 'fill');
+  return `<a class="site-control-btn site-github-btn" href="${escapeAttr(PUBLIC_SITE_GITHUB_URL)}" target="_blank" rel="noopener noreferrer" aria-label="${escapeAttr(label)}">${icon}</a>`;
+}
+
+function renderThemeLocaleControls(locale, theme) {
+  const localeLabel = locale === 'ru' ? 'En' : 'Ru';
+  const themeAriaDark = locale === 'ru' ? 'Тёмная тема' : 'Dark theme';
+  const themeAriaLight = locale === 'ru' ? 'Светлая тема' : 'Light theme';
+  const localeAria = locale === 'ru' ? 'English' : 'Русский';
+  return `<div class="site-controls" aria-label="${escapeAttr(getPublicSiteCopy(locale).localeLabel)}">
+    <button type="button" class="site-control-btn theme-toggle" data-theme-toggle data-label-dark="${escapeAttr(themeAriaDark)}" data-label-light="${escapeAttr(themeAriaLight)}" aria-label="${escapeAttr(theme === 'dark' ? themeAriaLight : themeAriaDark)}">${renderThemeToggleIcons()}</button>
+    <button type="button" class="site-control-btn locale-toggle" data-locale-toggle aria-label="${escapeAttr(localeAria)}">${escapeHtml(localeLabel)}</button>
   </div>`;
 }
 
-function renderNav(locale, theme) {
+function renderSiteBrand(locale) {
+  const home = withLocalePath('/', locale);
+  const label = 'Work Graph';
+  return `<a class="site-brand" href="${escapeAttr(home)}" aria-label="${escapeAttr(label)}">
+    <img class="site-brand-logo" src="/assets/workgraph-logo.svg" width="188" height="24" alt="${escapeAttr(label)}" decoding="async">
+    <img class="site-brand-emblem" src="/assets/workgraph-emblem.svg" width="41" height="24" alt="" aria-hidden="true" decoding="async">
+  </a>`;
+}
+
+function isNavLinkActive(href, activeRoute) {
+  if (href === '/') return activeRoute === '/';
+  if (href === '/docs') return activeRoute === '/docs' || activeRoute.startsWith('/docs/');
+  return activeRoute === href;
+}
+
+function renderNav(locale, activeRoute = '/') {
   const copy = getPublicSiteCopy(locale);
   const links = [
-    ['/', 'Work Graph'],
     ['/product', copy.nav.product],
     ['/evidence-ledger', copy.nav.evidence],
     ['/compare', copy.nav.compare],
-    ['/faq', 'FAQ'],
     ['/docs', copy.nav.docs],
   ];
-  return `<nav class="site-nav" aria-label="Work Graph public navigation">
-    ${links.map(([href, label]) => `<a href="${withLangAndTheme(href, locale, theme)}">${escapeHtml(label)}</a>`).join('')}
+  return `<nav class="site-nav" id="site-nav" aria-label="Work Graph public navigation">
+    ${links.map(([href, label]) => {
+      const active = isNavLinkActive(href, activeRoute);
+      const current = active ? ' aria-current="page"' : '';
+      return `<a href="${withLocalePath(href, locale)}"${current}>${escapeHtml(label)}</a>`;
+    }).join('')}
   </nav>`;
 }
 
+const SCREENSHOT_KEY_INDEX = {
+  analytics: 0,
+  tasks: 1,
+  board: 2,
+  verification: 3,
+  memory: 4,
+  architecture: 5,
+};
+
 const SCREENSHOTS = [
-  {
-    src: '/assets/img/work-graph-kanban-board-light.png',
-    title: { en: 'Kanban board', ru: 'Доска задач' },
-    body: { en: 'Local backlog columns with BVC work items and agent ownership.', ru: 'Локальная доска с BVC-задачами и владельцами.' },
-  },
   {
     src: '/assets/img/work-graph-analytics-list.png',
-    title: { en: 'Analytics list', ru: 'Аналитика' },
-    body: { en: 'Decision and research records connected to implementation work.', ru: 'Решения и исследования, связанные с задачами реализации.' },
+    title: { en: 'Analytics', ru: 'Аналитика' },
+    headline: { en: 'Analytics links decisions to delivery work', ru: 'Аналитика связывает решения с задачами реализации' },
+    body: {
+      en: 'AN records capture reasoning, options and boundaries before work enters the backlog. Lineage, epic links and implementation ties stay in the intent graph inside git — not in a separate doc or chat summary.',
+      ru: 'AN-записи фиксируют аргументацию, варианты и границы до появления work items. Видны lineage, связи с эпиками и реализацией — не отдельный документ, а часть графа намерений в репозитории.',
+    },
   },
   {
     src: '/assets/img/work-graph-task-drawer.png',
-    title: { en: 'Task contract drawer', ru: 'Контракт задачи' },
-    body: { en: 'Basis, Vector, Goal, analysis, decisions and evidence in one drawer.', ru: 'Базис, Вектор, Цель, анализ, решения и evidence в одной панели.' },
+    title: { en: 'Tasks', ru: 'Задачи' },
+    headline: { en: 'A task is a machine-readable BVC contract', ru: 'Задача — машиночитаемый BVC-контракт, а не тикет из чата' },
+    body: {
+      en: 'The drawer shows Basis, Vector, Goal, analysis, decisions, checks and evidence in one place. Agents read projection via get_work_contract and know which files, commands and gates are required before done.',
+      ru: 'В панели задачи: Базис, Вектор, Цель, анализ, решения, проверки и evidence. Агент читает projection через get_work_contract и знает, какие файлы, команды и гейты обязательны до закрытия.',
+    },
+  },
+  {
+    src: '/assets/img/work-graph-kanban-board-light.png',
+    title: { en: 'Kanban board', ru: 'Доска задач' },
+    headline: { en: 'The board shows how work is moving', ru: 'Доска показывает, как движется работа' },
+    body: {
+      en: 'Columns from backlog through ready, doing and done with BVC work items and owners. Status follows contract and evidence — not an arbitrary label someone typed in a thread.',
+      ru: 'Колонки от backlog до ready, doing и done с BVC-задачами и владельцами. Статус — следствие контракта и evidence, а не произвольная метка в переписке.',
+    },
   },
   {
     src: '/assets/img/work-graph-verification-matrix.png',
-    title: { en: 'Verification matrix', ru: 'Матрица проверок' },
-    body: { en: 'Deterministic, optional and environment-dependent gates before done.', ru: 'Детерминированные, опциональные и environment-гейты перед done.' },
+    title: { en: 'Verification', ru: 'Проверки' },
+    headline: { en: 'Verification decides when a task can close', ru: 'Проверки решают, можно ли закрыть задачу' },
+    body: {
+      en: 'Tier A/B/C matrix: deterministic commands, optional checks and environment gates. assert_task_ready_for_done returns violations[] — a contract verdict, not agent prose.',
+      ru: 'Матрица tier A/B/C: детерминированные команды, опциональные проверки и environment-гейты. assert_task_ready_for_done возвращает violations[] — вердикт контракта, а не слова агента.',
+    },
   },
   {
-    src: '/assets/img/work-graph-architecture-drawer.png',
-    title: { en: 'Architecture drawer', ru: 'Архитектура' },
-    body: { en: 'Architecture blocks and derived projections for project navigation.', ru: 'Архитектурные блоки и производные проекции для навигации.' },
+    src: '/assets/img/work-graph-memory-list.png',
+    title: { en: 'Project memory', ru: 'Память проекта' },
+    headline: { en: 'Project memory keeps verified outcomes', ru: 'Память проекта хранит проверенные результаты' },
+    body: {
+      en: 'Closed tasks with valid evidence become memory records linked to work.id and files. The next session pulls context from git, not from a recap of what the model said last time.',
+      ru: 'Закрытые задачи с валидным evidence становятся записями памяти со ссылками на work.id и файлы. Следующая сессия опирается на git, а не на пересказ прошлого чата.',
+    },
   },
   {
-    src: '/assets/img/work-graph-kanban-board-dark.png',
-    title: { en: 'Dark mode', ru: 'Тёмная тема' },
-    body: { en: 'The same local board in dark mode.', ru: 'Та же локальная доска в тёмной теме.' },
+    src: '/assets/img/work-graph-architecture-drawer.png',
+    title: { en: 'Architecture', ru: 'Архитектура' },
+    headline: { en: 'Architecture orients you in a large repo', ru: 'Архитектура помогает ориентироваться в большом репозитории' },
+    body: {
+      en: 'Blocks from architecture/main.bvc and derived projections map domains and containers without breaking away from the intent graph and backlog you execute against.',
+      ru: 'Блоки architecture/main.bvc и производные проекции показывают домены и контейнеры без отрыва от intent-графа и бэклога, по которому идёт работа.',
+    },
   },
 ];
 
@@ -133,7 +281,7 @@ function renderSection(section, copy) {
     ? `<ul class="doc-list">${section.docs.map((doc) => `<li><a href="/docs/${escapeAttr(doc.slug)}">${escapeHtml(doc.title)}</a><p>${escapeHtml(doc.description)}</p></li>`).join('')}</ul>`
     : '';
   const competitors = section.competitors
-    ? `<table><thead><tr><th>${escapeHtml(copy.labels.tableCompetitor)}</th><th>${escapeHtml(copy.labels.tableLayer)}</th><th>${escapeHtml(copy.labels.tableEvidence)}</th><th>${escapeHtml(copy.labels.tableStance)}</th></tr></thead><tbody>${section.competitors.map((row) => `<tr>${row.map((cell) => `<td>${escapeHtml(cell)}</td>`).join('')}</tr>`).join('')}</tbody></table>`
+    ? `<div class="table-scroll" tabindex="0"><table><thead><tr><th>${escapeHtml(copy.labels.tableCompetitor)}</th><th>${escapeHtml(copy.labels.tableLayer)}</th><th>${escapeHtml(copy.labels.tableEvidence)}</th><th>${escapeHtml(copy.labels.tableStance)}</th></tr></thead><tbody>${section.competitors.map((row) => `<tr>${row.map((cell) => `<td>${escapeHtml(cell)}</td>`).join('')}</tr>`).join('')}</tbody></table></div>`
     : '';
   const badges = section.badges
     ? `<div class="badge-row">${section.badges.map((badge) => renderUiBadge(badge)).join('')}</div>`
@@ -147,142 +295,196 @@ function renderSection(section, copy) {
   </section>`;
 }
 
-function renderHeroVisual(locale) {
+function renderHeroVisual(locale, theme) {
+  const lightSrc = '/assets/img/work-graph-kanban-board-light.png';
+  const darkSrc = '/assets/img/work-graph-kanban-board-dark.png';
+  const src = theme === 'dark' ? darkSrc : lightSrc;
   return `<figure class="template-visual screenshot-hero" aria-label="Work Graph board preview">
-    <img src="/assets/img/work-graph-kanban-board-light.png" alt="${escapeAttr(locale === 'ru' ? 'Доска Work Graph' : 'Work Graph kanban board')}" loading="eager" decoding="async">
+    <img src="${escapeAttr(src)}" data-hero-screenshot data-light-src="${escapeAttr(lightSrc)}" data-dark-src="${escapeAttr(darkSrc)}" alt="${escapeAttr(locale === 'ru' ? 'Доска Work Graph' : 'Work Graph kanban board')}" loading="eager" decoding="async">
     <figcaption>${escapeHtml(locale === 'ru' ? 'Локальная доска Work Graph: backlog, ready, in progress and done.' : 'Local Work Graph board: backlog, ready, in progress and done.')}</figcaption>
   </figure>`;
 }
 
-function renderScreenshotGallery(locale) {
-  return `<section class="screenshot-gallery" aria-label="${escapeAttr(locale === 'ru' ? 'Скриншоты Work Graph' : 'Work Graph screenshots')}">
-    <div class="wide-heading">
-      <p class="eyebrow">${escapeHtml(locale === 'ru' ? 'Интерфейс' : 'Interface')}</p>
-      <h2>${escapeHtml(locale === 'ru' ? 'Как выглядит Work Graph' : 'What Work Graph looks like')}</h2>
-      <p>${escapeHtml(locale === 'ru' ? 'Реальные экраны локального UI: доска, аналитика, контракты задач, проверки и архитектура.' : 'Real local UI screens: board, analytics, task contracts, verification and architecture.')}</p>
-    </div>
-    <div class="screenshot-grid">
-      ${SCREENSHOTS.map((shot) => `<figure class="screenshot-card">
-        <img src="${escapeAttr(shot.src)}" alt="${escapeAttr(screenshotText(shot.title, locale))}" loading="lazy" decoding="async">
-        <figcaption>
-          <strong>${escapeHtml(screenshotText(shot.title, locale))}</strong>
-          <span>${escapeHtml(screenshotText(shot.body, locale))}</span>
-        </figcaption>
-      </figure>`).join('')}
-    </div>
-  </section>`;
+function resolveScreenshotList(shotKeys) {
+  if (!shotKeys?.length) return SCREENSHOTS;
+  return shotKeys
+    .map((key) => SCREENSHOTS[SCREENSHOT_KEY_INDEX[key]])
+    .filter(Boolean);
 }
 
-function renderTemplateAside(copy, locale, theme) {
-  const title = locale === 'ru' ? 'Шаблон доказуемой разработки' : 'Evidence-led development template';
-  const meta = locale === 'ru'
-    ? ['Локально в git', 'BVC-контракты', 'MCP-ready', 'Без БД']
-    : ['Local git', 'BVC contracts', 'MCP-ready', 'No database'];
-  return `<aside class="template-aside" aria-label="${escapeAttr(title)}">
-    <div class="aside-card">
-      <div class="aside-icon">${icon('kanban', 22)}</div>
-      <h2>${escapeHtml(title)}</h2>
-      <p>${escapeHtml(copy.hero.body)}</p>
-      ${renderUiButton({ href: '#install', label: copy.hero.primary, variant: 'primary', size: 'sm' })}
-      <dl>${meta.map((entry) => `<div><dt>${escapeHtml(entry)}</dt><dd>${renderUiBadge({ label: 'WG', tone: 'accent' })}</dd></div>`).join('')}</dl>
+function renderScreenshotGallery(locale, options = {}) {
+  const shots = resolveScreenshotList(options.shotKeys);
+  const tablistLabel = locale === 'ru' ? 'Экраны Work Graph' : 'Work Graph screens';
+  const tabs = shots.map((shot, index) => {
+    const id = `screenshot-${index}`;
+    const label = screenshotText(shot.title, locale);
+    const active = index === 0;
+    return `<button type="button" class="screenshot-tab${active ? ' is-active' : ''}" role="tab" id="${id}-tab" data-screenshot-tab="${id}" aria-selected="${active ? 'true' : 'false'}" aria-controls="${id}-panel">${escapeHtml(label)}</button>`;
+  }).join('');
+  const panels = shots.map((shot, index) => {
+    const id = `screenshot-${index}`;
+    const title = screenshotText(shot.title, locale);
+    const headline = screenshotText(shot.headline ?? shot.title, locale);
+    const body = screenshotText(shot.body, locale);
+    const active = index === 0;
+    return `<article class="screenshot-panel${active ? ' is-active' : ''}" role="tabpanel" id="${id}-panel" data-screenshot-panel="${id}" aria-labelledby="${id}-tab"${active ? '' : ' hidden'}>
+      <div class="screenshot-panel-copy">
+        <h3>${escapeHtml(headline)}</h3>
+        <p>${escapeHtml(body)}</p>
+      </div>
+      <div class="screenshot-panel-visual">
+        <div class="screenshot-panel-frame">
+          <img src="${escapeAttr(shot.src)}" alt="${escapeAttr(title)}" loading="${active ? 'eager' : 'lazy'}" decoding="async">
+        </div>
+      </div>
+    </article>`;
+  }).join('');
+  const sectionIntro = options.lead ?? (locale === 'ru'
+    ? 'Локальный UI Work Graph ведёт полный цикл: от аналитического разбора и BVC-задач до доски, проверок, памяти и архитектуры. Переключайте экраны и смотрите, как решения, контракты и доказательства связаны в одном репозитории.'
+    : 'The local Work Graph UI runs the full loop: from analytics review and BVC tasks to the board, verification, memory and architecture. Switch screens to see how decisions, contracts and evidence connect in one repository.');
+  const galleryTitle = options.title ?? (locale === 'ru' ? 'Как выглядит Work Graph' : 'What Work Graph looks like');
+  const gallery = `<section class="screenshot-gallery" aria-label="${escapeAttr(locale === 'ru' ? 'Скриншоты Work Graph' : 'Work Graph screenshots')}">
+    <div class="screenshot-gallery-heading">
+      <h2>${escapeHtml(galleryTitle)}</h2>
+      <p class="screenshot-gallery-lead">${escapeHtml(sectionIntro)}</p>
     </div>
-  </aside>`;
+    <div class="screenshot-switcher" data-screenshot-switcher>
+      <div class="screenshot-tablist" role="tablist" aria-label="${escapeAttr(tablistLabel)}">${tabs}</div>
+      <div class="screenshot-panels">${panels}</div>
+    </div>
+  </section>`;
+  return wrapSiteSectionBand(gallery, { tone: 'muted' });
 }
 
 function renderSteps(copy, locale) {
   const steps = locale === 'ru'
     ? [
-      ['Зафиксируйте решение', 'Создайте AN-разбор: почему работа нужна, какие риски и где границы.'],
-      ['Добавьте контракт задачи', 'Переведите решение в BVC-атом с Базисом, Вектором, Целью и проверками.'],
-      ['Назначьте агента', 'Cursor, Claude Code или другой MCP-клиент берёт задачу, но не становится источником правды.'],
-      ['Приложите доказательства', 'Команды, файлы, проверки и доменный контекст попадают в evidence.'],
-      ['Сохраните память', 'После готовности результат становится проверенной памятью проекта.'],
+      ['Установите Work Graph в проект', 'Выполните npx @work-graph/cli init . и npm install — появятся intent/, конфиг и MCP для Cursor или другого клиента.'],
+      ['Исследуйте вопрос', 'Попросите ИИ провести аналитический разбор — он оформит его как AN-запись в проекте.'],
+      ['Добавьте задачи', 'Попросите ИИ на основе разбора создать задачи или целый эпик с BVC-контрактами.'],
+      ['Выполнение', 'Агент захватывает work.id, меняет код в рамках контракта и прикладывает evidence; статусы видны на доске.'],
+      ['Проверки', 'Детерминированные и опциональные гейты решают, можно ли закрыть задачу — не слова агента, а контракт.'],
+      ['Память', 'После готовности проверенный результат становится памятью проекта со связями к задачам и файлам.'],
     ]
     : [
-      ['Capture the decision', 'Write an AN analysis: why the work matters, what can go wrong and where the boundary is.'],
-      ['Add the work contract', 'Turn the decision into a BVC atom with Basis, Vector, Goal and checks.'],
-      ['Assign the agent', 'Cursor, Claude Code or another MCP client can execute without becoming the source of truth.'],
-      ['Attach evidence', 'Commands, files, checks and domain context become task evidence.'],
-      ['Preserve memory', 'After readiness, the outcome becomes verified project memory.'],
+      ['Install Work Graph in your repo', 'Run npx @work-graph/cli init . and npm install — you get intent/, config, and MCP for Cursor or another client.'],
+      ['Explore the question', 'Ask the agent for an analytics review — it records the outcome as an AN entry in the project.'],
+      ['Add work items', 'Ask the agent to create tasks or a full epic from the review, each with a BVC contract.'],
+      ['Execution', 'The agent claims a work.id, edits code within the contract, and attaches evidence; the board shows progress.'],
+      ['Verification', 'Deterministic and optional gates decide when a task can close — contract verdict, not agent prose.'],
+      ['Memory', 'After readiness, the verified outcome becomes project memory linked to work items and files.'],
     ];
   return `<section class="steps-section">
     <h2>${escapeHtml(locale === 'ru' ? 'Как начать с Work Graph' : 'How to get started with Work Graph')}</h2>
     <ol class="jira-steps">${steps.map(([title, body], index) => `<li>
-      <span class="step-number">${index + 1}</span>
-      <div><h3>${escapeHtml(title)}</h3><p>${escapeHtml(body)}</p></div>
+      <span class="step-number" aria-hidden="true">${renderStepNumberIcon(index)}</span>
+      <h3><strong>${escapeHtml(title)}</strong> ${escapeHtml(body)}</h3>
     </li>`).join('')}</ol>
   </section>`;
 }
 
-function renderRelatedTemplates(locale, theme) {
-  const cards = locale === 'ru'
-    ? [
-      ['Контракт задачи', 'BVC-атом с Базисом, Вектором, Целью и проверками.', '/docs/bvc-spec'],
-      ['Матрица проверок', 'Tier A/B/C readiness для работы агентов.', '/docs/verification-matrix'],
-      ['MCP-инструменты', 'Контракты tools для Cursor и Claude Code.', '/docs/mcp-tools'],
-    ]
-    : [
-      ['Work contract', 'BVC atom with Basis, Vector, Goal and checks.', '/docs/bvc-spec'],
-      ['Verification matrix', 'Tier A/B/C readiness for agent work.', '/docs/verification-matrix'],
-      ['MCP tools', 'Tool contracts for Cursor and Claude Code.', '/docs/mcp-tools'],
-    ];
-  return `<section class="related-templates">
-    <div class="related-inner">
-      <h2>${escapeHtml(locale === 'ru' ? 'Связанные шаблоны' : 'Related templates')}</h2>
-      <div class="related-grid">${cards.map(([title, body, href]) => `<article class="related-card">
-        <div class="related-preview"><span></span><span></span><span></span></div>
-        <h3>${escapeHtml(title)}</h3>
-        <p>${escapeHtml(body)}</p>
-        <a href="${withLangAndTheme(href, locale, theme)}">${escapeHtml(locale === 'ru' ? 'Открыть →' : 'Open →')}</a>
-      </article>`).join('')}</div>
-    </div>
-  </section>`;
-}
-
 function renderBottomCta(copy, locale, theme) {
+  const installHref = `${withLocalePath('/', locale)}#install`;
   return `<section class="bottom-cta">
-    <h2>${escapeHtml(locale === 'ru' ? 'Готовы поставить Work Graph локально?' : 'Ready to install Work Graph locally?')}</h2>
-    ${renderUiButton({ href: '#install', label: copy.hero.primary, variant: 'primary', size: 'sm' })}
+    <div class="bottom-cta__inner">
+      <h2>${escapeHtml(locale === 'ru' ? 'Готовы поставить Work Graph локально?' : 'Ready to install Work Graph locally?')}</h2>
+      ${renderUiButton({ href: installHref, label: copy.hero.primary, variant: 'primary', size: 'lg' })}
+    </div>
   </section>`;
 }
 
-function renderFooterColumns(locale) {
+function renderFooter(locale) {
+  const year = new Date().getFullYear();
+  const home = withLocalePath('/', locale);
+  const brandLinks = locale === 'ru'
+    ? [
+      ['https://github.com/bvc-lang/work-graph', 'GitHub'],
+      [withLocalePath('/docs', locale), 'Документация'],
+      ['/llms.txt', 'llms.txt'],
+    ]
+    : [
+      ['https://github.com/bvc-lang/work-graph', 'GitHub'],
+      [withLocalePath('/docs', locale), 'Documentation'],
+      ['/llms.txt', 'llms.txt'],
+    ];
   const columns = locale === 'ru'
     ? [
-      ['Продукт', ['Аналитика', 'Задачи', 'Доска', 'Проверки']],
-      ['Документация', ['BVC', 'MCP', 'Проверки', 'Ошибки']],
-      ['Для агентов', ['llms.txt', 'Markdown', 'MCP discovery', 'JSON contexts']],
-      ['Сравнение', ['Cursor', 'Linear', 'Mem0', 'Devin']],
+      ['Продукт', [
+        [withLocalePath('/product', locale), 'Аналитика'],
+        [withLocalePath('/product', locale), 'Задачи BVC'],
+        [withLocalePath('/product', locale), 'Доска'],
+        [withLocalePath('/evidence-ledger', locale), 'Проверки'],
+      ]],
+      ['Документация', [
+        [withLocalePath('/docs/bvc-spec', locale), 'BVC'],
+        [withLocalePath('/docs/mcp-tools', locale), 'MCP'],
+        [withLocalePath('/docs/verification-matrix', locale), 'Матрица проверок'],
+        [withLocalePath('/docs', locale), 'Все документы'],
+      ]],
+      ['Для агентов', [
+        ['/llms.txt', 'llms.txt'],
+        [withLocalePath('/docs', locale), 'Markdown'],
+        ['/.well-known/mcp.json', 'MCP discovery'],
+        [withLocalePath('/docs', locale), 'JSON contexts'],
+      ]],
     ]
     : [
-      ['Product', ['Analytics', 'Work items', 'Board', 'Verification']],
-      ['Docs', ['BVC', 'MCP', 'Verification', 'Errors']],
-      ['For agents', ['llms.txt', 'Markdown', 'MCP discovery', 'JSON contexts']],
-      ['Compare', ['Cursor', 'Linear', 'Mem0', 'Devin']],
+      ['Product', [
+        [withLocalePath('/product', locale), 'Analytics'],
+        [withLocalePath('/product', locale), 'Work items'],
+        [withLocalePath('/product', locale), 'Board'],
+        [withLocalePath('/evidence-ledger', locale), 'Verification'],
+      ]],
+      ['Docs', [
+        [withLocalePath('/docs/bvc-spec', locale), 'BVC'],
+        [withLocalePath('/docs/mcp-tools', locale), 'MCP'],
+        [withLocalePath('/docs/verification-matrix', locale), 'Verification matrix'],
+        [withLocalePath('/docs', locale), 'All docs'],
+      ]],
+      ['For agents', [
+        ['/llms.txt', 'llms.txt'],
+        [withLocalePath('/docs', locale), 'Markdown'],
+        ['/.well-known/mcp.json', 'MCP discovery'],
+        [withLocalePath('/docs', locale), 'JSON contexts'],
+      ]],
     ];
-  return `<div class="footer-columns">${columns.map(([title, items]) => `<div><h3>${escapeHtml(title)}</h3>${items.map((item) => `<a href="/docs">${escapeHtml(item)}</a>`).join('')}</div>`).join('')}</div>`;
-}
-
-function renderProofStats(locale) {
-  const stats = locale === 'ru'
+  const legal = locale === 'ru'
     ? [
-      ['100%', 'локально в репозитории'],
-      ['5', 'шагов от решения до памяти'],
-      ['3', 'MCP-инструмента для агента'],
-      ['0', 'обязательных SaaS/БД'],
+      [withLocalePath('/docs', locale), 'Документация'],
+      ['https://github.com/bvc-lang/work-graph', 'GitHub'],
     ]
     : [
-      ['100%', 'local in the repository'],
-      ['5', 'steps from decision to memory'],
-      ['3', 'MCP tools for agents'],
-      ['0', 'required SaaS/database'],
+      [withLocalePath('/docs', locale), 'Documentation'],
+      ['https://github.com/bvc-lang/work-graph', 'GitHub'],
     ];
-  return `<section class="proof-stats" aria-label="Work Graph facts">
-    ${stats.map(([value, label]) => `<div><strong>${escapeHtml(value)}</strong><span>${escapeHtml(label)}</span></div>`).join('')}
-  </section>`;
+  const external = (href) => href.startsWith('http');
+  return `<footer class="site-footer">
+    <div class="site-footer__panel">
+      <div class="site-footer__grid">
+        <div class="site-footer__brand">
+          <a class="site-footer__logo" href="${escapeAttr(home)}" aria-label="Work Graph">
+            <img src="/assets/workgraph-logo.svg" width="148" height="22" alt="Work Graph" decoding="async">
+          </a>
+          <nav class="site-footer__brand-links" aria-label="${escapeAttr(locale === 'ru' ? 'Быстрые ссылки' : 'Quick links')}">
+            ${brandLinks.map(([href, label]) => `<a href="${escapeAttr(href)}"${external(href) ? ' target="_blank" rel="noopener noreferrer"' : ''}>${escapeHtml(label)}</a>`).join('')}
+          </nav>
+        </div>
+        <div class="footer-columns">${columns.map(([title, items]) => `<div class="footer-column">
+          <h3>${escapeHtml(title)}</h3>
+          ${items.map(([href, label]) => `<a href="${escapeAttr(href)}"${external(href) ? ' target="_blank" rel="noopener noreferrer"' : ''}>${escapeHtml(label)}</a>`).join('')}
+        </div>`).join('')}</div>
+      </div>
+    </div>
+    <div class="site-footer__bottom">
+      <p class="site-footer__copy">${escapeHtml(locale === 'ru' ? `© ${year} Work Graph` : `Copyright © ${year} Work Graph`)}</p>
+      <nav class="site-footer__legal" aria-label="${escapeAttr(locale === 'ru' ? 'Правовая информация' : 'Legal')}">
+        ${legal.map(([href, label]) => `<a href="${escapeAttr(href)}"${external(href) ? ' target="_blank" rel="noopener noreferrer"' : ''}>${escapeHtml(label)}</a>`).join('')}
+      </nav>
+    </div>
+  </footer>`;
 }
 
-function renderGraphTrinity(locale) {
+function renderGraphTrinity(locale, options = {}) {
   const graphs = locale === 'ru'
     ? [
       ['Граф намерений', 'Что и зачем', 'BVC-атомы, AN → Epic → Work Item, связи depends_on и trace.*.'],
@@ -294,194 +496,353 @@ function renderGraphTrinity(locale) {
       ['Execution Graph', 'How and by whom', 'work.id tasks, evidence, todo → ready → doing → done/blocked states and gates.'],
       ['Memory Graph', 'What was decided and why', 'Closed tasks with valid evidence, audit trail and RAG context from git.'],
     ];
+  const title = options.title ?? (locale === 'ru' ? 'Три графа — один цикл разработки' : 'Three graphs, one development loop');
+  const body = options.body ?? (locale === 'ru'
+    ? 'Каждый граф — самостоятельный слой с чётким контрактом. Вместе они дают цикл, который агент может исполнять, а человек — аудировать.'
+    : 'Each graph is a standalone layer with a clear contract. Together they form a loop an agent can execute and a human can audit.');
+  const cards = graphs.map(([graphTitle, subtitle, graphBody], index) => `<article class="graph-flow-card">
+      <span class="graph-flow-step" aria-hidden="true">${index + 1}</span>
+      <h3 class="graph-flow-card-title">${escapeHtml(graphTitle)}</h3>
+      <p class="graph-flow-card-lead">${escapeHtml(subtitle)}</p>
+      <p class="graph-flow-card-body">${escapeHtml(graphBody)}</p>
+    </article>`);
+  const flow = cards
+    .flatMap((card, index) => (index < cards.length - 1 ? [card, '<span class="graph-flow-arrow" aria-hidden="true">→</span>'] : [card]))
+    .join('');
   return `<section class="graph-trinity">
-    <div class="wide-heading">
-      <p class="eyebrow">${escapeHtml(locale === 'ru' ? 'Модель продукта' : 'Product model')}</p>
-      <h2>${escapeHtml(locale === 'ru' ? 'Три графа — один цикл разработки' : 'Three graphs, one development loop')}</h2>
-      <p>${escapeHtml(locale === 'ru' ? 'Каждый граф — самостоятельный слой с чётким контрактом. Вместе они дают цикл, который агент может исполнять, а человек — аудировать.' : 'Each graph is a standalone layer with a clear contract. Together they form a loop an agent can execute and a human can audit.')}</p>
-    </div>
-    <div class="graph-flow">${graphs.map(([title, subtitle, body], index) => `<article>
-      <span>${index + 1}</span>
-      <h3>${escapeHtml(title)}</h3>
-      <strong>${escapeHtml(subtitle)}</strong>
+    <div class="graph-trinity-heading">
+      <h2>${escapeHtml(title)}</h2>
       <p>${escapeHtml(body)}</p>
-    </article>`).join('')}</div>
+    </div>
+    <div class="graph-flow">${flow}</div>
   </section>`;
 }
 
 function renderProductPillars(locale) {
-  const pillars = locale === 'ru'
-    ? [
-      ['Атомы намерения', 'BVC: Basis · Vector · Goal — минимальная единица смысла, которую понимает человек, git и агент.'],
-      ['Контракт исполнения', 'Projection даёт input.targetFiles, output.evidenceRequired, verification.tier и матрицу разрешённых проверок.'],
-      ['Гейты готовности', 'done без evidence = ошибка политики. assert_task_ready_for_done возвращает ok или violations[].'],
-      ['Аудит-память', 'Память выводится из закрытых задач с валидными свидетельствами, а не из пересказа чата.'],
-    ]
-    : [
-      ['Intent atoms', 'BVC: Basis · Vector · Goal is the smallest unit of meaning readable by humans, git and agents.'],
-      ['Execution contract', 'Projection gives input.targetFiles, output.evidenceRequired, verification.tier and allowed checks.'],
-      ['Readiness gates', 'done without evidence is a policy error. assert_task_ready_for_done returns ok or violations[].'],
-      ['Audit memory', 'Memory is derived from closed tasks with valid evidence, not from a chat summary.'],
-    ];
-  return `<section class="pillar-section">
-    <div class="wide-heading">
-      <p class="eyebrow">${escapeHtml(locale === 'ru' ? 'Что внутри' : 'What is inside')}</p>
-      <h2>${escapeHtml(locale === 'ru' ? 'Контрактный контур: намерение → исполнение → память' : 'Contract loop: intent → execution → memory')}</h2>
-    </div>
-    <div class="pillar-grid">${pillars.map(([title, body], index) => `<article>
-      <span>${index + 1}</span>
-      <h3>${escapeHtml(title)}</h3>
-      <p>${escapeHtml(body)}</p>
-    </article>`).join('')}</div>
-  </section>`;
+  const items = locale === 'ru'
+    ? ['Аналитика', 'Задачи BVC', 'Доска задач', 'Проверки', 'Память проекта', 'MCP-инструменты']
+    : ['Analytics', 'BVC work items', 'Kanban board', 'Verification', 'Project memory', 'MCP tools'];
+  return renderIconLabelGrid({
+    title: locale === 'ru' ? 'Контрактный контур: намерение → исполнение → память' : 'Contract loop: intent → execution → memory',
+    body: locale === 'ru'
+      ? 'Свяжите стратегию с исполнением: от AN-разбора до проверенной памяти в git — в одном локальном графе работ.'
+      : 'Connect strategy to execution: from AN review to verified memory in git — in one local work graph.',
+    items,
+  });
 }
 
-function renderCodeShowcase(locale) {
+function renderCodeShowcase(locale, options = {}) {
   const bvc = locale === 'ru'
-    ? `#ImplementTraceLinksV1@ru<[\\nБазис:\\n  Текущая трассировка шагов не валидируется в CI\\n  Нет связи work.id ↔ файлы ↔ тесты\\nВектор:\\n  Реализовать валидатор трассировки\\n  Добавить MCP-инструмент get_unified_linkage\\nЦель:\\n  Любая задача с trace.* метками имеет автоматическую проверку целостности\\n\\nМетки:\\n  profile: work_item\\n  tier: A\\n  trace.codegen: false\\n\\nChecks:\\n  npm run test:deterministic\\n  bvc lint intent/**/implement-trace-links-v1.work.bvc\\n]>`
-    : `#ImplementTraceLinksV1@en<[\\nBasis:\\n  Current step tracing is not validated in CI\\n  There is no work.id ↔ files ↔ tests linkage\\nVector:\\n  Implement trace validator\\n  Add MCP tool get_unified_linkage\\nGoal:\\n  Any task with trace.* labels has automatic integrity checks\\n\\nLabels:\\n  profile: work_item\\n  tier: A\\n  trace.codegen: false\\n\\nChecks:\\n  npm run test:deterministic\\n  bvc lint intent/**/implement-trace-links-v1.work.bvc\\n]>`;
-  const mcp = `claim_work_item("implement-trace-links-v1")\\n→ get_work_contract(work_id)\\n→ edit target_files\\n→ run allowed commands\\n→ validate_evidence(structured_json)\\n→ assert_task_ready_for_done(work_id)\\n→ add_work_item_evidence + complete`;
+    ? `#ImplementTraceLinksV1@ru<[
+Базис:
+  Текущая трассировка шагов не валидируется в CI
+  Нет связи work.id ↔ файлы ↔ тесты
+Вектор:
+  Реализовать валидатор трассировки
+  Добавить MCP-инструмент get_unified_linkage
+Цель:
+  Любая задача с trace.* метками имеет автоматическую проверку целостности
+
+Метки:
+  profile: work_item
+  tier: A
+  trace.codegen: false
+
+Checks:
+  npm run test:deterministic
+  bvc lint intent/**/implement-trace-links-v1.work.bvc
+]>`
+    : `#ImplementTraceLinksV1@en<[
+Basis:
+  Current step tracing is not validated in CI
+  There is no work.id ↔ files ↔ tests linkage
+Vector:
+  Implement trace validator
+  Add MCP tool get_unified_linkage
+Goal:
+  Any task with trace.* labels has automatic integrity checks
+
+Labels:
+  profile: work_item
+  tier: A
+  trace.codegen: false
+
+Checks:
+  npm run test:deterministic
+  bvc lint intent/**/implement-trace-links-v1.work.bvc
+]>`;
+  const mcp = `claim_work_item("implement-trace-links-v1")
+→ get_work_contract(work_id)
+→ edit target_files
+→ run allowed commands
+→ validate_evidence(structured_json)
+→ assert_task_ready_for_done(work_id)
+→ add_work_item_evidence + complete`;
+  const title = options.title ?? (locale === 'ru' ? 'Задача читается человеком, git и агентом' : 'A task is readable by humans, git and agents');
+  const body = options.body ?? (locale === 'ru'
+    ? 'BVC описывает намерение, projection задаёт исполнение, evidence превращает результат в память.'
+    : 'BVC describes intent, projection defines execution and evidence turns the result into memory.');
   return `<section class="code-showcase">
     <div>
-      <p class="eyebrow">${escapeHtml(locale === 'ru' ? 'Посмотрите на контракт' : 'Look at the contract')}</p>
-      <h2>${escapeHtml(locale === 'ru' ? 'Задача читается человеком, git и агентом' : 'A task is readable by humans, git and agents')}</h2>
-      <p>${escapeHtml(locale === 'ru' ? 'BVC описывает намерение, projection задаёт исполнение, evidence превращает результат в память.' : 'BVC describes intent, projection defines execution and evidence turns the result into memory.')}</p>
+      <h2>${escapeHtml(title)}</h2>
+      <p>${escapeHtml(body)}</p>
     </div>
     <div class="code-tabs">
-      <div><strong>work.bvc</strong><pre><code>${escapeHtml(bvc)}</code></pre></div>
-      <div><strong>MCP flow</strong><pre><code>${escapeHtml(mcp)}</code></pre></div>
+      <div><strong>work.bvc</strong><pre><code class="code-block language-bvc">${highlightBvcBlock(bvc)}</code></pre></div>
+      <div><strong>MCP flow</strong><pre><code class="code-block language-mcp">${highlightMcpFlow(mcp)}</code></pre></div>
     </div>
   </section>`;
 }
 
-function renderAudience(locale) {
-  const groups = locale === 'ru'
-    ? [
-      ['Для техлида / архитектора', 'Канон смысла в .bvc, аудит по умолчанию, локальность в вашем git.'],
-      ['Для разработчика', 'Один бэклог, меньше импровизации, понятный get_work_contract перед реализацией.'],
-      ['Для агента', 'Явный input/output/verification, allowlist команд и structured evidence без фейка.'],
-    ]
-    : [
-      ['For tech leads / architects', 'Meaning canon in .bvc, audit by default and local source of truth in your git.'],
-      ['For developers', 'One backlog, less improvisation and clear get_work_contract before implementation.'],
-      ['For agents', 'Explicit input/output/verification, command allowlist and structured evidence without fake done.'],
-    ];
-  return `<section class="audience-section">
-    <h2>${escapeHtml(locale === 'ru' ? 'Для кого Work Graph' : 'Who Work Graph is for')}</h2>
-    <div>${groups.map(([title, body]) => `<article><h3>${escapeHtml(title)}</h3><p>${escapeHtml(body)}</p></article>`).join('')}</div>
-  </section>`;
+function renderAudience(locale, copy) {
+  const ru = locale === 'ru';
+  return renderSiteSectionsBlock(
+    {
+      title: ru ? 'Для кого Work Graph' : 'Who Work Graph is for',
+      sections: ru
+        ? [
+          { title: 'Для техлида и архитектора', body: 'Видите связь решений, задач и evidence в одном графе: AN-разборы, BVC-контракты и проверки остаются в git, а не в пересказе чата.', icon: 'eye' },
+          { title: 'Для разработчика', body: 'Один бэклог и понятный get_work_contract перед кодом: меньше импровизации, ясные targetFiles и статусы на доске.', icon: 'users-three' },
+          { title: 'Для агента', body: 'Явные input/output/verification, allowlist команд и structured evidence: агент исполняет контракт, а не объявляет «готово» словами.', icon: 'chart-line-up' },
+        ]
+        : [
+          { title: 'For tech leads and architects', body: 'See decisions, work items and evidence in one graph: AN reviews, BVC contracts and checks stay in git, not in chat summaries.', icon: 'eye' },
+          { title: 'For developers', body: 'One backlog and a clear get_work_contract before coding: less improvisation, explicit targetFiles and board states.', icon: 'users-three' },
+          { title: 'For agents', body: 'Explicit input/output/verification, command allowlists and structured evidence: the agent executes the contract instead of saying done in prose.', icon: 'chart-line-up' },
+        ],
+    },
+    copy,
+    locale,
+  );
+}
+
+function renderInstallCopyIcon() {
+  return renderInlineIcon('copy-bold.svg', { className: 'install-copy-icon', size: 18 });
+}
+
+function renderInstallCodeBlock(command, locale) {
+  const copyLabel = locale === 'ru' ? 'Копировать' : 'Copy';
+  const copiedLabel = locale === 'ru' ? 'Скопировано' : 'Copied';
+  return `<div class="install-code">
+    <code>${escapeHtml(command)}</code>
+    <button type="button" class="install-copy-btn" data-copy-text="${escapeAttr(command)}" data-copy-label="${escapeAttr(copyLabel)}" data-copied-label="${escapeAttr(copiedLabel)}" aria-label="${escapeAttr(copyLabel)}" title="${escapeAttr(copyLabel)}">${renderInstallCopyIcon()}<span class="install-copy-btn-text">${escapeHtml(copyLabel)}</span></button>
+  </div>`;
 }
 
 function renderInstallInstructions(locale) {
-  const steps = locale === 'ru'
-    ? [
-      ['Инициализируйте MCP', 'npx @work-graph/mcp init'],
-      ['Добавьте в mcp.json', '"command": "npx @work-graph/mcp", "args": ["--workspace", "."]'],
-      ['Проверьте подключение', 'Покажи список задач в статусе ready'],
-      ['Соберите статический сайт', 'npm run build:public-site'],
-    ]
-    : [
-      ['Initialize MCP', 'npx @work-graph/mcp init'],
-      ['Add to mcp.json', '"command": "npx @work-graph/mcp", "args": ["--workspace", "."]'],
-      ['Check connection', 'Show ready work items'],
-      ['Build the static site', 'npm run build:public-site'],
-    ];
+  const copy = locale === 'ru'
+    ? {
+      title: 'Как установить Work Graph',
+      lead: 'Установка в существующий репозиторий: локальный бэклог, UI и MCP для агента. Нужны Node.js 20+ и npm.',
+      projectDir: 'В каталоге проекта выполните:',
+      script: 'cd /path/to/your-project\nnpx @work-graph/cli init .\nnpm install\nnpm run workgraph:ui',
+      openUi: 'Откройте в браузере:',
+      uiUrl: 'http://127.0.0.1:4177/',
+      agentLead: 'Для агентов:',
+      agentQuote: 'Установи Work Graph в этот проект https://www.npmjs.com/package/@work-graph/cli и открой локальный UI.',
+      detail: 'Команда init создаёт .work-graph/config.json, intent/, npm-скрипты и при необходимости .cursor/mcp.json (npx -y @work-graph/mcp, WORKGRAPH_ROOT). Существующие intent/index.bvc и architecture/main.bvc сохраняются. После npm install перезагрузите MCP в IDE.',
+      verify: 'Проверка: npm run workgraph:doctor',
+      guideLabel: 'Подробная инструкция',
+      guideHref: 'https://github.com/bvc-lang/work-graph/blob/main/docs/getting-started.md',
+    }
+    : {
+      title: 'How to install Work Graph',
+      lead: 'Install into an existing repository: local backlog, operator UI, and MCP for your agent. Requires Node.js 20+ and npm.',
+      projectDir: 'In your project directory, run:',
+      script: 'cd /path/to/your-project\nnpx @work-graph/cli init .\nnpm install\nnpm run workgraph:ui',
+      openUi: 'Then open:',
+      uiUrl: 'http://127.0.0.1:4177/',
+      agentLead: 'For agents:',
+      agentQuote: 'Install Work Graph in this project https://www.npmjs.com/package/@work-graph/cli and open the local UI.',
+      detail: 'init writes .work-graph/config.json, intent/, npm scripts, and optional IDE files (for example .cursor/mcp.json with npx -y @work-graph/mcp and WORKGRAPH_ROOT). Existing intent/index.bvc and architecture/main.bvc are preserved. Reload MCP in your IDE after npm install.',
+      verify: 'Verify: npm run workgraph:doctor',
+      guideLabel: 'Detailed install guide',
+      guideHref: 'https://github.com/bvc-lang/work-graph/blob/main/docs/getting-started.md',
+    };
   return `<section id="install" class="install-section">
-    <div>
-      <p class="eyebrow">${escapeHtml(locale === 'ru' ? 'Установка' : 'Installation')}</p>
-      <h2>${escapeHtml(locale === 'ru' ? 'Как установить Work Graph' : 'How to install Work Graph')}</h2>
-      <p>${escapeHtml(locale === 'ru' ? 'Быстрый путь — подключить Work Graph как MCP-сервер к Cursor или Claude Code. Данные остаются локально в git, сайт собирается в dist/public-site без базы данных.' : 'The fastest path is to connect Work Graph as an MCP server to Cursor or Claude Code. Data stays local in git, and the site exports to dist/public-site without a database.')}</p>
+    <h2>${escapeHtml(copy.title)}</h2>
+    <p class="install-lead">${escapeHtml(copy.lead)}</p>
+    <div class="install-block">
+      <p class="install-block-label">${escapeHtml(copy.agentLead)}</p>
+      ${renderInstallCodeBlock(copy.agentQuote, locale)}
     </div>
-    <ol>${steps.map(([title, command]) => `<li>
-      <strong>${escapeHtml(title)}</strong>
-      <code>${escapeHtml(command)}</code>
-    </li>`).join('')}</ol>
+    <div class="install-block">
+      <p class="install-block-label">${escapeHtml(copy.projectDir)}</p>
+      ${renderInstallCodeBlock(copy.script, locale)}
+    </div>
+    <div class="install-block">
+      <p class="install-block-label">${escapeHtml(copy.openUi)}</p>
+      ${renderInstallCodeBlock(copy.uiUrl, locale)}
+    </div>
+    <p class="install-detail">${escapeHtml(copy.detail)}</p>
+    <p class="install-detail">${escapeHtml(copy.verify)}</p>
+    <p class="install-guide"><a class="install-guide-link" href="${escapeAttr(copy.guideHref)}" target="_blank" rel="noopener noreferrer">${escapeHtml(copy.guideLabel)} →</a></p>
   </section>`;
 }
 
 function renderComparisonStrip(locale) {
   const rows = locale === 'ru'
     ? [
-      ['Обычный AI-воркфлоу', 'намерение в голове или чате', 'готово = слова агента'],
-      ['Таск-трекер', 'планирует работу и статусы', 'не хранит машинный контракт evidence'],
-      ['CI / тесты', 'проверяет команды', 'не знает зачем была задача'],
-      ['Work Graph', 'связывает намерение, исполнение и память', 'готово = evidence + verified gate'],
+      { iconName: 'robot', name: 'Обычный AI-воркфлоу', does: 'намерение в голове или чате', gap: 'готово = слова агента' },
+      { iconName: 'kanban', name: 'Jira / Linear', does: 'планирует работу и статусы в облаке', gap: 'контракт и evidence не в git-репозитории' },
+      { iconName: 'test-tube', name: 'CI / тесты', does: 'проверяет команды', gap: 'не знает зачем была задача' },
+      { iconName: 'graph', name: 'Work Graph', does: 'связывает намерение, исполнение и память', gap: 'готово = evidence + verified gate' },
     ]
     : [
-      ['Plain AI workflow', 'intent lives in heads or chats', 'done = agent words'],
-      ['Task tracker', 'plans work and statuses', 'does not store machine evidence contract'],
-      ['CI / tests', 'checks commands', 'does not know why the task exists'],
-      ['Work Graph', 'links intent, execution and memory', 'done = evidence + verified gate'],
+      { iconName: 'robot', name: 'Plain AI workflow', does: 'intent lives in heads or chats', gap: 'done = agent words' },
+      { iconName: 'kanban', name: 'Jira / Linear', does: 'plans work and statuses in the cloud', gap: 'contract and evidence live outside the repo' },
+      { iconName: 'test-tube', name: 'CI / tests', does: 'checks commands', gap: 'does not know why the task exists' },
+      { iconName: 'graph', name: 'Work Graph', does: 'links intent, execution and memory', gap: 'done = evidence + verified gate' },
     ];
   return `<section class="comparison-strip">
-    <h2>${escapeHtml(locale === 'ru' ? 'Ключевое отличие от обычного AI-воркфлоу' : 'What changes compared to a plain AI workflow')}</h2>
-    <div>${rows.map(([name, does, gap]) => `<article>
-      <h3>${escapeHtml(name)}</h3>
-      <p>${escapeHtml(does)}</p>
-      <strong>${escapeHtml(gap)}</strong>
+    <h2 class="comparison-strip-heading">${escapeHtml(locale === 'ru' ? 'Ключевое отличие от обычного AI-воркфлоу' : 'What changes compared to a plain AI workflow')}</h2>
+    <div class="comparison-strip-grid">${rows.map(({ iconName, name, does, gap }) => `<article class="comparison-strip-card">
+      <span class="comparison-strip-icon" aria-hidden="true">${comparisonStripIcon(iconName)}</span>
+      <h3 class="comparison-strip-card-title">${escapeHtml(name)}</h3>
+      <p class="comparison-strip-card-lead">${escapeHtml(does)}</p>
+      <p class="comparison-strip-card-gap">${escapeHtml(gap)}</p>
     </article>`).join('')}</div>
   </section>`;
 }
 
-function renderRoadmapFaq(locale) {
-  const roadmap = locale === 'ru'
-    ? ['BVC-задачи и доска', 'MCP-инструменты для агентов', 'Evidence для изменений в репозитории', 'Ready-for-done gate', 'Статический сайт и llms.txt', 'Дальше: шаблоны проектов, доменные профили, публичные демо-кейсы']
-    : ['BVC work items and board', 'MCP tools for agents', 'Repository-change evidence', 'Ready-for-done gate', 'Static site and llms.txt', 'Next: project templates, domain profiles, public demo cases'];
-  const faq = locale === 'ru'
-    ? [
-      ['Это замена Jira?', 'Нет. Jira планирует. Work Graph хранит локальный контракт работы, evidence и проверенную память рядом с кодом.'],
-      ['Это IDE или агент?', 'Нет. Cursor и Claude Code исполняют. Work Graph задаёт контракт и проверяет готовность результата.'],
-      ['Нужна база данных?', 'Для публичного сайта нет. Static export собирается в отдельную папку и хостится как обычные файлы.'],
-    ]
-    : [
-      ['Is this a Jira replacement?', 'Work Graph is a contract platform around AI work: it can take intent from trackers, but the source of truth is the BVC contract and evidence in git.'],
-      ['Is this an IDE or agent?', 'Cursor and Claude Code execute work. Work Graph links intent, execution and memory, then verifies readiness.'],
-      ['Does it need a database?', 'Not for the public site. Static export builds a folder that can be hosted as plain files.'],
-    ];
-  return `<section class="roadmap-faq">
-    <div>
-      <h2>${escapeHtml(locale === 'ru' ? 'Roadmap' : 'Roadmap')}</h2>
-      <ul>${roadmap.map((item) => `<li>${escapeHtml(item)}</li>`).join('')}</ul>
-    </div>
-    <div>
-      <h2>${escapeHtml(locale === 'ru' ? 'Вопросы и ответы' : 'FAQ')}</h2>
-      ${faq.map(([question, answer]) => `<details><summary>${escapeHtml(question)}</summary><p>${escapeHtml(answer)}</p></details>`).join('')}
+function renderFaqToggleIcon() {
+  return '<span class="faq-toggle" aria-hidden="true"></span>';
+}
+
+function renderHomeFaq(locale) {
+  const items = getLocalizedFaq(locale).flatMap((category) => category.items);
+  return `<section id="faq" class="home-faq" aria-labelledby="home-faq-title">
+    <h2 id="home-faq-title" class="home-faq-title">FAQ</h2>
+    <div class="faq-accordion">
+      ${items.map((item) => `<details class="faq-item">
+        <summary><span class="faq-question">${escapeHtml(item.question)}</span>${renderFaqToggleIcon()}</summary>
+        <div class="faq-answer"><p>${escapeHtml(item.answer)}</p></div>
+      </details>`).join('')}
     </div>
+    <p class="faq-json-note">${escapeHtml(locale === 'ru' ? 'Для LLM и интеграций: ' : 'For LLMs and integrations: ')}<a href="/faq.json">/faq.json</a></p>
   </section>`;
 }
 
-function renderFaqPage(locale) {
-  const faq = getLocalizedFaq(locale);
-  return `<section class="faq-page" aria-labelledby="faq-title">
+function renderPageSectionsGrid(sections, copy) {
+  return `<div class="content-layout page-sections">
+    <div class="article-column">
+      <div class="section-grid">${sections.map((section) => renderSection(section, copy)).join('')}</div>
+    </div>
+  </div>`;
+}
+
+function renderSiteSectionsBlock(block, copy, locale) {
+  const sections = resolveSiteSections(block.sections ?? [], locale);
+  const heading = block.title
+    ? `<div class="wide-heading site-sections-block__heading"><h2>${escapeHtml(block.title)}</h2>${block.intro ? `<p>${escapeHtml(block.intro)}</p>` : ''}</div>`
+    : '';
+  return `${heading}${renderPageSectionsGrid(sections, copy)}`;
+}
+
+function featureColumnsToSiteSections(block) {
+  return {
+    title: block.title,
+    intro: block.intro,
+    sections: (block.items ?? []).map(({ iconName, heading, body, badges }) => ({
+      title: heading,
+      body,
+      icon: iconName,
+      badges,
+    })),
+  };
+}
+
+function renderPageLead(block) {
+  return `<section class="page-lead wide-heading"><p>${escapeHtml(block.text)}</p></section>`;
+}
+
+function renderWorkflowPipeline(block) {
+  return `<section class="workflow-pipeline">
     <div class="wide-heading">
-      <p class="eyebrow">${escapeHtml(locale === 'ru' ? 'FAQ' : 'FAQ')}</p>
-      <h2 id="faq-title">${escapeHtml(locale === 'ru' ? 'Вопрос-ответ (FAQ) — Work Graph' : 'FAQ — Work Graph')}</h2>
-      <p>${escapeHtml(locale === 'ru' ? 'Раздел структурирован для быстрого поиска человеком и для точного парсинга LLM-агентами.' : 'Structured for fast human search and precise LLM-agent parsing.')}</p>
+      <h2>${escapeHtml(block.title)}</h2>
+      ${block.intro ? `<p>${escapeHtml(block.intro)}</p>` : ''}
     </div>
-    ${faq.map((category) => `<section class="faq-category">
-      <h3>${escapeHtml(category.category)}</h3>
-      ${category.items.map((item) => `<details>
-        <summary>${escapeHtml(item.question)}</summary>
-        <p>${escapeHtml(item.answer)}</p>
-      </details>`).join('')}
-    </section>`).join('')}
-    <section class="faq-json-note">
-      <h3>${escapeHtml(locale === 'ru' ? 'Для разработчиков и LLM' : 'For developers and LLMs')}</h3>
-      <p>${escapeHtml(locale === 'ru' ? 'Структурированная версия доступна как Schema.org FAQPage по адресу /faq.json.' : 'A structured Schema.org FAQPage version is available at /faq.json.')}</p>
-      <a href="/faq.json">/faq.json</a>
-    </section>
+    <ol class="workflow-pipeline-steps">${block.steps.map(({ label, detail, iconName }) => `<li>
+      ${iconName ? `<span class="workflow-pipeline-icon" aria-hidden="true">${workflowPipelineIcon(iconName)}</span>` : ''}
+      <span class="workflow-pipeline-label">${escapeHtml(label)}</span>
+      <span class="workflow-pipeline-detail">${escapeHtml(detail)}</span>
+    </li>`).join('')}</ol>
   </section>`;
 }
 
-function renderHomeExpansion(locale) {
-  return `${renderProofStats(locale)}
+function renderCompareBoundaries(block) {
+  const muted = block.variant === 'muted';
+  return `<section class="compare-boundaries${muted ? ' compare-boundaries--muted' : ''}">
+    <h2 class="compare-boundaries-heading">${escapeHtml(block.title)}</h2>
+    <div class="compare-boundaries-grid">${block.items.map(({ iconName, heading, body }) => `<article>
+      <span class="compare-boundaries-icon" aria-hidden="true">${featureIcon(iconName)}</span>
+      <h3>${escapeHtml(heading)}</h3>
+      <p>${escapeHtml(body)}</p>
+    </article>`).join('')}</div>
+  </section>`;
+}
+
+function resolveSiteSections(sections, locale) {
+  return sections.map((section) => {
+    if (section.competitors) {
+      const { competitors: _flag, ...rest } = section;
+      return { ...rest, competitors: getPublicSiteCompetitors(locale) };
+    }
+    return section;
+  });
+}
+
+function renderPageBlock(block, locale, copy) {
+  switch (block.type) {
+    case 'lead':
+      return renderPageLead(block);
+    case 'pipeline':
+      return renderWorkflowPipeline(block);
+    case 'featureColumns':
+      return renderSiteSectionsBlock(featureColumnsToSiteSections(block), copy, locale);
+    case 'iconLabelGrid':
+      return renderIconLabelGrid(block);
+    case 'screenshotGallery':
+      return renderScreenshotGallery(locale, block);
+    case 'graphTrinity':
+      return renderGraphTrinity(locale, block);
+    case 'codeShowcase':
+      return renderCodeShowcase(locale, block);
+    case 'comparisonStrip':
+      return renderComparisonStrip(locale);
+    case 'siteSections':
+      return renderSiteSectionsBlock(block, copy, locale);
+    case 'boundaries':
+      return renderCompareBoundaries(block);
+    default:
+      return '';
+  }
+}
+
+function renderPageBlocks(page, locale, copy) {
+  const blocks = page.blocks ?? [];
+  if (blocks.length === 0 && page.sections?.length) {
+    return `<div class="page-flow">${renderPageSectionsGrid(page.sections, copy)}</div>`;
+  }
+  return `<div class="page-flow">${blocks.map((block) => renderPageBlock(block, locale, copy)).join('')}</div>`;
+}
+
+function renderHomePageSections(locale, copy, page) {
+  const introSections = page.sections.map((section) => renderSection(section, copy)).join('');
+  return `${renderSteps(copy, locale)}
+    ${renderInstallInstructions(locale)}
+    ${renderScreenshotGallery(locale)}
     ${renderGraphTrinity(locale)}
     ${renderProductPillars(locale)}
-    ${renderInstallInstructions(locale)}
+    <div class="content-layout home-pillars">
+      <div class="article-column">
+        <div class="section-grid">${introSections}</div>
+      </div>
+    </div>
     ${renderCodeShowcase(locale)}
-    ${renderAudience(locale)}
     ${renderComparisonStrip(locale)}
-    ${renderRoadmapFaq(locale)}`;
+    ${renderAudience(locale, copy)}
+    ${renderHomeFaq(locale)}`;
 }
 
 export function renderPublicSiteHtml(page, options = {}) {
@@ -490,8 +851,9 @@ export function renderPublicSiteHtml(page, options = {}) {
   page.locale = locale;
   const copy = getPublicSiteCopy(locale);
   const jsonLd = JSON.stringify(publicSiteJsonLd(page));
+  const installHref = page.kind === 'home' ? '#install' : `${withLocalePath('/', locale)}#install`;
   const primaryButton = renderUiButton({
-    href: '#install',
+    href: installHref,
     label: copy.hero.primary,
     variant: 'primary',
     size: 'lg',
@@ -502,37 +864,19 @@ export function renderPublicSiteHtml(page, options = {}) {
     variant: 'secondary',
     size: 'lg',
   });
+  const documentTitle = page.documentTitle
+    ?? (/^Work Graph\b/u.test(page.title) ? page.title : `${page.title} · Work Graph`);
   return `<!doctype html>
 <html lang="${locale}" data-theme="${theme}">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>${escapeHtml(page.title)} · Work Graph</title>
+  <title>${escapeHtml(documentTitle)}</title>
   <meta name="description" content="${escapeAttr(page.description)}">
   <link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">
   <link rel="stylesheet" href="/assets/fonts/GraphikLCG/stylesheet.css">
   <link rel="stylesheet" href="/assets/design-tokens-workgraph-dark.css">
-  <script>
-    (function () {
-      var params = new URLSearchParams(window.location.search);
-      var allowedLang = ['en', 'ru'];
-      var allowedTheme = ['light', 'dark'];
-      var lang = params.get('lang') || localStorage.getItem('workGraphPublicSiteLocale') || '${locale}';
-      var theme = params.get('theme') || localStorage.getItem('workGraphPublicSiteTheme') || '${theme}';
-      if (!allowedLang.includes(lang)) lang = 'en';
-      if (!allowedTheme.includes(theme)) theme = 'light';
-      localStorage.setItem('workGraphPublicSiteLocale', lang);
-      localStorage.setItem('workGraphPublicSiteTheme', theme);
-      document.documentElement.lang = lang;
-      document.documentElement.dataset.theme = theme;
-      if (!params.get('lang') || !params.get('theme')) {
-        var next = new URL(window.location.href);
-        next.searchParams.set('lang', lang);
-        next.searchParams.set('theme', theme);
-        window.history.replaceState(null, '', next);
-      }
-    })();
-  </script>
+  <script>${renderPublicSiteBootstrapScript(locale, theme)}</script>
   <script type="application/ld+json">${jsonLd}</script>
   <style>
     :root {
@@ -558,11 +902,17 @@ export function renderPublicSiteHtml(page, options = {}) {
       --ui-control-bg-rgb: 244 245 247;
       --ui-control-bg-hover-rgb: 235 236 240;
       --ui-radius-control: 3px;
+      --code-surface: #f4f5f7;
+      --code-header: #ebecf0;
+      --code-text: #172b4d;
+      --site-section-spacing: clamp(96px, 10vw, 128px);
+      --footer-heading-color: #172b4d;
+      --footer-link-color: #44546f;
     }
     html[data-theme="dark"] {
       color-scheme: dark;
       --bg: #1d2125;
-      --header-bg: #161a1d;
+      --header-bg: #1d2125;
       --card: #282e33;
       --card-muted: #22272b;
       --text: #d6dde5;
@@ -571,157 +921,332 @@ export function renderPublicSiteHtml(page, options = {}) {
       --accent: #85b8ff;
       --accent-soft: #092957;
       --shadow: 0 1px 1px rgba(0, 0, 0, .32);
+      --code-surface: #22272b;
+      --code-header: #2c333a;
+      --code-text: #dfe1e6;
+      --footer-heading-color: #d6dde5;
+      --footer-link-color: #9fadbc;
     }
     * { box-sizing: border-box; }
     body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--brand-font-sans, 'Graphik LCG', ui-sans-serif, system-ui, sans-serif); line-height: 1.55; }
     a { color: var(--accent); }
-    .site-header, .site-footer { border-color: var(--border); padding: 16px clamp(18px, 5vw, 72px); }
-    .site-header { align-items: center; background: color-mix(in srgb, var(--header-bg) 96%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); display: flex; gap: 22px; justify-content: space-between; position: sticky; top: 0; z-index: 10; }
-    .site-brand { color: var(--text); font-size: 15px; font-weight: 800; text-decoration: none; }
-    .site-nav { display: flex; flex-wrap: wrap; gap: 4px; }
-    .site-nav a, .locale-link { border-radius: 3px; color: var(--text); font-size: 14px; font-weight: 600; padding: 8px 10px; text-decoration: none; }
-    .site-nav a:hover, .locale-link:hover, .locale-link.is-active { background: #ebecf0; }
+    .site-header { border-color: var(--border); padding: 16px clamp(18px, 5vw, 72px); }
+    .site-header { align-items: center; background: color-mix(in srgb, var(--header-bg) 96%, transparent); backdrop-filter: blur(14px); border-bottom: none; display: flex; flex-wrap: nowrap; gap: 22px; justify-content: space-between; position: sticky; top: 0; z-index: 10; }
+    html[data-theme="dark"] .site-header { background: var(--bg); backdrop-filter: none; }
+    .site-brand { align-items: center; display: inline-flex; flex: none; line-height: 0; text-decoration: none; }
+    .site-brand-logo { display: block; height: 24px; max-width: min(188px, 42vw); width: auto; }
+    .site-brand-emblem { display: none; height: 24px; width: auto; }
+    html[data-theme="dark"] .site-brand-logo { filter: brightness(0) invert(1); }
+    .site-nav { display: flex; flex: 1; flex-wrap: nowrap; gap: 2px; justify-content: center; min-width: 0; }
+    .site-nav a { border-radius: 3px; color: var(--text); font-size: 1.0625rem; font-weight: 500; padding: 8px 12px; text-decoration: none; transition: color .15s ease; }
+    .site-nav a:hover { background: transparent; color: var(--accent); }
+    .site-nav a[aria-current="page"] { color: var(--accent); }
+    .site-header-actions { align-items: center; display: flex; flex: none; gap: 8px; }
+    .site-control-btn.site-nav-toggle { display: none; padding: 0; width: 36px; }
+    .site-nav-toggle-bars { background: currentColor; border-radius: 1px; display: block; height: 2px; position: relative; width: 18px; }
+    .site-nav-toggle-bars::before, .site-nav-toggle-bars::after { background: currentColor; border-radius: 1px; content: ''; height: 2px; left: 0; position: absolute; width: 18px; }
+    .site-nav-toggle-bars::before { top: -6px; transition: transform .2s ease, top .2s ease; }
+    .site-nav-toggle-bars::after { top: 6px; transition: transform .2s ease, top .2s ease; }
+    .site-nav-toggle.is-open .site-nav-toggle-bars { background: transparent; }
+    .site-nav-toggle.is-open .site-nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
+    .site-nav-toggle.is-open .site-nav-toggle-bars::after { top: 0; transform: rotate(-45deg); }
     .site-controls { align-items: center; display: flex; gap: 8px; }
+    .site-control-btn { align-items: center; background: var(--card-muted); border: 1px solid var(--border); border-radius: 999px; color: var(--text); cursor: pointer; display: inline-flex; font: inherit; font-size: 13px; font-weight: 700; height: 36px; justify-content: center; line-height: 1; padding: 0; }
+    .site-control-btn:hover { background: var(--card); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
+    .site-control-btn.theme-toggle { width: 36px; }
+    .site-control-btn.locale-toggle { letter-spacing: .03em; min-width: 42px; padding: 0 10px; }
+    .site-github-btn { flex: none; text-decoration: none; width: 36px; }
+    .site-github-icon-svg { display: block; }
+    .site-github-icon-svg path { fill: currentColor; }
+    .theme-toggle-icons { align-items: center; display: inline-flex; height: 18px; justify-content: center; position: relative; width: 18px; }
+    .theme-toggle-icons .theme-icon { inset: 0; position: absolute; }
+    html[data-theme="light"] .theme-icon-sun { display: none; }
+    html[data-theme="dark"] .theme-icon-moon { display: none; }
     .site-icon, .header-theme-toggle-icon { fill: currentColor; flex: none; vertical-align: -0.15em; }
-    .site-main { padding: 0; }
-    .site-shell { margin: 0 auto; max-width: 1360px; padding: clamp(34px, 6vw, 78px) clamp(18px, 5vw, 72px); }
-    .hero { margin: 0 auto 30px; max-width: 980px; text-align: left; }
-    .eyebrow { color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
+    .site-icon path, .header-theme-toggle-icon path { fill: currentColor; }
+    html { overflow-x: clip; }
+    .site-main { overflow-x: clip; padding: 0; }
+    .site-shell { --site-band-inner-max: 1280px; --site-shell-inline-pad: clamp(18px, 5vw, 72px); margin: 0 auto; max-width: 1360px; padding: clamp(34px, 6vw, 78px) var(--site-shell-inline-pad); }
+    .site-section-band { box-sizing: border-box; margin-inline: calc(50% - 50vw); max-width: 100vw; padding-block: clamp(48px, 6vw, 80px); padding-inline: max(var(--site-shell-inline-pad), calc((100vw - var(--site-band-inner-max)) / 2)); width: 100vw; }
+    .site-section-band--muted { background: var(--card-muted); }
+    .site-section-band--plain { background: var(--card); }
+    .site-section-band--surface { background: var(--bg); }
+    .site-shell > .site-section-band { margin-inline: calc(-1 * var(--site-shell-inline-pad)); max-width: none; padding-inline: var(--site-shell-inline-pad); width: auto; }
+    .site-section-band__inner { margin-inline: auto; max-width: var(--site-band-inner-max); min-width: 0; width: 100%; }
+    .hero { margin: 0 auto 48px; max-width: 980px; text-align: center; }
+    .site-shell--home .hero { margin-bottom: clamp(28px, 4vw, 40px); }
+    .site-shell--page .hero { margin-inline: 0; margin-bottom: clamp(32px, 4vw, 48px); max-width: 720px; text-align: left; }
+    .site-shell--page .hero p { margin-inline: 0; max-width: 58ch; }
+    .site-shell--page .hero .cta-row { justify-content: flex-start; }
+    .site-shell--page .page-flow { margin-inline: 0; }
+    .site-shell--page .page-flow.page-flow--narrow { margin-inline: 0; max-width: 720px; }
+    .site-shell--page .content-layout { justify-content: start; margin-inline: 0; max-width: 100%; }
+    .site-shell--page .section-heading { align-items: flex-start; }
+    .site-shell--page .site-section { text-align: left; }
+    .site-shell--page .doc-list { list-style: none; margin: 20px 0 0; padding: 0; }
+    .site-shell--page .doc-list li { margin: 0 0 22px; }
+    .site-shell--page .doc-list li:last-child { margin-bottom: 0; }
+    .site-shell--page .doc-list a { font-size: 1.0625rem; font-weight: 600; }
+    .site-shell--page .doc-list p { margin: 6px 0 0; max-width: 58ch; }
+    .home-hero-preview-wrap { margin: 0 auto var(--site-section-spacing); max-width: 1040px; width: 100%; }
+    .home-hero-preview-wrap .template-visual { margin: 0; }
+    .home-flow, .page-flow { display: flex; flex-direction: column; gap: var(--site-section-spacing); margin: 0 auto; max-width: 1200px; width: 100%; }
+    .page-flow .content-layout, .page-flow.page-flow--narrow .content-layout { margin-bottom: 0; max-width: 100%; }
+    .page-flow.page-flow--narrow { max-width: 820px; }
+    .home-flow > .graph-trinity, .home-flow > .icon-label-grid-section, .home-flow > .install-section, .home-flow > .site-section-band, .home-flow > .code-showcase, .home-flow > .comparison-strip, .home-flow > .home-faq, .home-flow > .steps-section, .page-flow > .page-lead, .page-flow > .workflow-pipeline, .page-flow > .graph-trinity, .page-flow > .icon-label-grid-section, .page-flow > .site-section-band, .page-flow > .code-showcase, .page-flow > .comparison-strip, .page-flow > .compare-boundaries, .page-flow > .content-layout, .page-flow > .site-sections-block__heading { margin-top: 0; }
+    .home-flow > .content-layout { margin-bottom: 0; max-width: 1200px; }
+    .home-flow .content-layout.home-pillars { justify-content: start; margin-inline: 0; max-width: 1200px; width: 100%; }
+    .home-flow .home-pillars .section-grid { gap: clamp(32px, 4vw, 56px) clamp(28px, 4vw, 48px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .home-flow .home-pillars .site-section { border-bottom: 0; display: flex; flex-direction: column; padding: 0; text-align: left; }
+    .home-flow .home-pillars .section-heading { align-items: flex-start; display: block; }
+    .home-flow .home-pillars .section-heading h2 { font-size: clamp(1.375rem, 2.1vw, 1.75rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.25; margin: 0 0 12px; }
+    .home-flow .home-pillars .site-section p { flex: 1 1 auto; font-size: 1rem; line-height: 1.65; margin: 0; }
+    .home-flow .home-pillars .badge-row { margin: 16px 0 0; }
+    .site-sections-block__heading { margin-bottom: clamp(20px, 3vw, 32px); }
+    .site-sections-block__heading p { color: var(--muted); font-size: 1.125rem; line-height: 1.7; margin: 0; max-width: 58ch; }
     h1 { font-size: clamp(2.25rem, 4.8vw, 4rem); letter-spacing: -.035em; line-height: 1.04; margin: 12px 0 18px; }
     h2 { font-size: clamp(1.35rem, 2.2vw, 1.9rem); letter-spacing: -.015em; line-height: 1.18; margin: 0 0 10px; }
-    .hero p { color: var(--muted); font-size: 1.125rem; line-height: 1.7; max-width: 820px; }
+    .hero p { color: var(--muted); font-size: 1.125rem; line-height: 1.7; margin-left: auto; margin-right: auto; max-width: 820px; }
+    .hero .cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }
     .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
-    .template-visual { background: var(--card); border: 1px solid var(--border); border-radius: 4px; box-shadow: var(--shadow-raised); margin: 0 auto 56px; max-width: 1040px; overflow: hidden; }
+    .template-visual { background: var(--card); border: 1px solid var(--border); border-radius: 4px; box-shadow: var(--shadow-raised); margin: 0 auto; max-width: 1040px; overflow: hidden; }
     .screenshot-hero img { display: block; height: auto; width: 100%; }
     .screenshot-hero figcaption { border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; padding: 12px 16px; }
-    .visual-toolbar { align-items: center; background: #fafbfc; border-bottom: 1px solid var(--border); display: flex; gap: 8px; padding: 12px 14px; }
-    .visual-toolbar span { background: var(--border); border-radius: 999px; height: 8px; width: 8px; }
-    .visual-board { background: #f4f5f7; display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); min-height: 310px; padding: 18px; }
-    .visual-column { background: #ebecf0; border-radius: 3px; padding: 10px; }
-    .visual-column h3 { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .04em; margin: 0 0 10px; text-transform: uppercase; }
-    .visual-card { background: var(--card); border-left: 3px solid var(--accent); border-radius: 3px; box-shadow: var(--shadow); display: grid; gap: 7px; margin-bottom: 10px; min-height: 66px; padding: 10px; }
-    .visual-card.is-1 { border-left-color: #36b37e; }
-    .visual-card.is-2 { border-left-color: #ffab00; }
-    .visual-card.is-3 { border-left-color: #6554c0; }
-    .visual-card span, .visual-card p, .visual-card small, .related-preview span { background: var(--border); border-radius: 999px; display: block; height: 6px; }
-    .visual-card p { width: 80%; }
-    .visual-card small { width: 44%; }
-    .content-layout { align-items: start; display: grid; gap: 56px; grid-template-columns: 300px minmax(0, 820px); justify-content: center; }
-    .template-aside { position: sticky; top: 92px; }
-    .aside-card { background: var(--card); border: 1px solid var(--border); border-radius: 4px; box-shadow: var(--shadow); padding: 22px; }
-    .aside-icon { align-items: center; background: var(--accent-soft); border-radius: 4px; color: var(--accent); display: flex; height: 42px; justify-content: center; margin-bottom: 14px; width: 42px; }
-    .aside-card h2 { font-size: 22px; line-height: 1.18; }
-    .aside-card p { color: var(--muted); font-size: 14px; }
-    .aside-card .wg-btn { justify-content: center; width: 100%; }
-    .aside-card dl { display: grid; gap: 0; margin: 20px 0 0; }
-    .aside-card dl div { align-items: center; border-top: 1px solid var(--border); display: flex; justify-content: space-between; padding: 11px 0 0; margin-top: 11px; }
-    .aside-card dt { color: var(--muted); font-size: 12px; }
-    .aside-card dd { margin: 0; }
-    .article-column { min-width: 0; }
-    .section-grid { display: grid; gap: 36px; grid-template-columns: 1fr; margin-top: 0; }
-    .site-section { background: transparent; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none; padding: 0 0 34px; }
+    .content-layout { display: grid; justify-content: center; margin-bottom: 24px; max-width: 820px; margin-left: auto; margin-right: auto; width: 100%; }
+    .article-column { min-width: 0; width: 100%; }
+    .section-grid { display: grid; gap: 48px; grid-template-columns: 1fr; margin-top: 0; }
+    .site-section { background: transparent; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none; padding: 0 0 44px; }
     .section-heading { align-items: center; display: flex; gap: 10px; }
-    .section-icon { align-items: center; background: var(--accent-soft); border-radius: 4px; color: var(--accent); display: inline-flex; height: 34px; justify-content: center; width: 34px; }
+    .section-icon { align-items: center; background: var(--accent-soft); border-radius: 4px; box-sizing: border-box; color: var(--accent); display: inline-flex; flex: none; height: 34px; justify-content: center; width: 52px; }
     .site-section p, .doc-list p { color: var(--muted); font-size: 16px; line-height: 1.7; }
     .badge-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
     .flow-list { display: grid; gap: 8px; padding-left: 22px; }
-    table { border-collapse: collapse; width: 100%; }
-    th, td { border-top: 1px solid var(--border); padding: 8px; text-align: left; vertical-align: top; }
-    .proof-stats { display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); margin: 56px auto 10px; max-width: 1200px; }
-    .proof-stats div { background: var(--card); border: 1px solid var(--border); border-radius: 4px; box-shadow: none; padding: 20px; }
-    .proof-stats strong { color: var(--accent); display: block; font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: -.04em; line-height: 1; }
-    .proof-stats span { color: var(--muted); display: block; font-size: 13px; margin-top: 8px; }
-    .graph-trinity, .pillar-section, .install-section, .code-showcase, .audience-section, .comparison-strip, .roadmap-faq { margin: 58px auto 0; max-width: 1200px; }
-    .screenshot-gallery { margin: 58px auto 0; max-width: 1200px; }
-    .screenshot-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; }
-    .screenshot-card { background: var(--card); border: 1px solid var(--border); border-radius: 4px; box-shadow: var(--shadow); margin: 0; overflow: hidden; }
-    .screenshot-card img { display: block; height: auto; width: 100%; }
-    .screenshot-card figcaption { border-top: 1px solid var(--border); display: grid; gap: 4px; padding: 14px; }
-    .screenshot-card figcaption span { color: var(--muted); font-size: 13px; }
+    .table-scroll { -webkit-overflow-scrolling: touch; margin-top: 16px; max-width: 100%; overflow-x: auto; }
+    .table-scroll table { border-collapse: collapse; min-width: 720px; width: 100%; }
+    .table-scroll th, .table-scroll td { border-top: 1px solid var(--border); padding: 8px 10px; text-align: left; vertical-align: top; white-space: normal; word-break: break-word; }
+    .article-column, .site-section { max-width: 100%; min-width: 0; }
+    .graph-trinity, .icon-label-grid-section, .install-section, .code-showcase, .feature-columns-section, .comparison-strip, .home-faq { margin: var(--site-section-spacing) auto 0; max-width: 1200px; width: 100%; }
+    .icon-label-grid-section { background: transparent; box-sizing: border-box; padding: 0; text-align: left; }
+    .icon-label-grid-heading { margin: 0; max-width: 720px; }
+    .icon-label-grid-heading h2 { font-size: clamp(1.5rem, 2.8vw, 2.125rem); letter-spacing: -.02em; margin: 0 0 16px; }
+    .icon-label-grid-heading p { color: var(--muted); font-size: 1.125rem; line-height: 1.7; margin: 0; max-width: 58ch; }
+    .icon-label-grid { column-gap: clamp(24px, 4vw, 48px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(44px, 6vw, 64px); row-gap: clamp(48px, 6vw, 72px); }
+    .icon-label-grid-item { align-items: center; display: flex; flex-direction: row; gap: 16px; justify-content: flex-start; text-align: left; }
+    .icon-label-grid-icon { display: block; flex: none; line-height: 0; }
+    .icon-label-grid-icon-box { align-items: center; background: var(--accent); border-radius: 6px; color: #fff; display: inline-flex; height: 40px; justify-content: center; width: 56px; }
+    .icon-label-grid-icon-svg { color: #fff; display: block; flex: none; }
+    .icon-label-grid-icon-svg polyline { stroke: currentColor; }
+    .icon-label-grid-label { color: var(--text); font-size: 1.375rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.35; max-width: none; }
+    .feature-columns-section { text-align: center; }
+    .feature-columns-heading { font-size: clamp(1.35rem, 2.2vw, 1.9rem); letter-spacing: -.015em; margin: 0 0 clamp(32px, 5vw, 48px); }
+    .feature-columns { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: repeat(3, minmax(0, 1fr)); }
+    .feature-column { align-items: center; display: flex; flex-direction: column; text-align: center; }
+    .feature-column-icon { align-items: center; color: var(--accent); display: inline-flex; height: 56px; justify-content: center; margin-bottom: 20px; width: 56px; }
+    .feature-column-icon-svg { display: block; flex: none; }
+    .feature-column-icon-svg path { fill: currentColor; }
+    .feature-column h3 { font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; margin: 0 auto 12px; max-width: 24ch; }
+    .feature-column p { color: var(--muted); font-size: 1rem; line-height: 1.65; margin: 0 auto; max-width: 36ch; }
+    .screenshot-gallery { background: transparent; margin: 0; max-width: 100%; min-width: 0; overflow: hidden; padding: 0; width: 100%; }
+    .screenshot-gallery-heading, .screenshot-switcher { margin-left: auto; margin-right: auto; max-width: 100%; min-width: 0; }
+    .screenshot-gallery-heading { text-align: center; }
+    .screenshot-gallery-heading h2 { color: var(--text); font-size: clamp(1.85rem, 3.4vw, 2.5rem); font-weight: 800; letter-spacing: -.03em; margin: 10px 0 18px; }
+    .screenshot-gallery-lead { color: var(--muted); font-size: 1.125rem; line-height: 1.7; margin: 0 auto; max-width: 58ch; }
+    .screenshot-switcher { margin-top: clamp(36px, 4vw, 52px); }
+    .screenshot-tablist { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; margin: 0 0 clamp(40px, 5vw, 56px); padding: 0; }
+    .screenshot-tab { background: transparent; border: 0; border-radius: 999px; color: color-mix(in srgb, var(--text) 72%, transparent); cursor: pointer; font: inherit; font-size: 1.2rem; font-weight: 400; line-height: 1.2; padding: 8px 16px; transition: background .15s ease, color .15s ease; }
+    .screenshot-tab:hover { color: var(--accent); }
+    .screenshot-tab.is-active { background: var(--accent); color: #fff; }
+    html[data-theme="dark"] .screenshot-tab.is-active { color: #fff; }
+    .screenshot-panels { min-height: 320px; min-width: 0; position: relative; }
+    .screenshot-panel { align-items: start; display: none; gap: clamp(24px, 3vw, 40px); grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr); min-width: 0; }
+    .screenshot-panel.is-active { display: grid; }
+    .screenshot-panel-copy { grid-column: 1; max-width: 28rem; padding-top: 16px; text-align: left; }
+    .screenshot-panel-copy h3 { color: var(--text); font-size: clamp(1.625rem, 2.5vw, 2.25rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.2; margin: 0 0 20px; }
+    .screenshot-panel-copy p { color: var(--muted); font-size: 1.125rem; line-height: 1.7; margin: 0; }
+    .screenshot-panel-visual { grid-column: 2; min-width: 0; width: 100%; }
+    .screenshot-panel-frame { background: var(--card); border-radius: 12px; box-shadow: 0 12px 36px rgba(9, 30, 66, .12), 0 0 1px rgba(9, 30, 66, .16); overflow: hidden; }
+    .screenshot-panel-frame img { border: 0; border-radius: 0; box-shadow: none; display: block; height: auto; width: 100%; }
     .wide-heading { max-width: 900px; }
-    .graph-flow { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; }
-    .graph-flow article { background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 22px; position: relative; }
-    .graph-flow article + article::before { color: var(--accent); content: '→'; font-size: 28px; font-weight: 800; left: -26px; position: absolute; top: 42px; }
-    .graph-flow span { align-items: center; background: var(--accent-soft); border-radius: 999px; color: var(--accent); display: inline-flex; font-weight: 800; height: 30px; justify-content: center; width: 30px; }
-    .graph-flow strong { color: var(--text); display: block; margin-bottom: 8px; }
-    .graph-flow p, .graph-trinity .wide-heading p { color: var(--muted); }
-    .pillar-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; }
-    .pillar-grid article, .comparison-strip article, .roadmap-faq > div { background: var(--card); border: 1px solid var(--border); border-radius: 4px; box-shadow: none; padding: 22px; }
-    .pillar-grid article span { align-items: center; background: var(--accent-soft); border-radius: 999px; color: var(--accent); display: inline-flex; font-weight: 800; height: 28px; justify-content: center; width: 28px; }
-    .pillar-grid h3, .comparison-strip h3 { margin-bottom: 6px; }
-    .pillar-grid p, .comparison-strip p, .roadmap-faq p, .code-showcase p { color: var(--muted); }
-    .install-section { align-items: start; background: var(--card-muted); border: 1px solid var(--border); border-radius: 4px; display: grid; gap: 28px; grid-template-columns: .9fr 1.1fr; padding: 28px; }
-    .install-section p { color: var(--muted); }
-    .install-section ol { counter-reset: install; display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }
-    .install-section li { background: var(--card); border: 1px solid var(--border); border-radius: 4px; box-shadow: none; display: grid; gap: 8px; padding: 14px; }
-    .install-section li::before { align-items: center; background: var(--accent-soft); border-radius: 999px; color: var(--accent); content: counter(install); counter-increment: install; display: inline-flex; font-weight: 800; height: 24px; justify-content: center; width: 24px; }
-    .install-section code { background: #101214; border-radius: 6px; color: #dfe1e6; display: block; padding: 10px; }
+    .page-lead p { color: var(--muted); font-size: 1.125rem; line-height: 1.7; margin: 0; max-width: 58ch; }
+    .workflow-pipeline-steps { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); list-style: none; margin: 24px 0 0; padding: 0; }
+    .workflow-pipeline-steps li { background: var(--card); border: 1px solid var(--border); border-radius: 8px; display: flex; flex-direction: column; gap: 8px; padding: 20px 18px; }
+    .workflow-pipeline-icon { align-items: flex-start; color: var(--text); display: inline-flex; flex: none; margin-bottom: 4px; }
+    .workflow-pipeline-icon-svg { display: block; flex: none; }
+    .workflow-pipeline-icon-svg path { fill: currentColor; }
+    .workflow-pipeline-label { color: var(--text); font-size: 0.9375rem; font-weight: 700; line-height: 1.35; }
+    .workflow-pipeline-detail { color: var(--muted); font-size: 0.875rem; line-height: 1.5; }
+    .compare-boundaries { margin-top: 0; }
+    .compare-boundaries-heading { font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 24px; }
+    .compare-boundaries-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
+    .compare-boundaries-grid article { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 22px; }
+    .compare-boundaries--muted .compare-boundaries-grid article { background: var(--card-muted); }
+    .compare-boundaries-icon { color: var(--text); display: inline-flex; margin-bottom: 14px; }
+    .compare-boundaries-grid h3 { font-size: 1.125rem; font-weight: 700; margin: 0 0 8px; }
+    .compare-boundaries-grid p { color: var(--muted); font-size: 0.9375rem; line-height: 1.6; margin: 0; }
+    .graph-trinity { text-align: left; }
+    .graph-trinity-heading { margin: 0 0 clamp(24px, 3vw, 36px); max-width: 58ch; }
+    .graph-trinity-heading h2 { font-size: clamp(1.35rem, 2.2vw, 1.9rem); letter-spacing: -.015em; line-height: 1.2; margin: 0 0 12px; }
+    .graph-trinity-heading p { color: var(--muted); font-size: 1.0625rem; line-height: 1.65; margin: 0; }
+    .graph-flow { align-items: stretch; display: grid; gap: clamp(10px, 1.5vw, 16px); grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); margin: 0; }
+    .graph-flow-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); box-sizing: border-box; display: flex; flex-direction: column; min-height: 100%; padding: clamp(20px, 2.5vw, 24px); }
+    .graph-flow-step { align-items: center; background: var(--accent-soft); border-radius: 999px; color: var(--accent); display: inline-flex; flex: none; font-size: 0.875rem; font-weight: 800; height: 32px; justify-content: center; line-height: 1; margin: 0 0 14px; width: 32px; }
+    .graph-flow-card-title { color: var(--text); font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; margin: 0 0 6px; }
+    .graph-flow-card-lead { color: var(--text); flex: none; font-size: 1rem; font-weight: 700; line-height: 1.35; margin: 0 0 10px; }
+    .graph-flow-card-body { color: var(--muted); flex: 1 1 auto; font-size: 0.9375rem; line-height: 1.6; margin: 0; }
+    .graph-flow-arrow { align-self: center; color: var(--accent); display: flex; flex: none; font-size: 1.5rem; font-weight: 800; justify-content: center; line-height: 1; padding: 0 2px; user-select: none; }
+    .comparison-strip-heading { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.2; margin: 0 0 clamp(28px, 4vw, 40px); }
+    .comparison-strip-grid { display: grid; gap: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
+    .comparison-strip-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: none; display: flex; flex-direction: column; min-height: clamp(260px, 24vw, 320px); padding: 32px 28px 36px; }
+    .comparison-strip-icon { align-items: flex-start; color: var(--text); display: inline-flex; flex: none; margin: 0 0 24px; min-height: 40px; }
+    .comparison-strip-icon-svg { display: block; flex: none; }
+    .comparison-strip-icon-svg path { fill: currentColor; }
+    .comparison-strip-card-title { color: var(--text); font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; margin: 0 0 12px; }
+    .comparison-strip-card-lead { color: var(--muted); flex: 1 1 auto; font-size: 0.9375rem; line-height: 1.55; margin: 0; }
+    .comparison-strip-card-gap { color: var(--text); flex: none; font-size: 0.9375rem; font-weight: 700; line-height: 1.45; margin: auto 0 0; padding-top: 16px; }
+    .home-faq .wide-heading p, .code-showcase p { color: var(--muted); }
+    .install-section { background: var(--card-muted); border: 1px solid var(--border); border-radius: 8px; box-sizing: border-box; display: grid; gap: 0; grid-template-columns: 1fr; margin-inline: auto; max-width: min(100%, 720px); padding: clamp(24px, 4vw, 32px); width: 100%; }
+    .install-section h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 14px; }
+    .install-lead { color: var(--muted); font-size: 1rem; line-height: 1.65; margin: 0 0 22px; }
+    .install-block { margin: 0 0 20px; }
+    .install-block-label { color: var(--text); font-size: 0.9375rem; font-weight: 600; line-height: 1.4; margin: 0 0 8px; }
+    .install-detail { color: var(--muted); font-size: 0.9375rem; line-height: 1.65; margin: 0 0 12px; }
+    .install-guide { margin: 4px 0 0; }
+    .install-guide-link { font-size: 0.9375rem; font-weight: 600; text-decoration: none; }
+    .install-guide-link:hover { text-decoration: underline; }
+    .install-code { position: relative; }
+    .install-code code { background: var(--code-surface); border: 1px solid var(--border); border-radius: 8px; color: var(--code-text); display: block; font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace; font-size: 15px; line-height: 1.45; padding: 14px 48px 14px 14px; white-space: pre-wrap; word-break: break-word; }
+    .install-copy-btn { align-items: center; background: transparent; border: 0; border-radius: 6px; color: var(--muted); cursor: pointer; display: inline-flex; height: 32px; justify-content: center; padding: 0; position: absolute; right: 6px; top: 6px; width: 32px; }
+    .install-copy-btn-text { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; }
+    .install-copy-icon { display: block; flex: none; }
+    .install-copy-icon polyline, .install-copy-icon rect { stroke: currentColor; }
+    .install-copy-btn:hover { background: var(--accent-soft); color: var(--accent); }
+    .install-copy-btn.is-copied { background: var(--accent-soft); color: var(--accent); }
     .code-showcase { align-items: start; display: grid; gap: 24px; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
     .code-tabs { display: grid; gap: 14px; }
-    .code-tabs > div { background: #101214; border-radius: 4px; color: #dfe1e6; overflow: hidden; }
-    .code-tabs strong { background: #1f2428; color: #fff; display: block; padding: 10px 14px; }
-    pre { margin: 0; overflow-x: auto; padding: 14px; white-space: pre-wrap; }
-    code { font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace; font-size: 12px; }
-    .comparison-strip > div { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
-    .comparison-strip strong { color: var(--text); display: block; font-size: 13px; }
-    .audience-section > div { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
-    .audience-section article { background: var(--card); border: 1px solid var(--border); border-radius: 4px; box-shadow: none; padding: 22px; }
-    .audience-section p { color: var(--muted); }
-    .roadmap-faq { align-items: start; display: grid; gap: 22px; grid-template-columns: 1fr 1fr; }
-    .faq-page { margin: 0 auto; max-width: 1000px; }
-    .faq-category { margin-top: 34px; }
-    .faq-category h3 { border-bottom: 1px solid var(--border); padding-bottom: 10px; }
-    .faq-category details { background: var(--card); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); margin: 10px 0; padding: 14px 16px; }
-    .faq-json-note { background: var(--card-muted); border: 1px solid var(--border); border-radius: 10px; margin-top: 32px; padding: 18px; }
-    .faq-json-note p { color: var(--muted); }
-    .roadmap-faq ul { display: grid; gap: 8px; padding-left: 20px; }
-    details { border-top: 1px solid var(--border); padding: 12px 0; }
-    summary { cursor: pointer; font-weight: 700; }
-    .steps-section { margin-top: 32px; }
-    .jira-steps { counter-reset: steps; display: grid; gap: 18px; list-style: none; padding: 0; }
-    .jira-steps li { display: grid; gap: 14px; grid-template-columns: 32px 1fr; }
-    .step-number { align-items: center; background: #deebff; border-radius: 999px; color: #0747a6; display: inline-flex; font-weight: 700; height: 28px; justify-content: center; width: 28px; }
-    .jira-steps h3 { font-size: 17px; margin: 0 0 4px; }
-    .jira-steps p { color: var(--muted); margin: 0; }
-    .related-templates { background: var(--card-muted); margin-top: 68px; padding: 54px 0; }
-    .related-inner { margin: 0 auto; max-width: 1200px; padding: 0 24px; }
-    .related-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
-    .related-card { background: var(--card); border: 1px solid var(--border); border-radius: 4px; box-shadow: var(--shadow); padding: 18px; }
-    .related-preview { background: var(--card-muted); border-radius: 3px; display: grid; gap: 8px; margin-bottom: 14px; padding: 18px; }
-    .related-card h3 { margin: 0 0 8px; }
-    .related-card p { color: var(--muted); }
-    .bottom-cta { background: #101214; color: #fff; margin: 0 auto; max-width: 1200px; padding: 32px; text-align: center; }
-    .bottom-cta h2 { color: #fff; }
-    .site-footer { border-top: 1px solid var(--border); color: var(--muted); }
-    .footer-columns { display: grid; gap: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 auto; max-width: 1200px; }
-    .footer-columns h3 { color: var(--text); font-size: 13px; }
-    .footer-columns a { color: var(--muted); display: block; font-size: 13px; margin: 5px 0; text-decoration: none; }
+    .code-tabs > div { background: var(--code-surface); border: 1px solid var(--border); border-radius: 4px; color: var(--code-text); overflow: hidden; }
+    .code-tabs strong { background: var(--code-header); border-bottom: 1px solid var(--border); color: var(--code-text); display: block; font-size: 0.9375rem; padding: 12px 16px; }
+    pre { background: transparent; color: inherit; margin: 0; overflow-x: auto; padding: 16px 18px; white-space: pre-wrap; }
+    .code-tabs code { font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace; font-size: 0.875rem; line-height: 1.55; }
+    .code-tabs .code-hl-key { color: #0d7a6f; }
+    .code-tabs .code-hl-string { color: #7b4bb7; }
+    .code-tabs .code-hl-keyword { color: #0052cc; }
+    .code-tabs .code-hl-number { color: #de350b; }
+    .code-tabs .code-hl-punct { color: #6b778c; }
+    .code-tabs .code-hl-comment { color: #6b778c; }
+    html[data-theme="dark"] .code-tabs .code-hl-key { color: #4ec9b0; }
+    html[data-theme="dark"] .code-tabs .code-hl-string { color: #c792ea; }
+    html[data-theme="dark"] .code-tabs .code-hl-keyword { color: #569cd6; }
+    html[data-theme="dark"] .code-tabs .code-hl-number { color: #f78c6c; }
+    html[data-theme="dark"] .code-tabs .code-hl-punct { color: #a8b3cf; }
+    html[data-theme="dark"] .code-tabs .code-hl-comment { color: #8b9cb3; }
+    .home-faq { margin-left: auto; margin-right: auto; max-width: 920px; padding-bottom: 12px; text-align: center; }
+    .home-faq-title { font-size: clamp(2.35rem, 5vw, 3.25rem); font-weight: 800; letter-spacing: -.03em; margin: 0 0 40px; text-align: center; }
+    .faq-accordion { border-top: 1px solid var(--border); text-align: left; }
+    .faq-item { border-bottom: 1px solid var(--border); }
+    .faq-item summary { align-items: center; cursor: pointer; display: flex; gap: 14px; justify-content: space-between; list-style: none; padding: 22px 0; }
+    .faq-item summary::-webkit-details-marker { display: none; }
+    .faq-question { color: var(--text); flex: 1; font-size: 1.3125rem; font-weight: 600; line-height: 1.45; min-width: 0; transition: color .15s ease; }
+    .faq-item summary:hover .faq-question { color: var(--accent); }
+    .faq-toggle { align-items: center; background: var(--accent); border-radius: 50%; color: #fff; display: inline-flex; flex: none; height: 32px; justify-content: center; padding: 0; width: 32px; }
+    .faq-toggle::before { content: '+'; display: block; font-size: 22px; font-weight: 500; line-height: 1; }
+    .faq-item[open] .faq-toggle::before { content: '−'; font-size: 24px; }
+    .faq-answer { padding: 0 0 24px; }
+    .faq-answer p { color: var(--muted); font-size: 1.0625rem; line-height: 1.7; margin: 0; max-width: 820px; }
+    .home-faq .faq-json-note { color: var(--muted); font-size: 13px; margin-top: 28px; text-align: center; }
+    .steps-section { box-sizing: border-box; margin-top: 0; max-width: 1200px; padding: clamp(8px, 2vw, 24px) 0 0; width: 100%; }
+    .steps-section h2 { font-size: clamp(1.75rem, 3.2vw, 2.375rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; margin: 0 0 clamp(36px, 5vw, 56px); }
+    .jira-steps { display: grid; gap: clamp(28px, 4vw, 40px) clamp(32px, 4vw, 56px); grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
+    .jira-steps li { align-items: start; display: grid; gap: 16px; grid-template-columns: 40px 1fr; }
+    .step-number { align-items: center; color: var(--accent); display: inline-flex; flex: none; height: 32px; justify-content: center; margin-top: 2px; width: 32px; }
+    .step-number-icon-svg { display: block; flex: none; }
+    .step-number-icon-svg path { fill: currentColor; }
+    .jira-steps h3 { color: var(--text); font-size: clamp(1.125rem, 2vw, 1.3125rem); font-weight: 400; line-height: 1.55; margin: 0; }
+    .jira-steps h3 strong { font-weight: 700; }
+    .bottom-cta { background: rgb(var(--ui-accent-rgb, 0 82 204)); box-sizing: border-box; color: #fff; margin: clamp(80px, 10vw, 120px) calc(50% - 50vw) 0; max-width: none; padding: clamp(64px, 8vw, 96px) max(clamp(18px, 5vw, 72px), calc((100vw - 1280px) / 2)); text-align: center; width: 100vw; }
+    .bottom-cta__inner { margin-inline: auto; max-width: 900px; }
+    .bottom-cta h2 { color: #fff; font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; margin: 0 0 clamp(24px, 3vw, 36px); }
+    .bottom-cta .wg-btn { background: #fff; color: rgb(var(--ui-accent-rgb, 0 82 204)); }
+    .bottom-cta .wg-btn:hover:not(:disabled) { background: #ebecf0; color: rgb(var(--ui-accent-hover-rgb, 0 101 255)); }
+    .site-footer { background: var(--bg); color: var(--muted); margin-top: 0; padding: clamp(48px, 6vw, 72px) clamp(18px, 5vw, 72px) clamp(32px, 4vw, 48px); }
+    .site-footer__panel { background: var(--card-muted); border-radius: 16px; margin: 0 auto; max-width: 1200px; padding: clamp(40px, 5vw, 56px) clamp(28px, 4vw, 48px); }
+    .site-footer__grid { align-items: start; display: grid; gap: clamp(32px, 4vw, 48px); grid-template-columns: minmax(180px, 1.2fr) repeat(3, minmax(0, 1fr)); }
+    .site-footer__brand { display: flex; flex-direction: column; gap: 24px; }
+    .site-footer__logo { display: inline-block; line-height: 0; text-decoration: none; }
+    .site-footer__logo img { display: block; height: 22px; max-width: min(168px, 100%); width: auto; }
+    html[data-theme="dark"] .site-footer__logo img { filter: brightness(0) invert(1); }
+    .site-footer__brand-links { display: flex; flex-direction: column; gap: 10px; }
+    .site-footer__brand-links a, .footer-column a { color: var(--footer-link-color); display: block; font-size: 1rem; font-weight: 400; line-height: 1.5; text-decoration: none; }
+    .site-footer__brand-links a:hover, .footer-column a:hover { color: var(--accent); text-decoration: none; }
+    .footer-columns { display: contents; }
+    .footer-column { display: flex; flex-direction: column; }
+    .footer-column h3 { color: var(--footer-heading-color); font-size: 0.9375rem; font-weight: 700; letter-spacing: .05em; line-height: 1.35; margin: 0 0 20px; text-transform: uppercase; }
+    .footer-column a { margin: 0 0 10px; }
+    .footer-column a:last-child { margin-bottom: 0; }
+    .site-footer__bottom { align-items: center; display: flex; flex-wrap: wrap; gap: 16px 28px; justify-content: space-between; margin: 28px auto 0; max-width: 1200px; }
+    .site-footer__copy { color: var(--muted); font-size: 1rem; line-height: 1.5; margin: 0; }
+    .site-footer__legal { align-items: center; display: flex; flex-wrap: wrap; gap: 8px 24px; }
+    .site-footer__legal a { color: var(--footer-link-color); font-size: 1rem; font-weight: 400; text-decoration: none; }
+    .site-footer__legal a:hover { color: var(--accent); }
     ${UI_BUTTON_CSS}
+    .site-main .wg-btn, .bottom-cta .wg-btn { border-radius: 999px; font-weight: 600; }
+    .site-main .wg-btn--lg, .bottom-cta .wg-btn--lg { font-size: 1.0625rem; padding: 12px 22px; }
+    .site-main .wg-btn--md { font-size: 0.9375rem; padding: 10px 18px; }
+    .site-main .wg-btn--sm { font-size: 0.875rem; padding: 8px 16px; }
+    .site-control-btn { font-size: 0.875rem; font-weight: 600; }
     ${UI_BADGE_CSS}
-    @media (max-width: 760px) {
-      .site-header { align-items: flex-start; flex-direction: column; gap: 12px; position: static; }
-      .site-nav { display: grid; gap: 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
-      .site-controls { justify-content: space-between; width: 100%; }
+    @media (min-width: 1025px) and (max-width: 1280px) {
+      .site-header { gap: 14px; }
+      .site-nav a { font-size: 0.9375rem; padding: 8px 8px; }
+    }
+    @media (max-width: 1024px) {
+      html.is-nav-scroll-locked { overflow: hidden; }
+      .site-header { align-items: center; backdrop-filter: none; background: var(--bg); flex-wrap: nowrap; gap: 0 12px; }
+      html[data-theme="dark"] .site-header { background: var(--bg); }
+      .site-brand { flex: 1; min-width: 0; }
+      .site-brand .site-brand-logo { display: none; }
+      .site-brand .site-brand-emblem { display: block; height: 24px; }
+      .site-header-actions { flex: none; margin-left: auto; }
+      .site-control-btn.site-nav-toggle { display: inline-flex; }
+      .site-nav { display: none; flex: none; min-width: 0; }
+      .site-header.is-nav-open { align-content: start; background: var(--bg); box-sizing: border-box; display: grid; gap: 0 12px; grid-template-areas: "brand actions" "nav nav"; grid-template-columns: 1fr auto; grid-template-rows: auto minmax(0, 1fr); height: 100dvh; inset: 0; padding: calc(16px + env(safe-area-inset-top, 0px)) clamp(18px, 5vw, 32px) max(16px, env(safe-area-inset-bottom, 0px)); position: fixed; width: 100vw; z-index: 110; }
+      .site-header.is-nav-open .site-brand { align-self: center; grid-area: brand; }
+      .site-header.is-nav-open .site-header-actions { align-self: center; grid-area: actions; margin-left: 0; }
+      .site-header.is-nav-open .site-nav { align-items: stretch; background: transparent; border-top: none; box-sizing: border-box; display: flex; flex-direction: column; gap: 0; grid-area: nav; height: auto; inset: auto; justify-content: flex-start; margin: 4px 0 0; max-height: none; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 0; position: relative; width: 100%; -webkit-overflow-scrolling: touch; }
+      .site-header.is-nav-open .site-nav a { font-size: 1.25rem; padding: 10px 4px; white-space: normal; }
       h1 { font-size: clamp(2rem, 12vw, 3.1rem); }
-      .visual-board { grid-template-columns: repeat(2, 1fr); }
-      .content-layout { grid-template-columns: 1fr; }
-      .template-aside { position: static; }
-      .proof-stats, .graph-flow, .pillar-grid, .install-section, .code-showcase, .audience-section > div, .comparison-strip > div, .roadmap-faq, .related-grid, .footer-columns, .screenshot-grid { grid-template-columns: 1fr; }
-      .graph-flow article + article::before { content: none; }
-      table { display: block; overflow-x: auto; white-space: nowrap; }
+      .site-section-band { padding-inline: var(--site-shell-inline-pad); }
+      .screenshot-tab { font-size: 1.125rem; padding: 7px 14px; }
+      .screenshot-tablist { flex-wrap: nowrap; justify-content: flex-start; margin-bottom: 28px; -webkit-overflow-scrolling: touch; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
+      .screenshot-panel.is-active { grid-template-columns: 1fr; }
+      .screenshot-panel-copy, .screenshot-panel-visual { grid-column: 1; }
+      .screenshot-panel-copy { max-width: none; }
+      .screenshot-panel-visual { margin-top: 8px; }
+      .jira-steps { gap: 28px; grid-template-columns: 1fr; }
+      .home-flow .home-pillars .section-grid { gap: 40px; grid-template-columns: 1fr; }
+      .graph-flow { gap: 16px; grid-template-columns: 1fr; }
+      .graph-flow-arrow { justify-self: center; padding: 4px 0; transform: rotate(90deg); }
+      .icon-label-grid, .install-section, .code-showcase, .feature-columns, .comparison-strip-grid, .workflow-pipeline-steps, .compare-boundaries-grid { grid-template-columns: 1fr; }
+      .site-footer__grid { grid-template-columns: 1fr; }
+      .footer-columns { display: grid; gap: 32px; grid-template-columns: 1fr; }
+      .icon-label-grid { column-gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
+      .icon-label-grid-label { max-width: none; }
+      .feature-column h3, .feature-column p { max-width: none; }
     }
   </style>
 </head>
 <body>
   <header class="site-header">
-    <a class="site-brand" href="/">Work Graph</a>
-    ${renderNav(locale, theme)}
-    ${renderThemeLocaleControls(locale, theme)}
+    ${renderSiteBrand(locale)}
+    ${renderNav(locale, page.route ?? '/')}
+    <div class="site-header-actions">
+      ${renderHeaderGithubButton(locale)}
+      ${renderThemeLocaleControls(locale, theme)}
+      ${renderNavToggle(locale)}
+    </div>
   </header>
   <main class="site-main">
-    <article class="site-shell">
+    <article class="site-shell${page.kind === 'home' ? ' site-shell--home' : ' site-shell--page'}">
       <header class="hero">
-        <p class="eyebrow">${escapeHtml(copy.hero.eyebrow)}</p>
         <h1>${escapeHtml(page.title)}</h1>
         <p>${escapeHtml(page.description)}</p>
         <div class="cta-row">
@@ -729,31 +1254,15 @@ export function renderPublicSiteHtml(page, options = {}) {
           ${secondaryButton}
         </div>
       </header>
-      ${page.kind === 'faq' ? renderFaqPage(locale) : `${renderHeroVisual(locale)}
-      <div class="content-layout">
-        ${renderTemplateAside(copy, locale, theme)}
-        <div class="article-column">
-          <div class="section-grid">${page.sections.map((section) => renderSection(section, copy)).join('')}</div>
-          ${renderSteps(copy, locale)}
-        </div>
-      </div>
-      ${page.kind === 'home' ? `${renderScreenshotGallery(locale)}${renderHomeExpansion(locale)}` : ''}`}
+      ${page.kind === 'home' || page.kind === 'product' ? `<div class="home-hero-preview-wrap">${renderHeroVisual(locale, theme)}</div>` : ''}
+      ${page.kind === 'home'
+    ? `<div class="home-flow">${renderHomePageSections(locale, copy, page)}</div>`
+    : renderPageBlocks(page, locale, copy)}
     </article>
-    ${renderRelatedTemplates(locale, theme)}
     ${renderBottomCta(copy, locale, theme)}
   </main>
-  <footer class="site-footer">
-    ${renderFooterColumns(locale)}
-    <span>schema: ${PUBLIC_SITE_SCHEMA}</span>
-  </footer>
-  <script>
-    document.addEventListener('click', function (event) {
-      var link = event.target.closest('a[data-locale-value], a[data-theme-toggle]');
-      if (!link) return;
-      if (link.dataset.localeValue) localStorage.setItem('workGraphPublicSiteLocale', link.dataset.localeValue);
-      if (link.dataset.themeValue) localStorage.setItem('workGraphPublicSiteTheme', link.dataset.themeValue);
-    });
-  </script>
+  ${renderFooter(locale)}
+  <script>${renderPublicSiteControlsScript()}</script>
 </body>
 </html>`;
 }
@@ -774,40 +1283,43 @@ export function handlePublicSiteRequest(request, response, url) {
   const method = request.method ?? 'GET';
   if (method !== 'GET') return false;
 
-  const locale = normalizeLocale(url.searchParams.get('lang') ?? 'en');
+  const locale = normalizeLocale(
+    url.searchParams.get('lang') ?? localeFromPathname(url.pathname),
+  );
   const theme = normalizeTheme(url.searchParams.get('theme') ?? 'light');
+  const routePathname = stripLocalePathPrefix(url.pathname);
 
-  if (url.pathname === '/llms.txt') {
+  if (routePathname === '/llms.txt') {
     sendText(response, 200, buildLlmsTxt(), 'text/plain');
     return true;
   }
 
-  if (url.pathname === '/.well-known/mcp.json') {
+  if (routePathname === '/.well-known/mcp.json') {
     sendJson(response, 200, buildMcpDiscovery());
     return true;
   }
 
-  if (url.pathname === '/faq.json') {
+  if (routePathname === '/faq.json') {
     sendJson(response, 200, buildFaqJsonLd(locale));
     return true;
   }
 
-  if (url.pathname === '/api/docs/bvc-authoring-context') {
+  if (routePathname === '/api/docs/bvc-authoring-context') {
     sendJson(response, 200, buildDocsContext('bvc-authoring'));
     return true;
   }
 
-  if (url.pathname === '/api/docs/mcp-tools-context') {
+  if (routePathname === '/api/docs/mcp-tools-context') {
     sendJson(response, 200, buildDocsContext('mcp-tools'));
     return true;
   }
 
-  if (url.pathname === '/api/docs/errors-context') {
+  if (routePathname === '/api/docs/errors-context') {
     sendJson(response, 200, buildDocsContext('errors'));
     return true;
   }
 
-  const markdownMatch = url.pathname.match(/^\/docs\/([^/.]+)\.md$/u);
+  const markdownMatch = routePathname.match(/^\/docs\/([^/.]+)\.md$/u);
   if (markdownMatch) {
     const markdown = renderPublicDocMarkdown(markdownMatch[1], locale);
     if (markdown == null) return false;
@@ -815,7 +1327,7 @@ export function handlePublicSiteRequest(request, response, url) {
     return true;
   }
 
-  const bvcExampleMatch = url.pathname.match(/^\/docs\/([^/.]+)\.bvc\.example$/u);
+  const bvcExampleMatch = routePathname.match(/^\/docs\/([^/.]+)\.bvc\.example$/u);
   if (bvcExampleMatch) {
     const example = renderBvcExample(bvcExampleMatch[1]);
     if (example == null) return false;
@@ -823,17 +1335,18 @@ export function handlePublicSiteRequest(request, response, url) {
     return true;
   }
 
-  if (url.pathname === '/docs.md') {
+  if (routePathname === '/docs.md') {
+    const docsPrefix = locale === 'en' ? '/en' : '';
     const body = `# Work Graph Docs\n\n${PUBLIC_DOCS.map((doc) => {
       const localized = getPublicSitePage(`/docs/${doc.slug}`, locale);
-      return `- [${localized.title}](/docs/${doc.slug}.md?lang=${locale}): ${localized.description}`;
+      return `- [${localized.title}](${docsPrefix}/docs/${doc.slug}.md): ${localized.description}`;
     }).join('\n')}\n`;
     sendText(response, 200, body, 'text/markdown');
     return true;
   }
 
   if (url.searchParams.get('format') === 'markdown') {
-    const docSlug = url.pathname === '/docs' ? null : url.pathname.match(/^\/docs\/([^/.]+)$/u)?.[1];
+    const docSlug = routePathname === '/docs' ? null : routePathname.match(/^\/docs\/([^/.]+)$/u)?.[1];
     const markdown = docSlug
       ? renderPublicDocMarkdown(docSlug, locale)
       : `# Work Graph\n\n${buildLlmsTxt()}`;
@@ -842,9 +1355,9 @@ export function handlePublicSiteRequest(request, response, url) {
     return true;
   }
 
-  const page = getPublicSitePage(url.pathname, locale);
+  const page = getPublicSitePage(routePathname, locale);
   if (!page) return false;
-  sendText(response, 200, renderPublicSiteHtml(page, { locale, theme }), 'text/html');
+  sendText(response, 200, renderPublicSiteHtml(page, { locale, theme, route: routePathname }), 'text/html');
   return true;
 }