feat(sprint-5): hero #f9f4e7, doctors real photos + typography site section

- Hero banner: bg #f9f4e7 (pixel-sampled), checks #bf9975, outline btn, real doctor photo
- Doctors: H2 text-3xl, stats #60959c no-bg border-bottom, 6 real photos from site
- Colors: add #f9f4e7 (Hero), fix #b8e6ed (form), #e9e4d4 (pill buttons)
- Typography: add «site state 23.03.2026» table (real font sizes/colors by block)
- Docs: SPRINTS.md Sprint 5 progress, LLM_CONTEXT.md v4.2

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

apps/web/app/blocks/hero/page.tsx

@@ -8,24 +8,24 @@ export const metadata: Metadata = {
 const LLM_HERO_TEXT = `
 БЛОК: Hero-баннер (главный баннер страницы)
 Источник: perm.oclinica.ru/lor — реальный баннер раздела ЛОР
-Версия: v1.0
+Версия: v1.1
 
 ЗАГОЛОВОК СТРАНИЦЫ (H1, над баннером):
 «ЛОР Клиника ухо, горло, нос – медицинский центр лечения ЛОР заболеваний у детей и взрослых»
 Шрифт: Fira Sans, ~26–28px, weight 700, цвет: #53514e (--brand-073m)
 
-СТРУКТУРА БАННЕРА (двухколоночная, фон: #b8e6ed):
-Левая колонка (~50%, белый блок):
+СТРУКТУРА БАННЕРА (двухколоночная, единый фон #f9f4e7):
+Левая колонка (~50%):
   — Заголовок: «ЭНДОСКОПИЧЕСКОЕ ХИРУРГИЧЕСКОЕ ЛЕЧЕНИЕ ЛОР ОРГАНОВ»
     Шрифт: Fira Sans, ~18px, weight 700, uppercase, цвет #111827
   — 3 пункта с галочками (✓ зелёный):
     1. «БЕЗОПАСНО – оперируют хирурги с 15-летним опытом работы»
-    2. «БЕЗ ВНЕШНИХ РАЗРЕЗОВ – хирургия смяткими размерами»
+    2. «БЕЗ ВНЕШНИХ РАЗРЕЗОВ – хирургия сверхмалых размеров»
     3. «БЫСТРО – под наблюдением врача пациент находится 1 сутки»
     Ключевое слово: uppercase bold; описание: обычный текст, ~13px
-  — Кнопка «Узнать стоимость операции» — стиль: bb-btn-primary (#FFA39C)
+  — Кнопка «Узнать стоимость операции» — стиль: bb-btn-outline (светлая, без заливки)
 Правая колонка (~50%):
-  — Фото врача с пациентом, фон #b8e6ed
+  — Фото врача с пациентом
   — Изображение занимает всю высоту блока
 
 ПОД БАННЕРОМ:
@@ -33,18 +33,19 @@ const LLM_HERO_TEXT = `
   — Счётчик просмотров
 
 ЦВЕТА:
-  Фон баннера: #b8e6ed (светло-бирюзовый)
-  Левый блок: #ffffff
-  Кнопка CTA: #FFA39C (--bb-btn-primary)
-  Заголовок: #111827
-  Пункты: ключ #111827 bold, описание #374151
+  Фон баннера: #f9f4e7 (светло-кремовый, единый для всего блока)
+  Кнопка CTA: outline-стиль (светлая), не коралловая
+  Заголовок блока: #111827
+  Пункты: ключевое слово #111827 bold, описание #374151
+  Галочка: цвет бренда (бежевый/золотой ~#bf9975)
 
 ПРАВИЛА:
-✓ Фон баннера всегда #b8e6ed
-✓ Кнопка CTA — всегда primary (#FFA39C)
+✓ Фон баннера всегда #f9f4e7 (светло-кремовый) — единый, без разделения на зоны
 ✓ Заголовок блока uppercase, жирный
+✓ Три пункта с галочками обязательны
 ✕ Не менять фон баннера на другой цвет
-✕ Не убирать все 3 пункта с галочками
+✕ Не разбивать фон на два разных цвета
+✕ Не убирать три пункта с галочками
 `.trim();
 
 const HERO_CHECKS = [
@@ -77,7 +78,7 @@ export default function HeroPage() {
           Hero-баннер
         </h1>
         <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
-          Главный баннер страницы раздела ЛОР — perm.oclinica.ru/lor. Двухколоночный блок с фоном #b8e6ed.
+          Главный баннер страницы раздела ЛОР — perm.oclinica.ru/lor. Двухколоночный блок, единый светло-кремовый фон <strong>#f9f4e7</strong>.
         </p>
       </div>
 
@@ -95,15 +96,15 @@ export default function HeroPage() {
           ЛОР Клиника ухо, горло, нос – медицинский центр лечения ЛОР заболеваний у детей и взрослых
         </h2>
 
-        {/* Баннер */}
+        {/* Баннер — единый светло-кремовый фон */}
         <div
           className="rounded-xl overflow-hidden flex"
-          style={{ background: "#b8e6ed", minHeight: 280, border: "1px solid var(--bb-border)" }}
+          style={{ background: "#f9f4e7", minHeight: 280 }}
         >
-          {/* Левая часть — белый блок */}
+          {/* Левая часть — контент на кремовом фоне */}
           <div
             className="flex flex-col justify-center gap-5 p-8"
-            style={{ background: "#fff", minWidth: "48%", maxWidth: "52%" }}
+            style={{ width: "50%", flexShrink: 0 }}
           >
             <p
               className="text-base font-bold uppercase leading-snug"
@@ -116,7 +117,7 @@ export default function HeroPage() {
                 <li key={c.key} className="flex items-start gap-2 text-sm">
                   <span
                     className="shrink-0 font-bold"
-                    style={{ color: "#22c55e", marginTop: 1 }}
+                    style={{ color: "#bf9975", marginTop: 1 }}
                   >
                     ✓
                   </span>
@@ -130,31 +131,30 @@ export default function HeroPage() {
               ))}
             </ul>
             <div>
-              <button className="bb-btn bb-btn-md bb-btn-primary">
+              <button className="bb-btn bb-btn-md bb-btn-outline">
                 Узнать стоимость операции
               </button>
             </div>
           </div>
 
-          {/* Правая часть — фото-заглушка */}
+          {/* Правая часть — фото врача */}
           <div
-            className="flex-1 flex items-center justify-center"
-            style={{ background: "#b8e6ed" }}
+            className="flex-1 relative overflow-hidden"
+            style={{ minHeight: 280 }}
           >
-            <div className="text-center space-y-2">
-              <div
-                className="w-20 h-20 rounded-full mx-auto flex items-center justify-center text-3xl"
-                style={{ background: "rgba(255,255,255,0.4)" }}
-              >
-                👨‍⚕️
-              </div>
-              <p className="text-xs font-medium" style={{ color: "#0089c3" }}>
-                Фото врача с пациентом
-              </p>
-              <p className="text-[10px]" style={{ color: "#53514e" }}>
-                Фон: #b8e6ed
-              </p>
-            </div>
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src="/hero-doctor.jpg"
+              alt="Врач на приёме с пациентом"
+              style={{
+                width: "100%",
+                height: "100%",
+                objectFit: "cover",
+                objectPosition: "center top",
+                position: "absolute",
+                inset: 0,
+              }}
+            />
           </div>
         </div>
 
@@ -187,45 +187,26 @@ export default function HeroPage() {
         <h2 className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
           Анатомия баннера
         </h2>
-        <div className="grid grid-cols-2 gap-4">
-          {[
-            {
-              zone: "Левый блок (белый)",
-              bg: "#f8fafc",
-              items: [
-                "Заголовок uppercase bold",
-                "3 пункта с галочками ✓",
-                "Кнопка bb-btn-primary",
-              ],
-            },
-            {
-              zone: "Правый блок (#b8e6ed)",
-              bg: "#f0fdfa",
-              items: [
-                "Фото врача с пациентом",
-                "Фон: #b8e6ed (светло-бирюзовый)",
-                "Занимает всю высоту блока",
-              ],
-            },
-          ].map((z) => (
-            <div
-              key={z.zone}
-              className="rounded-xl p-4 space-y-2"
-              style={{ background: z.bg, border: "1px solid var(--bb-border)" }}
-            >
-              <p className="font-semibold text-sm" style={{ color: "var(--bb-text)" }}>
-                {z.zone}
-              </p>
-              <ul className="space-y-1">
-                {z.items.map((item) => (
-                  <li key={item} className="text-xs flex items-start gap-1.5">
-                    <span style={{ color: "var(--brand-053m)" }}>·</span>
-                    <span style={{ color: "var(--bb-text-muted)" }}>{item}</span>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          ))}
+        <div
+          className="rounded-xl p-5 space-y-2"
+          style={{ background: "#f5f0e8", border: "1px solid #d5cfbd" }}
+        >
+          <p className="font-semibold text-sm" style={{ color: "var(--bb-text)" }}>
+            Весь баннер — единый фон <span className="font-mono">#f9f4e7</span>
+          </p>
+          <ul className="space-y-1">
+            {[
+              "Фон: #f9f4e7 (светло-кремовый) — одинаковый для всего блока",
+              "Левая половина (~50%): заголовок uppercase bold + 3 галочки + кнопка outline",
+              "Правая половина (~50%): фото врача с пациентом",
+              "Минимальная высота: ~280px",
+            ].map((item) => (
+              <li key={item} className="text-xs flex items-start gap-1.5">
+                <span style={{ color: "var(--brand-053m)" }}>·</span>
+                <span style={{ color: "var(--bb-text-muted)" }}>{item}</span>
+              </li>
+            ))}
+          </ul>
         </div>
       </section>
 
@@ -261,13 +242,14 @@ export default function HeroPage() {
       </section>
 
       {/* LLM блок */}
-      <LlmBlock path="/blocks/hero" version="v1.0" specText={LLM_HERO_TEXT}>
+      <LlmBlock path="/blocks/hero" version="v1.1" specText={LLM_HERO_TEXT}>
         <LlmSection title="Структура баннера" />
         <LlmTable
           headers={["Зона", "Ширина", "Фон", "Содержимое"]}
           rows={[
-            ["Левый блок", "~50%", "#ffffff", "Заголовок uppercase + 3 галочки + кнопка bb-btn-primary"],
-            ["Правый блок", "~50%", "#b8e6ed", "Фото врача с пациентом"],
+            ["Весь баннер", "100%", "#f9f4e7", "Единый светло-кремовый фон"],
+            ["Левый блок", "~50%", "#f9f4e7 (общий)", "Заголовок uppercase + 3 галочки + кнопка outline"],
+            ["Правый блок", "~50%", "#f9f4e7 (общий)", "Фото врача с пациентом"],
             ["Под баннером", "100%", "#fff", "Кнопки соцсетей + счётчик просмотров"],
           ]}
         />
@@ -280,21 +262,21 @@ export default function HeroPage() {
         <LlmTable
           headers={["Элемент", "Цвет", "Токен"]}
           rows={[
-            ["Фон баннера", "#b8e6ed", "—"],
-            ["Левый блок", "#ffffff", "—"],
-            ["Кнопка CTA", "#FFA39C", "bb-btn-primary"],
+            ["Фон баннера (единый)", "#f9f4e7", "Светло-кремовый фон"],
+            ["Кнопка CTA", "outline-стиль", "bb-btn-outline"],
             ["Заголовок блока", "#111827", "—"],
-            ["Галочка", "#22c55e", "—"],
+            ["Галочка ✓", "#bf9975", "Бежевый (--brand-081m approx.)"],
           ]}
         />
         <LlmSection title="Правила" />
         <LlmRules
           rules={[
-            { ok: true, text: "Фон баннера: #b8e6ed (светло-бирюзовый)" },
-            { ok: true, text: "Кнопка CTA: bb-btn-primary (#FFA39C)" },
+            { ok: true, text: "Фон баннера: #f9f4e7 (светло-кремовый) — единый для всего блока" },
+            { ok: true, text: "Кнопка CTA: bb-btn-outline (светлая)" },
             { ok: true, text: "Заголовок: uppercase, bold" },
-            { ok: true, text: "Три пункта с галочками ✓ (#22c55e)" },
+            { ok: true, text: "Три пункта с галочками ✓ (#bf9975)" },
             { ok: false, text: "Не менять фон баннера на другой цвет" },
+            { ok: false, text: "Не разбивать баннер на два разных цвета фона" },
             { ok: false, text: "Не убирать три пункта с галочками" },
           ]}
         />