/* ==========================================================================
   Bitiy Pixel — Design System 2026
   Глобальный overlay-стиль для всех landing-страниц.
   Подключается ПОСЛЕ inline <style> страницы → перебивает по source-order.
   ========================================================================== */

/* ----- Шрифты ----- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Instrument+Serif:ital@1&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ----- Токены дизайна ----- */
:root {
  --bp-ink: #0b1220;
  --bp-ink-2: #2a3550;
  --bp-muted: #5d6a85;
  --bp-bg: #f4f6fb;
  --bp-surface: #ffffff;
  --bp-line: rgba(11,18,32,.08);
  --bp-line-strong: rgba(11,18,32,.14);
  --bp-accent: #1f6feb;
  --bp-accent-2: #5b8cff;
  --bp-violet: #7a5cff;
  --bp-green: #19c37d;
  --bp-yellow: #ffd166;
  --bp-pink: #ff5e9f;

  --bp-shadow-1: 0 1px 2px rgba(11,18,32,.06), 0 8px 24px rgba(11,18,32,.06);
  --bp-shadow-2: 0 24px 64px rgba(20,40,80,.15);
  --bp-shadow-cta: 0 8px 22px rgba(31,111,235,.35);

  --bp-radius-sm: 12px;
  --bp-radius-md: 18px;
  --bp-radius-lg: 24px;
  --bp-radius-xl: 28px;
}

/* ----- Базовые сбросы (прозрачный фон контейнеров) ----- */
html { overflow-x: clip; scroll-behavior: smooth; }
html, body { background: var(--bp-bg) !important; color: var(--bp-ink) !important; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
  font-feature-settings: 'cv11','ss01','liga','calt';
  font-optical-sizing: auto;
  overflow-x: clip !important;
  background-attachment: scroll !important;
  background-image: none !important;
  position: relative;
}
body::before {
  display: none !important;
}

/* ----- Mesh gradient + grain (поверх старого фона страницы) ----- */
.bp-bg-mesh,
.bp-bg-grain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
}
.bp-bg-mesh {
  background:
    radial-gradient(60% 60% at 12% 10%, rgba(31,111,235,.18) 0%, transparent 60%),
    radial-gradient(50% 60% at 88% 18%, rgba(122,92,255,.16) 0%, transparent 60%),
    radial-gradient(45% 60% at 50% 100%, rgba(25,195,125,.10) 0%, transparent 65%);
  animation: bpMeshShift 22s ease-in-out infinite alternate;
}
.bp-bg-grain {
  opacity: .04; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
@keyframes bpMeshShift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(-2%,1%,0) scale(1.04); }
  100% { transform: translate3d(2%,-1%,0) scale(1.02); }
}
.bp-orb {
  position: fixed; z-index: 0; pointer-events: none;
  border-radius: 50%; filter: blur(70px); opacity: .55;
  will-change: transform;
}
.bp-orb--a {
  width: 480px; height: 480px; top: -160px; right: -120px;
  background: radial-gradient(circle, rgba(91,140,255,.55), transparent 70%);
  animation: bpOrbA 28s ease-in-out infinite alternate;
}
.bp-orb--b {
  width: 420px; height: 420px; bottom: -160px; left: -120px;
  background: radial-gradient(circle, rgba(122,92,255,.45), transparent 70%);
  animation: bpOrbB 24s ease-in-out infinite alternate;
}
@keyframes bpOrbA { 0%{transform:translate(0,0)} 100%{transform:translate(-30px,40px)} }
@keyframes bpOrbB { 0%{transform:translate(0,0)} 100%{transform:translate(40px,-30px)} }
@media (prefers-reduced-motion: reduce) {
  .bp-bg-mesh, .bp-orb { animation: none !important; }
}

/* Поверх фона - вся остальная разметка */
body > * { position: relative; z-index: 1; }

/* ============================================================
   ШАПКА — две раскладки:
   1) <header class="header"><div class="header-inner">…</div></header>
   2) <header class="nav"><a class="logo">…</a><div class="nav-links">…</div></header>
   ============================================================ */
.header,
header.site-header,
.site-header,
header.header,
.nav-header,
header[class*="header"],
body > header.nav {
  position: sticky !important;
  top: 16px !important;
  z-index: 50 !important;
  background: transparent !important;
  border-bottom: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  margin: 16px auto 24px !important;
}

