/* ==========================================================================
   Design tokens — общая система для ВСЕХ блоков.
   Ниша меняет только --bl-accent (и опционально светлые/тёмные тона),
   вся остальная механика (тени/радиусы/отступы/шрифты) не трогается.
   ========================================================================== */

:root {
	--bl-accent: #6d5ef8;
	--bl-accent-contrast: #ffffff;

	--bl-color-bg-light: #ffffff;
	--bl-color-bg-alt: #f6f7fb;
	--bl-color-text-light: #12121a;
	--bl-color-muted-light: #5f6472;
	--bl-color-border-light: #e7e8ef;

	--bl-color-bg-dark: #101019;
	--bl-color-text-dark: #f6f6fb;
	--bl-color-muted-dark: #a6a8bb;
	--bl-color-border-dark: rgba(255, 255, 255, .12);

	/* Ограниченное скругление для карточек и панелей. Внутри блока переопределяется
	   его собственным пресетом, но верхний предел остаётся — иначе «капсула» срезает углы контента. */
	--bl-card-radius: 16px;

	--bl-container-max: 1240px;
	--bl-container-narrow-max: 820px;

	--bl-radius-none: 0px;
	--bl-radius-sm: 10px;
	--bl-radius-md: 18px;
	--bl-radius-lg: 28px;
	--bl-radius-pill: 9999px;

	--bl-shadow-none: none;
	--bl-shadow-soft: 0 2px 4px rgba(16, 16, 25, .04), 0 8px 24px rgba(16, 16, 25, .06);
	--bl-shadow-medium: 0 4px 8px rgba(16, 16, 25, .06), 0 16px 40px rgba(16, 16, 25, .10);
	--bl-shadow-hard: 0 8px 16px rgba(16, 16, 25, .10), 0 32px 64px rgba(16, 16, 25, .18);
}

/* ---------- base ---------- */

/* Без этого любой элемент с width:100% и внутренними отступами вылезает за экран.
   Правило общее для темы, чтобы каждый блок не боролся с этим у себя. */
*, *::before, *::after { box-sizing: border-box; }

html { overflow-x: hidden; }

body {
	background: var(--bl-color-bg-light);
	color: var(--bl-color-text-light);
	/* Выехавшая за правый край панель мобильного меню не должна давать
	   горизонтальную прокрутку всей странице. */
	overflow-x: hidden;
}

.bl-block {
	position: relative;
	background: var(--bl-bg, transparent);
	color: var(--bl-text);
	overflow: clip;
}

.bl-theme-light {
	--bl-text: var(--bl-color-text-light);
	--bl-muted: var(--bl-color-muted-light);
	--bl-surface: #fbfbfd;
	--bl-border: var(--bl-color-border-light);
	--bl-theme-bg: var(--bl-color-bg-light);
	/* Тот же узор декора на светлом фоне заметнее, чем на тёмном градиенте —
	   там он тонет в собственной темноте секции. Убавляем интенсивность
	   именно здесь, а не в каждом пресете отдельно. */
	--bl-decor-strength: .6;
}
.bl-theme-dark {
	--bl-text: var(--bl-color-text-dark);
	--bl-muted: var(--bl-color-muted-dark);
	--bl-surface: rgba(255, 255, 255, .05);
	--bl-border: var(--bl-color-border-dark);
	--bl-theme-bg: var(--bl-color-bg-dark);
	--bl-decor-strength: 1;
	background: var(--bl-bg, var(--bl-color-bg-dark));
}
.bl-theme-custom { --bl-text: inherit; --bl-surface: rgba(255,255,255,.06); --bl-border: rgba(255,255,255,.14); }

/* Карточки на цветном/картиночном фоне читаются как стекло */
.bl-bg-image, .bl-bg-video {
	--bl-text: var(--bl-color-text-dark);
	--bl-muted: var(--bl-color-muted-dark);
	--bl-surface: rgba(255, 255, 255, .08);
	--bl-border: rgba(255, 255, 255, .16);
}

/* Общий вид карточки — используется всеми блоками */
/* Скругление карточки ограничено сверху: пресет «капсула» даёт 9999px,
   и на прямоугольной карточке текст начинал вылезать за срезанные углы.
   Капсула остаётся там, где она уместна — на кнопках и бейджах. */
.bl-block {
	/* Считается от пресета скругления блока, но с верхним пределом:
	   «капсула» — это 9999px, и на карточке текст вылезал за срезанные углы. */
	--bl-card-radius: min(var(--bl-radius, 16px), 32px);
}

.bl-card {
	background: var(--bl-surface);
	border: var(--bl-border-width, 1px) solid var(--bl-border);
	border-radius: var(--bl-card-radius);
	box-shadow: var(--bl-shadow, none);
}

/* ---------- container / width ---------- */

.bl-container {
	max-width: var(--bl-container-max);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
	position: relative;
	z-index: 1;
}
.bl-container-narrow { max-width: var(--bl-container-narrow-max); }
.bl-container-full { max-width: none; padding-inline: 0; }

/* ---------- spacing presets ---------- */

/* Множитель --bl-pad-scale задаётся пресетом оформления в настройках сайта:
   он меняет плотность вёрстки всего сайта, не трогая настройки отдельных блоков. */
.bl-pad-compact  { padding-block: calc(clamp(2rem, 4vw, 3rem) * var(--bl-pad-scale, 1)); }
.bl-pad-normal   { padding-block: calc(clamp(3rem, 6vw, 6rem) * var(--bl-pad-scale, 1)); }
.bl-pad-spacious { padding-block: calc(clamp(4rem, 9vw, 10rem) * var(--bl-pad-scale, 1)); }

