/* ==========================================================================
   Новая главная (шаблон main-v2.php) — по макетам ChatGPT, сентябрь 2026.
   Все правила внутри .wg2: общие стили темы и «Дополнительные стили»
   (Customizer) этот файл не задевает, и наоборот — классы темы здесь не используются,
   кроме .container (ширина колонки — та же, что у шапки и подвала)
   и формы Contact Form 7, которую оформляем только внутри .wg2-form.
   Цвета и размеры сняты с макетов замером (см. docs/home-v2.md).
   ========================================================================== */

.wg2 {
	--wg2-blue: #0f6ef2;
	--wg2-blue-2: #2b86ff;
	--wg2-blue-3: #0a57d0;
	--wg2-ink: #0a1a3c;
	--wg2-text: #3f4a63;
	/* подписи и подзаголовки: было #7c869d — на белом 3,6:1, владелец: «читается с трудом».
	   #5f6a82 — 5,6:1, всё ещё заметно светлее основного текста */
	--wg2-muted: #5f6a82;
	--wg2-line: #e3ebf7;
	--wg2-tint: #f3f7fe;
	--wg2-tint-2: #eaf2fe;
	--wg2-navy: #07306e;
	--wg2-red: #f0362f;
	--wg2-radius: 16px;
	--wg2-radius-s: 10px;
	--wg2-shadow: 0 12px 32px rgba(16, 58, 128, .08);
	--wg2-shadow-2: 0 18px 44px rgba(16, 58, 128, .14);
	--wg2-sec: clamp(56px, 7vw, 112px);
	--wg2-hand: "Caveat", "Segoe Script", cursive;

	color: var(--wg2-text);
	font-family: "Wix Madefor Display", sans-serif;
	overflow: hidden;
}

.wg2 *,
.wg2 *::before,
.wg2 *::after {
	box-sizing: border-box;
}

/* Сбросы по тегам — через :where(.wg2): у них вес одного тега (0,0,1).
   С «.wg2 p» вес был (0,1,1) — больше, чем у правил с одним классом (.wg2-lead и т. п.),
   и все отступы и кегли, заданные классами, молча обнулялись: блоки выглядели сплющенными,
   текст — впритык, кнопки — тонким шрифтом. Правило для всех сбросов ниже: только :where. */
:where(.wg2) h1,
:where(.wg2) h2,
:where(.wg2) h3,
:where(.wg2) p,
:where(.wg2) ul,
:where(.wg2) ol,
:where(.wg2) figure {
	margin: 0;
	padding: 0;
}

:where(.wg2) ul,
:where(.wg2) ol {
	list-style: none;
}

:where(.wg2) a {
	color: inherit;
	text-decoration: none;
}

:where(.wg2) button {
	font: inherit;
	cursor: pointer;
}

:where(.wg2) img {
	max-width: 100%;
	height: auto;
}

.wg2-i {
	width: 1em;
	height: 1em;
	flex: none;
}

/* ---------- общие элементы ---------- */

.wg2-sec {
	position: relative;
	padding: var(--wg2-sec) 0;
	background: #fff;
}

.wg2-sec--tint {
	background: linear-gradient(180deg, var(--wg2-tint) 0%, #fff 100%);
}

.wg2-sec--flush {
	padding-top: 0;
}

.wg2-head {
	position: relative;
	z-index: 1;
	max-width: 820px;
	margin-bottom: clamp(32px, 4vw, 56px);
}

.wg2-head--center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.wg2-h2 {
	color: var(--wg2-ink);
	font-size: clamp(26px, 2.9vw, 50px);
	line-height: 1.12;
	font-weight: 800;
	letter-spacing: -.01em;
}

.wg2-h2--xl {
	font-size: clamp(30px, 3.5vw, 60px);
}

.wg2-h2--xxl {
	font-size: clamp(34px, 4.1vw, 68px);
	line-height: 1.02;
}

.wg2-h2 span,
.wg2-h1 span {
	color: var(--wg2-blue);
}

.wg2-seo .wg2-h2 span,
.wg2-benefits .wg2-h2 span {
	white-space: nowrap;
}

.wg2-h3 {
	display: block;
	color: var(--wg2-ink);
	font-size: 18px;
	line-height: 1.3;
	font-weight: 700;
}

.wg2-lead {
	margin-top: 16px;
	font-size: clamp(15px, 1.25vw, 18px);
	line-height: 1.55;
	color: var(--wg2-text); /* в макете подзаголовки почти как основной текст (#3f4a64), серый читался бледно */
}

/* ровные строки в заголовках и подзаголовках: без одного слова во второй строке
   («услуги?», «оптимизации», «результатов»). Браузер без поддержки свойство пропускает */
.wg2-h2,
.wg2-lead,
.wg2-over,
.wg2-sub {
	text-wrap: balance;
}

.wg2-sub {
	margin-top: 10px;
	color: var(--wg2-ink);
	font-size: clamp(17px, 1.6vw, 24px);
	line-height: 1.35;
	font-weight: 500;
}

/* надпись над заголовком */
.wg2-over {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 14px;
	color: var(--wg2-blue);
	font-size: 12px;
	line-height: 1.4;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
}

.wg2-over--line::before,
.wg2-over--before::before,
.wg2-over--both::before,
.wg2-over--both::after,
.wg2-over--after::after {
	content: "";
	width: 40px;
	height: 1.5px;
	background: currentColor;
	opacity: .7;
}

/* рукописные пометки */
.wg2-hand {
	position: absolute;
	z-index: 1;
	color: var(--wg2-blue);
	font-family: var(--wg2-hand);
	font-size: 26px;
	line-height: 1.05;
	font-weight: 500;
	transform: rotate(-8deg);
	pointer-events: none;
}






.wg2-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	padding: 8px 18px;
	border-radius: 100px;
	background: var(--wg2-tint-2);
	color: var(--wg2-blue);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.wg2-pill .wg2-i {
	font-size: 18px;
}

.wg2-center {
	margin-top: clamp(32px, 4vw, 48px);
	text-align: center;
}

.wg2-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
	margin-top: 32px;
}

.wg2-link {
	color: var(--wg2-blue) !important;
	font-weight: 600;
	border-bottom: 1px solid rgba(15, 110, 242, .35);
}

.wg2-card {
	background: #fff;
	border: 1px solid var(--wg2-line);
	border-radius: var(--wg2-radius);
	box-shadow: var(--wg2-shadow);
}

.wg2-tag {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 6px;
	background: var(--wg2-blue);
	color: #fff;
	font-size: 11px;
	line-height: 1.3;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* кружки и квадраты под иконки; иконки из полей рисованы белым — перекрашиваем */
.wg2-ico-circle,
.wg2-ico-square {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--wg2-tint-2);
	color: var(--wg2-blue);
	font-size: 26px;
}

.wg2-ico-square {
	border-radius: 14px;
	width: 64px;
	height: 64px;
	font-size: 34px;
	background: var(--wg2-tint);
	box-shadow: inset 0 0 0 1px var(--wg2-line);
}

.wg2-ico-square--sm {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	font-size: 22px;
}

.wg2-ico-circle--lg {
	width: 72px;
	height: 72px;
	font-size: 30px;
}

.wg2-ico-circle svg,
.wg2-ico-square svg {
	width: 1em;
	height: 1em;
}

.wg2-ico-circle svg [stroke]:not([stroke="none"]),
.wg2-ico-square svg [stroke]:not([stroke="none"]) {
	stroke: currentColor;
}

.wg2-ico-circle svg [fill]:not([fill="none"]),
.wg2-ico-square svg [fill]:not([fill="none"]) {
	fill: currentColor;
}

.wg2-ico-circle--solid {
	background: var(--wg2-blue-2);
	color: #fff;
}

.wg2-ico-blob {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	background: var(--wg2-tint-2);
}

.wg2-ico-blob img {
	width: 52px;
	height: 52px;
}

/* ---------- кнопки ---------- */

.wg2-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 52px;
	padding: 14px 28px;
	border: 0;
	border-radius: 8px;
	background: linear-gradient(180deg, var(--wg2-blue-2) 0%, var(--wg2-blue) 100%);
	box-shadow: 0 10px 24px rgba(15, 110, 242, .28);
	color: #fff !important;
	font-size: 16px;
	line-height: 1.2;
	font-weight: 600;
	text-align: center;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.wg2-btn .wg2-i {
	font-size: 20px;
}

.wg2-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 14px 30px rgba(15, 110, 242, .36);
}

.wg2-btn:focus-visible,
.wg2-wtab:focus-visible,
.wg2-qa summary:focus-visible,
.wg2-scard:focus-visible,
.wg2-hcard:focus-visible {
	outline: 3px solid #9cc4ff;
	outline-offset: 2px;
}

.wg2-btn--lg {
	min-height: 58px;
	padding: 16px 36px;
	font-size: 17px;
}

.wg2-btn--sm {
	min-height: 44px;
	padding: 10px 20px;
	font-size: 15px;
}

.wg2-btn--block {
	width: 100%;
}

.wg2-btn--glow {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset, 0 12px 36px rgba(43, 134, 255, .55);
}

.wg2-btn--outline {
	background: #fff;
	box-shadow: inset 0 0 0 1.5px var(--wg2-blue);
	color: var(--wg2-blue) !important;
}

.wg2-btn--outline:hover {
	background: var(--wg2-tint);
	box-shadow: inset 0 0 0 1.5px var(--wg2-blue);
}

.wg2-btn--ghost {
	background: transparent;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55);
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: 14px;
}

.wg2-btn--white {
	background: #fff;
	color: var(--wg2-blue) !important;
	box-shadow: 0 8px 20px rgba(4, 40, 110, .2);
}

.wg2-more {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding-top: 18px;
	color: var(--wg2-blue);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.wg2-more__go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1.5px currentColor;
	font-size: 14px;
	transition: background .15s ease, color .15s ease;
}

/* ==========================================================================
   1. Первый экран
   ========================================================================== */

.wg2-hero {
	position: relative;
	padding: clamp(40px, 4.2vw, 64px) 0 36px;
	background: linear-gradient(180deg, #003a80 0%, #0c5eb2 55%, #d7e7fb 80%, #fff 100%);
	color: #fff;
	isolation: isolate;
}

.wg2-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}

.wg2-hero__mountains {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 62% 100%;
}

.wg2 .wg2-hero__clouds {
	position: absolute;
	left: -2%;
	bottom: 60px;
	width: 104%;
	max-width: none;
}

.wg2-hero__bg::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 150px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 55%);
}

.wg2-hero__inner {
	position: relative;
	display: flex;
	align-items: flex-start;
	min-height: clamp(260px, 21vw, 330px);
}

.wg2-hero__text {
	position: relative;
	z-index: 2;
	max-width: 62%;
}

.wg2 .wg2-marker {
	display: block;
	height: 0;
	margin: 0;
	overflow: hidden;
	font-size: 0;
}

.wg2-hero__title {
	color: #fff;
	font-size: clamp(32px, 3.7vw, 66px);
	line-height: 1.1;
	font-weight: 800;
	letter-spacing: -.015em;
}

.wg2-hero__title span {
	color: #56a8ff;
}

.wg2-hero__descr {
	max-width: 540px;
	margin-top: 20px;
	color: rgba(255, 255, 255, .92);
	font-size: clamp(15px, 1.25vw, 19px);
	line-height: 1.45;
}

.wg2-hero__text .wg2-btn {
	min-height: 50px;
	margin-top: 28px;
	padding-top: 12px;
	padding-bottom: 12px;
}

.wg2-hero__person {
	position: absolute;
	right: 9%;
	top: calc(-1 * clamp(34px, 3.8vw, 58px));
	width: clamp(260px, 27vw, 420px);
	z-index: 1;
}

.wg2-hero__person img {
	width: 100%;
	filter: drop-shadow(0 20px 40px rgba(0, 30, 80, .35));
}

.wg2-hero__hand {
	left: 100%;
	top: 16%;
	margin-left: -8px;
	color: rgba(255, 255, 255, .9);
	font-size: clamp(22px, 2vw, 30px);
	white-space: nowrap;
}

.wg2-hero__hand::after {
	content: "";
	display: block;
	width: 90px;
	height: 10px;
	margin-top: 6px;
	border-bottom: 2px solid rgba(255, 255, 255, .7);
	border-radius: 0 0 50% 50%;
	transform: rotate(-4deg);
}

.wg2-hero__cards {
	position: relative;
	z-index: 3;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: clamp(24px, 3vw, 44px);
}

.wg2-hcard {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 104px;
	padding: 16px 18px;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 10px;
	background: linear-gradient(135deg, #1f72e6 0%, #0b4db0 100%);
	box-shadow: 0 20px 44px rgba(8, 48, 120, .32);
	color: #fff !important;
	text-align: left;
	transition: transform .15s ease, box-shadow .15s ease;
}

.wg2-hcard:hover {
	transform: translateY(-2px);
	box-shadow: 0 24px 50px rgba(8, 48, 120, .4);
}

.wg2-hcard__ico {
	flex: none;
	width: 54px;
	height: 54px;
}

.wg2-hcard__ico img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.wg2-hcard__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}

.wg2-hcard__title {
	font-size: clamp(16px, 1.3vw, 19px);
	line-height: 1.25;
	font-weight: 700;
}

.wg2-hcard__text {
	color: rgba(255, 255, 255, .85);
	font-size: 13.5px;
	line-height: 1.4;
}

.wg2-hcard__go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--wg2-blue-2);
	box-shadow: 0 6px 16px rgba(0, 30, 90, .3);
	font-size: 18px;
	align-self: flex-start;
}

/* ==========================================================================
   3. Наши услуги
   ========================================================================== */