/* Внутренняя капсула */
.header-inner,
.site-header .header-inner,
header .header-inner,
header > .container,
header.header > div:first-child,
body > header.nav {
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.7) !important;
  border: 1px solid var(--bp-line) !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
  box-shadow: var(--bp-shadow-1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  width: calc(100% - 40px) !important;
}
body > header.nav {
  position: sticky !important;
  top: 16px !important;
  z-index: 50 !important;
}

/* В layout #2 — внутри header сидят <a class="logo"> и .nav-links прямо */
header.nav .nav-links,
header > .nav-links {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
header.nav .nav-a,
header > .nav-links .nav-a {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--bp-ink-2) !important;
  text-decoration: none !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  transition: background .2s ease, color .2s ease !important;
}
header.nav .nav-a:hover,
header > .nav-links .nav-a:hover {
  background: rgba(11,18,32,.06) !important;
  color: var(--bp-ink) !important;
}
header.nav .nav-btn,
header > .nav-links .nav-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--bp-accent), var(--bp-violet)) !important;
  color: #fff !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: -.01em !important;
  border: 0 !important;
  box-shadow: var(--bp-shadow-cta) !important;
  text-decoration: none !important;
  transition: transform .15s ease, box-shadow .25s ease, filter .2s ease !important;
}
header.nav .nav-btn:hover,
header > .nav-links .nav-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 12px 28px rgba(31,111,235,.42) !important;
  color: #fff !important;
}

/* Бренд */
.brand,
.site-header .brand,
.header .brand,
a.brand,
.logo,
.site-logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  letter-spacing: -.02em !important;
  color: var(--bp-ink) !important;
  text-decoration: none !important;
}
.brand img,
.brand picture img,
.logo img,
.site-logo img {
  height: 28px !important;
  width: auto !important;
}

/* Навигация */
.nav,
.site-header .nav,
header .nav,
nav.main-nav,
.menu,
.header-nav {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.nav a:not(.btn):not(.btn--accent),
.menu a:not(.btn):not(.btn--accent) {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--bp-ink-2) !important;
  text-decoration: none !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  transition: background .2s ease, color .2s ease !important;
}
.nav a:not(.btn):not(.btn--accent):hover {
  background: rgba(11,18,32,.06) !important;
  color: var(--bp-ink) !important;
}

/* Кнопки */
.btn,
button.btn,
a.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.92) !important;
  color: var(--bp-ink) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: -.01em !important;
  border: 1.5px solid var(--bp-line-strong) !important;
  box-shadow: var(--bp-shadow-1) !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .25s ease, background .2s ease, border-color .2s ease !important;
}
.btn:hover {
  transform: translateY(-1px);
  background: #fff !important;
  border-color: rgba(11,18,32,.22) !important;
  box-shadow: 0 10px 22px rgba(11,18,32,.10) !important;
}
.btn--accent,
.btn-accent,
.btn--primary,
.btn-primary,
a.btn--accent,
button.btn--accent {
  background: linear-gradient(135deg, var(--bp-accent), var(--bp-violet)) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: var(--bp-shadow-cta) !important;
}
.btn--accent:hover,
.btn-accent:hover,
.btn--primary:hover {
  filter: brightness(1.05);
  box-shadow: 0 12px 28px rgba(31,111,235,.42) !important;
  color: #fff !important;
}

/* ============================================================
   КАРТОЧКИ / СЕКЦИИ — общий glass look
   ============================================================ */
.card,
.tariff,
.plan,
.faq-item,
.case,
.advantage,
.feature-card,
.audience-card,
.testimonial,
.review,
.pricing-card,
.integration-card,
.tool-card,
.partner-card,
[class*="card-"]:not([class*="aie-"]) {
  background: rgba(255,255,255,.78) !important;
  border: 1px solid var(--bp-line) !important;
  border-radius: var(--bp-radius-lg) !important;
  box-shadow: var(--bp-shadow-1) !important;
  backdrop-filter: blur(20px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}
.card:hover,
.plan:hover,
.tool-card:hover,
.case:hover,
.advantage:hover,
.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--bp-shadow-2) !important;
}
.plan--popular,
.tariff--popular,
.pricing-card--popular {
  border: 2px solid var(--bp-accent) !important;
  box-shadow: 0 0 0 4px rgba(31,111,235,.12), var(--bp-shadow-2) !important;
}

