/* =========================================================
   BLOCK 08 MOTION V1 — FAQ + FINAL CTA + FOOTER
   Static approved geometry remains untouched.
   Motion is layered above baked artwork.
   ========================================================= */

:root{
  --b8-ease:cubic-bezier(.22,.61,.36,1);
  --b8-cyan:#54efff;
}

.faq8-v11 .faq8-main{
  overflow:hidden;
  isolation:isolate;
}

.faq8-motion-layer{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
}

/* ---------------------------------------------------------
   Entry reveal: hide baked text briefly, then uncover it.
   --------------------------------------------------------- */
.faq8-reveal{
  position:absolute;
  background:
    linear-gradient(180deg,rgba(5,17,30,.98),rgba(5,17,30,.94));
  border-radius:18px;
  opacity:1;
  transform:translateY(0);
  will-change:opacity,transform,filter;
}

.faq8-reveal-kicker{
  left:5.0%;
  top:7.0%;
  width:17.0%;
  height:4.4%;
  border-radius:10px;
}
.faq8-reveal-title{
  left:4.8%;
  top:12.1%;
  width:31.2%;
  height:11.5%;
}
.faq8-reveal-copy{
  left:4.8%;
  top:24.5%;
  width:31.0%;
  height:11.8%;
}

.faq8-v11.is-b8-visible .faq8-reveal-kicker{
  animation:b8Uncover .70s var(--b8-ease) .05s forwards;
}
.faq8-v11.is-b8-visible .faq8-reveal-title{
  animation:b8Uncover .92s var(--b8-ease) .14s forwards;
}
.faq8-v11.is-b8-visible .faq8-reveal-copy{
  animation:b8Uncover .96s var(--b8-ease) .28s forwards;
}

@keyframes b8Uncover{
  0%{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
  }
  55%{
    opacity:.72;
    transform:translateY(-8px) scale(.992);
  }
  100%{
    opacity:0;
    transform:translateY(-30px) scale(.982);
    filter:blur(1.5px);
  }
}

/* ---------------------------------------------------------
   FAQ rows: no movement. Only contour wake-up in sequence.
   --------------------------------------------------------- */
.faq8-row-glow{
  position:absolute;
  left:43.05%;
  width:37.25%;
  height:8.15%;
  border:1px solid rgba(84,239,255,0);
  border-radius:14px;
  box-shadow:none;
  opacity:0;
}

.faq8-row-glow.row1{top:10.70%}
.faq8-row-glow.row2{top:19.77%}
.faq8-row-glow.row3{top:28.72%}
.faq8-row-glow.row4{top:37.72%}

.faq8-v11.is-b8-visible .row1{animation:b8RowWake .62s ease .38s both}
.faq8-v11.is-b8-visible .row2{animation:b8RowWake .62s ease .48s both}
.faq8-v11.is-b8-visible .row3{animation:b8RowWake .62s ease .58s both}
.faq8-v11.is-b8-visible .row4{animation:b8RowWake .62s ease .68s both}

@keyframes b8RowWake{
  0%{
    opacity:0;
    border-color:rgba(84,239,255,0);
    box-shadow:none;
  }
  44%{
    opacity:1;
    border-color:rgba(117,247,255,.92);
    box-shadow:0 0 18px rgba(56,223,255,.26);
  }
  100%{
    opacity:0;
    border-color:rgba(84,239,255,0);
    box-shadow:none;
  }
}

/* Actual FAQ clickable rows. They stay fixed. */
.faq8-v11 .faq8-hotspot{
  z-index:7;
  border-radius:14px;
  transition:
    background 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
  border:1px solid transparent;
}

.faq8-v11 .faq8-hotspot:hover,
.faq8-v11 .faq8-hotspot:focus-visible{
  background:linear-gradient(90deg,rgba(49,217,255,.045),rgba(49,217,255,.015));
  border-color:rgba(105,242,255,.48);
  box-shadow:
    inset 0 0 16px rgba(55,226,255,.05),
    0 0 18px rgba(42,211,255,.11);
}

/* ---------------------------------------------------------
   FAQ answer card: animated open/close, no geometry jump.
   --------------------------------------------------------- */
.faq8-v11 .faq8-answer{
  transform-origin:top right;
  transition:
    opacity 220ms ease,
    transform 260ms var(--b8-ease),
    filter 220ms ease;
}

.faq8-v11 .faq8-answer.b8-answer-enter{
  animation:b8AnswerIn .30s var(--b8-ease) both;
}

@keyframes b8AnswerIn{
  0%{
    opacity:0;
    transform:translateY(-6px) scale(.985);
    filter:blur(2px);
  }
  100%{
    opacity:1;
    transform:none;
    filter:blur(0);
  }
}

/* ---------------------------------------------------------
   Final CTA: cinematic focus but no layout movement.
   --------------------------------------------------------- */
.faq8-cta-reveal{
  position:absolute;
  left:34.0%;
  top:60.0%;
  width:44.0%;
  height:22.0%;
  border-radius:30px;
  opacity:0;
  background:
    radial-gradient(circle at 50% 54%,rgba(73,228,255,.17),transparent 52%);
  filter:blur(10px);
}

.faq8-v11.is-b8-visible .faq8-cta-reveal{
  animation:b8CtaGlow 1.35s ease .74s both;
}

@keyframes b8CtaGlow{
  0%{opacity:0;transform:scale(.88)}
  45%{opacity:.9}
  100%{opacity:.28;transform:scale(1.05)}
}

