/* ============================================================================
   MCP:RSV Data Pro — компоненты сайта поверх базовой системы styles.css
   Палитра, типографика и каркас — в styles.css (общие для линейки RSV).
   Здесь только то, что специфично для этого продукта.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Правки навигации: у этого продукта пункты меню длиннее, чем в базовом
      наборе линейки, — иначе «Документация» и кнопки ломаются на две строки
   -------------------------------------------------------------------------- */
/* переход по якорю не должен заводить заголовок под липкую шапку (её высота 64px) */
html{scroll-padding-top:80px;}

.nav-links{gap:26px;}
.nav-links a{white-space:nowrap;}
.nav-tg{white-space:nowrap;}
@media(max-width:1120px){.nav-links{gap:18px;} .nav-links a{font-size:.88rem;}}
@media(max-width:1000px){.nav-tg{display:none;}}

/* На узком экране кнопка с длинной подписью не должна вылезать за край:
   в базовом наборе у .btn стоит white-space:nowrap */
@media(max-width:560px){
  .btn{white-space:normal;text-align:center;max-width:100%;}
  .btn-lg{padding:15px 22px;}
}

/* Недоступная кнопка обязана ВЫГЛЯДЕТЬ недоступной: ярко-фиолетовая кнопка,
   которая не нажимается, читается как поломка сайта, а не как «пока нельзя». */
.btn[disabled], .btn[disabled]:hover{
  background:var(--bg-elevated); color:var(--text-dim); border-color:var(--border-hi);
  box-shadow:none; transform:none; cursor:not-allowed;
}

/* --------------------------------------------------------------------------
   1. Карточки возможностей — крупная сетка «основные функции»
   -------------------------------------------------------------------------- */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch;}
.feat-grid.cols-2{grid-template-columns:repeat(2,1fr);max-width:940px;margin:0 auto;}
.feat-card{position:relative;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:30px 28px;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s,border-color .2s;}
.feat-card:hover{transform:translateY(-4px);box-shadow:var(--accent-glow);border-color:var(--border-hi);}
.feat-card.is-flagship{border-color:var(--accent);box-shadow:var(--accent-glow);background:linear-gradient(160deg,rgba(124,58,237,.05) 0%,var(--bg-surface) 55%);}
.feat-card.is-flagship::after{content:"Главное";position:absolute;top:-12px;right:20px;background:var(--accent);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.03em;padding:5px 14px;border-radius:999px;}
/* Вторая подсвеченная карточка — не «Главное» (иначе два одинаковых бейджа рядом
   обесценивают друг друга), а то, чем продукт отличается от привычных решений. */
.feat-card.is-key{border-color:var(--accent);box-shadow:var(--accent-glow);background:linear-gradient(160deg,rgba(124,58,237,.05) 0%,var(--bg-surface) 55%);}
.feat-card.is-key::after{content:"Наше отличие";position:absolute;top:-12px;right:20px;background:var(--accent-hi);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.03em;padding:5px 14px;border-radius:999px;}
.feat-icon{width:46px;height:46px;border-radius:12px;background:var(--accent-soft);border:1px solid var(--accent-soft2);display:flex;align-items:center;justify-content:center;font-size:1.35rem;margin-bottom:18px;flex:none;}
.feat-card h3{display:flex;align-items:center;flex-wrap:wrap;gap:9px;font-size:1.22rem;margin-bottom:8px;line-height:1.25;}
.feat-promise{font-size:.98rem;font-weight:700;color:var(--text);margin:0 0 15px;line-height:1.4;}
.feat-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.feat-list li{position:relative;padding-left:24px;font-size:.92rem;color:var(--text-muted);line-height:1.5;}
.feat-list li::before{content:"";position:absolute;left:2px;top:.5em;width:9px;height:9px;border-radius:2px;background:var(--accent);transform:rotate(45deg);}
.feat-list strong{color:var(--text);font-weight:600;}
.feat-foot{margin-top:auto;padding-top:16px;font-size:.88rem;color:var(--text-dim);}
.feat-foot a{font-weight:600;}
@media(max-width:1080px){.feat-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:760px){.feat-grid,.feat-grid.cols-2{grid-template-columns:1fr;max-width:520px;margin:0 auto;}}

