javascript

Как в ответы ИИ попасть медицинскому сайту с комплаенсом

  • воскресенье, 15 ноября 2026 г. в 00:00:10
https://habr.com/ru/articles/1107862/

Одна из проблем для медицинских сайтов заключается в том, что описания процедур и состав препаратов затруднительно размещать на странице сайта, которая посвящена услуге. Особенно на лендинге, где довольно строгая структура, а тексты предельно лаконичны. Но таков закон. Комплаенс требуется для подтверждения легитимности самой клиники и методик, которые она использует.

Если помещать блок комплаенса в видимую часть страницы, то это неминуемо приведет к “отказам” - быстрому уходу посетителя с сайта без прохода вглубь. Всё-таки люди приходят на сайт не для того, чтобы выяснить номер лицензии и насладиться чтением закона. Им чаще всего нужна именно услуга: название, что лечим, цена врач, отзывы. Поэтому заказчики сайтов и лендингов часто соглашаются на компромиссное решение, которое предлагают им разработчики: размещать блок комплаенса в футере либо над футером, причем в формате PDF. Это приводит к тому, что ИИ-краулеры просто не видят блок комплаенса либо присваивают ему низкий приоритет для вывода в рекомендациях. Соответственно, в ответ ИИ не попадает та часть сайта, которая должна подтверждать опыт, легальный статус клиники и безопасность процедуры.

Но, как мне кажется, эту проблему несложно решить чисто технически: добавив в дизайн-макет javascript с кнопкой-баннером, которая при клике на ней открывает дополнительный блок комлаенса, закрытый до нажатия кнопки. Этот блок отлично видим и краулеру дата-центров ИИ, и инструментам мониторинга, который применяют регуляторы (Росздравнадзор, ФАС). Такой блок можно разместить в любой части лендинга или главной страницы сайта, даже в самом верху, в виде обычного HTML. В этом случае ему будет присвоен высокий приоритет. К тому же в верхнем блоке можно разместить и разметку медицинского учреждения с адресом, картой, лицензией и каталогом услуг (Shema.org, json).

Вот пример такого лендинга (не пугайтесь внешнего вида, чтобы уместить в один файл HTML, CSS и javascript, дизайн-макет разработан без, так сказать, "архитектурных излишеств". Это предельно схематичный макет с рисунками средствами html5 и SVG.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Стоматология Люми — Идеальная улыбка начинается здесь</title>

<!-- Schema.org JSON-LD -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "Dentist",
      "@id": "https://lumi-dental.ru/#clinic",
      "name": "Стоматология Люми",
      "description": "Современная стоматологическая клиника: имплантация, ортодонтия, седация, детская стоматология.",
      "url": "https://lumi-dental.ru",
      "telephone": "+7 (495) 000-00-00",
      "email": "info@lumi-dental.ru",
      "address": {
        "@type": "PostalAddress",
        "streetAddress": "ул. Тверская, д. 15, стр. 2",
        "addressLocality": "Москва",
        "postalCode": "125009",
        "addressCountry": "RU"
      },
      "geo": {
        "@type": "GeoCoordinates",
        "latitude": 55.7642,
        "longitude": 37.6045
      },
      "openingHoursSpecification": {
        "@type": "OpeningHoursSpecification",
        "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],
        "opens": "09:00",
        "closes": "21:00"
      },
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "4.8",
        "reviewCount": "312",
        "bestRating": "5"
      },
      "license": "ЛО-77-01-019845",
      "foundingDate": "2014-03-12",
      "priceRange": "₽₽",
      "medicalSpecialty": "Dentistry",
      "availableService": [
        {
          "@type": "MedicalProcedure",
          "name": "Имплантация зубов",
          "description": "Установка дентальных имплантатов ведущих мировых производителей.",
          "priceRange": "от 25 000 ₽"
        },
        {
          "@type": "MedicalProcedure",
          "name": "Брекеты",
          "description": "Ортодонтическое лечение: металлические, керамические, сапфировые системы.",
          "priceRange": "от 45 000 ₽"
        },
        {
          "@type": "MedicalProcedure",
          "name": "Седация",
          "description": "Лечение во сне под контролем анестезиолога.",
          "priceRange": "от 5 000 ₽"
        },
        {
          "@type": "MedicalProcedure",
          "name": "Профессиональная чистка",
          "description": "Ультразвуковая чистка и Air Flow.",
          "priceRange": "от 4 500 ₽"
        },
        {
          "@type": "MedicalProcedure",
          "name": "Детская стоматология",
          "description": "Лечение молочных и постоянных зубов у детей.",
          "priceRange": "от 2 000 ₽"
        },
        {
          "@type": "MedicalProcedure",
          "name": "Протезирование",
          "description": "Коронки, виниры, мостовидные и съёмные протезы.",
          "priceRange": "от 15 000 ₽"
        }
      ],
      "employee": [
        {"@type":"Physician","name":"Иванов А.С.","jobTitle":"Стоматолог-хирург, имплантолог","yearsOfExperience":15},
        {"@type":"Physician","name":"Петрова М.И.","jobTitle":"Ортодонт","yearsOfExperience":12},
        {"@type":"Physician","name":"Сидоров В.К.","jobTitle":"Стоматолог-терапевт","yearsOfExperience":8},
        {"@type":"Physician","name":"Кузнецова Е.А.","jobTitle":"Детский стоматолог","yearsOfExperience":10}
      ]
    },
    {
      "@type": "FAQPage",
      "mainEntity": [
        {"@type":"Question","name":"Как проходит лечение зубов?","acceptedAnswer":{"@type":"Answer","text":"Лечение начинается с диагностики и составления плана. Все процедуры проводятся с обезболиванием."}},
        {"@type":"Question","name":"Сколько длится имплантация?","acceptedAnswer":{"@type":"Answer","text":"От установки имплантата до финальной коронки — 3–6 месяцев в зависимости от протокола."}},
        {"@type":"Question","name":"Есть ли рассрочка?","acceptedAnswer":{"@type":"Answer","text":"Да, рассрочка 0% на 6 и 12 месяцев через банки-партнёры."}},
        {"@type":"Question","name":"Как подготовиться к приёму?","acceptedAnswer":{"@type":"Answer","text":"Специальная подготовка не требуется. Приходите с действующими снимками, если есть."}},
        {"@type":"Question","name":"Принимаете ли вы детей?","acceptedAnswer":{"@type":"Answer","text":"Да, приём детей ведёт детский стоматолог с 3 лет."}},
        {"@type":"Question","name":"Какая гарантия на услуги?","acceptedAnswer":{"@type":"Answer","text":"Гарантия на имплантацию — 5 лет, на терапевтическое лечение — 1 год."}}
      ]
    }
  ]
}
</script>