/* ============================================================
   ТИПОГРАФИКА
   ============================================================ */
h1, .h1, .page h1 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -.035em !important;
  line-height: 1.05 !important;
  color: var(--bp-ink) !important;
}
h1 em, .h1 em {
  font-family: 'Instrument Serif', serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: var(--bp-violet) !important;
}
h2, .h2 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -.025em !important;
  line-height: 1.1 !important;
  color: var(--bp-ink) !important;
}
h2 em, .h2 em {
  font-family: 'Instrument Serif', serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: var(--bp-violet) !important;
}
h3, .h3 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  color: var(--bp-ink) !important;
}
.eyebrow,
.kicker,
.section-eyebrow,
.tag {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: .14em !important;
  color: var(--bp-muted) !important;
}

/* ============================================================
   CTA-кнопки внутри карточек (plan-cta, tool-cta, case-cta и т.д.)
   ============================================================ */
.plan-cta,
.tariff-cta,
.tool-cta,
.case-cta,
.hero-cta,
.cta-btn,
.primary-btn,
.card-cta,
a[class$="-cta"],
a[class*="-cta "] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 14px 24px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, var(--bp-accent), var(--bp-violet)) !important;
  color: #fff !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: -.01em !important;
  border: 0 !important;
  box-shadow: var(--bp-shadow-cta) !important;
  text-decoration: none !important;
  transition: transform .15s ease, box-shadow .25s ease, filter .2s ease !important;
}
.plan-cta:hover,
.tariff-cta:hover,
.tool-cta:hover,
.case-cta:hover,
.hero-cta:hover,
.cta-btn:hover,
.primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(31,111,235,.42) !important;
  filter: brightness(1.05);
  color: #fff !important;
}

/* ============================================================
   Перебиваем Onest везде - всегда Inter
   ============================================================ */
*,
.brand,
.plan-name, .plan-price, .plan-per, .plan-gen, .plan-features,
.tool-name, .tool-desc,
.case-title, .case-desc,
.faq-q, .faq-a,
.section-title, .section-sub,
.page-sub, .page h1, .page h2, .page h3,
.hero-title, .hero-sub,
.feature-title, .feature-desc,
.advantage-title, .advantage-desc {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* ============================================================
   ХЛЕБНЫЕ КРОШКИ
   ============================================================ */
.breadcrumbs {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  color: var(--bp-muted) !important;
}
.breadcrumbs a { color: var(--bp-ink-2) !important; }
.breadcrumbs a:hover { color: var(--bp-accent) !important; }

/* ============================================================
   ФУТЕР
   ============================================================ */
.footer,
footer.footer,
footer.site-footer,
.site-footer,
footer[class*="footer"] {
  position: relative;
  margin-top: 80px !important;
  padding: 48px 20px 36px !important;
  background: rgba(255,255,255,.6) !important;
  border-top: 1px solid var(--bp-line) !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
  text-align: center !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--bp-muted) !important;
}
.footer a,
footer a {
  color: var(--bp-ink-2) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}
.footer a:hover,
footer a:hover { color: var(--bp-accent) !important; }
.footer-inner,
footer .footer-inner {
  max-width: 1180px;
  margin: 0 auto;
}

/* ============================================================
   ИНПУТЫ / ФОРМЫ
   ============================================================ */
input[type="text"]:not(.bp-input),
input[type="email"]:not(.bp-input),
input[type="tel"]:not(.bp-input),
input[type="search"]:not(.bp-input),
input[type="password"]:not(.bp-input),
textarea:not(.bp-input):not([class*="aie-"]) {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  border-radius: 14px !important;
  border: 1.5px solid var(--bp-line-strong) !important;
  background: rgba(255,255,255,.85) !important;
  padding: 12px 16px !important;
  color: var(--bp-ink) !important;
  outline: none !important;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
}
input:focus:not([class*="aie-"]),
textarea:focus:not([class*="aie-"]) {
  border-color: var(--bp-accent) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(31,111,235,.12) !important;
}

