/*
 * Шаблон «Услуги NEW» — блоки acf/ufn-*.
 * Все классы с префиксом ufn-, чтобы не пересекаться со старыми блоками и общими стилями темы.
 */

:root {
	--ufn-top: 0px;
	--ufn-orange: #ED7D23;
	--ufn-blue: #1D99C7;
	--ufn-ice: #E3F7FF;
	--ufn-ice-pale: #F4FCFF;
	--ufn-ink: #1A2330;
	--ufn-ink2: #3A4654;
	--ufn-grey: #6B7785;
	--ufn-grey-l: #8C959F;
	--ufn-line: #E3EBF0;
	--ufn-line-2: #CFDCE3;
	--ufn-line-blue: #D6E6EF;
	--ufn-bg-alt: #F8FBFF;
	--ufn-bg-sky: #F4FAFE;
	--ufn-field: #FCFCFC;
	--ufn-tag: #F5F9FB;
	--ufn-sh-cta: 0 5px 30px 0 rgba(237, 125, 35, .35);
	--ufn-teal: linear-gradient(110deg, #159DBF 0%, #1BB5C6 60%, #1DCCC9 100%);
	--ufn-f: "Myriad Pro", "MyriadPro-Regular", "Segoe UI", Arial, sans-serif;
	--ufn-m: Consolas, "Courier New", monospace;
}

/* ---------- Страница шаблона ---------- */

/* Общая обёртка темы режет выход за края (overflow:hidden) и этим ломает «липкие» элементы.
   clip режет так же, но не делает обёртку прокручиваемым контейнером — липкость работает.
   Обе оси: clip по одной оси при hidden по другой браузер сводит обратно к hidden. */
body.ufn-page #main-wrapper { overflow: clip !important; }
html:has(body.ufn-page) { scroll-behavior: smooth; }
/* --ufn-top выставляет js/ufn.js: высота меню сайта, когда оно закреплено (только на широких экранах) */
@media (prefers-reduced-motion: reduce) {
	html:has(body.ufn-page) { scroll-behavior: auto; }
	.ufn *, .ufn-sec * { transition: none !important; animation: none !important; }
}

.ufn { display: block; font-family: var(--ufn-f); font-size: 16px; line-height: 1.45; color: var(--ufn-ink); -webkit-font-smoothing: antialiased; }
.ufn [hidden], .ufn-sec [hidden], .ufn-lb[hidden] { display: none !important; }

.ufn-w { width: min(1170px, 100% - 32px); margin: 0 auto; }
.ufn .ufn-w .ufn-w { width: 100%; }

/* Хлебные крошки (вывод kama_breadcrumbs) */
.ufn-crumbs { padding: 18px 0 0; font-size: 14px; color: var(--ufn-grey); }
.ufn-crumbs ul, .ufn-crumbs li { display: inline; margin: 0; padding: 0; list-style: none; }
.ufn-crumbs a { color: var(--ufn-blue); text-decoration: none; }
.ufn-crumbs .sep { color: var(--ufn-grey); }

/* ---------- Секции: фон во всю ширину окна ---------- */

.ufn-sec { padding: 80px 0; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: #fff; font-family: var(--ufn-f); color: var(--ufn-ink); }
.ufn-sec.ufn-bg-alt { background: var(--ufn-bg-alt); }
.ufn-sec.ufn-bg-sky { background: var(--ufn-bg-sky); }
.ufn-sec[id], .ufn-block[id] { scroll-margin-top: calc(var(--ufn-top) + 76px); }

/* Сброс общих правил темы внутри блоков */
.ufn-sec *, .ufn-block *, .ufn-anchors *, .ufn-lb * { box-sizing: border-box; }
.ufn-sec img, .ufn-block img { max-width: 100%; height: auto; display: block; padding: 0; border: 0; }
/* :where — нулевой вес, чтобы отступы самих блоков (.ufn-hero-in > * + * и т. п.) не перебивались */
:where(.ufn-sec, .ufn-block) :where(p, ul, ol, dl, dd, figure, h1, h2, h3, h4) { margin: 0; }
.ufn-sec button, .ufn-block button, .ufn-sec input, .ufn-sec textarea, .ufn-sec select { font-family: inherit; }
.ufn-sec a { color: inherit; }
.ufn-sec b, .ufn-sec strong, .ufn-block b { font-weight: 700; }
.ufn-sec :focus-visible, .ufn-block :focus-visible, .ufn-anchors :focus-visible { outline: 2px solid var(--ufn-blue); outline-offset: 2px; }

/* ---------- Типографика ---------- */

.ufn-h1 { font-weight: 600; font-size: clamp(38px, 5.2vw, 64px); line-height: 108%; letter-spacing: -1.5px; text-wrap: balance; }
/* у темы есть h2 { … !important } на весь сайт — перебиваем точечно */
.ufn h2.ufn-h2, .ufn-sec h2.ufn-h2, .ufn-sec .ufn-h2 { font-weight: 600 !important; font-size: clamp(30px, 3.4vw, 40px) !important; line-height: 110% !important; color: var(--ufn-ink) !important; text-wrap: balance; }
.ufn-h3 { font-weight: 600; font-size: 20px; line-height: 115%; color: var(--ufn-ink); }
.ufn-lead { font-size: 18px; line-height: 145%; color: var(--ufn-ink2); }
.ufn-txt { font-size: 16px; line-height: 140%; color: var(--ufn-grey); }
.ufn-fine { font-size: 14px; line-height: 125%; color: #656565; }
.ufn-fine b { color: var(--ufn-ink); }
.ufn-label { display: inline-flex; align-items: center; border-radius: 100px; padding: 12px 16px; background: var(--ufn-ice); font-weight: 600; font-size: 14px; line-height: 120%; text-transform: uppercase; color: var(--ufn-blue); }
.ufn-label-white { background: #fff; }
.ufn-label-start { align-self: flex-start; }
.ufn-head { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: end; margin-bottom: 40px; }
.ufn-head-l > * + * { margin-top: 16px; }
.ufn-empty { padding: 16px; border: 1px dashed var(--ufn-line-2); color: var(--ufn-grey); font-size: 14px; }

/* ---------- Кнопки, ссылки ---------- */

.ufn-btn, .ufn-btn-o, .ufn-btn-g, .ufn-btn-white { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 100px; padding: 16px 32px; font-weight: 600; font-size: 16px; line-height: 120%; cursor: pointer; text-decoration: none; font-family: var(--ufn-f); }
.ufn-btn { border: 0; box-shadow: var(--ufn-sh-cta); color: #fff !important; background: var(--ufn-orange); transition: opacity .2s; }
.ufn-btn:hover { opacity: .9; }
.ufn-btn-o { border: 1px solid var(--ufn-orange); color: var(--ufn-orange) !important; background: transparent; }
.ufn-btn-g { min-height: 51px; border: 1px solid var(--ufn-line-2); color: var(--ufn-ink) !important; background: #fff; }
.ufn-btn-white { border: 0; color: #0E7C97 !important; background: #fff; white-space: nowrap; }
.ufn-link { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; cursor: pointer; font-weight: 600; font-size: 16px; line-height: 120%; color: var(--ufn-orange) !important; text-decoration: none; font-family: var(--ufn-f); }
.ufn-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.ufn-mt20 { margin-top: 20px; }
.ufn-card { display: flex; flex-direction: column; border: 1px solid var(--ufn-line); border-radius: 20px; padding: 24px; background: #fff; }
.ufn-pad { padding: 32px; }
.ufn-tag-o, .ufn-tag-b { display: inline-flex; border-radius: 100px; padding: 6px 12px; font-weight: 700; font-size: 13px; line-height: 120%; text-transform: uppercase; }
.ufn-tag-o { background: var(--ufn-orange); color: #fff; }
.ufn-tag-b { background: var(--ufn-ice); color: var(--ufn-blue); }

/* ---------- Поля ---------- */

.ufn-flabel { display: block; margin-bottom: 8px; font-weight: 600; font-size: 14px; line-height: 140%; text-transform: uppercase; color: var(--ufn-ink2); }
.ufn-flabel span { color: var(--ufn-orange); }
.ufn-input, .ufn-sec .wpcf7 input[type="text"], .ufn-sec .wpcf7 input[type="tel"], .ufn-sec .wpcf7 input[type="email"], .ufn-sec .wpcf7 textarea {
	width: 100%; border: 1px solid var(--ufn-line); border-radius: 12px; padding: 13px 16px; font-family: var(--ufn-f); font-size: 16px; line-height: 120%; color: var(--ufn-ink); background: var(--ufn-field); outline: none; box-shadow: none; height: auto; margin: 0;
}
.ufn-input::placeholder, .ufn-sec .wpcf7 input::placeholder, .ufn-sec .wpcf7 textarea::placeholder { color: #757575; }
.ufn-input:focus, .ufn-sec .wpcf7 input:focus, .ufn-sec .wpcf7 textarea:focus { border-color: var(--ufn-blue); }
textarea.ufn-input, .ufn-sec .wpcf7 textarea { min-height: 96px; height: 120px; resize: vertical; }
.ufn-field { margin-top: 16px; }
.ufn-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ufn-agree, .ufn-sec .wpcf7 .ufn-agree { display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; font-size: 13px; line-height: 125%; color: #656565; }
.ufn-agree input { width: 15px; height: 15px; min-width: 15px; margin: 1px 0 0; accent-color: var(--ufn-orange); }
.ufn-agree a { color: var(--ufn-blue) !important; }
.ufn-agree .wpcf7-list-item { margin: 0; }
.ufn-agree label { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 125%; color: #656565; }
.ufn-filebtn { width: 100%; display: flex; align-items: center; gap: 10px; border: 1px dashed var(--ufn-line-2); border-radius: 12px; padding: 14px 16px; background: #fff; cursor: pointer; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .02em; color: var(--ufn-ink2); }
.ufn-filebtn[data-has-file="true"] { border-style: solid; border-color: var(--ufn-blue); color: var(--ufn-blue); text-transform: none; }

/* CF7 внутри блоков */
.ufn-sec .wpcf7 form { margin: 0; }
.ufn-sec .wpcf7-form-control-wrap { display: block; }
.ufn-sec .wpcf7-not-valid-tip { margin-top: 6px; font-size: 13px; color: #D2412F; }
.ufn-sec .wpcf7 .wpcf7-response-output { margin: 16px 0 0; padding: 10px 14px; border-radius: 12px; font-size: 14px; }
.ufn-sec .wpcf7 .wpcf7-spinner { margin: 0 0 0 8px; }
.ufn-sec .wpcf7 input[type="submit"].ufn-btn { width: 100%; margin-top: 20px; -webkit-appearance: none; appearance: none; }
.ufn-file-input { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0; overflow: hidden; }
.ufn-sec .grecaptcha-badge { display: none; }

/* Сегментированный выбор (калькулятор) */
.ufn-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.ufn-seg button { border: 1px solid var(--ufn-line); border-radius: 100px; padding: 10px 16px; background: #fff; font-size: 15px; line-height: 120%; font-weight: 600; color: var(--ufn-ink2); cursor: pointer; transition: .15s; }
.ufn-seg button[aria-pressed="true"] { border-color: var(--ufn-blue); background: var(--ufn-ice); color: var(--ufn-blue); }
.ufn-seg button:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- B02 Первый экран ---------- */

.ufn-hero { position: relative; margin-top: 18px; border-radius: 20px; overflow: hidden; min-height: 520px; display: flex; align-items: center; background: #10202C; }
.ufn-hero .ufn-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 55%; }
.ufn-hero-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(10, 22, 32, .9) 0%, rgba(10, 22, 32, .72) 42%, rgba(10, 22, 32, .15) 78%); }
.ufn-hero-in { position: relative; padding: 56px; max-width: 700px; }
.ufn-hero-in > * + * { margin-top: 22px; }
.ufn-hero .ufn-h1 { color: #fff; }
.ufn-hero .ufn-h1 span { color: #7FD4F2; }
.ufn-hero .ufn-lead { color: rgba(255, 255, 255, .88); font-size: 20px; }
.ufn-hero-badge { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 100px; padding: 10px 16px; background: rgba(255, 255, 255, .1); color: #fff; font-weight: 600; font-size: 15px; line-height: 120%; }
.ufn-hero-badge i { width: 9px; height: 9px; border-radius: 50%; background: #7FD4F2; display: block; }
.ufn-hero-price { display: flex; flex-wrap: wrap; gap: 10px; }
.ufn-hero-price span { display: inline-flex; align-items: center; gap: 8px; border-radius: 100px; padding: 9px 16px; background: rgba(255, 255, 255, .95); color: var(--ufn-ink); font-weight: 700; font-size: 16px; line-height: 120%; }
.ufn-hero-price span b { color: var(--ufn-orange); }
.ufn-hero .ufn-btn-o { border-color: rgba(255, 255, 255, .75); color: #fff !important; }

/* ---------- B03 Короткие факты ---------- */

.ufn-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 24px; }
.ufn-fact { display: flex; flex-direction: column; min-height: 150px; border: 1px solid var(--ufn-line-blue); border-radius: 20px; padding: 18px; background: var(--ufn-ice-pale); }
.ufn-fact svg { width: 40px; height: 40px; margin-bottom: 18px; flex: 0 0 40px; }
.ufn-fact b { font-size: 22px; font-weight: 700; line-height: 110%; color: var(--ufn-ink); }
.ufn-fact span { margin-top: 8px; font-size: 15px; line-height: 135%; color: var(--ufn-grey); }

/* ---------- B04 Меню разделов ---------- */

.ufn-anchors { position: sticky; top: var(--ufn-top); z-index: 40; margin: 40px calc(50% - 50vw) 0; background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-bottom: 1px solid var(--ufn-line); font-family: var(--ufn-f); }
.ufn-anchors .ufn-w { display: flex; gap: 8px; overflow-x: auto; padding: 12px 0; scrollbar-width: none; }
.ufn-anchors .ufn-w::-webkit-scrollbar { display: none; }
.ufn-anchors a { flex: 0 0 auto; border: 1px solid var(--ufn-line); border-radius: 100px; padding: 9px 16px; text-decoration: none; font-weight: 600; font-size: 15px; line-height: 120%; color: var(--ufn-ink2); background: #fff; transition: .15s; }
.ufn-anchors a[aria-current="true"] { background: var(--ufn-ice); border-color: var(--ufn-ice); color: var(--ufn-blue); }

/* ---------- B07 Карточки ---------- */

.ufn-cards4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: stretch; }
.ufn-scard { display: flex; flex-direction: column; }
.ufn-scard-img { position: relative; height: 180px; border-radius: 20px 20px 0 0; overflow: hidden; background: #E6F0F6; }
.ufn-scard-img img { width: 100%; height: 100%; object-fit: cover; }
.ufn-scard-img .ufn-tag-o, .ufn-scard-img .ufn-tag-b { position: absolute; top: 14px; right: 14px; }
.ufn-scard-body { flex: 1 1 auto; display: flex; flex-direction: column; border: 1px solid var(--ufn-line); border-top: 0; border-radius: 0 0 20px 20px; padding: 22px 24px 24px; background: #fff; }
.ufn-scard-body .ufn-txt { margin-top: 8px; }
.ufn-foot { margin-top: auto; padding-top: 20px; }
.ufn-more-row { display: flex; justify-content: center; margin-top: 32px; }

/* ---------- B09 Таблица цен ---------- */

.ufn-ptable { border: 1px solid var(--ufn-line); border-radius: 20px; overflow: hidden; background: #fff; }
.ufn-ptable-scroll { overflow-x: auto; }
.ufn-ptable table { width: 100%; border-collapse: collapse; min-width: 640px; margin: 0; }
.ufn-ptable thead tr { background: var(--ufn-bg-alt); border-bottom: 1px solid var(--ufn-line); }
.ufn-ptable th, .ufn-ptable td { text-align: left; padding: 16px 22px; vertical-align: middle; border: 0; }
.ufn-ptable th { font-weight: 600; font-size: 16px; line-height: 120%; text-transform: uppercase; color: var(--ufn-ink); white-space: nowrap; }
.ufn-ptable td { font-size: 16px; line-height: 135%; color: var(--ufn-ink2); }
.ufn-ptable tbody tr + tr { border-top: 1px solid var(--ufn-line); }
.ufn-ptable td.ufn-n { font-weight: 600; color: var(--ufn-ink); }
.ufn-ptable td.ufn-p { font-weight: 700; color: var(--ufn-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ufn-ptable td.ufn-p.ufn-q { font-weight: 600; color: var(--ufn-grey); }
.ufn-ptable td.ufn-a { text-align: right; white-space: nowrap; }
.ufn-ptable tr.ufn-hl td { background: #FFFBF6; }
.ufn-ptable-foot { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; padding: 16px 22px; border-top: 1px solid var(--ufn-line); background: var(--ufn-bg-alt); }

/* B18 Промобаннер */
.ufn-promo { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; margin-top: 32px; border-radius: 20px; padding: 40px 48px; background: var(--ufn-teal); }
.ufn-sec .ufn-promo h2 { margin: 0; font-weight: 700 !important; font-size: 30px !important; line-height: 120% !important; color: #fff !important; }
.ufn-promo p { margin: 12px 0 0; max-width: 62ch; font-size: 17px; line-height: 145%; color: rgba(255, 255, 255, .93); }

/* ---------- B10 Сравнение режимов ---------- */

.ufn-cmp { display: grid; grid-template-columns: 1.05fr 1fr; gap: 32px; align-items: start; }
.ufn-cmp-view { border: 1px solid var(--ufn-line); border-radius: 20px; overflow: hidden; background: #fff; }
.ufn-cmp-stage { position: relative; aspect-ratio: 16 / 11; display: flex; align-items: center; justify-content: center; overflow: hidden;
	background: linear-gradient(0deg, rgba(0, 0, 0, .05) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(90deg, rgba(0, 0, 0, .05) 1px, transparent 1px) 0 0 / 48px 48px, #EFE9DF; }
.ufn-cmp-glass { position: relative; width: 74%; aspect-ratio: 16 / 10; border-radius: 4px; box-shadow: 0 0 0 2px rgba(127, 184, 166, .9), 0 14px 30px rgba(0, 0, 0, .12); transition: .3s; }
.ufn-cmp-white { position: absolute; inset: 0; background: #fff; opacity: 0; transition: opacity .3s; }
.ufn-sec .ufn-cmp-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: .3s; }
.ufn-cmp-glass[data-mode="nowhite"] .ufn-cmp-art { opacity: .55; mix-blend-mode: multiply; }
.ufn-cmp-glass[data-mode="white"] .ufn-cmp-white { opacity: 1; }
.ufn-cmp-glass[data-mode="duplex"] .ufn-cmp-white { opacity: .9; }
.ufn-cmp-glass[data-mode="duplex"] { box-shadow: 0 0 0 2px rgba(127, 184, 166, .9), 10px 10px 0 rgba(26, 35, 48, .16); }
.ufn-cmp-glass[data-mode="backlight"] .ufn-cmp-white { opacity: .35; background: #FFF4D6; }
.ufn-cmp-glass[data-mode="backlight"] .ufn-cmp-art { filter: saturate(1.35) brightness(1.08); }
.ufn-cmp-glass[data-mode="backlight"] { box-shadow: 0 0 0 2px rgba(127, 184, 166, .9), 0 0 60px rgba(255, 210, 110, .9); }
.ufn-cmp-cap { display: flex; justify-content: space-between; gap: 16px; padding: 14px 20px; border-top: 1px solid var(--ufn-line); font-size: 14px; color: var(--ufn-ink2); }
.ufn-cmp-cap b { font-family: var(--ufn-m); font-weight: 500; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ufn-grey-l); }
.ufn-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ufn-mode { text-align: left; display: flex; flex-direction: column; gap: 5px; min-height: 92px; border: 1px solid var(--ufn-line); border-radius: 16px; padding: 16px 18px; background: #fff; cursor: pointer; }
.ufn-mode[aria-pressed="true"] { border-color: var(--ufn-blue); background: var(--ufn-ice-pale); }
.ufn-mode strong { font-size: 16px; line-height: 120%; color: var(--ufn-ink); }
.ufn-mode span { font-size: 14px; line-height: 135%; color: var(--ufn-grey); }
.ufn-mode em { margin-top: auto; font-style: normal; font-weight: 700; font-size: 15px; color: var(--ufn-orange); }
.ufn-mode-info { margin-top: 16px; }
.ufn-mode-info .ufn-label { align-self: flex-start; }
.ufn-mode-info .ufn-h3 { margin-top: 14px; }
.ufn-mode-info .ufn-txt { margin-top: 8px; }

/* ---------- S01 + B15 Калькулятор ---------- */

.ufn-calc { display: grid; grid-template-columns: 1fr 440px; gap: 24px; align-items: start; }
.ufn-calc-params { border: 1px solid var(--ufn-line); border-radius: 20px; background: #fff; }
.ufn-cgroup { padding: 24px 28px; }
.ufn-cgroup + .ufn-cgroup { border-top: 1px solid var(--ufn-line); }
.ufn-cgroup-t { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px !important; }
.ufn-cgroup-t b { font-family: var(--ufn-m); font-weight: 500; font-size: 12px; color: var(--ufn-blue); }
.ufn-cgroup-t span { font-weight: 600; font-size: 17px; color: var(--ufn-ink); }
.ufn-crow { display: grid; grid-template-columns: 170px 1fr; gap: 16px; align-items: center; }
.ufn-crow + .ufn-crow, .ufn-crow-gap { margin-top: 14px; }
.ufn-crow-gap { margin-top: 16px; }
.ufn-crow > label, .ufn-crow > .ufn-cl { font-weight: 600; font-size: 14px; text-transform: uppercase; color: var(--ufn-ink2); }
.ufn-dims { display: flex; align-items: center; gap: 10px; }
.ufn-dims .ufn-input { width: 130px; }
.ufn-dims i { font-style: normal; color: var(--ufn-grey); }
.ufn-proc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ufn-popt { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; border: 1px solid var(--ufn-line); border-radius: 14px; padding: 12px; background: #fff; cursor: pointer; text-align: left; }
.ufn-popt svg { width: 100%; height: auto; border-radius: 8px; background: var(--ufn-bg-alt); }
.ufn-popt b { font-size: 15px; font-weight: 600; color: var(--ufn-ink); }
.ufn-popt small { font-size: 13px; color: var(--ufn-grey); }
.ufn-popt[aria-pressed="true"] { border-color: var(--ufn-orange); background: #FFF8F1; }
.ufn-popt:disabled { opacity: .45; cursor: not-allowed; }
.ufn-calc-why { margin-top: 12px !important; font-size: 14px; line-height: 140%; color: var(--ufn-grey); }
.ufn-calc-side { position: sticky; top: calc(var(--ufn-top) + 78px); display: flex; flex-direction: column; gap: 16px; }
.ufn-calc-view { border: 1px solid var(--ufn-line); border-radius: 20px; background: #fff; overflow: hidden; }
.ufn-calc-view svg { display: block; width: 100%; height: auto; }
.ufn-calc-view-cap { display: flex; justify-content: space-between; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--ufn-line); font-size: 13.5px; color: var(--ufn-grey); }
.ufn-calc-sum { border-radius: 20px; padding: 24px; background: var(--ufn-ice-pale); border: 1px solid var(--ufn-line-blue); }
.ufn-calc-total { margin: 6px 0 2px; font-weight: 700; font-size: 40px; line-height: 110%; color: var(--ufn-ink); font-variant-numeric: tabular-nums; }
.ufn-calc-lines { margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--ufn-line-blue); display: flex; flex-direction: column; gap: 7px; }
.ufn-calc-lines div { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; color: var(--ufn-ink2); font-variant-numeric: tabular-nums; }
.ufn-calc-lines div b { font-weight: 600; color: var(--ufn-ink); white-space: nowrap; }
.ufn-calc-min { margin-top: 10px !important; font-size: 13px; color: var(--ufn-grey); }
.ufn-calc-min[data-on="true"] { color: var(--ufn-orange); font-weight: 600; }
.ufn-calc-order { margin-top: 18px; }
.ufn-calc-order .ufn-btn { width: 100%; }
.ufn-calc-deal { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ufn-line-blue); }
.ufn-calc-deal > p { margin: 0 0 10px; font-weight: 600; font-size: 15px; color: var(--ufn-ink); }
.ufn-deal-row { display: flex; gap: 10px; }
.ufn-deal-row > .wpcf7-form-control-wrap { flex: 1 1 auto; }
.ufn-sec .ufn-deal-row input[type="submit"] { flex: 0 0 auto; min-height: 48px; padding: 12px 18px; border: 1px solid var(--ufn-line-2); border-radius: 100px; background: #fff; color: var(--ufn-ink); font-weight: 600; font-size: 16px; cursor: pointer; -webkit-appearance: none; appearance: none; }

/* ---------- B11 Работы по вкладкам ---------- */

.ufn-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.ufn-tab { border: 1px solid var(--ufn-line); border-radius: 100px; padding: 12px 20px; background: #fff; font-weight: 600; font-size: 16px; line-height: 120%; color: var(--ufn-ink2); cursor: pointer; }
.ufn-tab[aria-selected="true"] { background: var(--ufn-ice); border-color: var(--ufn-ice); color: var(--ufn-blue); }
.ufn-tabp { display: grid; grid-template-columns: 340px 1fr; gap: 32px; align-items: start; }
.ufn-tabp-txt > * + * { margin-top: 14px; }
.ufn-gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ufn-gal button { position: relative; padding: 0; border: 0; border-radius: 14px; overflow: hidden; cursor: zoom-in; aspect-ratio: 1 / 1; background: #E6F0F6; }
.ufn-gal img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.ufn-gal button:hover img { transform: scale(1.04); }
.ufn-gal span { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 10px 8px; background: linear-gradient(0deg, rgba(10, 22, 32, .72), transparent); color: #fff; font-size: 12.5px; line-height: 125%; font-weight: 600; text-align: left; }

/* Увеличенное фото */
.ufn-lb { position: fixed; inset: 0; z-index: 100000; background: rgba(10, 18, 26, .88); display: flex; align-items: center; justify-content: center; padding: 32px; font-family: var(--ufn-f); }
.ufn-lb figure { margin: 0; max-width: min(1000px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 12px; }
.ufn-lb img { display: block; max-height: 80vh; max-width: 100%; width: auto; height: auto; margin: 0 auto; padding: 0; border-radius: 12px; }
.ufn-lb figcaption { color: #fff; text-align: center; font-weight: 600; }
.ufn-lb-close { position: absolute; top: 18px; right: 22px; border: 0; border-radius: 100px; padding: 10px 18px; background: #fff; color: var(--ufn-ink); font-weight: 600; font-size: 15px; cursor: pointer; }

/* ---------- B13 Кейс ---------- */

.ufn-case { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.ufn-case-img { border-radius: 20px; overflow: hidden; min-height: 380px; background: #E6F0F6; }
.ufn-case-img img { width: 100%; height: 100%; object-fit: cover; }
.ufn-case-card { padding: 32px; }
.ufn-case dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 14px 22px; align-items: baseline; }
.ufn-case dt { font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .02em; color: var(--ufn-grey-l); white-space: nowrap; }
.ufn-case dd { margin: 0; font-size: 17px; line-height: 140%; color: var(--ufn-ink); }
.ufn-fill { display: inline-block; border: 1px dashed var(--ufn-orange); border-radius: 6px; padding: 1px 8px; font-size: 14px; color: var(--ufn-orange); background: #FFF8F1; }

/* ---------- B06 Видео ---------- */

.ufn-media { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.ufn-media-txt > * + * { margin-top: 16px; }
.ufn-ul { padding-left: 20px !important; color: var(--ufn-ink2); font-size: 16px; line-height: 155%; list-style: disc; }
.ufn-ul li { list-style: disc; }
.ufn-video { position: relative; display: block; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; background: #10202C; text-decoration: none; }
.ufn-video img { width: 100%; height: 100%; object-fit: cover; opacity: .78; }
.ufn-sec .ufn-video video { display: block; width: 100%; height: 100% !important; object-fit: cover; background: #000; }
.ufn-video-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 84px; height: 84px; border-radius: 50%; background: var(--ufn-orange); box-shadow: var(--ufn-sh-cta); display: flex; align-items: center; justify-content: center; }
.ufn-video-play::after { content: ""; margin-left: 6px; border-left: 24px solid #fff; border-top: 15px solid transparent; border-bottom: 15px solid transparent; }
.ufn-video-cap { position: absolute; left: 20px; bottom: 18px; color: #fff; font-weight: 600; font-size: 15px; }

/* ---------- B21 Состояние макета ---------- */

.ufn-scen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
.ufn-scen button { text-align: left; border: 1px solid var(--ufn-line); border-radius: 20px; padding: 20px 22px; background: #fff; cursor: pointer; }
.ufn-scen button[aria-pressed="true"] { border-color: var(--ufn-blue); background: var(--ufn-ice-pale); }
.ufn-scen strong { display: block; font-size: 18px; color: var(--ufn-ink); margin-bottom: 6px; }
.ufn-scen span { font-size: 15px; line-height: 135%; color: var(--ufn-grey); }
.ufn-panel-txt { margin: 8px 0 20px !important; }
.ufn-upload { display: block; border: 2px dashed var(--ufn-line-2); border-radius: 20px; padding: 30px; text-align: center; background: var(--ufn-bg-alt); color: var(--ufn-grey); cursor: pointer; transition: border-color .15s, background .15s; }
.ufn-upload strong { display: block; font-size: 18px; color: var(--ufn-ink); margin-bottom: 6px; }
.ufn-upload[data-over="true"], .ufn-upload[data-has-file="true"] { border-color: var(--ufn-blue); background: var(--ufn-ice-pale); }
.ufn-upload[data-has-file="true"] [data-ufn-drop-text] { color: var(--ufn-blue); font-weight: 600; }
.ufn-req-box { margin-top: 16px; }
.ufn-req { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 20px; }
.ufn-req h4 { margin: 0 0 10px; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--ufn-blue); }
.ufn-req ul { margin: 0; padding-left: 18px !important; font-size: 15px; line-height: 150%; color: var(--ufn-ink2); }
.ufn-req li { list-style: disc; }
.ufn-req code { font-family: var(--ufn-m); font-size: 13px; background: var(--ufn-tag); padding: 1px 5px; border-radius: 4px; }

/* ---------- B14 Шаги ---------- */

.ufn-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ufn-step { position: relative; border: 1px solid var(--ufn-line); border-radius: 20px; padding: 24px; background: #fff; }
.ufn-step-n { width: 42px; height: 42px; border-radius: 100px; background: var(--ufn-ice); color: var(--ufn-blue); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; margin-bottom: 16px; }
.ufn-step .ufn-txt { margin-top: 8px; }
.ufn-step:not(:last-child)::after { content: ""; position: absolute; top: 44px; right: -17px; width: 9px; height: 9px; border-top: 2px solid var(--ufn-line-2); border-right: 2px solid var(--ufn-line-2); transform: rotate(45deg); }

/* ---------- B17 Логотипы ---------- */

.ufn-logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ufn-logo { height: 96px; border: 1px solid var(--ufn-line); border-radius: 20px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 16px; font-weight: 700; font-size: 20px; color: #9AA7B2; letter-spacing: .02em; text-align: center; }
.ufn-logo img { max-height: 64px; width: auto; object-fit: contain; }

/* ---------- B05 Текст + памятка ---------- */

.ufn-textp { display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: start; }
.ufn-textp-solo { grid-template-columns: 1fr; }
.ufn-prose { max-width: 68ch; }
.ufn-prose > * + *, .ufn-prose-more > * + * { margin-top: 16px !important; }
.ufn-prose > .ufn-label { display: inline-flex; }
.ufn-prose p { margin: 0; font-size: 17px; line-height: 160%; color: var(--ufn-ink2); }
.ufn-prose h3 { margin: 28px 0 0 !important; font-size: 22px; font-weight: 600; line-height: 125%; color: var(--ufn-ink); }
.ufn-prose ul, .ufn-prose ol { margin: 0; padding-left: 20px !important; font-size: 17px; line-height: 160%; color: var(--ufn-ink2); }
.ufn-prose ul li { list-style: disc; }
.ufn-prose ol li { list-style: decimal; }
.ufn-prose a { color: var(--ufn-blue); }
.ufn-aside { position: sticky; top: calc(var(--ufn-top) + 78px); border: 1px solid var(--ufn-line-blue); border-radius: 20px; padding: 26px; background: var(--ufn-ice-pale); }
.ufn-aside ul { margin: 14px 0 0 !important; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.ufn-aside li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; font-size: 15px; line-height: 140%; color: var(--ufn-ink2); list-style: none; }
.ufn-aside li::before { content: "✓"; color: var(--ufn-blue); font-weight: 700; }
.ufn-aside li b { display: block; color: var(--ufn-ink); font-weight: 600; }

/* ---------- B16 FAQ ---------- */

.ufn-faq { display: grid; grid-template-columns: 420px 1fr; gap: 48px; align-items: stretch; }
.ufn-faq-left { display: flex; flex-direction: column; }
.ufn-faq-left > .ufn-h2, .ufn-faq-left > .ufn-lead { margin-top: 16px !important; }
.ufn-faq-photo { position: relative; flex: 1 1 auto; min-height: 240px; margin-top: 26px; border-radius: 20px; overflow: hidden; background: #E6F0F6; }
.ufn-sec .ufn-faq-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ufn-qa { border-radius: 16px; padding: 22px 24px; background: #fff; box-shadow: 0 1px 2px rgba(8, 74, 68, .06); transition: box-shadow .25s; }
.ufn-qa + .ufn-qa { margin-top: 12px; }
.ufn-qa[data-open="true"] { box-shadow: 0 8px 26px rgba(8, 74, 68, .1); }
.ufn-qa-q { width: 100%; display: grid; grid-template-columns: 1fr 34px; gap: 20px; align-items: center; border: 0; background: none; padding: 0; text-align: left; cursor: pointer; font-weight: 600; font-size: 19px; line-height: 125%; color: var(--ufn-ink); }
.ufn-qa-plus { width: 34px; height: 34px; border-radius: 50%; background: var(--ufn-blue); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; transition: transform .25s; }
.ufn-qa[data-open="true"] .ufn-qa-plus { transform: rotate(45deg); }
.ufn-qa-a { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--ufn-line); font-size: 16px; line-height: 150%; color: var(--ufn-grey); }
.ufn-qa-a p + p { margin-top: 10px; }

/* ---------- B19 Форма на бирюзовом ---------- */

.ufn-teal { border-radius: 20px; padding: 48px; background: var(--ufn-teal); display: grid; grid-template-columns: 1fr 540px; gap: 48px; align-items: center; }
.ufn-sec .ufn-teal h2 { margin: 16px 0 0; font-weight: 700 !important; font-size: clamp(28px, 3.2vw, 40px) !important; line-height: 115% !important; color: #fff !important; text-wrap: balance; }
.ufn-teal .ufn-lead { margin-top: 18px; color: rgba(255, 255, 255, .93); font-size: 17px; }
.ufn-label-w { display: inline-flex; border-radius: 100px; padding: 10px 18px; background: rgba(255, 255, 255, .22); font-weight: 600; font-size: 14px; line-height: 120%; text-transform: uppercase; color: #fff; }
.ufn-checks { margin: 26px 0 0 !important; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.ufn-checks li { display: flex; gap: 10px; font-weight: 600; font-size: 16px; line-height: 135%; color: #fff; list-style: none; }
.ufn-checks li::before { content: "✓"; font-weight: 700; }
.ufn-fcard { border-radius: 20px; padding: 36px; background: #fff; }
.ufn-fcard-t { font-size: 22px; }
.ufn-fcard-s { margin: 8px 0 22px !important; }

/* ---------- Блог ---------- */

.ufn-blog-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 3); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 2px; }
.ufn-blog-track::-webkit-scrollbar { display: none; }
.ufn-bcard { scroll-snap-align: start; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.ufn-bcard-img { height: 240px; border-radius: 20px 20px 0 0; overflow: hidden; background: #E6F0F6; }
.ufn-bcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.ufn-bcard:hover .ufn-bcard-img img { transform: scale(1.03); }
.ufn-bcard-body { flex: 1 1 auto; min-height: 206px; display: flex; flex-direction: column; border: 1px solid var(--ufn-line); border-top: 0; border-radius: 0 0 20px 20px; padding: 24px; background: #fff; }
.ufn-bcard-body .ufn-txt { margin-top: 8px; line-height: 130%; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ufn-bcard-body .ufn-link { margin-top: auto; padding-top: 20px; }
.ufn-blog-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; }
.ufn-blog-dots { display: flex; gap: 6px; align-items: center; }
.ufn-blog-dots button { width: 7px; height: 7px; border: 0; border-radius: 50%; padding: 0; background: #DDD; cursor: pointer; transition: width .25s, background .25s, border-radius .25s; }
.ufn-blog-dots button[aria-current="true"] { width: 30px; border-radius: 4px; background: var(--ufn-orange); }
.ufn-blog-ctrl { display: flex; align-items: center; gap: 12px; }
.ufn-arrow { width: 51px; height: 51px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ufn-line); border-radius: 100px; background: #fff; cursor: pointer; font-size: 22px; line-height: 1; color: var(--ufn-ink); padding: 0; }
.ufn-arrow:disabled { opacity: .4; cursor: default; }

/* ---------- Смежные услуги ---------- */

.ufn-cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.ufn-cards3 .ufn-scard-img { height: 240px; }
.ufn-cards3 .ufn-scard-body { padding: 22px 24px; }
.ufn-cards3 .ufn-scard-body .ufn-foot { padding-top: 14px; }

/* ---------- Адаптив ---------- */

@media (max-width: 1199px) {
	.ufn-cards4, .ufn-facts, .ufn-logos { grid-template-columns: repeat(2, 1fr); }
	.ufn-calc { grid-template-columns: 1fr; }
	.ufn-calc-side { position: static; }
	.ufn-teal { grid-template-columns: 1fr; }
	.ufn-tabp { grid-template-columns: 1fr; }
	.ufn-blog-track { grid-auto-columns: calc((100% - 24px) / 2); }
}
@media (max-width: 900px) {
	.ufn-head, .ufn-cmp, .ufn-case, .ufn-media, .ufn-textp, .ufn-faq, .ufn-req, .ufn-scen { grid-template-columns: 1fr; }
	.ufn-aside { position: static; }
	.ufn-faq-photo { flex: none; min-height: 0; aspect-ratio: 16 / 10; }
	.ufn-gal { grid-template-columns: repeat(2, 1fr); }
	.ufn-steps { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding-bottom: 6px; }
	.ufn-step { flex: 0 0 78%; scroll-snap-align: start; }
	.ufn-step::after { display: none; }
	.ufn-promo { grid-template-columns: 1fr; padding: 28px 24px; }
	.ufn-teal { padding: 28px 20px; gap: 28px; }
	.ufn-fcard { padding: 24px 18px; }
	.ufn-hero-in { padding: 36px 22px; }
	.ufn-sec { padding: 56px 0; }
	.ufn-crow { grid-template-columns: 1fr; gap: 8px; }
	.ufn-proc { grid-template-columns: 1fr 1fr; }
	.ufn-grid2 { grid-template-columns: 1fr; }
	.ufn-blog-track { grid-auto-columns: 84%; }
	.ufn-cards3 { grid-template-columns: 1fr; }
	.ufn-case-img { min-height: 0; aspect-ratio: 1 / 1; }
	.ufn-pad, .ufn-case-card { padding: 24px 20px; }
}
@media (max-width: 560px) {
	.ufn-cards4, .ufn-facts, .ufn-logos { grid-template-columns: 1fr; }
	.ufn-modes { grid-template-columns: 1fr; }
	.ufn-hero { min-height: 480px; }
	.ufn-dims .ufn-input { width: 100%; }
	.ufn-deal-row { flex-direction: column; }
	.ufn-blog-nav .ufn-btn-g { padding: 14px 20px; }
}

/* NEW2: compact spacing between sections, inherited by editor previews. */
.ufn-sec[class*=" ufn2-"] , .ufn-sec[class*=" ufn2x-"] { padding-top: 40px; padding-bottom: 40px; }
@media (max-width: 780px) {
  .ufn-sec[class*=" ufn2-"] , .ufn-sec[class*=" ufn2x-"] { padding-top: 28px; padding-bottom: 28px; }
}