:root {
      --primary: #0062f3;
      --primary-hover: #004ecc;
      --primary-soft: #e7f0fd;
      --cyan-light: #dff1ff;
      --cyan-mint: #e2f8f6;
      --text-dark: #0f1c3f;
      --text-muted: #536580;
      --glass-bg: rgba(255, 255, 255, 0.72);
      --glass-border: rgba(255, 255, 255, 0.85);
      --glass-shadow: 0 16px 36px -10px rgba(0, 98, 243, 0.12);
      --radius-2xl: 24px;
      --radius-xl: 18px;
      --radius-pill: 999px;
    }

* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

/* Фоновая текстура и глубокий градиент */
    body {
      font-family: 'Plus Jakarta Sans', 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      color: var(--text-dark);
      background-color: #f0f7ff;
      background-image: 
        radial-gradient(circle at 10% 15%, rgba(0, 98, 243, 0.14) 0%, transparent 40%),
        radial-gradient(circle at 90% 40%, rgba(0, 210, 211, 0.16) 0%, transparent 45%),
        radial-gradient(circle at 50% 90%, rgba(0, 98, 243, 0.08) 0%, transparent 50%),
        linear-gradient(rgba(0, 98, 243, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 98, 243, 0.03) 1px, transparent 1px);
      background-size: 100% 100%, 100% 100%, 100% 100%, 36px 36px, 36px 36px;
      min-height: 100vh;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

.container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }

/* Верхняя информационная плашка */
    .top-bar {
      font-size: 13px;
      padding: 10px 0;
      color: var(--text-muted);
      border-bottom: 1px solid rgba(0, 98, 243, 0.08);
      background: rgba(255, 255, 255, 0.4);
      backdrop-filter: blur(8px);
    }

.top-bar-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
    }

