/* ============================================================
   LD Web — Дизайн-система v3
   Смелый премиум: тёмная тема + градиенты + Unbounded
   Шрифты: Unbounded (заголовки) · Inter (текст)
   ============================================================ */

:root {
  /* Палитра — глубокий тёмный + градиенты */
  --bg: #0A0D13;
  --surface: #11151E;
  --surface-2: #161B26;
  --text: #EDEFF4;
  --muted: #8E95A5;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --header-bg: rgba(10, 13, 19, 0.82);

  /* Градиенты — тёплый «закатный» (розовый → оранжевый) */
  --grad: linear-gradient(120deg, #FF5FA2 0%, #FFB86C 100%);
  --grad-warm: linear-gradient(120deg, #22D3EE 0%, #7C5CFF 100%);
  --accent: #FF5FA2;
  --accent-2: #FFB86C;
  --glow: 0 0 40px rgba(255, 95, 162, 0.35);
  --glow-2: 0 0 40px rgba(255, 184, 108, 0.3);

  /* Полупрозрачные абстрактные узоры */
  --pattern-dots: radial-gradient(rgba(255, 255, 255, 0.06) 1.5px, transparent 1.5px);
  --pattern-lines: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.045) 0 2px, transparent 2px 18px);
  --pattern-rings: repeating-radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 28px);
  --pattern-grid: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);

  /* Типографика */
  --font-display: 'Unbounded', 'Inter', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --display: clamp(34px, 6.5vw, 76px);
  --h2: clamp(26px, 3.6vw, 42px);
  --h3: clamp(18px, 2vw, 22px);
  --body: 16px;
  --small: 14px;
  --eyebrow: 12px;

  /* Геометрия */
  --container: 1180px;
  --space: 140px;
  --radius: 18px;
  --radius-sm: 12px;
  --transition: all 0.35s cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* ============================================================
   Светлая тема (переключается кнопкой, сохраняется в localStorage)
   ============================================================ */
html[data-theme="light"] {
  --bg: #FFFFFF;
  --surface: #F4F5F8;
  --surface-2: #FFFFFF;
  --text: #0E1119;
  --muted: #525A69;
  --line: rgba(16, 20, 29, 0.09);
  --line-strong: rgba(16, 20, 29, 0.2);
  --header-bg: rgba(255, 255, 255, 0.9);
  --accent: #DB2777;        /* тёмно-розовый — контраст на светлом */
  --accent-2: #C2410C;      /* тёмно-оранжевый — контраст на светлом */
  --shadow: 0 14px 40px rgba(16, 20, 29, 0.07);
  --glow: 0 0 40px rgba(219, 39, 119, 0.2);
  --glow-2: 0 0 40px rgba(194, 65, 12, 0.18);

  /* Узоры для светлой темы — тёмные полупрозрачные линии */
  --pattern-dots: radial-gradient(rgba(16, 20, 29, 0.1) 1.7px, transparent 1.7px);
  --pattern-lines: repeating-linear-gradient(45deg, rgba(16, 20, 29, 0.05) 0 2px, transparent 2px 18px);
  --pattern-rings: repeating-radial-gradient(circle at 82% 18%, rgba(16, 20, 29, 0.06) 0 1px, transparent 1px 28px);
  --pattern-grid: linear-gradient(rgba(16, 20, 29, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(16, 20, 29, 0.05) 1px, transparent 1px);
}

/* Донастройка компонентов под светлую тему
   (узоры заданы через background-image в базовых правилах) */
html[data-theme="light"] .card,
html[data-theme="light"] .principle,
html[data-theme="light"] .topic,
html[data-theme="light"] .cat-question,
html[data-theme="light"] .how-step,
html[data-theme="light"] .stat-item,
html[data-theme="light"] .cat-cross {
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
}
html[data-theme="light"] .card:hover,
html[data-theme="light"] .principle:hover,
html[data-theme="light"] .topic:hover,
html[data-theme="light"] .cat-question:hover,
html[data-theme="light"] .how-step:hover,
html[data-theme="light"] .stat-item:hover,
html[data-theme="light"] .cat-cross:hover {
  box-shadow: 0 22px 60px rgba(16, 20, 29, 0.12);
}
html[data-theme="light"] .cta-metarise-info strong{color:#222;}
html[data-theme="light"] .cta-metarise-info div{color:#222;}
html[data-theme="light"] .qa-item:hover { background: var(--surface); }
html[data-theme="light"] .search-input { background: var(--surface); }
html[data-theme="light"] .search-results { background: var(--surface-2); box-shadow: 0 24px 60px rgba(16, 20, 29, 0.18); }
html[data-theme="light"] .qa-article th {background: #0B1C33;color: #fff;}
html[data-theme="light"] .answer-direct { background: rgba(255, 95, 162, 0.08); }

/* ---------- База ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--body);
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color 0.35s ease, color 0.35s ease;
}

img { max-width: 100%; display: block; }
a { color: var(--text); text-decoration: none; transition: var(--transition); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }

/* ---------- Типографика ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; color: var(--text); }
h1 { font-size: var(--display); font-weight: 500; }
h2 { font-size: var(--h2); margin-bottom: 20px; }
h3 { font-size: var(--h3); }

.lead { font-size: 19px; line-height: 1.65; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: var(--small); }

/* Градиентный текст */
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---------- Динамические градиентные узоры для hero ---------- */
.hero-grad {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
/* Градиентные «пятна» (blob) */
.hero-blob-1 {
  width: 420px;
  height: 420px;
  left: -80px;
  top: -60px;
  background: radial-gradient(circle, rgba(255, 95, 162, 0.55), transparent 70%);
  animation: blobFloat1 14s ease-in-out infinite;
}
.hero-blob-2 {
  width: 380px;
  height: 380px;
  right: -60px;
  bottom: -40px;
  background: radial-gradient(circle, rgba(255, 184, 108, 0.5), transparent 70%);
  animation: blobFloat2 17s ease-in-out infinite;
}
.hero-blob-3 {
  width: 260px;
  height: 260px;
  left: 42%;
  top: 50%;
  background: radial-gradient(circle, rgba(124, 92, 255, 0.45), transparent 70%);
  animation: blobFloat3 20s ease-in-out infinite;
}

/* Орбитальные градиентные кольца */
.hero-orbit {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.hero-orbit-1 {
  width: 520px;
  height: 520px;
  right: -140px;
  top: -160px;
  border: 1px solid rgba(255, 95, 162, 0.25);
  border-top-color: rgba(255, 184, 108, 0.6);
  animation: spin 28s linear infinite;
}
.hero-orbit-2 {
  width: 360px;
  height: 360px;
  left: -100px;
  bottom: -120px;
  border: 1px dashed rgba(34, 211, 238, 0.25);
  border-left-color: rgba(255, 95, 162, 0.55);
  animation: spinReverse 36s linear infinite;
}
.hero-orbit-3 {
  width: 120px;
  height: 120px;
  right: 22%;
  bottom: 14%;
  border: 1px solid rgba(255, 184, 108, 0.4);
  border-bottom-color: rgba(255, 95, 162, 0.6);
  animation: spin 18s linear infinite;
}

/* Контейнер всех эффектов hero */
.hero-effects {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.hero > .container,
.hero > .hero-index { position: relative; z-index: 2; }
.hero { overflow: hidden; }

/* Анимации */
@keyframes blobFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, 30px) scale(1.15); }
  66% { transform: translate(-20px, 50px) scale(0.9); }
}
@keyframes blobFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-50px, -30px) scale(1.2); }
}
@keyframes blobFloat3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-30px, -20px) scale(0.85); }
  66% { transform: translate(30px, 20px) scale(1.1); }
}
@keyframes spinReverse { to { transform: rotate(-360deg); } }

