Initial commit: сайт-блог генеалога на Astro

src/content.config.ts

@@ -0,0 +1,18 @@
+import { z, defineCollection } from 'astro:content';
+import { glob } from 'astro/loaders';
+
+const blog = defineCollection({
+  loader: glob({ pattern: '**/*.md', base: './src/content/blog' }),
+  schema: z.object({
+    title: z.string(),
+    description: z.string(),
+    pubDate: z.date(),
+    updatedDate: z.date().optional(),
+    author: z.string().default('Генеалог'),
+    tags: z.array(z.string()).default([]),
+    image: z.string().optional(),
+    draft: z.boolean().default(false),
+  }),
+});
+
+export const collections = { blog };

src/content/blog/5-oshibok-nachinayuschego-genealoga.md

@@ -0,0 +1,31 @@
+---
+title: "5 главных ошибок начинающего генеалога"
+description: "Самые распространённые ошибки при самостоятельном поиске предков и как их избежать."
+pubDate: 2026-08-19
+author: "Генеалог"
+tags: ["советы", "новичкам", "ошибки"]
+---
+
+Самостоятельный поиск предков — увлекательное занятие, но новички часто совершают одни и те же ошибки. Вот пятерка самых распространённых.
+
+## 1. Надеяться только на интернет
+
+Многие думают, что всю информацию можно найти онлайн. Реальность такова: в интернете доступно не более 10–15% архивных документов. Остальное — только в читальных залах.
+
+## 2. Не записывать источники
+
+Вы нашли запись о рождении прадеда. Но через месяц вы уже не вспомните, в каком именно деле и фонде её видели. Ведите картотеку источников с самого начала.
+
+## 3. Игнорировать альтернативное написание фамилий
+
+До революции фамилии часто писали «на слух». Одна и та же фамилия могла записываться по-разному в разных документах. Проверяйте все варианты.
+
+## 4. Пропускать поколения
+
+Пытаться сразу прыгнуть в XVII век, имея информацию только о деде — верный способ запутаться. Восстанавливайте родословную последовательно, поколение за поколением.
+
+## 5. Стесняться просить помощи
+
+Генеалогия — это наука, у которой есть свои методы. Не бойтесь обращаться к профессионалам или в генеалогические сообщества.
+
+> **Главный совет:** Начинайте с малого. Запишите всё, что знают ваши старшие родственники, систематизируйте эту информацию и только потом идите в архивы.

src/content/blog/dnk-ekspertiza-i-predki.md

@@ -0,0 +1,27 @@
+---
+title: "Как провести ДНК-экспертизу и что она может рассказать о предках"
+description: "ДНК-генеалогия: что могут и чего не могут рассказать генетические тесты о вашем происхождении."
+pubDate: 2026-08-26
+author: "Генеалог"
+tags: ["ДНК", "генетика", "экспертиза"]
+---
+
+ДНК-тесты стали доступны каждому, но многие не понимают, что именно они могут рассказать о предках.
+
+## Что показывает ДНК-тест
+
+- **Этническое происхождение** — примерное распределение предков по географическим регионам
+- **Поиск родственников** — база данных тестируемых для поиска совпадений
+- **Гаплогруппа** — глубинная линия происхождения (Y-хромосома для мужчин, митохондриальная ДНК для всех)
+
+## Что ДНК-тест НЕ показывает
+
+- Конкретных имён и дат
+- Точного места рождения предков
+- Социального статуса
+
+## Как использовать ДНК в генеалогии
+
+ДНК-тест — это инструмент, а не готовый ответ. Он помогает подтвердить или опровергнуть гипотезы, найти потенциальных родственников и определить направление поиска.
+
+> **Мой подход:** Начинайте с архивного поиска, а ДНК используйте как дополнительный инструмент для подтверждения находок и поиска утраченных ветвей.

src/content/blog/gde-iskat-dannye-o-predkah.md

