/* ============================================================
   Страницы /ecosystem и /api. Подключается только на них (@push('styles')).
   Базовые классы (.section, .btn, .trust-*, .steps, .agents-hero, .eco-card)
   живут в site.css — здесь только надстройки.
   ============================================================ */

/* Hero этих страниц: длинный курсивный em должен переноситься.
   В site.css у .agents-hero h1 em задан white-space:nowrap (там em короткий,
   «от 15 000 ₽/мес»), а fr-треки без minmax(0,…) не сжимаются ниже min-content —
   вместе это раздувало сетку и выталкивало правую колонку за экран.
   ВАЖНО: только с 981px — ниже в site.css hero схлопывается в одну колонку,
   и правило без медиа-запроса перебило бы его (этот файл грузится последним). */
@media (min-width: 981px) {
    .agents-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}
.agents-hero h1 em { white-space: normal; }

/* ---------- Hero: стек слоёв экосистемы (/ecosystem) ---------- */
.eco-stack { position: relative; z-index: 1; display: grid; gap: 10px; }
.eco-layer {
    display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center;
    padding: 16px 20px; border-radius: 16px;
    background: hsl(240 20% 12% / .5); border: 1px solid hsl(0 0% 100% / .09);
    backdrop-filter: blur(10px);
    transition: transform .25s var(--ease-out), border-color .25s;
}
.eco-layer:hover { transform: translateX(-4px); border-color: color-mix(in srgb, var(--ac) 45%, transparent); }
.eco-layer__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ac); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ac) 18%, transparent); }
.eco-layer strong { font-size: 15.5px; font-weight: 700; color: #fff; }
.eco-layer__d { grid-column: 2; font-size: 13px; line-height: 1.45; color: var(--dark-muted); }
.eco-stack__cap { margin-top: 6px; text-align: center; font-size: 12.5px; color: hsl(250 10% 58%); }
/* Первый слой — вершина стека, подсвечиваем как флагман */
.eco-layer:first-child { background: linear-gradient(120deg, hsl(291 60% 22% / .5), hsl(240 20% 12% / .5)); }
@media (max-width: 900px) { .eco-stack { margin-top: 34px; } }

/* ---------- Hero: терминал (/api) ---------- */
.api-term { position: relative; z-index: 1; border-radius: 18px; overflow: hidden; background: #14101f; border: 1px solid hsl(0 0% 100% / .1); box-shadow: 0 40px 70px -34px hsl(260 60% 10% / .8); }
.api-term__bar { display: flex; align-items: center; gap: 7px; padding: 11px 16px; background: hsl(0 0% 100% / .05); border-bottom: 1px solid hsl(0 0% 100% / .07); }
.api-term__bar i { width: 10px; height: 10px; border-radius: 50%; background: hsl(0 0% 100% / .18); }
.api-term__bar i:first-child { background: hsl(356 70% 60% / .7); }
.api-term__bar i:nth-child(2) { background: hsl(40 80% 60% / .7); }
.api-term__bar i:nth-child(3) { background: hsl(140 50% 55% / .7); }
.api-term__bar span { margin-left: auto; font-size: 12px; color: hsl(250 10% 58%); }
.api-term__body { margin: 0; padding: 20px; overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.4px; line-height: 1.75; color: #e8e2f5; white-space: pre; }
.api-term__body .c { color: hsl(250 10% 52%); }
.api-term__body .s { color: hsl(140 55% 72%); }
.api-term__body .u { color: hsl(200 85% 74%); }
.api-term__body .k { color: hsl(280 80% 80%); }
.api-term__body .n { color: hsl(35 90% 72%); }
@media (max-width: 900px) { .api-term { margin-top: 34px; } }
@media (max-width: 480px) { .api-term__body { font-size: 11px; padding: 14px; } }

/* Секции этих страниц шире четырёх карт trust-grid */
#why-os .trust-grid { grid-template-columns: repeat(3, 1fr); }
#team .trust-grid { grid-template-columns: repeat(3, 1fr); }
#start .steps { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
    #why-os .trust-grid, #team .trust-grid, #start .steps { grid-template-columns: 1fr; }
}

/* ---------- Факты (VibeOS, тарификация API) ---------- */
.eco-facts { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 40px 0 60px; }
.eco-fact { display: flex; flex-direction: column; gap: 7px; padding: 22px; border-radius: 18px; background: hsl(0 0% 100% / .05); border: 1px solid hsl(0 0% 100% / .09); }
.eco-fact strong { font-size: 15.5px; color: #fff; font-weight: 700; }
.eco-fact span { font-size: 14px; line-height: 1.55; color: var(--dark-muted); }
.eco-fact code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: hsl(280 80% 84%); background: hsl(0 0% 100% / .07); padding: 1px 6px; border-radius: 6px; }
@media (max-width: 960px) { .eco-facts { grid-template-columns: 1fr; } }

/* ---------- Карта модулей VibeOS ---------- */
.eco-map__head { margin-top: 20px; }
.eco-map { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; margin: 40px 0 46px; }
.eco-cat { padding: 24px; border-radius: var(--radius); background: hsl(240 20% 12% / .55); border: 1px solid hsl(0 0% 100% / .08); }
/* grid, а не flex-wrap: иначе счётчик модулей срывается на свою строку у длинных названий */
.eco-cat__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid hsl(0 0% 100% / .08); }
.eco-cat__n { font: 700 22px/1 var(--font-display); background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eco-cat__head strong { font-size: 15.5px; line-height: 1.3; color: #fff; font-weight: 700; }
.eco-cat__meta { font-size: 12.5px; color: hsl(250 10% 58%); white-space: nowrap; }
.eco-cat__items { display: grid; gap: 12px; margin-top: 16px; }
.eco-mod { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; align-items: center; }
.eco-mod__badge { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--radius-pill); white-space: nowrap; }
.eco-mod__badge.is-prod { color: hsl(140 60% 72%); background: hsl(140 50% 22% / .45); border: 1px solid hsl(140 50% 45% / .35); }
.eco-mod__badge.is-beta { color: hsl(37 90% 74%); background: hsl(37 60% 24% / .45); border: 1px solid hsl(37 70% 50% / .35); }
.eco-mod__name { font-size: 14.5px; font-weight: 600; color: #fff; }
.eco-mod__d { grid-column: 1 / -1; font-size: 13px; line-height: 1.5; color: var(--dark-muted); }

/* ---------- Оффер-полоса ИИ-отдела ---------- */
.eco-offer { display: flex; align-items: center; gap: 14px; margin: 0 auto 40px; max-width: 720px; padding: 18px 24px; border-radius: var(--radius); background: linear-gradient(120deg, hsl(140 60% 96%), hsl(160 55% 96%)); border: 1px solid hsl(140 45% 80%); color: hsl(150 45% 24%); }
.eco-offer svg { flex: none; color: var(--g5); }
.eco-offer p { font-size: 15px; line-height: 1.5; }

/* ---------- Тарифы ИИ-отдела ---------- */
.tariff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.tariff-card { position: relative; display: flex; flex-direction: column; gap: 13px; padding: 30px 28px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-card); }
.tariff-card--featured { border-color: transparent; box-shadow: 0 4px 12px hsl(240 20% 10% / .06), 0 30px 60px -22px hsl(280 60% 40% / .35); background:
    linear-gradient(var(--card), var(--card)) padding-box,
    var(--grad-brand) border-box; border: 1.5px solid transparent; }
.tariff-card__badge { position: absolute; top: -13px; left: 50%; translate: -50% 0; white-space: nowrap; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--grad-brand); padding: 6px 14px; border-radius: var(--radius-pill); }
.tariff-card__name { font-size: 1.35rem; }
.tariff-card__price { font: 800 26px/1 var(--font-display); }
.tariff-card__price small { font: 500 14px var(--font-body); color: var(--fg-soft); margin-left: 4px; }
.tariff-card__for { font-size: 13.5px; color: var(--fg-soft); }
.tariff-card__list { list-style: none; display: grid; gap: 10px; margin: 6px 0 4px; }
.tariff-card__list li { position: relative; padding-left: 27px; font-size: 14px; line-height: 1.5; color: var(--fg-soft); }
.tariff-card__list li::before { content: ''; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--grad-brand); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/12px no-repeat; }
.tariff-card__cta { margin-top: auto; justify-content: center; }
@media (max-width: 900px) { .tariff-grid { grid-template-columns: 1fr; } .tariff-card--featured { order: -1; } }