/* Надзаголовок-рубрика */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: var(--eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 24px;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--grad);
}

/* ---------- Кнопки ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 16px 36px;
  border-radius: 999px;
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
  border: 1px solid transparent;
}
.btn-grad {
  background-image: var(--grad);
  background-size: 300% 300%;
  color: #0A0D13;
  box-shadow: var(--glow);
  animation: gradFlow 7s ease-in-out infinite;
}
.btn-grad:hover { transform: translateY(-3px); box-shadow: 0 0 60px rgba(255, 95, 162, 0.5); }
.btn-glass { background: rgba(255,255,255,0.04); border-color: var(--line-strong); color: var(--text); backdrop-filter: blur(8px); }
.btn-glass:hover { border-color: var(--accent-2); color: var(--accent-2); transform: translateY(-3px); }
.btn-warm {
  background-image: var(--grad-warm);
  background-size: 300% 300%;
  color: #0A0D13;
  box-shadow: 0 0 40px rgba(255,107,107,0.3);
  animation: gradFlow 8s ease-in-out infinite;
}
.btn-warm:hover { transform: translateY(-3px); box-shadow: 0 0 60px rgba(255,107,107,0.5); }

/* ---------- Шапка ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}
.header-inner {
  max-width: var(--container); margin: 0 auto; padding: 0 32px;
  height: 78px; display: flex; align-items: center; justify-content: space-between;
}
.logo {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(120deg, #FF5FA2 0%, #FFB86C 100%);
  display: flex;
  align-items: center;
  gap: 8px;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.logo .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--grad);
  box-shadow: 0 0 12px rgba(255, 95, 162, 0.8);
}
.nav { display: flex; gap: 36px; align-items: center; }
.nav a { color: var(--muted); font-size: 15px; font-weight: 500; position: relative; }

/* Компактная кнопка «Задать вопрос» в шапке */
.header-ask {
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Кнопка переключения темы */
.theme-toggle {
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}
.theme-toggle:hover { border-color: var(--accent); box-shadow: var(--glow); }
.theme-toggle svg { width: 18px; height: 18px; }
html[data-theme="light"] .theme-toggle .icon-moon { display: none; }
html:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; }