@@ -0,0 +1,36 @@
+---
+title: "Где искать данные о предках: архивы, загсы, базы данных"
+description: "Обзор всех основных источников генеалогической информации в России: от архивов до интернет-баз данных."
+pubDate: 2026-08-12
+author: "Генеалог"
+tags: ["архивы", "источники", "базы данных"]
+---
+
+Источников генеалогической информации в России гораздо больше, чем кажется на первый взгляд. Разберём основные.
+
+## Государственные архивы
+
+Главный источник информации о предках до 1917 года. В России действует система федеральных и региональных архивов:
+
+- **РГАДА** (Москва) — древнейшие документы с XI века
+- **РГИА** (Санкт-Петербург) — документы XIX — начала XX века
+- **ГАРФ** (Москва) — документы советского периода
+- **Областные архивы** — метрические книги, ревизские сказки по конкретным губерниям
+
+## Органы ЗАГС
+
+Для поиска информации советского и постсоветского периода нужно обращаться в архивы ЗАГС. Здесь хранятся записи о рождениях, браках и смертях с 1917 года.
+
+## Онлайн-базы данных
+
+С каждым годом оцифровывается всё больше документов:
+
+- **Память народа** (pamyat-naroda.ru) — участники ВОВ
+- **Подвиг народа** (podvignaroda.ru) — награждённые
+- **FamilySearch** — международный ресурс
+
+## Метрические книги
+
+Основной источник для дореволюционного периода. Записей о рождении, бракосочетании и смерти вели в церквях по сословиям.
+
+> **Совет:** Начинайте поиск с самого простого — опроса родственников. Чем больше имён и дат вы знаете, тем эффективнее будет работа в архивах.

src/content/blog/kak-vosstanovit-rodoslovnuju.md

@@ -0,0 +1,44 @@
+---
+title: "Как восстановить родословную, если утрачены документы"
+description: "Пошаговое руководство по восстановлению семейной истории, когда документы потеряны или уничтожены. С чего начать и куда обращаться."
+pubDate: 2026-08-05
+author: "Генеалог"
+tags: ["родословная", "архивы", "новичкам"]
+---
+
+Потеря документов — не приговор для семейной истории. Даже если в семье не сохранилось ни одной старой фотографии или свидетельства, восстановить родословную вполне реально. Рассказываю, с чего начать.
+
+## Шаг 1. Соберите устную информацию
+
+Первый и самый важный этап — поговорить с родственниками. Особенно с самыми старшими членами семьи.
+
+Что важно узнать:
+- ФИО предков (девичьи фамилии женщин)
+- Даты и места рождения, бракосочетания
+- Сословие (дворяне, мещане, крестьяне, купцы)
+- Вероисповедание
+- Места проживания
+
+## Шаг 2. Определите места поиска
+
+Зная хотя бы примерное место рождения предков, можно определить, в какой архив обращаться. Дореволюционные метрические книги хранятся в областных архивах (ГАВО, ГАРФ, РГАДА и др.).
+
+## Шаг 3. Работа с архивами
+
+Многие архивы сейчас принимают удалённые запросы. Вы можете:
+- Отправить письменный запрос
+- Заказать копии документов
+- Нанять профессионального генеалога для работы в читальном зале
+
+## Шаг 4. Используйте онлайн-ресурсы
+
+Существует несколько крупных баз данных, где можно найти информацию о предках:
+- **Память народа** — документы о участниках ВОВ
+- **FamilySearch** — международная база генеалогических данных
+- **Яндекс.Архив** — оцифрованные метрические книги
+
+> **Важно:** Онлайн-ресурсы — это только начало. Большая часть архивных данных до сих пор не оцифрована и доступна только при личной работе в архиве.
+
+## Что делать, если ничего не нашли?
+
+Не отчаивайтесь. Иногда поиск занимает месяцы. Профессиональный генеалог знает обходные пути: косвенные источники, смежные фонды, альтернативные варианты написания фамилий.

src/layouts/Layout.astro