/* Метка готовности функции */
.st{display:inline-flex;align-items:center;gap:5px;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 10px;border-radius:999px;white-space:nowrap;vertical-align:middle;}
.st-ready{color:#0B7A5C;background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.3);}
.st-beta{color:#92400E;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.32);}
.st-soon{color:var(--text-dim);background:var(--bg-elevated);border:1px solid var(--border-hi);}

/* --------------------------------------------------------------------------
   2. Сценарии использования — три «дорожки»
   -------------------------------------------------------------------------- */
.scen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.scen-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px 26px;display:flex;flex-direction:column;transition:border-color .2s,box-shadow .2s,transform .2s;}
.scen-card:hover{border-color:var(--border-hi);transform:translateY(-3px);box-shadow:0 12px 32px -12px rgba(26,26,26,.12);}
.scen-card.is-main{border-color:var(--accent);box-shadow:var(--accent-glow);}
.scen-letter{width:34px;height:34px;border-radius:9px;background:var(--accent);color:#fff;font-family:var(--font-mono);font-weight:700;font-size:.95rem;display:flex;align-items:center;justify-content:center;margin-bottom:16px;box-shadow:0 6px 16px rgba(124,58,237,.35);}
.scen-card h3{font-size:1.16rem;margin-bottom:8px;}
.scen-who{font-size:.8rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--accent-hi);margin:0 0 12px;}
.scen-card p{font-size:.93rem;color:var(--text-muted);line-height:1.6;margin-bottom:14px;}
.scen-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--border);font-size:.85rem;color:var(--text-dim);}
@media(max-width:900px){.scen-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto;}}

/* --------------------------------------------------------------------------
   3. Слои безопасности — вертикальная «лестница»
   -------------------------------------------------------------------------- */
.sec-layers{display:flex;flex-direction:column;gap:14px;max-width:860px;margin:0 auto;}
.sec-layer{display:flex;gap:20px;align-items:flex-start;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px 26px;transition:border-color .2s,box-shadow .2s;}
.sec-layer:hover{border-color:var(--accent-soft2);box-shadow:0 10px 28px -16px rgba(124,58,237,.35);}
.sec-num{flex:none;width:38px;height:38px;border-radius:50%;background:var(--accent-soft);border:1px solid var(--accent-soft2);color:var(--accent-hi);font-family:var(--font-mono);font-weight:700;font-size:.9rem;display:flex;align-items:center;justify-content:center;}
.sec-layer h3{font-size:1.06rem;margin-bottom:5px;}
.sec-layer p{font-size:.92rem;color:var(--text-muted);line-height:1.6;margin:0;}
.sec-layer p + p{margin-top:8px;}
@media(max-width:620px){.sec-layer{padding:18px;gap:14px;}}

/* --------------------------------------------------------------------------
   4. Плитки инструментов
   -------------------------------------------------------------------------- */
.tools-group{margin-bottom:34px;}
.tools-group-title{display:flex;align-items:baseline;gap:12px;font-size:1.02rem;font-weight:700;margin-bottom:6px;}
.tools-group-title .tg-count{font-size:.75rem;font-weight:700;color:var(--accent-hi);background:var(--accent-soft);padding:2px 9px;border-radius:999px;}
.tools-group-desc{font-size:.9rem;color:var(--text-muted);margin-bottom:16px;}
.tools-chips{display:flex;flex-wrap:wrap;gap:10px;}
.tool-chip{display:inline-flex;align-items:center;gap:9px;background:var(--bg-surface);border:1px solid var(--border);border-radius:999px;padding:8px 16px 8px 12px;font-size:.88rem;color:var(--text-muted);transition:border-color .15s,color .15s,transform .15s;}
a.tool-chip:hover{border-color:var(--accent);color:var(--text);transform:translateY(-1px);}
.tool-chip code{font-family:var(--font-mono);font-size:.82rem;color:var(--accent-hi);background:none;border:0;padding:0;}

/* --------------------------------------------------------------------------
   5. Схема-иллюстрация (инлайн-SVG в рамке)
   -------------------------------------------------------------------------- */
.scheme{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:34px;box-shadow:0 14px 40px -22px rgba(30,20,60,.25);}
.scheme svg{display:block;width:100%;height:auto;}
.scheme-caption{text-align:center;font-size:.88rem;color:var(--text-dim);margin-top:18px;}

/* --------------------------------------------------------------------------
   6. Диалог «как это выглядит» — вопрос человека → ответ агента
   -------------------------------------------------------------------------- */