/* Компактный поиск в шапке */
.header-search { position: relative; min-width: 220px; }
.header-search .search-input {
  padding: 10px 40px 10px 18px;
  font-size: 14px;
  background: var(--surface);
}
.header-search .search-ico { right: 14px; width: 16px; height: 16px; }
.header-search .search-results { top: calc(100% + 8px); min-width: 320px; }
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: -6px;
  width: 0; height: 2px; border-radius: 2px;
  background: var(--grad);
  transition: width 0.3s ease;
}
.nav a:hover { color: var(--text); }
.nav a:hover::after { width: 100%; }

/* ---------- Hero ---------- */
.hero { padding: 140px 0 130px; position: relative; }
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(650px 320px at 85% -10%, rgba(255, 95, 162, 0.25), transparent 70%),
    radial-gradient(500px 300px at 5% 110%, rgba(255, 184, 108, 0.15), transparent 70%);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero h1 { max-width: 960px; margin-bottom: 28px; }
.hero .lead { max-width: 580px; margin-bottom: 44px; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* Декоративный большой индекс */
.hero-index {
  position: absolute; right: 20px; bottom: -30px;
  font-family: var(--font-display);
  font-size: 220px; font-weight: 500; line-height: 1;
  letter-spacing: -0.04em;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  opacity: 0.14;
  pointer-events: none;
  user-select: none;
}

/* ---------- Секции ---------- */
.section { padding: var(--space) 0; position: relative; transition: background-color 0.35s ease; }
.section-alt { background: var(--surface); }
.section-head { max-width: 640px; margin-bottom: 64px; }

/* ---------- Поиск по сайту ---------- */
.search-box { position: relative; max-width: 560px; margin-top: 8px; }
.search-input-wrap { position: relative; }
.search-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 18px 56px 18px 24px;
  outline: none;
  transition: var(--transition);
}
.search-input::placeholder { color: var(--muted); }
.search-input:focus { border-color: var(--accent); box-shadow: var(--glow); }
.search-ico {
  position: absolute;
  right: 20px; top: 50%;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  color: var(--muted);
  pointer-events: none;
}

.search-results {
  position: absolute;
  top: calc(100% + 10px);
  left: 0; right: 0;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: var(--transition);
  z-index: 60;
}
.search-results.open { opacity: 1; transform: translateY(0); pointer-events: auto; }

.search-result {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  transition: background 0.2s ease;
}
.search-result:last-child { border-bottom: none; }
.search-result:hover { background: var(--surface); }
.sr-cat { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-2); font-weight: 600; }
.sr-q { font-size: 15px; font-weight: 500; color: var(--text); }
.sr-q mark { background: rgba(255, 95, 162, 0.25); color: var(--text); border-radius: 3px; padding: 0 2px; }

.search-empty { padding: 20px 22px; color: var(--muted); font-size: 14px; }

@media (max-width: 760px) {
  .search-box { max-width: 100%; }
}

/* ---------- Страница категории ---------- */
.cat-hero { padding: 80px 0 60px; position: relative; }
.cat-hero .cat-title { font-size: clamp(32px, 5vw, 56px); margin-bottom: 16px; }
.cat-hero .cat-desc { color: var(--muted); max-width: 640px; font-size: 18px; }
.cat-hero .cat-meta { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 32px; }
.cat-meta-item { display: flex; flex-direction: column; }
.cat-meta-item strong { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--text); }
.cat-meta-item span { color: var(--muted); font-size: 13px; margin-top: 4px; }

/* Сетка вопросов внутри категории */
.cat-questions { display: flex; flex-direction: column; gap: 16px; }
.cat-question {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.cat-question > * { position: relative; z-index: 1; }
.cat-question::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--grad);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.35s ease;
}
.cat-question:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--glow); }
.cat-question:hover::before { transform: scaleY(1); }
.cat-question .cq-num {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 600;
  color: var(--accent-2);
  min-width: 56px;
}
.cat-question .cq-body { flex: 1; }
.cat-question .cq-title { font-size: 19px; font-weight: 500; color: var(--text); }
.cat-question .cq-sub { color: var(--muted); font-size: 14px; margin-top: 4px; }
.cat-question .cq-arrow {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--grad);
  color: #0A0D13;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  opacity: 0;
  transform: scale(0.7);
  transition: var(--transition);
}
.cat-question:hover .cq-arrow { opacity: 1; transform: scale(1); }

/* Перекрёстные ссылки на другие категории */
.cat-cros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cat-cross {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 30px;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.cat-cross > * { position: relative; z-index: 1; }
.cat-cross:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--glow); }
.cat-cross h4 { font-family: var(--font-display); font-size: 16px; margin-bottom: 8px; }
.cat-cross p { color: var(--muted); font-size: 14px; }
.cat-cross .cc-link { display: inline-block; margin-top: 16px; color: var(--accent-2); font-weight: 500; font-size: 14px; }