@@ -0,0 +1,56 @@
+---
+import '../styles/global.css';
+
+export interface Props {
+  title: string;
+  description?: string;
+  canonical?: string;
+}
+
+const { title, description = 'Генеалог — исследование родословной, поиск предков, восстановление семейной истории' } = Astro.props;
+---
+
+<!DOCTYPE html>
+<html lang="ru">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{title}</title>
+    <meta name="description" content={description} />
+    <meta name="robots" content="index, follow" />
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🌳</text></svg>" />
+    {
+      Astro.props.canonical && (
+        <link rel="canonical" href={Astro.props.canonical} />
+      )
+    }
+  </head>
+  <body>
+    <header>
+      <div class="container">
+        <a href="/" class="logo">Генеалог</a>
+        <nav>
+          <a href="/">Главная</a>
+          <a href="/blog">Блог</a>
+          <a href="/about">Обо мне</a>
+          <a href="/contact">Контакты</a>
+        </nav>
+      </div>
+    </header>
+
+    <main>
+      <div class="container">
+        <slot />
+      </div>
+    </main>
+
+    <footer>
+      <div class="container">
+        <div>© {new Date().getFullYear()} Генеалог</div>
+        <div>
+          <a href="/">Главная</a> · <a href="/blog">Блог</a> · <a href="/about">Обо мне</a> · <a href="/contact">Контакты</a>
+        </div>
+      </div>
+    </footer>
+  </body>
+</html>

src/pages/about.astro

@@ -0,0 +1,30 @@
+---
+import Layout from '../layouts/Layout.astro';
+---
+
+<Layout title="Обо мне — Генеалог">
+  <section class="page-header">
+    <h1>Обо мне</h1>
+    <p>Профессиональный генеалог с опытом архивных исследований более 10 лет</p>
+  </section>
+
+  <article style="max-width: var(--content-width); margin: 2rem auto;">
+    <p>
+      Моя работа — помогать людям находить свои корни. Каждая семейная история уникальна, 
+      и я подхожу к каждому исследованию с вниманием и уважением к деталям.
+    </p>
+    <h2>Мой опыт</h2>
+    <ul>
+      <li>Более 50 завершённых генеалогических исследований</li>
+      <li>Работа в архивах Москвы, Санкт-Петербурга, регионов России</li>
+      <li>Опыт поиска в дореволюционных источниках (метрические книги, ревизские сказки)</li>
+      <li>Работа с ДНК-тестами и генетической генеалогией</li>
+    </ul>
+    <h2>Моя философия</h2>
+    <p>
+      Генеалогия — это не просто сбор фактов. Это восстановление живой истории вашей семьи, 
+      понимание судеб предков и их вклада в то, кем мы стали сегодня. 
+      Я верю, что каждая семья заслуживает знать своё прошлое.
+    </p>
+  </article>
+</Layout>

src/pages/blog/[...slug].astro

@@ -0,0 +1,35 @@
+---
+import { getCollection, render } from 'astro:content';
+import Layout from '../../layouts/Layout.astro';
+
+export async function getStaticPaths() {
+  const posts = await getCollection('blog');
+  return posts.map((post) => ({
+    params: { slug: post.id },
+    props: { post },
+  }));
+}
+
+const { post } = Astro.props;
+const { Content } = await render(post);
+---
+
+<Layout title={`${post.data.title} — Блог генеалога`} description={post.data.description}>
+  <article>
+    <h1>{post.data.title}</h1>
+    <div class="meta">
+      <time datetime={post.data.pubDate.toISOString()}>
+        {new Intl.DateTimeFormat('ru-RU', { dateStyle: 'long' }).format(post.data.pubDate)}
+      </time>
+      {post.data.author && <> · {post.data.author}</>}
+      {post.data.tags.length > 0 && (
+        <div class="tags" style="margin-top: 0.5rem;">
+          {post.data.tags.map((tag) => (
+            <span class="tag">{tag}</span>
+          ))}
+        </div>
+      )}
+    </div>
+    <Content />
+  </article>
+</Layout>

src/pages/blog/index.astro

