/* ============================================
   COMMON — общие стили для лендинга и политики
   ============================================ */

:root {
  --white: #ffffff;
  --bg-soft: #F4F8FA;
  --turquoise: #E8F4F8;
  --blue-light: #E4EFF6;
  --primary: #38B6E4;
  --primary-dark: #2F98BF;
  --blue: #0D517C;
  --text: #1c1e21;
  --text-muted: #626770;
  --border: #e4e7ec;
  --radius-lg: 28px;
  --radius-md: 10px;
  --radius-sm: 10px;
  --shadow-soft: 0 20px 50px -25px rgba(56,182,228,.15);
  --shadow-tiny: 0 6px 18px -10px rgba(56,182,228,.25);
  --shadow-btn: 0 1px 4px rgba(0, 0, 0, .06);
  --shadow-btn-hover: 0 2px 8px rgba(0, 0, 0, .1);
  --container: 1200px;

  /* ---------- Neumorphic "float" shadows (в тонах --bg-soft / --primary) ----------
     Тени сделаны более лаконичными: меньше смещение, меньше размытие,
     меньше контраст светлой части — чтобы неоморфный стиль оставался
     узнаваемым, но не выглядел «выпуклым пластиковым» на любом фоне.
     Лёгкое подсвечивание сверху + мягкая тень снизу дают нужный объём. */
  --neu-light: rgba(255,255,255,.55);
  --neu-dark: rgba(163,182,196,.35);
  --neu-dark-soft: rgba(163,182,196,.22);
  --shadow-neu: 5px 5px 10px var(--neu-dark-soft), -5px -5px 10px var(--neu-light);
  --shadow-neu-hover: 7px 7px 14px var(--neu-dark), -7px -7px 14px var(--neu-light);
  --shadow-neu-pressed: inset 3px 3px 6px var(--neu-dark), inset -3px -3px 6px var(--neu-light);
  --shadow-neu-primary: 5px 5px 12px rgba(47,152,191,.30), -4px -4px 10px rgba(255,255,255,.35);
  --shadow-neu-primary-hover: 7px 7px 16px rgba(47,152,191,.38), -5px -5px 12px rgba(255,255,255,.42);

  /* ---------- Полоса прокрутки модальных окон ---------- */
  --turquoise-scroll: #8FD1E0;
  --turquoise-scroll-hover: #38B6E4;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }

/* Компенсация высоты фиксированного хедера (~80px, 60px в состоянии .scrolled)
   при переходе по якорным ссылкам (#about, #services, #contacts и т.д.) */
section[id] { scroll-margin-top: 96px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  font-family: 'Manrope', sans-serif !important;
  color: var(--text);
  background: var(--bg-soft);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Manrope', sans-serif !important;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -.02em;
  line-height: 1.2;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; }

/* Astra генерирует собственный inline-CSS с шрифтом Montserrat для
   body, button, input, select, textarea, .ast-button, .ast-custom-button
   (настройки Customizer → Типографика). Явно перебиваем его здесь,
   чтобы формы и кнопки везде на сайте гарантированно оставались на Manrope,
   независимо от порядка подключения стилей. */
button, input, select, textarea, .ast-button, .ast-custom-button {
  font-family: 'Manrope', sans-serif !important;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

/* ---------- Header ---------- */
header {
  position: fixed; top: 0; left: 0; right: 0;
  background: rgba(252,252,253,.85);
  backdrop-filter: blur(12px) saturate(160%);
  border-bottom: 1px solid var(--border);
  z-index: 100;
  transition: height .3s ease, box-shadow .3s ease, background .3s ease;
}
.nav-wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 80px;
  transition: height .3s ease;
}
/* Scrolled header — compact + shadow */
header.scrolled {
  background: rgba(252,252,253,.95);
  box-shadow: 0 2px 16px rgba(0,0,0,.08);
  border-bottom-color: transparent;
}
header.scrolled .nav-wrap {
  height: 60px;
}
header.scrolled .logo-img {
  height: 38px;
}
.logo { display: flex; align-items: center; }
.logo-img {
  height: 48px; width: auto; display: block;
  transition: height .3s ease, transform .2s ease, filter .2s ease;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.08));
}
.logo:hover .logo-img {
  transform: scale(1.03);
  filter: drop-shadow(0 2px 6px rgba(56,182,228,.2));
}

