/* Блок про онлайн-рекламу [marka48_ads_showcase]: світле тло, багато повітря, як Apple Card на apple.com. */
.bba-ads {
	--ad-bg: #f5f5f7;
	--ad-tile: #fff;
	--ad-text: #1d1d1f;
	--ad-muted: #6e6e73;
	--ad-blue: #0071e3;
	--ad-link: #0066cc;
	--ad-line: #d2d2d7;
	background: var(--ad-bg);
	color: var(--ad-text);
	/* Шрифти сайту (тема Woodmart: Inter Tight); без теми — успадковані. */
	font-family: var(--wd-text-font, inherit);
	-webkit-font-smoothing: antialiased;
	overflow: hidden;
	padding: 72px 12px 12px;
}
.bba-ads *, .bba-ads *::before, .bba-ads *::after { box-sizing: border-box; }
.bba-ads h2, .bba-ads h3, .bba-ads p { text-transform: none; }

/* Головний екран */
.bba-ads-hero { margin: 0 auto; max-width: 980px; padding: 0 10px; text-align: center; }
.bba-ads-eyebrow { color: var(--ad-muted); font-size: 17px; font-weight: 500; margin: 0 0 10px; }
.bba-ads-title {
	color: var(--ad-text);
	font-family: var(--wd-title-font, inherit);
	font-size: clamp(38px, 4.6vw, 56px);
	font-weight: 600;
	line-height: 1.1;
	margin: 0 0 14px;
}
.bba-ads-lead { color: var(--ad-text); font-size: clamp(18px, 2vw, 24px); line-height: 1.35; margin: 0 auto 26px; max-width: 30em; }
.bba-ads-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.bba-ads a.bba-ads-btn {
	border-radius: 980px;
	font-size: 17px;
	font-weight: 400;
	line-height: 1;
	padding: 14px 24px;
	text-decoration: none;
	transition: background-color .2s, color .2s, transform .2s;
}
.bba-ads a.bba-ads-btn-primary { background: var(--ad-blue); color: #fff; }
.bba-ads a.bba-ads-btn-primary:hover { background: #0077ed; color: #fff; }
.bba-ads a.bba-ads-btn-ghost { border: 1px solid var(--ad-blue); color: var(--ad-blue); }
.bba-ads a.bba-ads-btn-ghost:hover { background: var(--ad-blue); color: #fff; }
.bba-ads a.bba-ads-btn:active { transform: scale(.98); }
.bba-ads a:focus-visible { outline: 2px solid var(--ad-blue); outline-offset: 3px; }

/* Нахилена картка результатів (як Apple Card) з тінню на «підлозі» */
.bba-ads-stage { height: 420px; margin: 30px auto 0; max-width: 680px; perspective: 1600px; position: relative; }
.bba-ads-card {
	animation: bba-ads-float 7s ease-in-out infinite;
	background: linear-gradient(145deg, #fff 0%, #f6f6f8 60%, #ececf0 100%);
	border: 1px solid rgba(0, 0, 0, .04);
	border-radius: 26px;
	box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0, 0, 0, .04);
	left: 50%;
	padding: 26px 28px 22px;
	position: absolute;
	text-align: left;
	top: 20px;
	transform: translateX(-50%) rotateX(42deg) rotateZ(-24deg);
	transform-style: preserve-3d;
	width: 540px;
	z-index: 1;
}
.bba-ads-shadow {
	background: radial-gradient(closest-side, rgba(0, 0, 0, .22), transparent);
	bottom: 30px;
	filter: blur(14px);
	height: 70px;
	left: 50%;
	position: absolute;
	transform: translateX(-38%) rotate(-14deg);
	width: 420px;
}
.bba-ads-card-head { align-items: center; display: flex; gap: 10px; margin-bottom: 12px; }
.bba-ads-card-dot { background: conic-gradient(#0071e3, #34c759, #ff9f0a, #0071e3); border-radius: 50%; height: 14px; width: 14px; }
.bba-ads-card-head strong { font-size: 15px; font-weight: 600; }
.bba-ads-card-head em { color: var(--ad-muted); font-size: 13px; font-style: normal; margin-left: auto; }
.bba-ads-funnel { display: grid; gap: 8px; grid-template-columns: repeat(4, 1fr); margin: 14px 0 12px; }
.bba-ads-funnel div { border-radius: 10px; color: #fff; min-width: 0; padding: 9px 10px 10px; }
.bba-ads-funnel .is-blue { background: #1a73e8; }
.bba-ads-funnel .is-red { background: #d93025; }
.bba-ads-funnel .is-yellow { background: #f9ab00; }
.bba-ads-funnel .is-green { background: #1e8e3e; }
.bba-ads-funnel span { display: block; font-size: 11px; line-height: 1.25; margin-bottom: 4px; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bba-ads-funnel b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.bba-ads-chart { display: block; height: 110px; overflow: visible; width: 100%; }
.bba-ads-grid { stroke: #e3e3e8; stroke-width: 1; vector-effect: non-scaling-stroke; }
.bba-ads-line { fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linejoin: round; stroke-width: 2.2; transition: stroke-dashoffset 2.2s cubic-bezier(.4, 0, .2, 1); }
.bba-ads-line:nth-of-type(3) { transition-delay: .15s; }
.bba-ads-line:nth-of-type(4) { transition-delay: .3s; }
.bba-ads-line:nth-of-type(5) { transition-delay: .45s; }
.bba-ads.is-in .bba-ads-line { stroke-dashoffset: 0; }
@keyframes bba-ads-float {
	0%, 100% { transform: translateX(-50%) rotateX(42deg) rotateZ(-24deg) translateZ(0); }
	50% { transform: translateX(-50%) rotateX(40deg) rotateZ(-22deg) translateZ(14px); }
}

/* Ціна під кнопкою і джерела на картці результатів */
.bba-ads-price-line { color: var(--ad-muted); font-size: 15px; margin: 14px 0 0; }
.bba-ads-price-line b { color: var(--ad-text); font-weight: 600; }
.bba-ads-src { display: flex; gap: 6px; }
.bba-ads-src span { border-radius: 980px; font-size: 12px; font-weight: 500; padding: 4px 10px; }
.bba-ads-src span { background: #ececf0; color: var(--ad-muted); }
.bba-ads-src .is-on { background: #1a73e8; color: #fff; box-shadow: 0 4px 12px rgba(26, 115, 232, .3); }

/* Три плитки каналів */
.bba-ads-tiles { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); margin: 12px auto 0; max-width: 1440px; }
.bba-ads-tile {
	background: var(--ad-tile);
	border-radius: 18px;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 640px;
	overflow: hidden;
	padding: 52px 24px 0;
	text-align: center;
}
.bba-ads h3 { color: var(--ad-text); font-family: var(--wd-title-font, inherit); font-weight: 600; line-height: 1.1; margin: 0 0 10px; }
.bba-ads-tile h3 { font-size: clamp(30px, 3vw, 40px); }
.bba-ads-tile > p { color: var(--ad-text); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.4; margin: 0 0 16px; max-width: 22em; }
.bba-ads ul.bba-ads-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; list-style: none; margin: 0 0 14px; padding: 0; }
.bba-ads-chips li { margin: 0; }
/* Кнопка-питання до AI-чату: при наведенні лише підсвічується (розмір не змінюється, рядок не стрибає). */
.bba-ads ul.bba-ads-chips a { align-items: center; background: var(--ad-bg); border: 1px solid transparent; border-radius: 980px; color: var(--ad-text); cursor: pointer; display: inline-flex; font-size: 13px; gap: 6px; line-height: 1.3; padding: 6px 12px; text-decoration: none; transition: background-color .2s, border-color .2s, color .2s; }
.bba-ads ul.bba-ads-chips a:hover, .bba-ads ul.bba-ads-chips a:focus-visible { background: #fff; border-color: var(--ad-blue); color: var(--ad-blue); }
.bba-ads a.bba-ads-more { color: var(--ad-link); font-size: 17px; margin-bottom: 36px; text-decoration: none; }
.bba-ads a.bba-ads-more:hover { text-decoration: underline; }

/* Google: мобільна видача в телефоні — пошук із запитом, що друкується, вкладки, «Спонсоровані товари», оголошення. */
.bba-ads-g { background: #fff; border-radius: 34px 34px 0 0; color: #202124; font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; height: 430px; overflow: hidden; text-align: left; }
.bba-ads-g svg { fill: none; stroke: #5f6368; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.bba-ads-query { align-items: center; background: #fff; border-radius: 980px; box-shadow: 0 4px 14px rgba(32, 33, 36, .22), 0 1px 3px rgba(32, 33, 36, .18); display: flex; font-size: 13px; gap: 8px; height: 40px; margin: 4px 10px 6px; position: relative; z-index: 1; padding: 0 12px; }
.bba-ads-query i { border: 2px solid #5f6368; border-radius: 50%; flex: 0 0 12px; height: 12px; position: relative; }
.bba-ads-query i::after { background: #5f6368; bottom: -4px; content: ""; height: 2px; position: absolute; right: -4px; transform: rotate(45deg); width: 5px; }
.bba-ads-query span { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; }
.bba-ads-query span::after { animation: bba-ads-caret 1s steps(1) infinite; border-right: 2px solid #1a73e8; content: ""; margin-left: 1px; }
.bba-ads-query svg { flex: 0 0 18px; height: 18px; width: 18px; }
.bba-ads-query svg:first-of-type { stroke: #4285f4; }
.bba-ads-gtabs { border-bottom: 1px solid #ebebeb; display: flex; font-size: 12px; gap: 14px; overflow: hidden; padding: 0 14px; white-space: nowrap; }
.bba-ads-gtabs b, .bba-ads-gtabs span { padding: 4px 0 6px; }
.bba-ads-gtabs b { border-bottom: 3px solid #1a73e8; color: #1a73e8; font-weight: 500; }
.bba-ads-gtabs span { color: #5f6368; }
.bba-ads-glabel { font-size: 12.5px; font-weight: 700; padding: 7px 12px 4px; }
.bba-ads-shop { display: grid; gap: 6px; grid-template-columns: repeat(3, 82px); overflow: hidden; padding: 0 12px; }
.bba-ads-shop div { border: 1px solid #ebebeb; border-radius: 10px; display: flex; flex-direction: column; gap: 1px; overflow: hidden; padding-bottom: 6px; text-align: left; }
.bba-ads-shop img { aspect-ratio: 1; background: #f5f5f7; display: block; height: auto; margin-bottom: 3px; object-fit: cover; transition: opacity .3s ease; width: 100%; }
.bba-ads-shop b { font-size: 12px; font-weight: 700; padding: 0 6px; white-space: nowrap; }
.bba-ads-shop small { color: #5f6368; font-size: 10px; overflow: hidden; padding: 0 6px; text-overflow: ellipsis; white-space: nowrap; }
.bba-ads-shop em { color: #5f6368; font-size: 9.5px; font-style: normal; font-weight: 400; }
/* Новий запит — товари й оголошення змінюються з коротким згасанням. */
.bba-ads-search.is-swap .bba-ads-shop img, .bba-ads-search.is-swap .bba-ads-shop b, .bba-ads-search.is-swap .bba-ads-result strong, .bba-ads-search.is-swap .bba-ads-result > span { opacity: 0; }
.bba-ads-shop b, .bba-ads-result strong, .bba-ads-result > span { transition: opacity .3s ease; }
.bba-ads-result { display: flex; flex-direction: column; gap: 3px; padding: 0 12px; }
.bba-ads-gsite { align-items: center; display: flex; gap: 8px; margin-bottom: 2px; }
.bba-ads-gsite i { align-items: center; background: #e8f0fe; border-radius: 50%; color: #1a73e8; display: flex; flex: 0 0 24px; font-size: 12px; font-style: normal; font-weight: 700; height: 24px; justify-content: center; }
.bba-ads-gsite b { display: block; font-size: 12px; font-weight: 500; }
.bba-ads-gsite small { color: #4d5156; display: block; font-size: 10.5px; }
.bba-ads-result strong { color: #1a0dab; font-size: 15px; font-weight: 400; line-height: 1.3; }
.bba-ads-result > span { color: #4d5156; font-size: 12px; line-height: 1.4; }
.bba-ads-glinks { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 2px; }
.bba-ads-glinks em { color: #1a0dab; font-size: 12px; font-style: normal; }
@keyframes bba-ads-caret { 50% { border-color: transparent; } }

/* Meta і TikTok: телефон на нижньому краї плитки */
.bba-ads-phone {
	background: #1d1d1f;
	border-radius: 44px 44px 0 0;
	margin-top: auto;
	padding: 12px 12px 0;
	width: 280px;
}
/* Instagram: допис у стрічці (шрифт системний, як у застосунку). Висота екрана однакова з TikTok. */
.bba-ads-post { background: #fff; border-radius: 34px 34px 0 0; color: #000; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; height: 430px; overflow: hidden; text-align: left; }
.bba-ads-post svg { fill: none; stroke: #000; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.bba-ads-post-bar { align-items: center; display: flex; font-size: 12px; justify-content: space-between; padding: 12px 22px 6px; }
.bba-ads-post-bar b { font-weight: 600; }
.bba-ads-post-bar span { align-items: flex-end; display: flex; gap: 3px; }
.bba-ads-post-bar i { background: #000; border-radius: 1px; display: block; width: 3px; }
.bba-ads-post-bar i:nth-child(1) { height: 5px; }
.bba-ads-post-bar i:nth-child(2) { height: 7px; }
.bba-ads-post-bar i:nth-child(3) { border-radius: 2px; height: 9px; margin-left: 4px; width: 18px; }
.bba-ads-post-head { align-items: center; display: flex; gap: 9px; padding: 6px 12px 8px; }
.bba-ads-ava { background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5); border-radius: 50%; display: block; flex: 0 0 32px; height: 32px; padding: 2px; }
.bba-ads-ava span { background: linear-gradient(150deg, #e9efe6, #c9d6c2) padding-box; border: 2px solid #fff; border-radius: 50%; display: block; height: 100%; width: 100%; }
.bba-ads-post-head div { flex: 1 1 auto; line-height: 1.2; min-width: 0; }
.bba-ads-post-head b { display: block; font-size: 13px; font-weight: 600; }
.bba-ads-post-head small { color: #000; display: block; font-size: 11px; }
.bba-ads-post-head svg { fill: #000; flex: 0 0 18px; height: 18px; stroke: none; }
.bba-ads-post-img { aspect-ratio: 1; background: #f5f5f7; overflow: hidden; }
.bba-ads-post-img img { display: block; height: 100%; object-fit: cover; width: 100%; }
/* Карусель: стрічка фото зсувається вліво; лічильник «1/4» і крапки — як в Instagram. */
.bba-ads-carousel { position: relative; }
.bba-ads-track { display: flex; height: 100%; transition: transform .6s cubic-bezier(.4, 0, .2, 1); }
.bba-ads-track img { flex: 0 0 100%; }
.bba-ads-count { background: rgba(0, 0, 0, .62); border-radius: 12px; color: #fff; font-size: 11px; font-weight: 600; padding: 3px 8px; position: absolute; right: 10px; top: 10px; }
.bba-ads-post-acts { position: relative; }
.bba-ads-dots { display: flex; gap: 4px; left: 57%; position: absolute; transform: translateX(-50%); }
.bba-ads-dots i { background: #c7c7c7; border-radius: 50%; display: block; height: 6px; transition: background-color .3s; width: 6px; }
.bba-ads-dots i.is-on { background: #0095f6; }
.bba-ads-post-cta { align-items: center; background: #0095f6; color: #fff; display: flex; font-size: 13px; font-weight: 600; justify-content: space-between; padding: 9px 12px; }
.bba-ads-post-cta svg { height: 16px; stroke: #fff; stroke-width: 2.2; width: 16px; }
.bba-ads-post-acts { align-items: center; display: flex; gap: 14px; padding: 9px 12px 6px; }
.bba-ads-post-acts svg { height: 23px; width: 23px; }
.bba-ads-post-acts .is-like { animation: bba-ads-like 2.4s ease-in-out infinite; fill: #ff3040; stroke: #ff3040; transform-origin: center; }
.bba-ads-post-acts .is-save { margin-left: auto; }
.bba-ads-post-text { font-size: 12.5px; line-height: 1.35; padding: 0 12px; }
.bba-ads-post-text > b { display: block; font-weight: 600; margin-bottom: 3px; }
.bba-ads-post-text p { margin: 0 0 4px; }
.bba-ads-post-text p b { font-weight: 600; margin-right: 4px; }
.bba-ads-post-text small { color: #737373; font-size: 12px; }
@keyframes bba-ads-like { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.18); } }

.bba-ads-tt { border-radius: 34px 34px 0 0; height: 430px; overflow: hidden; position: relative; text-align: left; }
/* «Відео»: фото на весь екран з повільним наближенням і затемненням знизу під підпис. */
.bba-ads-tt-video { background: #1d1d1f; height: 100%; overflow: hidden; position: relative; }
.bba-ads-tt-video img { animation: bba-ads-zoom 9s ease-in-out infinite alternate; display: block; height: 100%; inset: 0; object-fit: cover; opacity: 0; position: absolute; transition: opacity 1s ease; width: 100%; }
.bba-ads-tt-video img.is-on { opacity: 1; }
.bba-ads-tt-cap p { transition: opacity .3s ease; }
.bba-ads-tt-video::after { background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .78) 100%); content: ""; inset: 0; position: absolute; }
/* TikTok: шрифт системний, усе біле поверх відео. */
.bba-ads-tt > :not(.bba-ads-tt-video) { color: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; position: absolute; z-index: 1; }
.bba-ads-tt svg { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.bba-ads-tt-bar { align-items: center; display: flex; font-size: 12px; justify-content: space-between; left: 22px; right: 22px; top: 12px; }
.bba-ads-tt-bar b { font-weight: 600; }
.bba-ads-tt-bar span { align-items: flex-end; display: flex; gap: 3px; }
.bba-ads-tt-bar i { background: #fff; border-radius: 1px; display: block; width: 3px; }
.bba-ads-tt-bar i:nth-child(1) { height: 5px; }
.bba-ads-tt-bar i:nth-child(2) { height: 7px; }
.bba-ads-tt-bar i:nth-child(3) { border-radius: 2px; height: 9px; margin-left: 4px; width: 18px; }
.bba-ads-tt-tabs { align-items: center; display: flex; font-size: 14px; gap: 16px; justify-content: center; left: 0; right: 0; top: 36px; text-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.bba-ads-tt-tabs span { opacity: .65; }
.bba-ads-tt-tabs b { font-weight: 600; position: relative; }
.bba-ads-tt-tabs b::after { background: #fff; border-radius: 2px; bottom: -6px; content: ""; height: 2px; left: 50%; position: absolute; transform: translateX(-50%); width: 24px; }
.bba-ads-tt-tabs svg { height: 20px; position: absolute; right: 14px; width: 20px; }
.bba-ads-tt-side { align-items: center; bottom: 60px; display: flex; flex-direction: column; gap: 8px; right: 7px; }
.bba-ads-tt-side > div { align-items: center; display: flex; flex-direction: column; gap: 1px; }
.bba-ads-tt-side svg { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55)); height: 25px; width: 25px; }
.bba-ads-tt-side svg.is-like { animation: bba-ads-like 2.4s ease-in-out infinite; fill: #fe2c55; stroke: #fe2c55; }
.bba-ads-tt-side small { font-size: 9.5px; font-weight: 600; text-shadow: 0 1px 3px rgba(0, 0, 0, .75); }
.bba-ads-tt-me { margin-bottom: 6px; position: relative; }
.bba-ads-tt-me i { background: linear-gradient(150deg, #f4e7d8, #d8b896); border: 1.5px solid #fff; border-radius: 50%; display: block; height: 32px; width: 32px; }
.bba-ads-tt-me em { background: #fe2c55; border-radius: 50%; bottom: -7px; font-size: 13px; font-style: normal; font-weight: 700; height: 16px; left: 50%; line-height: 15px; position: absolute; text-align: center; transform: translateX(-50%); width: 16px; }
.bba-ads-tt-disc { animation: bba-ads-spin 5s linear infinite; background: radial-gradient(circle, #d8b896 0 22%, #111 24% 100%); border: 5px solid #2a2a2a; border-radius: 50%; display: block; height: 27px; margin-top: 2px; width: 27px; }
.bba-ads-tt-cap { bottom: 58px; left: 12px; right: 54px; text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
.bba-ads-tt-cap b { display: block; font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.bba-ads-tt-cap p { font-size: 12px; line-height: 1.35; margin: 0 0 5px; }
.bba-ads-tt-cap small { display: block; font-size: 11px; }
.bba-ads-tt-cap .bba-ads-tt-sp { background: rgba(255, 255, 255, .22); border-radius: 3px; display: inline-block; margin-bottom: 5px; padding: 1px 5px; }
.bba-ads-tt-cap .bba-ads-tt-music { opacity: .9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bba-ads-tt-cap span { align-items: center; background: #fe2c55; border-radius: 4px; display: flex; font-size: 12.5px; font-weight: 600; justify-content: space-between; margin-top: 8px; padding: 7px 10px; text-shadow: none; }
.bba-ads-tt-cap span svg { height: 14px; stroke-width: 2.4; width: 14px; }
.bba-ads-tt-nav { align-items: center; background: #000; bottom: 0; display: flex; font-size: 9px; height: 48px; justify-content: space-around; left: 0; padding: 0 6px; right: 0; }
.bba-ads-tt-nav > b, .bba-ads-tt-nav > span { align-items: center; display: flex; flex-direction: column; gap: 2px; opacity: .65; }
.bba-ads-tt-nav > b { font-weight: 600; opacity: 1; }
.bba-ads-tt-nav svg { height: 19px; width: 19px; }
.bba-ads-tt-nav > b svg { fill: #fff; }
.bba-ads-tt-plus { background: #fff; border-radius: 7px; box-shadow: -3px 0 0 #25f4ee, 3px 0 0 #fe2c55; color: #000; display: block; font-size: 17px; font-style: normal; font-weight: 700; height: 24px; line-height: 23px; text-align: center; width: 36px; }
@keyframes bba-ads-spin { to { transform: rotate(360deg); } }
@keyframes bba-ads-zoom { from { transform: scale(1); } to { transform: scale(1.08); } }

/* Аналітика: текст з інструментами і замовлення за джерелами */
.bba-ads-an {
	align-items: center;
	background: var(--ad-tile);
	border-radius: 18px;
	display: grid;
	gap: 40px;
	grid-template-columns: 1.1fr 1fr;
	margin: 12px auto 0;
	max-width: 1440px;
	padding: 56px clamp(24px, 5vw, 72px);
}
.bba-ads-an h3 { font-size: clamp(30px, 3vw, 40px); }
.bba-ads-an-text > p { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.45; margin: 0 0 18px; }
.bba-ads .bba-ads-an ul.bba-ads-chips { justify-content: flex-start; }
.bba-ads-an a.bba-ads-more { display: inline-block; margin-bottom: 0; }
.bba-ads-bars { background: var(--ad-bg); border-radius: 18px; display: flex; flex-direction: column; gap: 14px; padding: 26px; }
.bba-ads-bars strong { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.bba-ads-bars div { align-items: center; display: grid; gap: 12px; grid-template-columns: 90px 1fr 44px; }
.bba-ads-bars span { color: var(--ad-muted); font-size: 14px; }
.bba-ads-bars i { background: #e5e5ea; border-radius: 980px; display: block; height: 10px; overflow: hidden; position: relative; }
.bba-ads-bars i::after { background: var(--ad-blue); border-radius: inherit; content: ""; inset: 0; position: absolute; transform: scaleX(0); transform-origin: left; transition: transform 1.4s cubic-bezier(.2, .8, .2, 1); width: var(--w); }
.bba-ads-bars .is-s i::after { background: #34c759; transition-delay: .12s; }
.bba-ads-bars .is-m i::after { background: #7c3aed; transition-delay: .24s; }
.bba-ads-bars .is-t i::after { background: #fe2c55; transition-delay: .36s; }
.bba-ads-bars .is-o i::after { background: #8e8e93; transition-delay: .48s; }
.bba-ads-an.is-in .bba-ads-bars i::after { transform: scaleX(1); }
.bba-ads-bars b { font-size: 14px; font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }

/* Кроки роботи */
.bba-ads ol.bba-ads-steps { counter-reset: bba-ads; display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 12px auto 0; max-width: 1440px; padding: 0; }
.bba-ads-steps li { background: var(--ad-tile); border-radius: 18px; counter-increment: bba-ads; margin: 0; padding: 28px 24px; }
.bba-ads-steps li::before { color: var(--ad-blue); content: "0" counter(bba-ads); display: block; font-size: 14px; font-weight: 600; margin-bottom: 14px; }
.bba-ads-steps b { display: block; font-size: 19px; font-weight: 600; margin-bottom: 6px; }
.bba-ads-steps span { color: var(--ad-muted); display: block; font-size: 15px; line-height: 1.45; }

/* Питання до AI-асистента: кнопка відкриває чат і надсилає питання */
.bba-ads-ask {
	background: var(--ad-tile);
	border-radius: 18px;
	margin: 12px auto 0;
	max-width: 1440px;
	padding: 48px clamp(24px, 5vw, 72px);
	text-align: center;
}
.bba-ads-ask h3 { font-size: clamp(26px, 2.6vw, 36px); }
.bba-ads-ask > p { color: var(--ad-muted); font-size: 17px; line-height: 1.45; margin: 0 auto 24px; max-width: 34em; }
.bba-ads-ask-list { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0 auto; max-width: 980px; }
.bba-ads a.bba-ads-q {
	align-items: center;
	background: var(--ad-bg);
	border: 1px solid transparent;
	border-radius: 980px;
	color: var(--ad-text);
	display: inline-flex;
	font-size: 16px;
	gap: 8px;
	line-height: 1.3;
	padding: 12px 20px;
	text-decoration: none;
	transition: background-color .2s, border-color .2s, color .2s;
}
.bba-ads a.bba-ads-q::before { background: var(--ad-blue); content: ""; flex: 0 0 16px; height: 16px; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5.5A2.5 2.5 0 0 1 6.5 3h11A2.5 2.5 0 0 1 20 5.5v8a2.5 2.5 0 0 1-2.5 2.5H10l-4.2 3.6c-.5.4-1.3.1-1.3-.6V16A2.5 2.5 0 0 1 4 13.5z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5.5A2.5 2.5 0 0 1 6.5 3h11A2.5 2.5 0 0 1 20 5.5v8a2.5 2.5 0 0 1-2.5 2.5H10l-4.2 3.6c-.5.4-1.3.1-1.3-.6V16A2.5 2.5 0 0 1 4 13.5z'/%3E%3C/svg%3E") center/contain no-repeat; width: 16px; }
.bba-ads a.bba-ads-q:hover { background: #fff; border-color: var(--ad-blue); color: var(--ad-blue); }

/* Поява під час прокрутки */
.bba-ads.is-pre .bba-ads-hero > *, .bba-ads.is-pre .bba-ads-tile { opacity: 0; transform: translateY(24px); }
.bba-ads .bba-ads-hero > *, .bba-ads .bba-ads-tile { transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
.bba-ads .bba-ads-tile:nth-child(2) { transition-delay: .1s; }
.bba-ads .bba-ads-tile:nth-child(3) { transition-delay: .2s; }

@media (max-width: 1100px) {
	.bba-ads-tiles { grid-template-columns: 1fr 1fr; }
	.bba-ads-tile:first-child { grid-column: 1 / -1; min-height: 0; }
	.bba-ads-tile:first-child .bba-ads-phone { margin-top: 8px; }
	.bba-ads ol.bba-ads-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
	.bba-ads-an { grid-template-columns: 1fr; gap: 28px; padding: 44px 24px; }
}
@media (max-width: 700px) {
	.bba-ads-tiles { grid-template-columns: 1fr; }
	.bba-ads-tile { min-height: 0; padding-top: 44px; }
	.bba-ads-tile .bba-ads-phone { margin-top: 8px; }
}
@media (max-width: 560px) {
	.bba-ads { padding: 56px 8px 8px; }
	.bba-ads-actions { align-items: stretch; flex-direction: column; padding: 0 12px; }
	/* Нахилена картка ширша за свій бокс — на телефоні робимо її вужчою, щоб не обрізалась. */
	.bba-ads-stage { height: 320px; margin-top: 16px; }
	.bba-ads-card { border-radius: 20px; padding: 16px 16px 12px; top: 10px; width: 270px; }
	.bba-ads-card-head { margin-bottom: 10px; }
	.bba-ads-card-head strong { font-size: 13px; }
	.bba-ads-funnel { grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0 8px; }
	.bba-ads-funnel div { padding: 6px 8px; }
	.bba-ads-funnel span { font-size: 9px; margin-bottom: 2px; }
	.bba-ads-funnel b { font-size: 14px; }
	.bba-ads-chart { height: 64px; }
	.bba-ads-src span { font-size: 10px; padding: 3px 8px; }
	.bba-ads-shadow { bottom: 20px; width: 240px; }
	.bba-ads-phone { width: 260px; }
	.bba-ads ol.bba-ads-steps { grid-template-columns: 1fr; }
	.bba-ads-ask { padding: 36px 16px; }
	.bba-ads-ask-list { align-items: stretch; flex-direction: column; }
	.bba-ads a.bba-ads-q { font-size: 15px; text-align: left; }
	.bba-ads-bars { padding: 20px; }
	.bba-ads-bars div { grid-template-columns: 74px 1fr 40px; }
}
@media (prefers-reduced-motion: reduce) {
	.bba-ads *, .bba-ads *::before, .bba-ads *::after { animation: none !important; transition: none !important; }
	.bba-ads-line { stroke-dashoffset: 0; }
	.bba-ads-bars i::after { transform: scaleX(1); }
	.bba-ads.is-pre .bba-ads-hero > *, .bba-ads.is-pre .bba-ads-tile { opacity: 1; transform: none; }
}