/* Aroken — три блока страниц курсов: «Что ты сделаешь» (.ob), «Программа» флагмана (.pgf, .pg-mod) и «Кому подойдёт» (.who).
   Подключается на flagship, javascript, ai, wordpress и testdrive после pages.css; аккордеон — js/course-blocks.js.
   Цвет курса — только через --accent-rgb / --accent-2-rgb страницы (main.css): флагман лайм + фиолетовый, JS жёлтый, ИИ фиолетовый, WordPress голубой.
   Лайм как заливка кнопки — только у Primary; здесь акцент живёт в линиях, подсветке кода и точках. */

/* ================================================================
   Общее: карточка bento, окно, чипы, 3D-объект
   ================================================================ */
.ob { margin-top: 64px; display: grid; gap: 20px; }
/* --gx/--gy — откуда на карточку падает свет: у соседних карточек он с разных сторон, поэтому ряд не выглядит одной простынёй */
.ob-card {
  --gx: 100%; --gy: 100%;
  position: relative; isolation: isolate; min-width: 0; display: flex; flex-direction: column;
  padding: 28px; border-radius: 24px; overflow: hidden; color: #fff;
  border: 1px solid rgba(255, 255, 255, .08);
  background: radial-gradient(90% 80% at var(--gx) var(--gy), rgba(var(--accent-rgb), .1), rgba(var(--accent-rgb), 0) 62%), radial-gradient(60% 50% at calc(100% - var(--gx)) calc(100% - var(--gy)), rgba(var(--accent-2-rgb), .05), rgba(var(--accent-2-rgb), 0) 70%), linear-gradient(165deg, #18191D 0%, #121316 100%);
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.ob-card:nth-child(2n) { --gx: 0%; --gy: 0%; }
.ob-card:nth-child(3n) { --gx: 100%; --gy: 0%; }
.ob-card__copy { position: relative; z-index: 2; max-width: 420px; }
.ob-card__title { font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -.015em; text-wrap: balance; }
.ob-card__text { margin-top: 10px; font-size: 15px; line-height: 22px; color: var(--muted-2); text-wrap: pretty; }
.ob-3d { position: absolute; z-index: 1; height: auto; pointer-events: none; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .55)); transition: transform .6s var(--spring); }

.ob-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ob-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); font: 500 12px/1 var(--mono); color: rgba(255, 255, 255, .82); white-space: nowrap; }

/* окно браузера */
.ob-win__bar { display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 12px; background: #EDF1F5; border-bottom: 1px solid rgba(23, 24, 28, .08); }
.ob-win__dots { display: flex; gap: 5px; }
.ob-win__dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(23, 24, 28, .2); }
.ob-win__url { flex: 1 1 auto; min-width: 0; height: 20px; padding: 0 10px; border-radius: 6px; background: #fff; font: 500 11px/20px var(--mono); color: #57575D; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* тёмный вариант той же шапки — окно редактора кода: точки + имя файла вкладкой */
.ob-win__bar--dark { background: rgba(255, 255, 255, .04); border-bottom-color: rgba(255, 255, 255, .08); }
.ob-win__bar--dark .ob-win__dots i { background: rgba(255, 255, 255, .16); }
.ob-win__bar--dark .ob-win__url { flex: 0 1 auto; background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .55); }