/* ============================================================
   МОБИЛЬНАЯ АДАПТАЦИЯ
   ============================================================ */
@media (max-width: 720px) {
  .header { top: 8px !important; margin-bottom: 16px !important; }
  .header-inner {
    margin: 8px auto 0 !important;
    padding: 8px 12px !important;
    width: calc(100% - 16px);
    border-radius: 24px !important;
  }
  .nav { gap: 4px !important; }
  .nav a:not(.btn) { padding: 6px 10px !important; font-size: 13px !important; }
  .btn { padding: 8px 14px !important; font-size: 13px !important; }
  .footer { margin-top: 40px !important; padding: 32px 16px 24px !important; }
}

/* ============================================================
   УБРАТЬ старую сетку-фон (некоторые страницы рисуют квадраты)
   ============================================================ */
body::after {
  display: none !important;
}

/* ============================================================
   БЛОГ — header (.blog-header), main (.blog-main), articles
   ============================================================ */
.blog-header {
  position: sticky !important;
  top: 16px !important;
  z-index: 50 !important;
  background: transparent !important;
  border-bottom: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  margin: 16px auto 24px !important;
}
.blog-header-inner {
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.7) !important;
  border: 1px solid var(--bp-line) !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
  box-shadow: var(--bp-shadow-1) !important;
  width: calc(100% - 40px) !important;
}
.header-brand {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  color: var(--bp-ink) !important;
}
.header-brand img { height: 28px !important; width: auto !important; }
.header-nav {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Hero блога */
.blog-hero h1 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -.035em !important;
  line-height: 1.05 !important;
  color: var(--bp-ink) !important;
}
.blog-hero p {
  font-family: 'Inter', sans-serif !important;
  color: var(--bp-muted) !important;
}
.grad {
  background: linear-gradient(135deg, var(--bp-accent), var(--bp-violet)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* Фильтры категорий */
.filter-btn {
  font-family: 'Inter', sans-serif !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.78) !important;
  border: 1.5px solid var(--bp-line) !important;
  color: var(--bp-ink-2) !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease !important;
}
.filter-btn:hover {
  background: #fff !important;
  border-color: var(--bp-line-strong) !important;
  color: var(--bp-ink) !important;
  transform: translateY(-1px);
}
.filter-btn.active {
  background: linear-gradient(135deg, var(--bp-accent), var(--bp-violet)) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: var(--bp-shadow-cta) !important;
}

/* Карточки статей */
.article-card {
  background: rgba(255,255,255,.8) !important;
  border: 1px solid var(--bp-line) !important;
  border-radius: var(--bp-radius-lg) !important;
  box-shadow: var(--bp-shadow-1) !important;
  backdrop-filter: blur(20px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
  transition: transform .25s ease, box-shadow .25s ease, background .2s ease !important;
}
.article-card:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,.95) !important;
  box-shadow: var(--bp-shadow-2) !important;
}
.article-card-body {
  font-family: 'Inter', sans-serif !important;
}

/* Article page */
.article-main,
.article-layout,
.article-layout-sidebar {
  font-family: 'Inter', sans-serif !important;
  color: var(--bp-ink) !important;
}
.article-meta {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  color: var(--bp-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
}
.article-content {
  font-family: 'Inter', sans-serif !important;
  color: var(--bp-ink) !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
}
.article-content h2,
.article-content h3 {
  font-family: 'Inter', sans-serif !important;
  letter-spacing: -.02em !important;
  color: var(--bp-ink) !important;
}
.article-cta {
  background: rgba(255,255,255,.78) !important;
  border: 1px solid var(--bp-line) !important;
  border-radius: var(--bp-radius-lg) !important;
  box-shadow: var(--bp-shadow-1) !important;
  backdrop-filter: blur(20px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
}
.toc {
  background: rgba(255,255,255,.78) !important;
  border: 1px solid var(--bp-line) !important;
  border-radius: var(--bp-radius-md) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
}
.toc a {
  font-family: 'Inter', sans-serif !important;
  color: var(--bp-ink-2) !important;
  font-weight: 500 !important;
}
.toc a:hover {
  color: var(--bp-accent) !important;
}

/* Footer для блога — он использует .site-footer (уже покрыт основным правилом) */