<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Иконка для всех устройств и браузеров -->
    <link rel="icon" href="/img/logo-96.png" sizes="96x96" type="image/png">
    <!-- Иконка для устройств Apple (iPhone, iPad) -->
    <link rel="apple-touch-icon" href="/img/logo-120.png" sizes="120x120">
    <title>Электронное расписание и табло приема врачей</title>
    <!-- Bootstrap CSS CDN для удобства -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdn.lineicons.com/3.0/lineicons.css" rel="stylesheet">

    <style>
        /* Основные цвета */
        :root {
            --main-bg: #ecf0f1;
            --main-color: #2c3e50;
            --accent-color: #1abc9c;
            --accent-color-dark: #16a085;
            --highlight-color: #e67e22;
            --footer-bg: #34495e;
            --footer-text: #bdc3c7;
            scroll-behavior: smooth;
        }

        body {
            background-color: var(--main-bg);
            color: var(--main-color);
            font-family: "Roboto", sans-serif;
        }

        /* Навбар */
        .navbar {
            background-color: var(--main-color);
        }

        .navbar .navbar-brand,
        .navbar .navbar-brand2,
        .navbar .nav-link {
            color: white;
        }

        .navbar .nav-link:hover,
        .navbar .nav-link:focus {
            color: var(--accent-color);
            text-decoration: none;
        }

        /* Кнопки */
        .btn-border-filled {
            background-color: var(--accent-color);
            border-color: var(--accent-color);
            color: white;
            transition: background-color 0.3s ease;
        }

        .btn-border-filled:hover,
        .btn-border-filled:focus {
            background-color: var(--accent-color-dark);
            border-color: var(--accent-color-dark);
            color: white;
        }

        .btn-border {
            border: 2px solid var(--accent-color);
            color: var(--accent-color);
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .btn-border:hover,
        .btn-border:focus {
            background-color: var(--accent-color);
            color: white;
        }

        /* Секции */
        .section {
            padding: 60px 0;
            background-color: var(--main-bg);
        }

        .section .section-title {
            color: var(--main-color);
            font-weight: 700;
            margin-bottom: 40px;
            font-size: 2rem;
        }

        .btn-subtitle {
            background-color: var(--highlight-color);
            color: white !important;
            border-radius: 30px;
            padding: 10px 30px;
            display: inline-block;
            font-weight: 700;
            text-transform: uppercase;
            margin-bottom: 20px;
        }

        /* Блог элементы */
        .blog-item-wrapper {
            margin-bottom: 30px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 3px 8px rgba(0,0,0,0.1);
            overflow: hidden;
            transition: transform 0.3s ease;
        }

        .blog-item-wrapper:hover {
            transform: translateY(-5px);
        }

        .blog-item-img img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            display: block;
        }

        .blog-item-text {
            padding: 20px;
            color: var(--main-color);
        }

        .blog-item-text h3 {
            margin-top: 0;
            margin-bottom: 15px;
            font-weight: 700;
        }

        /* placeholder image - заменяет все картинки квадратом */
        .placeholder-img {
            width: 100%;
            height: 200px;
            background-color: var(--accent-color);
            border-radius: 0; /* чтобы быть квадратом без закруглений */
            display: block;
        }

        /* Футер */
        footer {
            background-color: var(--footer-bg);
            color: var(--footer-text);
            padding: 40px 0;
        }

        footer a,
        footer a:hover {
            color: var(--accent-color);
            text-decoration: none;
            transition: color 0.3s ease;
        }

        footer .block-title {
            margin-bottom: 20px;
            color: white;
            font-weight: 700;
        }

        footer .menu {
            padding-left: 0;
            list-style: none;
        }

        footer .menu li {
            margin-bottom: 10px;
        }

        footer .footer-social li {
            display: inline-block;
            margin-right: 10px;
        }

        footer .footer-social li a {
            font-size: 22px;
            color: var(--accent-color);
        }

        /* Прочее */
        .navbar-brand2 {
            font-size: 1.2rem;
            margin-left: 1rem;
            color: white;
        }

        .hover-link a:hover {
            color: var(--accent-color);
            text-decoration: underline;
        }

        a {
            color: var(--accent-color);
            transition: color 0.3s ease;
        }

        a:hover {
            color: var(--accent-color-dark);
            text-decoration: none;
        }
        /* Иконки */
        .icon i {
            font-size: 3rem;
            color: var(--accent-color);
            display: inline-block;
            margin-right: 15px;
            vertical-align: middle;
            transition: color 0.3s ease;
        }

        .box-item:hover .icon i {
            color: var(--accent-color-dark);
        }

        .box-item .text h4 {
            display: inline-block;
            vertical-align: middle;
            margin: 0;
        }
        .btn-subtitle {
            cursor: default !important;
        }
        .navbar-nav .nav-link {
            position: relative;
            transition: color 0.3s ease;
        }

        .navbar-nav .nav-link::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            height: 1px;         /* высота полоски */
            width: 0;
            background-color: var(--accent-color);
            transition: width 0.3s ease;
            border-radius: 2px;
        }

        /* При наведении или фокусе расширяем полоску до полной ширины */
        .navbar-nav .nav-link:hover::after,
        .navbar-nav .nav-link:focus::after {
            width: 100%;
        }

        /* (Опционально) изменить цвет текста при наведении */
        .navbar-nav .nav-link:hover,
        .navbar-nav .nav-link:focus {
            color: var(--accent-color);
        }
        #subscribe {
            background-color: #2c3e50;
            color: white;
            padding: 60px 0;
        }
        .icon:hover i{
            color: #16a085; /* более насыщенный акцент */
            transition: color 0.3s ease;
        }
        /* Переработка стиля секции цен */
        #pricing .pricing-table {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgb(0 0 0 / 0.08);
            padding: 30px 20px 25px;
            margin-bottom: 30px;
            display: flex;
            flex-direction: column;
            height: 100%;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        #pricing .pricing-table:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 25px rgb(0 0 0 / 0.15);
            border: 2px solid var(--accent-color);
        }

        #pricing .pricing-details .icon {
            font-size: 3.5rem;
            color: var(--accent-color);
            margin-bottom: 15px;
            text-align: center;
        }

        #pricing .pricing-details h2 {
            font-size: 1.6rem;
            font-weight: 700;
            text-align: center;
            margin-bottom: 10px;
            color: var(--main-color);
        }

        #pricing .pricing-details span {
            display: block;
            font-size: 1rem;
            text-align: center;
            color: var(--accent-color-dark);
            margin-bottom: 15px;
        }

        #pricing .pricing-details ul {
            list-style: disc inside;
            padding-left: 0;
            margin-bottom: 20px;
            color: var(--main-color);
            font-size: 0.9rem;
        }

        #pricing .pricing-details ul li {
            margin-bottom: 8px;
        }

        #pricing .price {
            text-align: center;
            font-size: 1.7rem;
            font-weight: 700;
            margin-bottom: 20px;
            color: var(--highlight-color);
        }

        #pricing .price span {
            font-weight: 400;
            font-size: 1.1rem;
            margin-left: 5px;
        }

        #pricing .price[style*="line-through"] {
            color: #999;
            font-weight: 400;
            font-size: 1.2rem;
            margin-bottom: 8px;
        }

        #pricing .plan-button {
            text-align: center;
            margin-top: auto;
        }

        #pricing .plan-button .btn-border {
            background-color: transparent;
            border: 2px solid var(--accent-color);
            color: var(--accent-color);
            font-weight: 700;
            padding: 10px 30px;
            border-radius: 30px;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        #pricing .plan-button .btn-border:hover,
        #pricing .plan-button .btn-border:focus {
            background-color: var(--accent-color);
            color: white;
        }

        /* Адаптивные отступы */
        @media (max-width: 991.98px) {
            #pricing .col-lg-3 {
                margin-bottom: 30px;
            }
        }

        .img-thumb {
            position: relative;
            overflow: hidden;
            border-radius: 8px;
            box-shadow: 0 6px 15px rgb(0 0 0 / 0.1);
            cursor: pointer;
        }

        .img-thumb img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
            border-radius: 8px;
        }

        .img-thumb:hover img {
            transform: scale(1.05);
            filter: brightness(1.1);
            transition: transform 0.3s ease, filter 0.3s ease;
        }

        /* Кнопка-бейдж под заголовками, если хотите */
        .section-header .btn-subtitle {
            background-color: var(--highlight-color);
            color: white !important;
            padding: 10px 30px;
            border-radius: 30px;
            font-weight: 700;
            text-transform: uppercase;
            font-size: 0.85rem;
            letter-spacing: 1px;
            margin-bottom: 10px;
        }

        /* Заголовок */
        .section-header .section-title {
            font-weight: 700;
            font-size: 2.5rem;
            color: var(--main-color);
        }

        /* Отступы снизу у секции */
        .section#photo {
            padding-top: 60px;
            padding-bottom: 60px;
            background-color: var(--main-bg);
        }
        .box-item, .howitworks {
            border: 2px solid transparent; /* Изначально рамки нет */
            transition: border-color 1s ease; /* Плавное изменение цвета рамки */
        }

        .box-item:hover, .howitworks:hover {
            border: 2px dashed #1abc9c; /* Появляется пунктирная рамка заданного цвета */
        }
        
        .loader-overlay {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(6px);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }
        
       .loader {
          border: 8px solid #e0e0e0;
          border-top: 8px solid #007bff;
          border-right: 8px solid #3399ff;
          border-radius: 50%;
          width: 60px;
          height: 60px;
          animation: spin 1s linear infinite;
          box-shadow: 0 0 10px #007bff;
        }
        
        @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
