/* ============================================================
   aurora-unify.css
   Приводит внутренние страницы к дизайн-системе главной (Aurora).
   Подключается ПОСЛЕДНИМ в <head> — после инлайновых <style> страницы,
   поэтому при равной специфичности переопределяет их.
   ============================================================ */

/* ---- общие токены (переопределяют локальные :root внутренних страниц) ---- */
:root {
  --bg: #ffffff;
  --bg2: #f3f7ff;
  --bg-2: #f3f7ff;
  --bg3: #eef3ff;
  --bg-3: #eef3ff;
  --surface: #ffffff;
  --s1: #ffffff;
  --s2: #f3f7ff;
  --line: #e7edf9;
  --border: #e7edf9;
  --brd: #e7edf9;
  --line-strong: #d9e2f3;
  --border2: #d9e2f3;
  --brd2: #d9e2f3;
  --ink: #0d0f14;
  --text: #0d0f14;
  --tx: #0d0f14;
  --ink-2: #586074;
  --text-mid: #586074;   /* было #cccccc — невидимо на белом */
  --text-dim: #6b7384;   /* было #888 */
  --muted: #6b7384;
  --mu: #6b7384;
  --ink-3: #98a1b5;
  --accent: #3a5cff;
  --green: #3a5cff;
  --gr: #3a5cff;
  --blue: #3a5cff;
  --bl: #3a5cff;
  --blue-2: #5a78f0;
  --bl2: #5a78f0;
  --accent2: #ef4d4d;
  --red: #ef4d4d;
  --rd: #ef4d4d;
  --accent-tint: #eef3ff;
  --accent-soft: #d8e2ff;

  --radius: 14px;          /* ux-test был 5px */
  --r: 14px;
  --u-card-radius: 18px;
  --u-shadow: 0 14px 40px -22px rgba(40, 70, 180, 0.22);
  --u-shadow-sm: 0 8px 24px -14px rgba(40, 70, 180, 0.16);
}

/* ---- мягкий амбиентный фон как на главной ---- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 32% at 88% 4%, rgba(120, 150, 255, 0.14), transparent 70%),
    radial-gradient(30% 26% at 4% 38%, rgba(150, 175, 255, 0.10), transparent 70%);
}
.wrap, nav, section, footer, .pg, .scr, .container, main { position: relative; z-index: 1; }

/* ---- типографика: единый Manrope, без жёстких Oswald/Golos/Unbounded ---- */
body,
.hero-title, .hero-sub, .hero-eyebrow, .sec-eye, .tag,
.btn-main, .calc-title, .calc-sval, .calc-sunit, .calc-rbig,
.about-name, .about-role, .bc-pre, .bc-h, .offer-price,
.lc-num, .cm-val, .as-val, .free-big, .calc-eye, .calc-rlabel,
.nav-tag, .section-label, .next-btn-title, .next-btn-label,
.col-box h4, .diagram-title, .action-card h3, .fix-block h3,
.next-btn, .funnel-step, .fs-note, .get-num, .ps-num, .case-num,
.m-title, .m-step, .title, .logo, h1, h2, h3, h4 {
  font-family: 'Manrope', system-ui, sans-serif !important;
}

/* заголовки чуть плотнее, как на главной */
.hero-title { letter-spacing: -0.03em !important; font-weight: 800 !important; }

/* ============================================================
   КНОПКИ — единый pill-стиль
   ============================================================ */
