/* AI Discovery Analyst — стили страницы поверх shared.css.
   Канон сайта: токены :root, nav/footer, .section-label/.section-title/.section-sub,
   .btn-primary/.btn-outline, .service-card. Здесь — только компоненты продукта. */

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex="0"]:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
#hero {
  padding: 108px 0 0;
  background: radial-gradient(ellipse at 85% 35%, rgba(242,105,40,.10), transparent 55%), var(--bg);
}
.breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; color: rgba(255,255,255,.4); }
.breadcrumb a { color: rgba(255,255,255,.55); transition: color .25s; }
.breadcrumb a:hover { color: var(--orange); }
.breadcrumb span:last-child { color: var(--text); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; padding: 48px 0 64px; }
.hero-uptitle { font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--orange); margin-bottom: 24px; }
.hero-title { font-size: 52px; font-weight: 700; line-height: 1.08; text-transform: uppercase; color: var(--white); margin-bottom: 28px; }
.hero-title em { font-style: normal; color: var(--orange); }
.hero-sub { font-size: 18px; color: rgba(255,255,255,.88); max-width: 520px; line-height: 1.65; }
.hero-detail { font-size: 15px; color: var(--text); opacity: .65; max-width: 500px; line-height: 1.65; margin-top: 16px; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 36px; }
.hero-audience { font-size: 13px; color: rgba(255,255,255,.4); margin-top: 24px; }

.hero-visual { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 28px 28px 20px; }
.micro { display: block; font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.45); }
.visual-topline { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); padding-bottom: 16px; }
.visual-mark { font-size: 22px; color: var(--orange); line-height: 1; }
.source-stack { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 26px; }
.source-chip { display: flex; gap: 8px; align-items: center; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; background: rgba(255,255,255,.03); font-size: 13px; color: var(--text); }
.file-symbol { color: var(--orange); }
.visual-flow { position: relative; }
.visual-flow::before { content: ""; position: absolute; left: 17px; top: 20px; bottom: 20px; width: 1px; background: linear-gradient(rgba(242,105,40,.45), var(--orange)); }
.flow-step { display: flex; gap: 18px; position: relative; }
.flow-dot { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 35px; height: 35px; border: 1px solid rgba(242,105,40,.6); border-radius: 50%; background: var(--card-bg); color: var(--orange); font-size: 12px; font-weight: 600; }
.flow-step .micro { margin: 2px 0 6px; }
.flow-step h3 { font-size: 17px; font-weight: 700; color: var(--white); line-height: 1.3; }
.flow-step p { font-size: 13px; color: var(--text); opacity: .6; margin-top: 4px; }
.decision-line { display: flex; align-items: center; gap: 22px; margin: 22px 0 22px 13px; font-size: 12px; color: rgba(242,105,40,.85); position: relative; }
.decision-diamond { width: 10px; height: 10px; transform: rotate(45deg); background: var(--orange); outline: 3px solid var(--card-bg); flex-shrink: 0; }
.handoff-card { margin-top: 26px; display: flex; gap: 14px; padding: 18px; border-radius: 8px; background: rgba(242,105,40,.12); border: 1px solid rgba(242,105,40,.35); }
.handoff-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 6px; background: var(--orange); color: var(--white); font-size: 18px; }
.handoff-card .micro { color: var(--orange); }
.handoff-card strong { display: block; font-size: 19px; color: var(--white); margin-top: 4px; }
.handoff-card p { font-size: 13px; color: var(--text); opacity: .7; margin-top: 4px; }
.visual-caption { font-size: 12px; color: rgba(255,255,255,.35); text-align: center; margin-top: 16px; }

.hero-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 24px 0; border-top: 1px solid var(--border); font-size: 14px; font-weight: 600; color: var(--text); }
.hero-bottom > span:nth-child(even) { color: var(--orange); font-size: 18px; }

/* ── Общие для секций ───────────────────────────────────────────────────── */
#problem, #comparison, #faq { background: var(--bg); }
#example, #pilot-metrics { background: #0e0e0e; }
#deliverables { background: var(--bg); border-top: 1px solid var(--border); }
.section-heading { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: end; margin-bottom: 48px; }
.section-heading .section-title { margin-bottom: 0; }
.card-num { display: block; font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--orange); margin-bottom: 20px; }
.context-note { display: flex; gap: 14px; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--border); }
.context-note > span { color: var(--orange); font-size: 20px; line-height: 1.3; }
.context-note p { font-size: 14px; color: var(--text); opacity: .65; line-height: 1.65; max-width: 860px; }
.context-note strong { color: var(--white); opacity: 1; font-weight: 600; }

