<!-- Минималистичная главная страница Wiki-документации для врачей  -->
<!-- Основа: прозрачный фон, одна система шрифтов, два основных цвета -->

<div style="
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     max-width: 1180px;
     margin: 0 auto;
     padding: 32px 24px;
     line-height: 1.45;
">

  <!-- Заголовок -->
  <header style="text-align:center; margin-bottom:48px;">
    <h1 style="
        font-size:2.2rem;
        font-weight:600;
        color:#1a1a1a;
        margin:0;
    ">Документация для врачей</h1>
    <p style="
        font-size:1rem;
        color:#4d4d4d;
        margin-top:8px;
    ">Краткое руководство по работе с личным кабинетом</p>
  </header>

  <!-- Универсальный CSS-класс для карточек -->
  <style>
    .doc-card {
      background: rgba(255,255,255,0.85);      /* полупрозрачный на случай тёмных тем */
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      padding: 20px 24px;
      transition: box-shadow .2s ease, transform .2s ease;
    }
    .doc-card:hover {
      box-shadow: 0 4px 14px rgba(0,0,0,.08);
      transform: translateY(-4px);
    }
    .doc-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill,minmax(260px,1fr));
      gap: 20px;
    }
    .doc-section-title{
      font-size:1.25rem;
      font-weight:600;
      margin:0 0 16px;
      color:#1a1a1a;
    }
    .doc-card h3{
      font-size:1.05rem;
      font-weight:500;
      margin:0 0 6px;
      color:#1a1a1a;
    }
    .doc-card p{
      font-size:.9rem;
      margin:0;
      color:#5c5c5c;
    }
    /* ссылку можно задать всей карточке */
    .doc-link{ text-decoration:none; }
  </style>

  <!-- 1. Начало работы -->
  <section style="margin-bottom:56px;">
    <h2 class="doc-section-title">🚀 Начало работы</h2>
    <div class="doc-grid">
      <a class="doc-link" href="Обзор-ЛК.html">
        <div class="doc-card">
          <h3>Обзор ЛК</h3>
          <p>Ключевые возможности личного кабинета</p>
        </div>
      </a>

      <a class="doc-link" href="Регистрация-и-активация.html">
        <div class="doc-card">
          <h3>Регистрация и активация</h3>
          <p>Пошаговое подключение к системе</p>
        </div>
      </a>

      <a class="doc-link" href="Вход-в-ЛК.html">
        <div class="doc-card">
          <h3>Вход в ЛК</h3>
          <p>Авторизация и восстановление пароля</p>
        </div>
      </a>

      <a class="doc-link" href="Настройка-профиля.html">
        <div class="doc-card">
          <h3>Настройка профиля</h3>
          <p>Данные, предпочтения, уведомления</p>
        </div>
      </a>

      <a class="doc-link" href="Навигация-по-интерфейсу.html">
        <div class="doc-card">
          <h3>Навигация по интерфейсу</h3>
          <p>Основы ориентации в системе</p>
        </div>
      </a>
    </div>
  </section>

  <!-- 2. Заказы и пациенты -->
  <section style="margin-bottom:56px;">
    <h2 class="doc-section-title">👥 Заказы и пациенты</h2>
    <div class="doc-grid">
      <a class="doc-link" href="Типы-заказов.html">
        <div class="doc-card">
          <h3>Типы заказов</h3>
          <p>Отличия и назначение</p>
        </div>
      </a>

      <a class="doc-link" href="Создание-заказа.html">
        <div class="doc-card">
          <h3>Создание заказа</h3>
          <p>Инструкция по первому заказу</p>
        </div>
      </a>

      <a class="doc-link" href="Управление-пациентами.html">
        <div class="doc-card">
          <h3>Управление пациентами</h3>
          <p>База данных и истории</p>
        </div>
      </a>
    </div>
  </section>

  <!-- 3. 3D модели -->
  <section style="margin-bottom:56px;">
    <h2 class="doc-section-title">🦷 3D-модели</h2>
    <div class="doc-grid">
      <a class="doc-link" href="Просмотрщик-сетапа.html">
        <div class="doc-card">
          <h3>Просмотрщик сетапа</h3>
          <p>Работа с 3D-моделями зубов</p>
        </div>
      </a>

      <a class="doc-link" href="Согласование-сетапа.html">
        <div class="doc-card">
          <h3>Согласование сетапа</h3>
          <p>Процесс утверждения</p>
        </div>
      </a>
    </div>
  </section>

  <!-- 4. Дополнительное -->
  <section style="margin-bottom:56px;">
    <h2 class="doc-section-title">⚙️ Дополнительное</h2>
    <div class="doc-grid">
      <a class="doc-link" href="Чаты-и-уведомления.html">
        <div class="doc-card">
          <h3>Чаты и уведомления</h3>
          <p>Коммуникация внутри платформы</p>
        </div>
      </a>

      <a class="doc-link" href="Программа-лояльности.html">
        <div class="doc-card">
          <h3>Программа лояльности</h3>
          <p>Бонусы и скидки</p>
        </div>
      </a>
    </div>
  </section>

  <!-- 5. Справка -->
  <section>
    <h2 class="doc-section-title">📚 Справка</h2>
    <div class="doc-grid">
      <a class="doc-link" href="Поддержка.html">
        <div class="doc-card">
          <h3>Служба поддержки</h3>
          <p>Контакты и подсказки</p>
        </div>
      </a>

      <a class="doc-link" href="FAQ.html">
        <div class="doc-card">
          <h3>FAQ</h3>
          <p>Частые вопросы</p>
        </div>
      </a>
    </div>
  </section>

</div>