.top-bar-right {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

.top-bar-phone,
.top-bar-address {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 14px;
      border-radius: var(--radius-pill, 999px);
      background: rgba(0, 98, 243, 0.06);
      border: 1px solid rgba(0, 98, 243, 0.14);
      color: var(--text, #1a1a2e);
      font-weight: 600;
      font-size: 13px;
      text-decoration: none;
      white-space: nowrap;
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    }

.top-bar-phone:hover,
.top-bar-address:hover {
      background: var(--primary-soft, #e7f0fd);
      border-color: rgba(0, 98, 243, 0.35);
      color: var(--primary, #0062f3);
      transform: translateY(-1px);
    }

.status-dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      background: #10b981;
      border-radius: 50%;
      margin-right: 6px;
      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
    }

/* Навигация (Header) */
    header {
      position: sticky;
      top: 12px;
      z-index: 100;
      margin-bottom: 24px;
    }

.header-card {
      position: relative;
      background: var(--glass-bg);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid var(--glass-border);
      border-radius: var(--radius-xl);
      padding: 12px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: var(--glass-shadow);
    }

.brand {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
    }

.brand-logo {
      display: block;
      height: 42px;
      width: auto;
    }

.footer-logo {
      display: block;
      height: 46px;
      width: auto;
      margin-bottom: 12px;
    }

.footer-socials {
      display: flex;
      gap: 10px;
    }

.footer-social {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(0, 98, 243, 0.06);
      border: 1px solid rgba(0, 98, 243, 0.15);
      color: var(--text-muted);
      transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
    }

.footer-social:hover { transform: translateY(-2px); color: #fff; }
.fs-telegram:hover { background: #229ED9; }
.fs-instagram:hover { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }

nav {
      display: flex;
      gap: 30px;
    }

nav a {
      text-decoration: none;
      color: var(--text-dark);
      font-weight: 600;
      font-size: 15px;
      transition: color 0.2s;
    }

.btn-contact {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--primary);
      color: white;
      padding: 10px 20px;
      border-radius: var(--radius-pill);
      text-decoration: none;
      font-weight: 700;
      font-size: 14px;
      box-shadow: 0 4px 12px rgba(0, 98, 243, 0.25);
      transition: all 0.2s ease;
    }

.btn-contact:hover {
      background: var(--primary-hover);
      transform: translateY(-1px);
    }

/* Светлый Футер */
    footer {
      background: rgba(255, 255, 255, 0.6);
      backdrop-filter: blur(16px);
      border-top: 1px solid rgba(0, 98, 243, 0.1);
      padding: 50px 0 30px;
    }

.footer-grid {
      display: grid;
      grid-template-columns: 1.6fr 1fr 1fr;
      gap: 40px;
      margin-bottom: 30px;
    }

.footer-title {
      font-size: 14px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      margin-bottom: 16px;
      color: var(--text-dark);
    }

.footer-menu {
      list-style: none;
    }

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

.footer-menu a {
      color: var(--text-muted);
      text-decoration: none;
      font-size: 14px;
      transition: color 0.2s;
    }

.footer-menu a:hover {
      color: var(--primary);
    }

.footer-bottom {
      border-top: 1px solid rgba(0, 98, 243, 0.08);
      padding-top: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      color: var(--text-muted);
      flex-wrap: wrap;
      gap: 10px;
    }

/* Плашка Cookies */
    .cookie-card {
      position: fixed;
      bottom: 24px;
      left: 24px;
      max-width: 430px;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid var(--glass-border);
      border-radius: var(--radius-xl);
      padding: 22px 24px;
      box-shadow: 0 18px 44px rgba(0, 98, 243, 0.18);
      z-index: 999;
      display: flex;
      flex-direction: column;
      gap: 16px;
      transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    }

.cookie-card.hidden {
      opacity: 0;
      visibility: hidden;
      transform: translateY(20px);
      pointer-events: none;
    }

.cookie-desc {
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.55;
    }

.cookie-desc strong {
      color: var(--text-dark);
      font-weight: 700;
    }

.cookie-policy-link {
      color: var(--primary);
      text-decoration: none;
      font-weight: 600;
    }

.cookie-policy-link:hover,
    .cookie-policy-link:focus-visible {
      text-decoration: underline;
    }

/* Крупная кнопка согласия */
    .btn-cookie-accept {
      align-self: stretch;
      min-height: 56px;
      padding: 16px 30px;
      background: var(--primary);
      color: #fff;
      border: none;
      border-radius: var(--radius-pill);
      font-family: inherit;
      font-size: 17px;
      font-weight: 800;
      letter-spacing: 0.01em;
      text-align: center;
      cursor: pointer;
      box-shadow: 0 12px 26px -10px rgba(0, 98, 243, 0.55);
      transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    }

.btn-cookie-accept:hover {
      background: var(--primary-hover);
      transform: translateY(-2px);
      box-shadow: 0 16px 32px -10px rgba(0, 98, 243, 0.6);
    }

.btn-cookie-accept:active {
      transform: translateY(0);
    }

.btn-cookie-accept:focus-visible {
      outline: 3px solid rgba(0, 98, 243, 0.45);
      outline-offset: 3px;
    }

.footer-bottom a {
      color: var(--text-muted);
      text-decoration: none;
    }

.footer-bottom a:hover,
    .footer-bottom a:focus-visible {
      color: var(--primary);
      text-decoration: underline;
    }

@media (max-width: 768px) {
      .footer-bottom {
        flex-direction: column;
        gap: 10px;
        text-align: center;
      }

      .footer-bottom > div { line-height: 1.8; }

      .brand-logo { height: 34px; }

      .footer-logo { height: 40px; }
    }

/* Ссылка отзыва согласия в футере */
    .footer-sep {
      color: var(--text-muted);
      opacity: 0.5;
      margin: 0 6px;
    }

.cookie-settings {
      color: var(--text-muted);
      text-decoration: none;
      cursor: pointer;
    }

.cookie-settings:hover,
    .cookie-settings:focus-visible {
      color: var(--primary);
      text-decoration: underline;
    }

/* Плавающая панель на мобильных */
    .mobile-bar {
      display: none;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(16px);
      border-top: 1px solid var(--glass-border);
      padding: 10px 16px;
      z-index: 990;
      gap: 10px;
    }

.mobile-bar a {
      flex: 1;
      text-align: center;
      padding: 12px;
      border-radius: var(--radius-pill);
      font-size: 14px;
      font-weight: 700;
      text-decoration: none;
    }

.m-call {
      background: var(--primary);
      color: white;
    }

.m-map {
      background: var(--cyan-light);
      color: var(--primary);
    }

nav a:hover, nav a.active {
      color: var(--primary);
    }

/* Выпадающий подраздел «Цены» (прайс + направления стоматологии) */
    .nav-group {
      position: relative;
      display: flex;
      align-items: center;
    }

.nav-group-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

.nav-caret {
      width: 11px;
      height: 11px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.4;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: transform 0.2s ease;
    }

.nav-sub {
      position: absolute;
      top: calc(100% + 16px);
      left: 50%;
      transform: translateX(-50%) translateY(8px);
      width: max-content;
      min-width: 300px;
      padding: 8px;
      background: rgba(255, 255, 255, 0.98);
      border: 1px solid var(--glass-border);
      border-radius: var(--radius-xl);
      box-shadow: var(--glass-shadow);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
      z-index: 130;
    }

/* невидимый «мостик»: меню не закрывается, пока курсор идёт к пунктам */
    .nav-sub::before {
      content: "";
      position: absolute;
      top: -16px;
      left: 0;
      right: 0;
      height: 16px;
    }

.nav-group:hover .nav-sub,
    .nav-group:focus-within .nav-sub,
    .nav-group.is-open .nav-sub {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
    }

.nav-group:hover .nav-caret,
    .nav-group.is-open .nav-caret {
      transform: rotate(180deg);
    }

.nav-sub a {
      display: block;
      padding: 10px 14px;
      border-radius: 12px;
      font-size: 14.5px;
      font-weight: 600;
      line-height: 1.35;
    }

.nav-sub a + a {
      margin-top: 2px;
    }

.nav-sub a:hover,
    .nav-sub a.active {
      background: var(--primary-soft);
    }

/* Кнопка мобильного меню (бургер) */
    .nav-toggle {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 44px;
      height: 44px;
      padding: 10px;
      background: var(--primary-soft);
      border: none;
      border-radius: 14px;
      cursor: pointer;
      flex: none;
    }

.nav-toggle span {
      display: block;
      height: 2px;
      width: 100%;
      background: var(--primary);
      border-radius: 2px;
      transition: transform 0.25s ease, opacity 0.25s ease;
    }

.nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Мобильная и планшетная раскладка шапки */
    @media (max-width: 1080px) {
      .nav-toggle { display: flex; }

      .btn-contact { display: none; }

      .header-card { padding: 10px 16px; }

      header nav {
        display: none;
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 2px;
        padding: 10px;
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid var(--glass-border);
        border-radius: var(--radius-xl);
        box-shadow: var(--glass-shadow);
        z-index: 120;
        max-height: calc(100vh - 140px);
        overflow-y: auto;
      }

      header nav.is-open { display: flex; }

      header nav a {
        padding: 12px 14px;
        border-radius: 12px;
        font-size: 15.5px;
      }

      header nav a:hover,
      header nav a.active {
        background: var(--primary-soft);
      }

      /* подраздел «Цены» превращается в аккордеон */
      header nav .nav-group {
        display: block;
      }

      header nav .nav-group-link {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
      }

      header nav .nav-sub {
        position: static;
        display: none;
        width: auto;
        min-width: 0;
        margin: 2px 0 6px;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
      }

      header nav .nav-sub::before { display: none; }

      header nav .nav-group.is-open .nav-sub { display: block; }

      /* специфичность выше, чем у десктопных .nav-group.is-open/.hover/:focus-within .nav-sub,
         иначе открытый аккордеон наследует translateX(-50%) и уезжает влево за экран */
      header nav .nav-group.is-open .nav-sub,
      header nav .nav-group:hover .nav-sub,
      header nav .nav-group:focus-within .nav-sub {
        transform: none;
        opacity: 1;
        visibility: visible;
      }

      /* пункты подраздела выглядят так же, как остальные пункты меню:
         те же отступы, кегль и скругления — список ровный, без сдвигов */
      header nav .nav-sub {
        margin: 2px 0;
      }

      header nav .nav-sub a {
        padding: 12px 14px;
        font-size: 15.5px;
        background: none;
      }

      header nav .nav-sub a + a {
        margin-top: 2px;
      }

      .mobile-bar { display: flex; }

      body { padding-bottom: 70px; }
    }

/* ==== Общие блоки текстовых страниц (policy, faq, reviews) ==== */
    .glass-box {
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      border-radius: var(--radius-2xl);
      box-shadow: var(--glass-shadow);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      padding: 34px;
    }

.section-badge {
      display: inline-block;
      background: var(--primary-soft);
      color: var(--primary);
      font-size: 13px;
      font-weight: 700;
      padding: 7px 16px;
      border-radius: var(--radius-pill);
      margin-bottom: 16px;
    }

.page-title {
      font-size: clamp(28px, 4vw, 42px);
      font-weight: 800;
      line-height: 1.15;
      letter-spacing: -0.02em;
      margin-bottom: 14px;
    }

.page-title span {
      color: var(--primary);
    }

.lead-text {
      color: var(--text-muted);
      font-size: 16px;
      max-width: 840px;
    }

/* Хлебные крошки */
    .breadcrumbs {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--text-muted);
      margin-bottom: 16px;
    }

.breadcrumbs a {
      color: var(--text-muted);
      text-decoration: none;
    }

/* Кнопка «Наверх» (создаётся в js/to-top.js) */
    .to-top {
      position: fixed;
      right: 24px;
      bottom: 24px;
      z-index: 980;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 13px 20px;
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid var(--glass-border);
      border-radius: var(--radius-pill);
      box-shadow: var(--glass-shadow);
      color: var(--primary);
      font-family: inherit;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      opacity: 0;
      visibility: hidden;
      transform: translateY(14px);
      pointer-events: none;
      transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s,
                  background 0.2s ease, color 0.2s ease;
    }

.to-top.is-visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      pointer-events: auto;
    }

.to-top:hover {
      background: var(--primary);
      color: #fff;
    }

.to-top:focus-visible {
      outline: 3px solid rgba(0, 98, 243, 0.45);
      outline-offset: 3px;
    }

.to-top-icon {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.4;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex: none;
    }

@media (max-width: 768px) {
      /* поднимаем над фиксированной мобильной панелью, оставляем только иконку */
      .to-top {
        right: 16px;
        bottom: 84px;
        padding: 13px 14px;
        transition: opacity 0.25s ease, visibility 0.25s, bottom 0.25s ease,
                    background 0.2s ease, color 0.2s ease;
      }

      .to-top-text { display: none; }

      /* пока открыт баннер cookie — уезжаем выше него */
      body.cookie-visible .to-top { bottom: 300px; }
    }

@media (prefers-reduced-motion: reduce) {
      .to-top {
        transform: none;
        transition: opacity 0.15s linear, visibility 0.15s linear;
      }
    }

/* ==== Аккордеон FAQ на нативных <details> — работает без JS (reviews.html, faq.html) ==== */
/* FAQ на нативных <details> — работает без JS */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  font-size: 15.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  flex: none;
  font-size: 22px;
  font-weight: 600;
  color: var(--primary);
  line-height: 1;
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item summary:hover {
  color: var(--primary);
}

.faq-item summary:focus-visible {
  outline: 3px solid rgba(0, 98, 243, 0.35);
  outline-offset: -3px;
}

.faq-body {
  padding: 0 22px 20px;
  color: var(--text-muted);
  font-size: 14.5px;
}

.faq-body p + p {
  margin-top: 8px;
}

.faq-body a {
  color: var(--primary);
  text-decoration: none;
}

.faq-body a:hover {
  text-decoration: underline;
}