/* ── Проблема ───────────────────────────────────────────────────────────── */
.problem-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 80px; }
.editorial-row { display: flex; gap: 24px; padding: 26px 0; border-top: 1px solid var(--border); }
.editorial-row:first-child { padding-top: 0; border-top: 0; }
.row-number { font-size: 13px; font-weight: 600; color: var(--orange); line-height: 1.8; }
.editorial-row h3 { font-size: 18px; font-weight: 700; color: var(--white); line-height: 1.3; margin-bottom: 10px; }
.editorial-row p { font-size: 15px; color: var(--text); opacity: .7; line-height: 1.65; }

/* ── Пример ─────────────────────────────────────────────────────────────── */
.example-disclaimer { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: rgba(255,255,255,.45); margin-bottom: 20px; }
.small-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); flex-shrink: 0; margin-top: 7px; }
.demo-layout { display: grid; grid-template-columns: 280px 1fr; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.stage-tabs { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 20px 16px; }
.stage-tab { display: flex; align-items: flex-start; gap: 14px; padding: 18px 14px; text-align: left; font-family: var(--font); color: var(--text); background: transparent; border: 1px solid transparent; border-radius: 8px; cursor: pointer; transition: background .25s, border-color .25s; }
.stage-tab:hover { background: rgba(255,255,255,.03); }
.stage-tab strong { display: block; font-size: 15px; font-weight: 700; color: var(--white); }
.stage-tab small { display: block; font-size: 13px; opacity: .55; margin-top: 4px; line-height: 1.4; }
.stage-num { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.35); margin-top: 3px; }
.stage-tab[aria-selected="true"] { background: rgba(242,105,40,.08); border-color: rgba(242,105,40,.5); }
.stage-tab[aria-selected="true"] .stage-num { color: var(--orange); }

