/* ============================================================
   SEO-AUDIT.CSS — стили страницы «SEO-аудит сайта»
   Подключается после direct.css
   Переиспользует все анимации и компоненты direct.css
   ============================================================ */

/* ── Навбар: активная ссылка для данной страницы ── */
.navbar__link--seo-active {
  color: var(--accent) !important;
  pointer-events: none;
  cursor: default;
  opacity: 0.65;
}

/* ============================================================
   PROMO-CARD МОДИФИКАТОРЫ ДЛЯ SEO-АУДИТА
   (цвета для каждой карточки направления)
   ============================================================ */
.promo-card--seo-tech    { --pc-color: #3B82F6; --pc-rgb: 59,130,246; }
.promo-card--seo-speed   { --pc-color: #F97316; --pc-rgb: 249,115,22; }
.promo-card--seo-content { --pc-color: #22C55E; --pc-rgb: 34,197,94; }
.promo-card--seo-links   { --pc-color: #8B5CF6; --pc-rgb: 139,92,246; }

/* Анимированные рамки (border-spin из calculator.css) */
.promo-card--seo-tech::before    { background: linear-gradient(180deg, #93C5FD, #2563EB, #93C5FD); background-size: 100% 200%; animation: border-spin 3s linear infinite; }
.promo-card--seo-speed::before   { background: linear-gradient(180deg, #FCA5A5, #F97316, #FCD34D); background-size: 100% 200%; animation: border-spin 3s linear infinite .4s; }
.promo-card--seo-content::before { background: linear-gradient(180deg, #86EFAC, #16A34A, #86EFAC); background-size: 100% 200%; animation: border-spin 3s linear infinite .8s; }
.promo-card--seo-links::before   { background: linear-gradient(180deg, #C4B5FD, #7C3AED, #C4B5FD); background-size: 100% 200%; animation: border-spin 3s linear infinite 1.2s; }

/* Glow-радиус по цвету */
.promo-card--seo-tech    .promo-card__glow { background: radial-gradient(circle, rgba(59,130,246,.12), transparent 70%); }
.promo-card--seo-speed   .promo-card__glow { background: radial-gradient(circle, rgba(249,115,22,.12), transparent 70%); }
.promo-card--seo-content .promo-card__glow { background: radial-gradient(circle, rgba(34,197,94,.12), transparent 70%); }
.promo-card--seo-links   .promo-card__glow { background: radial-gradient(circle, rgba(139,92,246,.12), transparent 70%); }

/* Кнопки */
.promo-card--seo-tech    .promo-card__btn { background: linear-gradient(135deg, #60A5FA, #2563EB); }
.promo-card--seo-speed   .promo-card__btn { background: linear-gradient(135deg, #FCA5A5, #F97316); }
.promo-card--seo-content .promo-card__btn { background: linear-gradient(135deg, #86EFAC, #16A34A); }
.promo-card--seo-links   .promo-card__btn { background: linear-gradient(135deg, #C4B5FD, #7C3AED); }

/* Прогресс-бары */
.promo-card--seo-tech    .promo-card__bar-fill { background: linear-gradient(90deg, #93C5FD, #2563EB); }
.promo-card--seo-speed   .promo-card__bar-fill { background: linear-gradient(90deg, #FED7AA, #F97316); }
.promo-card--seo-content .promo-card__bar-fill { background: linear-gradient(90deg, #BBF7D0, #16A34A); }
.promo-card--seo-links   .promo-card__bar-fill { background: linear-gradient(90deg, #DDD6FE, #7C3AED); }

/* Тег «основа SEO» — красный как «горячий трафик» */
.promo-card__tag--hot {
  background: rgba(239,68,68,.12);
  color: #DC2626;
  border: 1px solid rgba(239,68,68,.2);
}

/* ============================================================
   HERO — badge shimmer (идентично direct.css)
   ============================================================ */
.direct-hero .calculator-hero__badge {
  animation: direct-badge-breathe 2.8s ease-in-out infinite;
  overflow: hidden;
  background: linear-gradient(135deg, #fdf8f2 0%, #fdf4e8 100%);
  position: relative;
}
.direct-hero .calculator-hero__badge::before {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 45%; height: 100%;
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.75) 50%, transparent 80%);
  transform: skewX(-18deg);
  animation: direct-badge-shimmer 2.4s ease-in-out infinite;
  pointer-events: none;
  border-radius: inherit;
}

/* ============================================================
   SEO-AUDIT SPECIFIC: Дополнительные метрики в кейсах
   (case-metric__val с нетипичными значениями)
   ============================================================ */
.case-metric__val--speed {
  font-feature-settings: "tnum";
  letter-spacing: -0.02em;
  font-size: clamp(18px, 2vw, 22px);
}

/* ============================================================
   SECTION SEO-TEXT (для семантической страницы)
   ============================================================ */
.seo-text-block {
  padding: 48px 0;
  border-top: 1px solid var(--border);
}
.seo-text-block__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 20px;
}
.seo-text-block__body {
  max-width: 860px;
  column-count: 2;
  column-gap: 40px;
}
.seo-text-block__body p {
  font-size: 14px;
  color: var(--text-light);
  line-height: 1.75;
  margin-bottom: 14px;
  break-inside: avoid;
}
@media (max-width: 768px) {
  .seo-text-block__body { column-count: 1; }
  .seo-text-block { padding: 32px 0; }
}

/* ============================================================
   MOBILE OVERRIDES
   ============================================================ */
@media (max-width: 900px) {
  .promo-card--seo-tech,
  .promo-card--seo-speed,
  .promo-card--seo-content,
  .promo-card--seo-links {
    /* Сброс 3D на мобильных */
    transform: none !important;
    transition: box-shadow .3s !important;
  }
}