<div id="pageLoader" class="loader-overlay">
  <div class="loader"></div>
</div>
<!-- Navbar -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top">
    <div class="container">
        <!-- <a href="/" class="navbar-brand"></a> -->
        <a href="/"><img src="img/led-logo-2018-ten-e9b44122.webp"></a>
        <a href="tel:<PRESIDIO_ANONYMIZED_PHONE_NUMBER>" class="navbar-brand2">+7 995 485-77-12</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navContent" aria-controls="navContent"
                aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navContent">
            <ul class="navbar-nav mr-auto w-100 justify-content-end">
                <li class="nav-item">
                    <a class="nav-link page-scroll" href="/" title="Главная">Главная</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link page-scroll" href="#app-features" title="Преимущества">Преимущества</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link page-scroll" href="#photo" title="Клиенты">Клиенты</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link page-scroll" href="#pricing" title="Стоимость">Стоимость</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link page-scroll" href="#contact" title="Контакты">Контакты</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" title="Заказать обратный звонок" href="javascript:jivo_api.open({start : 'call'})">Заказать звонок</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- Header -->
<header class="mt-5 pt-5" style="background: linear-gradient(180deg, #2c3e50, #4a6a85); color: white;">
    <div class="container">
        <div class="row align-items-center pt-5">
            <div class="col-lg-6 col-md-12 col-xs-12">
                <h1 class="head-title">Электронное расписание и информационное табло приема врачей на LED-экранах</h1>
                <p>Разрабатываем и внедряем системы электронного расписания и информационные табло приема врачей и специалистов для поликлиник, больниц и медицинских центров на базе современных LED-дисплеев.</p>
                <p>Поддержка профессиональных LED-экранов, включая крупные видеостены из нескольких экранов с высокой яркостью и четкостью изображения.</p>
                <p>Личный кабинет медицинского учреждения с удобным табличным интерфейсом, функциями сортировки, массового редактирования, а также импортом и экспортом данных в Excel и другие популярные форматы.</p>
                <a href="/health-proposal" class="btn btn-border-filled mr-3 mb-3">Коммерческое предложение</a>
                <a href="#pricing" class="btn btn-border mb-3">Стоимость</a>
            </div>
            <div class="col-lg-6 text-center">
                <div id="scheduleCarousel" class="carousel slide" data-ride="carousel">
                    <div class="carousel-inner rounded shadow" style="max-height: 350px;">
                        <div class="carousel-item active">
                            <img src="img/Снимок%20экрана_3-7-2025_132543_192.168.8.84.jpeg" class="d-block w-100" alt="Демо расписание 1" />
                        </div>
                        <div class="carousel-item">
                            <img src="img/Снимок%20экрана_3-7-2025_132445_192.168.8.84.jpeg" class="d-block w-100" alt="Демо расписание 2" />
                        </div>
                    </div>
                    <a class="carousel-control-prev" href="#scheduleCarousel" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Назад</span>
                    </a>
                    <a class="carousel-control-next" href="#scheduleCarousel" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Вперед</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</header>

