/* Aroken — курс «Нейросети для разработчиков» (ai.html): три пересобранных блока —
   инструменты (.aic-tools), «Кому подойдёт» (.aic-fit) и программа-аккордеон (.aic-prog);
   «Что научишься делать» живёт на бенто флагмана (.ob--ai, css/course-blocks.css). Свои классы, чтобы не трогать общий pages.css.
   Логика аккордеона — js/ai-course.js. Акцент страницы — фиолетовый (--accent-rgb). */

/* ================================================================
   16 / Инструменты, с которыми работаешь
   ================================================================ */
.aic-tools__groups { margin-top: 34px; display: grid; gap: 28px; }
/* подпись группы — обычным шрифтом сайта, как подзаголовок, без декоративной линии */
.aic-tools__label { margin: 0 0 14px; font-size: 16px; line-height: 22px; font-weight: 600; letter-spacing: -.01em; color: rgba(255, 255, 255, .88); }
.aic-tools__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }

.aic-tool { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .08); background: linear-gradient(165deg, #17181C, #131418); transition: border-color .2s, transform .25s var(--ease), background .2s; }
.aic-tool:hover { border-color: rgba(var(--accent-rgb), .4); background: linear-gradient(165deg, #1B1C22, #141519); transform: translateY(-3px); }
/* Единый вид иконки инструмента: реальный флэт-логотип бренда в его цвете на нейтральной плитке */
.aic-tool__ico { flex: none; width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); overflow: hidden; transition: border-color .2s, background .2s; }
.aic-tool__ico img { width: 28px; height: 28px; object-fit: contain; }
.aic-tool:hover .aic-tool__ico { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); }
.aic-tool__body { min-width: 0; display: grid; gap: 3px; }
.aic-tool__name { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aic-tool__role { font-size: 12.5px; line-height: 16px; color: var(--muted-2); }

@media (max-width: 1023px) { .aic-tools__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 719px)  { .aic-tools__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 439px)  { .aic-tools__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .aic-tool:hover { transform: none; } }

/* 17 / «Что ты научишься делать» — с 14.09 собран на общем бенто флагмана (.ob.ob--ai), стили в css/course-blocks.css */

/* ================================================================
   18 / Кому подойдёт — диалог человек → курс
   ================================================================ */
.aic-fit__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 34px; }
.aic-chat { --c: var(--violet); display: flex; flex-direction: column; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .08); background: linear-gradient(180deg, #17181C, #121316); box-shadow: 0 22px 46px -30px rgba(0, 0, 0, .8); overflow: hidden; transition: transform .25s var(--ease), border-color .2s; }
.aic-chat:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 46%, transparent); }
.aic-chat__head { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .02); }
.aic-chat__ava { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c) 36%, transparent); }
.aic-chat__ava svg { width: 22px; height: 22px; }
.aic-chat__who { display: grid; gap: 2px; min-width: 0; }
.aic-chat__role { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; color: #fff; }
.aic-chat__tag { font-size: 13px; line-height: 17px; color: var(--muted-2); }
.aic-chat__feed { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 18px; }
.aic-bubble { max-width: 90%; padding: 11px 14px; font-size: 14px; line-height: 20px; text-wrap: pretty; }
.aic-bubble--you { align-self: flex-end; border-radius: 15px 15px 4px 15px; background: linear-gradient(160deg, #FEFDF9, #ECE6DB); color: var(--ink); box-shadow: 0 12px 22px -16px rgba(0, 0, 0, .8); }
.aic-bubble--ai { align-self: flex-start; border-radius: 15px 15px 15px 4px; background: color-mix(in srgb, var(--c) 12%, #17181C); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); color: rgba(255, 255, 255, .92); }
.aic-bubble__ico { color: var(--c); font-weight: 600; margin-right: 3px; }
.aic-chat__cta { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; padding: 15px 18px; border-top: 1px solid rgba(255, 255, 255, .06); font-size: 14px; font-weight: 600; color: var(--c); text-decoration: none; transition: gap .2s var(--ease); }
.aic-chat__cta:hover { gap: 11px; }
.aic-fit__note { margin: 22px 0 0; font-size: 14.5px; line-height: 22px; color: var(--muted-2); text-wrap: pretty; }

@media (max-width: 919px) { .aic-fit__grid { grid-template-columns: 1fr; max-width: 620px; } }
@media (prefers-reduced-motion: reduce) { .aic-chat:hover { transform: none; } }

/* ================================================================
   19 / Программа — модули-аккордеоны
   ================================================================ */
.aic-prog__list { margin-top: 34px; display: grid; gap: 12px; }
.aic-mod { border-radius: 18px; border: 1px solid rgba(255, 255, 255, .08); background: linear-gradient(180deg, #17181C, #131418); overflow: hidden; transition: border-color .25s; }
.aic-mod.is-open { border-color: rgba(var(--accent-rgb), .34); }
.aic-mod__h { margin: 0; font: inherit; }
.aic-mod__btn { display: flex; align-items: center; gap: 16px; width: 100%; padding: 20px 22px; border: 0; background: none; text-align: left; cursor: pointer; color: #fff; }
.aic-mod__btn:focus-visible { outline: 2px solid rgb(var(--accent-rgb)); outline-offset: -3px; border-radius: 18px; }
.aic-mod__ico { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--violet); background: rgba(var(--accent-rgb), .1); border: 1px solid rgba(var(--accent-rgb), .2); }
.aic-mod__ico svg { width: 24px; height: 24px; }
.aic-mod__meta { display: grid; gap: 3px; min-width: 0; flex: 1; }
.aic-mod__num { font-size: 12px; line-height: 15px; font-weight: 600; color: rgba(var(--accent-rgb), .95); }
.aic-mod__title { font-size: 18px; line-height: 23px; font-weight: 600; letter-spacing: -.015em; color: #fff; }
.aic-mod__count { flex: none; font-size: 13px; font-weight: 500; color: var(--muted-2); white-space: nowrap; }
.aic-mod__plus { flex: none; position: relative; width: 22px; height: 22px; color: rgba(255, 255, 255, .55); transition: transform .35s var(--spring), color .2s; }
.aic-mod__plus svg { width: 22px; height: 22px; }
.aic-mod.is-open .aic-mod__plus { transform: rotate(135deg); color: var(--violet); }

.aic-mod__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.aic-mod.is-open .aic-mod__body { grid-template-rows: 1fr; }
.aic-mod__inner { overflow: hidden; min-height: 0; }
.aic-mod__pad { padding: 0 22px 22px 82px; }
.aic-mod__desc { margin: 0 0 16px; max-width: 720px; font-size: 15px; line-height: 23px; color: var(--muted-2); text-wrap: pretty; }
.aic-lessons { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 26px; }
.aic-lessons li { display: flex; align-items: baseline; gap: 11px; padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, .06); font-size: 14.5px; line-height: 20px; color: rgba(255, 255, 255, .86); }
.aic-lessons__n { flex: none; min-width: 30px; font: 500 12.5px/20px var(--mono); color: rgba(var(--accent-rgb), .8); }
.aic-lessons__tag { margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; line-height: 15px; font-weight: 600; color: var(--violet); background: rgba(var(--accent-rgb), .12); border: 1px solid rgba(var(--accent-rgb), .24); white-space: nowrap; }
.aic-prog__final { margin: 26px auto 0; max-width: 760px; text-align: center; font-size: 16px; line-height: 24px; color: var(--muted-2); text-wrap: pretty; }
.aic-prog__final b { color: #fff; font-weight: 600; }

@media (max-width: 767px) {
  .aic-mod__btn { padding: 16px 16px; gap: 13px; }
  .aic-mod__ico { width: 38px; height: 38px; border-radius: 10px; }
  .aic-mod__ico svg { width: 21px; height: 21px; }
  .aic-mod__title { font-size: 16px; line-height: 21px; }
  .aic-mod__count { display: none; }
  .aic-mod__pad { padding: 0 16px 18px; }
  .aic-lessons { grid-template-columns: 1fr; gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .aic-mod__body { transition: none; }
  .aic-mod__plus { transition: none; }
}