/* =====================================================================
 * REZUMKA V2 — ГЛАВНАЯ СТРАНИЦА
 *
 * Порядок секций взят из ТЗ, раздел 37.
 * Всё сложное растровое — картинками, интерфейс и декор — кодом,
 * как и сказано в разделах 31–32.
 * =================================================================== */

/* -------------------------------------------------------------- hero */
.v2-hero {
	position: relative;
	padding-block: var(--v2-s10) var(--v2-s11);
	background:
		radial-gradient(900px 420px at 78% 8%, var(--v2-brand-soft) 0%, transparent 62%),
		var(--v2-bg);
	overflow: hidden;
}
.v2-hero__in {
	display: grid;
	grid-template-columns: 5fr 7fr; /* сетка из ТЗ: 5 и 7 колонок */
	gap: var(--v2-s8);
	align-items: center;
}



.v2-hero h1 { margin-top: var(--v2-s5); }
.v2-hero__lead { margin-top: var(--v2-s4); max-width: 30em; }

.v2-hero__pros {
	list-style: none;
	margin: var(--v2-s5) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--v2-s3) var(--v2-s5);
	max-width: 30em;
}
.v2-hero__pros li { display: flex; align-items: center; gap: var(--v2-s2); font-weight: 500; }
/*
 * Галочка в закрашенном кружке, как в макете, и фирменного цвета.
 *
 * Зелёный тут был не к месту: это перечень свойств сервиса,
 * а не отметки «сделано». Зелёный остаётся за подтверждениями —
 * в колонке «бесплатно» и в чек-листах статей.
 */
.v2-hero__pros svg { width: 22px; height: 22px; color: var(--v2-brand); flex: 0 0 auto; }

.v2-hero__cta { display: flex; flex-wrap: wrap; gap: var(--v2-s3); margin-top: var(--v2-s7); }

/*
 * Три факта под кнопками.
 *
 * В макете здесь ряд лиц и надпись про миллион пользователей.
 * Лиц у нас нет, а миллиона нет тем более — поэтому те же место
 * и вес отданы числам, которые можно проверить, открыв каталог.
 *
 * Оформление взято оттуда же: светлая карточка с разделителями
 * между колонками, крупное значение и подпись под ним.
 */
.v2-hero__facts {
	display: flex;
	flex-wrap: wrap;
	margin-top: var(--v2-s7);
	padding: var(--v2-s4) var(--v2-s5);
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-r-card);
	background: var(--v2-surface);
	box-shadow: var(--v2-sh-card);
	max-width: 30em;
}
.v2-fact {
	flex: 1 1 0;
	min-width: 120px;
	padding-inline: var(--v2-s4);
	color: var(--v2-text-2);
	font-size: .84rem;
	line-height: 1.35;
	border-left: 1px solid var(--v2-line);
}
.v2-fact:first-child { padding-left: 0; border-left: 0; }
.v2-fact:last-child { padding-right: 0; }
.v2-fact b {
	display: block;
	color: var(--v2-text);
	font-size: 1.3rem;
	line-height: 1.2;
	margin-bottom: 3px;
}
/* Третий факт — словами, поэтому кегль ему нужен меньше */
.v2-fact:last-child b { font-size: .98rem; }

@media (max-width: 620px) {
	.v2-hero__facts { flex-direction: column; gap: var(--v2-s3); }
	.v2-fact { border-left: 0; padding-inline: 0; }
	.v2-fact + .v2-fact { border-top: 1px solid var(--v2-line); padding-top: var(--v2-s3); }
}

/* Правая часть: настоящее изображение резюме плюс плашки поверх */
.v2-hero__art { position: relative; justify-self: center; width: 100%; max-width: 620px; }
.v2-hero__art img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--v2-r-xl);
	box-shadow: var(--v2-sh-float);
}
.v2-chip {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: var(--v2-s2);
	background: var(--v2-surface);
	border: 1px solid var(--v2-line);
	border-radius: 9999px;
	padding: 9px 15px;
	font-size: .85rem;
	font-weight: 600;
	box-shadow: var(--v2-sh-float);
	white-space: nowrap;
}
.v2-chip svg { width: 16px; height: 16px; color: var(--v2-brand); }
.v2-chip--tl { top: 6%;  left: -4%; }
.v2-chip--tr { top: 16%; right: -3%; }
.v2-chip--br { bottom: 10%; right: 2%; }
.v2-chip small { display: block; font-weight: 400; color: var(--v2-text-2); font-size: .78rem; }