<section id="product-slider" class="section" style="background: var(--main-bg); padding: 40px 0;" role="region" aria-label="Каталог продукции">
  <div class="container position-relative">
    <h2 class="text-center mb-4" style="color: var(--main-color); font-weight: 700;">Каталог продукции</h2>

    <div class="position-relative">
      <!-- Карусель -->
      <div id="productCarousel" class="carousel slide" data-ride="carousel" data-interval="3000" data-pause="hover" aria-live="polite">
        <div class="carousel-inner">

          <!-- Слайд 1 -->
          <div class="carousel-item active" role="group" aria-roledescription="slide" aria-label="Слайд 1 из 4">
            <div class="row">
              <div class="col-6 col-md-3 mb-3">
                <a href="https://led-spectrum.ru/kupit/ulichnye-svetodiodnye-ehkrany" target="_blank" rel="noopener noreferrer" class="card h-100 shadow-sm text-decoration-none" aria-label="Уличные светодиодные экраны — перейти">
                  <img src="https://led-spectrum.ru/templates/yootheme/cache/c4/ulichnye-videoehkrany-c478c0ff.jpeg" class="card-img-top" alt="Уличные светодиодные экраны" style="height: 140px; object-fit: cover;">
                  <div class="card-body p-2">
                    <h6 class="card-title text-success mb-0">Уличные светодиодные экраны</h6>
                  </div>
                </a>
              </div>
              <div class="col-6 col-md-3 mb-3">
                <a href="https://led-spectrum.ru/kupit/svetodiodnye-ehkrany-dlya-pomeshchenij" target="_blank" rel="noopener noreferrer" class="card h-100 shadow-sm text-decoration-none" aria-label="LED экраны для помещений — перейти">
                  <img src="https://led-spectrum.ru/templates/yootheme/cache/47/led-ehkrany-dlya-pomeshchenij-4705dc1a.jpeg" class="card-img-top" alt="LED экраны для помещений" style="height: 140px; object-fit: cover;">
                  <div class="card-body p-2">
                    <h6 class="card-title text-success mb-0">LED экраны для помещений</h6>
                  </div>
                </a>
              </div>
              <div class="col-6 col-md-3 mb-3 d-none d-md-block">
                <a href="https://led-spectrum.ru/kupit/mediafasad-svetodiodnyj" target="_blank" rel="noopener noreferrer" class="card h-100 shadow-sm text-decoration-none" aria-label="Медиафасады — перейти">
                  <img src="https://led-spectrum.ru/templates/yootheme/cache/de/mediafasad-de87a04a.jpeg" class="card-img-top" alt="Медиафасады" style="height: 140px; object-fit: cover;">
                  <div class="card-body p-2">
                    <h6 class="card-title text-success mb-0">Медиафасады</h6>
                  </div>
                </a>
              </div>
              <div class="col-6 col-md-3 mb-3 d-none d-md-block">
                <a href="https://led-spectrum.ru/kupit/videoehkrany-svetodiodnye" target="_blank" rel="noopener noreferrer" class="card h-100 shadow-sm text-decoration-none" aria-label="Видеоэкраны — перейти">
                  <img src="https://led-spectrum.ru/templates/yootheme/cache/a6/videoehkrany-a6aba485.jpeg" class="card-img-top" alt="Видеоэкраны" style="height: 140px; object-fit: cover;">
                  <div class="card-body p-2">
                    <h6 class="card-title text-success mb-0">Видеоэкраны</h6>
                  </div>
                </a>
              </div>
            </div>
          </div>

          <!-- Слайд 2 -->
          <div class="carousel-item" role="group" aria-roledescription="slide" aria-label="Слайд 2 из 4">
            <div class="row">
              <div class="col-6 col-md-3 mb-3">
                <a href="https://led-spectrum.ru/kupit/videovyveska-svetodiodnaya" target="_blank" rel="noopener noreferrer" class="card h-100 shadow-sm text-decoration-none" aria-label="Видеовывески — перейти">
                  <img src="https://led-spectrum.ru/templates/yootheme/cache/32/videovyveska-328b8e0f.jpeg" class="card-img-top" alt="Видеовывески" style="height: 140px; object-fit: cover;">
                  <div class="card-body p-2">
                    <h6 class="card-title text-success mb-0">Видеовывески</h6>
                  </div>
                </a>
              </div>
              <div class="col-6 col-md-3 mb-3">
                <a href="https://led-spectrum.ru/kupit/videoehkran-v-okno-vitrinu" target="_blank" rel="noopener noreferrer" class="card h-100 shadow-sm text-decoration-none" aria-label="Видеоэкраны в окно или витрину — перейти">
                  <img src="https://led-spectrum.ru/templates/yootheme/cache/c4/videoehkran-v-vitrinu-c4029230.jpeg" class="card-img-top" alt="Видеоэкраны в окно или витрину" style="height: 140px; object-fit: cover;">
                  <div class="card-body p-2">
                    <h6 class="card-title text-success mb-0">Видеоэкраны в окно или витрину</h6>
                  </div>
                </a>
              </div>
              <div class="col-6 col-md-3 mb-3 d-none d-md-block">
                <a href="https://led-spectrum.ru/kupit/svetodiodnoe-tablo-dlya-bolnic-poliklinik" target="_blank" rel="noopener noreferrer" class="card h-100 shadow-sm text-decoration-none" aria-label="Информационные табло для больниц — перейти">
                  <img src="https://led-spectrum.ru/templates/yootheme/cache/73/tablo-dlya-bolnic-400x240-19-3D-73104104.png" class="card-img-top" alt="Информационные табло для больниц" style="height: 140px; object-fit: cover;">
                  <div class="card-body p-2">
                    <h6 class="card-title text-success mb-0">Информационные табло для больниц</h6>
                  </div>
                </a>
              </div>
              <div class="col-6 col-md-3 mb-3 d-none d-md-block">
                <a href="https://led-spectrum.ru/kupit/ehlektronnoe-tablo-raspisaniya-urokov" target="_blank" rel="noopener noreferrer" class="card h-100 shadow-sm text-decoration-none" aria-label="Расписание уроков — перейти">
                  <img src="https://led-spectrum.ru/templates/yootheme/cache/c2/ehlektronnoe-tablo-raspisaniya-urokov-nachalnoj-shkoly-780x560-3D-v2-c2e3073c.png" class="card-img-top" alt="Расписание уроков" style="height: 140px; object-fit: cover;">
                  <div class="card-body p-2">
                    <h6 class="card-title text-success mb-0">Расписание уроков</h6>
                  </div>
                </a>
              </div>
            </div>
          </div>

          <!-- Слайд 3 -->
          <div class="carousel-item" role="group" aria-roledescription="slide" aria-label="Слайд 3 из 4">
            <div class="row">
              <div class="col-6 col-md-3 mb-3">
                <a href="https://led-spectrum.ru/kupit/chasy-svetodiodnye-ehlektronnye" target="_blank" rel="noopener noreferrer" class="card h-100 shadow-sm text-decoration-none" aria-label="Часы светодиодные электронные — перейти">
                  <img src="https://led-spectrum.ru/templates/yootheme/cache/95/svetodiodnye-ehkrany-chasy-18-95a134f8.png" class="card-img-top" alt="Часы светодиодные электронные" style="height: 140px; object-fit: cover;">
                  <div class="card-body p-2">
                    <h6 class="card-title text-success mb-0">Часы светодиодные электронные</h6>
                  </div>
                </a>
              </div>
              <div class="col-6 col-md-3 mb-3">
                <a href="https://led-spectrum.ru/svetodiodnoe-tablo-kupit/transportnye-tablo-dlya-vokzalov" target="_blank" rel="noopener noreferrer" class="card h-100 shadow-sm text-decoration-none" aria-label="Транспортные табло для вокзалов — перейти">
                  <img src="https://led-spectrum.ru/templates/yootheme/cache/3e/tablo-dlya-vokzala-3e95e017.png" class="card-img-top" alt="Транспортные табло для вокзалов" style="height: 140px; object-fit: cover;">
                  <div class="card-body p-2">
                    <h6 class="card-title text-success mb-0">Транспортные табло для вокзалов</h6>
                  </div>
                </a>
              </div>
              <div class="col-6 col-md-3 mb-3 d-none d-md-block">
                <a href="https://led-spectrum.ru/svetodiodnoe-tablo-kupit/tablo-valyut" target="_blank" rel="noopener noreferrer" class="card h-100 shadow-sm text-decoration-none" aria-label="Табло валют — перейти">
                  <img src="https://led-spectrum.ru/templates/yootheme/cache/89/tablo-valyut-89179c4e.png" class="card-img-top" alt="Табло валют" style="height: 140px; object-fit: cover;">
                  <div class="card-body p-2">
                    <h6 class="card-title text-success mb-0">Табло валют</h6>
                  </div>
                </a>
              </div>
              <div class="col-6 col-md-3 mb-3 d-none d-md-block">
                <a href="https://led-spectrum.ru/svetodiodnoe-tablo-kupit/sportivnye-tablo" target="_blank" rel="noopener noreferrer" class="card h-100 shadow-sm text-decoration-none" aria-label="Спортивные табло — перейти">
                  <img src="https://led-spectrum.ru/templates/yootheme/cache/fe/sportivnoe-tablo-fe5bd29c.png" class="card-img-top" alt="Спортивные табло" style="height: 140px; object-fit: cover;">
                  <div class="card-body p-2">
                    <h6 class="card-title text-success mb-0">Спортивные табло</h6>
                  </div>
                </a>
              </div>
            </div>
          </div>

          <!-- Слайд 4 -->
          <div class="carousel-item" role="group" aria-roledescription="slide" aria-label="Слайд 4 из 4">
            <div class="row">
              <div class="col-6 col-md-3 mb-3">
                <a href="https://led-spectrum.ru/svetodiodnoe-tablo-kupit/tablo-dlya-parkovki" target="_blank" rel="noopener noreferrer" class="card h-100 shadow-sm text-decoration-none" aria-label="Табло для парковки — перейти">
                  <img src="https://led-spectrum.ru/templates/yootheme/cache/0a/tablo-dlya-parkovki-0a71c651.png" class="card-img-top" alt="Табло для парковки" style="height: 140px; object-fit: cover;">
                  <div class="card-body p-2">
                    <h6 class="card-title text-success mb-0">Табло для парковки</h6>
                  </div>
                </a>
              </div>
              <div class="col-6 col-md-3 mb-3">
                <a href="https://led-spectrum.ru/svetodiodnoe-tablo-kupit/tablo-ehlektronnoj-ocheredi" target="_blank" rel="noopener noreferrer" class="card h-100 shadow-sm text-decoration-none" aria-label="Табло электронной очереди — перейти">
                  <img src="https://led-spectrum.ru/templates/yootheme/cache/be/tablo-ehlektronnoj-ocheredi-be39f118.png" class="card-img-top" alt="Табло электронной очереди" style="height: 140px; object-fit: cover;">
                  <div class="card-body p-2">
                    <h6 class="card-title text-success mb-0">Табло электронной очереди</h6>
                  </div>
                </a>
              </div>
              <div class="col-6 col-md-3 mb-3 d-none d-md-block">
                <a href="https://led-spectrum.ru/svetodiodnoe-tablo-kupit/tablo-azs" target="_blank" rel="noopener noreferrer" class="card h-100 shadow-sm text-decoration-none" aria-label="Табло для АЗС — перейти">
                  <img src="https://led-spectrum.ru/templates/yootheme/cache/18/tablo-azs-186891e1.png" class="card-img-top" alt="Табло для АЗС" style="height: 140px; object-fit: cover;">
                  <div class="card-body p-2">
                    <h6 class="card-title text-success mb-0">Табло для АЗС</h6>
                  </div>
                </a>
              </div>
              <div class="col-6 col-md-3 mb-3 d-none d-md-block">
                <a href="https://led-spectrum.ru/svetodiodnoe-tablo-kupit/aptechnyj-krest-svetodiodny" target="_blank" rel="noopener noreferrer" class="card h-100 shadow-sm text-decoration-none" aria-label="Аптечные кресты — перейти">
                  <img src="https://led-spectrum.ru/templates/yootheme/cache/b2/krest-b2f95924.png" class="card-img-top" alt="Аптечные кресты" style="height: 140px; object-fit: cover;">
                  <div class="card-body p-2">
                    <h6 class="card-title text-success mb-0">Аптечные кресты</h6>
                  </div>
                </a>
              </div>
            </div>
          </div>

        </div>

        <ol class="carousel-indicators mt-3">
          <li data-target="#productCarousel" data-slide-to="0" class="active" aria-label="Перейти к слайду 1"></li>
          <li data-target="#productCarousel" data-slide-to="1" aria-label="Перейти к слайду 2"></li>
          <li data-target="#productCarousel" data-slide-to="2" aria-label="Перейти к слайду 3"></li>
          <li data-target="#productCarousel" data-slide-to="3" aria-label="Перейти к слайду 4"></li>
        </ol>
      </div>

      <!-- Вынесенные стрелки -->
      <button class="btn btn-outline-primary position-absolute" type="button" id="carousel-prev-btn" aria-label="Предыдущий слайд" style="top: 50%; left: -45px; transform: translateY(-50%); z-index:10;">
        <span class="carousel-control-prev-icon bg-dark rounded-circle p-2" aria-hidden="true"></span>
      </button>
      <button class="btn btn-outline-primary position-absolute" type="button" id="carousel-next-btn" aria-label="Следующий слайд" style="top: 50%; right: -45px; transform: translateY(-50%); z-index:10;">
        <span class="carousel-control-next-icon bg-dark rounded-circle p-2" aria-hidden="true"></span>
      </button>
    </div>
  </div>