@@ -0,0 +1,37 @@
+---
+import { getCollection } from 'astro:content';
+import Layout from '../../layouts/Layout.astro';
+
+const posts = await getCollection('blog', ({ data }) => !data.draft);
+posts.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
+---
+
+<Layout title="Блог генеалога — статьи о родословной и семейной истории" description="Полезные статьи о генеалогии: как искать предков, где работать с архивами, ДНК-тесты и восстановление родословной">
+  <section class="page-header">
+    <h1>Блог</h1>
+    <p>Полезные статьи о поиске предков, архивных исследованиях и семейной истории</p>
+  </section>
+
+  <div class="blog-grid">
+    {posts.map((post) => (
+      <a href={`/blog/${post.id}`} class="blog-card">
+        <div class="blog-card-body">
+          <h3>{post.data.title}</h3>
+          <div class="meta">
+            <time datetime={post.data.pubDate.toISOString()}>
+              {new Intl.DateTimeFormat('ru-RU', { dateStyle: 'long' }).format(post.data.pubDate)}
+            </time>
+            {post.data.tags.length > 0 && (
+              <div class="tags">
+                {post.data.tags.map((tag) => (
+                  <span class="tag">{tag}</span>
+                ))}
+              </div>
+            )}
+          </div>
+          <p>{post.data.description}</p>
+        </div>
+      </a>
+    ))}
+  </div>
+</Layout>

src/pages/contact.astro

@@ -0,0 +1,31 @@
+---
+import Layout from '../layouts/Layout.astro';
+---
+
+<Layout title="Контакты — Генеалог">
+  <section class="page-header">
+    <h1>Связаться со мной</h1>
+    <p>Расскажите о вашем запросе, и я предложу план исследования</p>
+  </section>
+
+  <form class="contact-form" action="#" method="POST">
+    <label for="name">Ваше имя</label>
+    <input type="text" id="name" name="name" required />
+
+    <label for="email">Email</label>
+    <input type="email" id="email" name="email" required />
+
+    <label for="phone">Телефон (необязательно)</label>
+    <input type="tel" id="phone" name="phone" />
+
+    <label for="message">Опишите ваш запрос</label>
+    <textarea id="message" name="message" required placeholder="Например: хочу узнать историю своей фамилии, знаю прадеда до 1917 года..."></textarea>
+
+    <button type="submit" class="btn btn-primary" style="width: 100%;">Отправить</button>
+  </form>
+
+  <div style="text-align: center; margin-top: 3rem; color: var(--color-text-light);">
+    <p>Или напишите мне напрямую: <strong>genealog@example.com</strong></p>
+    <p>Telegram: <strong>@genealog_expert</strong></p>
+  </div>
+</Layout>

src/pages/index.astro

@@ -0,0 +1,46 @@
+---
+import Layout from '../layouts/Layout.astro';
+---
+
+<Layout title="Генеалог — исследование родословной и семейной истории">
+  <section class="hero">
+    <h1>Восстановим историю вашей семьи</h1>
+    <p>Профессиональное генеалогическое исследование: от архивного поиска до составления родословной книги</p>
+    <a href="/contact" class="btn btn-primary">Заказать исследование</a>
+  </section>
+
+  <section style="margin-top: 3rem;">
+    <h2 class="section-title">Мои услуги</h2>
+    <div class="services-grid">
+      <div class="service-card">
+        <div class="icon">📜</div>
+        <h3>Архивный поиск</h3>
+        <p>Работа в государственных и региональных архивах, поиск метрических книг, ревизских сказок и исповедных ведомостей</p>
+      </div>
+      <div class="service-card">
+        <div class="icon">🧬</div>
+        <h3>ДНК-генеалогия</h3>
+        <p>Анализ генетических тестов, поиск родственников и подтверждение гипотез о происхождении</p>
+      </div>
+      <div class="service-card">
+        <div class="icon">📖</div>
+        <h3>Родословная книга</h3>
+        <p>Составление и оформление родословной с историческими справками, фотографиями и документами</p>
+      </div>
+      <div class="service-card">
+        <div class="icon">🔍</div>
+        <h3>Поиск утраченных связей</h3>
+        <p>Восстановление семейных связей, поиск потомков эмигрантов и утерянных ветвей рода</p>
+      </div>
+    </div>
+  </section>
+
+  <section style="margin-top: 4rem; text-align: center;">
+    <h2 class="section-title">Почему стоит начать?</h2>
+    <p style="max-width: 600px; margin: 0 auto 2rem; color: var(--color-text-light);">
+      Знание своей родословной — это не просто список имён и дат. Это понимание своих корней, 
+      семейных традиций и места вашей семьи в истории страны.
+    </p>
+    <a href="/blog" class="btn btn-outline">Читать блог о генеалогии</a>
+  </section>
+</Layout>

