/* ============================================================
   Вайб-Маркетолог · сайт-витрина · страницы отдельных ИИ-агентов
   (/agents/{slug}). ТОЛЬКО специфика этих страниц, префикс .agp-.
   База (палитра, btn, section, steps, faq, lead-*) — site.css.
   ============================================================ */

/* ---------- Hero: маскот вместо видео ---------- */
.agp-hero__mascot {
    position: relative;
    display: grid;
    place-items: center;
    padding: clamp(18px, 3vw, 34px);
    margin: 0;
}
.agp-hero__mascot::before {
    content: '';
    position: absolute;
    inset: 6%;
    border-radius: 50%;
    background: radial-gradient(circle at 42% 34%, hsl(0 0% 100% / .14), transparent 62%),
        conic-gradient(from 210deg, var(--ac1, var(--g2)), var(--ac2, var(--g3)), var(--ac1, var(--g2)));
    filter: blur(34px);
    opacity: .38;
}
.agp-hero__mascot img {
    position: relative;
    z-index: 1;
    width: min(400px, 82%);
    filter: drop-shadow(0 26px 48px hsl(260 60% 8% / .55));
    animation: agp-float 7s ease-in-out infinite;
}
@keyframes agp-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) {
    .agp-hero__mascot img { animation: none; }
}
.agp-hero__mascot figcaption {
    position: relative;
    z-index: 1;
    margin-top: 6px;
    font-size: 13px;
    color: hsl(0 0% 100% / .55);
    text-align: center;
}

/* Хлебные крошки на тёмной кино-полосе */
.agp-hero .breadcrumbs { margin-bottom: 20px; color: hsl(0 0% 100% / .45); }
.agp-hero .breadcrumbs a { color: hsl(0 0% 100% / .68); }
.agp-hero .breadcrumbs a:hover { color: #fff; }
.agp-hero .breadcrumbs a::after { color: hsl(0 0% 100% / .4); }
.agp-hero .breadcrumbs span { color: hsl(0 0% 100% / .45); }

/* ---------- «Что делает агент»: чек-лист работ ---------- */
.agp-tasks {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.agp-task {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 18px 20px;
    background: hsl(0 0% 100% / .66);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card);
    transition: transform .25s var(--ease-out), box-shadow .25s;
}
.agp-task:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.agp-task__icon {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, hsl(210 90% 96%), hsl(300 70% 96%));
    color: var(--g2);
}
.agp-task h3 { font-size: 15.5px; margin-bottom: 5px; }
.agp-task p { font-size: 14px; color: var(--fg-soft); }

/* ---------- Результат/цифры под чек-листом ---------- */
.agp-outcome {
    margin-top: 26px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    justify-content: center;
}
.agp-outcome span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: var(--radius-pill);
    background: hsl(0 0% 100% / .7);
    border: 1px solid var(--border);
    font-size: 14px;
    color: var(--fg-soft);
}
.agp-outcome b { color: var(--fg); font-weight: 700; }
.agp-outcome svg { color: var(--g5); flex: none; }

/* ---------- Перелинковка: соседние агенты ---------- */
.agp-related { padding: clamp(40px, 6vw, 70px) 0 clamp(64px, 8vw, 100px); }
.agp-related__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.agp-related__head h2 { font-size: clamp(1.25rem, 2.4vw, 1.7rem); }
.agp-related__back { font-size: 14.5px; color: var(--fg-soft); white-space: nowrap; }
.agp-related__back:hover { color: var(--fg); }
.agp-related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.agp-related__card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card);
    transition: transform .25s var(--ease-out), box-shadow .25s;
}
.agp-related__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.agp-related__card img {
    flex: none;
    width: 52px;
    height: 52px;
    object-fit: contain;
}
.agp-related__card b { display: block; font-size: 15px; line-height: 1.3; color: var(--fg); }
.agp-related__card span { font-size: 13px; color: var(--muted); }
.agp-related__card svg { margin-left: auto; flex: none; color: var(--muted); transition: transform .25s, color .25s; }
.agp-related__card:hover svg { transform: translateX(3px); color: var(--g2); }

/* ---------- Адаптив ---------- */
@media (max-width: 900px) {
    .agp-tasks { grid-template-columns: 1fr; }
    .agp-related__grid { grid-template-columns: 1fr; }
    .agp-hero__mascot { order: -1; padding: 0; }
    .agp-hero__mascot img { width: min(250px, 62%); }
}