/* ---------- shadow / radius presets (applied via var to children: cards, buttons, images) ---------- */

.bl-shadow-none   { --bl-shadow: var(--bl-shadow-none); }
.bl-shadow-soft   { --bl-shadow: var(--bl-shadow-soft); }
.bl-shadow-medium { --bl-shadow: var(--bl-shadow-medium); }
.bl-shadow-hard   { --bl-shadow: var(--bl-shadow-hard); }
.bl-shadow-glow   { --bl-shadow: 0 0 32px color-mix(in srgb, var(--bl-accent) 45%, transparent); }
.bl-shadow-custom { /* --bl-shadow приходит инлайн-стилем из PHP */ }

.bl-radius-none { --bl-radius: var(--bl-radius-none); }
.bl-radius-sm   { --bl-radius: var(--bl-radius-sm); }
.bl-radius-md   { --bl-radius: var(--bl-radius-md); }
.bl-radius-lg   { --bl-radius: var(--bl-radius-lg); }
.bl-radius-pill { --bl-radius: var(--bl-radius-pill); }

/* ---------- text align ---------- */

.bl-text-left   { text-align: left; }
.bl-text-center { text-align: center; }
.bl-text-right  { text-align: right; }

/* ---------- heading scale ---------- */

.bl-heading {
	font-weight: 750;
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin: 0 0 .45em;
	text-wrap: balance;
}
.bl-heading-s  { font-size: calc(clamp(1.25rem, 1rem + 1vw, 1.5rem) * var(--bl-heading-scale, 1)); letter-spacing: -0.01em; }
.bl-heading-m  { font-size: calc(clamp(1.75rem, 1.3rem + 1.8vw, 2.25rem) * var(--bl-heading-scale, 1)); }
.bl-heading-l  { font-size: calc(clamp(2.1rem, 1.6rem + 2.4vw, 2.9rem) * var(--bl-heading-scale, 1)); }
.bl-heading-xl { font-size: calc(clamp(2.5rem, 1.9rem + 3.2vw, 3.8rem) * var(--bl-heading-scale, 1)); letter-spacing: -0.025em; }
.bl-heading-2xl{ font-size: calc(clamp(3rem, 2.1rem + 4.4vw, 4.8rem) * var(--bl-heading-scale, 1)); letter-spacing: -0.03em; }

.bl-subheading {
	font-size: clamp(1.0625rem, .95rem + .45vw, 1.25rem);
	line-height: 1.55;
	color: var(--bl-muted);
	margin: 0 0 1.6em;
	max-width: 62ch;
	text-wrap: pretty;
}
.bl-text-center .bl-subheading { margin-inline: auto; }

.bl-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: .45em 1em;
	border-radius: 999px;
	background: color-mix(in srgb, var(--bl-accent) 12%, transparent);
	font-size: .78rem;
	font-weight: 650;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--bl-accent);
	margin-bottom: 1.1em;
}
.bl-eyebrow::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}
.bl-theme-dark .bl-eyebrow,
.bl-bg-image .bl-eyebrow,
.bl-bg-video .bl-eyebrow {
	background: rgba(255, 255, 255, .14);
	color: #fff;
}

/* ---------- backgrounds ---------- */

/* Запасной фон на случай, если тип фона выбран, а сами цвета не заданы:
   без него background мог получить пустое значение и стать прозрачным —
   тогда текст под тёмную тему рисовался бы светлым поверх белой страницы. */
.bl-bg-solid, .bl-bg-gradient { background: var(--bl-bg, var(--bl-theme-bg, transparent)); }

.bl-bg-image, .bl-bg-video {
	background-image: var(--bl-bg-image);
	background-size: cover;
	background-position: center;
}
.bl-bg-image .bl-overlay,
.bl-bg-video .bl-overlay {
	position: absolute;
	inset: 0;
	background: var(--bl-overlay-color, #000);
	opacity: var(--bl-overlay-opacity, .4);
	z-index: 0;
}
.bl-bg-video video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
}
.bl-bg-image.bl-theme-light,
.bl-bg-video.bl-theme-light,
.bl-bg-image.bl-theme-dark,
.bl-bg-video.bl-theme-dark {
	--bl-text: var(--bl-color-text-dark);
	--bl-muted: var(--bl-color-muted-dark);
}

/* ---------- media crop (universal image wrapper — fixes "squished photo" once and for all) ---------- */

.bl-media-crop {
	display: block;
	aspect-ratio: var(--ratio, 16 / 9);
	border-radius: var(--bl-card-radius);
	overflow: hidden;
	box-shadow: var(--bl-shadow, none);
}
.bl-media-crop img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---------- buttons ---------- */

.bl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55em;
	padding: .95em 1.9em;
	/* У кнопки собственный радиус: настройка «Форма кнопок» и button_radius
	   из своих стилей не должны зависеть от скругления карточек. */
	border-radius: var(--bl-btn-radius, var(--bl-card-radius));
	font-weight: 650;
	font-size: 1rem;
	line-height: 1.2;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: transform .18s cubic-bezier(.2, .8, .3, 1), box-shadow .18s ease, background .18s ease;
}
.bl-btn-primary {
	background: var(--bl-accent);
	color: var(--bl-accent-contrast);
	box-shadow: 0 4px 14px color-mix(in srgb, var(--bl-accent) 35%, transparent);
}
.bl-btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px color-mix(in srgb, var(--bl-accent) 45%, transparent);
}
.bl-btn-secondary {
	background: transparent;
	color: var(--bl-text);
	box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 28%, transparent);
}
.bl-btn-secondary:hover {
	transform: translateY(-2px);
	background: color-mix(in srgb, currentColor 6%, transparent);
	box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 45%, transparent);
}
.bl-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--bl-accent) 50%, transparent); outline-offset: 3px; }