src/pages/rss.xml.ts

@@ -0,0 +1,20 @@
+import rss from '@astrojs/rss';
+import { getCollection } from 'astro:content';
+
+export async function GET(context) {
+  const posts = await getCollection('blog', ({ data }) => !data.draft);
+  posts.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
+
+  return rss({
+    title: 'Блог генеалога',
+    description: 'Полезные статьи о генеалогии, поиске предков и семейной истории',
+    site: context.site,
+    items: posts.map((post) => ({
+      title: post.data.title,
+      pubDate: post.data.pubDate,
+      description: post.data.description,
+      link: `/blog/${post.id}/`,
+    })),
+    customData: '<language>ru-ru</language>',
+  });
+}

src/styles/global.css

@@ -0,0 +1,399 @@
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --color-primary: #1a3a5c;
+  --color-primary-light: #2c5f8a;
+  --color-accent: #c9a84c;
+  --color-accent-light: #e8d48b;
+  --color-bg: #faf8f5;
+  --color-bg-alt: #f0ebe3;
+  --color-text: #2c2c2c;
+  --color-text-light: #6b6b6b;
+  --color-border: #ddd8d0;
+  --color-white: #ffffff;
+  --font-serif: 'Georgia', 'Times New Roman', serif;
+  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --max-width: 1100px;
+  --content-width: 720px;
+}
+
+html {
+  font-size: 18px;
+  line-height: 1.6;
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: var(--font-sans);
+  color: var(--color-text);
+  background: var(--color-bg);
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-serif);
+  color: var(--color-primary);
+  line-height: 1.3;
+}
+
+a {
+  color: var(--color-primary-light);
+  text-decoration: none;
+  transition: color 0.2s;
+}
+
+a:hover {
+  color: var(--color-accent);
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+.container {
+  max-width: var(--max-width);
+  margin: 0 auto;
+  padding: 0 1.5rem;
+}
+
+header {
+  background: var(--color-white);
+  border-bottom: 1px solid var(--color-border);
+  padding: 1rem 0;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+header .container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.logo {
+  font-family: var(--font-serif);
+  font-size: 1.4rem;
+  color: var(--color-primary);
+  font-weight: bold;
+}
+
+.logo:hover {
+  color: var(--color-primary);
+}
+
+nav {
+  display: flex;
+  gap: 2rem;
+  align-items: center;
+}
+
+nav a {
+  font-size: 0.95rem;
+  color: var(--color-text);
+  font-weight: 500;
+}
+
+nav a:hover {
+  color: var(--color-accent);
+}
+
+main {
+  min-height: 60vh;
+  padding: 3rem 0;
+}
+
+footer {
+  background: var(--color-primary);
+  color: var(--color-white);
+  padding: 2.5rem 0;
+  margin-top: 4rem;
+}
+
+footer .container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+footer a {
+  color: var(--color-accent-light);
+}
+
+footer a:hover {
+  color: var(--color-white);
+}
+
+.hero {
+  text-align: center;
+  padding: 4rem 0 3rem;
+}
+
+.hero h1 {
+  font-size: 2.8rem;
+  margin-bottom: 1rem;
+}
+
+.hero p {
+  font-size: 1.2rem;
+  color: var(--color-text-light);
+  max-width: 600px;
+  margin: 0 auto 2rem;
+}
+
+.btn {
+  display: inline-block;
+  padding: 0.75rem 2rem;
+  border-radius: 6px;
+  font-weight: 600;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: all 0.2s;
+  border: none;
+}
+
+.btn-primary {
+  background: var(--color-primary);
+  color: var(--color-white);
+}
+
+.btn-primary:hover {
+  background: var(--color-primary-light);
+  color: var(--color-white);
+}
+
+.btn-outline {
+  background: transparent;
+  color: var(--color-primary);
+  border: 2px solid var(--color-primary);
+}
+
+.btn-outline:hover {
+  background: var(--color-primary);
+  color: var(--color-white);
+}
+
+.blog-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 2rem;
+  margin-top: 2rem;
+}
+
+.blog-card {
+  background: var(--color-white);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  overflow: hidden;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.blog-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
+}
+
+.blog-card-body {
+  padding: 1.5rem;
+}
+
+.blog-card h3 {
+  font-size: 1.2rem;
+  margin-bottom: 0.5rem;
+}
+
+.blog-card .meta {
+  font-size: 0.85rem;
+  color: var(--color-text-light);
+  margin-bottom: 1rem;
+}
+
+.blog-card p {
+  font-size: 0.95rem;
+  color: var(--color-text-light);
+  line-height: 1.5;
+}
+
+.blog-card .tags {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  margin-top: 1rem;
+}
+
+.tag {
+  display: inline-block;
+  padding: 0.2rem 0.6rem;
+  background: var(--color-bg-alt);
+  border-radius: 4px;
+  font-size: 0.8rem;
+  color: var(--color-text-light);
+}
+
+article {
+  max-width: var(--content-width);
+  margin: 0 auto;
+}
+
+article h1 {
+  font-size: 2.2rem;
+  margin-bottom: 0.5rem;
+}
+
+article .meta {
+  font-size: 0.95rem;
+  color: var(--color-text-light);
+  margin-bottom: 2rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+article h2 {
+  font-size: 1.6rem;
+  margin: 2rem 0 1rem;
+}
+
+article h3 {
+  font-size: 1.3rem;
+  margin: 1.5rem 0 0.75rem;
+}
+
+article p {
+  margin-bottom: 1.2rem;
+}
+
+article ul, article ol {
+  margin-bottom: 1.2rem;
+  padding-left: 1.5rem;
+}
+
+article li {
+  margin-bottom: 0.4rem;
+}
+
+article blockquote {
+  border-left: 4px solid var(--color-accent);
+  padding-left: 1rem;
+  margin: 1.5rem 0;
+  color: var(--color-text-light);
+  font-style: italic;
+}
+
+.page-header {
+  text-align: center;
+  padding: 2rem 0 1rem;
+}
+
+.page-header h1 {
+  font-size: 2.2rem;
+}
+
+.page-header p {
+  color: var(--color-text-light);
+  margin-top: 0.5rem;
+}
+
+.section-title {
+  font-size: 1.8rem;
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+.services-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 1.5rem;
+  margin-top: 2rem;
+}
+
+.service-card {
+  background: var(--color-white);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  padding: 2rem;
+  text-align: center;
+  transition: transform 0.2s;
+}
+
+.service-card:hover {
+  transform: translateY(-2px);
+}
+
+.service-card .icon {
+  font-size: 2.5rem;
+  margin-bottom: 1rem;
+}
+
+.service-card h3 {
+  font-size: 1.2rem;
+  margin-bottom: 0.75rem;
+}
+
+.service-card p {
+  font-size: 0.92rem;
+  color: var(--color-text-light);
+  line-height: 1.5;
+}
+
+.contact-form {
+  max-width: 500px;
+  margin: 2rem auto;
+}
+
+.contact-form label {
+  display: block;
+  font-weight: 600;
+  margin-bottom: 0.3rem;
+  font-size: 0.95rem;
+}
+
+.contact-form input,
+.contact-form textarea {
+  width: 100%;
+  padding: 0.7rem;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  font-size: 1rem;
+  font-family: var(--font-sans);
+  margin-bottom: 1rem;
+}
+
+.contact-form textarea {
+  min-height: 140px;
+  resize: vertical;
+}
+
+@media (max-width: 768px) {
+  html {
+    font-size: 16px;
+  }
+
+  header .container {
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  nav {
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 1rem;
+  }
+
+  .hero h1 {
+    font-size: 2rem;
+  }
+
+  .blog-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .services-grid {
+    grid-template-columns: 1fr;
+  }
+}