.demo-paper { display: flex; flex-direction: column; min-height: 480px; padding: 34px 38px 28px; background: #f3f1ec; color: #222; }
.paper-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.paper-label { font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #5b5853; }
.paper-tag { font-size: 12px; font-weight: 600; color: #b84a15; background: rgba(242,105,40,.12); border: 1px solid rgba(242,105,40,.35); border-radius: 4px; padding: 3px 9px; white-space: nowrap; }
.demo-paper h3 { font-size: 26px; font-weight: 700; line-height: 1.2; color: #111; text-transform: uppercase; margin-bottom: 20px; }
.demo-paper blockquote { padding-left: 16px; border-left: 3px solid var(--orange); font-size: 16px; line-height: 1.65; color: #38352f; margin-bottom: 22px; max-width: 560px; }
.paper-scenario { font-size: 15px; line-height: 1.65; color: #38352f; margin-bottom: 20px; }
.paper-fields { display: grid; gap: 12px; }
.paper-fields > div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding-top: 12px; border-top: 1px solid #d9d4cc; }
.paper-fields span { font-size: 13px; font-weight: 600; color: #6f685f; }
.paper-fields p { font-size: 14px; line-height: 1.6; color: #2f2c27; }
.paper-checklist { display: grid; gap: 10px; list-style: none; margin-bottom: 20px; }
.paper-checklist li { display: flex; gap: 10px; font-size: 14px; line-height: 1.6; }
.paper-checklist li::before { content: "✓"; font-weight: 700; color: #b84a15; flex-shrink: 0; }
.paper-note { display: flex; gap: 10px; margin-top: auto; padding-top: 22px; font-size: 13px; line-height: 1.6; color: #6b6258; }
.paper-note > span { color: #c95116; font-size: 18px; line-height: 1.1; }
.demo-footer { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 20px; }
.demo-footer > span { font-size: 13px; color: rgba(255,255,255,.45); }
.demo-footer .service-link { margin-top: 0; white-space: nowrap; }
.no-script-note { font-size: 14px; margin-top: 20px; }

/* ── Что получает команда / Метрики пилота ─────────────────────────────── */
.deliverables-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.deliverable-question { display: block; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 14px; font-weight: 600; color: var(--orange); }

/* ── Сравнение ──────────────────────────────────────────────────────────── */
.comparison-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
.comparison-table { width: 100%; min-width: 680px; border-collapse: collapse; table-layout: fixed; text-align: left; }
.comparison-table th, .comparison-table td { padding: 20px 24px; vertical-align: top; border-bottom: 1px solid var(--border); font-size: 15px; font-weight: 400; line-height: 1.6; }
.comparison-table th:first-child { width: 24%; }
.comparison-table thead th { background: var(--card-bg); font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.55); }
.comparison-table thead th:last-child { color: var(--orange); background: rgba(242,105,40,.10); }
.comparison-table tbody th { font-weight: 600; color: var(--white); }
.comparison-table td:nth-child(2) { color: var(--text); opacity: .65; }
.comparison-table td:last-child { color: var(--white); background: rgba(242,105,40,.05); }
.comparison-table tbody tr:last-child > * { border-bottom: 0; }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 80px; }
.faq-list details { border-top: 1px solid var(--border); }
.faq-list details:last-child { border-bottom: 1px solid var(--border); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; list-style: none; cursor: pointer; font-size: 17px; font-weight: 600; color: var(--white); transition: color .25s; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--orange); }
.faq-list summary > span { flex-shrink: 0; font-size: 24px; font-weight: 400; color: var(--orange); transition: transform .2s; }
.faq-list details[open] summary > span { transform: rotate(45deg); }
.faq-answer { padding: 0 40px 24px 0; font-size: 15px; line-height: 1.7; color: var(--text); opacity: .75; }

/* ── Контакт ────────────────────────────────────────────────────────────── */
#pilot { background: #0e0e0e; border-top: 1px solid var(--border); }
.contact-inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: 80px; align-items: center; }
.contact-channels { display: flex; flex-direction: column; gap: 16px; }
.contact-channel { display: flex; gap: 16px; align-items: center; padding: 20px 22px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; transition: border-color .3s; }
.contact-channel:hover { border-color: rgba(242,105,40,.5); }
.contact-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 8px; background: rgba(242,105,40,.12); color: var(--orange); }
.contact-kind { display: block; font-size: 13px; font-weight: 600; color: var(--orange); margin-bottom: 2px; }
.contact-value { display: block; font-size: 15px; color: var(--white); }

/* ── Адаптив (брейкпоинты как в shared.css: 980 / 640) ─────────────────── */
@media (max-width: 1100px) {
  .deliverables-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  .hero-title { font-size: 36px; }
  .section-title { font-size: 28px; }
  .hero-grid, .problem-grid, .faq-grid, .contact-inner { grid-template-columns: 1fr; gap: 40px; }
  .section-heading { grid-template-columns: 1fr; gap: 16px; }
  .metrics-grid { grid-template-columns: 1fr; }
  .demo-layout { grid-template-columns: minmax(0, 1fr); }
  .stage-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; }
  .stage-tab { min-width: 0; }
  .stage-tab small { display: none; }
  .hero-bottom { font-size: 13px; }
}
@media (max-width: 640px) {
  #hero { padding-top: 88px; }
  .hero-title { font-size: 28px; }
  .hero-sub { font-size: 16px; }
  .hero-grid { padding: 32px 0 40px; }
  .hero-visual { padding: 20px 18px 16px; }
  .hero-bottom { flex-direction: column; align-items: flex-start; gap: 6px; }
  .hero-bottom > span:nth-child(even) { transform: rotate(90deg); font-size: 14px; }
  .deliverables-grid { grid-template-columns: 1fr; }
  .stage-tab { flex-direction: column; gap: 6px; padding: 12px 10px; }
  .stage-tab strong { font-size: 13px; }
  .demo-paper { padding: 24px 20px; min-height: 0; }
  .paper-top { flex-wrap: wrap; }
  .demo-paper h3 { font-size: 20px; }
  .paper-fields > div { grid-template-columns: 1fr; gap: 4px; }
  .demo-footer { flex-direction: column; align-items: flex-start; gap: 12px; }
  .faq-list summary { font-size: 15px; }
  .faq-answer { padding-right: 0; }
}