/* ---------- animation ---------- */

@media (prefers-reduced-motion: no-preference) {
	.bl-anim-fade-up { animation: bl-fade-up .6s ease both; }
	.bl-anim-stagger > * { animation: bl-fade-up .6s ease both; }
	.bl-anim-stagger > *:nth-child(2) { animation-delay: .08s; }
	.bl-anim-stagger > *:nth-child(3) { animation-delay: .16s; }
	.bl-anim-stagger > *:nth-child(4) { animation-delay: .24s; }
	.bl-anim-stagger > *:nth-child(5) { animation-delay: .32s; }
	.bl-anim-stagger > *:nth-child(n+6) { animation-delay: .4s; }
}
@keyframes bl-fade-up {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ---------- section dividers ---------- */

.bl-divider-top, .bl-divider-bottom { position: relative; }
.bl-divider-top::before, .bl-divider-bottom::after {
	content: "";
	position: absolute;
	left: 0; right: 0;
	height: clamp(24px, 5vw, 64px);
	background: var(--bl-bg, #fff);
	pointer-events: none;
}
.bl-divider-top::before { top: -1px; clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.bl-divider-bottom::after { bottom: -1px; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.bl-divider-wave.bl-divider-top::before { clip-path: ellipse(60% 100% at 50% 100%); }
.bl-divider-wave.bl-divider-bottom::after { clip-path: ellipse(60% 100% at 50% 0%); }
.bl-divider-curve.bl-divider-top::before { clip-path: ellipse(100% 100% at 50% 100%); }
.bl-divider-curve.bl-divider-bottom::after { clip-path: ellipse(100% 100% at 50% 0%); }

/* ---------- декор фона ----------
   Лёгкий узор поверх фона секции: оживляет длинные светлые страницы, где
   иначе идёт подряд десяток одинаковых белых блоков. Рисуется акцентом
   через color-mix, поэтому каждая ниша получает свой оттенок без правок.

   Узор лежит на ::before, а он же занят разделителем сверху, — при
   одновременном включении декор молча уступает, чтобы не ломать срез. */
.bl-decor { position: relative; isolation: isolate; }

.bl-decor:not(.bl-divider-top)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

/* Мягкие пятна: два размытых круга по углам — самый «живой» вариант. */
.bl-decor-blobs:not(.bl-divider-top)::before {
	background:
		radial-gradient(42rem 30rem at 10% 4%, color-mix(in srgb, var(--bl-accent) calc(26% * var(--bl-decor-strength, 1)), transparent), transparent 72%),
		radial-gradient(34rem 26rem at 94% 86%, color-mix(in srgb, var(--bl-accent) calc(20% * var(--bl-decor-strength, 1)), transparent), transparent 72%);
}

.bl-decor-grid:not(.bl-divider-top)::before {
	background-image:
		linear-gradient(to right, color-mix(in srgb, var(--bl-accent) calc(16% * var(--bl-decor-strength, 1)), transparent) 1px, transparent 1px),
		linear-gradient(to bottom, color-mix(in srgb, var(--bl-accent) calc(16% * var(--bl-decor-strength, 1)), transparent) 1px, transparent 1px);
	background-size: 56px 56px;
	/* К самым краям сетка растворяется, но покрывает почти всю секцию —
	   иначе на широком экране узор виден только бледным пятном в центре. */
}

.bl-decor-dots:not(.bl-divider-top)::before {
	background-image: radial-gradient(color-mix(in srgb, var(--bl-accent) calc(32% * var(--bl-decor-strength, 1)), transparent) 1.7px, transparent 1.7px);
	background-size: 24px 24px;
}

.bl-decor-rays:not(.bl-divider-top)::before {
	background: repeating-linear-gradient(
		115deg,
		color-mix(in srgb, var(--bl-accent) calc(13% * var(--bl-decor-strength, 1)), transparent) 0 3px,
		transparent 3px 42px
	);
}

/* Зерно: SVG-шум строкой, чтобы не тащить картинку в сборку. */
.bl-decor-grain:not(.bl-divider-top)::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
	opacity: .65;
	mix-blend-mode: multiply;
}

.bl-theme-dark.bl-decor-grain:not(.bl-divider-top)::before { mix-blend-mode: soft-light; opacity: .85; }

/* Фигуры, волны, кольца, крестики — контурные SVG-паттерны вместо градиентов.
   Рисуются stroke="currentColor": цвет задаём через `color`, а не отдельным
   параметром внутри SVG, — тогда та же color-mix() схема, что у остальных
   пресетов, работает и здесь без второй палитры на поддержке. */

/* Рассеянные пресеты (сетка, точки, кольца, крестики, фигуры) раньше гасли
   виньеткой к краям секции, но фигура виньетки всё равно накрывала центр —
   ровно там, где обычно сидит заголовок и первая карточка. От этого узор
   лез прямо сквозь буквы. Прячем декор в двух противоположных углах, как
   у «пятен», — по центру, где читают текст, теперь всегда чисто. */
.bl-decor-grid:not(.bl-divider-top)::before,
.bl-decor-dots:not(.bl-divider-top)::before,
.bl-decor-rings:not(.bl-divider-top)::before,
.bl-decor-cross:not(.bl-divider-top)::before,
.bl-decor-shapes:not(.bl-divider-top)::before {
	-webkit-mask-image:
		radial-gradient(34% 42% at 2% 0%, #000, transparent 62%),
		radial-gradient(34% 42% at 98% 100%, #000, transparent 62%);
	mask-image:
		radial-gradient(34% 42% at 2% 0%, #000, transparent 62%),
		radial-gradient(34% 42% at 98% 100%, #000, transparent 62%);
}

.bl-decor-shapes:not(.bl-divider-top)::before {
	color: color-mix(in srgb, var(--bl-accent) calc(13% * var(--bl-decor-strength, 1)), transparent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='currentColor' stroke-width='1.4'%3E%3Crect x='20' y='26' width='20' height='20' transform='rotate(18 30 36)'/%3E%3Ccircle cx='168' cy='44' r='10'/%3E%3Cpath d='M96 138l15 24h-30z' transform='rotate(-6 96 150)'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 220px 220px;
}

/* Волны раньше не маскировались — считалось, что направленный узор не
   мешает читать. На практике полосы всё равно шли прямо сквозь заголовок
   секции. Прячем волны в узкую полосу у верха и низа, а всю среднюю часть,
   где обычно и живёт заголовок с контентом, оставляем чистой. */
.bl-decor-waves:not(.bl-divider-top)::before {
	color: color-mix(in srgb, var(--bl-accent) calc(11% * var(--bl-decor-strength, 1)), transparent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='64' viewBox='0 0 240 64'%3E%3Cpath d='M0 32 Q30 12 60 32 T120 32 T180 32 T240 32' fill='none' stroke='currentColor' stroke-width='1.6'/%3E%3C/svg%3E");
	background-size: 240px 64px;
	-webkit-mask-image: linear-gradient(to bottom, #000 0, transparent 16%, transparent 84%, #000 100%);
	mask-image: linear-gradient(to bottom, #000 0, transparent 16%, transparent 84%, #000 100%);
}

.bl-decor-rings:not(.bl-divider-top)::before {
	color: color-mix(in srgb, var(--bl-accent) calc(15% * var(--bl-decor-strength, 1)), transparent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='currentColor' stroke-width='1.5'%3E%3Ccircle cx='32' cy='36' r='18'/%3E%3Ccircle cx='104' cy='96' r='11'/%3E%3Ccircle cx='112' cy='22' r='6'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 140px 140px;
}

.bl-decor-cross:not(.bl-divider-top)::before {
	color: color-mix(in srgb, var(--bl-accent) calc(11% * var(--bl-decor-strength, 1)), transparent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cpath d='M42 34v16M34 42h16' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
	background-size: 84px 84px;
}

/* ==========================================================================
   Site chrome — header & footer (не блок, но использует ту же систему токенов)
   ========================================================================== */

.bl-site-header {
	background: color-mix(in srgb, var(--bl-color-bg-light) 88%, transparent);
	backdrop-filter: saturate(180%) blur(14px);
	color: var(--bl-color-text-light);
	position: relative;
	z-index: 100;
	border-bottom: 1px solid transparent;
	transition: box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.bl-site-header.is-scrolled {
	border-bottom-color: var(--bl-color-border-light);
	box-shadow: 0 4px 24px rgba(16, 16, 25, .06);
}
.bl-site-header.bl-theme-dark { background: var(--bl-color-bg-dark); color: var(--bl-color-text-dark); }
.bl-site-header.bl-theme-transparent { position: absolute; inset-inline: 0; top: 0; background: transparent; color: #fff; }
.bl-site-header--sticky { position: sticky; top: 0; }

.bl-site-header__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding-block: 1rem;
}

.bl-site-header__logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	color: inherit;
	text-decoration: none;
	font-weight: 800;
	font-size: 1.2rem;
	letter-spacing: -0.02em;
	white-space: nowrap;
}
.bl-site-header__logo img { max-height: 40px; width: auto; }

.bl-site-header__nav { flex-grow: 1; }
.bl-site-header__menu { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
.bl-site-header__menu a {
	position: relative;
	color: inherit;
	text-decoration: none;
	font-weight: 550;
	font-size: .9375rem;
	padding-block: .35rem;
	transition: color .2s ease;
}
.bl-site-header__menu a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--bl-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .25s cubic-bezier(.2, .8, .3, 1);
}
.bl-site-header__menu a:hover { color: var(--bl-accent); }
.bl-site-header__menu a:hover::after { transform: scaleX(1); }

.bl-site-header__actions { display: flex; align-items: center; gap: 1rem; margin-left: auto; flex-shrink: 0; }
.bl-site-header__phone {
	color: inherit;
	font-weight: 700;
	font-size: 1.0625rem;
	letter-spacing: -0.01em;
	text-decoration: none;
	white-space: nowrap;
	transition: color .2s ease;
}
.bl-site-header__phone:hover { color: var(--bl-accent); }
.bl-site-header__cta { padding: .7em 1.4em; font-size: .9375rem; }

@media (max-width: 1100px) { .bl-site-header__phone { display: none; } }
@media (max-width: 560px) { .bl-site-header__cta { display: none; } }

.bl-site-header__burger { display: none; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; padding: .5rem; }
.bl-site-header__burger span { width: 22px; height: 2px; background: currentColor; }

/* Раскладку мобильного меню целиком задаёт chrome.css — здесь только бургер,
   иначе старые правила выпадающего списка перебивали бы полноэкранную панель. */
@media (max-width: 1023px) {
	.bl-site-header__burger { display: flex; }
}

.bl-site-footer {
	padding-block: clamp(3rem, 6vw, 4.5rem);
	background: var(--bl-color-bg-dark);
	color: var(--bl-color-text-dark);
	position: relative;
}
.bl-site-footer::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background: linear-gradient(90deg, var(--bl-accent), color-mix(in srgb, var(--bl-accent) 25%, transparent));
}
.bl-site-footer__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
}
@media (min-width: 782px) { .bl-site-footer__inner { grid-template-columns: 1.4fr 1fr 1fr; } }

.bl-site-footer .bl-site-header__logo { color: #fff; margin-bottom: .5rem; }

.bl-site-footer__menu { list-style: none; margin: 1.1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.bl-site-footer__menu a,
.bl-site-footer__contact {
	color: var(--bl-color-muted-dark);
	text-decoration: none;
	font-size: .9375rem;
	transition: color .2s ease;
}
.bl-site-footer__menu a:hover,
.bl-site-footer__contact:hover { color: #fff; }
.bl-site-footer__contact { display: block; margin-bottom: .6rem; font-weight: 600; }

.bl-site-footer__socials { display: flex; gap: .6rem; margin-top: 1.1rem; }
.bl-site-footer__socials a {
	width: 2.4rem; height: 2.4rem;
	border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(255, 255, 255, .08);
	transition: background .2s ease, transform .2s ease;
}
.bl-site-footer__socials a:hover { background: var(--bl-accent); transform: translateY(-2px); }
.bl-site-footer__socials img { width: 1.15rem; height: 1.15rem; object-fit: contain; }

.bl-site-footer__legal {
	font-size: .8125rem;
	line-height: 1.6;
	color: var(--bl-color-muted-dark);
	display: flex;
	flex-direction: column;
	gap: .6rem;
}
.bl-site-footer__legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.bl-site-footer__legal a:hover { color: #fff; }

/* ---------- страница-каталог демо ---------- */

.bl-catalog-group {
	margin: clamp(2.5rem, 5vw, 4rem) 0 1.5rem;
	font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem);
	font-weight: 750;
	letter-spacing: -0.02em;
	padding-bottom: .75rem;
	border-bottom: 1px solid var(--bl-color-border-light);
}

.bl-catalog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 1rem;
}

.bl-catalog-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1.25rem;
	min-height: 116px;
	padding: 1.4rem 1.5rem;
	border-radius: 16px;
	background: #fbfbfd;
	border: 1px solid var(--bl-color-border-light);
	color: inherit;
	text-decoration: none;
	transition: transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s ease, border-color .22s ease;
}
.bl-catalog-card:hover {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--bl-accent) 45%, transparent);
	box-shadow: var(--bl-shadow-medium);
}
.bl-catalog-card__title { font-weight: 650; font-size: 1.0625rem; line-height: 1.3; letter-spacing: -0.01em; }
.bl-catalog-card__go { font-size: .8125rem; font-weight: 650; color: var(--bl-accent); }

/* ---------- shared lightbox (используется галереей и сертификатами) ---------- */

.bl-gallery-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.85);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2000;
	padding: 2rem;
}
.bl-gallery-lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; }
.bl-gallery-lightbox[hidden] { display: none; }

/* ---------- visibility ---------- */

@media (max-width: 781px) { .bl-hide-mobile { display: none !important; } }
@media (min-width: 782px) { .bl-hide-desktop { display: none !important; } }

/* --- Фильтр по категориям (витрины из записей) --- */
.bl-filter {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
}

.bl-filter__btn {
	padding: .5rem 1.05rem;
	border: 1px solid var(--bl-border);
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: .88rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.bl-filter__btn:hover { border-color: var(--bl-accent); color: var(--bl-accent); }

.bl-filter__btn.is-active {
	background: var(--bl-accent);
	border-color: var(--bl-accent);
	color: #fff;
}

.bl-filter-hidden { display: none !important; }

/* --- Общее для карточек-витрин --- */
.bl-card-features {
	display: grid;
	gap: .35rem;
	margin: .25rem 0 0;
	padding: 0;
	list-style: none;
	font-size: .87rem;
}

.bl-card-features li {
	position: relative;
	padding-left: 1.35rem;
	line-height: 1.5;
}

.bl-card-features li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .45em;
	width: .5rem;
	height: .28rem;
	border-left: 2px solid var(--bl-accent);
	border-bottom: 2px solid var(--bl-accent);
	transform: rotate(-45deg);
}

.bl-empty {
	padding: 2rem;
	border: 1px dashed var(--bl-border);
	border-radius: var(--bl-card-radius);
	text-align: center;
	opacity: .65;
}

.bl-blog-card__excerpt {
	margin: .35rem 0 0;
	font-size: .88rem;
	line-height: 1.6;
	opacity: .75;
}

/* --- Внутренние страницы: услуги, работы, каталог, блог --- */
.bl-page-hero {
	--bl-bg: linear-gradient(135deg, color-mix(in srgb, var(--bl-accent) 88%, #000 45%), color-mix(in srgb, var(--bl-accent) 55%, #000 65%));
	background: var(--bl-bg);
}

.bl-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .45rem;
	margin-bottom: .9rem;
	font-size: .82rem;
	opacity: .75;
}

.bl-crumbs a { color: inherit; text-decoration: none; }
.bl-crumbs a:hover { text-decoration: underline; }
.bl-crumbs > *:not(:last-child)::after { content: "/"; margin-left: .45rem; opacity: .5; }

.bl-single {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	grid-template-columns: minmax(0, 1fr) 340px;
	align-items: start;
}

.bl-single__cover { display: block; margin-bottom: 1.5rem; border-radius: var(--bl-card-radius); overflow: hidden; }

.bl-single__aside { position: sticky; top: 100px; }

.bl-single__card {
	padding: clamp(1.25rem, 2.2vw, 1.75rem);
	border-radius: var(--bl-card-radius);
	background: var(--bl-surface);
	border: 1px solid var(--bl-border);
}

.bl-single__price {
	display: block;
	font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
	font-weight: 780;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.bl-single__price small { display: block; font-size: .78rem; font-weight: 500; opacity: .6; letter-spacing: 0; margin-top: .2rem; }
.bl-single__price del { font-size: .95rem; font-weight: 500; opacity: .45; margin-left: .5rem; }

.bl-single__meta { margin: .75rem 0 0; font-size: .9rem; opacity: .8; }
.bl-single__note { margin: .9rem 0 1rem; font-size: .88rem; line-height: 1.6; opacity: .75; }

.bl-card-badge--static { position: static; display: inline-block; margin-bottom: .75rem; }

.bl-single__gallery,
.bl-single__thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: .75rem;
	margin: 1rem 0 2rem;
}

.bl-single__gallery a,
.bl-single__thumbs a {
	display: block;
	overflow: hidden;
	border-radius: calc(var(--bl-card-radius) * .7);
}

.bl-card-features--lg { font-size: .96rem; gap: .55rem; margin-bottom: 2rem; }

.bl-prose { font-size: 1rem; line-height: 1.75; }
.bl-prose > * + * { margin-top: 1.1em; }
.bl-prose h2 { font-size: clamp(1.3rem, 1.1rem + .7vw, 1.7rem); font-weight: 720; letter-spacing: -0.02em; margin-top: 1.8em; }
.bl-prose h3 { font-size: 1.15rem; font-weight: 700; margin-top: 1.6em; }
.bl-prose ul, .bl-prose ol { padding-left: 1.3rem; }
.bl-prose li + li { margin-top: .4em; }
.bl-prose img { border-radius: var(--bl-card-radius); }
.bl-prose blockquote {
	margin-left: 0;
	padding: .25rem 0 .25rem 1.25rem;
	border-left: 3px solid var(--bl-accent);
	font-style: italic;
	opacity: .9;
}

.bl-project-meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1rem;
	margin-bottom: 2rem;
	padding: 1.25rem;
	border-radius: var(--bl-card-radius);
	background: color-mix(in srgb, var(--bl-accent) 7%, transparent);
}

.bl-project-meta span { display: block; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; opacity: .6; margin-bottom: .2rem; }
.bl-project-meta strong { font-size: 1.05rem; font-weight: 700; }

.bl-project-case {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1rem;
	margin: 2rem 0;
}

.bl-project-case__item {
	padding: 1.35rem;
	border-radius: var(--bl-card-radius);
	border: 1px solid var(--bl-border);
	background: var(--bl-surface);
}

.bl-project-case__item h2 { margin: 0 0 .5rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--bl-accent); }
.bl-project-case__item p { margin: 0; line-height: 1.65; }

.bl-project-case__item--accent {
	background: color-mix(in srgb, var(--bl-accent) 10%, transparent);
	border-color: color-mix(in srgb, var(--bl-accent) 30%, transparent);
}

.bl-product__specs--full { font-size: .95rem; max-width: 640px; }

/* Формы заявки и поиска */
.bl-lead-form {
	display: grid;
	gap: .6rem;
	margin-top: .5rem;
	max-width: 460px;
}

.bl-page-hero + * .bl-lead-form,
.bl-text-center .bl-lead-form { margin-inline: auto; }

.bl-lead-form input {
	width: 100%;
	padding: .8rem 1rem;
	border: 1px solid var(--bl-border);
	border-radius: calc(var(--bl-card-radius) * .6);
	background: var(--bl-surface);
	color: inherit;
	font: inherit;
	font-size: .95rem;
}

.bl-lead-form input:focus {
	outline: none;
	border-color: var(--bl-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--bl-accent) 22%, transparent);
}

.bl-lead-form button { width: 100%; }
.bl-lead-form__status:empty { display: none; }
.bl-lead-form__status { font-size: .88rem; font-weight: 600; color: var(--bl-accent); }
.bl-lead-form__policy { font-size: .74rem; line-height: 1.5; opacity: .55; }

.bl-search-form { display: flex; gap: .6rem; margin-bottom: 2rem; }
.bl-search-form input {
	flex: 1;
	padding: .8rem 1rem;
	border: 1px solid var(--bl-border);
	border-radius: calc(var(--bl-card-radius) * .6);
	background: var(--bl-surface);
	color: inherit;
	font: inherit;
}

.bl-search-results { display: grid; gap: .9rem; }

.bl-search-result {
	display: block;
	padding: 1.2rem 1.35rem;
	border: 1px solid var(--bl-border);
	border-radius: var(--bl-card-radius);
	background: var(--bl-surface);
	color: inherit;
	text-decoration: none;
	transition: border-color .2s ease, transform .2s ease;
}

.bl-search-result:hover { border-color: var(--bl-accent); transform: translateY(-2px); }
.bl-search-result__type { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--bl-accent); font-weight: 700; }
.bl-search-result h3 { margin: .3rem 0 .35rem; font-size: 1.1rem; }
.bl-search-result p { margin: 0; font-size: .9rem; opacity: .72; line-height: 1.6; }

.bl-404-links { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }

.bl-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	justify-content: center;
	margin-top: clamp(2rem, 4vw, 3rem);
}

.bl-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 .7rem;
	border: 1px solid var(--bl-border);
	border-radius: calc(var(--bl-card-radius) * .6);
	color: inherit;
	text-decoration: none;
	font-weight: 600;
	transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}

.bl-pagination .page-numbers:hover { border-color: var(--bl-accent); color: var(--bl-accent); }
.bl-pagination .page-numbers.current { background: var(--bl-accent); border-color: var(--bl-accent); color: #fff; }

@media (max-width: 900px) {
	.bl-single { grid-template-columns: 1fr; }
	.bl-single__aside { position: static; }
}

/* Единый размер для всех иконок набора — конкретные размеры задают блоки. */
.bl-icon {
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
}

/* --- Широкий контент: прокрутка вместо обрезки ---
   Секции блоков клипуются (overflow: clip), поэтому таблица шире экрана просто
   исчезала бы за краем. Обёртка даёт горизонтальную прокрутку и подсказку-тень. */
/* Таблица — карточка с рамкой и тенью, а не голая сетка на белом фоне:
   прежний вариант «подсвечивал» край скролла размытым тёмным пятном
   по обеим сторонам даже когда прокручивать было нечего — выглядело как грязь. */
.bl-table-scroll {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	border-radius: var(--bl-card-radius);
	border: var(--bl-border-width, 1px) solid var(--bl-border);
	background: var(--bl-surface);
	box-shadow: var(--bl-shadow, none);
}

.bl-table-scroll::-webkit-scrollbar { height: 6px; }
.bl-table-scroll::-webkit-scrollbar-track { background: transparent; }
.bl-table-scroll::-webkit-scrollbar-thumb {
	background: var(--bl-border);
	border-radius: 999px;
}

/* Элемент сетки по умолчанию не сжимается уже своего содержимого (min-width: auto),
   из-за чего широкая таблица растягивала колонку и вылезала за экран. */
.bl-table-scroll,
.bl-pricing-category,
.bl-services-grid > *,
.bl-products > *,
.bl-portfolio-grid > * { min-width: 0; }

.bl-table-scroll:focus-visible {
	outline: 2px solid var(--bl-accent);
	outline-offset: 2px;
}

.bl-table-scroll > table {
	min-width: 520px;
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
}

/* Общий premium-вид любой таблицы внутри обёртки: шапка выделена оттенком
   акцента, строки чередуются едва заметной подложкой. Специфичные правила
   блока (например цвет «да/нет» в сравнении) грузятся позже и переопределяют
   точечно — здесь только каркас. */
.bl-table-scroll thead th {
	background: color-mix(in srgb, var(--bl-accent) 7%, transparent);
	font-size: .76rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	border-bottom: 2px solid var(--bl-border);
}

.bl-table-scroll tbody tr:nth-child(even) {
	background: color-mix(in srgb, var(--bl-accent) 2.5%, transparent);
}

.bl-table-scroll tbody tr:last-child td { border-bottom: 0; }

/* Прайс из двух колонок помещается и без прокрутки — ему достаточно компактных отступов. */
@media (max-width: 560px) {
	.bl-table-scroll > .bl-pricing-table { min-width: 0; }
	.bl-pricing-table td { padding: .85em .5em; font-size: .88rem; }
	.bl-pricing-table__price { font-size: .92rem; }
}

/* ==========================================================================
   Свои стили блока
   Все значения приходят CSS-переменными на саму секцию, поэтому правила ниже
   безопасны: без включённого переключателя переменные не заданы и ничего не меняется.
   ========================================================================== */

.bl-custom .bl-heading,
.bl-custom h1,
.bl-custom h2,
.bl-custom h3,
.bl-custom h4 {
	color: var(--bl-heading-color, inherit);
	font-family: var(--bl-font-heading);
	font-weight: var(--bl-heading-weight);
}

.bl-custom,
.bl-custom p,
.bl-custom li,
.bl-custom dd {
	font-family: var(--bl-font-body);
}

.bl-custom a:not(.bl-btn) { color: var(--bl-link, var(--bl-accent)); }

.bl-headings--uppercase .bl-heading,
.bl-headings--uppercase h1,
.bl-headings--uppercase h2,
.bl-headings--uppercase h3 { text-transform: uppercase; letter-spacing: .01em; }

.bl-headings--lowercase .bl-heading,
.bl-headings--lowercase h1,
.bl-headings--lowercase h2,
.bl-headings--lowercase h3 { text-transform: lowercase; }

/* --- Варианты кнопок внутри блока --- */
.bl-btns--outline .bl-btn-primary {
	background: transparent;
	color: var(--bl-accent);
	border: 2px solid var(--bl-accent);
	box-shadow: none;
}

.bl-btns--outline .bl-btn-primary:hover {
	background: var(--bl-accent);
	color: var(--bl-accent-contrast, #fff);
}

.bl-btns--soft .bl-btn-primary {
	background: color-mix(in srgb, var(--bl-accent) 14%, transparent);
	color: var(--bl-accent);
	border: 0;
	box-shadow: none;
}

.bl-btns--soft .bl-btn-primary:hover {
	background: color-mix(in srgb, var(--bl-accent) 22%, transparent);
}

.bl-btns--link .bl-btn {
	background: none;
	border: 0;
	padding-inline: 0;
	color: var(--bl-accent);
	box-shadow: none;
	font-weight: 700;
}

.bl-btns--link .bl-btn::after {
	content: "→";
	margin-left: .45rem;
	transition: transform .2s ease;
	display: inline-block;
}

.bl-btns--link .bl-btn:hover::after { transform: translateX(4px); }

/* Второстепенный текст внутри блока со своими стилями */
.bl-custom .bl-subheading,
.bl-custom small,
.bl-custom .bl-muted { color: var(--bl-muted, inherit); }

/* --- Бейдж на карточке ---
   Используется и блоками, и шаблонами архивов, поэтому живёт в общих стилях:
   раньше правило лежало только в блоке каталога, и на странице без него
   бейдж оставался неоформленным. */
.bl-card-badge {
	position: absolute;
	top: .75rem;
	left: .75rem;
	z-index: 2;
	max-width: calc(100% - 1.5rem);
	padding: .3rem .7rem;
	border-radius: var(--bl-radius-pill);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--bl-accent-contrast, #fff);
	background: var(--bl-accent);
	box-shadow: 0 4px 14px rgba(12, 16, 28, .22);
	overflow-wrap: anywhere;
}

.bl-card-badge--static { position: static; display: inline-block; max-width: none; margin-bottom: .75rem; }

/* --- Акцент на тёмной теме ---
   Фирменный цвет, подобранный для белого фона, на тёмном даёт около 3:1
   и плохо читается в мелком тексте. Осветляем — оттенок остаётся узнаваемым. */
.bl-theme-dark {
	--bl-accent-readable: color-mix(in srgb, var(--bl-accent) 72%, #ffffff);
}

.bl-theme-light {
	--bl-accent-readable: var(--bl-accent);
}

/* --- Карусель без JS ---
   Swiper инициализируется скриптом. Пока его нет, слайды в флекс-контейнере
   сжимаются в полоски, поэтому до инициализации дорожка прокручивается вручную. */
.bl-swiper:not(.swiper-initialized) > .swiper-wrapper {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: .5rem;
}

.bl-swiper:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide {
	flex: 0 0 min(88%, 320px);
	scroll-snap-align: start;
}

@media (min-width: 782px) {
	.bl-swiper:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide { flex-basis: min(46%, 360px); }
}

/* Карусели из карточек: сама карточка и есть слайд. height:auto отдаёт высоту
   флекс-дорожке Swiper, и карточки в ряду выравниваются по самой высокой —
   иначе низ карточки и кнопка у соседей разъезжаются. */
.bl-swiper--cards .swiper-slide { height: auto; min-width: 0; }


/* ==========================================================================
   Каталог шаблонов на главной
   ========================================================================== */

.bl-catalog-group {
	margin: clamp(2.5rem, 5vw, 4rem) 0 1.5rem;
	font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem);
	font-weight: 750;
	letter-spacing: -0.02em;
	padding-bottom: .75rem;
	border-bottom: 1px solid var(--bl-color-border-light);
}

.bl-catalog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: 1rem;
}

.bl-catalog-card {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	min-width: 0;
	padding: 1.25rem;
	border: 1px solid var(--bl-color-border-light);
	border-radius: 14px;
	background: var(--bl-color-bg-light);
	color: inherit;
	text-decoration: none;
	transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.bl-catalog-card:hover {
	transform: translateY(-4px);
	border-color: var(--card-accent, var(--bl-accent));
	box-shadow: 0 14px 34px rgba(12, 16, 28, .12);
}

/* Превью первого экрана — во всю ширину карточки, поверх внутреннего отступа */
.bl-catalog-card__shot {
	display: block;
	margin: -1.25rem -1.25rem .4rem;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 13px 13px 0 0;
	border-bottom: 1px solid var(--bl-color-border-light);
	background: var(--bl-color-border-light);
}

.bl-catalog-card__shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
	transition: transform .5s ease;
}

.bl-catalog-card:hover .bl-catalog-card__shot img { transform: scale(1.03); }

.bl-catalog-card__top { display: flex; align-items: center; gap: .7rem; min-width: 0; }

.bl-catalog-card__mark {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 9px;
	background: var(--card-accent, var(--bl-accent));
	color: #fff;
	font-size: .9rem;
	font-weight: 800;
}

.bl-catalog-card__brand { display: grid; min-width: 0; }

.bl-catalog-card__name {
	font-size: 1rem;
	font-weight: 720;
	letter-spacing: -0.01em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bl-catalog-card__niche {
	font-size: .76rem;
	color: var(--bl-color-muted-light);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bl-catalog-card__tagline {
	font-size: .86rem;
	line-height: 1.5;
	color: var(--bl-color-muted-light);
	overflow-wrap: anywhere;
}

.bl-catalog-card__meta {
	margin-top: auto;
	padding-top: .5rem;
	font-size: .72rem;
	color: var(--bl-color-muted-light);
	opacity: .8;
}

.bl-catalog-card__go {
	font-size: .82rem;
	font-weight: 650;
	color: var(--card-accent, var(--bl-accent));
}