/* ---------- АНИМИРОВАННЫЙ ТЕКСТ: вкладки + заголовки ---------- */

/* Вкладки в шапке: градиентная заливка + переливающееся подчёркивание */
.nav a{
  color:var(--tx2);text-decoration:none;font-size:15px;position:relative;
  padding:4px 0;background-image:linear-gradient(90deg,var(--cyan),#7c5cff,var(--cyan));
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  transition:color .25s,-webkit-text-fill-color .25s;
}
.nav a::after{
  content:'';position:absolute;left:50%;bottom:-2px;height:2px;width:0;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--cyan),#7c5cff,var(--cyan),transparent);
  background-size:200% 100%;transition:width .3s cubic-bezier(.4,0,.2,1);border-radius:2px;
}
.nav a:hover{
  -webkit-text-fill-color:var(--tx);color:var(--tx);
  background-image:linear-gradient(90deg,var(--cyan),#7c5cff,var(--cyan));
  animation:navFlow 3s linear infinite;
}
.nav a:hover::after{width:100%;animation:navFlow 3s linear infinite}

/* Вкладка активной секции (подсветка при скролле) */
.nav a.on{-webkit-text-fill-color:var(--cyan);color:var(--cyan)}
.nav a.on::after{width:100%}

@keyframes navFlow{0%{background-position:0% 0}100%{background-position:300% 0}}

/* Заголовки секций: плотный белый с мягким свечением (как в CTA-блоке) */
.sec-title{
  color:#fff;text-shadow:0 2px 24px rgba(0,20,40,.85);
  animation:ctaGlow 3.2s ease-in-out infinite;
}
.sec-title .w{
  display:inline-block;opacity:0;transform:translateY(24px) rotateX(-55deg);
  transition:opacity .55s cubic-bezier(.2,.8,.2,1),transform .55s cubic-bezier(.2,.8,.2,1);
}
.sec-title.in .w{opacity:1;transform:none}
/* Задержка появления ставится из anim.js (inline transitionDelay по индексу слова) */

/* Логотип: плавное появление */
.logo{animation:fadeUp .8s .1s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* Кнопка в шапке: пульс */
.btn-cta.hdr-in{animation:fadeUp .8s .25s both,ctaPulse 3.2s 1.2s ease-in-out infinite}
@keyframes ctaPulse{
  0%,100%{box-shadow:0 8px 26px rgba(0,229,255,.18)}
  50%{box-shadow:0 8px 34px rgba(0,229,255,.42)}
}

/* Подзаголовки секций */
.sec-sub{animation:fadeUp .8s .35s both}

/* Ведущий заголовок героя */
.hero h1{
  background:linear-gradient(180deg,#fff 20%,rgba(0,229,255,.9));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:fadeUp .9s .15s both,titleGlow 4s 1.2s ease-in-out infinite;
}

/* Тарифы: заголовки карточек с подчёркиванием-переливом */
.plan h3{position:relative;display:inline-block}
.plan h3::after{
  content:'';position:absolute;left:0;bottom:-4px;height:2px;width:100%;border-radius:2px;
  background:linear-gradient(90deg,var(--cyan),#7c5cff,var(--cyan));background-size:200% 100%;
  transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.4,0,.2,1);
}
.plan:hover h3::after{transform:scaleX(1);animation:navFlow 3s linear infinite}

/* FAQ: текст вопроса — градиент при открытии */
.faq summary{transition:color .25s}
.faq details[open] summary{color:var(--cyan)}

@media (prefers-reduced-motion:reduce){
  .nav a:hover,.btn-cta.hdr-in,.hero h1,.sec-title{animation:none}
  .sec-title .w{opacity:1;transform:none;transition:none}
}