.faq8-cta-beacon{
  position:absolute;
  left:64.4%;
  top:71.4%;
  width:10px;
  height:10px;
  margin:-5px 0 0 -5px;
  border-radius:50%;
  opacity:0;
  background:#dffeff;
  box-shadow:
    0 0 8px rgba(222,255,255,.96),
    0 0 20px rgba(67,230,255,.80),
    0 0 38px rgba(43,196,255,.40);
}

.faq8-v11.is-b8-visible .faq8-cta-beacon{
  animation:b8Beacon 1.9s ease-in-out 1.05s infinite;
}

@keyframes b8Beacon{
  0%,100%{opacity:.16;transform:scale(.7)}
  50%{opacity:.95;transform:scale(1.15)}
}

/* CTA hotspots: glass hover without clipping. */
.faq8-v11 .faq8-quests,
.faq8-v11 .faq8-contact{
  z-index:8;
  border-radius:16px;
  overflow:hidden;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease;
}

.faq8-v11 .faq8-quests::after,
.faq8-v11 .faq8-contact::after{
  content:"";
  position:absolute;
  top:-90%;
  left:-36%;
  width:22%;
  height:280%;
  pointer-events:none;
  opacity:0;
  transform:rotate(17deg);
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.10),
    rgba(227,254,255,.56),
    rgba(255,255,255,.08),
    transparent
  );
}

.faq8-v11 .faq8-quests:hover,
.faq8-v11 .faq8-quests:focus-visible,
.faq8-v11 .faq8-contact:hover,
.faq8-v11 .faq8-contact:focus-visible{
  transform:scale(1.018);
  filter:brightness(1.06);
  box-shadow:
    0 0 0 1px rgba(117,245,255,.35),
    0 0 20px rgba(54,223,255,.16);
}

.faq8-v11 .faq8-quests:hover::after,
.faq8-v11 .faq8-quests:focus-visible::after,
.faq8-v11 .faq8-contact:hover::after,
.faq8-v11 .faq8-contact:focus-visible::after{
  animation:b8ButtonSweep .72s var(--b8-ease) both;
}

@keyframes b8ButtonSweep{
  0%{left:-36%;opacity:0}
  18%{opacity:.82}
  100%{left:126%;opacity:0}
}

/* "Все вопросы" button: same family, calmer. */
.faq8-v11 .faq8-all{
  z-index:8;
  border-radius:14px;
  transition:
    filter 170ms ease,
    box-shadow 170ms ease,
    transform 170ms ease;
}
.faq8-v11 .faq8-all:hover,
.faq8-v11 .faq8-all:focus-visible{
  transform:scale(1.015);
  filter:brightness(1.08);
  box-shadow:0 0 16px rgba(57,225,255,.15);
}

/* ---------------------------------------------------------
   Extra FAQ section.
   --------------------------------------------------------- */
.faq8-v11 .faq8-extra details{
  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}
.faq8-v11 .faq8-extra details:hover{
  border-color:rgba(83,234,255,.42);
  background:rgba(8,29,44,.64);
}
.faq8-v11 .faq8-extra details[open]{
  border-color:rgba(97,240,255,.56);
  box-shadow:0 0 18px rgba(48,216,255,.08);
}

/* ---------------------------------------------------------
   Footer links: subtle active zones only.
   --------------------------------------------------------- */
.faq8-v11 .faq8-footer-link{
  transition:
    background 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease !important;
}
.faq8-v11 .faq8-footer-link:hover,
.faq8-v11 .faq8-footer-link:focus-visible{
  transform:translateY(-1px);
  background:rgba(65,226,255,.035);
  box-shadow:inset 0 -2px 0 rgba(91,240,255,.55);
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .faq8-reveal,
  .faq8-row-glow,
  .faq8-cta-reveal,
  .faq8-cta-beacon{
    display:none!important;
  }
  .faq8-v11 .faq8-quests,
  .faq8-v11 .faq8-contact,
  .faq8-v11 .faq8-all,
  .faq8-v11 .faq8-footer-link{
    transition:none!important;
    transform:none!important;
  }
}




/* =========================================================
   BLOCK 08 V1.2 — REAL ROOT FIXES
   ========================================================= */

/* FAQ #4 no longer has class .q4, so it cannot inherit Block 04 section
   styles. Keep hover identical to the other three FAQ rows. */
.faq8-v11 .faq8-hotspot.faq-q4{
  min-height:0 !important;
  overflow:visible !important;
  background:transparent;
  border:1px solid transparent;
}
.faq8-v11 .faq8-hotspot.faq-q4:hover,
.faq8-v11 .faq8-hotspot.faq-q4:focus-visible{
  background:linear-gradient(90deg,rgba(49,217,255,.045),rgba(49,217,255,.015));
  border-color:rgba(105,242,255,.48);
  box-shadow:
    inset 0 0 16px rgba(55,226,255,.05),
    0 0 18px rgba(42,211,255,.11);
  outline:none !important;
}

/* Contact CTA aligned exactly over the baked button.
   No scaling and no outer focus frame: only inset glow + sweep. */
.faq8-v11 .faq8-contact{
  transform:none !important;
  overflow:hidden !important;
  isolation:isolate;
  border-radius:16px;
}
.faq8-v11 .faq8-contact:hover,
.faq8-v11 .faq8-contact:focus-visible{
  transform:none !important;
  filter:brightness(1.08);
  outline:none !important;
  box-shadow:
    inset 0 0 0 2px rgba(117,245,255,.74),
    inset 0 0 18px rgba(70,231,255,.07),
    0 0 16px rgba(54,223,255,.10) !important;
}
.faq8-v11 .faq8-contact::after{
  border-radius:inherit;
}

/* Primary CTA stays exactly as before. */