</section>

<style>
  #productCarousel {
    margin-bottom: 50px;
    position: relative;
  }
  /* Полосочные индикаторы */
  #productCarousel .carousel-indicators {
    position: static;
    margin-top: 20px;
    text-align: center;
    bottom: auto;
    padding-left: 0;
    list-style: none;
  }
  #productCarousel .carousel-indicators li {
    display: inline-block;
    width: 30px;
    height: 2px;
    margin: 0 5px;
    background-color: var(--accent-color);
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.3s ease, width 0.3s ease;
    border: none;
  }
  #productCarousel .carousel-indicators li.active {
    background-color: var(--highlight-color);
    width: 50px;
  }
  /* Стили карточек */
  #product-slider .card {
    border-radius: 6px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  #product-slider .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(26, 188, 156, 0.3);
  }
  #product-slider .card-title {
    font-size: 0.9rem;
  }
  #product-slider .card-img-top {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }
  /* Стрелки навигации */
#carousel-prev-btn,
#carousel-next-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--accent-color);
  border: none;
  box-shadow: 0 4px 10px rgba(26, 188, 156, 0.4);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

#carousel-prev-btn:hover,
#carousel-next-btn:hover,
#carousel-prev-btn:focus,
#carousel-next-btn:focus {
  background-color: var(--accent-color-dark);
  box-shadow: 0 6px 15px rgba(22, 160, 133, 0.6);
  outline: none;
}

#carousel-prev-btn span,
#carousel-next-btn span {
  filter: brightness(100%) drop-shadow(0 0 0.2rem rgba(255, 255, 255, 0.7));
  /* Белая стрелка с небольшим сиянием */
}

/* Позиционирование кнопок (скорее всего уже есть, но подстраховка) */
#carousel-prev-btn {
  top: 50%;
  left: -55px; /* немножко левее, чтобы не прилегать к краю */
  transform: translateY(-50%);
  position: absolute;
  z-index: 10;
}

#carousel-next-btn {
  top: 50%;
  right: -55px;
  transform: translateY(-50%);
  position: absolute;
  z-index: 10;
}

</style>

<script>
  $(function() {
    var $carousel = $('#productCarousel');

    // Внешние кнопки управления
    $('#carousel-prev-btn').on('click', function() {
      $carousel.carousel('prev');
    });
    $('#carousel-next-btn').on('click', function() {
      $carousel.carousel('next');
    });

    var startX = 0, endX = 0;

    // Swipe поддержка
    $carousel.on('touchstart', function(e) {
      startX = e.originalEvent.touches[0].clientX;
    });
    $carousel.on('touchmove', function(e) {
      endX = e.originalEvent.touches[0].clientX;
    });
    $carousel.on('touchend', function() {
      var threshold = 40;
      var diffX = startX - endX;
      if (Math.abs(diffX) > threshold) {
        if (diffX > 0) $carousel.carousel('next');
        else $carousel.carousel('prev');
      }
    });

    // Пауза автопрокрутки при смене вкладки
    document.addEventListener('visibilitychange', function() {
      if (document.hidden) $carousel.carousel('pause');
      else $carousel.carousel('cycle');
    });
  });
</script>

<!-- features Section Start -->
<div id="app-features" class="section" style="background:#f6fbfd;">
    <div class="container">
        <div class="section-header text-center mb-5">
            <p class="btn btn-subtitle">Преимущества для медицинской организации</p>
            <p class="text-muted mt-3" style="max-width: 600px; margin: 0 auto;">
                Электронное расписание и информационное табло приема врачей
            </p>
        </div>
        <div class="row">
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="box-item d-flex align-items-start p-4 bg-white rounded shadow-sm h-100">
                    <span class="icon mr-3" style="color: var(--accent-color); font-size: 3rem;">
                        <i class="lni lni-image"></i>
                    </span>
                    <div class="text">
                        <h4 class="mb-2 font-weight-bold">Наглядное отображение расписания</h4>
                        <p class="mb-0 text-secondary">Расписание медицинской организации отображается в удобном и понятном виде на электронном информационном табло.</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="box-item d-flex align-items-start p-4 bg-white rounded shadow-sm h-100">
                    <span class="icon mr-3" style="color: var(--accent-color); font-size: 3rem;">
                        <i class="lni lni-text-format"></i>
                    </span>
                    <div class="text">
                        <h4 class="mb-2 font-weight-bold">Удобное редактирование</h4>
                        <p class="mb-0 text-secondary">Вносите изменения быстро и легко — несколько кликов для обновления расписания.</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="box-item d-flex align-items-start p-4 bg-white rounded shadow-sm h-100">
                    <span class="icon mr-3" style="color: var(--accent-color); font-size: 3rem;">
                        <i class="lni lni-control-panel"></i>
                    </span>
                    <div class="text">
                        <h4 class="mb-2 font-weight-bold">Гибкая настройка шаблонов</h4>
                        <p class="mb-0 text-secondary">Выбирайте цветовые решения и шаблоны, адаптированные под задачи вашего учреждения.</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="box-item d-flex align-items-start p-4 bg-white rounded shadow-sm h-100">
                    <span class="icon mr-3" style="color: var(--accent-color); font-size: 3rem;">
                        <i class="lni lni-headphone-alt"></i>
                    </span>
                    <div class="text">
                        <h4 class="mb-2 font-weight-bold">Профессиональная техническая поддержка</h4>
                        <p class="mb-0 text-secondary">Быстрая помощь, консультации и сервисное обслуживание на всех этапах работы.</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="box-item d-flex align-items-start p-4 bg-white rounded shadow-sm h-100">
                    <span class="icon mr-3" style="color: var(--accent-color); font-size: 3rem;">
                        <i class="lni lni-rocket"></i>
                    </span>
                    <div class="text">
                        <h4 class="mb-2 font-weight-bold">Быстрое внедрение</h4>
                        <p class="mb-0 text-secondary">Установка, настройка и запуск системы за один рабочий день без простоев.</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="box-item d-flex align-items-start p-4 bg-white rounded shadow-sm h-100">
                    <span class="icon mr-3" style="color: var(--accent-color); font-size: 3rem;">
                        <i class="lni lni-offer"></i>
                    </span>
                    <div class="text">
                        <h4 class="mb-2 font-weight-bold">Оптимальная стоимость</h4>
                        <p class="mb-0 text-secondary">Доступное решение с лучшим соотношением цены и качества среди аналогов.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- features Section End -->