/* ---------- Примечания ---------- */
.eco-note { margin-top: 30px; text-align: center; font-size: 14px; color: var(--fg-soft); }
.eco-note a { color: var(--g2); font-weight: 600; border-bottom: 1px solid hsl(291 68% 52% / .35); }
.eco-note--dark { color: var(--dark-muted); }
.eco-note code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; background: hsl(0 0% 100% / .07); padding: 2px 7px; border-radius: 6px; }
.eco-note:not(.eco-note--dark) code { background: hsl(240 10% 10% / .05); color: var(--fg); }

/* ---------- Интеграции ---------- */
.integrations { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.integration-chip { display: inline-flex; align-items: center; gap: 9px; padding: 12px 19px; border-radius: var(--radius-pill); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-card); font-size: 14.5px; font-weight: 600; color: var(--fg); transition: transform .2s var(--ease-out), border-color .2s; }
.integration-chip svg { color: var(--g2); flex: none; }
.integration-chip:hover { transform: translateY(-2px); border-color: hsl(291 68% 52% / .4); }

/* ---------- Проекты экосистемы ---------- */
.eco-projects { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.eco-project { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-card); transition: transform .25s var(--ease-out), border-color .25s; }
.eco-project:hover { transform: translateY(-3px); border-color: hsl(291 68% 52% / .35); }
.eco-project h3 { display: flex; align-items: center; gap: 6px; font-size: 16px; }
.eco-project h3 svg { color: var(--g2); opacity: .8; }
.eco-project p { font-size: 13.5px; line-height: 1.5; color: var(--fg-soft); }
@media (max-width: 1000px) { .eco-projects { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .eco-projects { grid-template-columns: 1fr; } }

/* ---------- Группы эндпоинтов (/api) ---------- */
.api-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.api-group { padding: 26px; border-radius: var(--radius); background: hsl(240 20% 12% / .55); border: 1px solid hsl(0 0% 100% / .08); border-top: 3px solid var(--ac, var(--g2)); }
.api-group h3 { font-size: 17px; color: #fff; margin-bottom: 8px; }
.api-group p { font-size: 13.5px; line-height: 1.55; color: var(--dark-muted); margin-bottom: 16px; }
.api-group__ep { list-style: none; display: grid; gap: 7px; }
.api-group__ep code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: hsl(0 0% 100% / .8); background: hsl(0 0% 100% / .06); border: 1px solid hsl(0 0% 100% / .07); padding: 5px 9px; border-radius: 8px; display: inline-block; }
@media (max-width: 1000px) { .api-groups { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .api-groups { grid-template-columns: 1fr; } }

/* ---------- Блок кода (/api) ---------- */
.api-code { margin: 46px auto 0; max-width: 820px; border-radius: 18px; overflow: hidden; background: #14101f; border: 1px solid hsl(0 0% 100% / .09); box-shadow: 0 30px 60px -30px hsl(260 45% 18% / .5); }
.api-code__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; background: hsl(0 0% 100% / .04); border-bottom: 1px solid hsl(0 0% 100% / .07); font-size: 13px; color: hsl(250 14% 72%); }
.api-code__copy { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid hsl(0 0% 100% / .16); background: hsl(0 0% 100% / .07); color: #fff; font: 600 12.5px var(--font-body); cursor: pointer; transition: background .2s; }
.api-code__copy:hover { background: hsl(0 0% 100% / .14); }
.api-code__body { margin: 0; padding: 20px; overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.8px; line-height: 1.7; color: #e8e2f5; white-space: pre; }

/* ---------- Скоупы (/api) ---------- */
.api-scopes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.api-scope { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-card); }
.api-scope__name { align-self: flex-start; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; font-weight: 700; color: var(--g2); background: hsl(291 68% 52% / .09); padding: 5px 11px; border-radius: 8px; }
.api-scope__lim { font-size: 12.5px; font-weight: 700; color: var(--fg-soft); }
.api-scope p { font-size: 13.5px; line-height: 1.5; color: var(--fg-soft); }
@media (max-width: 1000px) { .api-scopes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .api-scopes { grid-template-columns: 1fr; } }

/* Промо-врезка акции в блоке тарифов ИИ-отдела */
.eco-offer--promo { margin-top: -22px; background: linear-gradient(120deg, hsl(280 60% 96%), hsl(250 60% 96%)); border-color: hsl(280 45% 82%); color: hsl(275 45% 28%); }
.eco-offer--promo svg { color: var(--g2); }
.eco-offer--promo a { margin-left: 6px; font-weight: 700; color: var(--g2); border-bottom: 1px solid hsl(291 68% 52% / .4); white-space: nowrap; }

/* ---------- Третья карточка на /api: открытая форма записи на демо ---------- */
.eco-card--form { cursor: default; }
.eco-card--form:hover { transform: none; box-shadow: var(--shadow-card); border-color: var(--border); }
.eco-card--form:hover::before { opacity: 1; }
.eco-card--form::before { opacity: 1; }        /* акцентная полоска видна всегда — карточка не ссылка */
.eco-form { display: grid; gap: 13px; margin-top: auto; padding-top: 4px; }
.eco-form__field { display: grid; gap: 6px; }
.eco-form__field label { font-size: 13px; font-weight: 600; color: var(--fg-soft); }
.eco-form__field input {
    width: 100%; height: 48px; border: 1px solid var(--border); background: hsl(240 20% 98%);
    border-radius: 13px; padding: 0 16px; font: 400 15px/1.4 var(--font-body); color: var(--fg);
    outline: none; transition: border-color .2s, box-shadow .2s, background .2s;
}
.eco-form__field input::placeholder { color: var(--muted); }
.eco-form__field input:focus { border-color: var(--ac); background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--ac) 14%, transparent); }
.eco-form__field.has-error input { border-color: var(--g3); }
.eco-form__submit { width: 100%; justify-content: center; margin-top: 2px; }
.eco-form__note { font-size: 12px; line-height: 1.45; color: var(--muted); text-align: center; }