/* ---------- Статистика ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 72px;
}
.stat-item {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 36px 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
}
.stat-item > * { position: relative; z-index: 1; }
.stat-item::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(220px 140px at 50% 0%, rgba(255, 95, 162, 0.18), transparent 70%);
  opacity: 0; transition: var(--transition);
}
.stat-item:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--glow); }
.stat-item:hover::after { opacity: 1; }
.stat-number {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.5vw, 52px);
  font-weight: 600;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  display: block;
  margin-bottom: 8px;
}
.stat-label { color: var(--muted); font-size: 14px; }

/* ---------- Принципы ---------- */
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.principle {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 40px 36px;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
}
.principle > * { position: relative; z-index: 1; }
.principle::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad);
  opacity: 0;
  transition: var(--transition);
}
.principle:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: var(--glow); }
.principle:hover::before { opacity: 1; }
.principle-num {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 500;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  margin-bottom: 24px;
  display: inline-block;
}
.principle h3 { margin-bottom: 10px; }
.principle p { color: var(--muted); font-size: 15px; }

/* ---------- Темы ---------- */
.topics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.topic {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 44px 40px;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 260px;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
}
.topic::after {
  content: "";
  position: absolute; right: -60px; top: -60px;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 95, 162, 0.28), transparent 70%);
  opacity: 0; transition: var(--transition);
  z-index: 0;
}
.topic > * { position: relative; z-index: 1; }
.topic:hover { transform: translateY(-6px); border-color: rgba(255, 95, 162, 0.5); box-shadow: var(--glow); }
.topic:hover::after { opacity: 1; }
.topic-num {
  font-family: var(--font-display); font-size: 13px;
  color: var(--accent-2); letter-spacing: 0.12em;
}
.topic-title { font-size: 26px; font-weight: 500; margin: 22px 0 12px; }
.topic-desc { color: var(--muted); font-size: 15px; max-width: 360px; }
.topic-meta { color: var(--accent-2); font-size: 14px; font-weight: 500; margin-top: 28px; display: inline-flex; align-items: center; gap: 8px; }
.topic:hover .topic-meta { letter-spacing: 0.04em; }

/* ---------- Как устроен справочник (шаги) ---------- */
.how-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.how-step {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 40px 36px;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
}
.how-step > * { position: relative; z-index: 1; }
.how-step .step-index {
  font-family: var(--font-display);
  font-size: 44px; font-weight: 600; line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  display: block; margin-bottom: 20px;
}
.how-step h3 { margin-bottom: 10px; }
.how-step p { color: var(--muted); font-size: 15px; }
.how-step:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: var(--glow); }

/* ---------- Список вопросов ---------- */
.qa-list { display: flex; flex-direction: column; }
.qa-item {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 30px 12px;
  border-top: 1px solid var(--line);
  transition: var(--transition);
  border-radius: var(--radius-sm);
}
.qa-item:last-child { border-bottom: 1px solid var(--line); }
.qa-item:hover { background: var(--surface-2); padding-left: 24px; padding-right: 24px; }
.qa-title { font-size: 20px; font-weight: 500; font-family: var(--font-body); }
.qa-cat { color: var(--muted); font-size: 13px; margin-top: 4px; }
.qa-arrow {
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--grad);
  color: #0A0D13;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  opacity: 0; transform: scale(0.7);
  transition: var(--transition);
}
.qa-item:hover .qa-arrow { opacity: 1; transform: scale(1); }