.wg2-services {
	background: linear-gradient(180deg, #f5f8fe 0%, #eef4fd 100%);
}


.wg2-services .wg2-lead {
	max-width: 620px;
	margin-left: auto;
	margin-right: auto;
}

.wg2-services__top {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	grid-template-rows: auto auto;
	gap: 18px;
}

.wg2-services__bottom {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 18px;
	margin-top: 18px;
}

.wg2-scard {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 210px;
	padding: 22px 24px 22px;
	border: 1px solid #e2ebf9;
	border-radius: var(--wg2-radius-s);
	background: #fff;
	box-shadow: 0 8px 24px rgba(16, 58, 128, .05);
	transition: transform .15s ease, box-shadow .15s ease;
}

.wg2-services__top > .wg2-scard:nth-child(odd):not(.wg2-scard--feat),
.wg2-services__bottom > .wg2-scard:nth-child(odd) {
	background: linear-gradient(180deg, #eff5fe 0%, #f6f9ff 100%);
}

.wg2-scard:hover {
	transform: translateY(-2px);
	box-shadow: var(--wg2-shadow-2);
}

.wg2-scard:hover .wg2-more__go {
	background: var(--wg2-blue);
	color: #fff;
	box-shadow: none;
}

.wg2-scard .wg2-ico-circle {
	width: 52px;
	height: 52px;
	margin-bottom: 14px;
	font-size: 32px;
}

.wg2-scard__title {
	color: var(--wg2-ink);
	font-size: 17px;
	line-height: 1.25;
	font-weight: 800;
}

.wg2-scard__text {
	margin-top: 6px;
	color: var(--wg2-muted);
	font-size: 14px;
	line-height: 1.4;
}

.wg2-scard--feat {
	grid-row: span 2;
	overflow: hidden;
	padding: 34px 36px;
	border: 0;
	background: radial-gradient(120% 90% at 80% 100%, #0d4fb0 0%, rgba(13, 79, 176, 0) 60%),
		linear-gradient(160deg, #0a3f92 0%, #062a66 100%);
	color: #fff;
}

.wg2-scard__row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 40px;
}

.wg2-scard--feat .wg2-ico-circle {
	width: 64px;
	height: 64px;
	margin: 0;
	font-size: 30px;
}

.wg2-badge {
	padding: 8px 14px;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 6px;
	background: rgba(255, 255, 255, .08);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.wg2-scard--feat .wg2-scard__title {
	position: relative;
	z-index: 1;
	max-width: 330px;
	color: #fff;
	font-size: clamp(24px, 2.2vw, 34px);
	line-height: 1.15;
}

.wg2-scard--feat .wg2-scard__text {
	position: relative;
	z-index: 1;
	max-width: 300px;
	margin-top: 18px;
	color: rgba(255, 255, 255, .8);
	font-size: 15px;
	line-height: 1.5;
}

.wg2-scard--feat .wg2-btn {
	position: relative;
	z-index: 1;
	align-self: flex-start;
	margin-top: 32px;
}

.wg2-scard--feat:hover .wg2-btn {
	background: rgba(255, 255, 255, .12);
}

.wg2-scard__chart {
	position: absolute;
	right: -4%;
	bottom: -2%;
	width: 62%;
	opacity: .95;
	pointer-events: none;
}

/* ==========================================================================
   4. Тарифы
   ========================================================================== */


.wg2-tariffs .wg2-h2 {
	max-width: 620px;
	margin: 0 auto;
}

.wg2-tariffs__hand {
	right: 6%;
	top: 30px;
	font-size: 24px;
}

.wg2-tariffs__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	align-items: start;
}

.wg2-tcard {
	position: relative;
	padding: 26px 26px 24px;
	border: 1px solid var(--wg2-line);
	border-radius: 12px;
	background: #fff;
	box-shadow: var(--wg2-shadow);
}

.wg2-tcard.is-popular {
	border: 1.5px solid var(--wg2-blue-2);
	background: linear-gradient(180deg, #eef4fe 0%, #f7faff 100%);
	box-shadow: 0 20px 50px rgba(15, 110, 242, .16);
}

.wg2-tcard__badge {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%, -50%);
	padding: 7px 20px;
	border-radius: 100px;
	background: linear-gradient(180deg, var(--wg2-blue-2), var(--wg2-blue));
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}

.wg2-tcard__head {
	display: flex;
	gap: 22px;
	align-items: center;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--wg2-line);
}

.wg2-tcard__ico {
	flex: none;
	width: 76px;
	height: 76px;
}

.wg2-tcard__name {
	color: var(--wg2-ink);
	font-size: 22px;
	line-height: 1.2;
	font-weight: 800;
}

.wg2-tcard__price {
	margin-top: 4px;
	color: var(--wg2-blue);
	font-size: clamp(26px, 2.3vw, 34px);
	line-height: 1.15;
	font-weight: 800;
	white-space: nowrap;
}

.wg2-tcard__sub {
	margin-top: 6px;
	color: var(--wg2-muted);
	font-size: 14px;
	line-height: 1.35;
}

.wg2-tgroup {
	padding: 18px 0 16px;
	border-bottom: 1px solid var(--wg2-line);
}

.wg2-tgroup summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--wg2-ink);
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.wg2-tgroup summary::-webkit-details-marker {
	display: none;
}

.wg2-tgroup summary .wg2-i {
	color: var(--wg2-blue);
	font-size: 18px;
	transition: transform .2s ease;
}

.wg2-tgroup:not([open]) summary .wg2-i {
	transform: rotate(-90deg);
}

.wg2-checks {
	margin-top: 12px;
}

.wg2-checks li {
	display: flex;
	gap: 10px;
	color: var(--wg2-text);
	font-size: 14.5px;
	line-height: 1.4;
}

.wg2-checks li + li {
	margin-top: 8px;
}

.wg2-checks .wg2-i {
	flex: none;
	width: 20px;
	height: 20px;
	padding: 3px;
	border-radius: 50%;
	background: #e1ecfe;
	color: var(--wg2-blue);
	stroke-width: 3;
}

.wg2-checks li.is-off {
	color: var(--wg2-muted);
}

.wg2-checks li.is-off .wg2-i {
	background: #ffe7e6;
	color: var(--wg2-red);
}

.wg2-tcard .wg2-btn {
	min-height: 46px;
	margin-top: 22px;
	padding-top: 11px;
	padding-bottom: 11px;
}

/* ==========================================================================
   5. Прибыльный и прозрачный интернет-маркетинг
   ========================================================================== */

.wg2-seo__top {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: clamp(32px, 4vw, 64px);
	align-items: center;
}

.wg2-seo__text .wg2-lead {
	max-width: 600px;
	margin-top: 22px;
	color: var(--wg2-text);
}

.wg2-seo__chart {
	position: relative;
	padding: 0 40px 30px 0;
}

.wg2-seo__chart::before {
	content: "";
	position: absolute;
	left: 36px;
	right: 12px;
	top: -18px;
	bottom: 48px;
	border-radius: 20px;
	background: linear-gradient(135deg, #d3e4ff 0%, #eaf2ff 100%);
	transform: rotate(3deg);
}

.wg2-chart {
	position: relative;
	padding: 26px 28px 22px;
	border: 1px solid var(--wg2-line);
	border-radius: 18px;
	background: #fff;
	box-shadow: var(--wg2-shadow-2);
}

.wg2-chart__head,
.wg2-chart__foot {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.wg2-chart__head b,
.wg2-chart__foot b {
	display: block;
	color: var(--wg2-ink);
	font-size: 16px;
	font-weight: 600;
}

.wg2-chart__head small,
.wg2-chart__foot small {
	display: block;
	color: var(--wg2-muted);
	font-size: 13px;
}

.wg2-chart__dot {
	width: 12px;
	height: 12px;
	margin-top: 5px;
	border-radius: 50%;
	background: var(--wg2-blue);
}

.wg2-chart__plot {
	position: relative;
	height: 190px;
	margin: 22px 0 18px;
	background: repeating-linear-gradient(0deg, transparent 0 37px, #eef3fb 37px 38px);
}

.wg2-chart__plot svg {
	width: 100%;
	height: 100%;
	display: block;
}

.wg2-chart__tip {
	position: absolute;
	right: 3%;
	top: -40px;
	padding: 8px 14px;
	border-radius: 8px;
	background: var(--wg2-blue);
	color: #fff;
	font-size: 13px;
	line-height: 1.2;
	box-shadow: 0 8px 20px rgba(15, 110, 242, .35);
}

.wg2-chart__point {
	position: absolute;
	right: 0;
	top: calc(10% - 9px);
	width: 18px;
	height: 18px;
	margin-right: -6px;
	border: 4px solid #fff;
	border-radius: 50%;
	background: var(--wg2-blue);
	box-shadow: 0 0 0 6px rgba(15, 110, 242, .18);
}

.wg2-chart__foot {
	align-items: center;
	padding: 14px 16px;
	border-radius: 12px;
	background: var(--wg2-tint);
}

.wg2-chart__foot .wg2-i {
	color: var(--wg2-blue);
	font-size: 32px;
}

.wg2-seo__hand {
	right: -8px;
	bottom: -12px;
	font-size: 24px;
}

.wg2-seo__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 24px;
	margin-top: clamp(40px, 5vw, 72px);
}

.wg2-seo__card {
	padding: 30px 30px 32px;
	border-radius: 12px;
	box-shadow: none;
}

.wg2-seo__card .wg2-h3 {
	margin-top: 22px;
	font-size: clamp(18px, 1.5vw, 22px);
}

.wg2-seo__card p {
	margin-top: 12px;
	color: var(--wg2-text);
	font-size: 15px;
	line-height: 1.55;
}

/* ==========================================================================
   6. Что даёт SEO
   ========================================================================== */








/* цифры в карточках «Что даёт SEO»: 1.35em по просьбе владельца (было 2.35em — слишком крупно);
   у кейсов свой размер ниже (.wg2-case__title .wg2-num), это правило их не касается */
.wg2-num {
	color: var(--wg2-blue);
	font-size: 1.35em;
	line-height: 1;
	font-weight: 800;
	letter-spacing: -.02em;
}







/* ==========================================================================
   Формы (Contact Form 7) внутри новых блоков
   ========================================================================== */

.wg2-form {
	margin-top: 28px;
}

.wg2-form .wpcf7-form > p {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
	gap: 14px 16px;
	align-items: end;
	margin: 0;
	padding: 0; /* тема: «form p { padding-bottom: 28–76px }» — под формой вырастала пустота */
}

.wg2-form--wide .wpcf7-form > p {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.wg2-form .form_label {
	width: auto;
	margin: 0;
}

.wg2-form .form_label__text {
	margin-bottom: 8px;
	color: var(--wg2-ink);
	font-size: 14px;
	font-weight: 500;
}

.wg2-form .form_label input {
	min-width: 0;
	height: 54px;
	padding: 0 14px 0 48px;
	border: 1px solid #d5e0f1;
	border-radius: 8px;
	background: #fff no-repeat 16px 50% / 20px 20px;
	color: var(--wg2-ink);
	font-size: 15px;
	box-shadow: 0 2px 6px rgba(16, 58, 128, .04);
}

.wg2-form .form_label input:focus {
	border-color: var(--wg2-blue);
	outline: 0;
	box-shadow: 0 0 0 3px rgba(15, 110, 242, .15);
}

.wg2-form .form_label_soc input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f6ef2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E");
}

.wg2-form .form_label_site input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f6ef2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1'/%3E%3Cpath d='M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E");
}

.wg2-form .form_label img {
	display: none;
}

.wg2 .wg2-form .form_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: 54px;
	max-height: none;
	margin: 0;
	padding: 0 30px;
	border: 0;
	border-radius: 8px;
	background: linear-gradient(180deg, var(--wg2-blue-2) 0%, var(--wg2-blue) 100%);
	box-shadow: 0 10px 24px rgba(15, 110, 242, .28);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	white-space: nowrap;
}

.wg2 .wg2-form .form_btn::after {
	content: "";
	position: static;
	width: 18px;
	height: 18px;
	margin: 0;
	/* у темы в <head> стоит .btnRot::after { transform: … !important } — без !important стрелку не выпрямить */
	transform: none !important;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8.5 7H17v8.5'/%3E%3C/svg%3E") no-repeat center / contain;
}

.wg2 .wg2-form .form_btn:hover {
	background: linear-gradient(180deg, #3b90ff 0%, #1a78f5 100%);
	color: #fff;
}

.wg2-form--wide .form_btn {
	grid-column: 1 / -1;
	width: 100%;
	height: 60px !important;
	font-size: 18px !important;
}

.wg2 .wg2-form .filter_checkbox {
	position: static;
	grid-column: 1 / -1;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 0;
	margin-top: 4px;
}

.wg2 .wg2-form .filter_checkbox__fake {
	min-width: 20px;
	margin-top: 1px;
	border-radius: 5px;
	background: var(--wg2-blue);
}

.wg2 .wg2-form .filter_checkbox__title {
	max-width: none;
	color: var(--wg2-muted);
	font-size: 13px;
	line-height: 1.45;
}

.wg2 .wg2-form .filter_checkbox__title a {
	color: var(--wg2-blue);
}

.wg2-form .wpcf7-response-output {
	margin: 14px 0 0;
	border-radius: 8px;
	font-size: 14px;
}

.wg2-form .smart-captcha {
	grid-column: 1 / -1;
}

.wg2-form .smart-captcha:empty {
	display: none;
}

/* ==========================================================================
   7. Форма «Аудит в WhatsApp или Telegram»
   ========================================================================== */

.wg2-audit {
	padding-bottom: clamp(40px, 5vw, 64px);
}

/* отступ сверху: голубой фон блока «Что даёт SEO» кончается прямо над плашкой формы,
   и фоны слипались (просьба владельца). Белая полоса между ними + место под голову на фото,
   которая выходит за верх плашки */
.wg2 .wg2-audit {
	padding-top: clamp(40px, 4.2vw, 80px);
}

.wg2-audit__box {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 330px;
	gap: 32px;
	padding: clamp(28px, 3.4vw, 48px) clamp(24px, 4vw, 64px) 0;
	border-radius: 20px;
	background: linear-gradient(120deg, #eef5fe 0%, #e6f0fd 100%);
	overflow: hidden;
}

.wg2-audit__text {
	padding-bottom: clamp(28px, 3.4vw, 44px);
}

.wg2-audit__text .wg2-h2 {
	max-width: 560px;
}

.wg2-audit__person {
	position: relative;
	align-self: end;
	min-height: 100%;
}

.wg2-audit__person::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -30%;
	width: 110%;
	aspect-ratio: 1;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(circle, #d4e5fd 0%, rgba(212, 229, 253, 0) 68%);
}

.wg2-audit__img {
	position: relative;
	display: block;
	width: min(100%, 340px);
	margin: 0 auto;
}

.wg2-audit__who {
	position: absolute;
	right: 0;
	top: 36px;
	max-width: 120px;
	color: var(--wg2-ink);
	font-size: 14px;
	line-height: 1.35;
}

.wg2-audit__who b {
	display: block;
	font-weight: 600;
}

.wg2-bubble {
	position: absolute;
	z-index: 2;
	padding: 12px 18px;
	border-radius: 14px;
	background: #d9e8fd;
	color: var(--wg2-blue);
	font-size: 15px;
	line-height: 1.3;
	font-weight: 500;
	box-shadow: 0 10px 24px rgba(16, 58, 128, .1);
	transform: rotate(-4deg);
}

.wg2-audit__bubble {
	left: -40%;
	top: 26%;
}

/* ==========================================================================
   8. Кейсы
   ========================================================================== */

.wg2-cases__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 32px;
	margin-bottom: 28px;
}

.wg2-cases__head .wg2-lead {
	max-width: 520px;
	margin-top: 10px;
	color: var(--wg2-text);
}

.wg2-cases__aside {
	position: relative;
	display: flex;
	align-items: center;
	gap: 36px;
	padding-top: 10px;
}

.wg2-cases__aside .wg2-hand {
	position: relative;
	font-size: 24px;
	color: #7aa6ea;
}



.wg2-cases__row1,
.wg2-cases__row2 {
	display: grid;
	gap: 16px;
}

.wg2-cases__row1 {
	grid-template-columns: 1.85fr 1fr 1.07fr;
}

.wg2-cases__row2 {
	grid-template-columns: 1.78fr 1fr 1.25fr;
	margin-top: 16px;
}

.wg2-cases__stack {
	display: grid;
	gap: 16px;
}

.wg2-cases__pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.wg2-cases__plain {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
}

.wg2-case {
	position: relative;
	display: flex;
	min-height: 290px;
	padding: 22px 24px;
	border-radius: 12px;
	background: linear-gradient(120deg, #f4f8ff 0%, #e8f0fd 100%);
	overflow: hidden;
}

.wg2-case__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 58%;
}

.wg2-case__domain {
	margin-top: 14px;
	color: var(--wg2-ink);
	white-space: nowrap;
	font-size: 17px;
	line-height: 1.2;
	font-weight: 700;
	word-break: break-word;
}

.wg2-case__what {
	margin-top: 4px;
	color: var(--wg2-text);
	font-size: 13px;
	line-height: 1.35;
}

.wg2-case__title {
	margin: 14px 0 18px;
	color: var(--wg2-ink);
	font-size: 15px;
	line-height: 1.35;
	font-weight: 500;
}

.wg2-case__title .wg2-num {
	color: var(--wg2-ink);
	font-size: 1.2em; /* по просьбе владельца; было 2.2em */
	line-height: .9;
}

.wg2-case .wg2-btn--sm {
	white-space: nowrap;
	padding: 10px 16px;
}

.wg2-case .wg2-btn {
	margin-top: auto;
}

.wg2-case__img {
	position: absolute;
	right: -4%;
	bottom: 0;
	width: 52%;
	height: 88%;
	object-fit: contain;
	object-position: 100% 100%;
	transition: transform .3s ease;
}

.wg2-case:hover .wg2-case__img {
	transform: scale(1.03);
}

.wg2-case--wide .wg2-case__body {
	max-width: 50%;
}

.wg2-case--wide .wg2-case__img {
	width: 48%;
}

.wg2-case--small {
	min-height: 200px;
}

.wg2-case--small .wg2-case__body {
	max-width: 66%;
}

.wg2-case--small .wg2-case__title {
	font-size: 13px;
	margin: 8px 0 12px;
}

.wg2-case--small .wg2-case__title .wg2-num {
	font-size: 1.2em;
}

.wg2-case--small .wg2-case__domain {
	font-size: 16px;
}

/* в маленькой карточке картинка — в правом верхнем углу, чтобы не прятаться за кнопкой */
.wg2-case--small .wg2-case__body {
	max-width: 62%;
}

.wg2-case--small .wg2-case__img {
	top: 16px;
	bottom: auto;
	right: 14px;
	width: 36%;
	height: 42%;
	object-position: 100% 0;
}

.wg2-case--tall {
	min-height: 100%;
}

.wg2-case--tall .wg2-case__body {
	max-width: 100%;
}

/* в высоких карточках картинки (трактор, самолёт) нарисованы в середине высокого холста
   с пустым низом: ставим во всю ширину и опускаем на пустую часть холста */
.wg2-case--tall .wg2-case__img {
	left: 0;
	right: 0;
	width: 100%;
	height: auto;
	object-fit: fill;
	transform: translateY(16%);
}

.wg2-case--tall:hover .wg2-case__img {
	transform: translateY(16%) scale(1.03);
}

.wg2-case--dark {
	background: radial-gradient(90% 70% at 70% 0%, #173e7a 0%, rgba(23, 62, 122, 0) 70%), linear-gradient(180deg, #0c1f45 0%, #0a1733 100%);
	color: #fff;
}

.wg2-case--dark .wg2-case__domain,
.wg2-case--dark .wg2-case__title,
.wg2-case--dark .wg2-case__title .wg2-num {
	color: #fff;
}

.wg2-case--dark .wg2-case__what {
	color: rgba(255, 255, 255, .75);
}

.wg2-cases__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 20px 40px;
	margin-top: 40px;
}

.wg2-cases__foot .wg2-over {
	margin: 0;
	color: var(--wg2-muted);
	font-size: 11px;
}

/* ==========================================================================
   9. Как мы работаем
   ========================================================================== */


.wg2-work__hand {
	right: 2%;
	top: 60px;
	font-size: 32px;
}

.wg2-work .wg2-lead {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	color: var(--wg2-text);
}

.wg2-work__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: 28px;
	align-items: start;
}

.wg2-work__tabs {
	position: relative;
	display: grid;
	gap: 14px;
}

.wg2-work__tabs::before {
	content: "";
	position: absolute;
	left: 26px;
	top: 40px;
	bottom: 40px;
	width: 2px;
	background: linear-gradient(180deg, var(--wg2-blue) 0%, #cfdff6 20%, #cfdff6 100%);
}

.wg2-wtab {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
	color: inherit;
}

.wg2-wtab__num {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 4px 14px rgba(16, 58, 128, .1);
	color: var(--wg2-muted);
	font-size: 17px;
	font-weight: 600;
}

.wg2-wtab__card {
	display: flex;
	align-items: center;
	gap: 18px;
	flex: 1;
	min-height: 94px;
	padding: 16px 20px;
	border: 1px solid transparent;
	border-radius: 10px;
	background: rgba(255, 255, 255, .7);
	transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.wg2-wtab__ico {
	color: var(--wg2-text);
	font-size: 28px;
}

.wg2-wtab__body {
	flex: 1;
}

.wg2-wtab__body b {
	display: block;
	color: var(--wg2-ink);
	font-size: 17px;
	line-height: 1.25;
	font-weight: 600;
}

.wg2-wtab__body small {
	display: block;
	margin-top: 4px;
	color: var(--wg2-muted);
	font-size: 13.5px;
}

.wg2-wtab__go {
	color: var(--wg2-ink);
	font-size: 18px;
}

.wg2-wtab:hover .wg2-wtab__card {
	background: #fff;
}

.wg2-wtab.is-active .wg2-wtab__num {
	background: linear-gradient(180deg, var(--wg2-blue-2), var(--wg2-blue));
	color: #fff;
	box-shadow: 0 8px 20px rgba(15, 110, 242, .4);
}

.wg2-wtab.is-active .wg2-wtab__card {
	border-color: #cfe0fb;
	background: linear-gradient(180deg, #eaf2fe 0%, #f2f7ff 100%);
	box-shadow: 0 8px 22px rgba(16, 58, 128, .08);
}

.wg2-wtab.is-active .wg2-wtab__ico,
.wg2-wtab.is-active .wg2-wtab__body b {
	color: var(--wg2-blue);
}

.wg2-tip {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 22px;
	padding: 20px 24px;
	border-radius: 10px;
	background: var(--wg2-tint-2);
	color: var(--wg2-text);
	font-size: 15px;
	line-height: 1.4;
}

.wg2-tip b {
	color: var(--wg2-blue);
	font-weight: 600;
}

.wg2-tip .wg2-i {
	color: var(--wg2-blue);
	font-size: 30px;
}

.wg2-wpane {
	position: relative;
	padding: 36px 36px 32px;
	border: 1px solid var(--wg2-line);
	border-radius: 14px;
	background: #fff;
	box-shadow: var(--wg2-shadow);
}

.wg2-wpane[hidden] {
	display: none;
}

.wg2-wpane__head {
	position: relative;
	min-height: clamp(100px, 9vw, 124px);
	padding-right: clamp(150px, 15vw, 210px);
}

.wg2-wpane__art {
	position: absolute;
	right: -6px;
	top: -18px;
	width: clamp(140px, 14vw, 200px);
	pointer-events: none;
}

.wg2-wpane .wg2-over {
	margin-bottom: 6px;
}

.wg2-wpane .wg2-h2 {
	font-size: clamp(26px, 3vw, 46px);
}

.wg2-wlist {
	margin-top: 8px;
}

.wg2-wlist li {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 12px 0;
	border-bottom: 1px solid var(--wg2-line);
}

.wg2-wlist li:last-child {
	border-bottom: 0;
}

.wg2-wlist__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 10px;
	background: var(--wg2-tint);
	color: var(--wg2-blue);
	font-size: 16px;
	font-weight: 600;
}

.wg2-wlist__body b {
	display: block;
	color: var(--wg2-ink);
	font-size: 16px;
	line-height: 1.3;
	font-weight: 600;
}

.wg2-wlist__body small {
	display: block;
	margin-top: 3px;
	color: var(--wg2-text);
	font-size: 14px;
	line-height: 1.45;
}

.wg2-wpane .wg2-actions {
	margin-top: 26px;
}

.wg2-assure {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--wg2-muted);
	font-size: 13px;
	line-height: 1.35;
}

.wg2-assure .wg2-i {
	color: var(--wg2-muted);
	font-size: 30px;
}

/* ==========================================================================
   10. Этапы SEO
   ========================================================================== */

.wg2-stages__grid {
	--gap: 56px;
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 1fr;
	gap: var(--gap);
}

.wg2-stage {
	position: relative;
	z-index: 1;
	display: flex;
	gap: 22px;
	align-items: flex-start;
	padding: 26px 26px 30px;
	border-radius: 16px;
	background: #fff;
	box-shadow: var(--wg2-shadow);
}

.wg2-stage__num {
	display: block;
	color: var(--wg2-blue);
	font-size: clamp(34px, 3vw, 48px);
	line-height: 1;
	font-weight: 800;
}

.wg2-stage .wg2-h3 {
	margin-top: 14px;
}

.wg2-stage p {
	margin-top: 10px;
	color: var(--wg2-text);
	font-size: 14.5px;
	line-height: 1.55;
}

.wg2-stage--accent {
	background: radial-gradient(70% 80% at 90% 100%, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(150deg, #2b86ff 0%, #0f63e3 100%);
	box-shadow: 0 20px 44px rgba(15, 110, 242, .35);
}

.wg2-stage--accent .wg2-ico-circle {
	background: rgba(255, 255, 255, .18);
	color: #fff;
}

.wg2-stage--accent .wg2-stage__num,
.wg2-stage--accent .wg2-h3,
.wg2-stage--accent p {
	color: #fff;
}

.wg2-stage--accent .wg2-btn {
	margin-top: 18px;
	white-space: nowrap;
	padding: 10px 18px;
	font-size: 14px;
}

/* стрелки между карточками в ряду */
.wg2-stage__arrow {
	position: absolute;
	right: -28px;
	top: 50%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-right: -22px;
	transform: translateY(-50%);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 6px 16px rgba(16, 58, 128, .14);
	color: var(--wg2-blue);
	font-size: 20px;
}

/* «змейка»: линия идёт за карточками, видна только в промежутках между ними */
.wg2-stages__line {
	display: none;
}

.wg2-stages__grid--snake .wg2-stages__line {
	position: absolute;
	left: 0;
	right: -28px;
	display: block;
	border: 2px solid var(--wg2-blue);
	pointer-events: none;
}

.wg2-stages__grid--snake .wg2-stages__line--a {
	/* от середины первого ряда до середины промежутка между рядами */
	top: calc((100% - var(--gap)) / 4);
	bottom: 50%;
	border-left: 0;
	border-radius: 0 64px 64px 0;
	clip-path: inset(0 0 0 0);
}

.wg2-stages__grid--snake .wg2-stages__line--b {
	top: 50%;
	bottom: calc((100% - var(--gap)) / 4);
	left: -28px;
	right: 0;
	border-right: 0;
	border-top: 0;
	border-radius: 64px 0 0 64px;
}

.wg2-stages__grid--snake .wg2-stage:nth-child(5) .wg2-stage__arrow,
.wg2-stages__grid--snake .wg2-stage:nth-child(3n + 5) .wg2-stage__arrow {
	/* после третьей карточки ряд кончается: стрелку заменяет изгиб линии */
	display: none;
}

/* ==========================================================================
   11. Команда
   ========================================================================== */

.wg2-team__hand {
	font-size: 26px;
}

.wg2-team__hand--r {
	right: 0;
	top: 30px;
}

.wg2-h2--swash span {
	position: relative;
	display: inline-block;
}

.wg2-h2--swash span::after {
	content: "";
	position: absolute;
	left: -4%;
	right: -2%;
	bottom: -.12em;
	height: .16em;
	border-radius: 50%;
	background: linear-gradient(90deg, rgba(43, 134, 255, .15), rgba(43, 134, 255, .55));
	transform: rotate(-1.5deg);
}

.wg2-team__grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 24px;
}

.wg2-member {
	grid-column: span 3;
	overflow: hidden;
	border-radius: 14px;
	background: #fff;
	box-shadow: var(--wg2-shadow);
}

/* первые четыре — по четыре в ряд, дальше по три: как в макете */
.wg2-member:nth-child(n + 5) {
	grid-column: span 4;
}

.wg2-member__ph {
	aspect-ratio: 589 / 700;
	overflow: hidden;
	background: #b9d1f7;
}

.wg2-member__ph img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 12%;
	transition: transform .3s ease;
}

.wg2-member:hover .wg2-member__ph img {
	transform: scale(1.03);
}

.wg2-member:nth-child(n + 5) .wg2-member__ph {
	aspect-ratio: 589 / 500;
}

.wg2-member figcaption {
	padding: 16px 16px 18px;
	text-align: center;
}

.wg2-member b {
	display: block;
	color: var(--wg2-ink);
	font-size: 17px;
	line-height: 1.3;
	font-weight: 700;
}

.wg2-member figcaption span {
	display: block;
	margin-top: 4px;
	color: var(--wg2-muted);
	font-size: 14px;
	line-height: 1.35;
}

/* ==========================================================================
   12. Уверены в результате + аудит в подарок
   ========================================================================== */

.wg2-gift {
	overflow: hidden; /* декоративное кольцо за фото на телефоне шире экрана */
	background: linear-gradient(120deg, #f4f8fe 0%, #edf4fe 100%);
}

.wg2-gift__grid {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: 40px;
	align-items: center;
}

.wg2-gift__text .wg2-lead {
	max-width: 620px;
	color: var(--wg2-text);
	font-size: clamp(16px, 1.45vw, 21px);
}

.wg2-gift__person {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	min-height: 440px;
}

.wg2-gift__ring {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 108%;
	aspect-ratio: 1;
	transform: translate(-44%, -48%);
	border: 1.5px solid #bcd5fb;
	border-radius: 50%;
	background: radial-gradient(circle at 60% 60%, #dce9fd 0%, rgba(220, 233, 253, 0) 62%);
}

.wg2-gift__ball {
	position: absolute;
	border-radius: 50%;
}

.wg2-gift__ball--a {
	right: 4%;
	top: 16%;
	width: 58px;
	height: 58px;
	background: linear-gradient(135deg, #5aa7ff, #1c6ff0);
}

.wg2-gift__ball--b {
	left: 12%;
	top: 44%;
	width: 40px;
	height: 40px;
	background: #cfe0fb;
}

.wg2-gift__img {
	position: relative;
	width: min(76%, 420px);
}

.wg2-gift__bubble {
	left: 2%;
	top: 8%;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 24px 16px 16px;
	border-radius: 18px;
	background: #fff;
	color: var(--wg2-ink);
	font-size: 20px;
	line-height: 1.15;
	font-weight: 700;
	transform: rotate(-6deg);
}

.wg2-gift__bubble b {
	color: var(--wg2-blue);
}

.wg2-gift__gift {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: linear-gradient(180deg, var(--wg2-blue-2), var(--wg2-blue));
	color: #fff;
	font-size: 28px;
}

.wg2-gift__hand {
	right: -2%;
	top: 52%;
	color: #6f8fc4;
	font-size: 24px;
}

/* ==========================================================================
   13. Отзывы
   ========================================================================== */

.wg2-reviews {
	background: radial-gradient(60% 50% at 0% 100%, #eef4fd 0%, rgba(238, 244, 253, 0) 70%), radial-gradient(50% 60% at 100% 0%, #eef4fd 0%, rgba(238, 244, 253, 0) 70%), #fff;
}

.wg2-rev {
	position: relative;
	padding: 0 64px;
}

.wg2-rev__swiper {
	overflow: hidden;
	padding: 20px 0 30px;
}

.wg2-rev__slide {
	height: auto;
	text-align: center;
	transition: transform .3s ease, opacity .3s ease;
}

.wg2-rev__doc {
	display: block;
	padding: 10px;
	border-radius: 8px;
	background: #fff;
	box-shadow: var(--wg2-shadow-2);
}

.wg2-rev__doc img {
	display: block;
	width: 100%;
	aspect-ratio: 210 / 297;
	object-fit: cover;
	object-position: 50% 0;
}

.wg2-rev__name {
	margin-top: 18px;
	color: var(--wg2-ink);
	font-size: 15px;
	font-weight: 600;
}

.wg2-rev__name::after {
	content: "";
	display: block;
	width: 40px;
	height: 1px;
	margin: 12px auto 0;
	background: var(--wg2-line);
}

/* соседние письма чуть меньше и наклонены — как в макете */
.wg2-rev .swiper-initialized .wg2-rev__slide:not(.swiper-slide-active) {
	transform: scale(.9);
	opacity: .85;
}

.wg2-rev .swiper-initialized .swiper-slide-prev {
	transform: scale(.9) rotate(-2deg) !important;
}

.wg2-rev .swiper-initialized .swiper-slide-next {
	transform: scale(.9) rotate(2deg) !important;
}

.wg2-rev__nav {
	position: absolute;
	top: 42%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 8px 24px rgba(16, 58, 128, .14);
	color: var(--wg2-ink);
	font-size: 24px;
}

.wg2-rev__nav--prev {
	left: 0;
}

.wg2-rev__nav--next {
	right: 0;
}

.wg2-rev__nav.swiper-button-disabled {
	opacity: .4;
	cursor: default;
}

.wg2-rev__dots {
	display: flex;
	justify-content: center;
	gap: 10px;
}

.wg2-rev__dots .swiper-pagination-bullet {
	width: 9px;
	height: 9px;
	margin: 0 !important;
	background: #c9d8ef;
	opacity: 1;
}

.wg2-rev__dots .swiper-pagination-bullet-active {
	background: var(--wg2-blue);
}

/* ==========================================================================
   14. Частые вопросы
   ========================================================================== */

.wg2-faq__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr);
	gap: clamp(32px, 5vw, 90px);
	align-items: start;
}

.wg2-bar {
	display: block;
	width: 56px;
	height: 4px;
	margin-bottom: 30px;
	border-radius: 4px;
	background: var(--wg2-blue);
}

.wg2-faq__head .wg2-lead {
	margin-top: 24px;
	color: var(--wg2-text);
}

.wg2-qa {
	border: 1px solid var(--wg2-line);
	border-radius: 12px;
	background: #fff;
	transition: background .2s ease, box-shadow .2s ease;
}

.wg2-qa + .wg2-qa {
	margin-top: 14px;
}

.wg2-qa[open] {
	background: #f5f9fe;
	box-shadow: var(--wg2-shadow);
}

.wg2-qa summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 24px 30px;
	cursor: pointer;
	list-style: none;
}

.wg2-qa summary::-webkit-details-marker {
	display: none;
}

.wg2-qa summary h3 {
	color: var(--wg2-ink);
	font-size: clamp(16px, 1.3vw, 19px);
	line-height: 1.35;
	font-weight: 600;
}

.wg2-qa__pm {
	position: relative;
	flex: none;
	width: 22px;
	height: 22px;
}

.wg2-qa__pm::before,
.wg2-qa__pm::after {
	content: "";
	position: absolute;
	left: 0;
	top: 10px;
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background: var(--wg2-blue);
	transition: transform .2s ease;
}

.wg2-qa__pm::after {
	transform: rotate(90deg);
}

.wg2-qa[open] .wg2-qa__pm::after {
	transform: rotate(0deg);
}

.wg2-qa__a {
	padding: 0 30px 26px;
}

.wg2-qa__a p {
	max-width: 760px;
	color: var(--wg2-text);
	font-size: 16px;
	line-height: 1.6;
}

/* ==========================================================================
   15. Не знаете, какой вариант подойдёт
   ========================================================================== */

.wg2-final {
	position: relative;
	padding: clamp(40px, 5vw, 72px) 0;
	background: radial-gradient(40% 60% at 0% 0%, #1b4fa0 0%, rgba(27, 79, 160, 0) 70%), radial-gradient(40% 60% at 100% 100%, #1b4fa0 0%, rgba(27, 79, 160, 0) 70%), linear-gradient(180deg, #0a2e6a 0%, #07245a 100%);
}

.wg2-final__box {
	position: relative;
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: 24px;
	padding: clamp(28px, 3.5vw, 52px) clamp(24px, 4vw, 64px) 0;
	border-radius: 28px;
	background: linear-gradient(120deg, #ffffff 0%, #eef5fe 100%);
	overflow: hidden;
}

.wg2-final__text {
	position: relative;
	z-index: 1;
	padding-bottom: clamp(28px, 3.5vw, 48px);
}

.wg2-final__text .wg2-lead {
	max-width: 600px;
	color: var(--wg2-text);
}





.wg2-final__person {
	position: relative;
	align-self: end;
	min-height: 420px;
}

.wg2-final__glow {
	position: absolute;
	left: 50%;
	bottom: -20%;
	width: 120%;
	aspect-ratio: 1;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(circle, #d4e5fd 0%, rgba(212, 229, 253, 0) 65%);
}

.wg2-final__img {
	position: absolute;
	left: 50%;
	bottom: 0;
	width: min(88%, 380px);
	transform: translateX(-50%);
}

.wg2-final__who {
	position: absolute;
	left: 0;
	top: 16px;
	color: var(--wg2-muted);
	font-size: 14px;
	line-height: 1.35;
}

.wg2-final__who b {
	display: block;
	color: var(--wg2-ink);
	font-size: 17px;
	font-weight: 700;
}






.wg2-final__hand {
	right: 8px;
	bottom: 30px;
	font-size: 26px;
}

/* ==========================================================================
   Планшет: колонка темы 944 px (1199 и уже)
   ========================================================================== */

@media (max-width: 1199px) {

	.wg2-services__top {
		grid-template-columns: 1.3fr 1fr 1fr;
	}

	.wg2-services__top .wg2-scard:nth-child(n + 6) {
		grid-column: auto;
	}

	.wg2-scard {
		padding: 20px;
	}

	.wg2-tariffs__grid {
		gap: 16px;
	}

	.wg2-tcard {
		padding: 22px 18px 20px;
	}

	.wg2-tcard__head {
		gap: 14px;
	}

	.wg2-tcard__ico {
		width: 56px;
		height: 56px;
	}

	.wg2-hero__person {
		right: 4%;
	}

	.wg2-hero__hand {
		display: none;
	}

	.wg2-case__img {
		width: 46%;
	}

	.wg2-stages__grid {
		--gap: 40px;
	}

	.wg2-stage {
		flex-direction: column;
		gap: 14px;
	}

	.wg2-stage__arrow {
		right: -20px;
		width: 36px;
		height: 36px;
		margin-right: -18px;
	}

	.wg2-stages__grid--snake .wg2-stages__line--a {
		right: -20px;
	}

	.wg2-stages__grid--snake .wg2-stages__line--b {
		left: -20px;
	}

	.wg2-wpane__art {
		width: 130px;
	}

	.wg2-final__box {
		grid-template-columns: 1.4fr 1fr;
	}

}

/* ==========================================================================
   Узкий планшет: колонка на всю ширину с полями 16 px (979 и уже)
   ========================================================================== */

@media (max-width: 979px) {
	.wg2-hero__text {
		max-width: 60%;
	}

	.wg2-hero__cards {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.wg2-hcard {
		min-height: 0;
		padding: 16px 18px;
	}

	.wg2-tariffs__grid {
		grid-template-columns: 1fr;
		max-width: 560px;
		margin-left: auto;
		margin-right: auto;
	}

	.wg2-tariffs__grid {
		gap: 36px;
	}

	.wg2-tariffs__hand {
		display: none;
	}

	.wg2-services__top {
		grid-template-columns: 1fr 1fr;
	}

	.wg2-scard--feat {
		grid-column: 1 / -1;
		grid-row: auto;
		min-height: 300px;
	}

	.wg2-scard__chart {
		width: 44%;
	}

	.wg2-seo__top,
	.wg2-gift__grid,
	.wg2-faq__grid,
	.wg2-work__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.wg2-seo__chart {
		max-width: 560px;
	}

	.wg2-cases__head {
		flex-direction: column;
	}

	.wg2-cases__row1,
	.wg2-cases__row2 {
		grid-template-columns: 1fr 1fr;
	}

	.wg2-cases__row1 .wg2-case--wide,
	.wg2-cases__stack {
		grid-column: 1 / -1;
	}

	.wg2-case--tall {
		min-height: 420px;
	}

	/* вкладки «Как мы работаем» — лентой с прокруткой */
	.wg2-work__hand {
		display: none;
	}

	.wg2-work__tabs {
		display: flex;
		gap: 10px;
		margin: 0 -16px;
		padding: 4px 16px 8px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.wg2-work__tabs::-webkit-scrollbar {
		display: none;
	}

	.wg2-work__tabs::before {
		display: none;
	}

	.wg2-wtab {
		flex: none;
		scroll-snap-align: center;
	}

	.wg2-wtab__num {
		display: none;
	}

	.wg2-wtab__card {
		min-height: 0;
		padding: 12px 16px;
		background: #fff;
		box-shadow: 0 2px 8px rgba(16, 58, 128, .06);
	}

	.wg2-wtab__body small,
	.wg2-wtab__go {
		display: none;
	}

	.wg2-wtab__body b {
		white-space: nowrap;
		font-size: 15px;
	}

	.wg2-wtab__ico {
		font-size: 22px;
	}

	.wg2-tip {
		display: none;
	}

	.wg2-stages__grid {
		grid-template-columns: 1fr 1fr;
	}

	.wg2-stages__line,
	.wg2-stage__arrow {
		display: none !important;
	}

	.wg2-team__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
	}

	.wg2-member,
	.wg2-member:nth-child(n + 5) {
		grid-column: auto;
	}

	.wg2-member:nth-child(n + 5) .wg2-member__ph {
		aspect-ratio: 589 / 700;
	}

	.wg2-team__hand {
		display: none;
	}

	.wg2-audit__box,
	.wg2-final__box {
		grid-template-columns: minmax(0, 1fr);
	}

	.wg2-audit__person {
		min-height: 0;
	}

	.wg2-audit__bubble {
		left: 0;
	}

	.wg2-final__person {
		min-height: 380px;
	}

	.wg2-gift__person {
		min-height: 380px;
		max-width: 520px;
		width: 100%;
		margin: 0 auto;
	}
}

/* ==========================================================================
   Телефон (767 и уже)
   ========================================================================== */

@media (max-width: 767px) {
	.wg2-head {
		margin-bottom: 28px;
	}

	.wg2-h3 {
		font-size: 17px;
	}

	.wg2-hand {
		font-size: 22px;
	}

	.wg2-btn {
		min-height: 50px;
		padding: 13px 22px;
	}

	.wg2-btn--lg {
		min-height: 54px;
		padding: 15px 26px;
		font-size: 16px;
	}

	/* первый экран: текст сверху, фото под ним, карточки под фото */
	.wg2-hero {
		padding-top: 28px;
	}

	.wg2-hero__inner {
		flex-direction: column;
		min-height: 0;
	}

	.wg2-hero__text {
		max-width: none;
	}

	.wg2-hero__text .wg2-btn {
		width: 100%;
		margin-top: 22px;
	}

	.wg2-hero__person {
		position: relative;
		right: auto;
		top: auto;
		width: 250px;
		margin: 18px auto -60px;
	}

	.wg2-hero__mountains {
		height: 100%;
		object-position: 64% 38%;
	}

	.wg2-hero__bg::after {
		height: 380px;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 45%);
	}

	.wg2-hero__cards {
		margin-top: 0;
	}

	.wg2-hcard__ico {
		width: 44px;
		height: 44px;
	}

	.wg2-hcard__go {
		width: 30px;
		height: 30px;
		font-size: 16px;
	}

	/* услуги: большая карточка и компактный список */
	.wg2-services__top,
	.wg2-services__bottom {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.wg2-services__bottom {
		margin-top: 10px;
	}

	.wg2-scard {
		display: grid;
		grid-template-columns: auto 1fr auto;
		grid-template-areas: "ico title go" "ico text go";
		column-gap: 14px;
		align-items: center;
		min-height: 0;
		padding: 16px;
	}

	.wg2-scard .wg2-ico-circle {
		grid-area: ico;
		width: 44px;
		height: 44px;
		margin: 0;
		font-size: 22px;
	}

	.wg2-scard__title {
		grid-area: title;
		font-size: 16px;
	}

	.wg2-scard__text {
		grid-area: text;
		margin-top: 2px;
		font-size: 13px;
	}

	.wg2-scard .wg2-more {
		grid-area: go;
		padding: 0;
		font-size: 0;
		gap: 0;
	}

	.wg2-scard .wg2-more__go {
		font-size: 14px;
	}

	.wg2-scard--feat {
		display: flex;
		align-items: stretch;
		min-height: 0;
		padding: 24px 20px 26px;
	}

	.wg2-scard__row {
		margin-bottom: 24px;
	}

	.wg2-scard--feat .wg2-ico-circle {
		width: 52px;
		height: 52px;
	}

	.wg2-scard--feat .wg2-scard__text {
		max-width: 62%;
		font-size: 14px;
	}

	.wg2-scard--feat .wg2-btn {
		margin-top: 22px;
	}

	.wg2-scard__chart {
		width: 48%;
		right: -6%;
	}

	/* тарифы */
	.wg2-tcard__name {
		font-size: 20px;
	}

	.wg2-tcard__price {
		font-size: 26px;
	}

	.wg2-tcard__ico {
		width: 52px;
		height: 52px;
	}

	/* прибыльный и прозрачный */
	.wg2-seo__chart {
		padding: 0 0 24px;
	}

	.wg2-seo__chart::before {
		right: 20px;
	}

	.wg2-chart {
		padding: 18px 16px 16px;
	}

	.wg2-chart__plot {
		height: 150px;
	}

	.wg2-seo__hand {
		display: none;
	}

	.wg2-seo__card {
		padding: 22px 20px 24px;
	}

	.wg2-ico-blob {
		width: 68px;
		height: 68px;
	}

	.wg2-ico-blob img {
		width: 40px;
		height: 40px;
	}

	.wg2-seo__card .wg2-h3 {
		margin-top: 16px;
	}



	.wg2-ico-square {
		width: 52px;
		height: 52px;
		font-size: 22px;
	}


	/* формы */
	.wg2-form .wpcf7-form > p,
	.wg2-form--wide .wpcf7-form > p {
		grid-template-columns: minmax(0, 1fr);
	}

	.wg2 .wg2-form .form_btn {
		width: 100%;
		height: 56px !important;
		font-size: 16px !important;
	}

	/* форма аудита */
	.wg2-audit__box {
		gap: 0;
		padding: 26px 18px 0;
		border-radius: 16px;
	}

	.wg2-audit__img {
		width: 230px;
	}

	/* подпись — над фото, облачко-реплику на телефоне не показываем: места нет */
	.wg2-audit__person {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.wg2-audit__who {
		position: relative;
		top: auto;
		right: auto;
		order: -1;
		max-width: none;
		margin-bottom: 8px;
		text-align: center;
		font-size: 13px;
	}

	.wg2-audit__bubble {
		display: none;
	}

	/* кейсы — столбиком */
	.wg2-cases__aside {
		display: none;
	}

	.wg2-cases__row1,
	.wg2-cases__row2,
	.wg2-cases__pair {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.wg2-cases__row2,
	.wg2-cases__stack {
		margin-top: 12px;
		gap: 12px;
	}

	.wg2-case,
	.wg2-case--small,
	.wg2-case--tall {
		min-height: 250px;
		padding: 20px 18px;
	}

	.wg2-case__body,
	.wg2-case--small .wg2-case__body,
	.wg2-case--tall .wg2-case__body {
		max-width: 60%;
	}

	.wg2-case__img,
	.wg2-case--wide .wg2-case__img,
	.wg2-case--small .wg2-case__img,
	.wg2-case--tall .wg2-case__img {
		top: auto;
		bottom: 0;
		left: auto;
		right: -6%;
		width: 50%;
		height: 78%;
		object-fit: contain;
		object-position: 100% 100%;
		transform: none;
	}

	.wg2-case--tall:hover .wg2-case__img {
		transform: none;
	}

	.wg2-case__title,
	.wg2-case--small .wg2-case__title {
		font-size: 14px;
	}

	.wg2-case__title .wg2-num,
	.wg2-case--small .wg2-case__title .wg2-num {
		font-size: 1.2em;
	}

	.wg2-cases__foot .wg2-btn {
		width: 100%;
	}

	/* как мы работаем */
	.wg2-wpane {
		padding: 22px 18px 22px;
	}

	.wg2-wpane__head {
		min-height: 0;
		padding-right: 90px;
	}

	.wg2-wpane__art {
		width: 84px;
		right: -6px;
		top: -8px;
	}

	.wg2-wpane .wg2-h2 {
		font-size: 26px;
	}

	.wg2-wlist {
		margin-top: 16px;
	}

	.wg2-wlist li {
		align-items: flex-start;
		gap: 12px;
	}

	.wg2-wlist .wg2-ico-square {
		display: none;
	}

	.wg2-wlist__num {
		width: 34px;
		height: 34px;
		font-size: 14px;
	}

	.wg2-wpane .wg2-actions .wg2-btn {
		width: 100%;
	}

	/* этапы: столбиком, каждая карточка своей высоты */
	.wg2-stages__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: auto;
		gap: 12px;
	}

	.wg2-stage {
		flex-direction: row;
		gap: 16px;
		padding: 20px 18px 22px;
	}

	.wg2-stage .wg2-ico-circle--lg {
		width: 52px;
		height: 52px;
		font-size: 22px;
	}

	/* команда */
	.wg2-team__grid {
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}

	.wg2-member figcaption {
		padding: 12px 8px 14px;
	}

	.wg2-member b {
		font-size: 15px;
	}

	.wg2-member figcaption span {
		font-size: 12.5px;
	}

	/* подарок */
	.wg2-gift__person {
		min-height: 320px;
	}

	.wg2-gift__img {
		width: 250px;
	}

	.wg2-gift__bubble {
		left: 0;
		top: 0;
		padding: 10px 16px 10px 10px;
		font-size: 15px;
	}

	.wg2-gift__gift {
		width: 40px;
		height: 40px;
		font-size: 22px;
	}

	.wg2-gift__hand {
		display: none;
	}

	/* отзывы */
	.wg2-rev {
		padding: 0;
	}

	.wg2-rev__nav {
		display: none;
	}

	/* вопросы */
	.wg2-qa summary {
		padding: 18px 18px;
	}

	.wg2-qa__a {
		padding: 0 18px 20px;
	}

	.wg2-qa__a p {
		font-size: 15px;
	}

	.wg2-bar {
		margin-bottom: 20px;
	}

	/* финальная форма */
	.wg2-final__box {
		padding: 24px 18px 0;
		border-radius: 18px;
	}



	.wg2-final__person {
		min-height: 330px;
	}

	/* фото левее, плашки справа — на плечо и грудь, а не на лицо */
	.wg2-final__img {
		left: 36%;
		width: 240px;
	}

	.wg2-final__who {
		top: 8px;
		font-size: 13px;
	}

	.wg2-final__who b {
		font-size: 15px;
	}





	.wg2-final__hand {
		display: none;
	}
}


/* ##########################################################################
   ДОВОДКА ПО БЛОКАМ — 23.09.2026, после проверки на 1920 / 1366 / 768 / 375.
   Каждое правило ниже замерено на стенде до и после (что и почему — в комментариях).
   Стоит в конце файла намеренно: так правки и проверялись — поверх всего остального.
   ########################################################################## */

/* ==========================================================================
   Первый экран (hero) — правки по замерам на стенде, 23.09.2026.
   Всё только для классов этого блока (.wg2-hero…, .wg2-hcard…), вес — через .wg2 впереди,
   чтобы перебить базовые правила выше без !important.
   ========================================================================== */

/* Заголовок: предлог «в» висел в конце первой строки («…сайта в / Яндекс и Google»).
   12.7em — «SEO продвижение сайта» (12,37em) помещается, а с « в» (13,1em) уже нет:
   вторая строка начинается с «в», как в макете. На узких экранах колонка и так уже 12.7em — не действует */
.wg2 .wg2-hero__title {
	max-width: 12.7em;
}

/* Подзаголовок: 540px при кегле 19 — это 28em, строка ломалась на три с висящим «аудит сайта».
   32em — две строки на всех ширинах от 1024, как в макете; pretty — без одинокого слова в последней строке (768: «сайта») */
.wg2 .wg2-hero__descr {
	max-width: 32em;
	text-wrap: pretty;
}

/* Карточки: без одинокого слова в последней строке описания («заявок», «работы» на 1366 и 375) */
.wg2 .wg2-hcard__text {
	text-wrap: pretty;
}

/* Рукописная пометка: белый 0,9 × прозрачность 0,85 поверх светлого неба давал контраст 2,5–3:1 («читается с трудом»).
   Сплошной белый, полужирный Caveat (600 уже подключён) и тёмная тень вокруг букв */
.wg2 .wg2-hero__hand {
	opacity: 1;
	color: #fff;
	font-weight: 600;
	text-shadow: 0 2px 12px rgba(2, 32, 90, .7), 0 0 3px rgba(2, 32, 90, .45);
}

/* подчёркивание пометки — тоже сплошное белое с той же тенью, иначе оно бледнее букв */
.wg2 .wg2-hero__hand::after {
	border-bottom-color: #fff;
	filter: drop-shadow(0 1px 4px rgba(2, 32, 90, .6));
}

/* Телефон: заголовок в три строки оставлял «Google» одно на последней строке — balance выравнивает строки */
@media (max-width: 767px) {
	.wg2 .wg2-hero__title {
		text-wrap: balance;
	}
}

/* Карточки в ряд: заголовки на одной высоте. При центровке по вертикали заголовок карточки
   с коротким описанием съезжал на 10 px ниже соседних. Значок остаётся по центру */
@media (min-width: 980px) {
	.wg2 .wg2-hcard {
		align-items: flex-start;
	}

	.wg2 .wg2-hcard__ico {
		align-self: center;
	}
}

/* 980–1199: три карточки по 304 px, тексту оставалось 144 px — заголовок в 2 строки, описание в 4.
   Значок и стрелка — строкой сверху, текст на всю ширину карточки (262 px): заголовок в 1 строку, описание в 2 */
@media (min-width: 980px) and (max-width: 1199px) {
	.wg2 .wg2-hcard {
		display: grid;
		grid-template-columns: auto 1fr auto;
		grid-template-areas: "ico . go" "body body body";
		align-items: center;
		row-gap: 12px;
		padding: 20px 20px 22px;
	}

	.wg2 .wg2-hcard__ico {
		grid-area: ico;
		width: 48px;
		height: 48px;
	}

	.wg2 .wg2-hcard__go {
		grid-area: go;
		align-self: center;
	}

	.wg2 .wg2-hcard__body {
		grid-area: body;
	}
}

@media (min-width: 1200px) {
	/* Облака: слой растянут на 104% ширины окна, его высота растёт с шириной, а высота секции почти нет —
	   на 1920 облака поднимались под подзаголовок (контраст белого текста 1,2:1).
	   Сдвиг вниз растёт вместе с шириной: верх облаков держится ниже подзаголовка на всех ширинах */
	.wg2 .wg2-hero__clouds {
		bottom: min(24px, calc(24px - (100vw - 1440px) * .17));
	}

	/* карточки 1200–1439: отступ сверху и снизу 17 px при трёх строках описания — текст впритык к краю */
	.wg2 .wg2-hcard {
		padding: 22px 18px;
	}
}

/* 1200–1299: пометка упиралась в правый край окна и обрезалась («клиенто») — сдвиг влево */
@media (min-width: 1200px) and (max-width: 1299px) {
	.wg2 .wg2-hero__hand {
		margin-left: -36px;
	}
}

/* Широкий экран: кнопка и карточки были ниже макета по пропорциям (кнопка 3,3% колонки против 4%,
   карточка 6,8% против 9,3%) — выглядели приплюснутыми */
@media (min-width: 1440px) {
	.wg2 .wg2-hero__text .wg2-btn {
		min-height: 56px;
		padding: 15px 36px;
		font-size: 18px;
	}

	/* значок и поля по бокам прежние: иначе средняя карточка на 1440–1679 уходит в 3 строки */
	.wg2 .wg2-hcard {
		gap: 14px;
		padding: 24px 18px;
	}

	.wg2 .wg2-hcard__title {
		font-size: 19px;
	}
}

@media (min-width: 1680px) {
	.wg2 .wg2-hero__text .wg2-btn {
		min-height: 62px;
		padding: 16px 44px;
		font-size: 19px;
	}

	/* высоту даёт padding, а не min-height: поля сверху и снизу равны */
	.wg2 .wg2-hcard {
		gap: 20px;
		padding: 30px 28px;
	}

	.wg2 .wg2-hcard__ico {
		width: 66px;
		height: 66px;
	}

	.wg2 .wg2-hcard__title {
		font-size: 21px;
	}

	.wg2 .wg2-hcard__text {
		font-size: 15px;
	}

	.wg2 .wg2-hcard__go {
		width: 42px;
		height: 42px;
		font-size: 20px;
	}

	/* Горы: картинка заполняет секцию по ширине, и шире ~1820 её низ прижат к низу секции —
	   снежные вершины поднимались под подзаголовок и пометку (на 2560 контраст 2:1 и 1,5:1).
	   40% по вертикали опускает их ниже текста. До ~1820 картинка вписана по высоте — правило ничего не меняет, на 1920 сдвиг 19 px */
	.wg2 .wg2-hero__mountains {
		object-position: 62% 40%;
	}
}

/* ==========================================================================
   3. Наши услуги — заплатка после корневой правки сбросов (сентябрь 2026)
   ========================================================================== */

/* Малые карточки: описание было в 6px под жирным заголовком и шло строками 1.4 —
   «текст очень близко». 8px и 1.5: заголовок отделён, строки описания дышат */
.wg2 .wg2-services .wg2-scard:not(.wg2-scard--feat) .wg2-scard__text {
	margin-top: 8px;
	line-height: 1.5;
}

/* Большая карточка: при 300px описание рвалось «…в Яндексе и в / Google» — предлог висел
   в конце строки. 316px дают перенос как в макете: «…и в Google / с гарантией результата».
   Только от 768px: на телефоне своё ограничение 62%, его не трогаем */
@media (min-width: 768px) {
	.wg2 .wg2-services .wg2-scard--feat .wg2-scard__text {
		max-width: 316px;
	}
}

/* Планшет и узкий ноутбук (768–1199): общее «.wg2-scard { padding: 20px }» из медиазапроса
   перебивает у большой карточки её 34/36px — синяя карточка теснее малых, иконка у самого края.
   Возвращаем воздух: 30px сверху и снизу, 28px по бокам (на 980–1199 бока уже — см. ниже) */
@media (min-width: 768px) and (max-width: 1199px) {
	.wg2 .wg2-services .wg2-scard--feat {
		padding: 30px 28px;
	}

	/* нижняя сетка: 5 карточек по auto-fit ложились 3+2 с пустой клеткой (768) и 4+1 (980–1199).
	   6 колонок, карточка на 2: полная строка — три карточки, остаток из двух делит строку
	   пополам, остаток из одной — на всю ширину */
	.wg2 .wg2-services__bottom {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.wg2 .wg2-services__bottom > .wg2-scard {
		grid-column: span 2;
	}

	.wg2 .wg2-services__bottom > .wg2-scard:nth-child(3n + 1):nth-last-child(2),
	.wg2 .wg2-services__bottom > .wg2-scard:nth-child(3n + 1):nth-last-child(2) ~ .wg2-scard {
		grid-column: span 3;
	}

	.wg2 .wg2-services__bottom > .wg2-scard:nth-child(3n + 1):last-child {
		grid-column: 1 / -1;
	}
}

/* 980–1199: верхняя сетка в три колонки, большая карточка на 2 строки, а малых шесть —
   третья строка 2 из 3, справа дыра. Большая карточка на 3 строки закрывает дыру;
   график в ней крупнее, чтобы высокая синяя карточка не пустовала */
@media (min-width: 980px) and (max-width: 1199px) {
	.wg2 .wg2-services__top > .wg2-scard--feat {
		grid-row: span 3;
	}

	/* по бокам 22px, а не 28: карточка узкая (358px), и описанию нужны его 312–316px,
	   иначе предлог «в» снова повисает в конце строки */
	.wg2 .wg2-services .wg2-scard--feat {
		padding-left: 22px;
		padding-right: 22px;
	}

	.wg2 .wg2-services__top > .wg2-scard--feat .wg2-scard__chart {
		width: 100%;
	}
}

/* Телефон: компактный список */
@media (max-width: 767px) {
	/* стрелка: общее margin-top:auto у .wg2-more в сетке опускало её к низу карточки
	   (центр на 26–46px ниже иконки) — ставим по центру, как иконку слева */
	.wg2 .wg2-services .wg2-scard .wg2-more {
		margin-top: 0;
		align-self: center;
	}

	/* описание под заголовком: было 2px — вплотную; 6px (на компьютере 8px, здесь кегль мельче) */
	.wg2 .wg2-services .wg2-scard:not(.wg2-scard--feat) .wg2-scard__text {
		margin-top: 6px;
		line-height: 1.45;
	}

	/* карточки списка разделены 10px — на телефоне сливались в сплошную ленту; 12px */
	.wg2 .wg2-services__top,
	.wg2 .wg2-services__bottom {
		gap: 12px;
	}

	.wg2 .wg2-services__bottom {
		margin-top: 12px;
	}
}

/* ==========================================================================
   Тарифы — доводка после корневой правки сбросов (сентябрь 2026)
   ========================================================================== */

/* Заголовок: граница 12.2em проходит между «Выберите свой тариф на» (12.47em)
   и «на продвижение сайта» (11.51em) — предлог «на» уходит на вторую строку,
   как на макете, на всех ширинах (было: «…тариф на / продвижение сайта» на 1366 и 375) */
.wg2 .wg2-tariffs .wg2-h2 {
	max-width: 12.2em;
}

/* Подзаголовок: строки выравниваются по длине вместо «длинная до „чтобы“ + короткий хвост» */
.wg2 .wg2-tariffs .wg2-lead {
	text-wrap: balance;
}

/* Подпись под ценой: «Оптимальное решение / для старта и роста в поиске» —
   без одного слова во второй строке (1920) и без висячего «для» (1366, 375) */
.wg2 .wg2-tariffs .wg2-tcard__sub {
	text-wrap: balance;
}

/* Пункты списка: браузер не оставляет одно слово или число («0%», «страниц», «проекта»)
   на последней строке; число строк и высота карточек не меняются */
.wg2 .wg2-tariffs .wg2-checks li span {
	text-wrap: pretty;
}

/* Верх карточки: плашка «Популярный пакет» заходит внутрь на половину своей высоты (17.5px)
   и при прежних 26px почти касалась «Бизнес» (8.5px). Верхний отступ одинаковый у всех трёх
   карточек, чтобы названия в ряду стояли на одной линии */
.wg2 .wg2-tariffs .wg2-tcard {
	padding-top: 36px;
}

@media (max-width: 1199px) {
	/* планшет: было 22px — плашка в 4.5px от названия; боковые и нижний отступы прежние (18/20) */
	.wg2 .wg2-tariffs .wg2-tcard {
		padding-top: 32px;
	}
}

@media (max-width: 979px) {
	/* карточки в столбик: выравнивать по ряду нечего, воздух под плашкой добавляем только популярной */
	.wg2 .wg2-tariffs .wg2-tcard.is-popular {
		padding-top: 38px;
	}
}

/* ---------- 5. Прибыльный и прозрачный (seo): добор воздуха после проверки на стенде ---------- */

/* Надпись «SEO продвижение» → заголовок: 14px хватало только телефону. На широких экранах
   просвет между буквами был 28px при кегле заголовка 60px (в макете ≈0.7 кегля ≈ 44px).
   Отступ растёт с шириной: 30px на 1920, 23px на 1366, 14px на 768 и уже */
.wg2 .wg2-seo .wg2-over {
	margin-bottom: clamp(14px, 1.7vw, 30px);
}

/* Описание → кнопка «Обсудить проект»: было 32px на всех ширинах (35px по буквам),
   в макете ≈46px на 1920. Растёт до 44px на широких, на планшете и телефоне остаётся 32px */
.wg2 .wg2-seo .wg2-actions {
	margin-top: clamp(32px, 2.6vw, 44px);
}

/* Плашка «Устойчивый рост» стояла в одном ряду с подписью графика и залезала на 15px
   на высоту строки «Результаты продвижения» (на 375 — в 11px от неё по горизонтали,
   на 1024 — встык к концу слова «трафика»). Опускаем график: плашка встаёт на 18px ниже
   шапки карточки, как в макете, на всех ширинах */
.wg2 .wg2-seo .wg2-chart__plot {
	margin-top: 56px;
}

/* Рукописная «Видимый результат» лежала на нижнем углу карточки графика (перекрытие 14px
   по вертикали). Опускаем её под угол: верх пометки = низ карточки. Ниже 768 она скрыта */
.wg2 .wg2-seo__hand {
	bottom: -26px;
}

/* 1200–1679: четыре карточки узкие (текст 212px, описание до 9 строк, два заголовка в 3 строки).
   Боковые поля 30 → 24px (всё ещё шире, чем в макете в пропорции), заголовок чуть меньше —
   текст 224px, заголовки в 2 строки у трёх карточек из четырёх. Верх и низ карточки не трогаем */
@media (min-width: 1200px) and (max-width: 1679px) {
	.wg2 .wg2-seo__card {
		padding-left: 24px;
		padding-right: 24px;
	}

	.wg2 .wg2-seo__card .wg2-h3 {
		font-size: clamp(18px, 1.4vw, 22px);
	}
}

/* 768–1199: четыре карточки раскладывались 3 + 1 (четвёртая одна во втором ряду, на 820–1199).
   Ставим 2 × 2. Только для набора из четырёх карточек: три в ряд сироту не дают */
@media (min-width: 768px) and (max-width: 1199px) {
	.wg2 .wg2-seo__grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* 768–979: пометка «Видимый результат» видна и после опускания подошла бы к карточкам на 8px —
   отодвигаем сетку карточек от графика (40 → 56px) */
@media (min-width: 768px) and (max-width: 979px) {
	.wg2 .wg2-seo__grid {
		margin-top: 56px;
	}
}

/* В одну колонку (979 и уже) повёрнутая голубая подложка графика начиналась в 1–7px под
   кнопкой, и тень кнопки ложилась на неё. Зазор текст → график 32 → 56px:
   от кнопки до подложки 25px на 768 и 31px на 375 */
@media (max-width: 979px) {
	.wg2 .wg2-seo__top {
		row-gap: 56px;
	}
}

/* Описания в соседних карточках начинались на разной высоте (заголовки в 1, 2 или 3 строки,
   разница до 27px). Карточка — подсетка из трёх строк общей сетки: значок, заголовок, текст;
   заголовок прижат к низу своей строки, поэтому от заголовка до текста везде 12px,
   а разница уходит в просвет над заголовком. Браузеры без subgrid оставят как было */
@media (min-width: 768px) {
	@supports (grid-template-rows: subgrid) {
		.wg2 .wg2-seo__card {
			display: grid;
			grid-row: span 3;
			grid-template-rows: subgrid;
			row-gap: 0;
			align-content: start;
		}

		.wg2 .wg2-seo__card .wg2-h3 {
			align-self: end;
		}
	}
}

/* ==========================================================================
   6. Что даёт SEO — воздух и ширина строки (дописано после корневой правки сбросов)
   ========================================================================== */



/* Пункты списка: между концом описания и заголовком следующего пункта было 54px по буквам
   (45 по боксам) — плотнее макета, где до 66px. Отступ растёт с шириной: 22px до 1100px, 27px на 1366, 30px на 1920.
   Только от 768px: на телефоне своё правило 18px, его не трогаем */

/* Широкий экран: иконки 64px на колонке 1536px выглядели мелкими (в макете квадрат ~5,8% колонки,
   у нас было 4,2%) — теперь 76px, текст отодвинут от иконки на 30px вместо 24.
   Описание 16px вместо 15: в макете оно почти одного веса с заголовком пункта (та же строка
   в макете шире нашей в 1,13 раза при равных заголовках), а 15px рядом с 21px читалось мелко.
   Текст карточек слева (14px) не трогаем: при 15px на 1920 «40 000» рвётся между строк */

/* 980–1199px: карточка с цифрами всего 211–213px шириной, «30» во второй карточке уезжает
   на следующую строку и наезжает на «0,5» (боксы перекрываются на 10px), заголовок рвётся
   на 4–5 строк. Ставим карточки друг под другом — по 442–446px, заголовки в 2 строки, наезда нет */

/* ---------- 7. Форма «Аудит»: правки после корневого сброса ---------- */

/* Лишняя пустота под формой: после перевода сбросов на :where правило темы
   «form p { padding-bottom: 28/53/76px }» (вес 0,0,2) снова действует, и оба абзаца формы
   (поля и пустой служебный) получают отступ снизу: 56 px на 1920, 106 на 1366, 152 на 768.
   Вес 0,3,1 — сильнее темы при любом порядке файлов. Если общее правило
   .wg2-form .wpcf7-form > p получит padding: 0 (заявка в shared), это правило станет лишним. */
.wg2 .wg2-audit .wg2-form .wpcf7-form > p {
	padding: 0;
}

/* Фото «висело» в воздухе: min-height: 100% растягивал колонку на всю плашку,
   картинка сидела у её верха. С 0 колонка = высоте фото, align-self: end прижимает её к низу. */
.wg2 .wg2-audit .wg2-audit__person {
	min-height: 0;
}

/* Строка согласия на голубой плашке: #5f6a82 даёт 4,7:1, ссылка #0f6ef2 — 4,0:1 (ниже 4,5:1).
   Основной цвет текста — 7,6:1, тёмно-синий у ссылки — 5,5:1; в макете строка почти чёрная. */
.wg2 .wg2-audit .wg2-form .filter_checkbox__title {
	color: var(--wg2-text);
}

.wg2 .wg2-audit .wg2-form .filter_checkbox__title a {
	color: var(--wg2-blue-3);
}

/* Голубое свечение за фото (::before) рисовалось поверх непозиционированной формы и
   подкрашивало поля там, где фото стоит под формой (768–979). Колонка текста — слоем выше;
   облачко (z-index: 2) остаётся над ней. */
.wg2 .wg2-audit .wg2-audit__text {
	position: relative;
	z-index: 1;
}

@media (min-width: 1200px) {
	/* Заголовок: ширина растёт вместе с кеглем — всегда 3 строки, как в макете,
	   а не 5 строк стеной на 1530–1920 при max-width 560 px */
	.wg2 .wg2-audit .wg2-audit__text .wg2-h2 {
		max-width: 14.2em;
	}

	/* Облачко закрывало левый рукав на фото — сдвинуто левее, стоит отдельно, как в макете */
	.wg2 .wg2-audit .wg2-audit__bubble {
		left: -52%;
	}
}

@media (min-width: 980px) and (max-width: 1199px) {
	/* Колонка текста ~500 px: два поля и кнопка в одну строку сжимали поля до 121 px,
	   подсказки обрезались («Номер т»). Поля — парой, кнопка — второй строкой во всю ширину */
	.wg2 .wg2-audit .wg2-form .wpcf7-form > p {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.wg2 .wg2-audit .wg2-form .form_btn {
		grid-column: 1 / -1;
	}

	/* Облачку здесь некуда встать, не задев форму (как и на телефоне) */
	.wg2 .wg2-audit .wg2-audit__bubble {
		display: none;
	}
}

@media (min-width: 768px) and (max-width: 979px) {
	/* Подпись стояла у правого края плашки, в ~190 px от лица, — теперь у правого плеча фото
	   (фото 340 px по центру) */
	.wg2 .wg2-audit .wg2-audit__who {
		right: auto;
		left: calc(50% + 100px);
	}
}

@media (max-width: 767px) {
	/* Группы «подпись + поле» почти сливались: 14 px между группами против 8 px внутри.
	   20 px — группы читаются раздельно */
	.wg2 .wg2-audit .wg2-form .wpcf7-form > p {
		row-gap: 20px;
	}
}

/* ---------- 8. Кейсы: доводка после корневой правки сбросов ---------- */

/* Рукописная пометка над кейсами: было #7aa6ea с прозрачностью .85 — на белом 2,1:1, почти не читается.
   Фирменный синий без прозрачности — 4,6:1; штрих Caveat потолще (600 подгружен), кегль 26 px, как у базовой .wg2-hand.
   Переносов не добавляет: на 768–1920 те же строки, что и было */
.wg2 .wg2-cases__aside .wg2-hand {
	color: var(--wg2-blue);
	opacity: 1;
	font-weight: 600;
	font-size: 26px;
}

/* Малые карточки: фраза с цифрами стояла в 8 px под описанием и в 12 px над кнопкой — впритык.
   Чуть больше воздуха, композиция та же */
.wg2 .wg2-case--small .wg2-case__title {
	margin: 10px 0 16px;
}

/* Широкий экран (колонка 1536 и 1280): первый ряд держал 290 px при любой ширине колонки и выглядел сплющенным.
   Высота — четверть колонки, как в макете 05 (345 px при колонке 1384). На 1200–1439 (колонка 1168) остаётся 290 */
@media (min-width: 1440px) {
	.wg2 .wg2-cases__row1 .wg2-case {
		min-height: 320px;
	}

	/* главные цифры кейсов были вдвое мельче макета (33 px): фраза 16 px, цифры 2,6em ≈ 42 px.
	   Малые карточки не трогаем — им места не хватит */
	.wg2 .wg2-cases__row1 .wg2-case__title,
	.wg2 .wg2-case--wide .wg2-case__title,
	.wg2 .wg2-case--tall .wg2-case__title {
		font-size: 16px;
	}

	.wg2 .wg2-cases__row1 .wg2-case__title .wg2-num,
	.wg2 .wg2-case--wide .wg2-case__title .wg2-num,
	.wg2 .wg2-case--tall .wg2-case__title .wg2-num {
		font-size: 1.2em;
	}
}

@media (min-width: 1680px) {
	.wg2 .wg2-cases__row1 .wg2-case {
		min-height: 384px;
	}
}

/* Ноутбук (1200–1679): в узких карточках первого ряда кнопка закрывала фото (у b2bperevod — лицо, 48 px вглубь).
   Картинка уже и сдвинута вправо: кнопка ложится только на край стола */
@media (min-width: 1200px) and (max-width: 1679px) {
	.wg2 .wg2-cases__row1 .wg2-case:not(.wg2-case--wide) .wg2-case__img {
		width: 44%;
		right: -6%;
	}
}

/* Подпись у нижней кнопки «Больше успешных историй впереди»: 11 px мелковато — 12 px, как у остальных надписей .wg2-over.
   Цвет уже темнее за счёт общего --wg2-muted (5,4:1) */
@media (min-width: 768px) {
	.wg2 .wg2-cases__foot .wg2-over {
		font-size: 12px;
	}
}

@media (max-width: 767px) {
	/* широкие карточки держали текст в 50% (мобильное правило их не перечисляло): фраза в 5 строк, до кнопки 2 px.
	   Теперь 60%, как у остальных */
	.wg2 .wg2-case--wide .wg2-case__body {
		max-width: 60%;
	}

	/* картинка 50% при right −6% заходила под текстовую колонку на 10 px: «50» упиралось в логотип, кнопки — в фото */
	.wg2 .wg2-case__img,
	.wg2 .wg2-case--wide .wg2-case__img,
	.wg2 .wg2-case--small .wg2-case__img {
		width: 46%;
	}

	/* трактор и самолёт нарисованы в середине высокого холста: при contain от них оставался значок 90 px.
	   Холст целиком (fill по пропорции), пустой низ холста уводим за край карточки.
	   Потолок 260 px: на широком телефоне (500–767) иначе холст растёт и срезает верх трактора */
	.wg2 .wg2-case--tall .wg2-case__img,
	.wg2 .wg2-case--tall:hover .wg2-case__img {
		width: min(52%, 260px);
		height: auto;
		right: max(-8%, -30px);
		object-fit: fill;
		transform: translateY(18%);
	}

	/* на телефоне все карточки одинаковые — и отступы у фразы с цифрами одинаковые (у малых было 8/12 px) */
	.wg2 .wg2-case--small .wg2-case__title {
		margin: 14px 0 18px;
	}

	/* подпись «Больше успешных историй впереди» ломалась на две строки, «ВПЕРЕДИ» висело одно.
	   Разрядка и черта короче — одна строка от 360 px */
	.wg2 .wg2-cases__foot .wg2-over {
		gap: 10px;
		letter-spacing: .1em;
	}

	.wg2 .wg2-cases__foot .wg2-over::before {
		width: 24px;
	}
}

/* ---------- 9. Как мы работаем: воздух и переносы (патч блока) ---------- */

/* Надпись над заголовком: на телефоне во второй строке оставалось одно слово
   «РЕЗУЛЬТАТЫ» — делим строки поровну. На ≥768 надпись в одну строку, там ничего не меняется */
.wg2 .wg2-work .wg2-head .wg2-over {
	text-wrap: balance;
}

/* Описание под подзаголовком: отступ 16px давал между глифами 25px (0,45 высоты заголовка),
   в макете 0,64 — описание отделено заметнее. 26px на широком, не меньше 18px на узком.
   Ширина 640 → 720 и ровные строки: было три строки с одним словом «результатов» в последней */
.wg2 .wg2-work .wg2-lead {
	max-width: 720px;
	margin-top: clamp(18px, 1.4vw, 26px);
	text-wrap: balance;
}

/* Плашка «5 этапов…»: отступ от последней вкладки 22 → 30px (в макете ~35), чуть больше поля
   внутри и ровные строки — на 1920 во второй строке висело одно слово «трафика».
   display не задаём: на ≤979 плашку прячет медиазапрос темы */
.wg2 .wg2-work .wg2-tip {
	margin-top: 30px;
	padding: 22px 26px;
}

.wg2 .wg2-work .wg2-tip span {
	text-wrap: balance;
}

/* Описания пунктов этапа: без одиночного слова в последней строке («сайта.», «конкурентов.»
   висели отдельно на 1920 и 1366) — браузер переносит на строку раньше */
.wg2 .wg2-wlist__body small {
	text-wrap: pretty;
}

/* Вкладки на компьютере: зазор между карточками 14 → 18px (в макете ~19).
   Только от 980: ниже вкладки — лента с прокруткой и своим зазором 10px */
@media (min-width: 980px) {
	.wg2 .wg2-work__tabs {
		gap: 18px;
	}
}

/* 1200–1439 (колонка 1168): текстовой части вкладки было 188px — подпись рвалась на «мета-/теги»,
   «Мониторинг процесса» уходил в две строки, карточки 94–121px. Левой колонке чуть больше места
   (188 → 212px текста) вместо того, чтобы поджимать поля карточек. В две строки остаётся
   только «Внутренняя оптимизация» — так же, как в макете */
@media (min-width: 1200px) and (max-width: 1439px) {
	.wg2 .wg2-work__grid {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr);
	}
}

/* 980–1199 (колонка 944): текстовой части было 113px — подписи в 2–3 строки, карточки 100–141px.
   Левая колонка шире, кружки номеров 54 → 44, стрелка-шеврон скрыта (выбор вкладки и так виден цветом),
   поля карточки и плашки чуть меньше — иначе текст не помещается; стало 207px, подписи в строку */
@media (min-width: 980px) and (max-width: 1199px) {
	.wg2 .wg2-work__grid {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
	}

	.wg2 .wg2-wtab {
		gap: 12px;
	}

	.wg2 .wg2-wtab__num {
		width: 44px;
		height: 44px;
		font-size: 15px;
	}

	/* линия между кружками — по центру кружка 44px */
	.wg2 .wg2-work__tabs::before {
		left: 21px;
	}

	.wg2 .wg2-wtab__card {
		gap: 14px;
		padding: 16px 18px;
	}

	.wg2 .wg2-wtab__go {
		display: none;
	}

	.wg2 .wg2-work .wg2-tip {
		gap: 14px;
		padding: 18px 20px;
	}
}

/* ==========================================================================
   10. Этапы SEO — патч поверх раздела 10: воздух между рядами и вокруг стрелок,
   текст карточек на широком экране, иконка над текстом на 1200–1679, телефон и планшет.
   Все правила с префиксом .wg2 — вес (0,2,0) и выше, поэтому они перебивают и базу,
   и медиазапросы раздела 10. Отсюда правило: каждое значение задано в своём диапазоне ширин,
   без «голых» правил, которые молча легли бы на все ширины.
   ========================================================================== */

/* Подзаголовок блока — основным цветом текста, как в макете (#3f4a64) и как у соседнего блока
   «Как мы работаем» сразу над этим: серый #5f6a82 читается (5,1:1), но рядом выглядит бледнее соседа */
.wg2 .wg2-stages .wg2-lead {
	color: var(--wg2-text);
}

/* Синяя карточка 06: начало градиента темнее (#1668e8 вместо #2b86ff) и блик слабее —
   белый текст описания был 4,0:1 в светлом углу при норме 4,5:1 */
.wg2 .wg2-stage--accent {
	background: radial-gradient(70% 80% at 90% 100%, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(150deg, #1668e8 0%, #0f63e3 100%);
}

/* Три колонки со «змейкой» (от 980 px). Промежуток между рядами отделён от промежутка в ряду:
   --gap — в ряду, там кружок-стрелка; --gap-y — между рядами, там идёт линия.
   Было одно значение на оба, и линия шла в 28 px от карточек, а кружок стоял в 6 px от них */
@media (min-width: 980px) {
	.wg2 .wg2-stages__grid {
		gap: var(--gap-y) var(--gap);
	}

	/* линия считает середину ряда по промежутку МЕЖДУ РЯДАМИ, а не в ряду */
	.wg2 .wg2-stages__grid--snake .wg2-stages__line--a {
		top: calc((100% - var(--gap-y)) / 4);
	}

	.wg2 .wg2-stages__grid--snake .wg2-stages__line--b {
		bottom: calc((100% - var(--gap-y)) / 4);
	}

	/* кружок — ровно посередине промежутка при любом --gap (было зашито -28/-20 px) */
	.wg2 .wg2-stage__arrow {
		right: calc(var(--gap) / -2);
	}
}

/* 980–1199: кружок 36 px стоял в промежутке 40 px — по 2 px до карточек. Стало 30 в 48: по 9 px */
@media (min-width: 980px) and (max-width: 1199px) {
	.wg2 .wg2-stages__grid {
		--gap: 48px;
		--gap-y: 64px;
	}

	.wg2 .wg2-stage__arrow {
		width: 30px;
		height: 30px;
		margin-right: -15px;
		font-size: 16px;
	}
}

/* 1200–1679: промежуток в ряду 72 px — кружок 44 px (как был) отходит от карточек на 14 px */
@media (min-width: 1200px) and (max-width: 1679px) {
	.wg2 .wg2-stages__grid {
		--gap: 72px;
		--gap-y: 80px;
	}

	/* иконка над текстом, как уже сделано до 1199. Иконка слева оставляла тексту полосу
	   200 px на 1200–1439 (заголовки в две строки, описание в шесть, кнопка раздвигала
	   третью колонку) и 243 px на 1440–1679 (заголовки в две строки в 4 карточках из 6) */
	.wg2 .wg2-stage {
		flex-direction: column;
		gap: 14px;
	}
}

/* От 1680 (экран владельца ~1880): промежутки как в макете (~90 px), кружок 48 px с зазором 20 px,
   изгибы линии выносим на середину промежутка, текст карточек — кеглем макета (16/24 и 20) */
@media (min-width: 1680px) {
	.wg2 .wg2-stages__grid {
		--gap: 88px;
		--gap-y: 88px;
	}

	.wg2 .wg2-stage__arrow {
		width: 48px;
		height: 48px;
		margin-right: -24px;
		font-size: 20px;
	}

	.wg2 .wg2-stages__grid--snake .wg2-stages__line--a {
		right: calc(var(--gap) / -2);
	}

	.wg2 .wg2-stages__grid--snake .wg2-stages__line--b {
		left: calc(var(--gap) / -2);
	}

	.wg2 .wg2-stage .wg2-h3 {
		font-size: 20px;
	}

	.wg2 .wg2-stage p {
		font-size: 16px;
		line-height: 1.5;
	}
}

/* До 979 змейки и стрелок нет — равные ряды (1fr) не нужны: у карточек 01–05
   под текстом было по 92 px пустоты, потому что высоту всем задавала карточка 06 с кнопкой */
@media (max-width: 979px) {
	.wg2 .wg2-stages__grid {
		grid-auto-rows: auto;
	}
}

/* Телефон: промежуток между карточками был 12 px — меньше их собственных полей (18–22 px) */
@media (max-width: 767px) {
	.wg2 .wg2-stages__grid {
		gap: 16px;
	}
}

/* ---------- 11. Команда: воздух в шапке и подписях (патч) ---------- */

/* Росчерк под словом «команда» уходит на .12em ниже рамки заголовка и съедает почти половину
   общего отступа 16px: от росчерка до подзаголовка оставалось 11px. Добавляем место под росчерк */
.wg2 .wg2-team .wg2-lead {
	margin-top: clamp(20px, 1.4vw, 26px);
}

/* Подзаголовок был во всю ширину шапки (820px, 84–98 знаков в строке) и доходил до рукописной
   пометки. 43em — строка кончается на «ТОП,», вторая начинается с «чтобы», как в макете;
   в em — чтобы перенос был тем же при любом кегле. На телефоне колонка уже 43em — не действует */
.wg2 .wg2-team .wg2-lead {
	max-width: 43em;
	margin-left: auto;
	margin-right: auto;
}

/* Между шапкой и фото: на широких экранах шапка прижата к карточкам (59px при колонке 1536,
   в макете ~4.6% колонки ≈ 71px). С 1400px общий отступ уже 56px, отсюда растим до 72px без скачка */
@media (min-width: 1400px) {
	.wg2 .wg2-team .wg2-head {
		margin-bottom: clamp(56px, 3.8vw, 72px);
	}
}

/* Должность прижата к имени (4px) — даём чуть больше воздуха на всех ширинах */
.wg2 .wg2-member figcaption span {
	margin-top: 6px;
}

/* Широкий экран: карточки до 500px, а подпись осталась как для 270px — узкая полоска мелкого текста
   (при 1920 подпись 79px = 16% ширины карточки, в макете 23%). Кегль и поля одни на все ряды,
   чтобы имена в первом и следующих рядах были одного размера; с 1440 до 1920 растут плавно */
@media (min-width: 1440px) {
	.wg2 .wg2-member figcaption {
		padding: clamp(20px, 1.25vw, 24px) 20px clamp(22px, 1.4vw, 26px);
	}

	.wg2 .wg2-member b {
		font-size: clamp(19px, 1.1vw, 21px);
	}

	.wg2 .wg2-member figcaption span {
		margin-top: 7px;
		font-size: clamp(15px, .8vw, 16px);
	}
}

/* 980–1199: колонка 944px, рукописная пометка висит в 10–15px над концом первой строки
   подзаголовка и читается как её продолжение. Места справа от заголовка нет — прячем, как уже на ≤979 */
@media (max-width: 1199px) {
	.wg2 .wg2-team__hand {
		display: none;
	}
}

/* Планшет 768–979: три колонки, десятая карточка оставалась одна у левого края
   с двумя пустыми ячейками справа. Одинокую последнюю ставим в среднюю колонку */
@media (min-width: 768px) and (max-width: 979px) {
	.wg2 .wg2-team__grid .wg2-member:nth-child(3n + 1):last-child {
		grid-column: 2;
	}
}

/* 12. Подарок — правки после корневой починки сбросов */

/* Строки формы.
   padding-bottom: 0 — невидимый хвост под формой. После перевода сбросов на :where(.wg2) правило
   темы «form p { padding-bottom: 28px / 53px (≤1439) / 76px (≤768) }» (вес 0,0,2) стало сильнее
   сброса (0,0,1): под согласием появилась пустота 56–152 px (у формы два <p>: второй, пустой,
   браузер создаёт сам — <div> капчи закрывает первый). Колонка текста была выше, чем видно,
   и из-за центровки сетки уезжала вверх относительно фото. Подсказки ошибок у темы скрыты,
   место под ними не нужно. Если починят общим правилом .wg2-form — эту строку можно убрать.
   row-gap: 18px — поля → кнопка 18 px вместо 14 (в макете около 20); на телефоне подпись
   «Ваш сайт» отходит от поля выше на 18 px и не липнет к нему (до своего поля 8) */
.wg2 .wg2-gift .wg2-form .wpcf7-form > p {
	padding-bottom: 0;
	row-gap: 18px;
}

/* Согласие: 18 + 8 = 26 px от кнопки, как в макете, — выходит из синей тени кнопки */
.wg2 .wg2-gift .wg2-form .filter_checkbox {
	margin-top: 8px;
}

/* Две строки плашки «Получи аудит / В подарок!» слипались (межстрочный 1.15):
   хвосты «у» и «д» почти касались «В». 1.35 — строки разведены, как в макете */
.wg2 .wg2-gift__bubble {
	line-height: 1.35;
}

/* Рукописная пометка: #6f8fc4 при прозрачности .85 давал 2,5:1 на светлом фоне.
   #5a73a8 без прозрачности — 4,3:1, серо-синий, как в макете */
.wg2 .wg2-gift__hand {
	color: #5a73a8;
	opacity: 1;
}

/* Широкий экран: синяя фраза «закрепим всё в договоре» целиком на своей строке, как в макете.
   Только от 1680: уже колонка текста уже фразы и nowrap раздвинул бы сетку */
@media (min-width: 1680px) {
	.wg2 .wg2-gift .wg2-h2 span {
		white-space: nowrap;
	}
}

/* Согласие одной строкой в 784 px мелким кеглем читается тяжело (1680+ и планшет 850–979).
   560 px — перенос сразу после «данных,», как в макете. Уже 768 колонка и так узкая */
@media (min-width: 768px) {
	.wg2 .wg2-gift .filter_checkbox__title {
		max-width: 560px;
	}
}

/* Две колонки (1200+): плашка прижата к левому краю колонки фото — на 1680+ между её углом
   и волосами было 9,5 px, стало 17; до строк заголовка остаётся больше 35 px */
@media (min-width: 1200px) {
	.wg2 .wg2-gift__bubble {
		left: 0;
	}
}

/* 1200–1679: колонка фото уже, чем на 1680+, а плашка того же размера — наезжала на макушку.
   Плашка чуть компактнее: кегль 17 вместо 20, значок 44 вместо 52 */
@media (min-width: 1200px) and (max-width: 1679px) {
	.wg2 .wg2-gift__bubble {
		gap: 12px;
		padding: 12px 20px 12px 12px;
		font-size: 17px;
	}

	.wg2 .wg2-gift__gift {
		width: 44px;
		height: 44px;
		font-size: 24px;
	}
}

/* 1200–1439: голова ещё ближе к плашке — поднимаем плашку на 2% высоты колонки:
   до волос 25 px (на 0 — 18, на -5% плашка отрывается от человека и висит над кольцом) */
@media (min-width: 1200px) and (max-width: 1439px) {
	.wg2 .wg2-gift__bubble {
		top: -2%;
	}
}

/* Планшет (одна колонка): плашка закрывала пол-лица — уводим её левее головы */
@media (min-width: 768px) and (max-width: 979px) {
	.wg2 .wg2-gift__bubble {
		left: -11%;
	}
}

/* Одна колонка: кольцо за фото (108% ширины блока) поднимается над ним и перечёркивало
   строку согласия. Промежуток между формой и фото 88 px вместо 40 — до кольца 44 px */
@media (max-width: 979px) {
	.wg2 .wg2-gift__grid {
		row-gap: 88px;
	}
}

/* Телефон: блок с фото 360 px вместо 520 (фото и так 250 px) — кольцо меньше и уже не
   залезает на согласие: на 480–767 оно заходило на текст до 49 px, теперь до него 23–42 px */
@media (max-width: 767px) {
	.wg2 .wg2-gift__grid {
		row-gap: 48px;
	}

	.wg2 .wg2-gift__person {
		max-width: 360px;
	}
}

/* ---------- 13. Отзывы: доводка после корневой правки сбросов ---------- */

/* подзаголовок: цвет основного текста, как у подзаголовков в seo, benefits, cases, work, gift, faq, final;
   серый --wg2-muted здесь читался бледнее соседних блоков и макета.
   Выделенное «SEO агентство Webgard» — тёмным, иначе жирное сливается с остальным */
.wg2 .wg2-reviews .wg2-lead {
	color: var(--wg2-text);
	/* две строки примерно равной длины вместо длинной первой и короткой второй (814 и 500 px на 1920);
	   старые браузеры свойство просто пропускают */
	text-wrap: balance;
}

.wg2 .wg2-reviews .wg2-lead b,
.wg2 .wg2-reviews .wg2-lead strong {
	color: var(--wg2-ink);
}

/* письма показываем без пустого низа листа A4 (как в макете — почти квадрат):
   видны верхние 84 % листа, у всех четырёх писем подпись и печать выше этой границы с запасом ≥ 11 %.
   Целое письмо открывается по щелчку. Новое письмо с подписью в самом низу листа — проверить глазами */
.wg2 .wg2-rev__doc img {
	aspect-ratio: 210 / 250;
}

/* черта под подписью была цвета #e3ebf7 на почти белом — не видна; берём цвет неактивных точек карусели */
.wg2 .wg2-rev__name::after {
	background: #c9d8ef;
}

/* подпись поворачивается вместе с письмом не рывком, а в такт ему */
.wg2 .wg2-rev__name {
	transition: transform .3s ease, opacity .3s ease;
}

/* компьютер: боковые письма наклонены на ±2°, подписи под ними — встречным поворотом ровно горизонтально, как в макете */
@media (min-width: 980px) {
	.wg2 .wg2-rev .swiper-initialized .swiper-slide-prev .wg2-rev__name {
		transform: rotate(2deg);
	}

	.wg2 .wg2-rev .swiper-initialized .swiper-slide-next .wg2-rev__name {
		transform: rotate(-2deg);
	}
}

/* планшет и телефон: боковые письма срезаны краем карусели, и подписи под ними видны обрывками
   («ДРОАГРЕГАТ»», «ООО «МТК-Ш…») — прячем подписи неактивных писем, у активного подпись на месте */
@media (max-width: 979px) {
	.wg2 .wg2-rev .swiper-initialized .wg2-rev__slide:not(.swiper-slide-active) .wg2-rev__name {
		opacity: 0;
	}
}

/* телефон: размытие тени 44 px шире полей по бокам письма (23 px), и край карусели срезал тень
   прямыми серыми полосами по всей высоте — делаем тень компактнее */
@media (max-width: 767px) {
	.wg2 .wg2-reviews .wg2-rev__doc {
		box-shadow: 0 8px 20px rgba(16, 58, 128, .12);
	}
}

/* ---------- 14. Частые вопросы: правки после замеров на стенде ---------- */

/* Подводка слева: строки выравниваются по длине, чтобы тире не повисало в начале строки
   («— свяжитесь с нами.» при 1920). Браузер без поддержки свойство просто пропустит */
.wg2 .wg2-faq__head .wg2-lead {
	text-wrap: balance;
}

/* Ответ: последняя строка не остаётся из одного слова («сторону» при 375) */
.wg2 .wg2-qa__a p {
	text-wrap: pretty;
}

/* Две колонки (от 980): левая колонка опускается относительно первой карточки,
   как в макете (сдвиг ≈4,3% колонки): 1920 → 67px, 1366 → 48px, 1024 → 36px.
   Заголовок перестаёт быть прижатым к верху, пустота под подводкой уменьшается */
@media (min-width: 980px) {
	.wg2 .wg2-faq__head {
		padding-top: clamp(24px, 3.5vw, 68px);
	}
}

/* Широкий экран: ответ растёт от 16px при 1366 до 18px при 1920, чтобы не выглядеть
   мелкой бледной строкой рядом с вопросом 19px. До 1200 не действует — телефонные 15px целы */
@media (min-width: 1200px) {
	.wg2 .wg2-qa__a p {
		font-size: clamp(16px, calc(11.1px + .36vw), 18px);
	}
}

/* Планшет, одна колонка: подводка не тянется на всю ширину (было 90 знаков в строке при 768) */
@media (max-width: 979px) {
	.wg2 .wg2-faq__head .wg2-lead {
		max-width: 600px;
	}
}

/* ==========================================================================
   15. Финальная форма — воздух и наложения (правка после перевода сбросов на :where)
   ========================================================================== */

/* Тема задаёт «form p { padding-bottom: 28px }» (53 px при ≤1439, 76 px при ≤768), вес (0,0,2).
   Пока сброс был «.wg2 p» (0,1,1), он это гасил; сброс через :where (0,0,1) уже нет —
   и под согласием выросла пустота 92/142/188 px вместо 36 (две <p>: с полями и пустая после капчи). */
.wg2 .wg2-final .wg2-form .wpcf7-form > p {
	padding-bottom: 0;
}

/* «Александр Колодяжный» — в две строки, как в макете: в одну строку «й» упирается в волосы (1366–1600) */
@media (min-width: 980px) {
	.wg2 .wg2-final .wg2-final__who {
		max-width: 170px;
	}
}

/* Текст согласия: на планшете и шире 14 px вместо 13 — мелкий серый под кнопкой читался с трудом;
   в две строки он по-прежнему укладывается. На телефоне 13 px: 14 px дали бы четвёртую строку */
@media (min-width: 768px) {
	.wg2 .wg2-final .wg2-form .filter_checkbox__title {
		font-size: 14px;
	}
}

/* Широкий экран: карточки у фото, строка преимуществ и пометка — крупнее и без наложений */
@media (min-width: 1680px) {







	/* пометка правее края фото, на светлом фоне: у края она лежала на синем капюшоне (синее по синему) */
	.wg2 .wg2-final .wg2-final__hand {
		right: -28px;
		bottom: 20px;
	}
}

/* 980–1679: правее фото для пометки нет светлого места (36–63 px при её ширине 132) —
   она целиком ложилась на капюшон и не читалась. Прячем; на 768–979 она возвращается ниже */
@media (min-width: 980px) and (max-width: 1679px) {
	.wg2 .wg2-final .wg2-final__hand {
		display: none;
	}
}

/* 1200–1679: карточка «Стратегия» лежала на правом ухе (при 1366 наезд 25 px).
   Фото чуть левее (центр на 45% колонки вместо 50%), карточки на 20 px правее — в поле плашки;
   лесенка a–b–c сохраняется, до края плашки не меньше 20 px */
@media (min-width: 1200px) and (max-width: 1679px) {
	.wg2 .wg2-final .wg2-final__img {
		left: 45%;
	}



}

/* 980–1199: колонка фото узкая, карточка «Стратегия» закрывала «Руководитель».
   Блок фото выше — карточка встаёт между подписью и макушкой */
@media (min-width: 980px) and (max-width: 1199px) {
	.wg2 .wg2-final .wg2-final__person {
		min-height: 470px;
	}


}

/* Узкий планшет (одна колонка) */
@media (max-width: 979px) {
	/* фото 460 px в блоке 380 выпирало вверх на 80 px, и волосы ложились на «Индивидуальный подход» */
	.wg2 .wg2-final .wg2-final__person {
		min-height: 480px;
	}

	/* пометка — в светлый угол слева от фото: справа её закрывала карточка «Реальные эксперты» */
	.wg2 .wg2-final .wg2-final__hand {
		left: 0;
		right: auto;
		bottom: 96px;
	}
}

/* Телефон */
@media (max-width: 767px) {
	/* плашка в одну строку: с полями 18 px и разрядкой .12em она ломалась на две */
	.wg2 .wg2-final .wg2-pill {
		padding: 7px 12px;
		letter-spacing: .06em;
	}

	/* блок фото выше: «Руководитель» лежал на макушке (боксы пересекались на 6 px).
	   Заодно перекрывает 480 px из правила ≤979 выше — у него тот же вес. Пометку на телефоне
	   по-прежнему прячет правило ≤767 из основного файла: в правиле ≤979 выше display не задан */
	.wg2 .wg2-final .wg2-final__person {
		min-height: 352px;
	}


}

/* ##########################################################################
   7. Форма «Аудит в WhatsApp или Telegram» — 1 в 1 по макету 06 (просьба владельца, 23.09.2026).
   Размеры сняты с макета в его пикселях и заданы через --u = ширина плашки / 1582
   (1582 px — ширина плашки в макете): от 1200 px композиция масштабируется целиком,
   как картинка, и пропорции не плывут. Кегли — с нижней границей, чтобы на 1200–1439
   текст не стал мельче 13–14 px. Ниже 1200 — прежняя раскладка столбиком.
   ########################################################################## */

.wg2 .wg2-audit__arrow,
.wg2 .wg2-audit__decor {
	display: none;
}

/* подписи полей — обычным начертанием, как в макете (у темы 500) */
.wg2 .wg2-audit .wg2-form .form_label__text {
	font-weight: 400;
}

/* кнопка — ровная синяя, без градиента и тени, как в макете */
.wg2 .wg2-audit .wg2-form .form_btn {
	background: #1564e1;
	box-shadow: none;
}

.wg2 .wg2-audit .wg2-form .form_btn:hover {
	background: #0f57cc;
}

/* «WhatsApp» и «Telegram»: цвета заданы в самом поле (style="…"), в макете они глубже */
.wg2 .wg2-audit .wg2-h2 span[style*="20c627"] {
	color: #0aab43 !important;
}

.wg2 .wg2-audit .wg2-h2 span[style*="1a6ae3"] {
	color: #0a5bd9 !important;
}

@media (min-width: 1200px) {
	/* контейнер секции — точка отсчёта для единиц cqw */
	.wg2 .wg2-audit .container {
		container-type: inline-size;
	}

	.wg2 .wg2-audit__box {
		--u: calc(100cqw / 1582);
		position: relative;
		display: block;
		min-height: calc(337 * var(--u));
		padding: calc(38 * var(--u)) 0 calc(30 * var(--u)) calc(88 * var(--u));
		border-radius: calc(18 * var(--u));
		background: linear-gradient(90deg, #ecf5fe 0%, #eef5fe 55%, #edf4fd 100%);
		overflow: visible; /* голова на фото выходит за верх плашки, как в макете */
	}

	/* круги за фото — в своём слое, обрезаны скруглением плашки */
	.wg2 .wg2-audit__decor {
		display: block;
		position: absolute;
		inset: 0;
		overflow: hidden;
		border-radius: inherit;
		pointer-events: none;
	}

	.wg2 .wg2-audit__circle {
		position: absolute;
		border-radius: 50%;
	}

	.wg2 .wg2-audit__circle--a {
		left: calc(1085 * var(--u));
		top: calc(85 * var(--u));
		width: calc(320 * var(--u));
		height: calc(320 * var(--u));
		background: #e1edfe;
	}

	.wg2 .wg2-audit__circle--b {
		left: calc(1400 * var(--u));
		top: calc(205 * var(--u));
		width: calc(190 * var(--u));
		height: calc(190 * var(--u));
		background: #e6f1fe;
	}

	/* левая часть: надпись, заголовок, форма — шириной 1008 px макета (поля + кнопка) */
	.wg2 .wg2-audit .wg2-audit__text {
		position: relative;
		z-index: 1;
		width: calc(1008 * var(--u));
		padding: 0;
	}

	.wg2 .wg2-audit .wg2-over {
		margin-bottom: calc(14 * var(--u));
		font-size: max(11px, calc(12.5 * var(--u)));
	}

	.wg2 .wg2-audit .wg2-audit__text .wg2-h2 {
		max-width: 13.2em; /* строки ломаются как в макете: «…и расчёт / стоимости продвижения / в WhatsApp…» */
		color: #04194d;
		font-size: max(26px, calc(36 * var(--u)));
		line-height: 1.08;
		letter-spacing: -.01em;
	}

	.wg2 .wg2-audit .wg2-form {
		margin-top: calc(22 * var(--u));
	}

	/* поля 366 и 351 px, кнопка 263 px, промежутки 14 px — как в макете */
	.wg2 .wg2-audit .wg2-form .wpcf7-form > p {
		grid-template-columns: minmax(0, 366fr) minmax(0, 351fr) minmax(0, 263fr);
		column-gap: calc(14 * var(--u));
		row-gap: calc(11 * var(--u));
		padding: 0;
	}

	.wg2 .wg2-audit .wg2-form .form_label__text {
		margin-bottom: calc(6 * var(--u));
		color: #414a58;
		font-size: max(13px, calc(15.5 * var(--u)));
		line-height: 1.2;
	}

	.wg2 .wg2-audit .wg2-form .form_label input {
		height: max(46px, calc(52 * var(--u)));
		padding-left: calc(50 * var(--u));
		border-color: #e2e7ee;
		border-radius: calc(8 * var(--u));
		background-color: #fbfcfe;
		background-position: calc(17 * var(--u)) 50%;
		background-size: calc(22 * var(--u)) calc(22 * var(--u));
		box-shadow: none;
		font-size: max(14px, calc(16 * var(--u)));
	}

	.wg2 .wg2-audit .wg2-form .form_label input::placeholder {
		color: #7f8082;
	}

	.wg2 .wg2-audit .wg2-form .form_btn {
		grid-column: auto;
		width: 100%;
		height: max(46px, calc(52 * var(--u)));
		padding: 0 calc(20 * var(--u));
		border-radius: calc(7 * var(--u));
		font-size: max(15px, calc(17.5 * var(--u)));
		font-weight: 600;
	}

	.wg2 .wg2-audit .wg2-form .filter_checkbox {
		align-items: center;
		margin-top: 0;
	}

	.wg2 .wg2-audit .wg2-form .filter_checkbox__fake {
		min-width: max(16px, calc(18 * var(--u)));
		height: max(16px, calc(18 * var(--u)));
		margin-right: calc(12 * var(--u));
		border-radius: 4px;
		background: #1366e4;
	}

	.wg2 .wg2-audit .wg2-form .filter_checkbox__title {
		max-width: none;
		white-space: nowrap; /* одна строка, как в макете: на 1200–1439 иначе переносится и плашка растёт */
		color: #525d72;
		font-size: max(12.5px, calc(13.5 * var(--u)));
		line-height: 1.3;
	}

	.wg2 .wg2-audit .wg2-form .filter_checkbox__title a {
		color: #2d6fdd;
	}

	/* правая часть: фото, облачко, подпись и стрелки — по координатам макета */
	.wg2 .wg2-audit .wg2-audit__person {
		position: absolute;
		inset: 0;
		/* базовое правило ставит align-self: end — у абсолютного блока это сжимает его в полоску
		   нулевой высоты у низа плашки; растягиваем обратно на всю плашку */
		align-self: stretch;
		justify-self: stretch;
		min-height: 0;
		z-index: 1;
		pointer-events: none;
	}

	.wg2 .wg2-audit .wg2-audit__person::before {
		display: none;
	}

	/* фото: голова на 6 px выше плашки, низ обрезан по низу плашки */
	.wg2 .wg2-audit .wg2-audit__photo {
		position: absolute;
		left: calc(1126 * var(--u));
		bottom: 0;
		height: calc(348 * var(--u)); /* 337 плашки + 11 над ней; привязано к низу — если плашка
		                                  станет выше, фото не отрывается от нижнего края */
		width: calc(330 * var(--u));
		overflow: hidden;
		border-bottom-right-radius: calc(18 * var(--u));
	}

	.wg2 .wg2-audit .wg2-audit__img {
		display: block;
		width: 100%;
		max-width: none;
		margin: 0;
	}

	.wg2 .wg2-audit .wg2-audit__bubble {
		display: block;
		left: calc(877 * var(--u));
		top: calc(64 * var(--u));
		width: calc(250 * var(--u));
		padding: calc(18 * var(--u)) calc(22 * var(--u));
		border-radius: calc(20 * var(--u));
		background: #dbeafe;
		box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(16, 58, 128, .08);
		color: #134bc0;
		font-size: max(12.5px, calc(15.5 * var(--u)));
		line-height: 1.4;
		font-weight: 400;
		text-align: center;
		white-space: nowrap;
		transform: rotate(-6deg);
	}

	.wg2 .wg2-audit__arrow {
		display: block;
		position: absolute;
	}

	.wg2 .wg2-audit__arrow--bubble {
		left: calc(1037 * var(--u));
		top: calc(148 * var(--u));
		width: calc(30 * var(--u));
		height: calc(56 * var(--u));
		color: #195fdb;
	}

	.wg2 .wg2-audit .wg2-audit__who {
		top: calc(52 * var(--u));
		left: calc(1427 * var(--u));
		right: auto;
		width: calc(130 * var(--u));
		max-width: none;
		color: #454e62;
		font-size: max(12.5px, calc(15.5 * var(--u)));
		line-height: 1.35;
		font-weight: 400;
	}

	.wg2 .wg2-audit .wg2-audit__who span {
		display: block;
	}

	.wg2 .wg2-audit__arrow--who {
		left: calc(1427 * var(--u));
		top: calc(149 * var(--u));
		width: calc(52 * var(--u));
		height: calc(30 * var(--u));
		color: #1f293b;
	}
}

/* ##########################################################################
   6. «Что даёт SEO» — новый блок по макету 16 (второй вариант ChatGPT, 23.09.2026).
   Как и форма аудита: от 1200 px размеры — в пикселях макета через --u = ширина колонки / 1549
   (1549 px — ширина ряда белых карточек в макете), блок масштабируется целиком.
   Ниже 1200 — та же разметка столбиком.
   ########################################################################## */

.wg2-bn {
	position: relative;
	padding: 56px 0 64px;
	background: radial-gradient(45% 60% at 88% 8%, #f9fcff 0%, rgba(249, 252, 255, 0) 70%),
		radial-gradient(30% 40% at 0% 45%, #cfe6fe 0%, rgba(207, 230, 254, 0) 70%),
		linear-gradient(180deg, #f0f7fe 0%, #e8f2fe 55%, #eaf5fe 100%);
}

.wg2-bn .wg2-h2 {
	color: #031236;
}

.wg2-bn .wg2-h2 span {
	color: #0b63ec;
}

.wg2-bn__lead {
	color: #23376e;
	font-size: 18px;
	line-height: 1.45;
}

.wg2 .wg2-bn__btn {
	background: linear-gradient(180deg, #0a6dff 0%, #005af5 100%);
	box-shadow: 0 14px 30px rgba(0, 90, 245, .28);
	font-weight: 600;
}

/* тёмная панель с графиком */
.wg2-bn__panel {
	position: relative;
	overflow: hidden;
	border-radius: 28px;
	background: radial-gradient(55% 70% at 45% 100%, #0a5fd6 0%, rgba(10, 95, 214, 0) 70%),
		radial-gradient(35% 55% at 100% 0%, #0a4fb8 0%, rgba(10, 79, 184, 0) 70%),
		radial-gradient(35% 55% at 0% 0%, #0a4a9e 0%, rgba(10, 74, 158, 0) 70%),
		linear-gradient(180deg, #06377f 0%, #042a66 100%);
	box-shadow: 0 30px 60px rgba(6, 40, 110, .22);
	color: #fff;
}

.wg2-bn__wave {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.wg2-bn__over {
	display: flex;
	align-items: center;
	gap: 18px;
	color: #4a93ff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
}

.wg2-bn__over::after {
	content: "";
	width: 56px;
	height: 1.5px;
	background: #3d86ff;
}

.wg2-bn__plot {
	position: relative;
}

.wg2-bn__chart {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.wg2-bn__grid path {
	stroke: #8fb6ff;
	stroke-opacity: .18;
	stroke-width: 1;
}

.wg2-bn__gdots circle {
	fill: #9cc3ff;
	fill-opacity: .55;
}

.wg2-bn__dot {
	fill: #fff;
}

.wg2-bn__dot-glow {
	fill: #4aa8ff;
	fill-opacity: .45;
}

/* подписи на графике: «Яндекс», «Google», «ТОП-10» */
.wg2-bn__pill {
	position: absolute;
	left: var(--x);
	top: var(--y);
	display: inline-flex;
	align-items: center;
	gap: .47em;
	height: 2.53em;
	padding: 0 .95em 0 .85em;
	border: 1px solid rgba(110, 150, 225, .42);
	border-radius: .85em;
	background: rgba(22, 48, 98, .82);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	white-space: nowrap;
}

.wg2-bn__pill .wg2-i {
	font-size: 1.05em;
	stroke-width: 2.4;
}

/* хвостик подписи вниз, к точке графика */
.wg2-bn__pill::after {
	content: "";
	position: absolute;
	left: 1.5em;
	bottom: -.32em;
	width: .6em;
	height: .6em;
	transform: rotate(45deg);
	border-right: 1px solid rgba(110, 150, 225, .42);
	border-bottom: 1px solid rgba(110, 150, 225, .42);
	background: inherit;
}

.wg2-bn__pill--accent {
	height: 2.32em;
	border-color: transparent;
	background: #0676ff;
	box-shadow: 0 8px 22px rgba(6, 118, 255, .35);
}

.wg2-bn__pill--accent::after {
	left: calc(50% - .3em);
	border-color: transparent;
}

.wg2-bn__more {
	position: absolute;
	left: 84.5%;
	top: 73.4%;
	display: flex;
	align-items: center;
	gap: 1em;
	padding: .85em 1em .85em 1.2em;
	border: 1px solid rgba(90, 140, 230, .45);
	border-radius: .9em;
	background: rgba(2, 26, 66, .86);
	color: #e7eefc;
	font-size: 15px;
	line-height: 1.25;
	transform: translate(-50%, -50%) rotate(-10deg);
	white-space: nowrap;
}

.wg2-bn__more .wg2-i {
	width: 2.3em;
	height: 2.3em;
	color: #3b9bff;
	stroke-width: 2;
}

/* карточки с цифрами на панели */
.wg2-bn__stat {
	position: relative;
	padding: 18px 24px 22px;
	border: 1px solid rgba(120, 160, 235, .26);
	border-radius: 20px;
	background: linear-gradient(160deg, rgba(22, 58, 125, .55) 0%, rgba(3, 25, 70, .4) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.wg2-bn__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #f5f9ff 0%, #d9e8fd 100%);
	color: #1463e6;
	font-size: 30px;
}

.wg2-bn__ico .wg2-i {
	stroke-width: 2.1;
}

.wg2-bn__ico--dark {
	border: 1px solid rgba(110, 160, 240, .45);
	background: radial-gradient(circle at 35% 30%, #22509a 0%, #0f3272 100%);
	color: #5fb0ff;
}

.wg2-bn__ico--dark .wg2-i {
	stroke-width: 1.8;
}

.wg2-bn__stat-title {
	margin-top: 18px;
	color: #fff;
	font-size: 22px;
	line-height: 1.22;
	font-weight: 800;
	letter-spacing: -.01em;
}

.wg2-bn__stat-title .wg2-num {
	color: #2f8cff;
	font-size: 1.6em;
	letter-spacing: -.03em;
	line-height: .9;
	font-weight: 800;
}

.wg2-bn__stat-text {
	margin-top: 12px;
	color: #c8d5ee;
	font-size: 15px;
	line-height: 1.4;
}

/* белые карточки внизу */
.wg2-bn__cards {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

.wg2-bn__card {
	padding: 24px 26px 26px;
	border: 1px solid #e3ecfa;
	border-radius: 20px;
	background: linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%);
	box-shadow: 0 18px 40px rgba(16, 58, 128, .1);
}

.wg2-bn__card-head {
	display: flex;
	align-items: center;
	gap: 18px;
}

.wg2-bn__card-title {
	color: #0a1633;
	font-size: 18px;
	line-height: 1.3;
	font-weight: 800;
}

.wg2-bn__card-text {
	margin-top: 18px;
	color: #5b6478;
	font-size: 15px;
	line-height: 1.5;
}

/* ---------- от 1200: композиция макета, размеры в его пикселях ---------- */
@media (min-width: 1200px) {
	.wg2 .wg2-bn {
		padding: 0;
	}

	.wg2-bn .container {
		container-type: inline-size;
	}

	.wg2-bn .container > * {
		--u: calc(100cqw / 1549);
	}

	.wg2 .wg2-bn__head {
		display: grid;
		grid-template-columns: minmax(0, 1fr) calc(528 * var(--u));
		height: calc(278 * var(--u));
		padding: calc(54 * var(--u)) 0 0 calc(13 * var(--u));
	}

	.wg2 .wg2-bn .wg2-over {
		margin-bottom: 0;
		font-size: max(11px, calc(13 * var(--u)));
		gap: calc(18 * var(--u));
	}

	.wg2 .wg2-bn .wg2-over::after {
		width: calc(62 * var(--u));
	}

	.wg2 .wg2-bn .wg2-h2 {
		margin-top: calc(10 * var(--u));
		font-size: calc(84 * var(--u));
		line-height: .98;
		letter-spacing: -.02em;
	}

	.wg2 .wg2-bn__aside {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: calc(176 * var(--u));
		margin-top: calc(18 * var(--u));
		padding-left: calc(49 * var(--u));
		border-left: 1.5px solid #bfdefd;
	}

	.wg2 .wg2-bn__lead {
		max-width: calc(455 * var(--u)); /* переносы как в макете: «…рост через / поисковые системы» */
		margin-top: calc(-4 * var(--u));
		font-size: max(15px, calc(22 * var(--u)));
		line-height: calc(32 * var(--u));
	}

	.wg2 .wg2-bn__btn {
		width: 100%;
		height: calc(70 * var(--u));
		min-height: 0;
		gap: calc(28 * var(--u));
		border-radius: calc(12 * var(--u));
		font-size: max(15px, calc(22 * var(--u)));
	}

	.wg2 .wg2-bn__btn .wg2-i {
		font-size: calc(26 * var(--u));
	}

	/* панель выходит за колонку: 30 px макета слева и 28 справа, но не дальше полей экрана */
	.wg2 .wg2-bn__panel {
		height: calc(457 * var(--u));
		margin-left: calc(-1 * min(30 * var(--u), (100vw - 100cqw) / 2 - 8px));
		margin-right: calc(-1 * min(28 * var(--u), (100vw - 100cqw) / 2 - 8px));
		border-radius: calc(40 * var(--u));
	}

	.wg2 .wg2-bn__over {
		position: absolute;
		left: calc(53 * var(--u));
		top: calc(34 * var(--u));
		font-size: max(10.5px, calc(13 * var(--u)));
		gap: calc(18 * var(--u));
	}

	.wg2 .wg2-bn__over::after {
		width: calc(57 * var(--u));
	}

	.wg2 .wg2-bn__plot {
		position: absolute;
		left: calc(380 * var(--u));
		top: calc(30 * var(--u));
		width: calc(870 * var(--u));
		height: calc(342 * var(--u));
	}

	.wg2 .wg2-bn__pill {
		font-size: calc(19 * var(--u));
	}

	.wg2 .wg2-bn__more {
		font-size: calc(18 * var(--u));
	}

	.wg2 .wg2-bn__stat {
		position: absolute;
		top: calc(65 * var(--u));
		width: calc(338 * var(--u));
		height: calc(302 * var(--u));
		padding: calc(18 * var(--u)) calc(16 * var(--u)) 0 calc(31 * var(--u));
		border-radius: calc(24 * var(--u));
	}

	.wg2 .wg2-bn__stat--l {
		left: calc(39 * var(--u));
	}

	.wg2 .wg2-bn__stat--r {
		left: calc(1235 * var(--u));
		padding-left: calc(28 * var(--u));
		padding-right: calc(10 * var(--u));
	}

	/* правая карточка: «Чем выше будут позиции / сайта, тем дешевле / и больше посетителей / вы получите.» */
	.wg2 .wg2-bn__stat--r .wg2-bn__stat-text {
		max-width: calc(238 * var(--u));
		text-wrap: pretty; /* без одного слова в последней строке: «…посетителей / вы получите.» */
	}

	.wg2 .wg2-bn__stat .wg2-bn__ico {
		width: calc(74 * var(--u));
		height: calc(74 * var(--u));
		font-size: calc(34 * var(--u));
	}

	.wg2 .wg2-bn__stat-title {
		margin-top: calc(14 * var(--u));
		font-size: max(18px, calc(26 * var(--u)));
		letter-spacing: -.015em;
	}

	/* строки текста — как в макете: «При среднем рекламном / бюджете 40 000 руб. / …» */
	.wg2 .wg2-bn__stat-text {
		max-width: calc(252 * var(--u));
		margin-top: calc(14 * var(--u));
		font-size: max(13.5px, calc(19 * var(--u)));
		line-height: 1.37;
	}

	.wg2 .wg2-bn__cards {
		gap: calc(13 * var(--u));
		margin-top: calc(-85 * var(--u));
		padding-bottom: calc(53 * var(--u));
	}

	.wg2 .wg2-bn__card {
		height: calc(238 * var(--u));
		padding: calc(26 * var(--u)) calc(14 * var(--u)) 0 calc(30 * var(--u));
		border-radius: calc(22 * var(--u));
	}

	.wg2 .wg2-bn__card-head {
		gap: calc(19 * var(--u));
	}

	.wg2 .wg2-bn__card .wg2-bn__ico {
		width: calc(72 * var(--u));
		height: calc(72 * var(--u));
		font-size: calc(38 * var(--u));
	}

	.wg2 .wg2-bn__card-title {
		font-size: max(15px, calc(20.7 * var(--u)));
	}

	/* ширина строки как в макете: «Соответственно, стабильные / заявки и заказы. Большинство / …» */
	.wg2 .wg2-bn__card-text {
		max-width: calc(320 * var(--u));
		margin-top: calc(20 * var(--u));
		font-size: max(13.5px, calc(19.5 * var(--u)));
		line-height: 1.385;
	}

	/* во второй карточке строка «по целевым запросам, увеличивая» в макете шире остальных */
	.wg2 .wg2-bn__card:nth-child(2) .wg2-bn__card-text {
		max-width: none;
	}
}

/* ---------- уже 1200: столбиком ---------- */
@media (max-width: 1199px) {
	/* световая волна — только у низа панели: растянутая на всю высоту столбца, она рисовала дугу поверх графика */
	.wg2-bn__wave {
		top: auto;
		height: 220px;
	}

	.wg2-bn__head {
		margin-bottom: 28px;
	}

	.wg2-bn .wg2-h2 {
		font-size: clamp(34px, 7vw, 60px);
		line-height: 1;
	}

	.wg2-bn__aside {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 16px 28px;
		margin-top: 18px;
	}

	.wg2-bn__lead {
		max-width: 520px;
	}

	.wg2-bn__panel {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16px;
		padding: 24px 22px 110px;
	}

	.wg2-bn__over {
		position: relative;
		grid-column: 1 / -1;
	}

	.wg2-bn__plot {
		grid-column: 1 / -1;
		order: 2;
		aspect-ratio: 870 / 342;
		margin-top: 8px;
	}

	.wg2-bn__stat {
		order: 1;
	}

	.wg2-bn__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-top: -86px;
	}
}

@media (max-width: 767px) {
	.wg2-bn {
		padding: 40px 0 48px;
	}

	.wg2-bn__aside .wg2-btn {
		width: 100%;
	}

	.wg2-bn__panel {
		grid-template-columns: minmax(0, 1fr);
		padding: 20px 16px 96px;
		border-radius: 22px;
	}

	.wg2-bn__pill {
		font-size: 11px;
	}

	/* на телефоне график мелкий: табличку «Больше клиентов» убираем, чтобы не закрывала линию */
	.wg2-bn__more {
		display: none;
	}

	.wg2-bn__cards {
		grid-template-columns: minmax(0, 1fr);
		margin-top: -72px;
		gap: 12px;
	}

	.wg2-bn__card {
		padding: 20px 20px 22px;
	}

	.wg2-bn__ico {
		width: 56px;
		height: 56px;
		font-size: 26px;
	}
}


/* ==========================================================================
   2. Кому требуются наши услуги — три этапа на линии роста (макет design/who/reference.png, 1782×883).
   Вёрстку по макету сделала соседняя сессия (blocks/business-stages/, коммит 490fe4d); здесь она
   переведена на шрифт сайта и поля ACF (решение владельца 23.09.2026).
   До 1200 px — карточки столбиком. От 1200 — композиция макета: размеры в его пикселях (--u),
   карточки макета (x 72…1714) ровно по колонке сайта, как у соседних блоков.
   ========================================================================== */

.wg2 .wg2-who {
	overflow: hidden; /* холст макета шире колонки на поля макета — за край экрана не выходит */
	background:
		radial-gradient(34% 30% at 20% 27%, rgba(218, 234, 253, .2), transparent 72%),
		radial-gradient(16% 26% at 0% 60%, rgba(226, 238, 253, .35), transparent 70%),
		radial-gradient(28% 60% at 100% 50%, rgba(222, 236, 253, .4), transparent 70%),
		radial-gradient(70% 45% at 50% 40%, rgba(236, 244, 254, .6), transparent 75%),
		#fdfdfe;
}

.wg2 .wg2-who__head {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}

.wg2 .wg2-who__head .wg2-lead {
	color: #474e6f;
}

.wg2 .wg2-who__journey {
	display: none;
}

.wg2 .wg2-who__cards {
	display: grid;
	gap: 18px;
	max-width: 760px;
	margin: 32px auto 0;
}

.wg2 .wg2-who-card {
	position: relative;
	padding: 26px 24px 28px;
}

/* фон карточки — отдельный слой: на широком экране он наклонён, текст остаётся ровным */
.wg2 .wg2-who-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: 24px;
	background: linear-gradient(180deg, #fff 0%, #fdfeff 100%);
	border: 1.5px solid rgba(206, 224, 247, .9);
	box-shadow: 0 22px 50px rgba(38, 98, 178, .10), 0 4px 10px rgba(38, 98, 178, .05), inset 0 1px 0 #fff;
}

/* третья — «стеклянная», с голубым свечением: итоговый этап выделен */
.wg2 .wg2-who-card--3::before {
	background: linear-gradient(180deg, #ebf3fe 0%, #edf4fe 15%, #f4f8fe 28%, #f9fbfe 42%, #f8fafe 65%, #f1f6fe 82%, #e8f1fe 100%);
	border: 1px solid rgba(214, 231, 253, .8);
	box-shadow: 0 0 40px 8px rgba(40, 122, 245, .16), 0 28px 64px rgba(26, 104, 214, .14), inset 0 10px 6px 4px rgba(255, 255, 255, .95);
}

.wg2 .wg2-who-card > * {
	position: relative;
	z-index: 1;
}

/* в столбике этапы связаны короткой вертикалью */
.wg2 .wg2-who-card + .wg2-who-card::after {
	content: "";
	position: absolute;
	left: 36px;
	top: -19px;
	width: 2px;
	height: 20px;
	background: #9dc1fb;
}

/* номер этапа — крупная цифра, светлая сверху и тающая книзу */
.wg2 .wg2-who-card__num {
	display: inline-block;
	margin: 0 0 -6px -4px;
	font-size: 76px;
	line-height: 1;
	font-weight: 800;
	background-image: linear-gradient(180deg, var(--n1, #c0d8fd) 14%, var(--n2, #d6e6fe) 50%, rgba(250, 252, 255, .4) 90%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.wg2 .wg2-who-card--2 .wg2-who-card__num {
	--n1: #bbd4fd;
	--n2: #d3e4fe;
}

.wg2 .wg2-who-card--3 .wg2-who-card__num {
	--n1: #afcdfc;
	--n2: #cddffd;
}

.wg2 .wg2-who-card__icon {
	position: absolute;
	top: 22px;
	right: 22px;
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border-radius: 18px;
	background: linear-gradient(140deg, #e9f2fe 0%, #f8fbff 45%, #fff 100%);
	border: 1.5px solid rgba(255, 255, 255, .95);
	box-shadow: 0 12px 26px rgba(33, 99, 190, .12), 0 2px 4px rgba(33, 99, 190, .05);
}

.wg2 .wg2-who-card__icon svg {
	width: 46px;
	height: 46px;
	fill: none;
	stroke: var(--ig, var(--wg2-blue));
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.wg2 .wg2-who-card__icon .wg2-who-thin {
	stroke-width: 1.9;
	opacity: .9;
}

.wg2 .wg2-who-card__icon .wg2-who-mid {
	stroke-width: 2.3;
}

.wg2 .wg2-who-card__icon .wg2-who-fill {
	fill: var(--ig, var(--wg2-blue));
}

.wg2 .wg2-who-card h3 {
	margin: 6px 0 14px;
	color: var(--wg2-ink);
	font-size: 21px;
	line-height: 1.3;
	font-weight: 800;
	letter-spacing: -.02em;
	text-wrap: balance;
}

.wg2 .wg2-who-card h3 br {
	display: none;
}

.wg2 .wg2-who-card ul {
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
	color: #2f3857;
}

.wg2 .wg2-who-card li {
	position: relative;
	padding-left: 24px;
	text-wrap: balance;
}

.wg2 .wg2-who-card li + li {
	margin-top: 10px;
}

.wg2 .wg2-who-card li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #1a70f3;
}

@media (max-width: 480px) {
	.wg2 .wg2-who-card {
		padding: 22px 18px 24px;
	}

	.wg2 .wg2-who-card__num {
		font-size: 64px;
	}

	.wg2 .wg2-who-card__icon {
		top: 18px;
		right: 18px;
		width: 62px;
		height: 62px;
	}

	.wg2 .wg2-who-card__icon svg {
		width: 40px;
		height: 40px;
	}

	.wg2 .wg2-who-card h3 {
		font-size: 19px;
	}

	.wg2 .wg2-who-card ul {
		font-size: 15px;
		line-height: 22px;
	}

	.wg2 .wg2-who-card li::before {
		top: 7px;
	}
}

/* ---------- от 1200: композиция макета ---------- */
@media (min-width: 1200px) {
	/* сверху — воздух после карточек первого экрана: холст макета обрезан вплотную к заголовку */
	.wg2 .wg2-who {
		padding: clamp(24px, 2vw, 40px) 0 0;
	}

	.wg2-who .container {
		container-type: inline-size;
	}

	.wg2 .wg2-who__canvas {
		--u: calc(100cqw / 1642);
		position: relative;
		width: calc(1782 * var(--u));
		height: calc(883 * var(--u));
		margin-left: calc(-72 * var(--u));
	}

	.wg2 .wg2-who__head {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		max-width: none;
	}

	.wg2 .wg2-who__head .wg2-h2 {
		padding-top: calc(35 * var(--u));
		font-size: calc(var(--h2, 58) * var(--u));
		line-height: 1.2;
		letter-spacing: -.025em;
	}

	.wg2 .wg2-who__head .wg2-lead {
		margin-top: calc(13 * var(--u));
		font-size: calc(var(--lead, 20.75) * var(--u));
		line-height: 1.3;
		text-wrap: nowrap;
	}

	/* линия роста, точки и подписи */
	.wg2 .wg2-who__journey {
		display: block;
		position: absolute;
		inset: 0;
		pointer-events: none;
	}

	.wg2 .wg2-who__line {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		overflow: visible;
	}

	.wg2 .wg2-who__line path {
		fill: none;
		stroke: url(#wg2-who-line-grad);
		stroke-width: 3;
		stroke-linecap: round;
		stroke-linejoin: round;
		filter: drop-shadow(0 3px 6px rgba(29, 115, 242, .18));
	}

	.wg2 .wg2-who__dot {
		position: absolute;
		width: calc(15 * var(--u));
		height: calc(15 * var(--u));
		margin: calc(-7.5 * var(--u)) 0 0 calc(-7.5 * var(--u));
		border-radius: 50%;
		background: #0e6ef7;
		box-shadow: 0 0 0 calc(5 * var(--u)) #fff, 0 calc(3 * var(--u)) calc(12 * var(--u)) calc(9 * var(--u)) rgba(22, 108, 245, .5);
	}

	.wg2 .wg2-who__dot--1 {
		left: calc(336 * var(--u));
		top: calc(389.5 * var(--u));
		box-shadow: 0 0 0 calc(5 * var(--u)) #fff, 0 calc(3 * var(--u)) calc(10 * var(--u)) calc(6 * var(--u)) rgba(26, 112, 243, .22);
	}

	.wg2 .wg2-who__dot--2 {
		left: calc(883.5 * var(--u));
		top: calc(310.5 * var(--u));
	}

	.wg2 .wg2-who__dot--3 {
		left: calc(1516.5 * var(--u));
		top: calc(191.5 * var(--u));
	}

	.wg2 .wg2-who__label {
		position: absolute;
		width: calc(240 * var(--u));
		margin-left: calc(-120 * var(--u));
		text-align: center;
		font-size: calc(var(--lab, 18.45) * var(--u));
		line-height: calc(24 * var(--u));
		font-weight: 700;
		color: #5a72ab;
	}

	/* вторая строка подписи на макете тоньше первой */
	.wg2 .wg2-who__label-sub {
		font-weight: 500;
	}

	.wg2 .wg2-who__label--2 .wg2-who__label-sub {
		font-size: calc(18.35 * var(--u));
	}

	.wg2 .wg2-who__label--1 {
		left: calc(339 * var(--u));
		top: calc(312 * var(--u));
	}

	.wg2 .wg2-who__label--2 {
		left: calc(884 * var(--u));
		top: calc(234 * var(--u));
	}

	.wg2 .wg2-who__label--3 {
		left: calc(1627 * var(--u));
		top: calc(158 * var(--u));
		color: #5773b7;
	}

	.wg2 .wg2-who__label--3 .wg2-who__label-sub {
		font-size: calc(18.9 * var(--u));
		color: #5377c4;
	}

	/* карточки */
	.wg2 .wg2-who__cards {
		display: block;
		max-width: none;
		margin: 0;
	}

	.wg2 .wg2-who-card {
		--pad: 47;
		position: absolute;
		padding: 0;
	}

	.wg2 .wg2-who-card + .wg2-who-card::after {
		content: none;
	}

	.wg2 .wg2-who-card > * {
		position: absolute;
	}

	/* наклон фона: верхний край карточек поднимается вправо, у третьей круче. Числа подобраны
	   соседней сессией по углам карточек на макете */
	.wg2 .wg2-who-card::before {
		inset: auto;
		left: 0;
		border-radius: calc(30 * var(--u));
		border-width: calc(1.5 * var(--u));
		box-shadow:
			0 calc(22 * var(--u)) calc(50 * var(--u)) rgba(38, 98, 178, .10),
			0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(38, 98, 178, .05),
			inset 0 calc(1 * var(--u)) 0 #fff;
	}

	.wg2 .wg2-who-card--1 {
		left: calc(72 * var(--u));
		top: calc(398 * var(--u));
		width: calc(525 * var(--u));
		height: calc(419 * var(--u));
	}

	.wg2 .wg2-who-card--1::before {
		top: calc(40 * var(--u));
		width: calc(484.4 * var(--u));
		height: calc(379 * var(--u));
		transform-origin: 0 calc(379 * var(--u));
		transform: perspective(calc(1000 * var(--u))) rotateY(-11.36deg);
	}

	.wg2 .wg2-who-card--2 {
		left: calc(622 * var(--u));
		top: calc(318.7 * var(--u));
		width: calc(525 * var(--u));
		height: calc(492.8 * var(--u));
	}

	.wg2 .wg2-who-card--2::before {
		top: calc(48.8 * var(--u));
		width: calc(497.6 * var(--u));
		height: calc(444 * var(--u));
		transform-origin: 0 calc(778.5 * var(--u));
		transform: perspective(calc(1000 * var(--u))) rotateY(-6.8deg);
		border-radius: calc(32 * var(--u)) calc(44 * var(--u)) calc(32 * var(--u)) calc(46 * var(--u));
	}

	.wg2 .wg2-who-card--3 {
		left: calc(1172 * var(--u));
		top: calc(229.3 * var(--u));
		width: calc(542 * var(--u));
		height: calc(561.2 * var(--u));
	}

	.wg2 .wg2-who-card--3::before {
		top: calc(58.8 * var(--u));
		width: calc(520.1 * var(--u));
		height: calc(502.4 * var(--u));
		transform-origin: 0 calc(1282.9 * var(--u));
		transform: perspective(calc(1000 * var(--u))) rotateY(-4.83deg);
		border-radius: calc(36 * var(--u)) calc(52 * var(--u)) calc(44 * var(--u)) calc(50 * var(--u));
		border-width: calc(1 * var(--u));
		box-shadow:
			0 0 calc(40 * var(--u)) calc(8 * var(--u)) rgba(40, 122, 245, .16),
			0 calc(28 * var(--u)) calc(64 * var(--u)) rgba(26, 104, 214, .14),
			inset 0 calc(10 * var(--u)) calc(6 * var(--u)) calc(4 * var(--u)) rgba(255, 255, 255, .95);
	}

	.wg2 .wg2-who-card__num {
		left: calc((var(--pad) + var(--nx, 0)) * var(--u) - .06em);
		margin: 0;
		font-size: calc(var(--num) * var(--u));
		letter-spacing: var(--ls, 0);
		transform: scaleX(var(--sx, 1));
		transform-origin: 0 0;
	}

	.wg2 .wg2-who-card--1 .wg2-who-card__num {
		--num: 109;
		--nx: 3;
		--ls: .06em;
		top: calc(55 * var(--u));
	}

	.wg2 .wg2-who-card--2 .wg2-who-card__num {
		--num: 121.6;
		--nx: 8;
		--sx: .98;
		top: calc(62 * var(--u));
	}

	.wg2 .wg2-who-card--3 .wg2-who-card__num {
		--num: 135;
		--nx: 8;
		--sx: .966;
		top: calc(73 * var(--u));
	}

	.wg2 .wg2-who-card__icon {
		right: calc(43 * var(--u));
		width: calc(var(--tile) * var(--u));
		height: calc(var(--tile) * var(--u));
		border-radius: calc(22 * var(--u));
		border-width: calc(1.5 * var(--u));
		box-shadow: 0 calc(12 * var(--u)) calc(26 * var(--u)) rgba(33, 99, 190, .12), 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(33, 99, 190, .05);
	}

	.wg2 .wg2-who-card__icon svg {
		width: calc(var(--ico) * var(--u));
		height: calc(var(--ico) * var(--u));
	}

	.wg2 .wg2-who-card--1 .wg2-who-card__icon {
		--tile: 100;
		--ico: 82;
		top: calc(30 * var(--u));
	}

	.wg2 .wg2-who-card--2 .wg2-who-card__icon {
		--tile: 103;
		--ico: 84;
		top: calc(42.3 * var(--u));
		right: calc(41 * var(--u));
	}

	.wg2 .wg2-who-card--3 .wg2-who-card__icon {
		--tile: 115;
		--ico: 86;
		top: calc(61.7 * var(--u));
		right: calc(46 * var(--u));
		border-radius: calc(24 * var(--u));
	}

	/* заголовок и список — в потоке: если в админке заголовок станет длиннее,
	   список сдвинется вниз, а не наедет на него */
	.wg2 .wg2-who-card__body {
		left: calc(var(--pad) * var(--u));
		right: calc(10 * var(--u));
		top: calc(var(--top) * var(--u));
	}

	.wg2 .wg2-who-card--1 .wg2-who-card__body {
		--top: 157;
	}

	.wg2 .wg2-who-card--2 .wg2-who-card__body {
		--top: 172.3;
	}

	.wg2 .wg2-who-card--3 .wg2-who-card__body {
		--top: 200.7;
	}

	.wg2 .wg2-who-card h3 {
		margin: 0;
		font-size: calc(var(--h3, 25.6) * var(--u));
		line-height: calc(31 * var(--u));
		text-wrap: wrap;
	}

	.wg2 .wg2-who-card h3 br {
		display: inline;
	}

	.wg2 .wg2-who-card ul {
		margin-top: calc(var(--ul) * var(--u));
		font-size: calc(var(--li, 19) * var(--u));
		line-height: calc(26 * var(--u));
	}

	.wg2 .wg2-who-card li {
		padding-left: calc(30 * var(--u));
	}

	.wg2 .wg2-who-card li + li {
		margin-top: calc((var(--gap) - 26) * var(--u));
	}

	.wg2 .wg2-who-card li::before {
		top: calc(8.5 * var(--u));
		width: calc(9 * var(--u));
		height: calc(9 * var(--u));
	}

	/* отступ от заголовка до списка: от низа заголовка (строк × 31) до верха списка в макете */
	.wg2 .wg2-who-card--1 {
		--h3: 25.2;
		--li: 18.55;
		--ul: 21;
		--gap: 36;
	}

	.wg2 .wg2-who-card--2 {
		--h3: 25.7;
		--li: 18.5;
		--ul: 27;
		--gap: 38.25;
	}

	.wg2 .wg2-who-card--3 {
		--h3: 23.25;
		--li: 18.8;
		--ul: 32;
		--gap: 40;
	}
}


/* ==========================================================================
   Первый экран — больше воздуха (владелец 23.09.2026: «по высоте больше места, смотрится слишком плотно»).
   На компьютере отступы растут с ВЫСОТОЙ окна (vh), а не с шириной: на 2560×1440 первый экран был
   полосой в 610 px и оставлял пустыми 650 px под карточками, а на ноутбуке 1366×768 карточкам и так
   едва хватает места. Пределы clamp держат ноутбук почти прежним, а большой экран — не пустым.
   Замер до/после: python stand/measure_hero.py --tag=after
   ========================================================================== */

/* телефон и планшет — немного свободнее, без перестройки */
.wg2 .wg2-hero {
	padding-top: clamp(36px, 6vw, 72px);
	padding-bottom: clamp(44px, 4.5vw, 56px);
}

.wg2 .wg2-hero__descr {
	margin-top: 24px;
}

.wg2 .wg2-hero__text .wg2-btn {
	margin-top: 32px;
}

@media (max-width: 767px) {
	.wg2 .wg2-hero__text .wg2-btn {
		margin-top: 26px;
	}
}

@media (min-width: 1200px) {
	.wg2 .wg2-hero {
		--hero-top: clamp(56px, calc(15.5vh - 38px), 150px);    /* шапка → заголовок: 1920×953 — 110, 1366×657 — 64 */
		--hero-cards: clamp(44px, calc(13vh - 16px), 150px);    /* кнопка → карточки */
		--hero-bottom: clamp(40px, calc(8vh - 16px), 96px);     /* карточки → конец секции */
		padding: var(--hero-top) 0 var(--hero-bottom);
	}

	.wg2 .wg2-hero__descr {
		margin-top: clamp(20px, 3vh, 32px);
	}

	.wg2 .wg2-hero__text .wg2-btn {
		margin-top: clamp(28px, 4.4vh, 48px);
	}

	.wg2 .wg2-hero__cards {
		margin-top: var(--hero-cards);
	}

	/* Фото растёт вместе с экраном: от шапки (12 px под ней) до 40 px ниже верха карточек —
	   низ снимка всегда закрыт карточками, как бы ни менялись отступы. Раньше фото было привязано
	   к верху колонки и имело постоянную ширину: при больших отступах его обрез повис бы над карточками */
	.wg2 .wg2-hero__person {
		top: calc(12px - var(--hero-top));
		bottom: calc(-40px - var(--hero-cards));
		width: auto;
	}

	/* Низ снимка — ровный срез по поясу. В щели между карточками он был виден тёмной «ступенькой»
	   с прямым краем (было и до этой правки). Плавное растворение последних 70 px: срез в щели не читается */
	.wg2 .wg2-hero__person img {
		width: auto;
		height: 100%;
		-webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 70px), transparent);
		mask-image: linear-gradient(180deg, #000 calc(100% - 70px), transparent);
	}
}