<!-- Features Section Start -->
<div id="features-two" class="section" style="background: #ecf0f1; padding: 60px 0;">
    <div class="container">
        <div class="section-header text-center mb-5">
            <p class="btn btn-subtitle">Из чего состоит система?</p>
            <p class="text-muted mt-3" style="max-width: 600px; margin: 0 auto;">
                Система электронного расписания и информационное табло приема врачей
            </p>
        </div>

        <div class="row mb-5 align-items-center">
            <div class="col-lg-6 col-md-12 col-sm-12 mb-4 mb-lg-0">
                <div class="img-thumb shadow-sm rounded" style="background-color: #ddd; min-height: 280px; display: flex; align-items: center; justify-content: center; border-radius: 6px;">
                    <img src="img/Снимок%20экрана_3-7-2025_132445_192.168.8.84.jpeg" alt="Информационное табло" style="width: 100%; height: 100%; object-fit: cover; border-radius: 5px;">
                </div>
            </div>
            <div class="col-lg-6 col-md-12 col-sm-12">
                <div class="text-wrapper px-lg-4">
                    <p class="btn btn-subtitle" style="background-color: var(--highlight-color); color:#fff; font-weight:700; padding:8px 30px; border-radius:30px; display: inline-block; font-size: 1rem; margin-bottom: 20px;">
                        Информационное табло
                    </p>
                    <div style="background: white; border-radius: 8px; padding: 20px; box-shadow: 0 2px 6px rgb(0 0 0 / 0.1);">
                        <p><strong>Основные функции:</strong> отображение актуальной информации для учеников и студентов — расписание, объявления, сообщения.</p>
                        <p><strong>Виды устройств:</strong> ЖК-мониторы, видеостены, проекторы с HDMI-подключением.</p>
                        <p><strong>Рекомендации:</strong> диагональ от 40" (малые помещения) до 55" и выше (большие холлы) для максимальной видимости.</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mb-5 align-items-center flex-lg-row-reverse">
            <div class="col-lg-6 col-md-12 col-sm-12 mb-4 mb-lg-0">
                <div class="img-thumb shadow-sm rounded" style="background-color: #ddd; min-height: 280px; display: flex; align-items: center; justify-content: center; border-radius: 6px;">
                    <img src="img/Снимок%20экрана_3-7-2025_132543_192.168.8.84.jpeg" alt="Датасервер" style="width: 100%; height: 100%; object-fit: cover; border-radius: 5px;">
                </div>
            </div>
            <div class="col-lg-6 col-md-12 col-sm-12">
                <div class="text-wrapper px-lg-4">
                    <p class="btn btn-subtitle" style="background-color: var(--highlight-color); color:#fff; font-weight:700; padding:8px 30px; border-radius:30px; display: inline-block; font-size: 1rem; margin-bottom: 20px;">
                        Датасервер
                    </p>
                    <div style="background: white; border-radius: 8px; padding: 20px; box-shadow: 0 2px 6px rgb(0 0 0 / 0.1);">
                        <p><strong>Назначение:</strong> выводит расписание на табло по шаблонам.</p>
                        <p><strong>Подключение:</strong> электросеть 220В, HDMI, локальная сеть; возможно Wi-Fi.</p>
                        <p><strong>Управление:</strong> через личный кабинет; при отсутствии интернета отображается последняя актуальная информация.</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mb-5 align-items-center">
            <div class="col-lg-6 col-md-12 col-sm-12 mb-4 mb-lg-0">
                <div class="img-thumb shadow-sm rounded" style="background-color: #ddd; min-height: 280px; display: flex; align-items: center; justify-content: center; border-radius: 6px;">
                    <img src="img/Снимок%20экрана_3-7-2025_132445_192.168.8.84.jpeg" alt="Личный кабинет" style="width: 100%; height: 100%; object-fit: cover; border-radius: 5px;">
                </div>
            </div>
            <div class="col-lg-6 col-md-12 col-sm-12">
                <div class="text-wrapper px-lg-4">
                    <p class="btn btn-subtitle" style="background-color: var(--highlight-color); color:#fff; font-weight:700; padding:8px 30px; border-radius:30px; display: inline-block; font-size: 1rem; margin-bottom: 20px;">
                        Личный кабинет
                    </p>
                    <div style="background: white; border-radius: 8px; padding: 20px; box-shadow: 0 2px 6px rgb(0 0 0 / 0.1);">
                        <p><strong>Функции:</strong> просмотр и управление всеми датасерверами и расписаниями.</p>
                        <p><strong>Удобство:</strong> добавление и редактирование через табличный интерфейс с сортировкой и групповыми изменениями.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Features Section End -->

<div id="subscribe" class="section">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-7 col-md-12 col-xs-12">
                <div class="subscribe-form">
                    <div class="form-wrapper">
                        <div class="sub-title text-center">
                            <h3>Получите коммерческое предложение</h3>
                            <p>Подберем оптимальную конфигурацию и подготовим коммерческое предложение на электронное расписание и информационное табло приема врачей.</p>
                        </div>
                        <div class="row text-center">
                            <div class="col-12 form-line">
                                <a href="/health-proposal" class="btn btn-border-filled page-scroll" title="Получить коммерческое предложение на систему электронного расписания и информационное табло приема врачей">Коммерческое предложение</a>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Start How It Works Section -->
<div id="howitworks" class="section pricing-section" style="padding: 60px 0; background-color: #f9fbfc;">
    <div class="container">
        <div class="section-header text-center mb-5">
            <p class="btn btn-subtitle" style="display: inline-block; margin-bottom: 0;">Как работает система?</p>
            <p class="text-muted mt-3" style="max-width: 600px; margin: 0 auto;">Электронное расписание и табло приема врачей</p>
        </div>

        <div class="row">
            <!-- Item -->
            <div class="col-lg-3 col-md-6 mb-4">
                <div class="howitworks pricing-table h-100 bg-white rounded shadow-sm p-4 d-flex flex-column">
                    <div class="icon mb-3 text-center" style="font-size: 3rem; color: #1abc9c; transition: color 0.3s;">
                        <i class="lni lni-license"></i>
                    </div>
                    <h3 class="text-center text-dark font-weight-bold mb-3">Установите ЖК-табло</h3>
                    <p class="text-center text-secondary mb-3">Смонтируйте информационное табло с помощью кронштейна в холле в зоне ожидания пациентов и посетителей организации.</p>
                    <hr style="border-top: 1px solid rgba(153, 153, 153, 0.2);">
                    <ul class="pl-3 text-secondary" style="font-size: 0.9rem;">
                        <li>При выборе диагонали информационного табло учитывайте размеры холла в организации.</li>
                    </ul>
                </div>
            </div>
            <!-- Item -->
            <div class="col-lg-3 col-md-6 mb-4">
                <div class="howitworks pricing-table h-100 bg-white rounded shadow-sm p-4 d-flex flex-column">
                    <div class="icon mb-3 text-center" style="font-size: 3rem; color: #1abc9c; transition: color 0.3s;">
                        <i class="lni lni-plug"></i>
                    </div>
                    <h3 class="text-center text-dark font-weight-bold mb-3">Подключите датасервер</h3>
                    <p class="text-center text-secondary mb-3">Подключение устройства занимает несколько минут, потребуется только розетка 220В и доступ в сеть интернет.</p>
                    <hr style="border-top: 1px solid rgba(153, 153, 153, 0.2);">
                    <ul class="pl-3 text-secondary" style="font-size: 0.9rem;">
                        <li>Датасервер с программным обеспечением отвечает за отображение расписания организации по шаблону.</li>
                    </ul>
                </div>
            </div>
            <!-- Item -->
            <div class="col-lg-3 col-md-6 mb-4">
                <div class="howitworks pricing-table h-100 bg-white rounded shadow-sm p-4 d-flex flex-column">
                    <div class="icon mb-3 text-center" style="font-size: 3rem; color: #1abc9c; transition: color 0.3s;">
                        <i class="lni lni-user"></i>
                    </div>
                    <h3 class="text-center text-dark font-weight-bold mb-3">Перейдите в личный кабинет</h3>
                    <p class="text-center text-secondary mb-3">Создавайте и обновляйте расписание медицинской организации через интернет - в личном кабинете администратора.</p>
                    <hr style="border-top: 1px solid rgba(153, 153, 153, 0.2);">
                    <ul class="pl-3 text-secondary" style="font-size: 0.9rem;">
                        <li>Расписание обновляется в режиме реального времени «по воздуху» и отображается на экране организации по одному из выбранных шаблонов.</li>
                    </ul>
                </div>
            </div>
            <!-- Item -->
            <div class="col-lg-3 col-md-6 mb-4">
                <div class="howitworks pricing-table h-100 bg-white rounded shadow-sm p-4 d-flex flex-column">
                    <div class="icon mb-3 text-center" style="font-size: 3rem; color: #1abc9c; transition: color 0.3s;">
                        <i class="lni lni-briefcase"></i>
                    </div>
                    <h3 class="text-center text-dark font-weight-bold mb-3">Подключите интернет-сайт</h3>
                    <p class="text-center text-secondary mb-3">Готовый скрипт для интеграции расписания с интернет-сайтом организации не требующий доработки и изменения сайта.</p>
                    <hr style="border-top: 1px solid rgba(153, 153, 153, 0.2);">
                    <ul class="pl-3 text-secondary" style="font-size: 0.9rem;">
                        <li>Всегда актуальное расписание приема врачей в несколько кликов.</li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="text-center mt-4">
            <a href="#contact" class="btn btn-primary btn-lg page-scroll" style="padding: 12px 36px; font-weight: 700;">Получить консультацию</a>
        </div>
    </div>
</div>
<!-- End How It Works Section -->

