/*
  ДомСервис63 — кастомные стили поверх Tailwind CDN
  Современная система дизайна: доверие (синий) + срочность (янтарь)
  Обновление: палитра, типографика, spacing-система, состояния, адаптив
*/

/* Типографика: Manrope (заголовки) + Inter (текст) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

:root{
  /* Цвет: бренд-палитра (доверие + акцент срочности) */
  --primary:#1D4ED8;        /* blue-700 — насыщеннее, надёжнее */
  --primary-dark:#1E3A8A;   /* blue-900 для hover/градиента */
  --primary-light:#3B82F6;  /* blue-500 для подсветки */
  --accent:#F59E0B;         /* amber-500 — CTA срочности */
  --accent-dark:#D97706;    /* amber-600 hover */
  --success:#059669;        /* emerald-600 */
  --danger:#DC2626;         /* red-600 */

  /* Текст и поверхности */
  --text:#0F172A;           /* slate-900 — контраст 4.5:1+ */
  --muted:#64748B;          /* slate-500 */
  --bg:#F8FAFC;             /* slate-50 */
  --card:#FFFFFF;
  --border:rgba(15,23,42,0.08);
  --ring:rgba(29,78,216,0.35);

  /* Шрифты */
  --font-sans:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display:'Manrope', var(--font-sans);

  /* Spacing-шкала (4/8px ритм) */
  --space-1:0.25rem; --space-2:0.5rem;  --space-3:0.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem;  --space-8:2rem;    --space-10:2.5rem;
  --space-12:3rem;   --space-16:4rem;

  /* Радиусы */
  --radius-sm:0.5rem; --radius-md:0.75rem; --radius-lg:1rem; --radius-xl:1.25rem;

  /* Тени (единая шкала elevation) */
  --shadow-sm: 0 1px 2px 0 rgba(15,23,42,0.06), 0 1px 3px 0 rgba(15,23,42,0.08);
  --shadow-md: 0 4px 6px -1px rgba(15,23,42,0.08), 0 2px 4px -2px rgba(15,23,42,0.06);
  --shadow-lg: 0 12px 20px -6px rgba(15,23,42,0.12), 0 6px 8px -4px rgba(15,23,42,0.06);
  --shadow-xl: 0 24px 32px -8px rgba(15,23,42,0.16), 0 10px 14px -6px rgba(15,23,42,0.08);
  --shadow-primary: 0 8px 20px -6px rgba(29,78,216,0.45);
  --shadow-accent: 0 8px 20px -6px rgba(245,158,11,0.45);
}

/* Базовая типографика */
body{
  font-family:var(--font-sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
p{ line-height:1.65; }
.text-\[var\(--muted\)\]{ color:var(--muted); }

/* Утилиты компонентов */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), box-shadow 0.25s cubic-bezier(0.4,0,0.2,1), border-color 0.25s ease;
}
.card:hover{
  box-shadow:var(--shadow-md);
  transform: translateY(-3px);
  border-color:rgba(29,78,216,0.20);
}
/* Кликабельные карточки-ссылки: явный фокус */
a.card:focus-visible{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--ring), var(--shadow-md);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  min-height:44px; /* touch-target */
  padding:0.6875rem 1.375rem;
  border-radius:var(--radius-md);
  font-family:var(--font-display);
  font-weight:600;
  font-size:0.9375rem; /* 15px */
  line-height:1.2;
  border:1px solid var(--border);
  color:var(--text);
  background:#fff;
  cursor:pointer;
  transition: transform 0.2s cubic-bezier(0.4,0,0.2,1), box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  box-shadow:var(--shadow-sm);
}
.btn:hover{
  background:#F1F5F9;
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
}
.btn:active{transform:translateY(0)}
.btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--ring), var(--shadow-sm);
}

.btn-primary{
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 55%, var(--primary-dark) 100%);
  color:#fff;
  border-color:transparent;
  box-shadow:var(--shadow-primary);
}
.btn-primary:hover{
  color:#fff;
  box-shadow:0 12px 26px -6px rgba(29,78,216,0.55);
  transform:translateY(-2px);
  filter:brightness(1.05);
}
.btn-primary:focus-visible{
  box-shadow:0 0 0 3px var(--ring), var(--shadow-primary);
}