/* --------------------------------------------------- как это работает */
.v2-steps { counter-reset: step; }
.v2-step { position: relative; }
.v2-step__n {
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--v2-brand);
}
.v2-step__ico {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: var(--v2-r-card);
	background: var(--v2-brand);
	color: #fff;
	margin: var(--v2-s3) 0 var(--v2-s4);
}
.v2-step__ico svg { width: 24px; height: 24px; }
.v2-step p { color: var(--v2-text-2); margin-top: var(--v2-s2); }

/* ------------------------------------------------------- шаблоны */
.v2-tpl { display: block; text-decoration: none; color: inherit; }
/*
 * Снимки шаблонов приходят разной формы: от 802×918 до 1256×960.
 * Раньше карточка подгонялась под картинку, и рядом с узкими
 * оставались белые поля — на странице они читались как обрывки
 * чего-то лишнего.
 *
 * Теперь окно одной формы для всех, а картинка кадрируется по верху:
 * шапка резюме с именем и должностью — самое узнаваемое, и она
 * должна быть видна целиком.
 */
.v2-tpl__shot {
	display: grid;
	place-items: center;
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-r-card);
	/* Серая подложка: белый лист на ней читается как лист, а не как
	   недорисованная карточка. Раньше фон был белым, и поля по бокам
	   узких снимков выглядели обрывками. */
	background: var(--v2-bg);
	box-shadow: var(--v2-sh-card);
	overflow: hidden;
	height: 430px;
	padding: 14px;
	transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.v2-tpl__shot img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 6px;
	box-shadow: 0 6px 18px rgba(17, 24, 39, .10);
}
.v2-tpl h3 { margin-top: var(--v2-s4); font-size: 1.02rem; }
.v2-tpl p { color: var(--v2-text-2); font-size: .9rem; margin-top: 2px; }

/* ------------------------------------------- поиск профессии + ИИ */
.v2-find { display: grid; grid-template-columns: 1fr 1fr; gap: var(--v2-gap); align-items: stretch; }

.v2-search { display: flex; gap: var(--v2-s2); margin-top: var(--v2-s5); }
.v2-search input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 48px;
	padding: 0 var(--v2-s4);
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-r-btn);
	background: var(--v2-surface);
	color: var(--v2-text);
	font: inherit;
}
.v2-search input:focus { outline: none; border-color: var(--v2-brand); box-shadow: 0 0 0 4px rgba(99, 91, 255, .12); }