<!-- Features Section Start -->
<div id="clients" class="section" style="background: #ecf0f1; padding: 60px 0;">
    <div class="container">
        <div class="section-header text-center mb-5">
            <p class="btn btn-subtitle" style="display: inline-block;">Для кого?</p>
                <p class="text-muted mt-3" style="max-width: 600px; margin: 0 auto;">
                    Клиенты системы электронного расписания и информационное табло приема врачей
                </p>
        </div>

        <!-- Первый блок: текст слева, картинка справа -->
        <div class="row align-items-center mb-5">
            <div class="col-lg-6 col-md-12 col-sm-12">
                <div class="text-wrapper px-lg-4">
                    <p class="btn btn-subtitle" style="background-color: var(--highlight-color); color: #fff; font-weight: 700; padding: 8px 30px; border-radius:30px; display: inline-block; font-size: 1rem; margin-bottom: 20px;">
                        Медицинские учреждения
                    </p>
                    <div style="background: white; border-radius: 8px; padding: 20px; box-shadow: 0 2px 6px rgb(0 0 0 / 0.1);">
                        <p>Государственные, муниципальные и частные поликлиники</p>
                        <p>Управляйте расписанием в медицинском учреждении, вносите и редактируйте информацию о времени приема и работающих специалистах, их специализации и квалификации в режиме реального времени.</p>
                        <p>Закажите дополнительную опцию &laquo;Скрипт для сайта&raquo; и разместите готовый код на странице сайта медицинского учреждения. Расписание работы врачей и мед. кабинетов отразится, как на информационном табло в регистратуре, так и на сайте учреждения.</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-12 col-sm-12">
                <div class="img-thumb shadow-sm rounded" style="background-color: #ddd; min-height: 280px; display: flex; align-items: center; justify-content: center; border-radius: 6px;">
                    <img src="img/XXL_height.webp" alt="Электронное расписание приема врачей для государственных, муниципальных и частных поликлиник" style="width: 100%; height: 100%; object-fit: cover; border-radius: 5px;">
                </div>
            </div>
        </div>

        <!-- Второй блок: картинка слева, текст справа -->
        <div class="row align-items-center mb-5 flex-lg-row-reverse">
            <div class="col-lg-6 col-md-12 col-sm-12">
                <div class="text-wrapper px-lg-4">
                    <p class="btn btn-subtitle" style="background-color: var(--highlight-color); color: #fff; font-weight: 700; padding: 8px 30px; border-radius:30px; display: inline-block; font-size: 1rem; margin-bottom: 20px;">
                        Лаборатории и мед. кабинеты
                    </p>
                    <div style="background: white; border-radius: 8px; padding: 20px; box-shadow: 0 2px 6px rgb(0 0 0 / 0.1);">
                        <p>Клинико-диагностические лаборатории и процедурные кабинеты</p>
                        <p>Информируйте клиентов о времени работы лаборатории или процедурного кабинета в удобной и наглядной форме. Используйте шаблон отображения информации подходящий для ваших задач.</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-12 col-sm-12">
                <div class="img-thumb shadow-sm rounded" style="background-color: #ddd; min-height: 280px; display: flex; align-items: center; justify-content: center; border-radius: 6px;">
                    <img src="img/XXL_height (1).webp" alt="Электронное расписание для клинико-диагностических лабораторий и процедурных кабинетов" style="width: 100%; height: 100%; object-fit: cover; border-radius: 5px;">
                </div>
            </div>
        </div>

        <!-- Третий блок: текст слева, картинка справа -->
        <div class="row align-items-center">
            <div class="col-lg-6 col-md-12 col-sm-12">
                <div class="text-wrapper px-lg-4">
                    <p class="btn btn-subtitle" style="background-color: var(--highlight-color); color: #fff; font-weight: 700; padding: 8px 30px; border-radius:30px; display: inline-block; font-size: 1rem; margin-bottom: 20px;">
                        Государственные организации
                    </p>
                    <div style="background: white; border-radius: 8px; padding: 20px; box-shadow: 0 2px 6px rgb(0 0 0 / 0.1);">
                        <p>Государственные и муниципальные ведомства и учреждения</p>
                        <p>Информируйте посетителей учреждения о времени работы и приема специалистов и ответственных сотрудников.</p>
                        <p>Для руководящего состава ведомства &mdash; укажите и своевременно актуализируйте информацию о часах приема посетителей по личным вопросам.</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-12 col-sm-12">
                <div class="img-thumb shadow-sm rounded" style="background-color: #ddd; min-height: 280px; display: flex; align-items: center; justify-content: center; border-radius: 6px;">
                    <img src="img/XXL.webp" alt="Электронное расписание для государственных и муниципальных ведомства и учреждений" style="width: 100%; height: 100%; object-fit: cover; border-radius: 5px;">
                </div>
            </div>
        </div>

    </div>
</div>
<!-- Features Section End -->

<div id="subscribe" class="section">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-7 col-md-12 col-xs-12">
                <div class="subscribe-form">
                    <div class="form-wrapper">
                        <div class="sub-title text-center">
                            <h3>Получите коммерческое предложение</h3>
                            <p>Подберем оптимальную конфигурацию и подготовим коммерческое предложение на электронное расписание и информационное табло приема врачей.</p>
                        </div>
                        <div class="row text-center">
                            <div class="col-12 form-line">
                                <a href="/health-proposal" class="btn btn-border-filled page-scroll" title="Получить коммерческое предложение на систему электронного расписания и информационное табло приема врачей">Коммерческое предложение</a>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- цены -->