/* код */
.ob-code { margin: 0; font: 500 12.5px/21px var(--mono); color: rgba(226, 229, 236, .9); white-space: pre; tab-size: 2; }
.c-k { color: #B8A3FF; }
.c-f { color: rgb(var(--accent-rgb)); }
.c-s { color: #FF8E89; }
.c-c { color: rgba(186, 191, 201, .5); }
.c-n { color: #73D6FF; }

/* ================================================================
   Флагман: крупная — вёрстка (практическая работа), широкая — JS, две компактные
   ================================================================ */
.ob--flag { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: minmax(304px, auto); }
.ob--flag .ob-card--tall { grid-row: span 2; }
.ob--flag .ob-card--wide { grid-column: span 2; }

/* Вёрстка: Fit Studio в обычном окне браузера (точки + адрес), окно выходит в правый нижний край карточки.
   Подпись урока — обычным шрифтом сайта, приглушённо, без точек и моно: это подпись, а не отладочный лейбл */
.ob-inspect { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; margin: 20px -28px -28px; overflow: hidden; }
.ob-inspect__cap { order: -1; margin: 0 28px 14px; font-size: 13px; line-height: 18px; color: rgba(255, 255, 255, .5); text-wrap: pretty; }
/* окно шире карточки: скриншот виден крупно, поля сайта осознанно уходят за клип; тень — только тёмная, без цветного свечения над окном */
.ob-inspect__win { position: relative; width: 126%; margin-left: -13%; overflow: hidden; border-radius: 10px 10px 0 0; background: #fff; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .4); transform-origin: 0 100%; transition: transform .6s var(--spring); }
.ob-card--layout:hover .ob-inspect__win { transform: translate(-4px, -6px); }
.ob-inspect__win .ob-win__bar { padding: 0 calc(10.4% + 12px); }
.ob-inspect__page { position: relative; }
.ob-inspect__shot { display: block; width: 100%; height: auto; }
/* «инспектор» сетки (пунктирные колонки + чип селектора) — на флагмане снят, остался только в интро тест-драйва (testdrive.html, позиция — css/testdrive.css) */
.ob-inspect__grid { position: absolute; left: 18.1%; right: 18.3%; top: 75.5%; bottom: -2px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5%; outline: 1.5px dashed rgba(117, 87, 255, .85); outline-offset: 2px; }
.ob-inspect__grid i { background: rgba(184, 163, 255, .22); box-shadow: inset 0 0 0 1px rgba(117, 87, 255, .7); }
.ob-inspect__tip { position: absolute; right: 18.3%; top: calc(75.5% - 34px); display: inline-flex; align-items: center; gap: 2px; height: 24px; padding: 0 4px 0 9px; border-radius: 6px; background: #1B1D22; box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .5); font: 500 11px/1 var(--mono); color: #C9A5FF; white-space: nowrap; }
.ob-inspect__tip b { font-weight: 500; color: #E5B96A; }
.ob-inspect__tip span { margin-left: 8px; padding: 3px 6px; border-radius: 4px; background: rgba(117, 87, 255, .9); color: #fff; font-size: 10px; }

/* JS: одна сцена «код → результат». Слева копия, справа — окно редактора до правого и нижнего края карточки: шапка с именем файла,
   комментарий серой строкой внутри редактора (как в IDE) и четыре строки кода; из нижнего левого угла редактора выходит модалка,
   которую открывает подсвеченная строка; куб один, стоит в правом нижнем углу и осознанно уходит за клип, как кубы WP */
.ob-card--js { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.14fr); column-gap: 32px; }
.ob-card--js .ob-card__copy { align-self: start; max-width: 420px; }
.ob-live { position: relative; min-height: 276px; margin: 0 -28px -28px 0; padding: 0 20px 148px; border-radius: 16px 0 0 0; background: #0C0D10; border: 1px solid rgba(255, 255, 255, .1); border-right: 0; border-bottom: 0; box-shadow: 0 24px 40px -28px rgba(0, 0, 0, .9); }
.ob-live .ob-win__bar { margin: 0 -20px 14px; border-radius: 15px 0 0 0; }
.ob-code__hl { display: inline-block; margin: 0 -20px 0 -22px; padding: 0 20px 0 20px; border-left: 2px solid rgb(var(--accent-rgb)); background: linear-gradient(90deg, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), 0) 90%); }
.ob-live__note { margin: 0; font: 500 12.5px/21px var(--mono); color: rgba(186, 191, 201, .5); text-wrap: pretty; }
.ob-modal { position: absolute; z-index: 2; left: -18px; bottom: 22px; width: 232px; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 13px 15px 13px; border-radius: 14px; background: linear-gradient(160deg, #FEFDF9, #ECE6DB); box-shadow: 0 26px 40px -16px rgba(0, 0, 0, .75), 0 0 0 1px rgba(23, 24, 28, .06); transition: transform .6s var(--spring); }
.ob-card--js:hover .ob-modal { transform: translateY(-4px); }
.ob-modal__x { position: absolute; right: 10px; top: 8px; font-size: 11px; line-height: 16px; color: rgba(23, 24, 28, .45); }
.ob-modal__title { display: flex; align-items: center; gap: 8px; font-size: 13.5px; line-height: 18px; font-weight: 700; letter-spacing: -.012em; color: var(--ink); white-space: nowrap; }
.ob-modal__check { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, var(--lime-3), var(--lime-2)); box-shadow: 0 6px 12px -5px rgba(199, 255, 46, .6); }
.ob-modal__text { margin-left: 28px; font-size: 11.5px; line-height: 15px; color: rgba(23, 24, 28, .6); white-space: nowrap; }
.ob-modal__btn { margin: 7px 0 0 28px; padding: 6px 13px; border-radius: 8px; background: var(--ink); color: #FAF8F1; font-size: 11.5px; font-weight: 600; }
.ob-3d--js { right: -26px; bottom: -34px; width: 156px; transform: rotate(8deg); }
.ob-card--js:hover .ob-3d--js { transform: rotate(3deg) translateY(-6px); }

/* WordPress: куб в правом верхнем углу, внизу — поле ACF, которое правит заказчик */
.ob-card--wp .ob-card__copy { padding-right: 88px; }
.ob-3d--wp { right: -30px; top: -30px; width: 158px; transform: rotate(10deg); }
.ob-card--wp:hover .ob-3d--wp { transform: rotate(4deg) translateY(4px); }
.ob-acf { position: relative; z-index: 2; margin-top: auto; padding: 12px 14px 14px; border-radius: 14px; background: #F0F0F1; color: #1D2327; box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .7); }
.ob-card--wp .ob-card__copy { margin-bottom: 20px; }
.ob-acf__label { display: block; font-size: 12px; line-height: 16px; font-weight: 600; }
.ob-acf__label code { margin-left: 6px; font: 400 11px/16px var(--mono); color: #50575E; }
.ob-acf__input { display: flex; align-items: center; height: 34px; margin-top: 6px; padding: 0 10px; border-radius: 4px; border: 1px solid #2271B1; box-shadow: 0 0 0 1px #2271B1; background: #fff; font-size: 14px; white-space: nowrap; overflow: hidden; }
.ob-acf__input i { width: 1.5px; height: 17px; margin-left: 2px; background: #1D2327; }
@media (prefers-reduced-motion: no-preference) {
  .ob-acf__input i { animation: ob-caret 1.1s steps(2) infinite; }
}
@keyframes ob-caret { 50% { opacity: 0; } }

/* Заказы: единый 3D-набор площадок Telegram · Kwork · Профи.ру — ровно те, что в тексте.
   Текст занимает всю ширину сверху, набор площадок стоит лентой по низу и масштабируется целиком (scale) — заголовок не рвётся на три строки, арт не наезжает на текст */
.ob-card--orders { padding-bottom: 136px; }
.ob-orders3d { position: absolute; z-index: 1; left: 50%; bottom: -6px; width: 268px; height: 190px; pointer-events: none; transform-origin: 50% 100%; transform: translateX(-50%) scale(.68); }
.ob-orders3d__t { position: absolute; height: auto; filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .5)); transition: transform .6s var(--spring); }
.ob-orders3d__t--tg { left: -16px; bottom: 2px; width: 138px; transform: rotate(-11deg); z-index: 2; }
.ob-orders3d__t--profi { right: -22px; bottom: -8px; width: 138px; transform: rotate(10deg); z-index: 1; }
.ob-orders3d__t--kwork { left: 56px; bottom: 30px; width: 168px; transform: rotate(-3deg); z-index: 3; }
.ob-card--orders:hover .ob-orders3d__t--tg { transform: rotate(-15deg) translate(-6px, -4px); }
.ob-card--orders:hover .ob-orders3d__t--profi { transform: rotate(14deg) translate(6px, -4px); }
.ob-card--orders:hover .ob-orders3d__t--kwork { transform: rotate(-1deg) translateY(-10px); }
.ob-card--orders .ob-card__copy { padding-right: 0; }

/* ================================================================
   JavaScript: результат показан глазами разработчика — хранилище, DOM, форма, модули
   ================================================================ */
.ob--js { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(292px, auto); }
.ob--js .ob-card--wide { grid-column: span 2; }

/* Todo: панель Application → Local Storage */
.ob-card--store { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); grid-template-rows: auto 1fr; column-gap: 28px; }
.ob-card--store .ob-card__copy { grid-column: 1; grid-row: 1 / 3; align-self: start; }
/* сверху — само приложение, снизу — его данные в хранилище: JSON в таблице — те же две задачи */
.ob-app { grid-column: 2; align-self: start; padding: 12px 14px 14px; border-radius: 14px; background: linear-gradient(160deg, #FEFDF9, #F1ECE1); color: var(--ink); box-shadow: 0 18px 30px -20px rgba(0, 0, 0, .8); }
.ob-app__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: -.01em; }
.ob-app__head span { font: 500 11px/16px var(--mono); color: rgba(23, 24, 28, .55); }
.ob-app__task { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 7px 10px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px rgba(23, 24, 28, .1); font-size: 13px; line-height: 18px; }
.ob-app__task i { flex: none; width: 15px; height: 15px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px rgba(23, 24, 28, .3); }
.ob-app__task--done { color: rgba(23, 24, 28, .5); text-decoration: line-through; }
.ob-app__task--done i { background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.3 8.6 13.3 14.5 7' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; box-shadow: none; }
.ob-store { grid-column: 2; align-self: end; margin: 16px -28px -28px 0; padding: 14px 18px 16px; border-radius: 16px 0 0 0; background: #0C0D10; border: 1px solid rgba(255, 255, 255, .1); border-right: 0; border-bottom: 0; box-shadow: 0 24px 40px -28px rgba(0, 0, 0, .9); overflow: hidden; }
.ob-store__head { display: flex; align-items: center; gap: 8px; font: 500 11px/16px var(--mono); color: rgba(255, 255, 255, .45); white-space: nowrap; }
.ob-store__head b { font-weight: 500; color: rgba(255, 255, 255, .7); }
.ob-store__tab { padding: 3px 8px; border-radius: 5px; background: rgba(var(--accent-rgb), .16); color: rgb(var(--accent-rgb)); }
.ob-store__table { margin-top: 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .09); overflow: hidden; }
.ob-store__row { display: grid; grid-template-columns: 88px minmax(0, 1fr); font: 500 11.5px/32px var(--mono); color: rgba(226, 229, 236, .88); }
.ob-store__row span { padding: 0 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-store__row span + span { border-left: 1px solid rgba(255, 255, 255, .09); }
.ob-store__row--head { background: rgba(255, 255, 255, .05); color: rgba(255, 255, 255, .5); border-bottom: 1px solid rgba(255, 255, 255, .09); }
.ob-store__row:not(.ob-store__row--head) span:first-child { color: rgb(var(--accent-rgb)); }
.ob-store__note { margin-top: 10px; font-size: 12.5px; line-height: 17px; color: rgba(255, 255, 255, .45); }

/* DOM: кусок дерева Elements с выделенным узлом */
.ob-tree { margin: auto -28px -28px 0; padding: 16px 18px 18px; border-radius: 14px 0 0 0; background: #0C0D10; border: 1px solid rgba(255, 255, 255, .1); border-right: 0; border-bottom: 0; overflow: hidden; }
.ob-tree__ln { font: 500 11.5px/22px var(--mono); color: rgba(226, 229, 236, .78); white-space: pre; }
.ob-tree__ln--sel { margin: 0 -18px; padding: 0 18px; background: rgba(var(--accent-rgb), .14); box-shadow: inset 2px 0 0 rgb(var(--accent-rgb)); color: #fff; }
.ob-tree__call { margin-top: 12px; display: inline-block; padding: 5px 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); font: 500 11.5px/18px var(--mono); color: rgba(226, 229, 236, .9); }

/* Формы: поле с ошибкой — то, что учишься ловить на событиях */
.ob-form { margin: auto -28px -28px 0; padding: 16px 18px 20px; border-radius: 16px 0 0 0; background: linear-gradient(160deg, #FEFDF9, #F1ECE1); color: var(--ink); box-shadow: 0 20px 34px -22px rgba(0, 0, 0, .8); }
.ob-form__label { font-size: 12px; line-height: 16px; font-weight: 600; color: rgba(23, 24, 28, .7); }
.ob-form__input { display: flex; align-items: center; height: 38px; margin-top: 6px; padding: 0 12px; border-radius: 10px; background: #fff; font-size: 14px; box-shadow: inset 0 0 0 1px rgba(23, 24, 28, .18); }
.ob-form__input--bad { box-shadow: inset 0 0 0 1.5px var(--coral), 0 0 0 3px rgba(255, 102, 97, .18); }
.ob-form__input i { width: 1.5px; height: 17px; margin-left: 2px; background: var(--ink); }
.ob-form__err { margin-top: 6px; font-size: 12.5px; line-height: 17px; color: #C8362F; }
.ob-form__btn { margin-top: 12px; display: inline-block; padding: 9px 16px; border-radius: 10px; background: var(--ink); color: #FAF8F1; font-size: 13px; font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .ob-form__input i { animation: ob-caret 1.1s steps(2) infinite; }
}

/* Модули: дерево проекта и импорты рядом */
.ob-card--mods .ob-card__copy { max-width: 42%; }
.ob-files { position: absolute; right: -1px; top: 28px; bottom: -1px; left: 46%; display: grid; grid-template-columns: minmax(0, 168px) minmax(0, 1fr); gap: 0; border-radius: 16px 0 0 0; background: #0C0D10; border: 1px solid rgba(255, 255, 255, .1); border-right: 0; border-bottom: 0; overflow: hidden; box-shadow: 0 24px 40px -28px rgba(0, 0, 0, .9); }
.ob-code--tree { padding: 16px 14px; font-size: 11.5px; line-height: 21px; color: rgba(226, 229, 236, .68); background: rgba(255, 255, 255, .03); border-right: 1px solid rgba(255, 255, 255, .08); }
.ob-files__on { color: rgb(var(--accent-rgb)); }
.ob-code--imports { padding: 16px 16px; font-size: 11.5px; line-height: 21px; }
.ob-3d--jsmods { left: -30px; bottom: -46px; width: 212px; transform: rotate(-12deg); z-index: 2; }
.ob-card--mods:hover .ob-3d--jsmods { transform: rotate(-6deg) translateY(-8px); }
/* уже 1440: длинные import-строки не режутся краем карточки, а мягко переносятся, как в редакторе с включённым word wrap */
@media (max-width: 1439px) {
  .ob-code--imports { white-space: pre-wrap; }
}

/* ================================================================
   WordPress: тема, админка клиента, магазин и переезд на хостинг
   ================================================================ */
.ob--wp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.08fr); grid-auto-rows: minmax(296px, auto); }
.ob--wp .ob-card--wide { grid-column: span 2; }
.ob--wp .ob-card--tall { grid-row: span 2; }

/* Тема: файлы шаблона и PHP рядом */
.ob-card--theme .ob-card__copy { padding-right: 120px; }
.ob-3d--wpc { right: -22px; top: -26px; width: 150px; transform: rotate(9deg); }
.ob-card--theme:hover .ob-3d--wpc { transform: rotate(3deg) translateY(4px); }
.ob-theme { margin: auto -28px -28px 0; display: grid; grid-template-columns: minmax(0, 196px) minmax(0, 1fr); border-radius: 16px 0 0 0; background: #0C0D10; border: 1px solid rgba(255, 255, 255, .1); border-right: 0; border-bottom: 0; overflow: hidden; box-shadow: 0 24px 40px -28px rgba(0, 0, 0, .9); }
.ob-code--php { padding: 16px 18px; font-size: 11.5px; line-height: 22px; }
.ob-code--php .c-k { color: #73D6FF; }

/* Магазин: витрина WooCommerce в окне браузера, окно уходит в нижний край */
.ob-shop { margin: auto -28px -28px; overflow: hidden; border-radius: 10px 10px 0 0; background: #fff; color: var(--ink); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8); }
.ob-shop__page { padding: 12px 14px 14px; background: linear-gradient(180deg, #FFF, #F4F6F8); }
.ob-shop__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ob-shop__brand { font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
.ob-shop__cart { padding: 4px 9px; border-radius: 6px; background: #2271B1; color: #fff; font-size: 10.5px; font-weight: 600; }
.ob-shop__grid { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ob-shop__grid li { display: grid; gap: 3px; padding: 8px 8px 10px; border-radius: 8px; background: #fff; border: 1px solid rgba(23, 24, 28, .1); box-shadow: 0 6px 12px -8px rgba(23, 24, 28, .4); }
.ob-shop__img { height: 68px; border-radius: 6px; background: linear-gradient(135deg, #C9AE8C, #A8815A); }
.ob-shop__img--2 { background: linear-gradient(135deg, #9FB8CE, #6C8EA8); }
.ob-shop__img--3 { background: linear-gradient(135deg, #D7D2C8, #A9A399); }
.ob-shop__img--4 { background: linear-gradient(135deg, #CFD6DC, #8C979F); }
.ob-shop__grid b { font-size: 11.5px; line-height: 15px; font-weight: 600; }
.ob-shop__grid small { font-size: 11px; line-height: 15px; color: rgba(23, 24, 28, .6); }
.ob-shop__btn { margin-top: 4px; padding: 5px 0; border-radius: 5px; background: #2271B1; color: #fff; font-size: 10.5px; font-weight: 600; text-align: center; }

/* Админка: повторитель ACF, который правит заказчик */
.ob-rep { margin: auto -28px -28px 0; padding: 12px 14px 14px; border-radius: 14px 0 0 0; background: #F0F0F1; color: #1D2327; box-shadow: 0 22px 36px -22px rgba(0, 0, 0, .85); }
.ob-rep__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12.5px; line-height: 18px; font-weight: 600; }
.ob-rep__head code { font: 400 11px/16px var(--mono); color: #50575E; }
.ob-rep__badge { margin-left: auto; padding: 2px 7px; border-radius: 4px; background: #00A0D2; color: #fff; font: 700 10px/16px var(--font); letter-spacing: .02em; }
.ob-rep__row { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 8px 10px; border-radius: 4px; background: #fff; border: 1px solid #DCDCDE; font-size: 13px; line-height: 18px; }
.ob-rep__row b { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 4px; background: #F0F0F1; font: 500 11px/1 var(--mono); color: #50575E; }
.ob-rep__row span { margin-left: auto; color: #2271B1; }
.ob-rep__add { margin-top: 8px; font-size: 12px; line-height: 18px; font-weight: 600; color: #2271B1; }

/* Хостинг: переезд с локалки на домен */
.ob-host { margin: auto -28px -28px 0; padding: 18px 20px 20px; border-radius: 16px 0 0 0; background: #0C0D10; border: 1px solid rgba(255, 255, 255, .1); border-right: 0; border-bottom: 0; }
.ob-host__from, .ob-host__to { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 10px; font: 500 12.5px/16px var(--mono); }
.ob-host__from { border: 1px dashed rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .55); }
.ob-host__to { border: 1px solid rgba(var(--accent-rgb), .5); background: rgba(var(--accent-rgb), .1); color: #fff; }
.ob-host__arrow { position: relative; margin: 10px 0 10px 20px; padding-left: 22px; font-size: 12px; line-height: 18px; color: rgba(255, 255, 255, .55); }
.ob-host__arrow::before { content: ""; position: absolute; left: 0; top: -8px; bottom: -8px; width: 1.5px; background: rgba(var(--accent-rgb), .45); }
.ob-host__arrow::after { content: "▾"; position: absolute; left: -4px; bottom: -16px; font-size: 11px; color: rgba(var(--accent-rgb), .8); }

/* ================================================================
   WordPress: программа — список страниц в админке
   ================================================================ */
.pgw { margin-top: 64px; border-radius: 20px; overflow: hidden; background: #F0F0F1; color: #1D2327; box-shadow: 0 30px 60px -32px rgba(0, 0, 0, .9); }
.pgw__bar { display: flex; align-items: center; gap: 12px; padding: 0 18px; height: 46px; background: #1D2327; color: rgba(255, 255, 255, .82); font-size: 13.5px; font-weight: 500; }
.pgw__bar-ico { display: grid; place-items: center; color: #fff; }
.pgw__bar-count { margin-left: auto; font: 500 12.5px/18px var(--mono); color: rgba(255, 255, 255, .55); }
.pgw__table { padding: 14px 18px 8px; }
.pgw__row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.25fr) minmax(0, .95fr); align-items: center; gap: 20px; padding: 13px 12px; border-bottom: 1px solid #E1E1E3; background: #fff; font-size: 14px; line-height: 20px; transition: background .2s; }
.pgw__row:nth-child(even) { background: #F6F7F7; }
.pgw__row:hover { background: #EAF2F8; }
.pgw__row span:first-child { display: flex; align-items: baseline; gap: 12px; font-weight: 600; letter-spacing: -.01em; }
.pgw__row span:first-child b { font: 500 12px/18px var(--mono); color: #2271B1; }
.pgw__row span:nth-child(2) { color: #50575E; font-size: 13.5px; }
.pgw__row--head { padding: 8px 12px; background: none; border-bottom: 1px solid #C3C4C7; font-size: 12.5px; font-weight: 600; color: #50575E; }
.pgw__row--head:hover { background: none; }
.pgw__row--head span:first-child { font-weight: 600; padding-left: 34px; }
.pgw__badge { display: inline-block; padding: 5px 10px; border-radius: 6px; background: rgba(34, 113, 177, .12); border: 1px solid rgba(34, 113, 177, .3); font-size: 12.5px; line-height: 16px; font-weight: 600; color: #14568A; }
.pgw__foot { padding: 16px 30px 20px; font-size: 14px; line-height: 21px; color: #50575E; }

/* ================================================================
   Нейросети: «Что ты научишься делать» — пять результатов по логике флагмана (ai.html, .ob--ai).
   Ряд 1: широкая «сайт за вечер» (светлое окно браузера уходит за правый и нижний край) + «промпты» (панель промпта по частям).
   Ряд 2: агент в редакторе (куб Cursor + лог), заявка в Telegram-бота (3D-самолётик + сообщение на бумаге), ассистент в n8n (орб + узлы).
   Правило: у карточки один акцент — окно, панель или 3D-объект; цвета только из --accent-rgb / --accent-2-rgb страницы.
   ================================================================ */
.ob--ai { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(320px, auto); }
.ob--ai .ob-card--wide { grid-column: span 2; }

/* Сайт за вечер: текст слева, справа — светлое окно готового лендинга; подпись модуля — обычным шрифтом, приглушённо, как у флагмана */
.ob-card--site .ob-card__copy { max-width: 40%; }
.ob-site__cap { position: relative; z-index: 2; max-width: 40%; margin: 16px 0 0; font-size: 13px; line-height: 18px; color: rgba(255, 255, 255, .5); text-wrap: pretty; }
.ob-site { position: absolute; z-index: 1; left: 44%; right: -1px; top: 28px; bottom: -1px; display: flex; flex-direction: column; }
.ob-site__win { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; border-radius: 12px 0 0 0; background: #fff; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .4); transform-origin: 0 100%; transition: transform .6s var(--spring); }
.ob-card--site:hover .ob-site__win { transform: translate(-4px, -6px); }
.ob-site__page { flex: 1 1 auto; display: flex; flex-direction: column; padding: 14px 20px 18px; background: linear-gradient(160deg, #FEFDF9, #F1ECE1); color: var(--ink); }
.ob-site__nav { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.ob-site__logo { width: 22px; height: 22px; border-radius: 7px; background: var(--ink); }
.ob-site__nav i { width: 36px; height: 6px; border-radius: 3px; background: rgba(23, 24, 28, .16); }
.ob-site__nav i:first-of-type { margin-left: auto; }
.ob-site__nav i:last-of-type { width: 52px; height: 20px; border-radius: 999px; background: rgba(23, 24, 28, .1); }
.ob-site__hero { flex: 1 1 auto; display: grid; align-content: center; justify-items: start; gap: 7px; padding: 8px 0 18px; }
.ob-site__kicker { margin: 0; font: 600 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--violet-deep); }
.ob-site__title { margin: 0; font-size: clamp(26px, 2.3vw, 34px); line-height: 1.05; font-weight: 700; letter-spacing: -.025em; }
.ob-site__cta { margin-top: 8px; display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 999px; background: var(--ink); color: #FAF8F1; font-size: 12px; font-weight: 600; letter-spacing: -.005em; }
.ob-site__menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ob-site__item { display: grid; gap: 3px; min-width: 0; padding: 9px 11px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px rgba(23, 24, 28, .1); }
.ob-site__item b { font-size: 12.5px; line-height: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-site__item i { font: 500 11px/1 var(--mono); font-style: normal; color: rgba(23, 24, 28, .6); }

/* Промпт по частям: четыре строки «часть → текст» одним цветом, каретка в конце — это набирается, а не таблица */
.ob-prompt { position: relative; z-index: 2; margin: auto -28px -28px 0; padding: 12px 18px 14px; border-radius: 16px 0 0 0; background: #0C0D10; border: 1px solid rgba(255, 255, 255, .1); border-right: 0; border-bottom: 0; box-shadow: 0 24px 40px -28px rgba(0, 0, 0, .9); }
.ob-card--prompt .ob-card__copy { margin-bottom: 20px; }
.ob-prompt__row { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 10px; margin: 0; padding: 7px 0; font: 500 12.5px/19px var(--mono); color: rgba(226, 229, 236, .9); }
.ob-prompt__row + .ob-prompt__row { border-top: 1px solid rgba(255, 255, 255, .06); }
.ob-prompt__key { font-size: 11px; color: rgba(var(--accent-rgb), .9); }
.ob-prompt__part { text-wrap: pretty; }
.ob-prompt__caret { display: inline-block; width: 1.5px; height: 14px; margin-left: 3px; vertical-align: -2px; background: rgb(var(--accent-rgb)); }
@media (prefers-reduced-motion: no-preference) { .ob-prompt__caret { animation: ob-caret 1.1s steps(2) infinite; } }

/* Три компактные карточки: 3D-объект в правом верхнем углу, панель уходит за правый нижний край */
.ob-card--agent .ob-card__copy, .ob-card--tg .ob-card__copy, .ob-card--n8n .ob-card__copy { padding-right: 96px; margin-bottom: 20px; }
.ob-3d--cursor { right: -26px; top: -26px; width: 148px; transform: rotate(10deg); }
.ob-card--agent:hover .ob-3d--cursor { transform: rotate(4deg) translateY(4px); }
.ob-3d--tg { right: -20px; top: -22px; width: 138px; transform: rotate(-8deg); }
.ob-card--tg:hover .ob-3d--tg { transform: rotate(-2deg) translateY(4px); }
.ob-3d--orb { right: -36px; top: -40px; width: 172px; transform: rotate(-6deg); }
.ob-card--n8n:hover .ob-3d--orb { transform: rotate(2deg) translateY(4px); }

/* Агент: заголовок сессии (обычным шрифтом, без точки-индикатора) и три строки — план, сборка, готово; подписи одним цветом */
.ob-agent { position: relative; z-index: 2; margin: auto -28px -28px 0; padding: 14px 18px 16px; border-radius: 16px 0 0 0; background: #0C0D10; border: 1px solid rgba(255, 255, 255, .1); border-right: 0; border-bottom: 0; box-shadow: 0 24px 40px -28px rgba(0, 0, 0, .9); }
.ob-agent__head { display: flex; align-items: center; gap: 4px; margin: 0; font-size: 12.5px; line-height: 16px; color: rgba(255, 255, 255, .45); }
.ob-agent__head b { font-weight: 600; color: rgba(255, 255, 255, .82); }
.ob-agent__files { margin-left: auto; padding: 2px 7px; border-radius: 5px; background: rgba(255, 255, 255, .06); font: 500 11px/16px var(--mono); color: rgba(255, 255, 255, .6); }
.ob-agent__ln { display: flex; align-items: baseline; gap: 12px; margin: 9px 0 0; font: 500 12.5px/19px var(--mono); color: rgba(226, 229, 236, .82); }
.ob-agent__ln b { flex: none; width: 42px; font-weight: 500; color: rgba(var(--accent-rgb), .9); }
.ob-agent__ln--ok { color: #fff; }

/* Заявка в Telegram: сообщение бота на бумаге — то, что прилетает с формы сайта */
.ob-tgmsg { position: relative; z-index: 2; margin: auto -28px -28px 0; display: grid; gap: 3px; padding: 14px 18px 16px; border-radius: 16px 0 0 0; background: linear-gradient(160deg, #FEFDF9, #ECE6DB); color: var(--ink); box-shadow: 0 22px 36px -22px rgba(0, 0, 0, .85); }
.ob-tgmsg b { font-size: 14.5px; line-height: 20px; font-weight: 600; letter-spacing: -.01em; }
.ob-tgmsg span { font-size: 13px; line-height: 18px; color: rgba(23, 24, 28, .62); }

/* n8n: узлы и связи — как в редакторе сценариев */
.ob-nodes { position: relative; z-index: 2; margin: auto -28px -28px 0; padding: 20px 18px 22px; display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 0 20px; border-radius: 16px 0 0 0; background: #0C0D10; border: 1px solid rgba(255, 255, 255, .1); border-right: 0; border-bottom: 0; box-shadow: 0 24px 40px -28px rgba(0, 0, 0, .9); }
.ob-node { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); font-size: 12px; line-height: 16px; color: rgba(255, 255, 255, .86); white-space: nowrap; }
.ob-node img { width: 15px; height: 15px; }
.ob-node--brain { border-color: rgba(var(--accent-rgb), .5); background: rgba(var(--accent-rgb), .12); color: #fff; font-weight: 600; }
.ob-node--brain::before, .ob-node--brain::after { content: ""; position: absolute; top: 50%; width: 20px; height: 1.5px; background: rgba(var(--accent-rgb), .45); }
.ob-node--brain::before { right: 100%; }
.ob-node--brain::after { left: 100%; }
.ob-nodes__outs { position: relative; display: grid; gap: 7px; justify-items: start; }
.ob-nodes__outs::before { content: ""; position: absolute; left: -10px; top: 16px; bottom: 16px; width: 1.5px; background: rgba(var(--accent-rgb), .45); }
.ob-node--out::before { content: ""; position: absolute; right: 100%; top: 50%; width: 10px; height: 1.5px; background: rgba(var(--accent-rgb), .45); }

/* ================================================================
   Нейросети: программа — четыре модуля дорожкой
   ================================================================ */
.pga { margin-top: 64px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.55fr) minmax(0, .85fr); gap: 16px; align-items: stretch; }
.pga-mod { position: relative; overflow: hidden; display: flex; flex-direction: column; min-width: 0; padding: 22px 22px 26px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .08); background: linear-gradient(165deg, #17181C, #121316); box-shadow: 0 20px 40px -28px rgba(0, 0, 0, .8); }
.pga-mod--main { border-color: rgba(var(--accent-rgb), .3); background: radial-gradient(70% 60% at 100% 0%, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), 0) 68%), linear-gradient(165deg, #1A1826, #121216); }
/* линия дорожки: точка на карточке и отрезок до следующей */
.pga-mod::before { content: ""; position: absolute; left: 22px; top: 18px; width: 10px; height: 10px; border-radius: 50%; background: rgb(var(--accent-rgb)); box-shadow: 0 0 12px rgba(var(--accent-rgb), .6); }
.pga-mod::after { content: ""; position: absolute; left: 36px; right: 0; top: 22px; height: 2px; background: linear-gradient(90deg, rgba(var(--accent-rgb), .45), rgba(var(--accent-rgb), .12)); }
.pga-mod:last-child::after { right: 22px; }
.pga-mod__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 26px; }
.pga-mod__step { font-size: 12px; line-height: 16px; font-weight: 600; color: rgba(var(--accent-rgb), .95); }
.pga-mod__count { font: 500 12px/16px var(--mono); color: rgba(255, 255, 255, .55); white-space: nowrap; }
.pga-mod__title { margin-top: 8px; font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -.015em; }
.pga-mod--main .pga-mod__title { font-size: 26px; line-height: 32px; }
.pga-mod__list { margin-top: 14px; padding-bottom: 52px; display: grid; gap: 8px; font-size: 14px; line-height: 20px; color: var(--muted-2); }
.pga-mod__list li:last-child { padding-right: 76px; }
.pga-mod__list li { position: relative; padding-left: 16px; text-wrap: pretty; }
.pga-mod__list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .35); }
.pga-mod__art { position: absolute; right: -30px; bottom: -34px; width: 124px; height: auto; pointer-events: none; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .6)); transition: transform .6s var(--spring); }
.pga-mod--main .pga-mod__art { right: -26px; bottom: -30px; width: 132px; }
.pga-mod--main .pga-mod__art--second { right: 104px; bottom: -34px; width: 88px; opacity: .92; }
.pga-mod:hover .pga-mod__art { transform: translateY(-6px) rotate(-4deg); }
.pga-mod__list + .pga-mod__art { margin-top: auto; }
.pga__final { margin-top: 20px; padding: 16px 20px; border-radius: 16px; border: 1px dashed rgba(var(--accent-rgb), .34); background: rgba(var(--accent-rgb), .05); font-size: 15px; line-height: 22px; color: rgba(255, 255, 255, .82); }

/* ================================================================
   Нейросети: «кому подойдёт» диалогом
   ================================================================ */
.who.who--chat { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.chat-card { display: flex; flex-direction: column; padding: 24px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, .08); background: linear-gradient(165deg, #17181C, #121316); }
.chat-card__who { font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -.015em; }
.chat-bubble { position: relative; margin-top: 16px; padding: 14px 16px; font-size: 15px; line-height: 22px; text-wrap: pretty; }
.chat-bubble--you { align-self: flex-end; max-width: 92%; border-radius: 16px 16px 4px 16px; background: linear-gradient(160deg, #FEFDF9, #ECE6DB); color: var(--ink); box-shadow: 0 14px 26px -18px rgba(0, 0, 0, .8); }
.chat-bubble--ai { align-self: flex-start; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; max-width: 100%; border-radius: 16px 16px 16px 4px; border: 1px solid rgba(var(--accent-rgb), .28); background: rgba(var(--accent-rgb), .08); color: rgba(255, 255, 255, .92); }
.chat-bubble__ico { font-size: 15px; line-height: 22px; color: rgb(var(--accent-rgb)); }
.chat-card__cta { align-self: flex-start; margin-top: auto; padding-top: 20px; font-size: 14px; line-height: 18px; font-weight: 600; letter-spacing: -.007em; color: #fff; text-decoration: none; }
.chat-card__cta:hover { text-decoration: underline; }
.who-note { margin-top: 20px; padding: 16px 20px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); font-size: 15px; line-height: 22px; color: var(--muted-2); text-wrap: pretty; }

/* ================================================================

/* ================================================================
/* ================================================================
   «Не подойдёт, если…» — графитовая карточка маршрута (WordPress: .who-not--row)
   ================================================================ */
.who-not { display: flex; flex-direction: column; padding: 28px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, .1); background: radial-gradient(80% 70% at 100% 0%, rgba(var(--accent-rgb), .08), rgba(var(--accent-rgb), 0) 66%), var(--graphite); }
.who-not__eyebrow { font-size: 13px; line-height: 18px; font-weight: 500; color: rgba(255, 255, 255, .5); }
.who-not__title { margin-top: 4px; font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -.02em; }
.who-not__text { margin-top: 14px; font-size: 15px; line-height: 22px; color: var(--muted-2); text-wrap: pretty; }
/* горизонтальная версия: широкая плашка под карточками */
.who-not--row { margin-top: 20px; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr) auto; align-items: center; gap: 12px 32px; }
.who-not--row .who-not__side { display: grid; gap: 2px; }
.who-not--row .who-not__title { margin-top: 0; font-size: 22px; line-height: 28px; }
.who-not--row .who-not__text { margin-top: 0; }
.who-not--row .who-not__link { margin-top: 0; padding-top: 0; }
.who-not__link { margin-top: auto; padding-top: 20px; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; line-height: 20px; font-weight: 600; color: rgb(var(--accent-rgb)); text-decoration: none; }
.who-not__link:hover { text-decoration: underline; }

/* ================================================================
   Флагман: программа — дорога курса и модули-аккордеон
   ================================================================ */
.pgf { margin-top: 64px; padding: 32px; border-radius: 28px; border: 1px solid rgba(255, 255, 255, .08); background: radial-gradient(50% 60% at 100% 0%, rgba(var(--accent-2-rgb), .1), rgba(var(--accent-2-rgb), 0) 70%), radial-gradient(40% 50% at 0% 100%, rgba(var(--accent-rgb), .05), rgba(var(--accent-rgb), 0) 70%), var(--graphite); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .8); }

/* дорога: длина отрезка = число уроков модуля; над концом модуля — его практическая работа, над «Стартом на фрилансе» — Kwork */
.pgf__road { position: relative; }
.pgf__legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 20px; font-size: 13px; line-height: 18px; color: rgba(255, 255, 255, .56); }
.pgf__key::before { content: ""; display: inline-block; width: 14px; height: 10px; margin-right: 8px; border-radius: 3px; vertical-align: -1px; }
.pgf__key--diploma::before { background: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.pgf__key--orders::before { width: 10px; border-radius: 50%; background: var(--coral); }
.pgf__bar { display: flex; gap: 4px; margin-top: 46px; }
.pgf__seg { position: relative; flex: var(--n) 1 0; min-width: 8px; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .1); transition: background .45s var(--ease), box-shadow .45s var(--ease); }
.pgf__seg.is-on { background: rgba(var(--accent-rgb), .55); }
.pgf__seg.is-current { background: rgb(var(--accent-rgb)); box-shadow: 0 0 16px rgba(var(--accent-rgb), .45); }
.pgf__seg b { position: absolute; left: 0; top: 18px; font: 500 11px/14px var(--mono); color: rgba(255, 255, 255, .42); transition: color .3s; }
.pgf__seg.is-on b { color: rgba(255, 255, 255, .82); }
.pgf__pin { position: absolute; right: 0; bottom: 18px; display: block; }
.pgf__pin::after { content: ""; position: absolute; right: 8px; top: 100%; width: 1.5px; height: 12px; background: rgba(255, 255, 255, .3); }
.pgf__pin img { display: block; width: 52px; height: 34px; object-fit: cover; object-position: 50% 0; border-radius: 6px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .7), 0 10px 18px -6px rgba(0, 0, 0, .7); }
.pgf__pin--orders { right: auto; left: -4px; }
.pgf__pin--orders::after { left: 12px; right: auto; }
.pgf__pin--orders img { width: 30px; height: 30px; border-radius: 50%; object-fit: contain; background: #fff; padding: 4px; box-shadow: 0 0 0 2px var(--coral), 0 10px 18px -6px rgba(0, 0, 0, .7); }
/* превью работ на дороге плавно увеличивается при наведении; растёт вверх-в сторону от своего края, поднимается над соседями (reduced-motion — в конце файла) */
.pgf__pin img { transform-origin: 100% 100%; transition: transform .4s var(--spring), box-shadow .4s var(--ease); }
.pgf__pin--orders img { transform-origin: 0% 100%; }
.pgf__seg:hover { z-index: 4; }
.pgf__seg:hover .pgf__pin--diploma img { transform: scale(2.15); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9), 0 20px 36px -10px rgba(0, 0, 0, .82); }
.pgf__seg:hover .pgf__pin--orders img { transform: scale(1.9); }

.pgf__cols { margin-top: 44px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; align-items: start; }
.pgf__col { display: grid; gap: 10px; min-width: 0; }

/* модуль — полоса из стопки модулей главной (.module): графит → фиолетовый */
.pg-mod { min-width: 0; border-radius: 16px; border: 1px solid rgba(178, 166, 255, .2); background: linear-gradient(90deg, rgba(20, 20, 26, .98) 30%, rgba(62, 50, 110, .62)); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .45), inset 0 1px 1px rgba(255, 255, 255, .06); transition: border-color .35s var(--ease), background .35s var(--ease); }
.pg-mod:hover { border-color: rgba(198, 188, 255, .36); }
.pg-mod.is-open { border-color: rgba(var(--accent-rgb), .34); background: linear-gradient(120deg, rgba(22, 22, 28, .98) 40%, rgba(70, 56, 124, .5)); }
.pg-mod__h { font: inherit; }
.pg-mod__btn { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-rows: auto auto; align-items: center; column-gap: 14px; padding: 13px 14px 13px 20px; border: 0; border-radius: 15px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pg-mod__btn:focus-visible { outline: 2px solid rgb(var(--accent-rgb)); outline-offset: -2px; }
.pg-mod__label { grid-column: 1; font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .01em; color: #9D86FF; }
.pg-mod__title { grid-column: 1; margin-top: 3px; font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -.012em; }
.pg-mod__count { grid-column: 2; grid-row: 1 / 3; padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); font: 500 12px/14px var(--mono); color: rgba(255, 255, 255, .78); white-space: nowrap; }
.pg-mod--diploma .pg-mod__count, .pg-mod--orders .pg-mod__count { padding-left: 24px; position: relative; }
.pg-mod--diploma .pg-mod__count::before, .pg-mod--orders .pg-mod__count::before { content: ""; position: absolute; left: 10px; top: 50%; width: 8px; height: 6px; margin-top: -3px; border-radius: 2px; background: #fff; }
.pg-mod--orders .pg-mod__count::before { width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--coral); }
.pg-mod__sign { grid-column: 3; grid-row: 1 / 3; position: relative; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .04); transition: background .3s, border-color .3s; }
.pg-mod__sign::before, .pg-mod__sign::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.8px; margin: -.9px 0 0 -6px; border-radius: 1px; background: #fff; transition: transform .35s var(--ease), background .3s; }
.pg-mod__sign::after { transform: rotate(90deg); }
.pg-mod__btn:hover .pg-mod__sign { border-color: rgba(255, 255, 255, .36); }
.pg-mod.is-open .pg-mod__sign { background: rgb(var(--accent-rgb)); border-color: rgb(var(--accent-rgb)); }
.pg-mod.is-open .pg-mod__sign::before, .pg-mod.is-open .pg-mod__sign::after { background: var(--ink); }
.pg-mod.is-open .pg-mod__sign::after { transform: rotate(0); }

/* панель: высота анимируется через grid-rows; закрытая — вне табуляции (visibility) */
.pg-mod__panel, .pg-acc__panel { display: grid; grid-template-rows: 1fr; }
.is-ready .pg-mod__panel, .is-ready .pg-acc__panel { grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.pg-mod__inner, .pg-acc__inner { min-height: 0; overflow: hidden; }
.is-ready .pg-mod__inner, .is-ready .pg-acc__inner { visibility: hidden; transition: visibility 0s .45s; }
.is-ready .is-open > .pg-mod__panel, .is-ready .is-open > .pg-acc__panel { grid-template-rows: 1fr; }
.is-ready .is-open > .pg-mod__panel > .pg-mod__inner, .is-ready .is-open > .pg-acc__panel > .pg-acc__inner { visibility: visible; transition-delay: 0s; }

.pg-mod__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 2px 20px 20px; }
.pg-mod__body--result { grid-template-columns: minmax(0, 1fr) minmax(0, 176px); grid-template-rows: auto 1fr; column-gap: 20px; }
.pg-mod__body--result .pg-result { grid-column: 2; grid-row: 1 / 3; align-self: start; }
.pg-mod__lead { font-size: 14px; line-height: 21px; color: rgba(255, 255, 255, .72); text-wrap: pretty; }
.pg-mod__list { display: grid; gap: 6px; font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, .9); }
.pg-mod__list li { position: relative; padding-left: 18px; }
.pg-mod__list li::before { content: ""; position: absolute; left: 1px; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--accent-rgb)); }
.pg-result { margin: 4px 0 0; }
.pg-result__shot { display: block; overflow: hidden; border-radius: 10px; background: #0F1114; box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 16px 28px -14px rgba(0, 0, 0, .8); transform: rotate(2deg); transition: transform .5s var(--spring); }
.pg-mod.is-open .pg-result__shot { transform: rotate(0); }
.pg-result__shot img { display: block; width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover; object-position: 50% 0; }
.pg-result figcaption { margin-top: 10px; display: grid; font-size: 12px; line-height: 16px; color: rgba(255, 255, 255, .56); }
.pg-result figcaption b { font-size: 14px; line-height: 18px; font-weight: 600; color: #fff; }

/* финал в правой колонке — итог и PDF */
.pgf__final { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; padding: 18px 20px; border-radius: 16px; border: 1px dashed rgba(var(--accent-rgb), .34); background: rgba(var(--accent-rgb), .04); }
.pgf__final-text { flex: 1 1 260px; font-size: 15px; line-height: 22px; color: rgba(255, 255, 255, .78); }
.pgf__final-text b { font-weight: 600; color: #fff; }
.pgf__pdf { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05); font-size: 14px; font-weight: 600; color: #fff; text-decoration: none; white-space: nowrap; transition: border-color .25s, background .25s; }
.pgf__pdf:hover { border-color: rgba(var(--accent-rgb), .6); background: rgba(var(--accent-rgb), .08); }
.pgf__pdf svg { color: rgb(var(--accent-rgb)); }

/* ================================================================
   Кому подойдёт: боль → что даст курс
   ================================================================ */
.who { margin-top: 64px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.who-card { position: relative; min-width: 0; display: flex; flex-direction: column; padding: 28px 28px 24px; border-radius: 24px; color: var(--ink); background: linear-gradient(112deg, var(--paper-1) 2%, var(--paper-2) 55%, var(--paper-3) 96%); box-shadow: var(--shadow-tile); }
.who-card__title { font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -.018em; }
/* боль — как реплика: серым, в кавычках-ёлочках из шрифта */
.who-card__pain { position: relative; margin-top: 14px; padding-left: 26px; font-size: 15px; line-height: 22px; color: rgba(23, 24, 28, .62); text-wrap: pretty; }
.who-card__pain::before { content: "«"; position: absolute; left: 0; top: -6px; font-size: 30px; line-height: 1; font-weight: 700; color: rgba(23, 24, 28, .22); }
/* что даст курс — плотнее, с меткой акцента */
.who-card__gain { position: relative; margin-top: 18px; padding: 16px 16px 16px 44px; border-radius: 16px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(23, 24, 28, .07); font-size: 15px; line-height: 22px; font-weight: 500; color: var(--ink); text-wrap: pretty; }
.who-card__gain::before { content: ""; position: absolute; left: 14px; top: 17px; width: 20px; height: 20px; border-radius: 50%; background: var(--graphite) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.3 8.6 13.3 14.5 7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .55); }
/* выпускник, который начинал похоже — графитовый билетик внизу бумажной карточки */
.who-proof { margin-top: auto; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px 12px 12px; border-radius: 16px; background: var(--graphite); color: #fff; text-decoration: none; box-shadow: 0 14px 26px -16px rgba(23, 24, 28, .8); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.who-card__gain { margin-bottom: 20px; }
.who-proof:hover { transform: translateY(-2px); box-shadow: 0 18px 30px -16px rgba(23, 24, 28, .9); }
.who-proof:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.who-proof__av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .8); }
.who-proof__body { display: grid; gap: 2px; min-width: 0; }
.who-proof__body b { font-size: 13px; line-height: 17px; font-weight: 600; color: rgba(255, 255, 255, .64); }
.who-proof__body span { font-size: 14px; line-height: 19px; color: #fff; text-wrap: pretty; }
.who-proof__go { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .1); font-size: 14px; transition: transform .3s var(--spring); }
.who-proof:hover .who-proof__go { transform: translateX(3px); }
.who-card__cta { align-self: flex-start; margin-top: 16px; font-size: 14px; line-height: 18px; font-weight: 600; letter-spacing: -.007em; color: inherit; text-decoration: none; }
.who-card__cta:hover { text-decoration: underline; }
.who-card__cta:focus-visible { outline-color: var(--ink); }

/* ================================================================
   Вторичные кнопки блоков «Кому подойдёт» — единый стиль для флагмана/JS/WP.
   Primary на экране один (липкая лаймовая): здесь графит или акцентный контур.
   ================================================================ */
.who-btn { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 10px 0 20px; border-radius: 13px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, border-color .25s; }
.who-btn__ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex: none; font-size: 14px; line-height: 1; transition: transform .3s var(--spring); }
.who-btn:hover .who-btn__ico { transform: translateX(3px); }
.who-btn:active { transform: translateY(1px); }
.who-btn:focus-visible { outline: 2px solid rgb(var(--accent-rgb)); outline-offset: 3px; }
/* графитовая — на светлых (бумажных) карточках */
.who-btn--ink { background: var(--graphite); color: #fff; box-shadow: 0 14px 26px -16px rgba(23, 24, 28, .85); }
.who-btn--ink .who-btn__ico { background: rgba(255, 255, 255, .12); color: #fff; }
.who-btn--ink:hover { transform: translateY(-2px); box-shadow: 0 18px 30px -16px rgba(23, 24, 28, .95); }
/* акцентная контурная — на тёмных карточках и для кросс-перехода на флагман */
.who-btn--accent { border: 1px solid rgba(var(--accent-rgb), .5); background: rgba(var(--accent-rgb), .1); color: #fff; }
.who-btn--accent .who-btn__ico { background: rgb(var(--accent-rgb)); color: var(--ink); }
.who-btn--accent:hover { border-color: rgba(var(--accent-rgb), .85); background: rgba(var(--accent-rgb), .16); transform: translateY(-2px); }

/* ================================================================
   Тест-драйв (.who--fit .who--td; на флагмане с 15.09 — персонажи .fitp ниже): три портрета ученика на бумажных карточках .who-card: типаж → реплика в кавычках → что даст курс →
   графитовый билетик выпускника .who-proof (ведёт в историю на results). На трёх колонках ряды карточек выровнены subgrid-ом —
   заголовок, реплика, ответ и выпускник стоят на одной линии. Закрывает блок графитовая полоса: гарантия 100% + вторичная кнопка.
   ================================================================ */
@media (min-width: 1280px) {
  .who--fit { grid-template-rows: auto auto auto auto; }
  @supports (grid-template-rows: subgrid) { .who--fit .who-card { display: grid; grid-template-rows: subgrid; grid-row: span 4; } .who--fit .who-proof { margin-top: 0; align-self: stretch; } }
}
.who--fit .who-card__title { text-wrap: balance; }
/* закрытие блока: гарантия (только флагман) + вторичная кнопка — графитовая полоса той же ширины, что и ряд карточек */
.fit__foot { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; padding: 22px 28px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, .08); background: var(--graphite); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .8); }
.fit__guarantee { position: relative; flex: 1 1 340px; padding-left: 44px; font-size: 16px; line-height: 24px; color: rgba(255, 255, 255, .84); text-wrap: pretty; }
.fit__guarantee b { font-weight: 600; color: #fff; }
.fit__guarantee::before { content: ""; position: absolute; left: 0; top: 50%; width: 30px; height: 30px; border-radius: 50%; transform: translateY(-50%); background: rgb(var(--accent-rgb)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.3 8.6 13.3 14.5 7' fill='none' stroke='%23131417' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .18); }
/* на широком экране (владелец смотрит ~2000 px) карточки ~550 px — чуть крупнее кегль, чтобы текст не терялся в бумаге */
@media (min-width: 1800px) {
  .who--fit .who-card { padding: 32px 32px 28px; }
  .who--fit .who-card__title { font-size: 26px; line-height: 32px; }
  .who--fit .who-card__pain, .who--fit .who-card__gain { font-size: 16px; line-height: 24px; }
  .who--fit .who-card__pain::before { top: -5px; }
  .who--fit .who-card__gain::before { top: 19px; }
}

/* ================================================================
   Флагман: «Кому подойдёт» — три персонажа (.fitp). Карточка = выпускник, который пришёл ровно из этой ситуации: типаж → его реплика-«боль» →
   ответ курса с галочкой → графитовый пузырь с реальными словами выпускника (js/story-details.js, дословно) → голосовое из его истории
   (тот же .player, что в слайдере историй; инициализация — js/course-blocks.js, «один играющий на страницу» — внутри плеера в js/main.js)
   → фото до края карточки, «было → стало» из js/stories.js и ссылка на историю. Главное в карточке — лицо и цитата, ответ курса второстепенен:
   текст с галочкой над тонкой линией, без плашки. 3D-стикеров «прошлой работы» нет (ревью 15.09: сгенерированные иконки ложились на лица
   и читались чужеродно рядом с настоящими фото). У 1-й и 3-й карточек фото слева, у 2-й (.fitp-card--flip) — справа, чтобы ряд не читался
   тремя одинаковыми плитками. Доказательство прижато к низу: фото трёх карточек стоят на одной линии. --ph — ширина фото.
   ================================================================ */
.fitp { --ph: 200px; margin-top: 64px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.fitp-card { position: relative; min-width: 0; display: flex; flex-direction: column; padding: 28px 28px 0; border-radius: 24px; overflow: hidden; color: var(--ink); background: linear-gradient(112deg, var(--paper-1) 2%, var(--paper-2) 55%, var(--paper-3) 96%); box-shadow: var(--shadow-tile); }
.fitp-card__title { font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -.018em; text-wrap: balance; }
.fitp-card__pain { position: relative; margin-top: 12px; padding-left: 30px; font-size: 15px; line-height: 22px; color: rgba(23, 24, 28, .62); text-wrap: pretty; }
.fitp-card__pain::before { content: "«"; position: absolute; left: 0; top: -6px; font-size: 30px; line-height: 1; font-weight: 700; color: rgba(23, 24, 28, .22); }
/* ответ курса — второстепенный: текст с галочкой над тонкой линией, без белой плашки (плашка + пузырь + плеер + пилюля были четырьмя коробками в одной карточке) */
.fitp-card__gain { position: relative; margin-top: 16px; padding: 14px 0 0 30px; border-top: 1px solid rgba(23, 24, 28, .1); font-size: 15px; line-height: 22px; font-weight: 500; color: var(--ink); text-wrap: pretty; }
.fitp-card__gain::before { content: ""; position: absolute; left: 0; top: 16px; width: 20px; height: 20px; border-radius: 50%; background: var(--graphite) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.3 8.6 13.3 14.5 7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .55); }
.fitp-card__proof { margin-top: auto; padding-top: 22px; display: flex; flex-direction: column; }
/* пузырь выпускника: графит на бумаге, хвостик смотрит вниз — к его фото */
.fitp-card__say { position: relative; margin: 0; padding: 16px 18px; border-radius: 18px 18px 18px 6px; background: var(--graphite); color: #fff; box-shadow: 0 14px 26px -16px rgba(23, 24, 28, .8); }
.fitp-card__say::after { content: ""; position: absolute; left: 14px; bottom: -9px; width: 16px; height: 10px; background: var(--graphite); clip-path: polygon(0 0, 100% 0, 0 100%); }
.fitp-card__say p { margin: 0; font-size: 15.5px; line-height: 23px; font-weight: 500; text-wrap: pretty; }
.fitp-card__hl { font-weight: inherit; color: rgb(var(--accent-2-rgb)); }
/* голосовое на бумаге: тот же .player (main.css), но графитовая кнопка, чернильные полосы, сыгранное — фиолетовым */
.fitp-card .player { margin: 12px 0 0; height: 46px; padding: 3px; gap: 8px; border-color: rgba(23, 24, 28, .12); background: rgba(23, 24, 28, .05); -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--ink); }
.fitp-card .player__btn { width: 40px; height: 40px; background: var(--graphite); color: #fff; }
.fitp-card .player__btn:focus-visible { outline-color: var(--ink); } /* лаймовый глобальный фокус на бумаге не виден */
.fitp-card .player__btn svg { width: 18px; height: 18px; }
.fitp-card .player__wave { gap: 0; justify-content: space-between; } /* 38 полос растягиваются на ширину волны — ничего не режется, прогресс доходит до края */
.fitp-card .player__bar { width: 3px; background: rgba(23, 24, 28, .26); }
.fitp-card .player__bar.is-played { background: var(--violet-deep); }
.fitp-card .player__time { margin: 0 14px 0 4px; font-family: var(--mono); font-size: 13px; color: rgba(23, 24, 28, .7); }
/* фото до левого и нижнего края, рядом — «было → стало», имя и ссылка; вся строка — одна ссылка на историю */
.fitp-card__who { position: relative; margin: 18px -28px 0; display: grid; grid-template-columns: var(--ph) minmax(0, 1fr); align-items: end; column-gap: 20px; color: inherit; text-decoration: none; }
.fitp-card__photo { display: block; width: 100%; height: auto; aspect-ratio: 8 / 9; object-fit: cover; border-radius: 0 20px 0 0; background: #120D0F; }
.fitp-card__meta { display: grid; gap: 7px; min-width: 0; padding: 0 28px 24px 12px; }
.fitp-card__delta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; justify-self: start; padding: 7px 12px; border-radius: 14px; background: var(--graphite); color: #fff; font-family: var(--mono); font-size: 13px; line-height: 18px; font-variant-numeric: tabular-nums; }
.fitp-card__was { color: rgba(255, 255, 255, .55); }
.fitp-card__now { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } /* стрелка не отрывается от «стало»: в узкой колонке переносится целиком «→ 158 000 ₽/мес» */
.fitp-card__arrow { color: rgb(var(--accent-2-rgb)); }
.fitp-card__delta b { font-weight: 500; }
.fitp-card__name { font-size: 13.5px; line-height: 18px; color: rgba(23, 24, 28, .62); text-wrap: pretty; }
.fitp-card__go { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -.007em; }
.fitp-card__go-arrow { display: inline-block; }
.fitp-card__who:hover .fitp-card__go { text-decoration: underline; }
.fitp-card__who:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; border-radius: 14px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .fitp-card__go-arrow { transition: transform .5s var(--spring); }
  .fitp-card__who:hover .fitp-card__go-arrow { transform: translateX(3px); }
}
/* зеркальная карточка: фото справа, хвостик пузыря — тоже */
.fitp-card--flip .fitp-card__who { grid-template-columns: minmax(0, 1fr) var(--ph); }
.fitp-card--flip .fitp-card__photo { order: 2; border-radius: 20px 0 0 0; }
.fitp-card--flip .fitp-card__meta { order: 1; padding: 0 12px 24px 28px; }
.fitp-card--flip .fitp-card__say { border-radius: 18px 18px 6px 18px; }
.fitp-card--flip .fitp-card__say::after { left: auto; right: 14px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
/* широкий экран (владелец смотрит ~2000 px): карточки ~550 px — фото и кегль чуть крупнее */
@media (min-width: 1800px) {
  .fitp { --ph: 224px; }
  .fitp-card { padding: 32px 32px 0; }
  .fitp-card__title { font-size: 26px; line-height: 32px; }
  .fitp-card__pain, .fitp-card__gain { font-size: 16px; line-height: 24px; }
  .fitp-card__pain::before { top: -5px; }
  .fitp-card__gain::before { top: 17px; }
  .fitp-card__say p { font-size: 16.5px; line-height: 25px; }
  .fitp-card .fitp-card__who { margin: 20px -32px 0; }
  .fitp-card .fitp-card__meta { padding: 0 32px 28px 14px; }
  .fitp-card--flip .fitp-card__meta { padding: 0 14px 28px 32px; }
}
/* три колонки по ~390–450 px (1280–1439): фото уже */
@media (min-width: 1280px) and (max-width: 1439px) {
  .fitp { --ph: 160px; }
  .fitp-card__say p { font-size: 15px; line-height: 22px; }
  .fitp-card__delta { font-size: 12.5px; }
}
/* планшет (≤1279): одна колонка; карточка — сетка: слева типаж и ответ, справа пузырь и голосовое, внизу на всю ширину — фото до левого края
   и строкой рядом «было → стало», имя, ссылка (раньше фото стояло справа под пузырём, а под коротким левым столбцом пустовала четверть карточки) */
@media (max-width: 1279px) {
  .fitp { --ph: 190px; grid-template-columns: minmax(0, 1fr); }
  .fitp .fitp-card { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); column-gap: 36px; align-items: start; }
  .fitp .fitp-card__proof { display: contents; }
  .fitp .fitp-card__say { border-radius: 18px 18px 18px 6px; }
  .fitp .fitp-card__say::after { left: 14px; right: auto; clip-path: polygon(0 0, 100% 0, 0 100%); }
  .fitp .fitp-card__who { grid-column: 1 / -1; margin: 24px -28px 0; grid-template-columns: var(--ph) minmax(0, 1fr); align-items: center; }
  .fitp .fitp-card__photo { order: 1; border-radius: 0 20px 0 0; }
  .fitp .fitp-card__meta { order: 2; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 22px; padding: 0 28px 0 8px; } /* две строки у всех трёх карточек: пилюля + имя, под ними ссылка */
  .fitp .fitp-card__go { grid-column: 1 / -1; }
}
/* телефон: всё столбиком, фото слева 150 px (у всех карточек) */
@media (max-width: 767px) {
  .fitp { --ph: 150px; margin-top: 32px; gap: 12px; }
  .fitp .fitp-card { display: flex; flex-direction: column; padding: 22px 20px 0; border-radius: 20px; }
  .fitp .fitp-card__title { font-size: 21px; line-height: 27px; }
  .fitp .fitp-card__pain { margin-top: 10px; font-size: 14px; line-height: 21px; }
  .fitp .fitp-card__gain { margin-top: 14px; font-size: 14px; line-height: 21px; }
  .fitp .fitp-card__gain::before { top: 15px; }
  .fitp .fitp-card__proof { display: flex; margin-top: 0; padding-top: 18px; }
  .fitp .fitp-card__say { padding: 14px 16px; border-radius: 16px 16px 16px 5px; }
  .fitp .fitp-card__say::after { left: 12px; }
  .fitp .fitp-card__say p { font-size: 15px; line-height: 22px; }
  .fitp .fitp-card .player { margin-top: 10px; height: 44px; }
  .fitp .fitp-card .player__btn { width: 38px; height: 38px; }
  .fitp .fitp-card .player__bar { width: 2.6px; }
  .fitp .fitp-card__who { margin: 16px -20px 0; column-gap: 14px; align-items: end; }
  .fitp .fitp-card__photo { border-radius: 0 16px 0 0; }
  .fitp .fitp-card__meta { grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 6px; padding: 0 20px 20px 10px; }
  .fitp .fitp-card__go { grid-column: auto; }
  .fitp .fitp-card__delta { font-size: 12.5px; padding: 6px 10px; }
  .fitp .fitp-card__name { font-size: 13px; line-height: 17px; }
  .fitp .fitp-card__go { font-size: 14px; line-height: 18px; }
}

/* ================================================================
/* кнопка в горизонтальной карточке «не подойдёт» (WordPress) */
.who-not--row .who-btn { align-self: center; justify-self: start; margin-top: 0; }

/* ================================================================
   WordPress: «Кому подойдёт» карточками-ролями в стиле админки (WP-blue, слаг роли, «подходит»)
   ================================================================ */
.wpfit { margin-top: 64px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.wpfit__card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 18px; border: 1px solid #DCDCDE; background: #F0F0F1; color: #1D2327; box-shadow: 0 24px 44px -30px rgba(0, 0, 0, .55); }
.wpfit__head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: #1D2327; color: #fff; }
.wpfit__role { font-size: 16px; line-height: 20px; font-weight: 700; letter-spacing: -.01em; }
.wpfit__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 18px; }
.wpfit__pain { position: relative; padding-left: 24px; font-size: 15px; line-height: 22px; color: rgba(29, 35, 39, .68); text-wrap: pretty; }
.wpfit__pain::before { content: "«"; position: absolute; left: 0; top: -6px; font-size: 30px; line-height: 1; font-weight: 700; color: rgba(29, 35, 39, .24); }
.wpfit__gain { position: relative; margin-top: 16px; padding: 14px 14px 14px 42px; border-radius: 12px; background: #fff; border: 1px solid #DCDCDE; font-size: 15px; line-height: 22px; font-weight: 500; color: #1D2327; text-wrap: pretty; }
.wpfit__gain::before { content: ""; position: absolute; left: 13px; top: 15px; width: 20px; height: 20px; border-radius: 50%; background: var(--cobalt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.3 8.6 13.3 14.5 7' fill='none' stroke='%23131417' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.wpfit__card .who-btn { align-self: flex-start; margin-top: 18px; }
.wpfit__card .who-btn--ink { background: #2271B1; box-shadow: 0 14px 26px -16px rgba(34, 113, 177, .8); }
.wpfit__card .who-btn--ink:hover { background: #185a8f; }

/* ================================================================
   Адаптив
   ================================================================ */
@media (max-width: 1279px) {
  .ob--flag { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .ob--flag .ob-card--tall { grid-row: auto; grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: 28px; }
  .ob--flag .ob-card--tall .ob-card__copy { align-self: center; }
  .ob--flag .ob-card--tall .ob-inspect { margin: 0 -28px -28px 0; }
  .ob--flag .ob-card--tall .ob-inspect__cap { margin-left: 0; }
  .ob--flag .ob-card--tall .ob-inspect__win { width: 112%; margin-left: 0; }
  .ob--flag .ob-card--wide { grid-column: 1 / -1; min-height: 304px; }
  .ob--flag .ob-card--wp, .ob--flag .ob-card--orders { min-height: 300px; }
  .pgf__seg b { display: none; }
  .ob--js { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(268px, auto); }
  .ob--wp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ob--wp .ob-card--tall { grid-row: auto; grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); column-gap: 28px; }
  .ob--wp .ob-card--tall .ob-shop { margin: 0 -28px -28px 0; border-radius: 10px 0 0 0; align-self: end; }
  .pgw__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .pgw__row span:nth-child(3) { grid-column: 2; }
  .pgw__row--head span:nth-child(3) { display: none; }
  .who-not--row { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pga { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pga-mod:nth-child(2)::after { right: 22px; }
  .ob--ai { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(300px, auto); }
  .ob--ai .ob-card--wide { grid-column: 1 / -1; min-height: 340px; }
  .who { grid-template-columns: minmax(0, 1fr); }
  .who.who--chat { grid-template-columns: minmax(0, 1fr); }
  .chat-card { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 28px; }
  .chat-card__who { grid-column: 1; }
  .chat-bubble { grid-column: 2; }
  .chat-bubble--you { margin-top: 0; }
  .chat-card__cta { grid-column: 1; grid-row: 3; margin-top: 0; padding-top: 8px; align-self: start; }
  .who-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; column-gap: 32px; }
  .who-card__title, .who-card__pain { grid-column: 1; }
  .who-card__pain { grid-row: 2 / 4; }
  .who-card__cta { grid-column: 1; grid-row: 4; }
  .who-card__gain { grid-column: 2; grid-row: 1 / 3; margin-top: 0; }
  .who-proof, .who-card__gain + .who-proof { grid-column: 2; grid-row: 3 / 5; margin-top: 14px; align-self: end; }
}
@media (max-width: 1023px) {
  .pgf__cols { grid-template-columns: minmax(0, 1fr); }
  .pgf__legend { justify-content: flex-start; }
  .wpfit { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .ob { margin-top: 32px; gap: 12px; }
  .ob-card { padding: 22px 20px; border-radius: 20px; }
  .ob-card__title { font-size: 21px; line-height: 27px; }
  .ob-card__text { margin-top: 8px; font-size: 14px; line-height: 20px; }
  .ob--flag { grid-template-columns: minmax(0, 1fr); }
  .ob--flag .ob-card--tall { display: flex; }
  /* селекторы с .ob--flag .ob-card--tall — иначе их перебивают правила планшета (≤1279) той же тройной специфичности */
  .ob--flag .ob-card--tall .ob-inspect { margin: 20px -20px -22px; }
  .ob--flag .ob-card--tall .ob-inspect__cap { margin: 0 20px 10px; font-size: 12.5px; line-height: 17px; }
  .ob--flag .ob-card--tall .ob-inspect__win { width: 116%; margin-left: -8%; }
  .ob-inspect__tip { display: none; }
  .ob-card--js { display: flex; }
  .ob-card--js .ob-card__copy { max-width: none; }
  .ob-live { min-height: 0; margin: 18px -20px -22px 0; padding: 0 16px 140px; border-radius: 14px 0 0 0; }
  .ob-live .ob-win__bar { margin: 0 -16px 12px; border-radius: 13px 0 0 0; }
  .ob-live .ob-code { font-size: 11px; line-height: 18px; }
  .ob-code__hl { margin: 0 -16px 0 -18px; padding: 0 16px; }
  .ob-live__note { display: none; }
  .ob-modal { left: 14px; bottom: 16px; width: 182px; padding: 13px 13px 12px; }
  .ob-modal__title, .ob-modal__text { white-space: normal; }
  .ob-3d--js { width: 118px; right: -24px; bottom: -32px; }
  .ob--flag .ob-card--wp, .ob--flag .ob-card--orders { min-height: 0; }
  .ob-card--wp .ob-card__copy { padding-right: 76px; }
  .ob-3d--wp { width: 124px; right: -26px; top: -22px; }
  .ob-card--orders { padding-bottom: 158px; }
  .ob-orders3d { left: auto; right: -4px; bottom: -8px; width: 236px; height: 150px; transform: none; }
  .ob-orders3d__t--tg { width: 118px; left: -12px; bottom: 4px; }
  .ob-orders3d__t--profi { width: 118px; right: -16px; bottom: -4px; }
  .ob-orders3d__t--kwork { width: 144px; left: 46px; bottom: 24px; }

  /* JavaScript */
  .ob--js { grid-template-columns: minmax(0, 1fr); }
  .ob--js .ob-card--wide { grid-column: auto; }
  .ob-card--store { display: flex; }
  .ob-app { margin-top: 18px; align-self: stretch; }
  .ob-store { margin: 12px -20px -22px 0; padding: 12px 14px 14px; }
  .ob-store__row { grid-template-columns: 72px minmax(0, 1fr); font-size: 11px; line-height: 28px; }
  .ob-tree { margin: 18px -20px -22px 0; padding: 14px 16px 16px; }
  .ob-form { margin: 18px -20px -22px 0; }
  .ob-card--mods .ob-card__copy { max-width: none; }
  .ob-files { position: relative; inset: auto; margin: 18px -20px -22px 0; grid-template-columns: minmax(0, 130px) minmax(0, 1fr); }
  .ob-code--tree, .ob-code--imports { padding: 12px; font-size: 10.5px; line-height: 19px; }
  .ob-3d--jsmods { left: auto; right: -24px; bottom: -46px; width: 116px; }

  /* WordPress */
  .ob--wp { grid-template-columns: minmax(0, 1fr); }
  .ob--wp .ob-card--wide, .ob--wp .ob-card--tall { grid-column: auto; display: flex; }
  .ob-card--theme .ob-card__copy { padding-right: 92px; }
  .ob-3d--wpc { width: 122px; right: -18px; top: -20px; }
  .ob-theme { margin: 18px -20px -22px 0; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); }
  .ob-code--php { padding: 12px; font-size: 10.5px; line-height: 20px; }
  .ob--wp .ob-card--tall .ob-shop, .ob-shop { margin: 18px -20px -22px; border-radius: 10px 10px 0 0; }
  .ob-shop__grid { gap: 8px; }
  .ob-rep { margin: 18px -20px -22px 0; }
  .ob-host { margin: 18px -20px -22px 0; padding: 16px 18px 18px; }
  .pgw { margin-top: 32px; border-radius: 18px; }
  .pgw__bar { padding: 0 14px; height: 42px; font-size: 13px; }
  .pgw__bar-count { font-size: 11px; }
  .pgw__table { padding: 10px 10px 4px; }
  .pgw__row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px 12px 14px; font-size: 15px; }
  .pgw__row--head { display: none; }
  .pgw__row span:nth-child(2), .pgw__row span:nth-child(3) { grid-column: 1; }
  .pgw__foot { padding: 12px 16px 18px; font-size: 13.5px; line-height: 20px; }

  /* Нейросети */
  .ob--ai { grid-template-columns: minmax(0, 1fr); }
  .ob--ai .ob-card--wide { grid-column: auto; min-height: 0; }
  .ob-card--site .ob-card__copy, .ob-site__cap { max-width: none; }
  .ob-site__cap { margin-top: 14px; }
  .ob-site { position: relative; inset: auto; margin: 16px -20px -22px 0; }
  .ob-site__win { border-radius: 10px 0 0 0; }
  .ob-site__page { padding: 12px 14px 14px; }
  .ob-site__hero { padding: 6px 0 14px; }
  .ob-site__title { font-size: 24px; }
  .ob-card--prompt .ob-card__copy, .ob-card--agent .ob-card__copy, .ob-card--tg .ob-card__copy, .ob-card--n8n .ob-card__copy { margin-bottom: 0; }
  .ob-card--agent .ob-card__copy, .ob-card--tg .ob-card__copy, .ob-card--n8n .ob-card__copy { padding-right: 80px; }
  .ob-3d--cursor { width: 116px; right: -20px; top: -20px; }
  .ob-3d--tg { width: 108px; right: -16px; top: -18px; }
  .ob-3d--orb { width: 132px; right: -30px; top: -32px; }
  .ob-prompt, .ob-agent, .ob-tgmsg, .ob-nodes { margin: 18px -20px -22px 0; }
  .ob-prompt { padding: 10px 16px 12px; }
  .ob-prompt__row { grid-template-columns: 78px minmax(0, 1fr); font-size: 11.5px; line-height: 18px; }
  .ob-agent { padding: 12px 16px 14px; }
  .ob-agent__ln { font-size: 11.5px; line-height: 18px; }
  .ob-tgmsg { padding: 12px 16px 14px; }
  .ob-nodes { padding: 18px 14px 20px; gap: 0 16px; }
  .ob-node { padding: 7px 9px; font-size: 11.5px; }
  .ob-node--brain::before, .ob-node--brain::after { width: 16px; }
  .ob-node--in { grid-column: 1 / -1; justify-self: start; }
  .ob-node--brain::before { content: none; }
  .ob-node--brain::after { width: 14px; }
  .ob-nodes__outs::before { left: -7px; }
  .ob-node--out::before { width: 7px; }

  .pga { margin-top: 32px; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pga-mod { padding: 20px 18px 22px; border-radius: 18px; }
  .pga-mod::after, .pga-mod:nth-child(2)::after { right: 18px; }
  .pga-mod__title, .pga-mod--main .pga-mod__title { font-size: 20px; line-height: 26px; }
  .pga-mod__list { font-size: 14px; }
  .pga-mod__art, .pga-mod--main .pga-mod__art { width: 96px; right: -18px; bottom: -22px; }
  .pga-mod__art--second { display: none; }
  .pga__final { margin-top: 14px; padding: 14px 16px; font-size: 14px; line-height: 21px; }

  .who.who--chat { gap: 12px; }
  .chat-card { display: flex; padding: 20px; border-radius: 20px; }
  .chat-card__who { font-size: 18px; line-height: 24px; }
  .chat-bubble { margin-top: 12px; padding: 12px 14px; font-size: 14px; line-height: 21px; }
  .who-note { margin-top: 14px; padding: 14px 16px; font-size: 14px; line-height: 21px; }

  .who-not { padding: 22px 20px; border-radius: 20px; }
  .who-not__title { font-size: 22px; line-height: 28px; }
  .who-not__text { font-size: 14px; line-height: 21px; }

  /* Флагман — три портрета + полоса гарантии */
  .fit__foot { margin-top: 12px; gap: 14px; padding: 18px 16px 16px; border-radius: 20px; }
  .fit__guarantee { flex-basis: 100%; padding-left: 40px; font-size: 14px; line-height: 21px; }
  .fit__guarantee::before { top: -2px; width: 28px; height: 28px; transform: none; background-size: 15px; }
  .fit__foot .who-btn { width: 100%; justify-content: space-between; }

  /* WordPress — карточки-роли */
  .wpfit { margin-top: 32px; gap: 12px; }
  .wpfit__head { padding: 12px 16px; }
  .wpfit__body { padding: 16px; }
  .wpfit__gain { font-size: 14px; line-height: 21px; }
  .wpfit__pain { font-size: 14px; line-height: 21px; }

  .who-btn { height: 46px; font-size: 14px; }

  .pgf { margin-top: 32px; padding: 20px 14px 14px; border-radius: 22px; }
  .pgf__road { padding: 0 6px; }
  .pgf__legend { font-size: 12px; gap: 4px 14px; }
  .pgf__bar { gap: 3px; margin-top: 40px; }
  .pgf__seg { min-width: 5px; height: 8px; }
  .pgf__pin img { width: 40px; height: 26px; }
  .pgf__pin--orders img { width: 26px; height: 26px; padding: 3px; }
  .pgf__cols { margin-top: 28px; gap: 8px; }
  .pgf__col { gap: 8px; }
  .pg-mod { border-radius: 14px; }
  .pg-mod__btn { column-gap: 10px; padding: 11px 10px 11px 14px; }
  .pg-mod__title { font-size: 16px; line-height: 21px; }
  .pg-mod__count { padding: 5px 8px; font-size: 11px; }
  .pg-mod--diploma .pg-mod__count, .pg-mod--orders .pg-mod__count { padding-left: 20px; }
  .pg-mod--diploma .pg-mod__count::before, .pg-mod--orders .pg-mod__count::before { left: 8px; }
  .pg-mod__sign { width: 28px; height: 28px; }
  .pg-mod__body { padding: 0 14px 16px; }
  .pg-mod__body--result { grid-template-columns: minmax(0, 1fr); }
  .pg-mod__body--result .pg-result { grid-column: 1; grid-row: auto; max-width: 240px; }
  .pgf__final { padding: 16px; }
  .pgf__pdf { width: 100%; justify-content: center; }

  .who { margin-top: 32px; gap: 12px; }
  .who-card { display: flex; padding: 22px 20px 20px; border-radius: 20px; }
  .who-card__title { font-size: 21px; line-height: 27px; }
  .who-card__pain { margin-top: 10px; font-size: 14px; line-height: 21px; }
  .who-card__gain { margin-top: 14px; padding: 13px 14px 13px 42px; font-size: 14px; line-height: 21px; }
  .who-card__gain::before { top: 14px; }
  .who-proof, .who-card__gain + .who-proof { margin-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .ob-card--wp:hover .ob-3d--wp { transform: rotate(10deg); }
  .ob-card--orders:hover .ob-orders3d__t--tg { transform: rotate(-11deg); }
  .ob-card--orders:hover .ob-orders3d__t--profi { transform: rotate(10deg); }
  .ob-card--orders:hover .ob-orders3d__t--kwork { transform: rotate(-3deg); }
  .ob-card--js:hover .ob-3d--js { transform: rotate(8deg); }
  .ob-card--js:hover .ob-modal { transform: none; }
  .pg-mod .pg-result__shot { transform: none; }
  .ob-card--layout:hover .ob-inspect__win, .who-proof:hover { transform: none; }
  .who-btn:hover { transform: none; }
  .pgf__seg:hover .pgf__pin--diploma img, .pgf__seg:hover .pgf__pin--orders img { transform: none; }
}