/* ---------- CTA ---------- */
.cta-block {
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 28px;
  padding: 90px 72px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.cta-block::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(500px 280px at 50% 0%, rgba(255, 95, 162, 0.22), transparent 70%);
}
.cta-block > * { position: relative; z-index: 1; }
.cta-block .eyebrow { justify-content: center; }
.cta-block h2 { max-width: 600px; margin: 0 auto 20px; }
.cta-block p { color: var(--muted); max-width: 540px; margin: 0 auto 40px; }
.cta-actions { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

/* ---------- Подвал ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 64px 0 36px; background: var(--surface); }
.footer-inner {
  display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap;
  max-width: var(--container); margin: 0 auto; padding: 0 32px;
}
.footer-col h4 {font-size: 14px;font-weight: 600;letter-spacing: 0.14em;text-transform: uppercase;color: var(--muted);margin-bottom: 20px;}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 12px; }
.footer-col a { color: var(--text); font-size: 15px; }
.footer-col a:hover { color: var(--accent-2); }
.footer-bottom {
  max-width: var(--container); margin: 52px auto 0; padding: 24px 32px 0;
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: 13px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}

/* ---------- Модальное окно / форма вопроса ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(5, 8, 14, 0.7);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.modal-overlay.open { opacity: 1; visibility: visible; }

.modal {
  width: 100%;
  max-width: 520px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 24px;
  padding: 44px 40px 40px;
  position: relative;
  overflow: hidden;
  transform: translateY(24px) scale(0.97);
  transition: transform 0.35s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.modal-overlay.open .modal { transform: translateY(0) scale(1); }
.modal::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad);
  background-size: 300% 300%;
  animation: gradFlow 7s ease-in-out infinite;
}
.modal-close {
  position: absolute; top: 18px; right: 18px;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--muted);
  font-size: 20px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.modal-close:hover { color: var(--text); border-color: var(--accent); box-shadow: var(--glow); }
.modal h3 { font-size: 24px; margin-bottom: 8px; }
.modal .modal-sub { color: var(--muted); font-size: 14px; margin-bottom: 28px; }

/* Поля формы */
.form-group { margin-bottom: 18px; }
.form-group label {
  display: block; margin-bottom: 8px;
  font-size: 13px; font-weight: 600;
  color: var(--text); letter-spacing: 0.02em;
}
.form-control {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 14px 16px;
  outline: none;
  transition: var(--transition);
  resize: vertical;
}
.form-control::placeholder { color: var(--muted); }
.form-control:focus { border-color: var(--accent); box-shadow: var(--glow); }
textarea.form-control { min-height: 110px; }

.form-error { color: #FF5A5F; font-size: 12px; margin-top: 6px; display: none; }
.form-group.invalid .form-control { border-color: #FF5A5F; }
.form-group.invalid .form-error { display: block; }

.form-submit {
  width: 100%;
  margin-top: 8px;
}
.form-status { margin-top: 16px; font-size: 14px; text-align: center; display: none; }
.form-status.success { color: #4ADE80; }
.form-status.error { color: #FF5A5F; }

/* Спиннер на кнопке */
.btn-spinner {
  display: none;
  width: 18px; height: 18px;
  border: 2px solid rgba(0, 0, 0, 0.25);
  border-top-color: #0A0D13;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn-loading .btn-spinner { display: block; }
.btn-loading .btn-label { display: none; }

@media (max-width: 600px) {
  .modal { padding: 34px 24px 30px; }
}

/* ---------- Контентная страница Q&A ---------- */
.qa-article {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 64px 72px;
  max-width: 880px;
  margin: 0 auto;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}
.qa-article h1 { font-size: clamp(28px, 4.2vw, 48px); margin-bottom: 12px; }
.qa-article h2 { font-size: 26px; margin-top: 48px; }
.qa-article h3 { font-size: 20px; margin-top: 28px; }
.qa-article p {color: var(--muted);margin-bottom: 18px;font-size: 16px;}
.qa-article ul, .qa-article ol { margin: 0 0 20px 24px; color: var(--muted); }
.qa-article li { margin-bottom: 10px; }

.answer-direct {
  border-left: 2px solid transparent;
  border-image: var(--grad) 1;
  padding: 28px 30px;
  margin: 32px 0;
  background: rgba(255, 95, 162, 0.08);
  font-size: 20px; line-height: 1.6; color: var(--text);
}
.answer-direct strong { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-weight: 600; }

.qa-article table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 24px 0; }
.qa-article th { background: var(--surface); color: var(--text); text-align: left; padding: 14px 18px; font-weight: 600; font-size: 14px; border-bottom: 2px solid var(--line-strong); }
.qa-article td { border-bottom: 1px solid var(--line); padding: 14px 18px; vertical-align: top; color: var(--muted); }

.related { margin-top: 56px; padding-top: 36px; border-top: 1px solid var(--line); }
.related h3 { font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; }
.related ul { list-style: none; margin-left: 0; }
.related li { margin-bottom: 14px; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.related li:last-child { border-bottom: none; }
.related a { font-weight: 500; }
.related a:hover { color: var(--accent-2); }

.sources { margin-top: 40px; font-size: 13px; color: var(--muted); padding-top: 24px; border-top: 1px solid var(--line); }
.sources strong { color: var(--text); }

/* ---------- Микро-анимации ---------- */

/* Переливающийся градиент (единый для тёмной и светлой тем) */
.grad-anim {
  background-image: var(--grad);
  background-size: 300% 300%;
  animation: gradFlow 7s ease-in-out infinite;
}
@keyframes gradFlow {
  0% { background-position: 0% 50%; }
  25% { background-position: 50% 0%; }
  50% { background-position: 100% 50%; }
  75% { background-position: 50% 100%; }
  100% { background-position: 0% 50%; }
}
/* Применение к градиентному тексту */
.grad-text {
  background-image: var(--grad);
  background-size: 300% 300%;
  animation: gradFlow 7s ease-in-out infinite;
}
/* Переливающиеся декоративные элементы (обе темы) */
.logo .dot,
.nav a::after,
.hero-index,
.stat-number,
.step-index,
.cq-arrow,
.qa-arrow,
.principle::before {
  background-size: 300% 300%;
  animation: gradFlow 7s ease-in-out infinite;
}

/* Блик-эффект на кнопках */
.btn-grad, .btn-warm { position: relative; overflow: hidden; }
.btn-grad::after, .btn-warm::after {
  content: "";
  position: absolute; top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}
.btn-grad:hover::after, .btn-warm:hover::after { left: 130%; }

/* «Плавающие» декоративные элементы */
.float-slow { animation: floaty 7s ease-in-out infinite; }
.float-medium { animation: floaty 5s ease-in-out infinite; }
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* Светящееся вращающееся кольцо (декор) */
.glow-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 95, 162, 0.25);
  animation: spin 24s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Появление снизу (при загрузке страницы) */
.reveal { opacity: 0; transform: translateY(30px); animation: revealIn 0.8s cubic-bezier(0.2, 0.6, 0.2, 1) forwards; }
.reveal-d1 { animation-delay: 0.1s; }
.reveal-d2 { animation-delay: 0.2s; }
.reveal-d3 { animation-delay: 0.3s; }
@keyframes revealIn { to { opacity: 1; transform: translateY(0); } }

/* Пульсирующая точка логотипа */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 95, 162, 0.5); }
  70% { box-shadow: 0 0 0 12px rgba(255, 95, 162, 0); }
}
.logo .dot { animation: pulse 3s ease infinite; }

/* ---------- Адаптивность ---------- */
@media (max-width: 960px) {
  .principles { grid-template-columns: 1fr; }
  .topics-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-cros { grid-template-columns: 1fr; }
  .hero-index { opacity: 0.07; }
}
@media (max-width: 760px) {
  .cat-question { padding: 22px 20px; flex-wrap: wrap; }
  .cat-question .cq-num { min-width: 40px; }
  .cat-hero { padding: 56px 0 40px; }
}
@media (max-width: 760px) {
  body { font-size: 15px; }
  .section { padding: 84px 0; }
  .container { padding: 0 20px; }
  .header-inner { padding: 0 20px; height: 68px; }
  .nav { display: none; }
  .hero { padding: 84px 0 72px; }
  .topic { padding: 32px 26px; min-height: auto; }
  .qa-article { padding: 36px 22px; border-radius: 18px; }
  .cta-block { padding: 52px 24px; }
  .footer-inner { padding: 0 20px; }
  .footer-bottom { padding: 20px 20px 0; }
}
/* ============================================================
   LD Web — ДОПОЛНИТЕЛЬНЫЕ адаптивные фиксы
   Добавить в КОНЕЦ style.css (или подключить отдельно после него).
   Исправляет: шапка, hero, таблицы, кнопки, статистика.
   ============================================================ */

/* ---------- Шапка: на мобильных скрываем поиск ---------- */
@media (max-width: 960px) {
  .header-search { display: none !important; }
  .hero-index { display: none !important; }
}

@media (max-width: 760px) {
  body { font-size: 15px; }
  .section { padding: 72px 0 !important; }
  .container { padding-left: 18px !important; padding-right: 18px !important; }
  
.cta-metarise-actions{
  display: grid !important;
  grid-template-columns:repeat(1,1fr) !important;
  width: 100%;
}
  .how-steps{
    grid-template-columns:repeat(1,1fr);
  }

  .footer-inner{
    display:grid;
        grid-template-columns:repeat(1,1fr);
  }
  .cat-questions{
        display:grid;
        grid-template-columns:repeat(1,1fr);
  }

  /* Шапка — компактнее */
  .header-inner {padding: 0 14px !important;height: 69px !important;gap: 6px;}
  .nav { display: none !important; }
  .header-ask { padding: 8px 12px !important; font-size: 13px !important; }
  .theme-toggle { width: 38px !important; height: 38px !important; }
  .logo {font-size: 19px !important;}

  /* Hero */
  .hero { padding: 70px 0 56px !important; }
  .hero h1 { font-size: 30px !important; }
  .hero .lead { font-size: 16px !important; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100% !important; }

  /* Темы/карточки */
  .topic { padding: 28px 22px !important; min-height: auto !important; }
  .topic-title { font-size: 22px !important; }

  /* Статья Q&A */
  .qa-article { padding: 30px 18px !important; border-radius: 16px !important; }
  .qa-article table {
    display: block; overflow-x: auto;
    -webkit-overflow-scrolling: touch; white-space: nowrap;
  }
  .answer-direct { font-size: 17px !important; padding: 20px !important; }

  /* CTA */
  .cta-block { padding: 44px 20px !important; }
  .cta-actions { flex-direction: column; align-items: stretch; }
  .cta-actions .btn { width: 100% !important; }

  /* Статистика */
  .stat-grid { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }

  /* Подвал */
  .footer-inner { padding: 0 18px !important; gap: 28px; }
  .footer-bottom { padding: 18px 18px 0 !important; }
}

@media (max-width: 420px) {
  .stat-number { font-size: 28px !important; }
  .header-ask {font-size: 14px !important;padding: 10px 10px !important;}
}

/* ---------- Модалка успеха после отправки ---------- */
.success-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(5, 8, 14, 0.7);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.success-modal-overlay.open { opacity: 1; visibility: visible; }
.success-modal {
  width: 100%;
  max-width: 420px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 24px;
  padding: 44px 36px 36px;
  text-align: center;
  position: relative;
  transform: translateY(24px) scale(0.95);
  transition: transform 0.4s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.success-modal-overlay.open .success-modal { transform: translateY(0) scale(1); }

.success-check {
  width: 76px;
  height: 76px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--grad);
  background-size: 300% 300%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: gradFlow 7s ease-in-out infinite, popIn 0.5s cubic-bezier(0.2, 0.6, 0.2, 1);
  box-shadow: var(--glow);
}
.success-check svg { width: 38px; height: 38px; color: #0A0D13; }
@keyframes popIn {
  0% { transform: scale(0); }
  70% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.success-modal h3 { font-size: 24px; margin-bottom: 8px; }
.success-modal .success-text { color: var(--muted); font-size: 15px; line-height: 1.6; margin-bottom: 24px; }
.success-modal .success-close {
  display: inline-block;
  width: 100%;
  padding: 13px 20px;
  border-radius: 999px;
  border: none;
  background: var(--grad);
  color: #0A0D13;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.success-modal .success-close:hover { transform: translateY(-2px); box-shadow: var(--glow); }


/* Сетка карточек «Связанные вопросы» */
.related-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.related-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
  transition: var(--transition);
}
.related-card:hover { border-color: var(--accent); box-shadow: var(--glow); transform: translateX(3px); }
.related-card-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft, rgba(255, 95, 162, 0.12));
  color: var(--accent);
}
.related-card-icon svg { width: 18px; height: 18px; }
.related-card-title { flex: 1; font-size: 14px; font-weight: 500; color: var(--text); line-height: 1.4; }
.related-card-arrow { flex-shrink: 0; color: var(--accent); font-size: 16px; }
@media (max-width: 600px) {
  .related-grid { grid-template-columns: 1fr; }
}

.sources { margin-top: 40px; font-size: 13px; color: var(--muted); padding-top: 24px; border-top: 1px solid var(--line); }
.sources strong { color: var(--text); }


/* ---------- CTA на MetaRise (в вопросах) ---------- */
.cta-metarise {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.cta-metarise-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 28px 30px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--dark) 0%, var(--dark-2) 100%);
  color: #fff;
}
.cta-metarise-info { flex: 1; min-width: 220px; }
.cta-metarise-label {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
}
.cta-metarise-text { font-size: 14px; color: rgba(255,255,255,0.78); }
.cta-metarise-text strong { color: #fff; }
.cta-metarise-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cta-metarise-actions .btn { font-size: 14px; padding: 12px 20px; }

/* ---------- Лид-форма «Бесплатный разбор» ---------- */
.lead-form { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.lead-form-card {
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  padding: 32px;
}
.lead-form-card h3 { font-size: 20px; margin-bottom: 6px; }
.lead-form-card .lead-form-sub { color: var(--muted); font-size: 14px; margin-bottom: 20px; }
.lead-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lead-form-row .form-group { margin-bottom: 14px; }
.lead-form-full { grid-column: 1 / -1; }

/* ---------- Раздел «Услуги MetaRise» ---------- */
.mr-services { padding: 90px 0; }
.mr-services .services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.mr-services .service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  padding: 32px 30px;
  overflow: hidden;
  transition: var(--transition);
}
/* градиентная линия сверху при hover */
.mr-services .service-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad);
  background-size: 300% 300%;
  opacity: 0;
  transition: var(--transition);
}
.mr-services .service-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent);
  box-shadow: var(--glow);
}
.mr-services .service-card:hover::before {
  opacity: 1;
  animation: gradFlow 7s ease-in-out infinite;
}
/* SVG-иконка услуги */
.mr-services .service-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  background: linear-gradient(135deg, rgba(255, 95, 162, 0.14), rgba(255, 184, 108, 0.14));
  color: var(--accent);
  transition: var(--transition);
}
.mr-services .service-icon svg { width: 26px; height: 26px; }
.mr-services .service-card:hover .service-icon {
  background: var(--grad);
  color: #0A0D13;
  box-shadow: var(--glow);
  transform: scale(1.05);
}

