/* =========================
   CTA SECTION (FORCE LIGHT)
========================= */

.section-cta{
  /* light branded background */
  background:
    radial-gradient(1000px 500px at 20% 10%, rgba(94,234,212,0.14), transparent 60%),
    radial-gradient(900px 450px at 95% 0%, rgba(59,130,246,0.12), transparent 55%),
    rgba(3,7,18,0.02);

  border-top: 1px solid rgba(3,7,18,0.06);
}

.cta-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 980px){
  .cta-grid{ grid-template-columns: 1fr; }
}

/* =========================
   FOOTER + STICKY CTA (FORCE LIGHT)
========================= */

.site-footer{
  padding: 28px 0 88px;
  border-top: 1px solid rgba(3,7,18,0.06);
  background: rgba(3,7,18,0.01);
}

.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr 0.8fr;
  gap: 18px;
  align-items:start;
}

@media (max-width: 900px){
  .footer-grid{ grid-template-columns: 1fr; }
}

.footer-links{
  display:grid;
  gap: 8px;
  color: var(--muted);
  font-weight: 600;
}

.footer-meta{ color: var(--muted); }

/* Sticky CTA — always light */
.sticky-cta{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));

  background: linear-gradient(180deg, rgba(255,255,255,0.20), rgba(255,255,255,0.92));
  border-top: 1px solid rgba(3,7,18,0.08);

  backdrop-filter: blur(12px);

  display:none;
  z-index: 999;
}

@media (max-width: 720px){
  .sticky-cta{ display:block; }
}

.sticky-cta.is-hidden{ display:none; }

.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* WhatsApp sticky button */
.wa-fab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 999;

  width: 58px;
  height: 58px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* для ::before */
  overflow: visible;
  /* hover-плавность */
  transition: transform .18s ease, filter .18s ease;
  transform: translateZ(0);
}

/* псевдоэлементу нужен reference — сделаем через wrapper-приём */
.wa-fab{ will-change: transform; }
.wa-fab{ /* оставляем как есть */ }

.wa-fab__icon{
  width: 58px;
  height: 58px;
  display: block;

  /* заметная тряска раз в 5 секунд */
  animation: wa-jiggle 5s infinite;
  transform-origin: center;
  will-change: transform;
}

/* пульсирующее кольцо */
.wa-fab::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius: inherit;
  border: 2px solid rgba(255,255,255,.55);
  opacity: 0;
  transform: scale(.7);
  pointer-events: none;

  animation: wa-ping 5s infinite;
  will-change: transform, opacity;
}

/* ВАЖНО: чтобы ::before работал, нужен relative-контекст.
   Решение: добавь relative только без влияния на fixed — можно так: */
.wa-fab{ position: fixed; }
.wa-fab{ /* fixed остаётся fixed, но absolute внутри всё равно привязывается к нему */
}

/* hover: увеличиваем кнопку, и выключаем анимацию */
.wa-fab:hover{
  transform: scale(1.10);
  filter: brightness(1.02);
}
.wa-fab:hover .wa-fab__icon,
.wa-fab:hover::before{
  animation: none;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .wa-fab__icon,
  .wa-fab::before{
    animation: none;
  }
}

/* 0–75% стоим, 75–100% активно двигаемся = раз в 5 секунд */
@keyframes wa-jiggle{
  0%, 74% { transform: translate(0,0) rotate(0deg) scale(1); }
  76% { transform: translate(-4px,-2px) rotate(-10deg) scale(1.10); }
  78% { transform: translate(5px, 2px) rotate(10deg)  scale(1.12); }
  80% { transform: translate(-5px,1px) rotate(-12deg) scale(1.12); }
  82% { transform: translate(5px,-1px) rotate(12deg)  scale(1.12); }
  84% { transform: translate(-3px,0) rotate(-8deg)  scale(1.08); }
  86% { transform: translate(0,-6px) rotate(0deg)   scale(1.10); }
  90% { transform: translate(0,0) rotate(0deg) scale(1); }
  100%{ transform: translate(0,0) rotate(0deg) scale(1); }
}

@keyframes wa-ping{
  0%, 74% { opacity: 0; transform: scale(.7); }
  76% { opacity: .7; transform: scale(1.0); }
  86% { opacity: 0; transform: scale(1.7); }
  100%{ opacity: 0; transform: scale(.7); }
}

/* чтобы не залезало на sticky CTA на мобилке */
@media (max-width: 640px){
  .wa-fab{ bottom: 88px; }
}
/* Sticky CTA обычно должен быть "ниже" WhatsApp по z-index */
.sticky-cta{
  z-index: 1000;
  padding-bottom: env(safe-area-inset-bottom); /* iOS safe area */
}

/* WhatsApp — выше и всегда над sticky CTA */
.wa-fab{
  z-index: 1100;
}

/* На мобилке поднимаем WA НАД sticky CTA */
@media (max-width: 640px){
  .wa-fab{
    /* подстрой число 96px под реальную высоту sticky CTA */
    bottom: calc(16px + 46px + env(safe-area-inset-bottom));
  }
}