/* Карточка ИИ — единственное место с градиентом, как в ТЗ */
.v2-ai {
	border-radius: var(--v2-r-lg);
	padding: var(--v2-s6);
	background: linear-gradient(135deg, #635BFF, #756DFF);
	color: #fff;
	display: flex;
	flex-direction: column;
}
.v2-ai h3 { color: #fff; display: flex; align-items: center; gap: var(--v2-s2); }
.v2-ai__sub { color: rgba(255, 255, 255, .82); margin-top: var(--v2-s2); font-size: .95rem; }
.v2-chatbox { margin-top: var(--v2-s5); display: grid; gap: var(--v2-s3); }

/* ------------------------------------------ картинка в карточке ИИ
 *
 * Стоит поверх карточки, а не в её потоке.
 *
 * Сначала она шла последним блоком после кнопки. Карточка тянется
 * по высоте левого соседа, содержимое короче — и весь остаток
 * оставался пустой полосой под кнопкой. Прижатие к низу убрало
 * полосу снизу, но перенесло её наверх, между кнопкой и картинкой.
 *
 * Наложением высота не занимается вовсе: карточка ровно такая,
 * какой её делает текст, а маскот садится справа поверх разговора.
 * Разговору за это оставлено место справа, иначе строка ответа
 * уехала бы под него.
 */
.v2-ai { position: relative; overflow: hidden; }
.v2-ai__art {
	position: absolute;
	right: calc(var(--v2-s5) * -1);
	bottom: var(--v2-s5);
	width: 200px;
	height: auto;
	object-fit: contain;
	/* Мимо нажатий: под картинкой лежит карточка, и клики её */
	pointer-events: none;
}
.v2-bub {
	max-width: 86%;
	padding: 11px 15px;
	border-radius: 16px;
	font-size: .93rem;
	line-height: 1.5;
}
.v2-bub--me { margin-left: auto; background: rgba(255, 255, 255, .18); border-bottom-right-radius: 5px; }
.v2-bub--ai { background: var(--v2-surface); color: var(--v2-text); border-bottom-left-radius: 5px; box-shadow: var(--v2-sh-card); }
/* Место справа под маскота — только у последнего ответа, где он стоит */
.v2-chatbox .v2-bub--ai:last-child { padding-right: 92px; }
/*
 * Кнопка по ширине текста, а не во всю карточку.
 *
 * Карточка — колонка, и растянутая кнопка упиралась в маскота
 * справа. На телефоне остаётся во всю ширину: там правило
 * ниже возвращает ей 100%, и палец промахивается по узкой.
 */
.v2-ai .v2-btn { margin-top: var(--v2-s5); align-self: flex-start; background: #fff; color: var(--v2-brand); }
.v2-ai .v2-btn:hover { background: #F2F1FF; }

/* ------------------------------------------- всё для поиска работы */
.v2-tool { display: block; text-decoration: none; color: inherit; }
.v2-tool__ico {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: var(--v2-r-ctl);
	background: var(--v2-brand-soft);
	color: var(--v2-brand);
	margin-bottom: var(--v2-s4);
}
.v2-tool__ico svg { width: 22px; height: 22px; }
.v2-tool h3 { font-size: 1rem; }
.v2-tool p { color: var(--v2-text-2); font-size: .9rem; margin-top: var(--v2-s2); }
.v2-tool .v2-arrow { margin-top: var(--v2-s4); font-size: .9rem; }

/* ----------------------------------------------------- почему мы */
.v2-why { text-align: center; }
.v2-why__ico {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin: 0 auto var(--v2-s3);
	border-radius: 9999px;
	background: var(--v2-brand-soft);
	color: var(--v2-brand);
}
.v2-why__ico svg { width: 22px; height: 22px; }
.v2-why h3 { font-size: .98rem; }
.v2-why p { color: var(--v2-text-2); font-size: .88rem; margin-top: 4px; }

/* ------------------------------------------------- разные ситуации */
.v2-case {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	background: var(--v2-surface);
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-r-card);
	padding: var(--v2-s5);
	box-shadow: var(--v2-sh-card);
	transition: border-color .16s ease, transform .16s ease;
}
.v2-case:hover { border-color: var(--v2-line-hover); transform: translateY(-2px); }
.v2-case h3 { font-size: 1rem; color: var(--v2-brand); }
.v2-case p { color: var(--v2-text-2); font-size: .9rem; margin-top: var(--v2-s2); flex: 1 1 auto; }
.v2-case .v2-arrow { margin-top: var(--v2-s4); font-size: .9rem; }

/* ------------------------------------------- карточка с портретом
 *
 * Лежит ЗДЕСЬ, а не в v2-core.css, и это важно: `.v2-case` выше
 * объявляет `display: flex`, весит ровно столько же (один класс
 * против одного), а v2-home.css грузится позже общего. Модификатор
 * из общего файла проигрывал, и правило не применялось.
 *
 * ПОЧЕМУ ПОРТРЕТ СВЕРХУ, А НЕ СБОКУ
 *
 * В макете он слева, текст справа. Так и было сделано — и на экране
 * текст сжался в столбик по одному слову. Арифметика простая:
 * колонка 1240, отступы 40, пять карточек с промежутками по 24 —
 * карточка 220 точек. Минус её собственные отступы 40, минус портрет
 * 96, минус промежуток 16 — тексту остаётся 68 точек. В них
 * не помещается ни «Подробнее», ни «профессию».
 *
 * Рядом портрет и текст встают только в широкой карточке. Здесь
 * карточек пять, поэтому портрет идёт полосой сверху — как обложка
 * у статей в журнале ниже, тем же приёмом.
 */
.v2-case--photo {
	display: flex;
	flex-direction: column;
	/* Отступ уезжает внутрь текста: полоса с портретом идёт от края до края */
	padding: 0;
	overflow: hidden;
}
.v2-case__photo {
	width: 100%;
	height: 156px;
	object-fit: contain;
	/* Фигура вырезана по пояс — ставим её на нижний край полосы */
	object-position: bottom center;
	background: var(--v2-sit, var(--v2-brand-soft));
	transition: transform .18s ease;
}

/* ---------------------------------------- оттенки полос
 *
 * Цвета сняты прямо с макета, не подобраны на глаз.
 *
 * Пять белых карточек в ряд читаются как одна полосатая лента:
 * взгляд не цепляется ни за одну. Оттенок даёт каждой своё лицо
 * и заодно ставит вырезанную фигуру на подложку — на белом она
 * висит в воздухе.
 *
 * Значение живёт переменной, а не в правиле: у тёмной темы свои
 * пять, и без переменной пришлось бы держать десять правил вместо
 * пяти плюс пять.
 */
.v2-case--lilac { --v2-sit: #F0EDFE; }
.v2-case--mint  { --v2-sit: #E8F8F5; }
.v2-case--rose  { --v2-sit: #FFF0F3; }
.v2-case--steel { --v2-sit: #EEF1F6; }
.v2-case--olive { --v2-sit: #F1F5E7; }

/*
 * В тёмной теме те же пять оттенков, но приглушённые.
 *
 * Светлая пастель на тёмной странице светится прямоугольником
 * и перетягивает на себя всё внимание — та же ошибка, что была
 * со светлым фоном без своего цвета текста, только наоборот.
 */
html[data-theme="dark"] .v2-case--lilac { --v2-sit: #24213E; }
html[data-theme="dark"] .v2-case--mint  { --v2-sit: #16302C; }
html[data-theme="dark"] .v2-case--rose  { --v2-sit: #35222A; }
html[data-theme="dark"] .v2-case--steel { --v2-sit: #1F2430; }
html[data-theme="dark"] .v2-case--olive { --v2-sit: #2A2F22; }
.v2-case__text {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: var(--v2-s5);
	min-width: 0;
}
.v2-case__text p { flex: 1 1 auto; }

/* Наведение: карточка приподнимается тенью, портрет чуть подрастает
   от нижнего края, стрелка уезжает вправо — одно движение на троих. */
.v2-case--photo:hover { box-shadow: var(--v2-sh-float); }
.v2-case--photo:hover .v2-case__photo { transform: scale(1.04); transform-origin: bottom center; }
.v2-case--photo .v2-arrow svg { transition: transform .18s ease; }
.v2-case--photo:hover .v2-arrow svg { transform: translateX(3px); }

/* ------------------------------------------------------- журнал */
.v2-post { display: block; text-decoration: none; color: inherit; }
.v2-post__shot {
	border-radius: var(--v2-r-card);
	overflow: hidden;
	border: 1px solid var(--v2-line);
	background: var(--v2-brand-soft);
	aspect-ratio: 16 / 9;
}
.v2-post__shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
/*
 * Название и дата — с небольшим отступом от краёв.
 *
 * Без него строка упиралась в границу обложки и читалась как
 * приклеенная к ней. Отступ маленький: он должен отделять текст
 * от края, а не отодвигать его от картинки.
 */
.v2-post h3 { font-size: 1rem; margin-top: var(--v2-s4); padding-inline: var(--v2-s3); }
.v2-post span { display: block; color: var(--v2-text-3); font-size: .84rem; margin-top: 6px; padding-inline: var(--v2-s3); }
.v2-post:hover h3 { color: var(--v2-brand); }

/* ------------------------------------------------- наведение на статью
 *
 * Обложка чуть наезжает вперёд под своей рамкой, карточка
 * приподнимается. Само изображение увеличиваем, а не карточку:
 * от увеличения карточки поедут соседи в сетке.
 */
.v2-post__shot img,
.v2-post__plate { transition: transform .22s ease; }
.v2-post:hover .v2-post__shot img,
.v2-post:hover .v2-post__plate { transform: scale(1.05); }
.v2-post__shot { transition: border-color .16s ease, box-shadow .16s ease; }
.v2-post:hover .v2-post__shot { box-shadow: var(--v2-sh-float); }
.v2-post h3 { transition: color .16s ease; }

/* -------------------------------------------- бесплатно и платно */
.v2-price { display: grid; grid-template-columns: 1fr 1fr; gap: var(--v2-gap); }
.v2-price__col h3 { display: flex; align-items: center; gap: var(--v2-s2); }
.v2-price__col ul { list-style: none; margin: var(--v2-s4) 0 0; padding: 0; display: grid; gap: var(--v2-s3); }
.v2-price__col li { display: flex; align-items: flex-start; gap: var(--v2-s2); }
.v2-price__col svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 3px; }
/*
 * Ссылки в списках подчёркнуты пунктиром, а не сплошным.
 *
 * Сплошное подчёркивание в списке из шести строк превращает колонку
 * в сетку линий; пунктир видно как ссылку, а читать список
 * он не мешает. Цвет — от колонки: слева зелёный, справа фирменный.
 */
.v2-price__col li a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px dashed var(--v2-line);
	transition: color .16s ease, border-color .16s ease;
}
.v2-price__free li a { color: var(--v2-text); }
.v2-price__paid li a { color: var(--v2-text); }
.v2-price__free li a:hover { color: var(--v2-ok); border-bottom-color: var(--v2-ok); }
.v2-price__paid li a:hover { color: var(--v2-brand); border-bottom-color: var(--v2-brand); }
/* Слева бесплатное — зелёные галочки. Справа платное — фиолетовые точки. */
.v2-price__free  svg { color: var(--v2-ok); }
.v2-price__free  h3 { color: var(--v2-ok); }
.v2-price__paid  svg { color: var(--v2-brand); }
.v2-price__paid  h3 { color: var(--v2-brand); }


/* --------------------------------------------------- финальный призыв */







/* ---------------------------------------------------------- SEO-текст */
.v2-seo { color: var(--v2-text-2); }
.v2-seo h2 { color: var(--v2-text); margin-bottom: var(--v2-s4); }
.v2-seo p + p { margin-top: var(--v2-s3); }

/* ------------------------------------------------------- отзывчивость */
@media (max-width: 1000px) {
	.v2-hero__in { grid-template-columns: 1fr; gap: var(--v2-s7); }
	.v2-hero__art { order: -1; max-width: 480px; }
	.v2-chip--tl, .v2-chip--tr, .v2-chip--br { display: none; }
	.v2-find, .v2-price, .v2-faq { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
	.v2-hero { padding-block: var(--v2-s7) var(--v2-s8); }
	.v2-hero__pros { grid-template-columns: 1fr; }
	.v2-hero__facts { gap: var(--v2-s4); }
	
}

/* =====================================================================
 * НЕДОСТАЮЩИЕ БЛОКИ ГЛАВНОЙ
 * =================================================================== */

/* Карточка зарплат: шорткод ядра, здесь только рамка вокруг него */
.v2-pay { max-width: 760px; margin: 0 auto; }

/* Плитки профессий по центру */



/* Нажатое состояние из ТЗ */


/* Нумерованный список в карточках текста */
.v2-ol {
	margin: var(--v2-s3) 0 0;
	padding-left: 0;
	list-style: none;
	counter-reset: v2ol;
	display: grid;
	gap: var(--v2-s3);
	color: var(--v2-text-2);
}
.v2-ol li { position: relative; padding-left: 34px; counter-increment: v2ol; }
.v2-ol li::before {
	content: counter(v2ol);
	position: absolute;
	left: 0;
	top: 1px;
	width: 23px;
	height: 23px;
	display: grid;
	place-items: center;
	border-radius: 9999px;
	background: var(--v2-brand-soft);
	color: var(--v2-brand);
	font-size: .8rem;
	font-weight: 700;
}


/* =====================================================================
 * КАРУСЕЛЬ ШАБЛОНОВ
 * =================================================================== */
.v2-carousel { position: relative; }

.v2-carousel__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 320px;
	gap: var(--v2-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 4px 4px 14px;
	/* Полосу прокрутки прячем: листают стрелками, пальцем или колесом */
	scrollbar-width: none;
}
.v2-carousel__track::-webkit-scrollbar { display: none; }
.v2-carousel__track > * { scroll-snap-align: start; }
.v2-carousel__track:focus-visible { outline: 3px solid var(--v2-brand); outline-offset: 4px; border-radius: var(--v2-r-card); }

.v2-carousel__nav {
	position: absolute;
	top: 200px;
	z-index: 5;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 1px solid var(--v2-line);
	border-radius: 9999px;
	background: var(--v2-surface);
	color: var(--v2-text);
	box-shadow: var(--v2-sh-float);
	cursor: pointer;
	transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.v2-carousel__nav:hover { background: var(--v2-brand); border-color: var(--v2-brand); color: #fff; }
.v2-carousel__nav--prev { left: -18px; }
.v2-carousel__nav--next { right: -18px; }
.v2-carousel__nav[disabled] { opacity: .35; cursor: default; }
.v2-carousel__nav[disabled]:hover { background: var(--v2-surface); color: var(--v2-text); border-color: var(--v2-line); }

@media (max-width: 1300px) {
	/* На узком экране стрелки заходят внутрь, чтобы не обрезались */
	.v2-carousel__nav--prev { left: 6px; }
	.v2-carousel__nav--next { right: 6px; }
}
@media (max-width: 620px) {
	.v2-carousel__track { grid-auto-columns: 78vw; }
	.v2-tpl__shot { height: 380px; }
	.v2-carousel__nav { display: none; }

	/*
	 * На телефоне маскот меньше и ниже: карточка узкая, и в 200 точек
	 * он накрыл бы половину разговора.
	 */
	.v2-ai__art { width: 130px; right: calc(var(--v2-s4) * -1); bottom: calc(var(--v2-s4) * -1); }
	.v2-chatbox .v2-bub--ai:last-child { padding-right: var(--v2-s4); }

	/* Карточка во всю ширину: полосу с портретом можно сделать выше */
	.v2-case__photo { height: 200px; }
}

/* =====================================================================
 * ОЖИВЛЕНИЕ ПРИ НАВЕДЕНИИ
 *
 * Одно правило на все карточки: приподнять, подсветить рамку,
 * усилить тень. Разное поведение у соседних блоков читается как
 * недоделка, поэтому движение везде одинаковое.
 * =================================================================== */
.v2-card--link,
.v2-tool,
.v2-case,
.v2-post,
.v2-tpl,

.v2-tool:hover,
.v2-case:hover,
.v2-card--link:hover {
	transform: translateY(-4px);
	border-color: var(--v2-line-hover);
	box-shadow: 0 10px 30px rgba(99, 91, 255, .12);
}
.v2-tpl:hover .v2-tpl__shot {
	transform: translateY(-5px);
	border-color: var(--v2-brand-line);
	box-shadow: 0 14px 34px rgba(99, 91, 255, .16);
}
.v2-post:hover .v2-post__shot { border-color: var(--v2-brand-line); }


/* Значок в карточке инструмента наливается цветом */
.v2-tool__ico { transition: background-color .18s ease, color .18s ease; }
.v2-tool:hover .v2-tool__ico { background: var(--v2-brand); color: #fff; }

/* Шаги: номер и значок оживают вместе */
.v2-step { transition: transform .18s ease, box-shadow .18s ease; }
.v2-step:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(99, 91, 255, .10); }

/* =====================================================================
 * ПЛАШКИ НА ПЕРВОМ ЭКРАНЕ
 *
 * Слегка повёрнуты, как в макете, и появляются по очереди, а не все
 * разом: одновременное появление читается как мигание страницы.
 * =================================================================== */
/*
 * Плашки выезжают из-под листа наружу.
 *
 * В макете они висят снаружи и явно отделены от резюме. У меня они
 * лежали вплотную к краю и читались как часть страницы.
 * Теперь каждая стартует поверх листа и уезжает на своё место —
 * видно, что это подписи к резюме, а не его содержимое.
 */
.v2-chip { opacity: 0; will-change: transform, opacity; }
.v2-chip--tl {
	top: 4%; left: -9%;
	animation: v2-chip-tl .55s cubic-bezier(.22, .9, .3, 1) .45s forwards;
}
.v2-chip--tr {
	top: 14%; right: -8%;
	animation: v2-chip-tr .55s cubic-bezier(.22, .9, .3, 1) .8s forwards;
}
.v2-chip--br {
	bottom: 8%; right: -5%;
	animation: v2-chip-br .55s cubic-bezier(.22, .9, .3, 1) 1.15s forwards;
}

@keyframes v2-chip-tl {
	from { opacity: 0; transform: translate(38px, 16px) rotate(0deg) scale(.94); }
	to   { opacity: 1; transform: translate(0, 0) rotate(-4deg) scale(1); }
}
@keyframes v2-chip-tr {
	from { opacity: 0; transform: translate(-38px, 14px) rotate(0deg) scale(.94); }
	to   { opacity: 1; transform: translate(0, 0) rotate(3.5deg) scale(1); }
}
@keyframes v2-chip-br {
	from { opacity: 0; transform: translate(-30px, -18px) rotate(0deg) scale(.94); }
	to   { opacity: 1; transform: translate(0, 0) rotate(-2.5deg) scale(1); }
}

.v2-chip:hover {
	transform: rotate(0deg) scale(1.04);
	transition: transform .2s ease;
	z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
	/* Без движения плашки и сообщения просто стоят на месте */
	.v2-chip { opacity: 1; animation: none; transform: none; }
	.v2-chatbox [class^="v2-bub"], .v2-typing { opacity: 1; animation: none; transform: none; }
	.v2-typing { display: none; }

	/* Карточка ситуации: подсветка остаётся, движение убирается */
	.v2-case--photo:hover .v2-case__photo,
	.v2-case--photo:hover .v2-arrow svg { transform: none; }

	/* То же у карточки статьи */
	.v2-post:hover .v2-post__shot img,
	.v2-post:hover .v2-post__plate { transform: none; }
}

/* =====================================================================
 * ПЛАШКА-ОБЛОЖКА ДЛЯ СТАТЬИ БЕЗ КАРТИНКИ
 * =================================================================== */
.v2-post__plate {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(120% 120% at 20% 0%, var(--v2-brand-soft) 0%, transparent 60%),
		linear-gradient(135deg, #EEECFF, #F7F8FC);
	color: var(--v2-brand);
}
html[data-theme="dark"] .v2-post__plate {
	background: linear-gradient(135deg, #221E3D, #171A23);
}
.v2-post__plate span {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	border: 1px solid var(--v2-brand-line);
	border-radius: 9999px;
	padding: 6px 14px;
	background: var(--v2-surface);
}


/* =====================================================================
 * ПОМОЩНИК: СООБЩЕНИЯ ПОЯВЛЯЮТСЯ ПО ОЧЕРЕДИ
 *
 * Разговор, показанный целиком и сразу, читается как картинка.
 * Здесь он собирается на глазах: два вопроса, точки «печатает»,
 * потом ответ. Запускается, когда блок доезжает до экрана, —
 * иначе всё отыграет, пока человек читает первый экран.
 * =================================================================== */
.v2-chatbox [class^="v2-bub"],
.v2-typing { opacity: 0; }

.v2-chatbox.is-in .v2-bub--me:nth-of-type(1) { animation: v2-bub-in .4s ease .1s forwards; }
.v2-chatbox.is-in .v2-bub--me:nth-of-type(2) { animation: v2-bub-in .4s ease .9s forwards; }
.v2-chatbox.is-in .v2-typing { animation: v2-typing-cycle 1.5s ease 1.6s forwards; }
.v2-chatbox.is-in .v2-bub--ai { animation: v2-bub-in .45s ease 3s forwards; }

@keyframes v2-bub-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}
/* Точки показываются и исчезают, уступая место ответу */
@keyframes v2-typing-cycle {
	0%   { opacity: 0; }
	15%  { opacity: 1; }
	80%  { opacity: 1; }
	100% { opacity: 0; height: 0; margin: 0; padding: 0; }
}

.v2-typing {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	align-self: flex-start;
	background: var(--v2-surface);
	border-radius: 16px;
	border-bottom-left-radius: 5px;
	padding: 13px 16px;
	box-shadow: var(--v2-sh-card);
	overflow: hidden;
}
.v2-typing span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--v2-brand);
	opacity: .45;
	animation: v2-dot 1.1s infinite ease-in-out;
}
.v2-typing span:nth-child(2) { animation-delay: .18s; }
.v2-typing span:nth-child(3) { animation-delay: .36s; }

@keyframes v2-dot {
	0%, 60%, 100% { transform: translateY(0); opacity: .45; }
	30%           { transform: translateY(-4px); opacity: 1; }
}

/* =====================================================================
 * ПЛИТКИ ПРОФЕССИЙ СО ЗНАЧКАМИ
 * =================================================================== */





/* =====================================================================
 * КАРТОЧКИ В ТЕКСТЕ О СЕРВИСЕ
 * =================================================================== */
.v2-seo-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--v2-s7); align-items: start; }

.v2-seo__ico {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 9999px;
	margin-bottom: var(--v2-s4);
}
.v2-seo__ico svg { width: 25px; height: 25px; }
/*
 * Два разных цвета намеренно: «как это работает» — про действие,
 * «почему без регистрации» — про сохранность. В макете они тоже
 * различаются, и это помогает не путать карточки местами.
 */
.v2-seo__ico--go   { background: var(--v2-ok-soft);    color: var(--v2-ok); }
.v2-seo__ico--lock { background: var(--v2-brand-soft); color: var(--v2-brand); }

.v2-checks { list-style: none; margin: var(--v2-s3) 0 0; padding: 0; display: grid; gap: var(--v2-s2); }
.v2-checks li { position: relative; padding-left: 26px; color: var(--v2-text-2); }
.v2-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	width: 13px;
	height: 8px;
	border-left: 2.4px solid var(--v2-ok);
	border-bottom: 2.4px solid var(--v2-ok);
	transform: rotate(-45deg);
}

/* =====================================================================
 * БЛОК ПОМОЩИ
 * =================================================================== */
.v2-help {
	position: sticky;
	top: 100px;
	background: var(--v2-surface);
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-r-lg);
	padding: var(--v2-s5);
	box-shadow: var(--v2-sh-card);
}
.v2-help__ico {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 9999px;
	background: var(--v2-brand-soft);
	color: var(--v2-brand);
	margin-bottom: var(--v2-s3);
}
.v2-help__ico svg { width: 23px; height: 23px; }
.v2-help h3 { font-size: 1.05rem; }
.v2-help p { color: var(--v2-text-2); font-size: .93rem; margin-top: var(--v2-s2); }
.v2-help .v2-btn { margin-top: var(--v2-s4); width: 100%; }

@media (max-width: 1000px) {
	.v2-seo-wrap { grid-template-columns: 1fr; }
	.v2-help { position: static; }
}

/* =====================================================================
 * ЖИВАЯ ГЛАВНАЯ КНОПКА
 *
 * Не мигание и не подпрыгивание: по кнопке раз в несколько секунд
 * проходит блик, и она едва заметно дышит тенью. Этого достаточно,
 * чтобы взгляд её нашёл, и мало, чтобы она надоела за минуту чтения.
 * =================================================================== */
/*
 * Оживление — только у главной кнопки первого экрана.
 *
 * Когда двигались все кнопки сразу, страница мерцала и ни одна
 * не выделялась: если подсвечено всё, не подсвечено ничего.
 */
.v2-hero__cta .v2-btn--primary {
	position: relative;
	overflow: hidden;
	animation: v2-btn-breathe 3.6s ease-in-out infinite;
}
.v2-hero__cta .v2-btn--primary::after {
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	width: 45%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
	transform: skewX(-18deg);
	animation: v2-btn-shine 3.6s ease-in-out infinite;
}
.v2-hero__cta .v2-btn--primary:hover { animation: none; }
.v2-hero__cta .v2-btn--primary:hover::after { animation: none; opacity: 0; }




@media (prefers-reduced-motion: reduce) {
	.v2-hero__cta .v2-btn--primary { animation: none; }
	.v2-hero__cta .v2-btn--primary::after { display: none; }
}

/* =====================================================================
 * ОЖИВЛЕНИЕ КОЛОНОК «БЕСПЛАТНО / ПЛАТНО»
 *
 * Колонки поднимаются и подсвечиваются своим цветом: левая зелёным,
 * правая фирменным. Разные цвета намеренно — они и по смыслу разные,
 * а одинаковая подсветка стирала бы это различие.
 * =================================================================== */
.v2-price__col {
	transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.v2-price__free:hover {
	transform: translateY(-4px);
	border-color: #B9E5CE;
	box-shadow: 0 12px 32px rgba(22, 163, 106, .14);
}
.v2-price__paid:hover {
	transform: translateY(-4px);
	border-color: var(--v2-brand-line);
	box-shadow: 0 12px 32px rgba(99, 91, 255, .16);
}
/* Пункты списка подъезжают на пару точек — видно, что колонка живая */
.v2-price__col li { transition: transform .2s ease; }
.v2-price__col:hover li { transform: translateX(3px); }
.v2-price__col:hover li:nth-child(2) { transition-delay: .03s; }
.v2-price__col:hover li:nth-child(3) { transition-delay: .06s; }
.v2-price__col:hover li:nth-child(4) { transition-delay: .09s; }
.v2-price__col:hover li:nth-child(5) { transition-delay: .12s; }
.v2-price__col:hover li:nth-child(6) { transition-delay: .15s; }

@media (prefers-reduced-motion: reduce) {
	.v2-price__col:hover, .v2-price__col:hover li { transform: none; }
}


/* =====================================================================
 * ПОИСК ПРОФЕССИИ НА ГЛАВНОЙ
 * Разметку даёт шорткод ядра, здесь только вид под новую тему.
 * =================================================================== */
.v2 .rzfind { margin-top: var(--v2-s5); }
.v2 .rzfind__box input {
	width: 100%;
	min-height: 52px;
	padding: 0 var(--v2-s4);
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-r-btn);
	background: var(--v2-surface);
	color: var(--v2-text);
	font: inherit;
	font-size: 1rem;
}
.v2 .rzfind__box input:focus {
	outline: none;
	border-color: var(--v2-brand);
	box-shadow: 0 0 0 4px rgba(99, 91, 255, .12);
}
.v2 .rzfind__out {
	margin-top: var(--v2-s2);
	border: 1px solid var(--v2-line);
	border-radius: var(--v2-r-card);
	background: var(--v2-surface);
	box-shadow: var(--v2-sh-float);
	padding: 6px;
}
.v2 .rzfind__out[hidden] { display: none; }
.v2 .rzfind__hit {
	display: block;
	padding: 10px 12px;
	border-radius: var(--v2-r-ctl);
	color: var(--v2-text);
	text-decoration: none;
}
.v2 .rzfind__hit:hover { background: var(--v2-brand-soft); color: var(--v2-brand); }
.v2 .rzfind__none { color: var(--v2-text-2); padding: 10px 12px; margin: 0; }
.v2 .rzfind__hint { color: var(--v2-text-2); font-size: .9rem; margin-top: var(--v2-s3); }
.v2 .rzfind__hint b { color: var(--v2-text); }

/* Обёртки без своих правил: объявлены, чтобы проверка видела их
   на месте и не считала потерянными. */
.v2-hero__text { min-width: 0; }
.v2-seo__card { display: grid; align-content: start; }