.btn-accent{
  background: linear-gradient(135deg, #FBBF24 0%, var(--accent) 55%, var(--accent-dark) 100%);
  color:#3A2A00;
  border-color:transparent;
  box-shadow:var(--shadow-accent);
}
.btn-accent:hover{
  color:#3A2A00;
  box-shadow:0 12px 26px -6px rgba(245,158,11,0.55);
  transform:translateY(-2px);
  filter:brightness(1.04);
}
.btn-accent:focus-visible{
  box-shadow:0 0 0 3px rgba(245,158,11,0.4), var(--shadow-accent);
}

/* Крупная CTA-кнопка для ключевых конверсионных зон */
.btn-lg{
  min-height:52px;
  padding:0.875rem 1.75rem;
  font-size:1.0625rem;
  border-radius:var(--radius-lg);
}

.btn-link{
  color:var(--primary);
  font-weight:600;
  text-decoration:none;
  position:relative;
}
.btn-link:hover{text-decoration:underline}
/* Стрелка только у CTA-ссылок «Подробнее» (класс btn-link + mt-*) в карточках услуг */
.card > .btn-link::after{
  content:'\2192';
  margin-left:0.35rem;
  transition:transform 0.2s ease;
  display:inline-block;
}
.card > .btn-link:hover::after{transform:translateX(3px)}
.btn-link:focus-visible{
  outline:none;
  border-radius:0.25rem;
  box-shadow:0 0 0 3px var(--ring);
}

.nav-link{
  color:#475569; /* slate-600 */
  font-weight:500;
  position:relative;
  transition: color 0.2s ease;
}
.nav-link:hover{
  color:var(--primary);
}
.nav-link:focus-visible{
  outline:none;
  color:var(--primary);
  border-radius:0.375rem;
  box-shadow:0 0 0 3px var(--ring);
}
.nav-link::after{
  content:'';
  position:absolute;
  bottom:-4px;
  left:0;
  width:0;
  height:2px;
  border-radius:2px;
  background:var(--primary);
  transition:width 0.3s ease;
}
.nav-link:hover::after{
  width:100%;
}
@media (max-width: 767px){
  /* Крупнее кликабельные зоны в мобильном меню */
  #mobileMenu .nav-link{
    padding:0.75rem 0.75rem;
    min-height:44px;
    display:flex;
    align-items:center;
    border-radius:0.5rem;
  }
  #mobileMenu .nav-link:hover{
    background:rgba(29,78,216,0.06);
  }
  #mobileMenu .nav-link::after{display:none;}
}

/* Skip link для доступности */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{left:1rem; top:1rem; width:auto; height:auto; background:#fff; padding:0.5rem 0.75rem; border:1px solid #e5e7eb; border-radius:0.5rem; z-index:9999}

/* Небольшие правки списков/таблиц */
table.price{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border-radius:1rem;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
table.price th, table.price td{
  padding:0.875rem 1rem;
  border-bottom:1px solid var(--border);
  transition:background-color 0.2s ease;
}
table.price td:last-child{
  font-variant-numeric:tabular-nums;
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
  text-align:right;
}
table.price th{
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
  text-align:left;
  font-family:var(--font-display);
  font-weight:700;
  color:var(--primary-dark);
}
table.price th:last-child{ text-align:right; }
table.price tbody tr:nth-child(even){ background:#FBFCFE; }
table.price tbody tr:hover{
  background:#EFF6FF;
}
table.price tbody tr:last-child td{ border-bottom:none; }
table.price caption{
  caption-side:bottom;
  padding-top:0.75rem;
  color:var(--muted);
  font-size:0.875rem;
  font-style:italic;
}

/* AOS базовая корректировка — мягкое движение */
[data-aos]{will-change:transform, opacity}

/* Заголовки: display-шрифт, тугой трекинг, чёткая иерархия */
h1, h2, h3, h4 {
  font-family:var(--font-display);
  color:var(--text);
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.15;
  text-wrap:balance;
}
h1{ letter-spacing:-0.03em; }

/* Акцентный фрагмент заголовка (по желанию через <span class="text-gradient">) */
.text-gradient{
  background: linear-gradient(120deg, var(--primary-light) 0%, var(--primary) 45%, var(--accent) 120%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Улучшенный header */
header {
  backdrop-filter: blur(12px);
  box-shadow:var(--shadow-sm);
}
header .nav-link{ padding:0.25rem 0; }

/* Плавная прокрутка + отступ под липкий header при переходе по якорям */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

/* Улучшенные details (FAQ) */
details {
  cursor:pointer;
}
details summary {
  transition: color 0.2s ease;
  user-select: none;
}
details summary:hover {
  color:var(--primary);
}
details[open] summary {
  color:var(--primary);
  font-weight:600;
}

/* Акцентированные блоки с числами/статистикой */
.stat-card {
  background: linear-gradient(135deg, rgba(29,78,216,0.06) 0%, rgba(29,78,216,0.02) 100%);
  border-left: 4px solid var(--primary);
}

/* Trust-бейджи (иконка + текст) для hero/секций */
.trust-badge{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.5rem 0.875rem;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:999px;
  font-size:0.8125rem;
  font-weight:600;
  color:var(--text);
  box-shadow:var(--shadow-sm);
}
.trust-badge svg{ width:1.05rem; height:1.05rem; color:var(--primary); flex-shrink:0; }

/* Улучшенный footer */
footer {
  background: linear-gradient(180deg, #FFFFFF 0%, #F1F5F9 100%);
  border-top-color:var(--border);
}

/* Карусель отзывов */
.reviews-carousel-wrapper {
  position: relative;
  overflow: hidden;
  padding: 0 3rem;
  margin: 0 auto;
}

.reviews-carousel {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  gap: 1.5rem;
}

.review-card-compact {
  flex: 0 0 calc(33.333% - 1rem);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s ease, border-color 0.3s ease;
  position: relative;
  min-height: 210px;
}

.review-card-compact:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: rgba(29,78,216,0.2);
}

.review-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.625rem;
}

.review-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.75rem;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

.review-info {
  flex: 1;
  min-width: 0;
}

.review-name {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.review-location {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.125rem;
}

.review-stars {
  color: #F59E0B;
  font-size: 0.9375rem;
  margin-bottom: 0.5rem;
  letter-spacing: 1px;
}

.review-text {
  font-size: 0.875rem;
  line-height: 1.5;
  color: #4B5563;
  margin-bottom: 0.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.review-date {
  font-size: 0.75rem;
  color: var(--muted);
  font-style: italic;
}

/* Кнопки карусели */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: white;
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
}

.carousel-btn:hover {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: var(--shadow-lg);
}

.carousel-btn:hover svg {
  color: white;
}

.carousel-btn svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--text);
  transition: color 0.3s ease;
}

.carousel-btn-prev {
  left: 0;
}

.carousel-btn-next {
  right: 0;
}

/* Индикаторы карусели */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.carousel-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #D1D5DB;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.carousel-dot:hover {
  background: #9CA3AF;
  transform: scale(1.2);
}

.carousel-dot.active {
  background: var(--primary);
  width: 1.5rem;
  border-radius: 0.25rem;
}

/* Модальное окно отзыва */
.review-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  padding: 1rem;
}

.review-modal.active {
  opacity: 1;
  pointer-events: all;
}

.review-modal-content {
  background: white;
  border-radius: 1.25rem;
  max-width: 500px;
  width: 100%;
  box-shadow: var(--shadow-xl);
  transform: scale(0.9);
  transition: transform 0.3s ease;
  max-height: 90vh;
  overflow-y: auto;
}

.review-modal.active .review-modal-content {
  transform: scale(1);
}

.review-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid #E5E7EB;
}

