.glow-split-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 190px;
  height: 54px;
  background-color: #14532d;
  border-radius: 14px;
  text-decoration: none;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
  cursor: pointer;
  overflow: visible; /* Чтобы свечение не обрезалось */
  /* Эффект свечения в покое */
  box-shadow: 0 0 15px rgba(74, 222, 128, 0.6), 
              0 0 30px rgba(74, 222, 128, 0.3),
              inset 0 0 10px rgba(255, 255, 255, 0.3);
  animation: static-glow 2.5s infinite alternate;
}

@keyframes static-glow {
  0% {
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.4), 0 0 20px rgba(74, 222, 128, 0.2);
  }
  100% {
    box-shadow: 0 0 22px rgba(74, 222, 128, 0.8), 0 0 45px rgba(74, 222, 128, 0.5);
  }
}

.btn-front {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #86efac 0%, #22c55e 100%);
  color: #064e3b;
  font-size: 16px;
  z-index: 3;
  border-radius: 14px;
  transition: opacity 0.2s ease;
}

.btn-front i {
  font-size: 18px;
}

.btn-back {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0f381e;
  color: #ffe8ce;
  font-size: 17px;
  letter-spacing: 2px;
  z-index: 1;
  border-radius: 14px;
}

.slats {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  z-index: 2;
  pointer-events: none;
  border-radius: 14px;
  overflow: hidden;
}

.slat {
  flex: 1;
  width: 100%;
  background: linear-gradient(135deg, #86efac 0%, #22c55e 100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}

/* Анимация распада */
.glow-split-btn:hover .btn-front {
  opacity: 0;
}

.glow-split-btn:hover .slat:nth-child(1) {
  transform: translateY(-25px);
  opacity: 0;
}
.glow-split-btn:hover .slat:nth-child(2) {
  transform: translateY(-10px);
  opacity: 0.3;
}
.glow-split-btn:hover .slat:nth-child(3) {
  transform: translateY(10px);
  opacity: 0.3;
}
.glow-split-btn:hover .slat:nth-child(4) {
  transform: translateY(25px);
  opacity: 0;
}

.glow-split-btn:active {
  transform: scale(0.96);
}


/* вторая которая в offcanvas */
.s-glow-split-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 190px;
  height: 54px;
  background-color: #14532d;
  border-radius: 14px;
  text-decoration: none;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
  cursor: pointer;
  overflow: visible;
  box-shadow: 0 0 15px rgba(74, 222, 128, 0.6),
              0 0 30px rgba(74, 222, 128, 0.3),
              inset 0 0 10px rgba(255, 255, 255, 0.3);
  animation: s-static-glow 2.5s infinite alternate;
}

@keyframes s-static-glow {
  0%   { box-shadow: 0 0 10px rgba(74,222,128,.4), 0 0 20px rgba(74,222,128,.2); }
  100% { box-shadow: 0 0 22px rgba(74,222,128,.8), 0 0 45px rgba(74,222,128,.5); }
}

/* .btn-front — теперь сразу opacity: 0 (как после hover) */
.s-btn-front {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #86efac 0%, #22c55e 100%);
  color: #ffe8ce;
  font-size: 17px;
  z-index: 3;
  border-radius: 14px;
  opacity: 0;                 
}

.s-btn-front i { font-size: 18px; }

.s-btn-back {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0f381e;
  color: #ffe8ce;
  font-size: 17px;
  letter-spacing: 2px;
  z-index: 1;
  border-radius: 14px;
}

.s-slats {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  z-index: 2;
  pointer-events: none;
  border-radius: 14px;
  overflow: hidden;
}

/* .slat + hover — теперь сразу конечные transform/opacity */
.s-slat {
  flex: 1;
  width: 100%;
  background: linear-gradient(135deg, #86efac 0%, #22c55e 100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}

.s-slat:nth-child(1) { transform: translateY(-25px); opacity: 0; }    /* < из hover */
.s-slat:nth-child(2) { transform: translateY(-10px); opacity: 0.3; }  /* < из hover */
.s-slat:nth-child(3) { transform: translateY(10px);  opacity: 0.3; }  /* < из hover */
.s-slat:nth-child(4) { transform: translateY(25px);  opacity: 0; }    /* < из hover */

.s-glow-split-btn:hover .s-btn-front { opacity: 0; }
.s-glow-split-btn:hover .s-slat:nth-child(1) { transform: translateY(-25px); opacity: 0; }
.s-glow-split-btn:hover .s-slat:nth-child(2) { transform: translateY(-10px); opacity: 0.3; }
.s-glow-split-btn:hover .s-slat:nth-child(3) { transform: translateY(10px);  opacity: 0.3; }
.s-glow-split-btn:hover .s-slat:nth-child(4) { transform: translateY(25px);  opacity: 0; }

.s-glow-split-btn:active { transform: scale(0.96); }

/* 1 секция фон десктоп */
.sp-section-1 {
    position: relative;
    overflow: hidden;
}

.sp-section-1::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url('/images/bugi-vugi.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: -1;
}

/* Мобильная версия 1 секции */
@media (max-width: 768px) {
    .sp-section-1::before {
		background-image: url('/images/bugi-vugi-mobile-n.jpg');
		background-position: top;

    }
}