nav.main-links { display: flex; gap: 32px; }
nav.main-links a {
  font-family: 'Manrope', sans-serif !important;
  font-size: 15px; font-weight: 500; color: var(--text-muted);
  transition: color .2s ease;
  position: relative;
}
nav.main-links a:hover,
nav.main-links a:focus-visible { color: var(--text); }

.header-right { display: flex; align-items: center; gap: 18px; }
.header-right .btn { display: inline-flex; }
.icon-link {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--bg-soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--primary);
  box-shadow: var(--shadow-neu);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), background .2s ease, box-shadow .25s ease;
}
.icon-link:hover { background: var(--turquoise); transform: translateY(-3px); box-shadow: var(--shadow-neu-hover); }
.icon-link:active { box-shadow: var(--shadow-neu-pressed); transform: translateY(0); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px;
  border-radius: 10px;
  font-weight: 500; font-size: 15px;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, background .2s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--primary); color: #fff; border: none; box-shadow: var(--shadow-neu-primary); }
.btn-primary:hover { background: var(--primary-dark); box-shadow: var(--shadow-neu-primary-hover); transform: translateY(-3px); }
.btn-primary:active { box-shadow: 3px 3px 8px rgba(47,152,191,.35), inset 2px 2px 5px rgba(0,0,0,.12); transform: translateY(0); }
.btn-ghost {
  background: var(--bg-soft); color: var(--text);
  border: none;
  box-shadow: 5px 5px 10px var(--neu-dark-soft), -3px -3px 8px var(--neu-light);
}
.btn-ghost:hover { box-shadow: 7px 7px 14px var(--neu-dark), -4px -4px 10px var(--neu-light); transform: translateY(-3px); }
.btn-ghost:active { box-shadow: var(--shadow-neu-pressed); transform: translateY(0); }
.btn:focus-visible { outline: 3px solid #A8D4E2; outline-offset: 2px; }
.btn-sm { padding: 10px 20px; font-size: 14px; }

/* ---------- Hamburger menu ---------- */
.menu-toggle {
  display: none;
  width: 40px; height: 40px;
  background: var(--bg-soft);
  border: none; border-radius: 50%;
  cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  padding: 0;
  box-shadow: var(--shadow-neu);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
}
.menu-toggle:hover { transform: translateY(-3px); box-shadow: var(--shadow-neu-hover); }
.menu-toggle:active { box-shadow: var(--shadow-neu-pressed); transform: translateY(0); }
.menu-toggle span {
  display: block; width: 18px; height: 2px;
  background: var(--primary); border-radius: 2px;
  transition: all .3s ease;
}
.menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* ---------- Booking Modal ---------- */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(4px);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
.modal-overlay.active { display: flex; }
.modal-card {
  background: var(--bg-soft);
  border-radius: 24px;
  padding: 24px;
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  position: relative;
  box-shadow: 0 12px 32px rgba(20,30,40,.14);
  animation: modalIn .3s ease;
  /* По умолчанию скролл внутри карточки выключен — он включается
     классом .is-scrollable только когда контент не помещается по высоте.
     Это нужно, потому что в WebKit/Blink любые ::-webkit-scrollbar-стили
     принудительно отрисовывают ползунок, даже если контент помещается. */
  overflow: hidden;
  isolation: isolate;
}
/* Бирюзовая полоса прокрутки — на всех формах (запись на приём + заказ сайта).
   Применяется только когда карточке добавлен класс .is-scrollable, который
   выставляет JS, проверяя scrollHeight > clientHeight. */
.modal-card.is-scrollable {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--turquoise-scroll, #8FD1E0) transparent;
}
.modal-card.is-scrollable::-webkit-scrollbar { width: 8px; }
.modal-card.is-scrollable::-webkit-scrollbar-track { background: transparent; }
.modal-card.is-scrollable::-webkit-scrollbar-thumb {
  background-color: var(--turquoise-scroll, #8FD1E0) !important;
  border-radius: 999px !important;
}
.modal-card.is-scrollable::-webkit-scrollbar-thumb:hover { background-color: var(--turquoise-scroll-hover, #38B6E4) !important; }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(20px) scale(.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-close {
  all: unset;
  box-sizing: border-box;
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: #fff !important;
  color: var(--primary-dark) !important;
  border: none !important;
  border-radius: 50% !important;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(13,20,26,.25) !important;
  transition: background .2s ease, color .2s ease, transform .2s ease;
  z-index: 2;
}
.modal-close svg {
  display: block;
  fill: none !important;
  stroke: currentColor !important;
  pointer-events: none;
}
.modal-close:hover {
  background: var(--turquoise) !important;
  color: var(--primary) !important;
  transform: translateY(-2px) rotate(90deg);
}
.modal-card--success { text-align: center; padding: 40px 32px 32px; }
.success-icon {
  width: 64px; height: 64px;
  margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  box-shadow: var(--shadow-neu-primary);
  animation: successPop .45s cubic-bezier(.34,1.56,.64,1);
}
@keyframes successPop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}
.modal-card--success .modal-title { margin-bottom: 8px; }
.modal-card--success .modal-subtitle { margin-bottom: 24px; }

.modal-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
}
.modal-subtitle {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.booking-card {
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
}
.form-row { margin-bottom: 12px; }
.form-row-group {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.form-row-group .form-row { flex: 1 1 0; min-width: 0; }
.form-row-group .form-row--phone { flex: 0 1 40%; }
.form-row-group .form-row--email { flex: 0 1 60%; }
@media (max-width: 420px) {
  .form-row-group { flex-direction: column; gap: 0; }
}
.form-row label {
  display: block; font-size: 13.5px; font-weight: 600; color: var(--text-muted);
  margin-bottom: 8px;
}
.form-row input, .form-row textarea, .form-row select {
  width: 100% !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 12px 16px !important;
  font-family: 'Manrope'; font-size: 14px; color: var(--text);
  background: var(--bg-soft) !important;
  box-shadow: inset 5px 5px 11px var(--neu-dark), inset -5px -5px 11px var(--neu-light) !important;
  transition: box-shadow .25s ease;
}
.form-row select { cursor: pointer; }
.form-row input::placeholder, .form-row textarea::placeholder { color: var(--text-muted); opacity: .7; }
.form-row input:focus, .form-row textarea:focus, .form-row select:focus {
  outline: none;
  box-shadow: inset 5px 5px 11px var(--neu-dark), inset -5px -5px 11px var(--neu-light), 0 0 0 3px rgba(56,182,228,.3) !important;
}
.form-row textarea { resize: vertical; min-height: 70px; }
.form-row input.is-invalid {
  background: #fdf3f2 !important;
  box-shadow: inset 5px 5px 11px rgba(217,83,79,.35), inset -5px -5px 11px var(--neu-light) !important;
}
.form-error {
  display: block; min-height: 16px;
  font-size: 12.5px; color: #d9534f; margin-top: 6px;
}
.form-hint {
  display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 6px;
}
.form-row input[type="file"] {
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 4px 0 !important;
  font-family: 'Manrope'; font-size: 13.5px; color: var(--text-muted);
  cursor: pointer;
}
.form-row input[type="file"]:focus {
  outline: none;
  box-shadow: none !important;
}
.form-row input[type="file"]::file-selector-button {
  border: none;
  border-radius: 10px;
  padding: 8px 16px;
  margin-right: 12px;
  font-family: 'Manrope'; font-size: 13px; font-weight: 600;
  color: #fff;
  background: var(--primary);
  cursor: pointer;
  box-shadow: 3px 3px 6px rgba(47,152,191,.30), -2px -2px 4px var(--neu-light);
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.form-row input[type="file"]::file-selector-button:hover {
  background: var(--primary-dark);
  box-shadow: 4px 4px 8px rgba(47,152,191,.38), -3px -3px 6px var(--neu-light);
  transform: translateY(-1px);
}
.form-row input[type="file"]::file-selector-button:active {
  box-shadow: inset 2px 2px 4px rgba(58,116,135,.40), inset -2px -2px 4px var(--neu-light);
  transform: translateY(0);
}
.form-row input[type="file"]:focus::file-selector-button {
  box-shadow: 3px 3px 6px rgba(47,152,191,.30), -2px -2px 4px var(--neu-light), 0 0 0 3px rgba(56,182,228,.35);
}
.form-row input[type="file"].is-invalid::file-selector-button {
  background: #d9534f;
  box-shadow: 3px 3px 6px rgba(217,83,79,.28), -2px -2px 4px var(--neu-light);
}
.form-row input[type="file"].is-invalid::file-selector-button:hover {
  background: #c9433e;
  box-shadow: 4px 4px 8px rgba(217,83,79,.35), -3px -3px 6px var(--neu-light);
}
.form-row input[type="file"].is-invalid::file-selector-button:active {
  box-shadow: inset 2px 2px 4px rgba(217,83,79,.38), inset -2px -2px 4px var(--neu-light);
}
.form-note { font-size: 12.5px; color: var(--text-muted); margin-top: 16px; text-align: center; }
.form-note a {
  color: var(--primary-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.form-note a:hover { color: var(--primary); }
.form-status {
  display: none; text-align: center; padding: 10px;
  border-radius: 10px; margin-top: 12px; font-size: 14px; font-weight: 500;
}
.form-status--success { background: #E8F4F8; color: var(--primary-dark); }
.form-status--error { background: #fdf3f2; color: #d9534f; }

/* ---------- Responsive — common ---------- */
@media (max-width: 992px) {
  .logo-img { height: 40px; }
  .header-right .icon-link { display: none; }
  .header-right .btn { display: inline-flex; padding: 10px 16px; font-size: 13px; }
  .menu-toggle { display: flex; }
  nav.main-links {
    display: none; position: absolute; top: 80px; left: 0; right: 0;
    background: var(--white); flex-direction: column; align-items: center;
    padding: 20px 0; gap: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
    z-index: 99;
  }
  nav.main-links.open { display: flex; }
  nav.main-links a { font-family: 'Manrope', sans-serif !important; font-size: 16px; padding: 8px 0; }
}

/* ============================================================
   Footer CTA Banner — общий для лендинга и страницы политики
   конфиденциальности (перенесено из landing.css, чтобы не
   подключать там весь landing.css целиком ради одного футера —
   см. functions.php, wp_enqueue_scripts).
   ============================================================ */
.footer-banner{
  background:#cfe8f0; /* продолжение градиента .page-fade-wrap — тот же финальный оттенок */
  padding:0;
  overflow:hidden;
}
/* Градиентный фон-переход к футеру (белый → бирюзовый) — общий для
   лендинга и страницы политики, см. <div class="page-fade-wrap">
   в page-landing.php и page-privacy.php. */
.page-fade-wrap{
  background:linear-gradient(180deg, #ffffff 0%, #eaf5f8 30%, #d8ecf2 65%, #cfe8f0 100%);
}
.footer-banner-inner{
  display:grid;
  grid-template-columns:1fr 1.2fr 1fr;
  align-items:stretch;
  min-height:280px;
}
.footer-banner-img{
  position:relative;
  overflow:hidden;
}
.footer-banner-img img{
  width:100%; height:100%; object-fit:cover;
  -webkit-mask-image: radial-gradient(ellipse 85% 85% at center, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 85% 85% at center, #000 55%, transparent 100%);
}
.footer-banner-content{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:48px 40px;
}
.footer-banner-title{
  font-family:'Manrope', sans-serif;
  font-size:clamp(22px, 2.5vw, 30px);
  font-weight:400;
  color:var(--blue);
  line-height:1.2;
  margin-bottom:24px;
  letter-spacing:-.02em;
}
.footer-banner-title .fbt-highlight{
  background:linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 50%, var(--primary) 100%);
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:var(--primary);
}
.footer-banner-title.is-visible .fbt-highlight{
  animation:fbtShimmer 5s ease-in-out infinite;
}
@keyframes fbtShimmer{
  0%{background-position:0% center;}
  50%{background-position:100% center;}
  100%{background-position:0% center;}
}
/* Строки слогана мягко «всплывают» по очереди при появлении в зоне видимости
   — но только там, где landing.js реально запускается (лендинг) и явно
   помечает блок классом .slogan-animate. На странице политики этого класса
   никогда не будет — текст остаётся видимым сразу, без анимации. */
.footer-banner-title .fbt-line{
  display:inline-block;
}
.footer-banner-title.slogan-animate .fbt-line{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .8s ease, transform .8s ease;
}
.footer-banner-title.slogan-animate.is-visible .fbt-line{
  opacity:1;
  transform:translateY(0);
}
.footer-banner-title.slogan-animate.is-visible .fbt-line:nth-child(1){transition-delay:.3s;}
.footer-banner-title.slogan-animate.is-visible .fbt-line:nth-child(3){transition-delay:.6s;}
.footer-banner-title.slogan-animate.is-visible .fbt-line:nth-child(5){transition-delay:.9s;}
.footer-banner-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 28px;
  background:var(--primary);
  color:#fff;
  border-radius:10px;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.5px;
  box-shadow:var(--shadow-neu-primary);
  transition:all .25s ease;
  width:fit-content;
}
.footer-banner-btn:hover{
  background:var(--primary-dark);
  transform:translateY(-3px);
  box-shadow:var(--shadow-neu-primary-hover);
}
.footer-banner-btn:active{
  transform:translateY(0);
  box-shadow:3px 3px 8px rgba(47,152,191,.35), inset 2px 2px 5px rgba(0,0,0,.12);
}
.footer-banner-contacts{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:20px;
  padding:48px 32px;
}
.footer-contact-item{
  display:flex;
  align-items:center;
  gap:16px;
  text-decoration:none;
  color:var(--text);
  transition:color .2s ease;
}
.footer-contact-item:hover{color:var(--primary);}
.footer-contact-icon{
  width:36px; height:36px; border-radius:50%;
  background:var(--white);
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--primary);
  flex-shrink:0;
  box-shadow:var(--shadow-btn);
  transition:all .2s ease;
}
.footer-contact-item:hover .footer-contact-icon{
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
  box-shadow:var(--shadow-btn-hover);
}
.footer-contact-text{
  font-size:14px;
  font-weight:500;
  line-height:1.4;
}
.footer-contact-text small{
  display:block;
  font-size:12px;
  font-weight:400;
  color:var(--text-muted);
}
.footer-bottom-bar{
  background:var(--primary-dark);
  padding:14px 0;
}
.footer-bottom-inner{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:8px 24px;
}
.footer-bottom-inner span{
  font-size:13px;
  color:rgba(255,255,255,.7);
}
.footer-bottom-inner a{
  font-size:13px;
  color:rgba(255,255,255,.9);
  text-decoration:none;
  transition:color .2s ease;
}
.footer-bottom-inner a:hover{color:#fff;}
/* Вращающаяся по часовой стрелке обводка при наведении.
   Вращаем САМ УГОЛ градиента через @property, а не transform на блоке —
   иначе прямоугольная (не квадратная) обёртка кольца при повороте
   "вылетает" за пределы кнопки на диагональных углах. */
@property --dev-btn-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.footer-dev-order-btn{
  position:relative;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  font-family:'Manrope', sans-serif !important;
  font-size:13px;
  color:rgba(255,255,255,.9);
  background:transparent;
  border:1px solid rgba(255,255,255,.4);
  border-radius:999px;
  padding:5px 16px;
  cursor:pointer;
  line-height:1.4;
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.footer-dev-order-btn:hover{
  color:#fff;
  border-color:rgba(255,255,255,.8);
  background:rgba(255,255,255,.08);
}
.footer-dev-order-btn::before{
  content:"";
  position:absolute;
  inset:-3px;
  z-index:-1;
  border-radius:inherit;
  padding:1.5px;
  /* Узкий яркий блик + затухающий "хвост" — читается как бегущая по контуру точка */
  background:conic-gradient(from var(--dev-btn-angle),
    transparent 0deg,
    transparent 300deg,
    var(--primary) 330deg,
    #fff 350deg,
    #fff 360deg
  );
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
  animation:footerDevBtnSpin 1.6s linear infinite;
  animation-play-state:paused;
}
.footer-dev-order-btn:hover::before{
  opacity:1;
  animation-play-state:running;
}
@keyframes footerDevBtnSpin{
  from { --dev-btn-angle: 0deg; }
  to   { --dev-btn-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce){
  .footer-banner-title .fbt-line{opacity:1; transform:none; transition:none;}
  .footer-banner-title.is-visible .fbt-highlight{animation:none;}
  .footer-dev-order-btn::before{ animation:none; }
}
@media (max-width:992px){
  .footer-banner-inner{grid-template-columns:1fr; min-height:auto;}
  .footer-banner-img{display:none;}
  .footer-banner-content{padding:32px 24px; text-align:center;}
  .footer-banner-btn{margin:0 auto;}
  .footer-banner-contacts{padding:24px; flex-direction:row; flex-wrap:wrap; justify-content:center; gap:16px;}
}
@media (max-width:600px){
  .footer-banner-title{font-size:22px;}
  .footer-banner-contacts{flex-direction:column; align-items:center; gap:16px;}
  .footer-contact-item{justify-content:center;}
  .footer-banner-title{font-size:20px;}
  .footer-banner-btn{padding:12px 20px; font-size:12px;}
  .footer-contact-text{display:none;}
  .footer-banner-contacts{flex-direction:row; justify-content:space-evenly; padding:16px 12px;}
  .footer-contact-item{justify-content:center; width:auto;}
  .footer-bottom-inner{
    justify-content:center;
    text-align:center;
    gap:8px 16px;
  }
  .footer-bottom-inner span,
  .footer-bottom-inner a{
    font-size:12px;
  }
}

/* ============================================================
   ТЁМНЫЙ РЕЖИМ (prefers-color-scheme: dark)
   ============================================================
   В тёмном режиме светлые неоморфные тени становятся визуально
   ярче — на тёмном фоне даже rgba(255,255,255,.55) читается как
   явное белое свечение. Чтобы неоморфный стиль сохранялся, но не
   «выпрыгивал» с экрана:
     - светлая часть тени снижается до rgba(255,255,255,.06)
     - тёмная часть усиливается до rgba(0,0,0,.5)
     - смещения и размытие уменьшаются ещё на ~30%
     - фон становится тёмно-сизым, текст — светло-серым
   Все цветные акценты (--primary, --primary-dark) остаются, чтобы
   сохранить фирменную бирюзовую идентичность клиники.            */
@media (prefers-color-scheme: dark) {
  :root {
    /* Палитра фона и текста */
    --white:        #1a1d24;
    --bg-soft:      #1f232b;
    --turquoise:    #1f2a36;
    --blue-light:   #2a3540;
    --border:       #2a2f38;
    --text:         #e8eaed;
    --text-muted:   #9aa0a6;

    /* Акценты: --primary остаётся, --primary-dark делаем светлее,
       чтобы на тёмном фоне hover был заметен. */
    --primary:      #38B6E4;
    --primary-dark: #7EC5E7;
    --blue:         #8FBFD4;

    /* Неоморфные тени — очень деликатные */
    --neu-light:        rgba(255,255,255,.06);
    --neu-dark:         rgba(0,0,0,.55);
    --neu-dark-soft:    rgba(0,0,0,.35);
    --shadow-neu:           4px 4px 8px var(--neu-dark-soft), -4px -4px 8px var(--neu-light);
    --shadow-neu-hover:     6px 6px 12px var(--neu-dark),     -6px -6px 12px var(--neu-light);
    --shadow-neu-pressed:   inset 3px 3px 6px var(--neu-dark), inset -3px -3px 6px var(--neu-light);
    --shadow-neu-primary:        4px 4px 10px rgba(0,0,0,.45), -3px -3px 8px rgba(255,255,255,.05);
    --shadow-neu-primary-hover:  6px 6px 14px rgba(0,0,0,.55), -4px -4px 10px rgba(255,255,255,.07);

    /* Мягкие тени кнопок — в тёмном режиме чуть сильнее для глубины */
    --shadow-btn:        0 2px 6px rgba(0,0,0,.4);
    --shadow-btn-hover:  0 4px 10px rgba(0,0,0,.5);
    --shadow-soft:       0 12px 30px -20px rgba(0,0,0,.6);
    --shadow-tiny:       0 4px 12px -8px rgba(0,0,0,.5);

    /* Неоморфные «пластилиновые» цвета под тёмный фон */
    --neu-dark-soft:     rgba(0,0,0,.35);
  }

  /* Body — тёмный фон, светлый текст */
  body {
    background: var(--bg-soft);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
  }

  /* Header — полупрозрачный тёмный со стеклянным эффектом */
  header {
    background: rgba(26,29,36,.85);
    border-bottom-color: var(--border);
  }
  header.scrolled {
    background: rgba(26,29,36,.95);
    box-shadow: 0 2px 16px rgba(0,0,0,.3);
  }

  /* Иконки в шапке — на тёмном фоне неоморфная кнопка
     должна иметь чуть более светлый фон, чтобы было видно рельеф */
  .icon-link,
  .menu-toggle {
    background: var(--bg-soft);
    color: var(--primary);
  }
  .icon-link:hover { background: var(--turquoise); }

  /* Hero и секции — тёмные градиенты */
  .hero {
    background: linear-gradient(180deg, var(--turquoise) 0%, var(--bg-soft) 100%);
  }
  .page-title-band {
    background: linear-gradient(180deg, var(--turquoise) 0%, var(--bg-soft) 100%);
  }

  /* Модальные окна — тёмная карточка на затемнённом overlay */
  .modal-overlay { background: rgba(0,0,0,.7); }
  .modal-card {
    background: var(--bg-soft);
    box-shadow: 0 16px 40px rgba(0,0,0,.5);
  }
  .modal-close {
    background: var(--bg-soft) !important;
    color: var(--primary) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,.4) !important;
  }
  .modal-close:hover {
    background: var(--turquoise) !important;
    color: var(--primary-dark) !important;
  }

  /* Поля форм — тёмный inset с лёгким световым подсветом сверху */
  .form-row input,
  .form-row textarea,
  .form-row select {
    background: var(--bg-soft) !important;
    color: var(--text) !important;
    box-shadow: inset 3px 3px 6px var(--neu-dark),
                inset -3px -3px 6px var(--neu-light) !important;
  }
  .form-row input::placeholder,
  .form-row textarea::placeholder {
    color: var(--text-muted);
    opacity: .6;
  }
  .form-row input:focus,
  .form-row textarea:focus,
  .form-row select:focus {
    box-shadow: inset 3px 3px 6px var(--neu-dark),
                inset -3px -3px 6px var(--neu-light),
                0 0 0 3px rgba(56,182,228,.35) !important;
  }
  .form-row input.is-invalid {
    background: #3a1f1f !important;
    box-shadow: inset 3px 3px 6px rgba(217,83,79,.3),
                inset -3px -3px 6px var(--neu-light) !important;
  }

  /* Статусные сообщения формы */
  .form-status--success { background: rgba(56,182,228,.15); color: var(--primary-dark); }
  .form-status--error   { background: rgba(217,83,79,.15);  color: #e57373; }

  /* Footer banner — тёмный фон, но сохраняем бирюзовый акцент */
  .footer-banner { background: #1a2530; }
  .page-fade-wrap {
    background: linear-gradient(180deg, var(--bg-soft) 0%, #1a2530 100%);
  }
  .footer-banner-title { color: var(--blue); }
  .footer-bottom-bar { background: #15181f; }
  .footer-contact-icon {
    background: var(--bg-soft);
    border-color: var(--border);
  }

  /* Кнопка «Заказать сайт» в футере — тёмный контур на тёмном фоне */
  .footer-dev-order-btn {
    color: rgba(255,255,255,.9);
    border-color: rgba(255,255,255,.3);
    background: transparent;
  }
  .footer-dev-order-btn:hover {
    color: #fff;
    border-color: rgba(255,255,255,.6);
    background: rgba(255,255,255,.08);
  }

  /* Lightbox backdrop */
  .lightbox { background: rgba(0,0,0,.92); }

  /* Универсальные секции с белым фоном */
  .contact-details,
  .policy-note,
  .policy-contacts {
    background: var(--bg-soft) !important;
  }

  /* Юридическая информация — тёмная плашка */
  .legal-content { background: var(--bg-soft); }

  /* Хедер в状态 .scrolled */
  .nav-wrap { background: transparent; }

  /* noscript fallback */
  noscript style { color: var(--text); }
}