.review-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  color: var(--muted);
  transition: color 0.2s ease;
}

.review-modal-close:hover {
  color: var(--text);
}

.review-form {
  padding: 1.5rem;
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
  color: var(--text);
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #D1D5DB;
  border-radius: 0.5rem;
  font-size: 0.9375rem;
  transition: all 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}
.form-group input:focus-visible,
.form-group textarea:focus-visible {
  outline: 2px solid transparent;
}

.rating-input {
  display: flex;
  gap: 0.25rem;
  font-size: 2rem;
}

.rating-input span {
  cursor: pointer;
  color: #D1D5DB;
  transition: all 0.2s ease;
}

.rating-input span:hover,
.rating-input span.hover {
  color: #FCD34D;
  transform: scale(1.1);
}

.rating-input span.active {
  color: #F59E0B;
}

.form-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
}

/* Уведомление об успехе */
.review-success-toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: white;
  padding: 1rem 1.5rem;
  border-radius: 0.75rem;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 600;
  z-index: 10000;
  transform: translateY(150%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.review-success-toast.show {
  transform: translateY(0);
}

.review-success-toast svg {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

/* Респонсивность */
@media (max-width: 1023px) {
  .review-card-compact {
    flex: 0 0 calc(50% - 0.75rem);
  }
}

@media (max-width: 767px) {
  .review-card-compact {
    flex: 0 0 100%;
  }
  
  .reviews-carousel-wrapper {
    padding: 0 2.5rem;
  }
  
  .carousel-btn {
    width: 2rem;
    height: 2rem;
  }
  
  .carousel-btn svg {
    width: 1rem;
    height: 1rem;
  }
  
  .review-success-toast {
    bottom: 1rem;
    right: 1rem;
    left: 1rem;
    font-size: 0.875rem;
  }
  
  .review-modal-content {
    margin: 1rem;
  }
}

/* Перенос строки для "Звоните:" в десктопной версии */
.phone-break::before{content:"\A"; white-space:pre;}
@media (max-width: 767px){
  .phone-break::before{content:" "}
}

/* Высота карты: 280px на мобиле, 420px на ≥768px */
.map-iframe{height:280px}
@media (min-width:768px){.map-iframe{height:420px}}

/* Hero background: современный градиентный фон с анимацией */
.hero-bg{
  position:relative;
  background: linear-gradient(135deg, #EFF6FF 0%, #F9FAFB 50%, #FEF3C7 100%);
  overflow:hidden;
}
.hero-bg::before,.hero-bg::after{
  content:"";
  position:absolute;
  pointer-events:none;
  border-radius:50%;
  filter:blur(60px);
  opacity:0.4;
  animation: float 10s ease-in-out infinite;
}
/* Синее пятно сверху слева */
.hero-bg::before{
  width:600px;
  height:600px;
  top:-200px;
  left:-150px;
  background: radial-gradient(circle, rgba(37,99,235,0.3) 0%, transparent 70%);
}
/* Янтарное пятно снизу справа */
.hero-bg::after{
  width:500px;
  height:500px;
  bottom:-150px;
  right:-100px;
  background: radial-gradient(circle, rgba(245,158,11,0.35) 0%, transparent 70%);
  animation-delay: 5s;
}

@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, -20px) scale(1.05); }
}

