/* agents.css — общие стили хаба /agents/ и детальных страниц /agents/{slug}/ */
:root {
    --ag-indigo: #6366f1;
    --ag-violet: #8b5cf6;
    --ag-lav: #a78bfa;
    --ag-cyan: #22d3ee;
    --ag-green: #34d399;
    --ag-amber: #fbbf24;
}
.ag-wrap { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; }

/* ── Hero ── */
.ag-hero { position: relative; overflow: hidden; padding: 72px 32px 64px; background: radial-gradient(ellipse at top, #1e1b4b 0%, #0b1120 55%, #060814 100%); }
.ag-hero::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle 620px at 88% -8%, rgba(99,102,241,0.28) 0%, transparent 60%), radial-gradient(circle 480px at 4% 108%, rgba(34,211,238,0.18) 0%, transparent 60%); }
.ag-kicker { color: var(--ag-lav); font-size: 13px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; }
.ag-h1 { font-size: 56px; font-weight: 900; color: #fff; margin-top: 16px; letter-spacing: -0.035em; line-height: 1.04; max-width: 920px; }
.ag-sub { font-size: 20px; color: #cbd5e1; line-height: 1.5; margin-top: 22px; max-width: 760px; }
.ag-sub strong { color: #fff; font-weight: 700; }
.ag-cta { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.ag-btn { padding: 15px 28px; font-size: 16px; font-weight: 700; border-radius: 11px; text-decoration: none; border: 1px solid var(--ag-indigo); display: inline-flex; align-items: center; gap: 8px; }
.ag-btn-primary { background: var(--ag-indigo); color: #fff; }
.ag-btn-primary:hover { background: var(--ag-violet); }
.ag-btn-ghost { background: transparent; color: #e0e7ff; border-color: rgba(167,139,250,0.5); }
.ag-btn-ghost:hover { border-color: var(--ag-lav); }
.ag-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ag-lav); }
.ag-meta span { padding: 7px 13px; border: 1px solid rgba(167,139,250,0.28); border-radius: 7px; }
.ag-meta .ok { color: var(--ag-green); border-color: rgba(52,211,153,0.35); }

/* ── Stats ── */
.ag-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 40px; }
.ag-stat { background: rgba(99,102,241,0.08); border: 1px solid rgba(167,139,250,0.22); border-radius: 13px; padding: 18px 20px; }
.ag-stat b { display: block; font-size: 34px; font-weight: 800; color: #fff; line-height: 1.05; }
.ag-stat b.cyan { color: var(--ag-cyan); } .ag-stat b.green { color: var(--ag-green); }
.ag-stat span { font-size: 13px; color: #94a3b8; }

/* ── Sections ── */
.ag-section { padding: 76px 32px; }
.ag-section.dark { background: #0a0f1e; }
.ag-section.darker { background: #060814; }
.ag-eyebrow { color: var(--ag-lav); font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 12px; }
.ag-h2 { font-size: 38px; font-weight: 800; color: #fff; line-height: 1.15; letter-spacing: -0.02em; max-width: 840px; margin-bottom: 16px; }
.ag-lead { font-size: 18px; color: #cbd5e1; line-height: 1.6; max-width: 820px; }
.ag-lead em { color: var(--ag-lav); font-style: normal; font-weight: 600; }

/* ── Пилот featured ── */
.ag-pilot { margin-top: 8px; background: linear-gradient(135deg, rgba(99,102,241,0.20), rgba(34,211,238,0.07)); border: 1px solid var(--ag-indigo); border-radius: 18px; padding: 34px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: center; }
.ag-pilot .badge { display: inline-block; background: var(--ag-indigo); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; }
.ag-pilot h3 { font-size: 30px; color: #fff; font-weight: 800; margin: 14px 0 12px; letter-spacing: -0.02em; }
.ag-pilot p { font-size: 16px; color: #e0e7ff; line-height: 1.6; }
.ag-pilot ul { list-style: none; padding: 0; margin: 16px 0 0; }
.ag-pilot li { font-size: 15px; color: #cbd5e1; line-height: 1.5; padding: 5px 0 5px 22px; position: relative; }
.ag-pilot li::before { content: '\25C6'; position: absolute; left: 0; top: 7px; color: var(--ag-cyan); font-size: 11px; }
.ag-pilot-side { text-align: center; }
.ag-pilot-side .big { font-size: 64px; line-height: 1; }
.ag-pilot-side .btn { margin-top: 18px; }

/* ── Agent cards grid ── */
.ag-grid { display: grid; gap: 16px; margin-top: 36px; grid-template-columns: repeat(3, 1fr); }
.ag-card { background: rgba(99,102,241,0.06); border: 1px solid rgba(167,139,250,0.22); border-radius: 14px; padding: 22px 22px; text-decoration: none; display: block; transition: border-color 0.2s, background 0.2s, transform 0.15s; }
a.ag-card:hover { border-color: var(--ag-lav); background: rgba(99,102,241,0.12); transform: translateY(-2px); }
.ag-card h3 { font-size: 19px; color: #fff; font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ag-card .proto { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ag-lav); border: 1px solid rgba(167,139,250,0.3); border-radius: 5px; padding: 2px 7px; }
.ag-card .proto.anthropic { color: var(--ag-amber); border-color: rgba(251,191,36,0.35); }
.ag-card .live { font-size: 11px; color: var(--ag-green); font-weight: 700; }
.ag-card p { font-size: 14px; color: #94a3b8; line-height: 1.55; margin-top: 8px; }
.ag-card .more { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--ag-lav); }

/* ── Feature cards ── */
.ag-feats { display: grid; gap: 16px; margin-top: 36px; grid-template-columns: repeat(3, 1fr); }
.ag-feat { background: rgba(99,102,241,0.06); border: 1px solid rgba(167,139,250,0.2); border-radius: 14px; padding: 24px; }
.ag-feat .ic { font-size: 30px; margin-bottom: 12px; }
.ag-feat h3 { font-size: 18px; color: #fff; font-weight: 700; margin-bottom: 8px; }
.ag-feat p { font-size: 14px; color: #94a3b8; line-height: 1.6; }

/* ── Code blocks ── */
.ag-code { background: #070b16; border: 1px solid rgba(167,139,250,0.22); border-radius: 12px; padding: 20px 22px; margin-top: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ag-code .cap { font-size: 13px; color: var(--ag-lav); font-weight: 700; margin-bottom: 10px; }
.ag-code pre { margin: 0; font-family: 'JetBrains Mono', monospace; font-size: 13.5px; line-height: 1.65; color: #cbd5e1; white-space: pre; }
.ag-code .c { color: #64748b; } .ag-code .k { color: var(--ag-cyan); } .ag-code .s { color: var(--ag-green); }
.ag-cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 8px; }

/* ── Table ── */
.ag-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; }
.ag-table { width: 100%; border-collapse: collapse; margin-top: 28px; background: rgba(99,102,241,0.05); border: 1px solid rgba(167,139,250,0.18); border-radius: 12px; overflow: hidden; }
.ag-table th, .ag-table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid rgba(167,139,250,0.12); color: #cbd5e1; font-size: 14px; }
.ag-table th { color: var(--ag-lav); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; background: rgba(167,139,250,0.06); }
.ag-table td strong { color: #fff; }
.ag-table .y { color: var(--ag-green); font-weight: 700; }
.ag-table .n { color: #f87171; font-weight: 700; }

/* ── Proof ── */
.ag-proof { display: grid; gap: 16px; margin-top: 36px; grid-template-columns: 1fr 1fr; }
.ag-proof-card { background: linear-gradient(135deg, rgba(34,211,238,0.10), rgba(99,102,241,0.06)); border: 1px solid rgba(34,211,238,0.28); border-radius: 14px; padding: 24px; }
.ag-proof-card h3 { color: #fff; font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.ag-proof-card p { color: #cbd5e1; font-size: 14.5px; line-height: 1.6; }
.ag-proof-card .num { color: var(--ag-cyan); font-weight: 800; }

/* ── FAQ ── */
.ag-faq { margin-top: 32px; max-width: 880px; }
.ag-faq details { background: rgba(99,102,241,0.05); border: 1px solid rgba(167,139,250,0.2); border-radius: 12px; padding: 0 22px; margin-bottom: 12px; }
.ag-faq summary { cursor: pointer; padding: 18px 0; font-size: 16.5px; font-weight: 600; color: #f1f5f9; list-style: none; }
.ag-faq summary::-webkit-details-marker { display: none; }
.ag-faq summary::after { content: '+'; float: right; color: var(--ag-lav); font-size: 22px; line-height: 1; }
.ag-faq details[open] summary::after { content: '\2212'; }
.ag-faq .a { padding: 0 0 18px; color: #94a3b8; font-size: 15px; line-height: 1.65; }
.ag-faq .a a { color: var(--ag-lav); }

/* ── Final CTA ── */
.ag-final { text-align: center; padding: 80px 32px; background: radial-gradient(ellipse at center, #1e1b4b 0%, #0a0f1e 70%); }
.ag-final h2 { font-size: 36px; color: #fff; font-weight: 800; letter-spacing: -0.02em; }
.ag-final p { font-size: 18px; color: #cbd5e1; margin: 16px auto 28px; max-width: 620px; }

/* ─────────── Детальная страница агента ─────────── */
.ag-bc { font-size: 13px; color: #94a3b8; margin-bottom: 18px; }
.ag-bc a { color: var(--ag-lav); text-decoration: none; }
.ag-detail-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ag-detail-ic { font-size: 52px; line-height: 1; }
.ag-detail-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.ag-tag { font-family: 'JetBrains Mono', monospace; font-size: 12px; padding: 5px 11px; border-radius: 6px; border: 1px solid rgba(167,139,250,0.3); color: var(--ag-lav); }
.ag-tag.green { color: var(--ag-green); border-color: rgba(52,211,153,0.35); }
.ag-tag.amber { color: var(--ag-amber); border-color: rgba(251,191,36,0.35); }
.ag-prose { font-size: 17px; color: #cbd5e1; line-height: 1.7; max-width: 820px; }
.ag-prose p { margin-bottom: 14px; }
.ag-prose strong { color: #fff; }

/* steps timeline */
.ag-steps { margin-top: 24px; max-width: 860px; }
.ag-step { position: relative; padding: 0 0 26px 52px; border-left: 2px solid rgba(167,139,250,0.22); margin-left: 16px; }
.ag-step:last-child { border-left-color: transparent; padding-bottom: 0; }
.ag-step .n { position: absolute; left: -17px; top: -2px; width: 32px; height: 32px; border-radius: 50%; background: var(--ag-indigo); color: #fff; font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.ag-step h4 { font-size: 18px; color: #fff; font-weight: 700; margin-bottom: 6px; }
.ag-step p { font-size: 15px; color: #94a3b8; line-height: 1.6; }
.ag-step p a { color: var(--ag-lav); }
.ag-step .ag-code { margin-top: 12px; }

/* link row */
.ag-linkrow { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.ag-linkrow a { display: inline-flex; align-items: center; gap: 7px; padding: 11px 18px; border-radius: 10px; border: 1px solid rgba(167,139,250,0.3); color: #e0e7ff; text-decoration: none; font-size: 14px; font-weight: 600; }
.ag-linkrow a:hover { border-color: var(--ag-lav); background: rgba(99,102,241,0.08); }

/* related */
.ag-related { display: grid; gap: 12px; margin-top: 28px; grid-template-columns: repeat(4, 1fr); }
.ag-related a { background: rgba(99,102,241,0.06); border: 1px solid rgba(167,139,250,0.2); border-radius: 12px; padding: 16px 16px; text-decoration: none; transition: border-color 0.2s; }
.ag-related a:hover { border-color: var(--ag-lav); }
.ag-related b { display: block; color: #f1f5f9; font-size: 15px; }
.ag-related span { display: block; color: #94a3b8; font-size: 12px; margin-top: 3px; }

/* ─────────── Мобильная адаптация ─────────── */
@media (max-width: 900px) {
    .ag-grid { grid-template-columns: 1fr 1fr; }
    .ag-feats { grid-template-columns: 1fr 1fr; }
    .ag-related { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) { .ag-pilot { grid-template-columns: 1fr; } }
@media (max-width: 820px) { .ag-cols-2 { grid-template-columns: 1fr; } }
@media (max-width: 768px) {
    .ag-h1 { font-size: 36px; }
    .ag-h2 { font-size: 28px; }
    .ag-section { padding: 52px 20px; }
    .ag-hero { padding: 48px 20px 44px; }
    .ag-code { padding: 16px; }
    .ag-code pre { font-size: 12px; line-height: 1.6; }
    .ag-table-wrap .ag-table { min-width: 580px; }
    .ag-table th, .ag-table td { padding: 11px 13px; font-size: 13px; }
    .ag-pilot { padding: 26px; }
    .ag-stat b { font-size: 30px; }
}
@media (max-width: 720px) { .ag-stats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .ag-proof { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
    .ag-grid { grid-template-columns: 1fr; }
    .ag-feats { grid-template-columns: 1fr; }
    .ag-related { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .ag-hero { padding: 38px 18px 38px; }
    .ag-h1 { font-size: 32px; letter-spacing: -0.03em; }
    .ag-sub { font-size: 16px; margin-top: 18px; }
    .ag-section { padding: 44px 18px; }
    .ag-h2 { font-size: 25px; }
    .ag-lead { font-size: 15.5px; }
    .ag-eyebrow { font-size: 12px; }
    .ag-cta { gap: 10px; width: 100%; }
    .ag-cta .ag-btn { width: 100%; justify-content: center; padding: 14px 20px; }
    .ag-meta { gap: 7px; margin-top: 22px; }
    .ag-meta span { font-size: 11px; padding: 6px 9px; }
    .ag-stats { gap: 10px; margin-top: 30px; }
    .ag-stat { padding: 15px 16px; }
    .ag-stat b { font-size: 27px; }
    .ag-pilot { padding: 22px; border-radius: 16px; }
    .ag-pilot h3 { font-size: 25px; }
    .ag-pilot-side .btn { width: 100%; justify-content: center; }
    .ag-card { padding: 18px; }
    .ag-feat { padding: 20px; }
    .ag-code { padding: 14px; }
    .ag-code pre { font-size: 11.5px; }
    .ag-code .cap { font-size: 12px; }
    .ag-final { padding: 58px 18px; }
    .ag-final h2 { font-size: 27px; }
    .ag-final p { font-size: 16px; }
    .ag-detail-ic { font-size: 42px; }
    .ag-prose { font-size: 16px; }
    .ag-step { padding-left: 44px; }
    .ag-linkrow a { width: 100%; justify-content: center; }
}
@media (max-width: 360px) { .ag-related { grid-template-columns: 1fr; } }