<div id="pricing" class="section pricing-section" style="background: var(--main-bg); padding: 60px 0;">
    <div class="container">
        <div class="section-header text-center mb-5">
            <p class="btn btn-subtitle" style="margin-bottom: 0;">Стоимость системы</p>
            <p class="text-muted mt-3" style="max-width: 600px; margin: 0 auto;">Стоимость электронного расписания и информационное табло приема врачей</p>
        </div>

        <div class="row">

            <!-- Табло ТДП 400-Т0 -->
            <div class="col-lg-3 col-md-6 mb-4 col-xs-12 d-flex">
                <div class="pricing-table">
                    <div class="pricing-details">
                        <div class="icon"><i class="lni lni-rocket"></i></div>
                        <h2>Табло для поликлиники ТДП 400-Т0 (400*160 px) Р4</h2>
                        <span>
          Размер рабочего поля (ш х в) 1600х640 мм.<br>
          Габариты табло (ш х в) 1650х690х90 мм.<br>
          Количество специалистов 8.<br>
          Расстояние между диодами 4 мм<br>
          Разрешение (ш х в) 400х160 px.<br>
          Рабочее напряжение 220 В<br>
          Максимальный угол обзора, град 140/140
        </span>
                        <hr style="border-top: 1px solid rgba(153,153,153,0.3);">
                        <ul>
                            <li>Компоненты и комплектующие уточняйте у менеджера</li>
                        </ul>
                        <div class="price" style="text-decoration: line-through;">—<span> 98 285 руб.</span></div>
                        <div class="price">—<span> 89 910 руб.</span></div>
                    </div>
                    <div class="plan-button">
                        <a href="#contact" class="btn btn-border">Купить</a>
                    </div>
                </div>
            </div>

            <!-- Табло ТДП 400-Т1 -->
            <div class="col-lg-3 col-md-6 mb-4 col-xs-12 d-flex">
                <div class="pricing-table">
                    <div class="pricing-details">
                        <div class="icon"><i class="lni lni-rocket"></i></div>
                        <h2>Табло для поликлиники ТДП 400-Т1 (400*200 px) Р4</h2>
                        <span>
          Размер рабочего поля (ш х в) 1600х800 мм.<br>
          Габариты табло (ш х в) 1650х850х90 мм.<br>
          Количество специалистов 12.<br>
          Расстояние между диодами 4 мм<br>
          Разрешение (ш х в) 400х200 px.<br>
          Рабочее напряжение 220 В<br>
          Максимальный угол обзора, град 140/140
        </span>
                        <hr style="border-top: 1px solid rgba(153,153,153,0.3);">
                        <ul>
                            <li>Компоненты и комплектующие уточняйте у менеджера</li>
                        </ul>
                        <div class="price" style="text-decoration: line-through;">—<span>110 500 руб.</span></div>
                        <div class="price">—<span>101 520 руб.</span></div>
                    </div>
                    <div class="plan-button">
                        <a href="#contact" class="btn btn-border">Купить</a>
                    </div>
                </div>
            </div>

            <!-- Табло ТДП 400-Т2 -->
            <div class="col-lg-3 col-md-6 mb-4 col-xs-12 d-flex">
                <div class="pricing-table">
                    <div class="pricing-details">
                        <div class="icon"><i class="lni lni-rocket"></i></div>
                        <h2>Табло для поликлиники ТДП 400-Т2 (400*240 px) Р4</h2>
                        <span>
          Размер рабочего поля (ш х в) 1600х960 мм.<br>
          Габариты табло (ш х в) 1650х1010х90 мм.<br>
          Количество специалистов 14.<br>
          Расстояние между диодами 4 мм<br>
          Разрешение (ш х в) 400х240 px.<br>
          Рабочее напряжение 220 В<br>
          Максимальный угол обзора, град 140/140
        </span>
                        <hr style="border-top: 1px solid rgba(153,153,153,0.3);">
                        <ul>
                            <li>Компоненты и комплектующие уточняйте у менеджера</li>
                        </ul>
                        <div class="price" style="text-decoration: line-through;">—<span> 130 380 руб.</span></div>
                        <div class="price">—<span> 112 050 руб.</span></div>
                    </div>
                    <div class="plan-button">
                        <a href="#contact" class="btn btn-border">Купить</a>
                    </div>
                </div>
            </div>

            <!-- Табло ТДП 400-Т3 -->
            <div class="col-lg-3 col-md-6 mb-4 col-xs-12 d-flex">
                <div class="pricing-table">
                    <div class="pricing-details">
                        <div class="icon"><i class="lni lni-rocket"></i></div>
                        <h2>Табло для поликлиники ТДП 400-Т3 (400*280 px) Р4</h2>
                        <span>
          Размер рабочего поля (ш х в) 1600х1120 мм.<br>
          Габариты табло (ш х в) 1650х1170х90 мм.<br>
          Количество специалистов 16.<br>
          Расстояние между диодами 4 мм<br>
          Разрешение (ш х в) 400х280 px.<br>
          Рабочее напряжение 220 В<br>
          Максимальный угол обзора, град 140/140<br>
          Тип исполнения: интерьерный<br>
          Тип модулей SMD
        </span>
                        <hr style="border-top: 1px solid rgba(153,153,153,0.3);">
                        <ul>
                            <li>Компоненты и комплектующие уточняйте у менеджера</li>
                        </ul>
                        <div class="price" style="text-decoration: line-through;">—<span> 156 118 руб.</span></div>
                        <div class="price">—<span> 124 200 руб.</span></div>
                    </div>
                    <div class="plan-button">
                        <a href="#contact" class="btn btn-border">Купить</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Вторая строка опций -->
        <div class="row">
            <!-- Табло ТДП 560-Т1 -->
            <div class="col-lg-3 col-md-6 mb-4 col-xs-12 d-flex">
                <div class="pricing-table">
                    <div class="pricing-details">
                        <div class="icon"><i class="lni lni-rocket"></i></div>
                        <h2>Табло для поликлиники ТДП 560-Т1 (560*240 px) Р4</h2>
                        <span>
          Размер рабочего поля (ш х в) 2240х960 мм.<br>
          Габариты табло (ш х в) 2290х1010х90 мм.<br>
          Количество специалистов 14.<br>
          Расстояние между диодами 4 мм<br>
          Разрешение (ш х в) 560х240 px.<br>
          Рабочее напряжение 220 В<br>
          Максимальный угол обзора, град 140/140
        </span>
                        <hr style="border-top: 1px solid rgba(153,153,153,0.3);">
                        <ul>
                            <li>Компоненты и комплектующие уточняйте у менеджера</li>
                        </ul>
                        <div class="price" style="text-decoration: line-through;">—<span> 164 000 руб.</span></div>
                        <div class="price">—<span> 142 020 руб.</span></div>
                    </div>
                    <div class="plan-button">
                        <a href="#contact" class="btn btn-border">Купить</a>
                    </div>
                </div>
            </div>

            <!-- ТДП 512-Т2.5 -->
            <div class="col-lg-3 col-md-6 mb-4 col-xs-12 d-flex">
                <div class="pricing-table">
                    <div class="pricing-details">
                        <div class="icon"><i class="lni lni-rocket"></i></div>
                        <h2>Табло для поликлиники ТДП 512-Т2.5 (512*512 px) Р2.5</h2>
                        <span>
          Размер рабочего поля (ш х в) 1280х1280 мм.<br>
          Габариты табло (ш х в) 1330х1330х90 мм.<br>
          Количество специалистов 32.<br>
          Расстояние между диодами 2,5 мм<br>
          Разрешение (ш х в) 512х512 px.<br>
          Рабочее напряжение 220 В<br>
          Максимальный угол обзора, град 140/140
        </span>
                        <hr style="border-top: 1px solid rgba(153,153,153,0.3);">
                        <ul>
                            <!-- Нужно добавить состав — если есть, вставьте сюда -->
                            <li>Компоненты и комплектующие уточняйте у менеджера</li>
                        </ul>
                        <div class="price" style="text-decoration: line-through;">—<span> 186 666 руб.</span></div>
                        <div class="price">—<span> 157 140 руб.</span></div>
                    </div>
                    <div class="plan-button">
                        <a href="#contact" class="btn btn-border">Купить</a>
                    </div>
                </div>
            </div>

            <!-- ТДП 576-Т2.5 -->
            <div class="col-lg-3 col-md-6 mb-4 col-xs-12 d-flex">
                <div class="pricing-table">
                    <div class="pricing-details">
                        <div class="icon"><i class="lni lni-rocket"></i></div>
                        <h2>Табло для поликлиники ТДП 576-Т2.5 (576*512 px) Р2.5</h2>
                        <span>
          Размер рабочего поля (ш х в) 1280х1440 мм.<br>
          Габариты табло (ш х в) 1330х1490х90 мм.<br>
          Количество специалистов 37.<br>
          Расстояние между диодами 2,5 мм<br>
          Разрешение (ш х в) 512х576 px.<br>
          Рабочее напряжение 220 В<br>
          Максимальный угол обзора, град 140/140
        </span>
                        <hr style="border-top: 1px solid rgba(153,153,153,0.3);">
                        <ul>
                            <li>Компоненты и комплектующие уточняйте у менеджера</li>
                        </ul>
                        <div class="price" style="text-decoration: line-through;">—<span> 190 000 руб.</span></div>
                        <div class="price">—<span> 171 450 руб.</span></div>
                    </div>
                    <div class="plan-button">
                        <a href="#contact" class="btn btn-border">Купить</a>
                    </div>
                </div>
            </div>

            <!-- ТДП 640-Т2.5 -->
            <div class="col-lg-3 col-md-6 mb-4 col-xs-12 d-flex">
                <div class="pricing-table">
                    <div class="pricing-details">
                        <div class="icon"><i class="lni lni-rocket"></i></div>
                        <h2>Табло для поликлиники ТДП 640-Т2.5 (640*512 px) Р2.5</h2>
                        <span>
          Размер рабочего поля (ш х в) 1280х1600 мм.<br>
          Габариты табло (ш х в) 1330х1650х90 мм.<br>
          Количество специалистов 40.<br>
          Расстояние между диодами 2,5 мм<br>
          Разрешение (ш х в) 512х640 px.<br>
          Рабочее напряжение 220 В<br>
          Максимальный угол обзора, град 140/140
        </span>
                        <hr style="border-top: 1px solid rgba(153,153,153,0.3);">
                        <ul>
                            <li>Компоненты и комплектующие уточняйте у менеджера</li>
                        </ul>
                        <div class="price" style="text-decoration: line-through;">—<span> 190 000 руб.</span></div>
                        <div class="price">—<span>189 000 руб.</span></div>
                    </div>
                    <div class="plan-button">
                        <a href="#contact" class="btn btn-border">Купить</a>
                    </div>
                </div>
            </div>

            <!-- ТДП 560-Т4 -->
            <div class="col-lg-3 col-md-6 mb-4 col-xs-12 d-flex">
                <div class="pricing-table">
                    <div class="pricing-details">
                        <div class="icon"><i class="lni lni-rocket"></i></div>
                        <h2>Табло для поликлиники ТДП 560-Т4 (560*320 px) Р4</h2>
                        <span>
          Размер рабочего поля (ш х в) 2240х1280 мм.<br>
          Габариты табло (ш х в) 2290х1330х90 мм.<br>
          Количество специалистов 19.<br>
          Расстояние между диодами 4 мм<br>
          Разрешение (ш х в) 560х320 px.<br>
          Рабочее напряжение 220 В<br>
          Максимальный угол обзора, град 140/140
        </span>
                        <hr style="border-top: 1px solid rgba(153,153,153,0.3);">
                        <ul>
                            <li>Компоненты и комплектующие уточняйте у менеджера</li>
                        </ul>
                        <div class="price" style="text-decoration: line-through;">—<span> 190 000 руб.</span></div>
                        <div class="price">—<span> 176 850 руб.</span></div>
                    </div>
                    <div class="plan-button">
                        <a href="#contact" class="btn btn-border">Купить</a>
                    </div>
                </div>
            </div>

        </div>
        </div>
    </div>
</div>
<!-- End Pricing Table Section -->