<style>
  :root{
    --blue:#1a5fd4;
    --blue-dark:#0f4ab0;
    --blue-soft:#e8f0fe;
    --bg:#f5f8ff;
    --text:#0f172a;
    --muted:#64748b;
    --line:#e2e8f0;
    --white:#ffffff;
    --accent:#f59e0b;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    color:var(--text);
    background:var(--bg);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .container{max-width:1100px;margin:0 auto;padding:0 20px}

  /* HEADER */
  header{
    background:var(--white);
    border-bottom:1px solid var(--line);
    position:sticky;top:0;z-index:50;
  }
  .header-inner{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 20px;max-width:1100px;margin:0 auto;
  }
  .logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px}
  .logo svg{width:28px;height:28px}
  .burger{width:32px;height:32px;display:flex;flex-direction:column;justify-content:center;gap:5px;cursor:pointer;background:none;border:none}
  .burger span{display:block;height:2px;background:var(--text);border-radius:2px}

  /* COMPLIANCE BANNER */
  .compliance-banner{
    background:linear-gradient(90deg,#e8f0fe,#dbeafe);
    border-bottom:1px solid var(--line);
    cursor:pointer;
    transition:background .2s;
  }
  .compliance-banner:hover{background:linear-gradient(90deg,#dbeafe,#c7dcfa)}
  .compliance-inner{
    display:flex;align-items:center;justify-content:center;gap:12px;
    padding:12px 20px;font-size:14px;color:var(--blue-dark);font-weight:500;
  }
  .compliance-inner svg{flex-shrink:0}
  .compliance-panel{
    max-height:0;overflow:hidden;
    transition:max-height .4s ease;
    background:var(--white);
  }
  .compliance-panel.open{max-height:2000px}
  .compliance-content{
    padding:24px 20px;max-width:1100px;margin:0 auto;
  }
  .compliance-content h3{font-size:18px;margin-bottom:12px;color:var(--blue-dark)}
  .compliance-content h4{font-size:15px;margin:16px 0 8px;color:var(--text)}
  .compliance-content p,.compliance-content li{font-size:14px;color:var(--muted);margin-bottom:6px}
  .compliance-content ul{padding-left:20px;margin-bottom:12px}
  .compliance-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:16px;
  }
  .compliance-card{
    background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:16px;
  }
  .compliance-card .tag{
    display:inline-block;font-size:11px;text-transform:uppercase;letter-spacing:.5px;
    color:var(--blue);background:var(--blue-soft);padding:3px 8px;border-radius:4px;margin-bottom:8px;
  }

  /* HERO */
  .hero{
    background:linear-gradient(135deg,#f0f5ff 0%,#e8f0fe 100%);
    padding:48px 0 56px;
  }
  .hero-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;
  }
  .hero h1{
    font-size:44px;line-height:1.1;font-weight:800;margin-bottom:16px;letter-spacing:-.5px;
  }
  .hero h1 span{color:var(--blue)}
  .hero .sub{font-size:17px;color:var(--muted);margin-bottom:24px;max-width:420px}
  .badges{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
  .badge{
    background:var(--white);border:1px solid var(--line);
    padding:8px 14px;border-radius:20px;font-size:14px;font-weight:500;
    display:inline-flex;align-items:center;gap:6px;
  }
  .badge svg{width:14px;height:14px;color:var(--blue)}
  .btn-primary{
    display:inline-block;background:var(--blue);color:#fff;
    padding:14px 32px;border-radius:10px;font-size:16px;font-weight:600;
    border:none;cursor:pointer;text-decoration:none;
    transition:background .2s,transform .1s;
  }
  .btn-primary:hover{background:var(--blue-dark)}
  .btn-primary:active{transform:scale(.98)}
  .hero-visual{
    background:var(--white);border-radius:24px;overflow:hidden;
    box-shadow:0 20px 50px rgba(26,95,212,.12);
    aspect-ratio:4/3;position:relative;
  }
  .hero-visual svg{width:100%;height:100%;display:block}

  /* SECTIONS */
  section{padding:56px 0}
  .section-title{font-size:28px;font-weight:700;margin-bottom:24px}

  /* SERVICES */
  .services{background:var(--white)}
  .service-list{border-top:1px solid var(--line)}
  .service-row{
    display:flex;justify-content:space-between;align-items:center;
    padding:18px 0;border-bottom:1px solid var(--line);
    font-size:16px;
  }
  .service-row .name{display:flex;align-items:center;gap:12px}
  .service-row .name svg{width:20px;height:20px;color:var(--blue)}
  .service-row .price{color:var(--blue);font-weight:600;white-space:nowrap}

  /* DOCTORS */
  .doctors{background:var(--bg)}
  .carousel{position:relative;overflow:hidden}
  .carousel-track{
    display:flex;gap:20px;transition:transform .4s ease;
  }
  .doctor-card{
    flex:0 0 calc(25% - 15px);
    background:var(--white);border-radius:16px;padding:20px 12px;
    text-align:center;box-shadow:0 4px 16px rgba(15,23,42,.05);
  }
  .doctor-avatar{
    width:120px;height:120px;border-radius:50%;margin:0 auto 14px;
    background:linear-gradient(135deg,#dbeafe,#e8f0fe);
    position:relative;overflow:hidden;
    border:3px solid var(--white);
    box-shadow:0 4px 12px rgba(26,95,212,.15);
  }
  .doctor-avatar svg{width:100%;height:100%}
  .doctor-name{font-weight:600;font-size:15px;margin-bottom:4px}
  .doctor-exp{font-size:13px;color:var(--muted)}
  .carousel-btns{
    display:flex;justify-content:center;gap:12px;margin-top:24px;
  }
  .carousel-btn{
    width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
    background:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:all .2s;
  }
  .carousel-btn:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
  .carousel-btn:hover svg{stroke:#fff}
  .carousel-btn svg{width:18px;height:18px;stroke:var(--text)}

  /* RESULTS + REVIEWS */
  .results-reviews{background:var(--white)}
  .rr-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
  .rr-block h3{font-size:22px;font-weight:700;margin-bottom:20px}
  .ba-pair{
    background:var(--bg);border-radius:14px;padding:14px;margin-bottom:14px;
  }
  .ba-label{font-size:12px;text-align:center;color:var(--muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}
  .ba-images{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
  .ba-img{
    aspect-ratio:16/10;border-radius:8px;overflow:hidden;
    background:linear-gradient(135deg,#f1f5f9,#e2e8f0);
    position:relative;
  }
  .ba-img svg{width:100%;height:100%}
  .ba-img .tag{
    position:absolute;top:6px;left:6px;font-size:10px;
    background:rgba(255,255,255,.9);padding:2px 8px;border-radius:10px;font-weight:600;
  }
  .ba-title{text-align:center;font-size:13px;color:var(--muted);font-weight:500}

  .rating-big{display:flex;align-items:center;gap:10px;margin-bottom:20px}
  .rating-num{font-size:42px;font-weight:800;color:var(--text)}
  .stars{display:flex;gap:2px}
  .stars svg{width:22px;height:22px}
  .review{
    background:var(--bg);border-radius:12px;padding:14px 16px;margin-bottom:12px;
    position:relative;
  }
  .review::before{
    content:"“";position:absolute;top:-4px;left:10px;font-size:32px;color:var(--blue);opacity:.3;
  }
  .review p{font-size:14px;margin-bottom:6px;padding-left:14px}
  .review .author{font-size:12px;color:var(--muted);padding-left:14px;font-weight:500}

  /* FAQ */
  .faq{background:var(--bg)}
  .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .faq-item{
    background:var(--white);border:1px solid var(--line);border-radius:12px;
    overflow:hidden;
  }
  .faq-q{
    padding:16px;font-size:15px;font-weight:500;cursor:pointer;
    display:flex;justify-content:space-between;align-items:center;gap:12px;
  }
  .faq-q .icon{
    width:22px;height:22px;border-radius:50%;background:var(--blue-soft);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
    transition:transform .3s;
  }
  .faq-item.open .faq-q .icon{transform:rotate(45deg)}
  .faq-a{
    max-height:0;overflow:hidden;transition:max-height .3s ease;
    padding:0 16px;
  }
  .faq-item.open .faq-a{max-height:200px;padding-bottom:16px}
  .faq-a p{font-size:14px;color:var(--muted)}

  /* BOOKING */
  .booking{background:linear-gradient(135deg,#e8f0fe 0%,#dbeafe 100%);padding:56px 0}
  .booking-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
  .booking-form{
    background:var(--white);border-radius:20px;padding:28px;
    box-shadow:0 10px 40px rgba(26,95,212,.1);
  }
  .booking-form h3{font-size:22px;margin-bottom:20px}
  .field{margin-bottom:14px}
  .field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px;font-weight:500}
  .field input,.field select{
    width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;
    font-size:15px;background:var(--white);font-family:inherit;
    transition:border-color .2s;
  }
  .field input:focus,.field select:focus{outline:none;border-color:var(--blue)}
  .booking-form .btn-primary{width:100%;margin-top:6px}
  .map-wrap{
    background:var(--white);border-radius:20px;overflow:hidden;
    box-shadow:0 10px 40px rgba(26,95,212,.1);
    aspect-ratio:1/1;position:relative;
  }
  .map-wrap svg{width:100%;height:100%;display:block}

  /* FOOTER */
  footer{
    background:#0f172a;color:#cbd5e1;
    padding:20px;text-align:center;font-size:13px;
  }
  footer a{color:#93c5fd;text-decoration:none}

  /* RESPONSIVE */
  @media(max-width:820px){
    .hero-grid,.rr-grid,.booking-grid{grid-template-columns:1fr}
    .doctor-card{flex:0 0 calc(50% - 10px)}
    .faq-grid{grid-template-columns:1fr}
    .hero h1{font-size:34px}
    .hero-visual{max-width:420px;margin:0 auto}
  }
  @media(max-width:480px){
    .doctor-card{flex:0 0 85%}
    .hero h1{font-size:28px}
    .section-title{font-size:24px}
  }
</style>
</head>
<body>

<!-- HEADER -->
<header>
  <div class="header-inner">
    <div class="logo">
      <svg viewBox="0 0 32 32" fill="none">
        <path d="M16 4c-3 0-5 2-6 4-1-1-3-2-5-1-2 1-2 4 0 7 1 2 2 5 3 9 .5 2 1 4 3 4 1.5 0 2-2 2.5-4 .5 2 1 4 2.5 4 2 0 2.5-2 3-4 1-4 2-7 3-9 2-3 2-6 0-7-2-1-4 0-5 1-1-2-3-4-6-4z" fill="#1a5fd4"/>
      </svg>
      Стоматология Люми
    </div>
    <button class="burger" aria-label="Меню">
      <span></span><span></span><span></span>
    </button>
  </div>
</header>

<!-- COMPLIANCE BANNER -->
<div class="compliance-banner" id="complianceBanner" role="button" tabindex="0" aria-expanded="false">
  <div class="compliance-inner">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#0f4ab0" stroke-width="2">
      <path d="M12 2L3 7v6c0 5 4 9 9 10 5-1 9-5 9-10V7l-9-5z"/>
      <path d="M9 12l2 2 4-4"/>
    </svg>
    <span>Комплаенс и правовая информация клиники — нажмите, чтобы раскрыть</span>
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#0f4ab0" stroke-width="2" id="chevronIcon">
      <path d="M6 9l6 6 6-6"/>
    </svg>
  </div>
</div>

<!-- COMPLIANCE PANEL -->
<div class="compliance-panel" id="compliancePanel">
  <div class="compliance-content">
    <h3>📋 Правовая информация и комплаенс</h3>

    <div class="compliance-grid">
      <div class="compliance-card">
        <span class="tag">Данные клиники</span>
        <h4>Стоматология Люми</h4>
        <p>Лицензия: <b>ЛО-77-01-019845</b> от 12.03.2014</p>
        <p>Адрес: г. Москва, ул. Тверская, д. 15, стр. 2</p>
        <p>ИНН: 7701234567 | ОГРН: 1147700000000</p>
        <p>Главный врач: Иванов А.С., стаж 15 лет</p>
      </div>

      <div class="compliance-card">
        <span class="tag">Описание процедур</span>
        <h4>Медицинские услуги</h4>
        <ul>
          <li>Имплантация — системы Straumann, Nobel, Osstem</li>
          <li>Ортодонтия — брекеты Damon, Invisalign</li>
          <li>Седация — пропофол, закись азота (контроль анестезиолога)</li>
          <li>Профгигиена — ультразвук + Air Flow</li>
        </ul>
      </div>

      <div class="compliance-card">
        <span class="tag">Законодательство</span>
        <h4>Реклама мед. услуг</h4>
        <p>Сайт соответствует требованиям:</p>
        <ul>
          <li>ФЗ № 38 «О рекламе» (ст. 24 — мед. услуги)</li>
          <li>ФЗ № 323 «Об основах охраны здоровья»</li>
          <li>Приказ Минздрава № 786н (информированное согласие)</li>
          <li>152-ФЗ «О персональных данных»</li>
        </ul>
      </div>

      <div class="compliance-card">
        <span class="tag">Важно</span>
        <h4>Предупреждение</h4>
        <p>Имеются противопоказания. Необходима консультация специалиста. Результаты лечения индивидуальны и зависят от клинической ситуации.</p>
        <p style="margin-top:8px;font-size:12px;color:#94a3b8">Информация на сайте не является публичной офертой (ст. 437 ГК РФ).</p>
      </div>
    </div>
  </div>
</div>

<!-- HERO -->
<section class="hero">
  <div class="container">
    <div class="hero-grid">
      <div>
        <h1>Идеальная улыбка <span>начинается здесь</span></h1>
        <p class="sub">Современные технологии и забота о вашем комфорте</p>
        <div class="badges">
          <span class="badge">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg>
            Комфортно
          </span>
          <span class="badge">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg>
            Рассрочка 0%
          </span>
          <span class="badge">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg>
            Гарантия 5 лет
          </span>
        </div>
        <a href="#booking" class="btn-primary">Записаться</a>
      </div>
      <div class="hero-visual">
        <!-- SVG-иллюстрация интерьера клиники -->
        <svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice">
          <defs>
            <linearGradient id="floor" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0" stop-color="#f1f5f9"/>
              <stop offset="1" stop-color="#e2e8f0"/>
            </linearGradient>
            <linearGradient id="wall" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0" stop-color="#ffffff"/>
              <stop offset="1" stop-color="#f8fafc"/>
            </linearGradient>
          </defs>
          <!-- Стена -->
          <rect width="400" height="200" fill="url(#wall)"/>
          <!-- Пол -->
          <rect y="200" width="400" height="100" fill="url(#floor)"/>
          <!-- Окно -->
          <rect x="30" y="30" width="120" height="140" rx="4" fill="#dbeafe" stroke="#cbd5e1" stroke-width="2"/>
          <line x1="90" y1="30" x2="90" y2="170" stroke="#cbd5e1" stroke-width="2"/>
          <line x1="30" y1="100" x2="150" y2="100" stroke="#cbd5e1" stroke-width="2"/>
          <!-- Кресло -->
          <g transform="translate(200,100)">
            <!-- Основание -->
            <rect x="-10" y="130" width="100" height="10" rx="3" fill="#94a3b8"/>
            <rect x="30" y="100" width="20" height="40" fill="#64748b"/>
            <!-- Сиденье -->
            <path d="M-20 100 Q-20 80 0 80 L80 80 Q100 80 100 100 L100 120 L-20 120 Z" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1.5"/>
            <!-- Спинка -->
            <path d="M-20 100 L-40 20 Q-42 10 -32 10 L-12 10 Q-2 10 0 20 L0 100 Z" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1.5"/>
            <!-- Подголовник -->
            <rect x="-45" y="0" width="30" height="15" rx="6" fill="#e2e8f0" stroke="#cbd5e1" stroke-width="1.5"/>
            <!-- Подлокотники -->
            <rect x="-25" y="75" width="15" height="30" rx="4" fill="#e2e8f0" stroke="#cbd5e1" stroke-width="1.5"/>
            <rect x="90" y="75" width="15" height="30" rx="4" fill="#e2e8f0" stroke="#cbd5e1" stroke-width="1.5"/>
          </g>
          <!-- Стойка с инструментами -->
          <g transform="translate(300,40)">
            <rect x="0" y="0" width="6" height="160" fill="#94a3b8"/>
            <rect x="-20" y="20" width="46" height="30" rx="4" fill="#e2e8f0" stroke="#cbd5e1"/>
            <!-- Инструменты -->
            <line x1="5" y1="50" x2="5" y2="90" stroke="#64748b" stroke-width="2"/>
            <line x1="15" y1="50" x2="15" y2="95" stroke="#64748b" stroke-width="2"/>
            <line x1="25" y1="50" x2="25" y2="85" stroke="#64748b" stroke-width="2"/>
            <!-- Монитор -->
            <rect x="-30" y="-10" width="60" height="40" rx="3" fill="#1e293b"/>
            <rect x="-26" y="-6" width="52" height="32" fill="#38bdf8" opacity=".3"/>
          </g>
          <!-- Растение -->
          <g transform="translate(20,200)">
            <rect x="0" y="20" width="30" height="40" rx="3" fill="#cbd5e1"/>
            <circle cx="15" cy="10" r="18" fill="#86efac" opacity=".7"/>
            <circle cx="8" cy="5" r="12" fill="#4ade80" opacity=".6"/>
            <circle cx="22" cy="8" r="14" fill="#22c55e" opacity=".5"/>
          </g>
        </svg>
      </div>
    </div>
  </div>
</section>

<!-- SERVICES -->
<section class="services">
  <div class="container">
    <h2 class="section-title">Наши услуги</h2>
    <div class="service-list">
      <div class="service-row">
        <span class="name">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3"/></svg>
          Имплантация
        </span>
        <span class="price">от 25 000 ₽</span>
      </div>
      <div class="service-row">
        <span class="name">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="8" width="16" height="8" rx="2"/><path d="M8 8V6M12 8V5M16 8V6"/></svg>
          Брекеты
        </span>
        <span class="price">от 45 000 ₽</span>
      </div>
      <div class="service-row">
        <span class="name">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a5 5 0 00-5 5v3a5 5 0 0010 0V7a5 5 0 00-5-5z"/><path d="M9 14l-2 8M15 14l2 8"/></svg>
          Седация
        </span>
        <span class="price">от 5 000 ₽</span>
      </div>
      <div class="service-row">
        <span class="name">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12h18M12 3v18"/></svg>
          Профессиональная чистка
        </span>
        <span class="price">от 4 500 ₽</span>
      </div>
      <div class="service-row">
        <span class="name">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M6 20c0-3 3-5 6-5s6 2 6 5"/></svg>
          Детская стоматология
        </span>
        <span class="price">от 2 000 ₽</span>
      </div>
      <div class="service-row">
        <span class="name">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 12h16M4 12c0-3 3-5 8-5s8 2 8 5M4 12c0 3 3 5 8 5s8-2 8-5"/></svg>
          Протезирование
        </span>
        <span class="price">от 15 000 ₽</span>
      </div>
    </div>
  </div>
</section>

<!-- DOCTORS -->
<section class="doctors">
  <div class="container">
    <h2 class="section-title">Наши врачи</h2>
    <div class="carousel" id="doctorCarousel">
      <div class="carousel-track" id="carouselTrack">

        <!-- Doctor 1 -->
        <div class="doctor-card">
          <div class="doctor-avatar">
            <svg viewBox="0 0 120 120">
              <circle cx="60" cy="60" r="58" fill="#dbeafe"/>
              <circle cx="60" cy="45" r="22" fill="#fde68a"/>
              <path d="M30 110 Q30 80 60 80 Q90 80 90 110 Z" fill="#ffffff" stroke="#cbd5e1" stroke-width="1.5"/>
              <path d="M55 80 L60 90 L65 80 Z" fill="#1a5fd4"/>
              <path d="M40 30 Q60 20 80 30 Q85 40 80 45 Q70 38 60 38 Q50 38 40 45 Q35 40 40 30 Z" fill="#475569"/>
              <circle cx="52" cy="45" r="2" fill="#1e293b"/>
              <circle cx="68" cy="45" r="2" fill="#1e293b"/>
              <path d="M55 55 Q60 58 65 55" stroke="#1e293b" stroke-width="1.5" fill="none" stroke-linecap="round"/>
            </svg>
          </div>
          <div class="doctor-name">Иванов А.С.</div>
          <div class="doctor-exp">Стаж 15 лет</div>
        </div>

        <!-- Doctor 2 -->
        <div class="doctor-card">
          <div class="doctor-avatar">
            <svg viewBox="0 0 120 120">
              <circle cx="60" cy="60" r="58" fill="#dbeafe"/>
              <circle cx="60" cy="45" r="22" fill="#fde68a"/>
              <path d="M30 110 Q30 80 60 80 Q90 80 90 110 Z" fill="#ffffff" stroke="#cbd5e1" stroke-width="1.5"/>
              <path d="M50 80 Q60 85 70 80 L65 95 L55 95 Z" fill="#93c5fd"/>
              <path d="M38 35 Q40 15 60 15 Q80 15 82 35 Q85 50 78 55 Q70 45 60 45 Q50 45 42 55 Q35 50 38 35 Z" fill="#92400e"/>
              <circle cx="52" cy="45" r="2" fill="#1e293b"/>
              <circle cx="68" cy="45" r="2" fill="#1e293b"/>
              <path d="M55 55 Q60 58 65 55" stroke="#1e293b" stroke-width="1.5" fill="none" stroke-linecap="round"/>
            </svg>
          </div>
          <div class="doctor-name">Петрова М.И.</div>
          <div class="doctor-exp">Стаж 12 лет</div>
        </div>

        <!-- Doctor 3 -->
        <div class="doctor-card">
          <div class="doctor-avatar">
            <svg viewBox="0 0 120 120">
              <circle cx="60" cy="60" r="58" fill="#dbeafe"/>
              <circle cx="60" cy="45" r="22" fill="#fde68a"/>
              <path d="M30 110 Q30 80 60 80 Q90 80 90 110 Z" fill="#ffffff" stroke="#cbd5e1" stroke-width="1.5"/>
              <path d="M55 80 L60 92 L65 80 Z" fill="#1e293b"/>
              <path d="M42 28 Q60 20 78 28 Q82 38 78 44 Q68 36 60 36 Q52 36 42 44 Q38 38 42 28 Z" fill="#1e293b"/>
              <circle cx="52" cy="45" r="2" fill="#1e293b"/>
              <circle cx="68" cy="45" r="2" fill="#1e293b"/>
              <path d="M54 56 Q60 58 66 56" stroke="#1e293b" stroke-width="1.5" fill="none" stroke-linecap="round"/>
              <path d="M48 50 Q52 48 56 50" stroke="#475569" stroke-width="1" fill="none"/>
              <path d="M64 50 Q68 48 72 50" stroke="#475569" stroke-width="1" fill="none"/>
            </svg>
          </div>
          <div class="doctor-name">Сидоров В.К.</div>
          <div class="doctor-exp">Стаж 8 лет</div>
        </div>

        <!-- Doctor 4 -->
        <div class="doctor-card">
          <div class="doctor-avatar">
            <svg viewBox="0 0 120 120">
              <circle cx="60" cy="60" r="58" fill="#dbeafe"/>
              <circle cx="60" cy="45" r="22" fill="#fde68a"/>
              <path d="M30 110 Q30 80 60 80 Q90 80 90 110 Z" fill="#ffffff" stroke="#cbd5e1" stroke-width="1.5"/>
              <path d="M52 80 Q60 86 68 80 L64 94 L56 94 Z" fill="#fca5a5"/>
              <path d="M38 32 Q42 12 60 12 Q78 12 82 32 Q86 50 80 58 Q70 48 60 48 Q50 48 40 58 Q34 50 38 32 Z" fill="#b45309"/>
              <circle cx="52" cy="45" r="2" fill="#1e293b"/>
              <circle cx="68" cy="45" r="2" fill="#1e293b"/>
              <path d="M55 55 Q60 58 65 55" stroke="#1e293b" stroke-width="1.5" fill="none" stroke-linecap="round"/>
            </svg>
          </div>
          <div class="doctor-name">Кузнецова Е.А.</div>
          <div class="doctor-exp">Стаж 10 лет</div>
        </div>

      </div>
      <div class="carousel-btns">
        <button class="carousel-btn" id="prevBtn" aria-label="Предыдущий">
          <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round"><path d="M15 6l-6 6 6 6"/></svg>
        </button>
        <button class="carousel-btn" id="nextBtn" aria-label="Следующий">
          <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round"><path d="M9 6l6 6-6 6"/></svg>
        </button>
      </div>
    </div>
  </div>
</section>

<!-- RESULTS + REVIEWS -->
<section class="results-reviews">
  <div class="container">
    <div class="rr-grid">
      <div class="rr-block">
        <h3>Результаты</h3>

        <div class="ba-pair">
          <div class="ba-images">
            <div class="ba-img">
              <span class="tag">До</span>
              <svg viewBox="0 0 160 100">
                <rect width="160" height="100" fill="#fef3c7"/>
                <path d="M20 50 Q40 30 60 45 Q80 25 100 45 Q120 30 140 50 Q140 70 120 75 Q100 80 80 75 Q60 80 40 75 Q20 70 20 50 Z" fill="#fef3c7" stroke="#d97706" stroke-width="1.5"/>
                <path d="M35 55 L45 52 L55 58 L65 50 L75 55 L85 48 L95 55 L105 50 L115 55 L125 52" stroke="#fbbf24" stroke-width="2" fill="none"/>
                <circle cx="50" cy="60" r="3" fill="#92400e" opacity=".4"/>
                <circle cx="90" cy="58" r="2" fill="#92400e" opacity=".4"/>
              </svg>
            </div>
            <div class="ba-img">
              <span class="tag">После</span>
              <svg viewBox="0 0 160 100">
                <rect width="160" height="100" fill="#ecfdf5"/>
                <path d="M20 50 Q40 30 60 45 Q80 25 100 45 Q120 30 140 50 Q140 70 120 75 Q100 80 80 75 Q60 80 40 75 Q20 70 20 50 Z" fill="#ffffff" stroke="#10b981" stroke-width="1.5"/>
                <path d="M35 55 L45 52 L55 58 L65 50 L75 55 L85 48 L95 55 L105 50 L115 55 L125 52" stroke="#ffffff" stroke-width="2" fill="none"/>
              </svg>
            </div>
          </div>
          <div class="ba-title">Отбеливание</div>
        </div>

        <div class="ba-pair">
          <div class="ba-images">
            <div class="ba-img">
              <span class="tag">До</span>
              <svg viewBox="0 0 160 100">
                <rect width="160" height="100" fill="#fef3c7"/>
                <path d="M20 50 Q40 30 60 45 Q80 25 100 45 Q120 30 140 50 Q140 70 120 75 Q100 80 80 75 Q60 80 40 75 Q20 70 20 50 Z" fill="#fef3c7" stroke="#d97706" stroke-width="1.5"/>
                <path d="M40 55 L50 45 L60 58 L70 48 L80 55 L90 45 L100 55 L110 48 L120 55" stroke="#fbbf24" stroke-width="2" fill="none"/>
              </svg>
            </div>
            <div class="ba-img">
              <span class="tag">После</span>
              <svg viewBox="0 0 160 100">
                <rect width="160" height="100" fill="#ecfdf5"/>
                <path d="M20 50 Q40 30 60 45 Q80 25 100 45 Q120 30 140 50 Q140 70 120 75 Q100 80 80 75 Q60 80 40 75 Q20 70 20 50 Z" fill="#ffffff" stroke="#10b981" stroke-width="1.5"/>
                <path d="M35 52 L45 52 L55 52 L65 52 L75 52 L85 52 L95 52 L105 52 L115 52 L125 52" stroke="#ffffff" stroke-width="3" fill="none"/>
              </svg>
            </div>
          </div>
          <div class="ba-title">Выравнивание</div>
        </div>
      </div>

      <div class="rr-block">
        <h3>Отзывы</h3>
        <div class="rating-big">
          <span class="rating-num">4,8</span>
          <div class="stars">
            <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.5L18 21l-6-4-6 4 1.5-7.5L2 9h7z" fill="#f59e0b"/></svg>
            <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.5L18 21l-6-4-6 4 1.5-7.5L2 9h7z" fill="#f59e0b"/></svg>
            <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.5L18 21l-6-4-6 4 1.5-7.5L2 9h7z" fill="#f59e0b"/></svg>
            <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.5L18 21l-6-4-6 4 1.5-7.5L2 9h7z" fill="#f59e0b"/></svg>
            <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.5L18 21l-6-4-6 4 1.5-7.5L2 9h7z" fill="#f59e0b" opacity=".4"/></svg>
          </div>
        </div>

        <div class="review">
          <p>Прекрасный врач, всё объяснил и сделал максимально аккуратно!</p>
          <div class="author">Анна К.</div>
        </div>
        <div class="review">
          <p>Теперь хожу к стоматологу с удовольствием. Спасибо!</p>
          <div class="author">Дмитрий В.</div>
        </div>
        <div class="review">
          <p>Очень чистая клиника и внимательный персонал.</p>
          <div class="author">Елена С.</div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- FAQ -->
<section class="faq">
  <div class="container">
    <h2 class="section-title">Частые вопросы</h2>
    <div class="faq-grid">
      <div class="faq-item">
        <div class="faq-q">Как проходит лечение зубов?<span class="icon"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 5v14M5 12h14"/></svg></span></div>
        <div class="faq-a"><p>Лечение начинается с диагностики и составления плана. Все процедуры проводятся с обезболиванием.</p></div>
      </div>
      <div class="faq-item">
        <div class="faq-q">Как подготовиться к приёму?<span class="icon"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 5v14M5 12h14"/></svg></span></div>
        <div class="faq-a"><p>Специальная подготовка не требуется. Приходите с действующими снимками, если есть.</p></div>
      </div>
      <div class="faq-item">
        <div class="faq-q">Сколько длится имплантация?<span class="icon"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 5v14M5 12h14"/></svg></span></div>
        <div class="faq-a"><p>От установки имплантата до финальной коронки — 3–6 месяцев в зависимости от протокола.</p></div>
      </div>
      <div class="faq-item">
        <div class="faq-q">Принимаете ли вы детей?<span class="icon"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 5v14M5 12h14"/></svg></span></div>
        <div class="faq-a"><p>Да, приём детей ведёт детский стоматолог с 3 лет.</p></div>
      </div>
      <div class="faq-item">
        <div class="faq-q">Есть ли рассрочка?<span class="icon"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 5v14M5 12h14"/></svg></span></div>
        <div class="faq-a"><p>Да, рассрочка 0% на 6 и 12 месяцев через банки-партнёры.</p></div>
      </div>
      <div class="faq-item">
        <div class="faq-q">Какая гарантия на услуги?<span class="icon"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 5v14M5 12h14"/></svg></span></div>
        <div class="faq-a"><p>Гарантия на имплантацию — 5 лет, на терапевтическое лечение — 1 год.</p></div>
      </div>
    </div>
  </div>
</section>

<!-- BOOKING -->
<section class="booking" id="booking">
  <div class="container">
    <div class="booking-grid">
      <form class="booking-form" onsubmit="event.preventDefault();alert('Заявка отправлена! Мы свяжемся с вами в течение 15 минут.')">
        <h3>Запишитесь на приём</h3>
        <div class="field">
          <label>Ваше имя</label>
          <input type="text" placeholder="Ваше имя" required>
        </div>
        <div class="field">
          <label>Ваш телефон</label>
          <input type="tel" placeholder="+7 (___) ___-__-__" required>
        </div>
        <div class="field">
          <label>Что беспокоит?</label>
          <select required>
            <option value="">Выберите проблему</option>
            <option>Боль в зубе</option>
            <option>Кровоточивость дёсен</option>
            <option>Эстетика улыбки</option>
            <option>Отсутствие зуба</option>
            <option>Профилактический осмотр</option>
            <option>Другое</option>
          </select>
        </div>
        <button type="submit" class="btn-primary">Отправить заявку</button>
      </form>

      <div class="map-wrap">
        <!-- SVG-карта -->
        <svg viewBox="0 0 400 400" preserveAspectRatio="xMidYMid slice">
          <defs>
            <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
              <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#e2e8f0" stroke-width="0.5"/>
            </pattern>
          </defs>
          <rect width="400" height="400" fill="#e8f0fe"/>
          <rect width="400" height="400" fill="url(#grid)"/>
          <!-- Улицы -->
          <path d="M0 120 L400 120" stroke="#cbd5e1" stroke-width="8"/>
          <path d="M0 240 L400 240" stroke="#cbd5e1" stroke-width="6"/>
          <path d="M150 0 L150 400" stroke="#cbd5e1" stroke-width="8"/>
          <path d="M280 0 L280 400" stroke="#cbd5e1" stroke-width="6"/>
          <path d="M50 0 L350 400" stroke="#cbd5e1" stroke-width="4" opacity=".5"/>
          <!-- Парк -->
          <circle cx="80" cy="300" r="40" fill="#86efac" opacity=".6"/>
          <circle cx="320" cy="80" r="30" fill="#86efac" opacity=".6"/>
          <!-- Здания -->
          <rect x="170" y="140" width="40" height="40" fill="#94a3b8" rx="2"/>
          <rect x="200" y="180" width="30" height="50" fill="#64748b" rx="2"/>
          <rect x="100" y="150" width="30" height="30" fill="#94a3b8" rx="2"/>
          <!-- Метка клиники -->
          <g transform="translate(200,180)">
            <circle r="22" fill="#1a5fd4" opacity=".2">
              <animate attributeName="r" values="22;30;22" dur="2s" repeatCount="indefinite"/>
              <animate attributeName="opacity" values=".3;0;.3" dur="2s" repeatCount="indefinite"/>
            </circle>
            <path d="M0 -25 C-12 -25 -18 -15 -18 -8 C-18 5 0 20 0 20 C0 20 18 5 18 -8 C18 -15 12 -25 0 -25 Z" fill="#1a5fd4"/>
            <circle cx="0" cy="-10" r="6" fill="#fff"/>
          </g>
          <!-- Подпись -->
          <rect x="140" y="215" width="120" height="28" rx="14" fill="#ffffff" stroke="#1a5fd4" stroke-width="1.5"/>
          <text x="200" y="233" text-anchor="middle" font-size="11" font-weight="600" fill="#0f172a">ул. Тверская, 15</text>
        </svg>
      </div>
    </div>
  </div>
</section>

<!-- FOOTER -->
<footer>
  Лицензия № ЛО-77-01-019845 &nbsp;|&nbsp; © 2024 Стоматология Люми
</footer>

<script>
  // Compliance banner
  const banner = document.getElementById('complianceBanner');
  const panel = document.getElementById('compliancePanel');
  const chevron = document.getElementById('chevronIcon');
  banner.addEventListener('click', () => {
    const open = panel.classList.toggle('open');
    banner.setAttribute('aria-expanded', open);
    chevron.style.transform = open ? 'rotate(180deg)' : '';
  });
  banner.addEventListener('keydown', e => { if(e.key==='Enter') banner.click(); });

  // FAQ accordion
  document.querySelectorAll('.faq-item').forEach(item => {
    item.querySelector('.faq-q').addEventListener('click', () => {
      item.classList.toggle('open');
    });
  });

  // Doctor carousel
  const track = document.getElementById('carouselTrack');
  const prevBtn = document.getElementById('prevBtn');
  const nextBtn = document.getElementById('nextBtn');
  let idx = 0;

  function getVisible(){
    const w = window.innerWidth;
    if(w <= 480) return 1;
    if(w <= 820) return 2;
    return 4;
  }
  function getMax(){
    return Math.max(0, track.children.length - getVisible());
  }
  function update(){
    const card = track.children[0];
    const gap = 20;
    const step = card.offsetWidth + gap;
    track.style.transform = `translateX(${-idx * step}px)`;
  }
  prevBtn.addEventListener('click', () => { if(idx>0){ idx--; update(); } });
  nextBtn.addEventListener('click', () => { if(idx<getMax()){ idx++; update(); } });
  window.addEventListener('resize', () => { if(idx>getMax()) idx=getMax(); update(); });

  // Touch swipe
  let startX = 0;
  track.addEventListener('touchstart', e => { startX = e.touches[0].clientX; });
  track.addEventListener('touchend', e => {
    const dx = e.changedTouches[0].clientX - startX;
    if(dx < -40 && idx < getMax()){ idx++; update(); }
    else if(dx > 40 && idx > 0){ idx--; update(); }
  });
</script>

</body>
</html>

В блоке с комплаенсом можно размещать как непосредственно информацию для подтверждения легальности деятельности, так и анонсы-лиды дополнительных страниц и файлов. Причем информация может быть статической, а может подгружаться "на лету" из базы данных.