:root {
  --brand: #3680ad;
}

html { scroll-behavior: smooth; }

.navbar-custom .nav-link {
  font-weight: 500;
}
.navbar-custom .nav-link:hover,
.navbar-custom .nav-link:focus {
  color: var(--brand);
}

.btn-primary {
  border-radius: 12px;
}

.rounded-4 { border-radius: 1rem !important; }

.service-card img,
.card-img-top {
  object-fit: cover;
  height: 180px;
}

#hero {
  background-image: radial-gradient(80% 50% at 10% 10%, rgba(13,110,253,.08), transparent 60%);
}

.step {
  transition: transform .2s ease, box-shadow .2s ease;
}
.step:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
}

/* Мелкие правки для мобильных */
@media (max-width: 991.98px) {
  .navbar .btn {
    padding: .5rem .9rem;
  }
}
/* Floating WhatsApp FAB */
.whatsapp-fab{
  position: fixed;
  right: 18px;
  bottom: max(18px, env(safe-area-inset-bottom, 0px) + 12px);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #25D366;           /* фирменный цвет WhatsApp */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;               /* размер иконки */
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  z-index: 1080;                 /* выше навбара/прочего */
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}

.whatsapp-fab:hover,
.whatsapp-fab:focus-visible{
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
  outline: none;
}

/* Пульсация кольцами */
.whatsapp-fab::before,
.whatsapp-fab::after{
  content:"";
  position: absolute;
  inset: -6px;                   /* кольцо чуть больше кнопки */
  border-radius: 50%;
  border: 2px solid rgba(37,211,102,.55);
  animation: wa-pulse 1.8s ease-out infinite;
}

.whatsapp-fab::after{
  animation-delay: .9s;          /* второе кольцо смещено по времени */
}

@keyframes wa-pulse{
  0%   { transform: scale(0.9); opacity: .75; }
  70%  { transform: scale(1.6); opacity: 0;   }
  100% { transform: scale(1.6); opacity: 0;   }
}

/* Уважение системной настройки "уменьшение анимации" */
@media (prefers-reduced-motion: reduce){
  .whatsapp-fab::before,
  .whatsapp-fab::after{
    animation: none;
    display: none;
  }
}

/* Чуть меньше на очень маленьких экранах */
@media (max-width: 380px){
  .whatsapp-fab{ width: 56px; height: 56px; font-size: 28px; }
}
/* ----- Glassy navbar ----- */
.navbar-glass{
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid rgba(0,0,0,.06);
  transition: background .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.navbar-glass.stuck,
.navbar-glass.scrolled{
  background: rgba(255,255,255,.9);
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
}

/* Лого/бренд */
.brand-logo{ border-radius: 8px; }
.brand-name{ letter-spacing: .2px; }

/* Отступы и визуал меню */
.navbar-nav .nav-link{
  padding: .5rem .75rem;
  font-weight: 500;
  color: #1f2a37;
  position: relative;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus{ color: #0d6efd; }

/* Аккуратное подчёркивание при ховере/активе */
.nav-underline .nav-link::after{
  content:"";
  position:absolute; left:.75rem; right:.75rem; bottom:.25rem;
  height:2px; background: transparent; transform: scaleX(0);
  transform-origin: left; transition: transform .2s ease, background .2s ease;
}
.nav-underline .nav-link:hover::after,
.nav-underline .nav-link:focus::after{ background:#0d6efd; transform: scaleX(1); }

/* Активный пункт (подсветка при скролле) */
.nav-underline .nav-link.active{ color:#0d6efd; }
.nav-underline .nav-link.active::after{ background:#0d6efd; transform: scaleX(1); }

/* Кнопки */
.btn-pill{ border-radius: 999px; padding: .5rem 1rem; }
.btn-outline-success{
  --bs-btn-border-color:#25D366; --bs-btn-color:#25D366;
  --bs-btn-hover-bg:#25D366; --bs-btn-hover-border-color:#25D366;
}
@media (max-width: 991.98px){
  .navbar-glass{ background:#ffffff; }
  #topNav{ padding-top: .75rem; padding-bottom: .75rem; }
  .navbar-nav .nav-link{ padding:.5rem .25rem; }
}