.dlg{display:flex;flex-direction:column;gap:12px;}
.dlg-ask,.dlg-ans{border:1px solid var(--border);border-radius:16px;padding:15px 20px;font-size:.95rem;line-height:1.6;box-shadow:0 10px 30px -20px rgba(30,20,60,.3);}
.dlg-ask{background:var(--bg-surface);border-radius:16px 16px 16px 4px;color:var(--text);}
.dlg-ans{background:var(--bg-sunken);border-radius:16px 16px 4px 16px;color:var(--text-muted);}
.dlg-who{display:flex;align-items:center;gap:8px;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);margin-bottom:9px;}
.dlg-who .dlg-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;}
.dlg-who.is-agent .dlg-dot{background:var(--success,#10B981);}
.dlg-table{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:.8rem;margin-top:10px;}
.dlg-table th{text-align:left;font-family:var(--font-sans);font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-dim);padding:0 10px 7px 0;border-bottom:1px solid var(--border);}
.dlg-table td{padding:7px 10px 7px 0;border-bottom:1px solid var(--border);color:var(--text);}
.dlg-table td.num{text-align:right;padding-right:0;}
.dlg-table tr:last-child td{border-bottom:0;font-weight:700;}
.dlg-note{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-family:var(--font-mono);font-size:.74rem;color:#0B7A5C;background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.35);border-radius:999px;padding:5px 13px;}

/* Живая печать в hero (мигающая каретка) */
.dlg-caret{display:inline-block;width:2px;height:1.05em;background:var(--accent);vertical-align:-.15em;margin-left:1px;animation:dlgBlink 1s steps(1) infinite;}
@keyframes dlgBlink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.dlg-caret{animation:none;}}

/* --------------------------------------------------------------------------
   7. Сравнение «без продукта / с продуктом»
   -------------------------------------------------------------------------- */
.vs-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:940px;margin:0 auto;}
.vs-card{border-radius:var(--radius-lg);padding:28px 26px;border:1px solid var(--border);background:var(--bg-surface);}
.vs-card.is-bad{background:var(--bg-sunken);}
.vs-card.is-good{border-color:var(--accent);box-shadow:var(--accent-glow);}
.vs-card h3{font-size:1.08rem;margin-bottom:14px;display:flex;align-items:center;gap:9px;}
.vs-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.vs-list li{position:relative;padding-left:26px;font-size:.93rem;color:var(--text-muted);line-height:1.55;}
.vs-card.is-bad .vs-list li::before{content:"✕";position:absolute;left:2px;top:0;color:var(--danger,#DC2626);font-weight:700;}
.vs-card.is-good .vs-list li::before{content:"✓";position:absolute;left:2px;top:0;color:var(--accent);font-weight:700;}
@media(max-width:760px){.vs-grid{grid-template-columns:1fr;max-width:520px;}}

/* --------------------------------------------------------------------------
   8. Требования / совместимость
   -------------------------------------------------------------------------- */
.req-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;max-width:980px;margin:0 auto;}
.req-item{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px;}
.req-item h4{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);margin-bottom:8px;}
.req-item p{font-size:.95rem;color:var(--text);line-height:1.5;margin:0;}
.req-item p small{display:block;font-size:.83rem;color:var(--text-muted);margin-top:5px;}

/* --------------------------------------------------------------------------
   9. Заглушка цены (пока владелец не проставил тарифы)
   -------------------------------------------------------------------------- */
.pc-tbd{font-size:1.05rem;font-weight:700;color:var(--text-dim);letter-spacing:.02em;}
.price-note{max-width:820px;margin:28px auto 0;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.3);border-radius:var(--radius);padding:16px 20px;font-size:.92rem;color:var(--text-muted);line-height:1.6;text-align:left;}
.price-note b{color:var(--text);}

/* --------------------------------------------------------------------------
   10. Мелочи
   -------------------------------------------------------------------------- */
.lead-center{max-width:760px;margin:0 auto 44px;text-align:center;font-size:1.08rem;color:var(--text-muted);line-height:1.7;}
.note-inline{background:var(--accent-soft);border-left:3px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;padding:16px 20px;font-size:.94rem;color:var(--text-muted);line-height:1.65;margin:24px 0;}
.note-inline b{color:var(--text);}
.kbd{font-family:var(--font-mono);font-size:.85rem;background:var(--bg-elevated);border:1px solid var(--border-hi);border-radius:6px;padding:2px 8px;color:var(--text);}
.center{text-align:center;}
.mt-32{margin-top:32px;}

/* Живой пример на первом экране: вопрос печатается, ответ проявляется по строкам.
   min-height держит высоту, чтобы страница не дёргалась при смене примера. */
/* Запасная высота на случай, если скрипт не отработал: он выставляет точную
   по самой большой сцене (см. lockHeight в index.html). На узком экране сцены выше. */
.dlg{min-height:360px;}
@media (max-width:640px){.dlg{min-height:420px;}}
.dlg-ans{opacity:0;transform:translateY(6px);transition:opacity .35s ease-out,transform .35s ease-out;}
.dlg-ans.is-on{opacity:1;transform:none;}
.dlg-table tbody tr{opacity:0;transform:translateY(4px);transition:opacity .3s ease-out,transform .3s ease-out;}
.dlg-table tbody tr.on{opacity:1;transform:none;}
.dlg-note{opacity:0;transition:opacity .35s ease-out;}
.dlg-note.on{opacity:1;}
@media (prefers-reduced-motion:reduce){
  .dlg-ans,.dlg-table tbody tr,.dlg-note{transition:none;}
}