.btn-main,
.cta-btn,
.next-btn,
.btn-primary {
  border-radius: 999px !important;
}
.btn-main {
  background: linear-gradient(135deg, #4a6bff, #2f4fd6) !important;
  color: #fff !important;
  letter-spacing: 0.01em !important;
  box-shadow: 0 12px 28px -12px rgba(58, 92, 255, 0.55) !important;
  transition: transform 0.18s, box-shadow 0.18s !important;
}
.btn-main:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 38px -14px rgba(58, 92, 255, 0.6) !important;
}
/* материалы: следующий шаг */
.next-btn { border-radius: 16px !important; }
.next-btn.primary,
.next-section .next-btn:not(.secondary) { background: linear-gradient(135deg, #4a6bff, #2f4fd6) !important; }
/* описание на синей кнопке — светлое; на белой secondary остаётся приглушённым */
.next-btn:not(.secondary) .next-btn-desc { color: rgba(255, 255, 255, 0.72) !important; }
.next-btn:not(.secondary) .next-btn-label,
.next-btn:not(.secondary) .next-btn-title,
.next-btn:not(.secondary) .next-btn-arrow { color: #fff !important; }

/* ============================================================
   КАРТОЧКИ / БОКСЫ — мягкие скругления + тень, без «сетки 1px»
   ============================================================ */
.offer-box, .deadline-card, .calc-box, .urgency-box, .chart-wrap,
.case-card, .about-stats, .funnel-row, .loss-cards, .process-steps,
.g-grid, .grid, .materials, .col-box, .callout, .diagram-wrap,
.symptom-card, .action-card, .fix-block, .cost-list, .base-list,
.persona, .score-card, .verdict, .cta-secondary, .share-box,
.studio-badge, .hyp-box, .card {
  border-radius: var(--u-card-radius) !important;
}

/* контейнеры-сетки: убираем тёмные линии-разделители, делаем зазор */
.loss-cards, .process-steps, .g-grid, .about-stats,
.grid, .materials {
  background: transparent !important;
  border: none !important;
  gap: 14px !important;
}
/* дети этих сеток — самостоятельные карточки */
.lc, .ps, .g-item, .as, .card, .m {
  border: 1px solid var(--line) !important;
  border-radius: var(--u-card-radius) !important;
  box-shadow: var(--u-shadow-sm) !important;
  background: var(--surface) !important;
}
.m:hover, .card:hover { box-shadow: var(--u-shadow) !important; transform: translateY(-2px); }

/* отдельные крупные блоки — белые с тенью */
.offer-box, .calc-box, .chart-wrap, .case-card, .urgency-box, .deadline-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--u-shadow-sm) !important;
}
.offer-box { border-color: var(--accent-soft) !important; }

/* воронка в оффере — плитки со скруглением */
.funnel-row {
  background: transparent !important;
  border: none !important;
  gap: 8px !important;
}
.funnel-step {
  border: 1px solid var(--line) !important;
  border-right: 1px solid var(--line) !important;
  border-radius: 12px !important;
}

/* ============================================================
   ФИКС НЕВИДИМОГО / ТЁМНОГО ТЕКСТА (остатки тёмной темы)
   ============================================================ */
.deadline-main strong,
.offer-list li,
.hero-desc { color: var(--ink-2) !important; }
.deadline-main strong,
.offer-list strong,
.nf-item strong { color: var(--ink) !important; }

/* слайдер-калькулятор */
.calc-range { background: var(--line-strong) !important; }

/* staff-кнопка */
.staff-tools button {
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--ink-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
}

/* ============================================================
   SVG-графики на белом фоне (тёмные оси/подписи)
   ============================================================ */
.growth-chart line { stroke: var(--line-strong) !important; }
.growth-chart text { fill: var(--ink-3) !important; }

/* ============================================================
   UX-TEST — синяя CTA-панель: читаемый текст
   ============================================================ */
.cta { color: #fff !important; }
.cta h3, .cta p { color: #fff !important; }
.cta-btn { background: #fff !important; color: var(--accent) !important; }
.upload-zone.dragover, .upload-zone:hover {
  border-color: var(--accent) !important;
  background: rgba(58, 92, 255, 0.05) !important;
}
.dev-badge {
  border: 1px dashed var(--accent-soft) !important;
  background: var(--accent-tint) !important;
  color: var(--accent) !important;
}

/* ============================================================
   NAV / верхние бары внутренних страниц
   ============================================================ */
.nav, nav {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  border-bottom: 1px solid var(--line) !important;
}
/* меню материалов: убираем перенос слов и тесноту */
.nav { gap: 24px !important; padding: 12px 28px !important; }
.nav-tag { white-space: nowrap !important; flex-shrink: 0 !important; }
.nav-toc { gap: 22px !important; flex-wrap: wrap !important; justify-content: flex-end !important; }
.nav-toc a { white-space: nowrap !important; font-size: 13px !important; }
@media (max-width: 760px) { .nav-toc { display: none !important; } }
/* теги-чипы (в офферах) — pill-форма; рамку не добавляем,
   у тегов-лейблов (напр. «РЕЗУЛЬТАТЫ UX-ТЕСТА») рамки быть не должно */
.tags-row .tag { border-radius: 999px !important; }
.tags-row .tag.hi { border-color: var(--accent-soft) !important; background: var(--accent-tint) !important; }
.fw-pill, .pill {
  border-radius: 999px !important;
  border: 1px solid var(--line-strong) !important;
  background: var(--surface-2, #f3f7ff) !important;
}

/* ============================================================
   ЕДИНЫЙ СТИЛЬ ЗАГОЛОВКОВ И КНОПОК (как на главной)
   ============================================================ */

/* Заголовки — КАПС везде (кнопки без капса, см. ниже) */
h1, h2, h3,
.hero-title, .hero-sub, .section-title,
.diag2-title, .diag-intro-title, .diag-how-title,
.uxtest-title, .kb-title, .selftest-title, .cta-title,
.sec-title, .series-h, .title, .m-title,
.bc-h, .bc-pre, .calc-title,
.col-box h4, .diagram-title, .action-card h3, .fix-block h3,
.next-btn-title, .about-name, .m-title {
  text-transform: uppercase !important;
}

/* кнопки — без капса, единый pill-градиент */
.btn-main, .cta-btn, .next-btn, .btn-primary, .btn,
.btn-main *, .next-btn-title, .next-btn-label {
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.btn-main, .cta-btn, .btn-primary, .btn {
  font-weight: 700 !important;
  padding: 15px 28px !important;
  border-radius: 999px !important;
}
/* материалы: .btn — основной градиент, .btn.outline — призрачная */
.btn:not(.outline) {
  background: linear-gradient(135deg, #4a6bff, #2f4fd6) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 12px 28px -12px rgba(58, 92, 255, 0.55) !important;
}
.btn.outline {
  background: var(--surface) !important;
  color: var(--accent) !important;
  border: 1px solid var(--accent-soft) !important;
}
.btn:hover { transform: translateY(-2px); }

/* ============================================================
   ФОТО В ОФФЕРАХ — мягкая рамка вместо острой 1px
   ============================================================ */
.about-photo { border-radius: 18px !important; overflow: visible !important; }
.about-photo img {
  border-radius: 18px !important;
  filter: none !important;
  box-shadow: 0 22px 50px -24px rgba(40, 70, 180, 0.45) !important;
}
.about-photo::before {
  inset: -6px !important;
  border: 1px solid var(--accent-soft) !important;
  border-radius: 22px !important;
  background: linear-gradient(160deg, rgba(120, 150, 255, 0.10), transparent 60%) !important;
}