.mr-services .service-card h4 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--text);
}
.mr-services .service-card p {
  flex: 1;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
  margin-bottom: 20px;
}
.mr-services .service-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--accent);
  transition: var(--transition);
}
.mr-services .service-link:hover {
  color: var(--accent-hover, var(--accent));
  gap: 10px;
}

@media (max-width: 960px) {
  .mr-services .services-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .mr-services { padding: 70px 0; }
  .mr-services .service-card { padding: 26px 22px; }
}
/* ---------- Галочка согласия на обработку данных ---------- */
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 18px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  cursor: pointer;
}
.form-consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--accent);
  cursor: pointer;
  position: relative;
  top: 5px;
  margin-right: 4px;
}
.form-consent a { color: var(--accent); text-decoration: underline; }
.form-consent a:hover { color: var(--accent-hover, var(--accent)); }
.form-group.invalid-consent .form-consent { color: #FF5A5F; }
.form-consent-error {
  display: none;
  color: #FF5A5F;
  font-size: 12px;
  margin: -10px 0 14px;
}
.form-group.invalid-consent .form-consent-error { display: block; }

/* ---------- Похожие вопросы ---------- */
.similar-block { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.similar-block h3 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.similar-list { display: flex; flex-direction: column; gap: 10px; }
.similar-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  transition: var(--transition);
}
.similar-item:hover { border-color: var(--accent); box-shadow: var(--glow); transform: translateX(4px); }
.similar-item .sim-title { font-size: 15px; font-weight: 500; }
.similar-item .sim-arrow { color: var(--accent); font-size: 18px; }

/* ---------- Иконки карточек категорий ---------- */
.topic-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  background: linear-gradient(135deg, rgba(255, 95, 162, 0.14), rgba(255, 184, 108, 0.14));
  color: var(--accent);
  transition: var(--transition);
}
.topic-icon svg { width: 26px; height: 26px; }
.topic:hover .topic-icon {
  background: var(--grad);
  color: #0A0D13;
  box-shadow: var(--glow);
  transform: scale(1.05);
}