<!-- Photo Section Start -->
<div id="photo" class="section" style="background: #f9fbfc;; padding: 60px 0;">
    <div class="container">
        <div class="section-header text-center mb-5">
            <p class="btn btn-subtitle" style="display: inline-block; margin-bottom: 0;">Фотографии</p>
            <p class="text-muted mt-3" style="max-width: 600px; margin: 0 auto;">Объекты заказчиков</p>
        </div>
        <div class="row">
            <div class="col-lg-6 col-md-12 mb-4">
                <div class="img-thumb shadow-sm rounded overflow-hidden">
                    <img src="img/XXL_height.webp" alt="Система электронного расписания приема врачей ledinform с электронным информационным табло 40 дюймов" class="img-fluid w-100 h-100 object-fit-cover" style="transition: transform 0.3s ease;">
                </div>
            </div>
            <div class="col-lg-6 col-md-12 mb-4">
                <div class="img-thumb shadow-sm rounded overflow-hidden">
                    <img src="img/XXL_height (1).webp" alt="Система электронного расписания приема врачей ledinform с электронным информационным табло 50 дюймов" class="img-fluid w-100 h-100 object-fit-cover" style="transition: transform 0.3s ease;">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 col-md-12 mb-4">
                <div class="img-thumb shadow-sm rounded overflow-hidden">
                    <img src="img/XXL.webp" alt="Система электронного расписания приема врачей ledinform с электронным информационным табло 43 дюйма" class="img-fluid w-100 h-100 object-fit-cover" style="transition: transform 0.3s ease;">
                </div>
            </div>
            <div class="col-lg-6 col-md-12 mb-4">
                <div class="img-thumb shadow-sm rounded overflow-hidden">
                    <img src="img/XXL_height.webp" alt="Система электронного расписания приема врачей ledinform с электронным информационным табло 40 дюймов" class="img-fluid w-100 h-100 object-fit-cover" style="transition: transform 0.3s ease;">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 col-md-12 mb-4">
                <div class="img-thumb shadow-sm rounded overflow-hidden">
                    <img src="img/XXL_height (1).webp" alt="Система электронного расписания приема врачей ledinform с электронным информационным табло 50 дюймов" class="img-fluid w-100 h-100 object-fit-cover" style="transition: transform 0.3s ease;">
                </div>
            </div>
            <div class="col-lg-6 col-md-12 mb-4">
                <div class="img-thumb shadow-sm rounded overflow-hidden">
                    <img src="img/XXL.webp" alt="Система электронного расписания приема врачей ledinform с видеостеной из 6 панелей 43 дюйма" class="img-fluid w-100 h-100 object-fit-cover" style="transition: transform 0.3s ease;">
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Photo Section End -->

<div id="subscribe" class="section">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-7 col-md-12 col-xs-12">
                <div class="subscribe-form">
                    <div class="form-wrapper">
                        <div class="sub-title text-center">
                            <h3>Получите коммерческое предложение</h3>
                            <p>Подберем оптимальную конфигурацию и подготовим коммерческое предложение на электронное расписание и информационное табло приема врачей.</p>
                        </div>
                        <div class="row text-center">
                            <div class="col-12 form-line">
                                <a href="/health-proposal" class="btn btn-border-filled page-scroll" title="Получить коммерческое предложение на систему электронного расписания и информационное табло приема врачей">Коммерческое предложение</a>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Contacts Section Start -->
<div id="contact" class="section" style="background: var(--main-bg); padding: 60px 0;">
    <div class="container">
        <div class="section-header text-center mb-5">
            <p class="btn btn-subtitle" style="margin-bottom: 0;">Контакты</p>
            <p class="text-muted mt-3" style="max-width: 600px; margin: 0 auto;">
                Свяжитесь с нами — будем рады помочь с выбором и настройкой системы
            </p>
        </div>
        <div class="row justify-content-center">
            <div class="col-lg-5 col-md-8 mb-4">
                <div class="contact-info p-4 bg-white rounded shadow-sm h-100">
                    <h4 class="mb-4 font-weight-bold" style="color: var(--main-color);">Свяжитесь с нами</h4>
                    <p><strong>Телефон:</strong> <a href="tel:<PRESIDIO_ANONYMIZED_PHONE_NUMBER>" style="color: var(--accent-color);">+7 995 485-77-12</a></p>
                    <p><strong>Email:</strong> <a href="mailto:info@led.ru" style="color: var(--accent-color);"><PRESIDIO_ANONYMIZED_EMAIL_ADDRESS></a></p>
                    <p><strong>Адрес:</strong> 443124, Самарская область, г. Самара, 5-я просека, 104Б</p>
                    <p><strong>Часы работы:</strong> Пн-Пт: 9:00 — 18:00</p>
                    <p><strong>Telegram:</strong> <a href="https://t.me/ledinform_Bot" target="_blank" rel="noopener" style="color: var(--accent-color);">@ledinform_Bot</a></p>
                </div>
            </div>
            <div class="col-lg-7 col-md-10">
                <div id="yandexMap" style="width: 100%; height: 350px; border-radius: 8px; box-shadow: 0 2px 6px rgb(0 0 0 / 0.1);"></div>
            </div>
        </div>
    </div>
</div>
<!-- Contacts Section End -->

<!-- Яндекс.Карта API + инициализация -->
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<script>
    ymaps.ready(init);
    function init(){
        var myMap = new ymaps.Map("yandexMap", {
            center: [53.245188, 50.184950], // Координаты Москвы, замените на ваши
            zoom: 15,
            controls: ['zoomControl', 'fullscreenControl']
        });

        var myPlacemark = new ymaps.Placemark(myMap.getCenter(), {
            balloonContent: 'Ваш партнёр в электронном расписании',
            hintContent: '443124, Самарская область, г. Самара, 5-я просека, 104Б'
        }, {
            preset: 'islands#icon',
            iconColor: '#1abc9c'
        });

        myMap.geoObjects.add(myPlacemark);
    }
</script>

<!-- Футер -->
<footer>
    <div class="container">
        <div class="row pt-4 pb-4">
            <div class="col-md-3">
                <h5 class="block-title">ledinform</h5>
                <p>Информационные системы для учреждений образования, здравоохранения и культуры, а также интерактивные умные экраны с возможностью удалённого управления.</p>
            </div>
            <div class="col-md-3">
                <h5 class="block-title">Решения</h5>
                <ul class="menu list-unstyled">
                    <li><a href="https://ledinform.ru/">Система электронного расписания приема врачей</a></li>
                    <!--<li><a href="https://ledinform.ru/">Система электронного расписания для школы, лицея, гимназии</a></li>
                    <li><a href="https://ledinform.ru/">Система электронного расписания для театра и концертного зала</a></li>
                    <li><a href="https://ledinform.ru/">Система расписания занятий для фитнес-клуба</a></li>
                    <li><a href="https://ledinform.ru/">Система электронного расписания автовокзала</a></li>-->
                </ul>
            </div>
            <div class="col-md-3">
                <h5 class="block-title">Полезное</h5>
                <ul class="menu list-unstyled">
                    <li><a href="https://ledinform.ru/">Система электронного расписания приема врачей</a></li>
                    <!--<li><a href="https://ledinform.ru/">Личный кабинет</a></li>
                    <li><a href="https://ledinform.ru/">База знаний</a></li>
                    <li><a href="https://ledinform.ru/">Техническая поддержка</a></li>
                    <li><a href="https://ledinform.ru/">Партнёрская программа</a></li>-->
                </ul>
            </div>
            <div class="col-md-3">
                <h5 class="block-title">Контакты</h5>
                <ul class="menu list-unstyled">
                    <li><a href="tel:<PRESIDIO_ANONYMIZED_PHONE_NUMBER>"><PRESIDIO_ANONYMIZED_PHONE_NUMBER></a></li>
                    <li><a href="mailto:info@led.ru">info@led.ru</a></li>
                    <!--<li><a href="https://t.me/ledinform_Bot">Написать в Телеграм</a></li>-->
                </ul>
                <ul class="footer-social list-inline mt-3">
                    <li class="list-inline-item"><a href="https://vk.com/ledinform"><i class="lni lni-vk"></i></a></li>
                    <li class="list-inline-item"><a href="#"><i class="lni lni-telegram-original"></i></a></li>
                </ul>
            </div>
        </div>
        <div class="text-center pb-3" style="color: var(--footer-text);">
            &copy; <span id="year-start">2023</span> - <span id="year-end"></span> — Ledinform
        </div>
        
        <script>
          const currentYear = new Date().getFullYear();
          document.getElementById('year-end').textContent = currentYear;
        </script>
    </div>
</footer>

<!-- Подключение JS для Bootstrap -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
<script src="//code.jivo.ru/widget/Yvz8Ni0BBG" async></script>

<!-- Yandex.Metrika counter -->
<script type="text/javascript" >
   (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
   m[i].l=1*new Date();
   for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
   k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
   (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");

   ym(103199672, "init", {
        clickmap:true,
        trackLinks:true,
        accurateTrackBounce:true,
        webvisor:true
   });
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/103199672" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->
<script>
  window.addEventListener('load', function() {
    const loader = document.getElementById('pageLoader');
    if (loader) {
      // Можно добавить плавное исчезновение
      loader.style.transition = 'opacity 0.5s ease';
      loader.style.opacity = 0;

      setTimeout(() => {
        loader.style.display = 'none';
      }, 500); // время совпадает с duration transition
    }
  });
</script>

</body>
</html> стрелки на карусели визуально не нравятся. стилизуй под сайт.