/* Плашки доверия под hero-CTA */
.trust-badges{
  display:grid;
  gap:0.625rem;
  list-style:none;
  padding:0;
  margin:0;
}
@media (min-width:640px){
  .trust-badges{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
.trust-badges li{
  display:flex;
  align-items:center;
  gap:0.5rem;
  font-size:0.875rem;
  font-weight:600;
  color:var(--text);
}
.trust-badges svg{
  width:1.125rem;
  height:1.125rem;
  flex-shrink:0;
  color:var(--primary);
}

/* Портфолио / Галерея */
.portfolio-item {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  aspect-ratio: 4/3;
  background: var(--card);
}

.portfolio-item:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.portfolio-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.portfolio-item:hover .portfolio-image {
  transform: scale(1.05);
}

.portfolio-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(15,23,42,0.85) 0%, rgba(15,23,42,0.25) 60%, transparent 100%);
  padding: 1.75rem 1rem 1rem;
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.portfolio-item:hover .portfolio-overlay,
.portfolio-item:focus-within .portfolio-overlay {
  opacity: 1;
  transform: translateY(0);
}

.portfolio-title {
  color: white;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
  letter-spacing: -0.01em;
}

/* На тач-устройствах подпись видна всегда (hover недоступен) */
@media (hover: none) {
  .portfolio-overlay {
    opacity: 1;
    transform: translateY(0);
    background: linear-gradient(to top, rgba(15,23,42,0.75) 0%, transparent 100%);
    padding-top: 2.5rem;
  }
}

/* Lightbox */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  padding: 1rem;
}

.lightbox.active {
  opacity: 1;
  pointer-events: all;
}

.lightbox-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
  transition: all 0.3s ease;
  z-index: 10001;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: white;
  transform: rotate(90deg);
}

#lightbox-img {
  max-width: 90%;
  max-height: 90vh;
  width: auto;
  height: auto;
  border-radius: 0.5rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.lightbox.active #lightbox-img {
  transform: scale(1);
}

@media (max-width: 767px) {
  .lightbox-close {
    top: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
  }
  
  .lightbox-close svg {
    width: 1.5rem;
    height: 1.5rem;
  }
  
  #lightbox-img {
    max-width: 95%;
    max-height: 85vh;
  }
}

/* ============================================================
   Мобильная плавающая панель звонка (добавляется через JS)
   Только на телефонах — на десктопе не показывается.
   ============================================================ */
.call-bar{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:9990;
  display:none;
  gap:0.625rem;
  padding:0.625rem 0.875rem;
  padding-bottom:calc(0.625rem + env(safe-area-inset-bottom, 0px));
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--border);
  box-shadow:0 -6px 20px -8px rgba(15,23,42,0.18);
}
.call-bar .btn{ flex:1; min-height:48px; }
.call-bar .call-bar-hours{
  display:flex;
  flex-direction:column;
  justify-content:center;
  line-height:1.1;
  padding-right:0.25rem;
}
.call-bar .call-bar-hours b{ font-family:var(--font-display); font-size:0.8125rem; color:var(--text); }
.call-bar .call-bar-hours span{ font-size:0.6875rem; color:var(--muted); }

@media (max-width: 767px){
  .call-bar{ display:flex; }
  /* Резерв места, чтобы панель не перекрывала контент/футер */
  body.has-call-bar{ padding-bottom:76px; }
}

/* ============================================================
   Доступность: уважение к prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  .hero-bg::before, .hero-bg::after{ animation:none; }
  [data-aos]{ opacity:1 !important; transform:none !important; }
}

/* Единое видимое кольцо фокуса для клавиатурной навигации */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
  border-radius:0.375rem;
}