/* ---------- Минималистичная карточка Manus (на странице вопроса) ---------- */
.manus-card {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
  transition: var(--transition);
}
.manus-card:hover { border-color: var(--accent); box-shadow: var(--glow); }
.manus-card-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft, rgba(255, 95, 162, 0.12));
  color: var(--accent);
}
.manus-card-icon svg { width: 22px; height: 22px; }
.manus-card-body { flex: 1; min-width: 0; }
.manus-card-title { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.manus-card-text { font-size: 13px; color: var(--muted); line-height: 1.5; }
.manus-card-link {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
  transition: var(--transition);
}
.manus-card-link:hover { gap: 12px; letter-spacing: 0.02em; }
@media (max-width: 600px) {
  .manus-card { flex-wrap: wrap; }
  .manus-card-link { width: 100%; text-align: right; }
}

/* ---------- Кнопка Manus в шапке ---------- */
.header-manus {
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
  white-space: nowrap;
  background: linear-gradient(120deg, #ff5fa2, #ffb86c);
  border: none;
  color: #0A0D13;
}
.header-manus:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(255, 95, 162, 0.4);
  color: #0A0D13;
}
@media (max-width: 760px) {
  .header-manus { display: none; }
}
/* ---------- Блок «Manus AI» (реферальная ссылка) ---------- */
.manus-block {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 56px 48px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  text-align: center;
}
.manus-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(500px 300px at 15% 0%, rgba(255, 95, 162, 0.18), transparent 70%),
    radial-gradient(500px 300px at 85% 100%, rgba(34, 211, 238, 0.16), transparent 70%);
  pointer-events: none;
}
.manus-block > * { position: relative; z-index: 1; }
.manus-badge {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.12);
  color: #7dd3fc;
  margin-bottom: 20px;
}
.manus-block h2 { font-size: 32px; margin-bottom: 12px; color: #fff; }
.manus-block .manus-sub { color: rgba(255,255,255,0.75); max-width: 600px; margin: 0 auto 28px; font-size: 16px; }
.manus-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.manus-btn {
  display: inline-block;
  padding: 15px 32px;
  border-radius: 999px;
  background: linear-gradient(120deg, #ff5fa2, #ffb86c);
  color: #0A0D13;
  font-weight: 700;
  font-size: 16px;
  transition: var(--transition);
  box-shadow: 0 0 30px rgba(255, 95, 162, 0.3);
}
.manus-btn:hover { transform: translateY(-3px); box-shadow: 0 0 50px rgba(255, 95, 162, 0.5); }
.manus-note { margin-top: 18px; font-size: 13px; color: rgba(255,255,255,0.5); }
@media (max-width: 760px) {
  .manus-block { padding: 40px 22px; }
  .manus-block h2 { font-size: 24px; }
}

.article-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px 13px;
  margin: 18px 0 28px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.article-meta__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.article-meta__item svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .8;
}

.article-meta__item a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: rgba(255, 95, 162, .65);
  text-underline-offset: 3px;
}

.article-meta__item a:hover {
  color: var(--accent-2);
}

.article-meta__separator {
  color: var(--accent);
  opacity: .8;
}

@media (max-width: 640px) {
  .article-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 18px;
    padding: 15px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .article-meta__separator {
    display: none;
  }

  .article-meta__item {
    white-space: normal;
  }
}