/* =========================================================================
   WebBiz — дизайн-система (вдохновлено pickpackage.com)
   Светлая база + тёмные секции + цветные акценты. RTL (иврит).
   ========================================================================= */

:root {
	--ink: #2c355d;          /* основной текст / тёмный */
	--ink-2: #2e3761;
	--slate: #47507a;        /* тёмные секции */
	--coral: #ed4364;        /* главный CTA / акцент */
	--coral-2: #f16983;      /* hover */
	--lime: #c8e24c;
	--sky: #4fade1;
	--bg: #ffffff;
	--bg-soft: #f6f7fb;      /* мягкая серая секция */
	--bg-soft-2: #eef1f9;
	--line: #e6e9f4;
	--muted: #6b7390;

	--radius-pill: 999px;
	--radius-lg: 28px;
	--radius-md: 18px;
	--radius-sm: 12px;

	--shadow-sm: 0 4px 16px rgba(44, 53, 93, .08);
	--shadow-md: 0 12px 40px rgba(44, 53, 93, .12);
	--shadow-lg: 0 30px 70px rgba(44, 53, 93, .18);

	--container: 1200px;
	--font: "Rubik", -apple-system, "system-ui", "Segoe UI", Roboto, Arial, sans-serif;

	/* добавлено для богатства дизайна (hellohumans + pickpackage) */
	--cream: #f4efe7;        /* тёплый светлый фон (hellohumans) */
	--noir: #0f1e2c;         /* почти-чёрный navy для контрастных секций */
	--violet: #7b61ff;
	--amber: #f4a23c;
	--grad-brand: linear-gradient(135deg, var(--violet), var(--sky));
	--grad-warm: linear-gradient(120deg, var(--coral), var(--amber));
	--grad-rainbow: linear-gradient(90deg, var(--sky), var(--violet), var(--coral), var(--amber));
}

/* ---- база ---- */
html { scroll-behavior: smooth; }

body.webbiz {
	font-family: var(--font);
	color: var(--ink);
	background: var(--bg);
	font-size: 18px;
	line-height: 1.7;
	margin: 0;
	overflow-x: clip; /* подстраховка от случайного горизонтального скролла */
	-webkit-font-smoothing: antialiased;
}

.webbiz img { max-width: 100%; height: auto; display: block; }
.webbiz a:not(.wb-btn) { color: inherit; text-decoration: none; }
.webbiz a.wb-btn { text-decoration: none; }

.wb-container {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: 24px;
}

/* ---- типографика ---- */
.webbiz h1, .webbiz h2, .webbiz h3, .webbiz h4 {
	font-family: var(--font);
	color: var(--ink);
	font-weight: 700;
	line-height: 1.18;
	margin: 0 0 .5em;
	letter-spacing: -.01em;
}
.webbiz h1 { font-size: clamp(2.2rem, 5.2vw, 3.4rem); font-weight: 800; }
.webbiz h2 { font-size: clamp(1.8rem, 3.8vw, 2.7rem); }
.webbiz h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }
.webbiz p  { margin: 0 0 1.1em; }
.webbiz .lead { font-size: 1.2rem; color: var(--muted); }

/* фирменное подчёркивание-мазок под заголовком */
.wb-underline { position: relative; display: inline-block; }
.wb-underline::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	bottom: -.18em;
	width: 100%;
	height: .28em;
	border-radius: var(--radius-pill);
	background: var(--sky);
	opacity: .9;
}
.wb-underline--coral::after { background: var(--coral); }
.wb-underline--lime::after  { background: var(--lime); }

.wb-eyebrow {
	display: inline-block;
	font-weight: 600;
	font-size: .9rem;
	letter-spacing: .04em;
	color: var(--coral);
	background: rgba(237, 67, 100, .1);
	padding: 6px 16px;
	border-radius: var(--radius-pill);
	margin-bottom: 18px;
}

/* ---- кнопки (пилюли) ---- */
.wb-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 500;
	font-size: 1.02rem;
	padding: 14px 38px;
	border-radius: var(--radius-pill);
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
	white-space: nowrap;
}
.wb-btn--primary { background: var(--coral); color: #fff; box-shadow: 0 10px 24px rgba(237, 67, 100, .35); }
.wb-btn--primary:hover { background: var(--coral-2); transform: translateY(-2px); }
.wb-btn--dark { background: var(--ink); color: #fff; }
.wb-btn--dark:hover { background: var(--ink-2); transform: translateY(-2px); }
.wb-btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.wb-btn--ghost:hover { border-color: var(--ink); transform: translateY(-2px); }
.wb-btn--on-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.wb-btn--on-dark:hover { background: #fff; color: var(--ink); }

/* ---- шапка / навигация ---- */
.wb-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, .85);
	backdrop-filter: saturate(160%) blur(12px);
	border-bottom: 1px solid var(--line);
}
.wb-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: 76px;
}
.wb-logo { font-weight: 800; font-size: 1.5rem; color: var(--ink); letter-spacing: -.02em; }
.wb-logo span { color: var(--coral); }
.wb-nav { display: flex; align-items: center; gap: 30px; }
.wb-nav a { font-weight: 500; color: var(--ink); transition: color .15s; }
.wb-nav a:hover, .wb-nav .current-menu-item > a { color: var(--coral); }
.wb-header__cta { display: flex; align-items: center; gap: 14px; }
.wb-burger { display: none; background: none; border: 0; cursor: pointer; flex-direction: column; gap: 5px; padding: 8px; }
.wb-burger span { width: 26px; height: 2px; background: var(--ink); border-radius: 2px; }

/* ---- секции ---- */
.wb-section { padding: clamp(56px, 8vw, 110px) 0; }
.wb-section--soft { background: var(--bg-soft); }
.wb-section--dark { background: var(--ink); color: #fff; }
.wb-section--dark h1, .wb-section--dark h2, .wb-section--dark h3 { color: #fff; }
.wb-section--dark .lead { color: rgba(255,255,255,.75); }
.wb-section__head { text-align: center; max-width: 720px; margin-inline: auto; margin-bottom: 56px; }
/* читаемая колонка для текстовых блоков (без буллетов) */
.wb-prose { max-width: 820px; margin-inline: auto; }
.wb-prose .lead { margin-bottom: 1.1em; }
.wb-prose > p:last-child { margin-bottom: 0; }
/* когда head стоит прямо перед текстовой колонкой — заголовок к тексту вплотную (как на payments) */
.wb-section__head:has(+ .wb-prose) { margin-bottom: 0; }
/* 2 колонки: текст (inline-start) + иллюстрация */
.wb-split2 { display: grid; grid-template-columns: 1.35fr .9fr; gap: clamp(28px, 4vw, 56px); align-items: center; margin-top: clamp(20px, 2.5vw, 32px); }
.wb-split2__text > p { margin: 0 0 1.1em; }
.wb-split2__text > p:last-child { margin-bottom: 0; }
.wb-split2__media img { width: 100%; height: auto; max-width: 380px; display: block; margin-inline: auto; }
.wb-split2__media--wide img { max-width: 520px; }
@media (max-width: 860px) { .wb-split2 { grid-template-columns: 1fr; gap: 28px; } }

/* ---- hero ---- */
.wb-hero {
	background: radial-gradient(120% 120% at 80% 0%, var(--slate) 0%, var(--ink) 55%);
	color: #fff;
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	overflow: hidden;
	position: relative;
}
.wb-hero__grid {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	align-items: center;
	gap: 48px;
	padding-block: clamp(48px, 7vw, 96px) clamp(56px, 8vw, 104px);
}
.wb-hero h1 { color: #fff; }
.wb-hero .lead { color: rgba(255,255,255,.8); max-width: 34ch; }
.wb-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; align-items: center; }
.wb-hero__art {
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-lg);
	background: linear-gradient(135deg, var(--sky), var(--coral));
	display: grid; place-items: center;
	box-shadow: var(--shadow-lg);
	position: relative;
}
.wb-hero__art .wb-blob { font-size: clamp(5rem, 14vw, 9rem); font-weight: 800; color: #fff; opacity: .95; }
.wb-hero__chip {
	position: absolute; background: #fff; color: var(--ink); font-weight: 600;
	padding: 10px 18px; border-radius: var(--radius-pill); box-shadow: var(--shadow-md); font-size: .92rem;
}
.wb-hero__chip--1 { top: 14%; inset-inline-start: -6%; }
.wb-hero__chip--2 { bottom: 16%; inset-inline-end: -4%; }

/* ---- карточки услуг ---- */
.wb-grid { display: grid; gap: 26px; }
.wb-grid--3 { grid-template-columns: repeat(3, 1fr); }
.wb-grid--2 { grid-template-columns: repeat(2, 1fr); }
.wb-grid--4 { grid-template-columns: repeat(4, 1fr); }

.wb-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 34px;
	transition: transform .2s ease, box-shadow .2s ease;
	height: 100%;
	box-sizing: border-box;
}
.wb-card:not(.wb-step) { box-shadow: var(--shadow-sm); }
.wb-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.wb-card__icon {
	width: 60px; height: 60px; border-radius: var(--radius-md);
	display: grid; place-items: center; font-size: 1.6rem; margin-bottom: 22px;
	background: var(--bg-soft); color: var(--coral);
}
.wb-card__icon--sky  { background: rgba(79,173,225,.15); color: var(--sky); }
.wb-card__icon--lime { background: rgba(200,226,76,.22); color: #7f9417; }
.wb-card__icon--coral{ background: rgba(237,67,100,.12); color: var(--coral); }
.wb-card h3 { margin-bottom: .4em; }
.wb-card p { color: var(--muted); margin-bottom: 0; }
.wb-card__num { font-size: 2.2rem; font-weight: 800; color: var(--line); line-height: 1; margin-bottom: 14px; }

/* карточки сравнения с цветной шапкой (градиент до заголовка) + графика сверху */
.wb-card--head { padding: 0; overflow: hidden; }
.wb-card--head .wb-card__head { position: relative; min-height: 0; padding: 22px 28px; display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 18px; }
.wb-card--head .wb-card__head h3 { color: #fff; margin: 0; position: relative; z-index: 2; text-align: right; }
.wb-card__en { display: block; direction: ltr; text-align: right; font-size: 1.05rem; font-weight: 700; letter-spacing: .01em; text-transform: uppercase; opacity: .92; margin-bottom: 4px; }
.wb-card--head-web .wb-card__head { background: var(--grad-brand); }
.wb-card--head-native .wb-card__head { background: var(--grad-warm); }
.wb-card__art { position: relative; z-index: 1; flex: 0 0 auto; display: flex; pointer-events: none; }
.wb-card__art svg { height: 78px; width: auto; filter: drop-shadow(0 8px 16px rgba(44,53,93,.22)); }
.wb-card--head .wb-card__body { padding: 22px 30px 28px; }
.wb-card--head .wb-checks, .wb-card--head .wb-crosses { margin-top: 0; }

/* карточка с тематической иллюстрацией: график крупным баннером сверху, текст под ним
   (графика и текст разнесены — без наложения) */
.wb-card--illus { display: flex; flex-direction: column; overflow: hidden; padding-top: 14px; padding-bottom: 18px; }
.wb-card--illus .wb-card__illus { width: 100%; height: clamp(150px, 16vw, 185px);
	object-fit: contain; object-position: center; margin-bottom: 20px; opacity: .92; pointer-events: none; }

/* цветные «игривые» карточки */
.wb-tile { border-radius: var(--radius-lg); padding: 34px; color: #fff; height: 100%; box-sizing: border-box; }
.wb-tile--coral { background: var(--coral); }
.wb-tile--sky   { background: var(--sky); }
.wb-tile--lime  { background: var(--lime); color: var(--ink); }
.wb-tile--ink   { background: var(--ink); }
.wb-tile h3 { color: inherit; }
.wb-tile p { color: inherit; opacity: .9; margin-bottom: 0; }

/* плашка-призыв в блоке поддержки: текст + кнопка в ряд */
.wb-support-cta { display: flex; align-items: center; justify-content: space-between; gap: clamp(24px, 4vw, 52px); }
.wb-support-cta > div:first-child { flex: 1; }
.wb-support-cta__btn { flex-shrink: 0; }
@media (max-width: 760px) { .wb-support-cta { flex-direction: column; align-items: flex-start; } }

/* карточки секции «מאובטח מהיסוד»: анимированная графика-иконка сверху,
   под ней текст исходного размера. Карточки выше, графика на всю ширину. */
.wb-tile--split { display: flex; flex-direction: column; gap: 18px; }
.wb-tile--split .wb-tile__media { order: -1; }
.wb-tile--split .wb-tile__media img { display: block; width: 100%; height: auto; max-height: 180px; object-fit: contain; }
/* тёмный текст (как в lime-карточке) на sky; coral остаётся с белым текстом */
.wb-tile--split.wb-tile--sky { color: var(--ink); }
/* תקן מלא (coral) — по центру (RTL: меньший order правее) */
.wb-tile--split.wb-tile--sky { order: 1; }
.wb-tile--split.wb-tile--coral { order: 2; }
.wb-tile--split.wb-tile--lime { order: 3; }
/* мобайл: ряд 1 — תקן מלא (слева) + הגנה מהונאות (справа); ряд 2 — מאובטח ותקני на всю ширину */
@media (max-width: 680px) {
	.wb-grid--3.wb-secure-grid { grid-template-columns: 1fr 1fr; }
	.wb-secure-grid > .wb-tile--split.wb-tile--lime { order: 1; }
	.wb-secure-grid > .wb-tile--split.wb-tile--sky { order: 2; }
	.wb-secure-grid > .wb-tile--split.wb-tile--coral { order: 3; grid-column: 1 / -1; }
}

/* ---- чередующиеся блоки ---- */
.wb-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.wb-split + .wb-split { margin-top: clamp(48px, 7vw, 96px); }
.wb-split__media {
	border-radius: var(--radius-lg); min-height: 320px;
	background: linear-gradient(135deg, var(--bg-soft-2), #fff);
	border: 1px solid var(--line);
	display: grid; place-items: center; font-size: 4rem;
}
.wb-split--rev .wb-split__media { order: 2; }

/* список с галочками */
.wb-checks { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; }
.wb-checks li { position: relative; padding-inline-start: 34px; }
.wb-checks li::before {
	content: "✓"; position: absolute; inset-inline-start: 0; top: 0;
	width: 22px; height: 22px; border-radius: 50%; background: var(--lime); color: var(--ink);
	display: grid; place-items: center; font-size: .8rem; font-weight: 700;
}

/* ---- статистика ---- */
.wb-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.wb-stat__num { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; color: var(--coral); }
.wb-stat__label { color: var(--muted); font-weight: 500; }
.wb-section--dark .wb-stat__label { color: rgba(255,255,255,.7); }

/* ---- логотипы клиентов ---- */
.wb-logos { display: flex; flex-wrap: wrap; gap: 40px; justify-content: center; align-items: center; opacity: .55; }
.wb-logos span { font-weight: 800; font-size: 1.3rem; color: var(--ink); }

/* ---- CTA-полоса ---- */
.wb-cta {
	background: radial-gradient(130% 130% at 0% 0%, var(--coral), #c9325a 60%, #a8214a);
	color: #fff; border-radius: var(--radius-lg); padding: clamp(40px, 6vw, 72px);
	text-align: center;
}
.wb-cta h2 { color: #fff; }
.wb-cta .lead { color: rgba(255,255,255,.9); margin-bottom: 28px; }

/* ---- FAQ ---- */
.wb-faq { max-width: 820px; margin-inline: auto; }
.wb-faq__item { border-bottom: 1px solid var(--line); padding: 22px 0; }
.wb-faq__q { font-weight: 600; font-size: 1.1rem; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; list-style: none; }
.wb-faq__q::-webkit-details-marker { display: none; }
.wb-faq__item[open] .wb-faq__q { color: var(--coral); }
.wb-faq__a { color: var(--muted); padding-top: 12px; }

/* ---- форма ---- */
/* Astra (инлайн-CSS темы) жмёт input/select в жёсткие height:40px — с нашими
   паддингами 12–14px текст обрезается снизу. Возвращаем высоту от контента;
   main.css грузится после инлайна Astra, при равной специфичности побеждаем. */
input[type="text"], input[type="number"], input[type="email"], input[type="url"],
input[type="password"], input[type="tel"], input[type="search"], input[type="date"],
select { height: auto; }
.wb-form { display: grid; gap: 18px; max-width: 560px; }
.wb-form label { font-weight: 500; margin-bottom: 6px; display: block; }
.wb-form input, .wb-form textarea {
	width: 100%; box-sizing: border-box; font-family: var(--font); font-size: 1rem;
	padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff;
}
.wb-form input:focus, .wb-form textarea:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 4px rgba(237,67,100,.12); }

/* ---- футер ---- */
/* приподнят на радиус, чтобы вырезы скруглённых углов открывали цвет секции
   НАД футером (а не белый body) — какой бы секция ни была. См. гоч в CLAUDE.md. */
.wb-footer { background: var(--ink); color: rgba(255,255,255,.75); padding: calc(72px + var(--radius-lg)) 0 32px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; position: relative; margin-top: calc(var(--radius-lg) * -1); }
.wb-footer a { color: rgba(255,255,255,.75); transition: color .15s; }
.wb-footer a:hover { color: #fff; }
.wb-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
.wb-footer h4 { color: #fff; font-size: 1rem; margin-bottom: 16px; }
.wb-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.wb-footer__bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: .9rem; }

/* ---- адаптив ---- */
@media (max-width: 980px) {
	.wb-hero__grid { grid-template-columns: 1fr; }
	.wb-hero__art { max-width: 360px; }
	.wb-split { grid-template-columns: 1fr; gap: 28px; }
	.wb-split--rev .wb-split__media { order: 0; }
	.wb-grid--3, .wb-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.wb-stats { grid-template-columns: repeat(2, 1fr); }
	.wb-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
	.wb-nav { display: none; }
	.wb-burger { display: flex; }
	.wb-header__inner { height: 64px; gap: 12px; }
	.wb-header__cta .wb-btn { padding: 10px 18px; font-size: .9rem; } /* компактнее, чтобы влезла в шапку */
	/* RTL: кнопка справа, лого по центру, бургер слева */
	.wb-header__cta { order: 1; }
	.wb-logo { order: 2; flex: 1 1 auto; justify-content: center; }
	.wb-burger { order: 3; }
	.wb-grid--3, .wb-grid--4, .wb-grid--2 { grid-template-columns: 1fr; }
	.wb-grid--m2 { grid-template-columns: repeat(2, 1fr); gap: 14px; } /* держим 2×2 на мобиле (прайс) */
	.wb-logos { gap: 24px; }
	.wb-footer__grid { grid-template-columns: 1fr; }
	body.webbiz { font-size: 17px; }
}

/* мобильное меню (открывается по бургеру) */
.wb-mobile-nav { display: none; }
.wb-mobile-nav.is-open { display: block; padding: 16px 0 24px; border-top: 1px solid var(--line); }
.wb-mobile-nav a { display: block; padding: 12px 0; font-weight: 500; border-bottom: 1px solid var(--bg-soft); }

/* =========================================================================
   РАСШИРЕНИЕ ДИЗАЙНА — больше виджетов и разнообразия
   (вдохновлено hellohumans.agency + pickpackage.com)
   ========================================================================= */

/* ---- дисплейная типографика (oversized, как hellohumans) ---- */
.wb-display { font-size: clamp(2.6rem, 7.2vw, 5.4rem); font-weight: 800; line-height: 1.03; letter-spacing: -.025em; }
.wb-statement { font-size: clamp(2.4rem, 9vw, 7rem); font-weight: 800; line-height: .98; letter-spacing: -.03em; }

/* тонкие/светлые варианты для контрастных секций */
.wb-thin { font-weight: 300; }

/* ---- градиентный анонс-бар сверху (hellohumans) ---- */
.wb-announce { background: var(--grad-rainbow); color: #fff; text-align: center; font-weight: 500; font-size: .95rem; padding: 11px 18px; }
.wb-announce a { color: #fff; }
.wb-announce a:hover { text-decoration: underline; }

/* ---- секции: тёплая и почти-чёрная ---- */
.wb-section--cream { background: var(--cream); }
.wb-section--noir { background: var(--noir); color: #fff; }
.wb-section--noir h1, .wb-section--noir h2, .wb-section--noir h3 { color: #fff; }
.wb-section--noir .lead { color: rgba(255,255,255,.72); }

/* ---- градиентный разделитель ---- */
.wb-divider { height: 3px; border: 0; border-radius: 99px; background: var(--grad-rainbow); opacity: .9; margin: 0; }

/* ---- градиентный текст ---- */
.wb-grad-text { background: var(--grad-warm); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- градиентные геометрические фигуры (hellohumans) ---- */
.wb-blob-shape {
	background: var(--grad-brand);
	border-radius: 42% 58% 60% 40% / 45% 45% 55% 55%;
	animation: wb-morph 12s ease-in-out infinite;
}
@keyframes wb-morph {
	0%,100% { border-radius: 42% 58% 60% 40% / 45% 45% 55% 55%; }
	50% { border-radius: 58% 42% 38% 62% / 55% 60% 40% 45%; }
}
.wb-clover { position: relative; width: clamp(90px, 12vw, 150px); aspect-ratio: 1; }
.wb-clover::before, .wb-clover::after {
	content: ""; position: absolute; inset: 0; background: var(--grad-brand);
	border-radius: 50% 50% 50% 0;
}
.wb-clover::after { transform: rotate(90deg); opacity: .85; }

/* ---- плавающий коллаж дашборд-карточек (pickpackage) ---- */
.wb-mock { position: relative; aspect-ratio: 1 / 1; }
.wb-mock__panel {
	position: absolute; inset: 8% 6%; border-radius: var(--radius-lg);
	background: linear-gradient(160deg, #eef3fb, #fff); border: 1px solid var(--line);
	box-shadow: var(--shadow-lg); overflow: hidden;
}
.wb-mock__panel::after {
	content: ""; position: absolute; inset: 0;
	background:
		repeating-linear-gradient(0deg, rgba(44,53,93,.05) 0 1px, transparent 1px 28px),
		repeating-linear-gradient(90deg, rgba(44,53,93,.05) 0 1px, transparent 1px 28px);
}
.wb-mock__card {
	position: absolute; background: #fff; border-radius: var(--radius-md);
	box-shadow: var(--shadow-md); padding: 16px 18px; display: grid; gap: 6px;
}
.wb-mock__card .k { font-size: .8rem; color: var(--muted); font-weight: 500; }
.wb-mock__card .v { font-size: 1.7rem; font-weight: 800; color: var(--ink); line-height: 1; }
.wb-mock__card .v small { font-size: .8rem; font-weight: 500; color: var(--muted); }
.wb-mock__card--1 { top: 6%; inset-inline-start: -4%; transform: rotate(-4deg); }
.wb-mock__card--2 { bottom: 10%; inset-inline-end: -6%; transform: rotate(3deg); }
.wb-mock__card--3 { bottom: 26%; inset-inline-start: 2%; }
.wb-donut {
	width: 84px; aspect-ratio: 1; border-radius: 50%;
	background: conic-gradient(var(--sky) 0 37%, var(--coral) 37% 61%, var(--lime) 61% 100%);
	display: grid; place-items: center;
}
.wb-donut::after { content: ""; width: 52%; aspect-ratio: 1; background: #fff; border-radius: 50%; }
.wb-spark { display: flex; align-items: flex-end; gap: 5px; height: 40px; }
.wb-spark i { width: 8px; border-radius: 3px; background: var(--grad-brand); }

/* ---- градиентный баннер со статистикой (pickpackage) ---- */
.wb-banner {
	background: linear-gradient(110deg, var(--coral) 0%, #b5294f 40%, var(--ink) 100%);
	border-radius: var(--radius-lg); color: #fff; padding: clamp(28px, 4vw, 44px);
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 28px;
	box-shadow: var(--shadow-lg);
}
.wb-banner h3 { color: #fff; margin: 0; }
.wb-banner__stats { display: flex; gap: 36px; }
.wb-banner__num { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; color: var(--lime); line-height: 1; }
.wb-banner__lbl { font-size: .9rem; opacity: .85; }
.wb-badges { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; font-size: .9rem; opacity: .9; }
.wb-badges span::before { content: "● "; color: var(--lime); }

/* ---- бегущая лента логотипов (marquee) ---- */
.wb-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.wb-marquee__track { display: flex; gap: 64px; width: max-content; animation: wb-marquee 30s linear infinite; }
.wb-marquee:hover .wb-marquee__track { animation-play-state: paused; }
.wb-marquee span { font-weight: 800; font-size: 1.5rem; color: var(--ink); opacity: .4; white-space: nowrap; }
@keyframes wb-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- фича с цветной подложкой за медиа (pickpackage) ---- */
.wb-feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 72px); align-items: center; }
.wb-feature + .wb-feature { margin-top: clamp(56px, 8vw, 110px); }
.wb-feature__media { position: relative; }
.wb-feature__media > .box {
	position: relative; z-index: 1; border-radius: var(--radius-lg); min-height: 300px;
	background: linear-gradient(160deg, #fff, var(--bg-soft-2)); border: 1px solid var(--line);
	display: grid; place-items: center; font-size: 4.4rem; box-shadow: var(--shadow-md);
}
.wb-feature__media::before {
	content: ""; position: absolute; z-index: 0; inset-block: 26px -22px; inset-inline: -22px 26px;
	border-radius: var(--radius-lg); background: var(--sky); opacity: .9;
}
.wb-feature--coral .wb-feature__media::before { background: var(--coral); }
.wb-feature--lime  .wb-feature__media::before { background: var(--lime); }
.wb-feature--bare .wb-feature__media::before { display: none; }
.wb-feature--rev .wb-feature__media { order: 2; }
/* картинка справа, текст слева (RTL): двигаем текстовую колонку в конец */
.wb-feature--flip > :first-child { order: 2; }
/* подложка во всю высоту текстовой колонки + графика по центру по вертикали */
.wb-feature--fill { align-items: stretch; }
.wb-feature--fill .wb-feature__media { display: flex; align-items: center; }
.wb-feature__icon { width: 56px; height: 56px; border-radius: var(--radius-md); display: grid; place-items: center; font-size: 1.5rem; background: var(--bg-soft); margin-bottom: 18px; }
.wb-feature__sub { font-weight: 700; color: var(--ink); margin-bottom: 10px; }

/* блок «כל אמצעי התשלום»: способы оплаты слева + большая графика-карточка (тёмная) справа */
.wb-payfeature { align-items: stretch; }
.wb-paymedia { background: linear-gradient(135deg, var(--coral), var(--amber)); border-radius: var(--radius-lg); padding: clamp(20px, 3vw, 40px); display: grid; place-items: center; box-shadow: var(--shadow-md); }
.wb-paymedia img { display: block; width: 100%; height: auto; }
.wb-paycol { display: grid; gap: clamp(20px, 3vw, 30px); align-content: center; }
.wb-payhead .lead { margin-bottom: 0; }
.wb-paylist { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* мобайл: 2 в ряд, горизонтально (логотип слева, название+описание справа), компактнее */
@media (max-width: 560px) {
	.wb-paycard { gap: 10px; padding: 16px 12px; }
	.wb-paycard .wb-card__icon { width: 44px; height: 44px; }
	.wb-paycard .wb-card__icon svg { width: 28px; height: 28px; }
	.wb-paycard h3 { font-size: 1rem; }
	.wb-paycard p { font-size: .8rem; }
}
/* способ оплаты: название (крупнее) справа, иконка (чуть больше) слева. RTL: текст-первый-потомок справа */
.wb-paycard { display: flex; align-items: center; gap: 16px; text-align: start; padding: 20px 18px; }
.wb-paycard__txt { flex: 1 1 auto; min-width: 0; }
/* белый чип с настоящим логотипом платёжной системы */
.wb-paycard .wb-card__icon { flex: 0 0 auto; width: 56px; height: 56px; margin: 0; background: #fff; border: 1px solid var(--line); }
.wb-paycard .wb-card__icon svg { width: 38px; height: 38px; }
.wb-paycard h3 { font-size: 1.3rem; margin-bottom: .2em; }
.wb-paycard p { font-size: .88rem; line-height: 1.45; margin: 0; }

/* ---- большие цветные плитки с асимметричными углами (pickpackage) ---- */
.wb-tile { border-radius: 0 36px 36px 36px; }
.wb-tile__link { display: inline-block; margin-top: 16px; font-weight: 700; }

/* ---- сетка работ / портфолио (hellohumans) ---- */
.wb-work { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.wb-work__item {
	position: relative; border-radius: var(--radius-lg); aspect-ratio: 4 / 3; overflow: hidden;
	display: flex; align-items: flex-end; padding: 26px; color: #fff; font-weight: 700; font-size: 1.2rem;
	transition: transform .25s ease; isolation: isolate;
}
.wb-work__item::before { content: ""; position: absolute; inset: 0; z-index: -1; transition: transform .4s ease; }
.wb-work__item:hover { transform: translateY(-6px); }
.wb-work__item:hover::before { transform: scale(1.08); }
.wb-work__item:nth-child(1)::before { background: linear-gradient(135deg, var(--violet), var(--sky)); }
.wb-work__item:nth-child(2)::before { background: linear-gradient(135deg, var(--coral), var(--amber)); }
.wb-work__item:nth-child(3)::before { background: linear-gradient(135deg, var(--sky), var(--lime)); }
.wb-work__item:nth-child(4)::before { background: linear-gradient(135deg, var(--ink), var(--violet)); }
.wb-work__item:nth-child(5)::before { background: linear-gradient(135deg, var(--lime), var(--sky)); }
.wb-work__item:nth-child(6)::before { background: linear-gradient(135deg, var(--amber), var(--coral)); }
.wb-work__tag { position: absolute; top: 18px; inset-inline-start: 18px; background: rgba(255,255,255,.22); backdrop-filter: blur(4px); padding: 5px 14px; border-radius: var(--radius-pill); font-size: .8rem; font-weight: 600; }

/* ---- карусель отзывов (pickpackage) ---- */
.wb-quotes { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: none; }
.wb-quotes::-webkit-scrollbar { display: none; }
.wb-quote {
	flex: 0 0 min(440px, 86%); scroll-snap-align: start; background: #fff; border: 1px solid var(--line);
	border-radius: var(--radius-lg); padding: 34px; box-sizing: border-box;
}
.wb-quote__stars { color: var(--amber); margin-bottom: 14px; }
.wb-quote p { font-size: 1.12rem; color: var(--ink); }
.wb-quote__author { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.wb-quote__avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--grad-brand); flex: 0 0 auto; }
.wb-quote__name { font-weight: 700; }
.wb-quote__role { color: var(--muted); font-size: .9rem; }

/* ---- декоративные плавающие точки ---- */
.wb-dots { display: grid; grid-template-columns: repeat(3, 6px); gap: 10px; }
.wb-dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .4; }

@media (max-width: 980px) {
	.wb-feature { grid-template-columns: 1fr; }
	.wb-feature--rev .wb-feature__media { order: 0; }
	.wb-feature--flip > :first-child { order: 0; }
	.wb-work { grid-template-columns: repeat(2, 1fr); }
	.wb-banner { flex-direction: column; align-items: flex-start; }
	.wb-banner__stats { gap: 28px; }
}
@media (max-width: 680px) {
	.wb-work { grid-template-columns: 1fr; }
	.wb-banner__stats { flex-wrap: wrap; gap: 20px; }
}

/* =========================================================================
   ГРАФИКА: иконки, иллюстрации, лого, декоративные паттерны
   ========================================================================= */

/* лого-лок */
.wb-logo { display: inline-flex; align-items: center; gap: 11px; }
.wb-logo__mark { width: 40px; height: 40px; border-radius: 12px; display: block; box-shadow: var(--shadow-sm); }
.wb-logo__text { line-height: 1; }

/* инлайн-иконки (stroke = currentColor) */
.wb-ic { width: 24px; height: 24px; display: inline-block; vertical-align: middle; }
.wb-card__icon .wb-ic, .wb-feature__icon .wb-ic { width: 28px; height: 28px; }
.wb-card__icon svg { width: 28px; height: 28px; }
.wb-feature__icon svg { width: 26px; height: 26px; color: var(--ink); }
.wb-feature__icon--solid svg { color: #fff; } /* цветной/градиентный чип → белая иконка */
.wb-card__icon { color: var(--coral); }
.wb-card__icon--sky { color: var(--sky); }
.wb-card__icon--lime { color: #7f9417; }
.wb-card__icon--coral { color: var(--coral); }
/* иконка-стрелка в ссылках «לפרטים» */
.wb-ilink { display: inline-flex; align-items: center; gap: 6px; color: var(--coral); font-weight: 700; }
.wb-ilink .wb-ic { width: 18px; height: 18px; }

/* hero-иллюстрация (SVG дашборд) */
.wb-hero__illus { width: 100%; max-width: 560px; margin-inline: auto; display: block; filter: drop-shadow(0 30px 50px rgba(0,0,0,.25)); }

/* иллюстрации в фичах — лежат поверх цветной подложки */
.wb-illus { position: relative; z-index: 1; width: 100%; display: block; }
.wb-feature__media:has(.wb-illus)::before { inset-block: 18px -16px; inset-inline: -16px 18px; opacity: .85; }

/* бейджи/логотипы над картинкой в верхних фичах (кремовая секция → светлая тема) */
.wb-feature__badges { margin: 0 0 24px; }
.wb-feature__badges.wb-hero__pills,
.wb-feature__badges.wb-paychips { justify-content: flex-start; }
.wb-feature__media .wb-hero__pill,
.wb-feature__media .wb-paychips li {
	background: #fff; border-color: var(--line); color: var(--ink);
	box-shadow: 0 4px 14px rgba(44,53,93,.06);
}
.wb-feature__media .wb-paychip__ic { box-shadow: inset 0 0 0 1px var(--line); }
.wb-feature__media .wb-techlogos { margin: 0 0 24px; justify-content: flex-start; }
.wb-feature__media .wb-techtile > span { color: var(--ink); }
/* на мобиле колонка во всю ширину — убираем горизонтальный сдвиг подложки, иначе она «съезжает» вправо */
@media (max-width: 980px) {
	.wb-feature__media::before,
	.wb-feature__media:has(.wb-illus)::before { inset-inline: 0; }
}

/* точечный паттерн (декор) */
.wb-pattern-dots {
	background-image: radial-gradient(currentColor 1.4px, transparent 1.4px);
	background-size: 18px 18px;
}

/* мягкая сетка для тёмных секций */
.wb-hero { background-image:
	radial-gradient(120% 120% at 80% 0%, var(--slate) 0%, var(--ink) 55%),
	radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
	background-size: cover, 22px 22px;
}

/* декоративный градиентный блоб как фон-акцент секции */
.wb-deco { position: relative; overflow: hidden; }
.wb-deco__blob {
	position: absolute; z-index: 0; width: 420px; aspect-ratio: 1; filter: blur(8px);
	background: var(--grad-brand); opacity: .14;
	border-radius: 42% 58% 60% 40% / 45% 45% 55% 55%;
	animation: wb-morph 14s ease-in-out infinite; pointer-events: none;
}
.wb-deco > .wb-container { position: relative; z-index: 1; }

/* картинки портфолио поверх градиента */
.wb-work__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }

/* аватар в отзывах — поверх можно положить img */
.wb-quote__avatar { overflow: hidden; }
.wb-quote__avatar img { width: 100%; height: 100%; object-fit: cover; }

/* лого-текст: web (navy) + biz (coral) — перебиваем общий .wb-logo span */
.wb-logo .wb-logo__text { color: var(--ink); font-weight: 800; font-size: 1.5rem; }
.wb-logo .wb-logo__text > span { color: var(--coral); }
.wb-footer .wb-logo .wb-logo__text { color: #fff; }

/* крупная иконка в hero контактов */
.wb-hero__icon .wb-ic { width: clamp(80px, 16vw, 130px); height: clamp(80px, 16vw, 130px); stroke-width: 1.4; }

/* =========================================================================
   АНИМАЦИИ + секция-платформа (вдохновлено pickpackage)
   ========================================================================= */

/* мягкое «парение» */
@keyframes wb-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
.wb-anim-float { animation: wb-float 4.2s ease-in-out infinite; }
.wb-anim-float--slow { animation: wb-float 5.5s ease-in-out infinite; }
.wb-anim-float--rev { animation: wb-float 4.6s ease-in-out infinite reverse; }

/* «дышащий» градиент (для CTA/баннера) */
@keyframes wb-grad-move { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.wb-anim-grad { background-size: 200% 200%; animation: wb-grad-move 9s ease infinite; }

/* плавный «прилёт» подчёркивания-мазка */
@keyframes wb-underline-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.wb-underline::after { transform-origin: right; }
[data-reveal].is-revealed .wb-underline::after { animation: wb-underline-in .7s .25s ease both; }

/* hover-tilt для карточек */
.wb-card, .wb-work__item, .wb-tile { will-change: transform; }
.wb-card:hover { transform: translateY(-6px) rotate(-.4deg); }

/* пульс у точки-индикатора «реал-тайм» */
@keyframes wb-pulse { 0% { box-shadow: 0 0 0 0 rgba(200,226,76,.6); } 70% { box-shadow: 0 0 0 12px rgba(200,226,76,0); } 100% { box-shadow: 0 0 0 0 rgba(200,226,76,0); } }
.wb-live-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--lime); animation: wb-pulse 2s infinite; vertical-align: middle; margin-inline-end: 8px; }

/* count-up число — моноширинные цифры, чтобы не «прыгало» */
.wb-banner__num, .wb-stat__num { font-variant-numeric: tabular-nums; }

/* stagger: задержки появления для детей грида (через JS добавляется --i) */
[data-stagger] > * { transition-delay: calc(var(--i, 0) * 80ms); }

/* ---- секция-платформа (тёмная, с изо-иллюстрацией) ---- */
.wb-platform { background: radial-gradient(120% 120% at 70% 10%, #1b2748 0%, var(--noir) 60%); color: #fff; overflow: hidden; position: relative; }
.wb-platform h2, .wb-platform h3 { color: #fff; }
.wb-platform .lead { color: rgba(255,255,255,.72); }
.wb-platform__grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.wb-platform__art { position: relative; }
.wb-platform__art img { width: 100%; display: block; }
.wb-platform__list { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 16px; }
.wb-platform__list li { display: flex; gap: 14px; align-items: flex-start; }
.wb-platform__list .ic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.08); color: var(--sky); }
.wb-platform__list .ic .wb-ic { width: 22px; height: 22px; }
.wb-platform__list b { display: block; color: #fff; font-weight: 600; }
.wb-platform__list span { color: rgba(255,255,255,.66); font-size: .98rem; }

/* топографический фон для тёмных секций */
.wb-topo::before {
	content: ""; position: absolute; inset: 0; z-index: 0; opacity: .5; pointer-events: none;
	background-image:
		radial-gradient(circle at 20% 30%, transparent 60px, rgba(255,255,255,.025) 61px 62px, transparent 63px),
		radial-gradient(circle at 75% 65%, transparent 90px, rgba(255,255,255,.02) 91px 92px, transparent 93px);
}

/* prefers-reduced-motion — уважаем настройку пользователя */
@media (prefers-reduced-motion: reduce) {
	.wb-anim-float, .wb-anim-float--slow, .wb-anim-float--rev, .wb-anim-grad, .wb-live-dot { animation: none !important; }
	html { scroll-behavior: auto; }
}

@media (max-width: 980px) {
	.wb-platform__grid { grid-template-columns: 1fr; }
}

/* ---- прайс-карточки ---- */
.wb-card--featured { border-color: var(--coral); box-shadow: 0 20px 50px rgba(237,67,100,.18); position: relative; }
.wb-card__badge { position: absolute; top: -13px; inset-inline-start: 28px; background: var(--coral); color: #fff; font-size: .78rem; font-weight: 700; padding: 5px 14px; border-radius: var(--radius-pill); }
.wb-price { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; color: var(--ink); margin: 6px 0 4px; line-height: 1.1; }
.wb-price small { font-size: .92rem; font-weight: 500; color: var(--muted); }
.wb-price__from { font-size: .85rem; color: var(--muted); font-weight: 500; }
.wb-card .wb-checks { margin-top: 16px; }

/* =========================================================================
   FAQ-аккордеон в стиле hellohumans (геом. фигуры + bordered rows)
   ========================================================================= */
.wb-faq2 {
	background:
		radial-gradient(60% 80% at 14% 18%, rgba(123, 97, 255, .34), transparent 62%),
		radial-gradient(55% 72% at 88% 12%, rgba(244, 162, 92, .30), transparent 60%),
		radial-gradient(75% 85% at 78% 102%, rgba(79, 200, 150, .32), transparent 60%),
		radial-gradient(60% 70% at 22% 100%, rgba(160, 225, 195, .30), transparent 62%),
		linear-gradient(135deg, #efe9fb 0%, #f5efe6 50%, #e9f4ec 100%);
}
.wb-faq2__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.wb-faq2__art { display: grid; place-items: center; }
.wb-faq2__art img { width: 100%; max-width: 380px; }
.wb-faq2 h2 { margin-bottom: 56px; }

.wb-accordion { display: grid; gap: 16px; }
.wb-acc { border: 1.5px solid rgba(44,53,93,.18); border-radius: var(--radius-md); background: rgba(255,255,255,.35); transition: border-color .2s, background .2s; overflow: hidden; }
.wb-acc[open] { border-color: var(--ink); background: rgba(255,255,255,.6); }
.wb-acc__q { display: flex; align-items: center; justify-content: space-between; gap: 18px; cursor: pointer; list-style: none; padding: 22px 26px; font-size: clamp(1.05rem, 1.6vw, 1.35rem); font-weight: 600; color: var(--ink); }
.wb-acc__q::-webkit-details-marker { display: none; }
.wb-acc__plus { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid rgba(44,53,93,.3); display: grid; place-items: center; position: relative; transition: transform .25s, border-color .2s, background .2s; }
.wb-acc__plus::before, .wb-acc__plus::after { content: ""; position: absolute; background: var(--ink); border-radius: 2px; }
.wb-acc__plus::before { width: 12px; height: 2px; }
.wb-acc__plus::after { width: 2px; height: 12px; transition: transform .25s; }
.wb-acc[open] .wb-acc__plus { background: var(--coral); border-color: var(--coral); transform: rotate(180deg); }
.wb-acc[open] .wb-acc__plus::before, .wb-acc[open] .wb-acc__plus::after { background: #fff; }
.wb-acc[open] .wb-acc__plus::after { transform: scaleY(0); }
.wb-acc__a { padding: 0 26px 24px; color: var(--muted); font-size: 1.02rem; max-width: 60ch; }

@media (max-width: 980px) { .wb-faq2__grid { grid-template-columns: 1fr; } .wb-faq2__art { order: 2; } }

/* ---- текстовые/юридические страницы ---- */
.wb-prose { max-width: 820px; margin-inline: auto; }
.wb-prose h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-top: 1.8em; }
.wb-prose h2:first-child { margin-top: 0; }
.wb-prose p, .wb-prose li { color: #495066; font-size: 1.05rem; }
.wb-prose ul { padding-inline-start: 22px; display: grid; gap: 8px; margin: 0 0 1.1em; }
.wb-prose a { color: var(--coral); font-weight: 600; }
.wb-prose__updated { color: var(--muted); font-size: .95rem; margin-bottom: 2em; }
.wb-page-hero { background: var(--bg-soft); padding: clamp(48px,7vw,90px) 0 clamp(32px,4vw,56px); border-bottom: 1px solid var(--line); text-align: center; }
.wb-page-hero h1 { margin: 0; }
/* футер: юридические ссылки */
.wb-footer__legal { display: flex; gap: 18px; flex-wrap: wrap; }

/* ---- чипы способов оплаты (на тёмном hero) ---- */
.wb-paychips { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.wb-paychips li { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); color: #fff; padding: 6px 16px 6px 8px; border-radius: var(--radius-pill); font-size: .92rem; font-weight: 500; white-space: nowrap; }
.wb-paychip__ic { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: #fff; }
.wb-paychip__ic svg { width: 17px; height: 17px; display: block; }

/* =========================================================================
   Активная страница в меню + hover-подсветка в сэндвиче
   ========================================================================= */
/* десктоп: активный пункт — коралл + подчёркивание-индикатор */
.wb-nav a { position: relative; }
.wb-nav a.is-active { color: var(--coral); }
.wb-nav a.is-active::after {
	content: ""; position: absolute; bottom: -8px; inset-inline: 0;
	height: 3px; border-radius: 99px; background: var(--coral);
}

/* мобильное меню: подсветка строки при наведении + активная страница */
.wb-mobile-nav a {
	padding: 13px 14px; border-radius: 12px; border-bottom: 1px solid var(--bg-soft);
	transition: background .15s ease, color .15s ease;
}
.wb-mobile-nav a:hover, .wb-mobile-nav a:focus-visible { background: var(--bg-soft); color: var(--coral); }
.wb-mobile-nav a.is-active { color: var(--coral); font-weight: 700; background: rgba(237,67,100,.06); }

/* ---- стрелки карусели отзывов ---- */
.wb-quotes { scroll-behavior: smooth; }
.wb-quotes__nav { display: flex; gap: 14px; justify-content: center; margin-top: 36px; }
.wb-qbtn {
	width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--line);
	background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer;
	transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.wb-qbtn:hover { background: var(--coral); color: #fff; border-color: var(--coral); transform: translateY(-2px); }
.wb-qbtn .wb-ic { width: 22px; height: 22px; }
.wb-qbtn[data-wb-q="prev"] .wb-ic { transform: rotate(180deg); }

/* =========================================================================
   Ротатор отзывов (single-quote, crossfade, стрелки + точки)
   ========================================================================= */
.wb-rotator { position: relative; max-width: 860px; margin-inline: auto; display: flex; align-items: center; gap: 14px; }
.wb-rotator__viewport { position: relative; flex: 1; min-height: 260px; }
.wb-rotator__slide {
	position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(10px);
	transition: opacity .5s ease, transform .5s ease; margin: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8px 12px;
}
.wb-rotator__slide.is-active { position: relative; opacity: 1; visibility: visible; transform: none; }
.wb-rotator__mark { font-family: Georgia, "Times New Roman", serif; font-size: 4.5rem; line-height: .5; height: 34px; color: var(--coral); opacity: .22; }
.wb-rotator .wb-quote__stars { color: var(--amber); letter-spacing: 3px; margin-bottom: 18px; }
.wb-rotator blockquote { margin: 0 0 26px; border: 0; padding: 0; background: none; quotes: none; font-size: clamp(1.15rem, 2.3vw, 1.55rem); font-weight: 500; line-height: 1.55; color: var(--ink); max-width: 58ch; }
.wb-rotator blockquote::before, .wb-rotator blockquote::after { content: none; }
.wb-rotator .wb-quote__author { justify-content: center; }
.wb-rotator__arrow { flex: 0 0 auto; }
.wb-rotator__arrow[data-rot="prev"] .wb-ic { transform: rotate(180deg); }

.wb-rotator__dots { display: flex; gap: 10px; justify-content: center; margin-top: 30px; }
.wb-dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: rgba(44,53,93,.2); cursor: pointer; transition: background .2s, transform .2s; }
.wb-dot:hover { background: rgba(44,53,93,.45); }
.wb-dot.is-active { background: var(--coral); transform: scale(1.35); }

@media (max-width: 680px) {
	.wb-rotator { gap: 4px; }
	.wb-rotator__arrow { width: 44px; height: 44px; }
	.wb-rotator blockquote { font-size: 1.12rem; }
}

/* ---- чипы AI-платформ ---- */
.wb-aichips { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.wb-aichips li { display: inline-flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 10px 18px; font-weight: 600; font-size: 1.04rem; color: var(--ink); box-shadow: var(--shadow-sm); }
.wb-aichips li .wb-ic { width: 22px; height: 22px; }

/* =========================================================================
   Кастомный AI-блок слики: голубая панель на всю высоту + текст
   ========================================================================= */
.wb-aiblock { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 64px); align-items: stretch; }
.wb-aiblock > .wb-aiblock__text { align-self: center; }

/* голубая панель слева — растянута на всю высоту блока */
.wb-aiblock__panel { background: var(--sky); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 38px); display: flex; flex-direction: column; gap: 22px; box-shadow: var(--shadow-md); }
.wb-aiblock__label { color: #fff; font-weight: 700; font-size: 1.02rem; margin: 0 0 14px; }
.wb-aiblock__panel .wb-aichips { margin: 0; }
.wb-aiblock__media { flex: 1; display: grid; place-items: center; }
.wb-aiblock__media img { width: 100%; max-width: 460px; }

/* список минусов Stripe — красные крестики */
.wb-crosses { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 12px; }
.wb-crosses li { position: relative; padding-inline-start: 34px; color: #495066; }
.wb-crosses li::before { content: "✕"; position: absolute; inset-inline-start: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: rgba(237,67,100,.12); color: var(--coral); display: grid; place-items: center; font-size: .72rem; font-weight: 700; }

/* выделенное решение — жирное, синее */
.wb-aiblock .wb-aiblock__solution { margin: 28px 0 0; font-weight: 700; font-size: 1.2rem; line-height: 1.55; color: #2b7fb8; }

@media (max-width: 980px) {
	.wb-aiblock { grid-template-columns: 1fr; }
}

/* =========================================================================
   AI-блок: продолжение — офферы слики + важная плашка
   ========================================================================= */
.wb-offer { border-radius: var(--radius-lg); padding: 32px 30px; color: #fff; box-shadow: var(--shadow-md); }
.wb-offer--coral { background: linear-gradient(135deg, var(--coral), var(--amber)); }
.wb-offer--sky { background: linear-gradient(135deg, var(--violet), var(--sky)); }
.wb-offer__num { font-size: clamp(2.2rem, 4.6vw, 3.1rem); font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.wb-offer__num span { font-size: .42em; font-weight: 600; opacity: .85; }
.wb-offer__label { margin-top: 12px; font-size: 1.05rem; font-weight: 500; opacity: .95; }
/* мобайл: карточки-офферы остаются 2 в ряд (компактнее) */
@media (max-width: 680px) {
	.wb-grid--2.wb-offers-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
	.wb-offers-grid .wb-offer { padding: 20px 16px; }
	.wb-offers-grid .wb-offer__num { font-size: clamp(1.5rem, 7vw, 2.1rem); }
	.wb-offers-grid .wb-offer__label { font-size: .85rem; margin-top: 8px; }
}

/* доверительная плашка-note */
.wb-note { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 24px 26px; box-shadow: var(--shadow-sm); }
.wb-note__icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(79,173,225,.14); color: var(--sky); }
.wb-note__icon .wb-ic { width: 24px; height: 24px; }
.wb-note p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.wb-note strong { color: var(--ink); }

/* графика способов оплаты в AI-блоке */
.wb-pay-methods { width: 100%; max-width: 440px; display: block; }

/* AI-блок №2: колонки сверху-выровнены, CTA сразу под текстом, графика — низкая под note */
.wb-aiblock2 { align-items: flex-start; }
.wb-aiblock2__col { display: flex; flex-direction: column; }
.wb-aiblock2__cta { margin-top: 26px; }
.wb-aiblock2 .wb-note { margin-top: 22px; }
.wb-aiblock2__col--media { justify-content: center; }
.wb-aiblock2__art { display: flex; align-items: center; justify-content: center; }
.wb-aiblock2__art img { width: 100%; max-width: 560px; display: block; }

/* ссылка на личный кабинет в шапке */
.wb-header__cta { display: flex; align-items: center; gap: 18px; }
.wb-account-link {
	display: inline-flex; align-items: center; gap: 7px;
	color: var(--ink); font-weight: 500; font-size: .98rem;
	white-space: nowrap; transition: color .15s ease;
}
.wb-account-link:hover { color: var(--coral); }
.wb-account-link .wb-ic { width: 19px; height: 19px; }

/* ========================================================================
   WooCommerce — брендинг под дизайн-систему WebBiz (магазин/корзина/קופה/
   кабинет). Всё RTL-aware (логические свойства). WooCommerce рендерится
   внутри нашей шапки/подвала; здесь только перекраска его разметки.
   ======================================================================== */

/* ширину/центрирование/отступы даёт .wb-section > .wb-container (см. шаблоны
   woocommerce.php / page.php) — здесь только цвет, чтобы не дублировать. */
.woocommerce, .woocommerce-page { color: var(--ink); }
/* generic-страница (cart/checkout/account и пр.): заголовок страницы */
.wb-page__title { font-weight: 800; color: var(--ink); margin: 0 0 28px; }
.woocommerce .woocommerce-breadcrumb { color: var(--muted); font-size: .9rem; margin-bottom: 18px; }
.woocommerce .woocommerce-breadcrumb a { color: var(--muted); }

/* заголовки страниц магазина */
.woocommerce .woocommerce-products-header__title,
.woocommerce h1.entry-title,
.woocommerce .page-title { font-weight: 800; color: var(--ink); }

/* --- кнопки WooCommerce → коралловые пилюли (как .wb-btn--primary) --- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce .woocommerce-Button.button {
	background: var(--coral);
	color: #fff;
	font-weight: 500;
	border-radius: var(--radius-pill);
	border: 2px solid transparent;
	padding: 12px 30px;
	box-shadow: 0 10px 24px rgba(237, 67, 100, .35);
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
	text-transform: none;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover { background: var(--coral-2); transform: translateY(-2px); color: #fff; }

/* блочные корзина/קופה (WooCommerce Blocks, WP 6+/Woo 10) — другие классы */
.wc-block-components-button:not(.is-link),
.wp-element-button,
.wc-block-cart__submit-button,
.wc-block-components-totals-coupon__button {
	background: var(--coral) !important;
	color: #fff !important;
	border-radius: var(--radius-pill) !important;
	border: 2px solid transparent !important;
	box-shadow: 0 10px 24px rgba(237, 67, 100, .35);
	font-weight: 500;
}
.wc-block-components-button:not(.is-link):hover,
.wp-element-button:hover,
.wc-block-cart__submit-button:hover { background: var(--coral-2) !important; transform: translateY(-2px); }
.wc-block-components-text-input input:focus { border-color: var(--coral) !important; box-shadow: none !important; }

/* вторичная (ghost) — напр. «הצג עגלה» */
.woocommerce a.button.wc-forward,
.woocommerce .button.added_to_cart {
	background: transparent;
	color: var(--ink);
	border-color: var(--line);
	box-shadow: none;
}
.woocommerce a.button.wc-forward:hover { border-color: var(--ink); color: var(--ink); }

/* --- сетка товаров → карточки --- */
.woocommerce ul.products { gap: 28px; display: grid; grid-template-columns: repeat(4, 1fr); }
.woocommerce ul.products li.product {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 16px 16px 22px;
	box-shadow: var(--shadow-sm);
	text-align: center;
	width: auto !important;
	margin: 0 !important;
	transition: transform .18s ease, box-shadow .18s ease;
}
.woocommerce ul.products li.product:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.woocommerce ul.products li.product img { border-radius: var(--radius-md); margin-bottom: 14px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1.15rem; font-weight: 700; color: var(--ink); padding: 6px 0;
}
.woocommerce ul.products li.product .price { color: var(--ink); font-weight: 800; font-size: 1.1rem; display: block; margin-bottom: 14px; }
.woocommerce ul.products li.product .price del { color: var(--muted); font-weight: 500; }
.woocommerce .woocommerce-result-count { color: var(--muted); }
.woocommerce .woocommerce-ordering select { border-radius: var(--radius-pill); border: 1px solid var(--line); padding: 8px 16px; }

/* --- одиночный товар --- */
.woocommerce div.product .product_title { font-weight: 800; color: var(--ink); }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--coral); font-weight: 800; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--coral); }

/* --- корзина / קופה --- */
.woocommerce table.shop_table { border-radius: var(--radius-md); border-color: var(--line); overflow: hidden; }
.woocommerce table.shop_table th { color: var(--ink); }
.woocommerce .cart-collaterals .cart_totals, .woocommerce-checkout #payment {
	background: var(--bg-soft); border-radius: var(--radius-lg); border: 1px solid var(--line);
}
.woocommerce-checkout #payment { padding: 10px 22px; }

/* --- формы / поля ввода --- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce .woocommerce-form-login input,
.woocommerce .woocommerce-form-register input,
.woocommerce-page input.input-text,
.woocommerce-page select {
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 12px 14px;
	background: #fff;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce-page input.input-text:focus { border-color: var(--coral); outline: none; }

/* --- плавная навигация между страницами (cross-document view transitions) ---
   Браузер держит снимок старой страницы до готовности новой и делает короткий
   кросс-фейд вместо «пустого кадра». Chrome 126+/Safari 18.2+; остальные —
   обычная навигация (прогрессивное улучшение). Шапка и сайдбар кабинета
   получают свои view-transition-name — визуально «стоят на месте». */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
}
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .18s; }
.wb-header { view-transition-name: wb-header; }
.wb-appbar { view-transition-name: wb-appbar; }
.wb-account-nav { view-transition-name: wb-account-nav; }

/* --- уведомления WooCommerce → бренд --- */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	border-radius: var(--radius-md);
	border-top: none;
	padding: 16px 20px;
}
/* дефолтный глиф-иконка WC спозиционирован физическим left/right и в RTL
   наезжает на текст — гасим; статус передаёт боковая полоса (как .wb-form-notice) */
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none; }
.woocommerce-message { border-inline-start: 4px solid var(--lime); background: #f6fbe9; }
.woocommerce-info { border-inline-start: 4px solid var(--sky); background: #eef8fd; }
.woocommerce-error { border-inline-start: 4px solid var(--coral); background: #fdeef1; }

/* --- My Account: app-shell ---
   Кабинет рендерится через page-my-account.php: full-bleed .wb-app без
   wb-section/wb-container. Сайдбар — full-height панель вплотную под липкой
   шапкой (RTL: справа), «יציאה» прижата к низу, контент на мягком фоне.
   WooCommerce задаёт float + width 30/70% с высокой специфичностью —
   перебиваем !important и float:none; clearfix ::before/::after на
   .woocommerce во flex становятся лишними элементами — гасим. */
:root { --wb-header-h: 77px; } /* 76px шапка + 1px бордер (≤880px: 65px) */

.wb-app { background: var(--bg-soft); }
/* только ПРЯМОЙ потомок: на страницах оплаты внутри контента лежит
   собственный .woocommerce шорткода — его флексовать нельзя */
.wb-app > .woocommerce { display: flex; flex-wrap: nowrap; gap: 0; align-items: stretch; min-height: calc(100vh - var(--wb-header-h)); }
.wb-app > .woocommerce::before,
.wb-app > .woocommerce::after { display: none !important; }
.wb-app .woocommerce-MyAccount-navigation { flex: 0 0 264px !important; width: 264px !important; max-width: 264px !important; float: none !important; margin: 0 !important; }
.wb-account-nav {
	background: #fff; border-inline-end: 1px solid var(--line);
	border-radius: 0; box-shadow: none; padding: 18px 14px 14px;
	position: sticky; top: var(--wb-header-h); height: calc(100vh - var(--wb-header-h));
	display: flex; flex-direction: column; overflow-y: auto;
}
/* --- Аппбар кабинета (header-app.php): лого справа (RTL start), аватар-дропдаун слева --- */
.wb-cabinet { --wb-header-h: 64px; }
.wb-appbar {
	position: sticky; top: 0; z-index: 30;
	display: flex; align-items: center; justify-content: space-between;
	height: var(--wb-header-h); padding: 0 clamp(16px, 3vw, 32px);
	background: #fff; border-bottom: 1px solid var(--line);
}
.wb-appbar__start { display: inline-flex; align-items: center; gap: 10px; }
.wb-appbar__logo { display: inline-flex; align-items: center; gap: 10px; }
.wb-appbar__logo .wb-logo__mark { width: 34px; height: 34px; }
/* Бургер меню кабинета — только на мобиле (см. @media 880px); на десктопе скрыт. */
.wb-appbar__burger {
	display: none; flex-direction: column; gap: 4px; align-items: center; justify-content: center;
	width: 40px; height: 40px; padding: 0; cursor: pointer;
	background: none; border: 1px solid var(--line); border-radius: 12px;
}
.wb-appbar__burger span { display: block; width: 19px; height: 2px; background: var(--ink); border-radius: 2px; }
.wb-appbar__burger:focus { outline: none; }
.wb-appbar__burger:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.wb-appbar__user { position: relative; }
.wb-appbar__trigger {
	display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
	background: none; border: 1px solid transparent; border-radius: var(--radius-pill);
	padding: 5px 8px; font-family: var(--font); color: var(--ink);
	box-shadow: none; /* гасим тень кнопки от Astra */
	transition: background .15s ease, border-color .15s ease;
}
/* Astra красит button:focus в белый + вешает box-shadow — держим свой ink и фон во ВСЕХ состояниях
   (:focus имеет ту же специфичность, что и button:focus Astra, но main.css грузится позже → побеждает). */
.wb-appbar__trigger:hover,
.wb-appbar__trigger:focus,
.wb-appbar__user[data-open] .wb-appbar__trigger { background: var(--bg-soft); border-color: var(--line); color: var(--ink); box-shadow: none; }
.wb-appbar__trigger:focus { outline: none; }
.wb-appbar__trigger:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.wb-appbar__avatar {
	flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%;
	background: var(--grad-brand); color: #fff; font-weight: 700; font-size: .95rem;
	display: flex; align-items: center; justify-content: center;
}
.wb-appbar__name { font-weight: 600; font-size: .95rem; max-width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-appbar__chev {
	width: 8px; height: 8px; margin-top: -3px; margin-inline: 2px 0;
	border-inline-end: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
	transform: rotate(45deg); transition: transform .2s ease; /* закрыто — стрелка влево (RTL: inline-end+bottom + 45°) */
}
.wb-appbar__user[data-open] .wb-appbar__chev { transform: rotate(-45deg); } /* открыто — плавный поворот вниз */
/* дропдаун меню пользователя */
.wb-appbar__menu {
	position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 40;
	min-width: 234px; background: #fff; border: 1px solid var(--line);
	border-radius: var(--radius-md); box-shadow: 0 16px 40px -18px rgba(20, 20, 50, .35);
	padding: 8px; display: flex; flex-direction: column; gap: 2px;
}
.wb-appbar__menu[hidden] { display: none; }
.wb-appbar__menu-email {
	padding: 4px 12px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line);
	color: var(--muted); font-size: .82rem; direction: ltr; text-align: start; unicode-bidi: plaintext;
}
.wb-appbar__menu-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--ink); font-weight: 500; }
.wb-appbar__menu-item .wb-ic { width: 18px; height: 18px; color: var(--muted); }
.wb-appbar__menu-item:hover { background: var(--bg-soft); }
.wb-appbar__menu-item--logout,
.wb-appbar__menu-item--logout .wb-ic { color: var(--coral); }

.wb-account-nav__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.wb-account-nav li { border: none !important; border-radius: var(--radius-md); transition: background .15s ease; padding: 0 !important; }
.wb-account-nav li a {
	display: flex; align-items: center; gap: 12px; padding: 11px 14px;
	color: var(--ink); font-weight: 500; border-radius: var(--radius-md);
}
.wb-account-nav li a .wb-ic { width: 19px; height: 19px; flex: 0 0 19px; color: var(--muted); transition: color .15s ease; }
.wb-account-nav li:hover { background: var(--bg-soft); }
.wb-account-nav li.is-active a { background: var(--coral); color: #fff; box-shadow: 0 8px 20px rgba(237, 67, 100, .3); }
.wb-account-nav li.is-active a .wb-ic { color: #fff; }
/* бейдж «ждёт действия» на пункте меню */
.wb-nav-badge {
	margin-inline-start: auto; min-width: 21px; height: 21px; padding: 0 6px;
	background: var(--coral); color: #fff; font-size: .72rem; font-weight: 700;
	border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center;
}
.wb-account-nav li.is-active a .wb-nav-badge { background: #fff; color: var(--coral); }
/* группа «ניהול» (админ) */
.wb-account-nav__group {
	margin-top: 14px; padding: 10px 14px 4px !important; border-top: 1px solid var(--line);
	border-radius: 0 !important; color: var(--muted); font-size: .74rem; font-weight: 700; letter-spacing: .05em;
}
.wb-account-nav__group:hover { background: transparent; }
/* «יציאה» и блок пользователя переехали в аппбар (header-app.php) — в сайдбаре их нет. */

/* контент кабинета */
.wb-app .woocommerce-MyAccount-content {
	flex: 1 1 auto !important; width: auto !important; max-width: none !important;
	min-width: 0; float: none !important; margin: 0 !important;
	padding: 34px clamp(20px, 4vw, 44px) 64px;
}
.wb-account-title { font-size: 1.7rem; font-weight: 800; color: var(--ink); margin: 0 0 22px; }
.wb-account-back { display: inline-block; color: var(--muted); font-size: .92rem; font-weight: 500; margin-bottom: 16px; }
.wb-account-back:hover { color: var(--coral); }
.wb-account-empty { color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px; text-align: center; }
/* числа/суммы всегда LTR («₪1,234» не разворачивается в RTL) */
.wb-num { direction: ltr; unicode-bidi: isolate; }

/* дашборд кабинета — приветствие + внимание + статы + быстрые карточки */
.wb-dash__welcome h2 { font-size: 1.7rem; font-weight: 800; color: var(--ink); margin: 0 0 8px; }
.wb-dash__welcome p { color: var(--muted); line-height: 1.6; margin: 0 0 28px; max-width: 60ch; }
.wb-dash__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.wb-dash__card {
	display: flex; flex-direction: column; gap: 5px;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
	padding: 22px; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease;
}
.wb-dash__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.wb-dash__card-ic { width: 46px; height: 46px; border-radius: var(--radius-md); background: var(--bg-soft); display: flex; align-items: center; justify-content: center; color: var(--coral); margin-bottom: 8px; }
.wb-dash__card-ic .wb-ic { width: 24px; height: 24px; }
.wb-dash__card strong { color: var(--ink); font-size: 1.08rem; }
.wb-dash__card-sub { color: var(--muted); font-size: .9rem; }

/* карточки «требует внимания» (квота к решению / платёж) */
.wb-attn { display: flex; flex-direction: column; gap: 14px; margin-bottom: 26px; }
.wb-attn__card {
	display: flex; align-items: center; gap: 16px;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
	padding: 18px 22px; box-shadow: var(--shadow-sm);
	border-inline-start: 5px solid var(--coral);
	transition: transform .18s ease, box-shadow .18s ease;
}
.wb-attn__card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.wb-attn__card--amber { border-inline-start-color: var(--amber); }
.wb-attn__ic { flex: 0 0 44px; width: 44px; height: 44px; border-radius: var(--radius-md); background: rgba(237, 67, 100, .1); color: var(--coral); display: flex; align-items: center; justify-content: center; }
.wb-attn__card--amber .wb-attn__ic { background: rgba(244, 162, 60, .14); color: #b8741b; }
.wb-attn__ic .wb-ic { width: 22px; height: 22px; }
.wb-attn__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wb-attn__text strong { color: var(--ink); font-size: 1.02rem; }
.wb-attn__sub { color: var(--muted); font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-attn__cta { margin-inline-start: auto; color: var(--coral); font-weight: 600; font-size: .95rem; white-space: nowrap; }

/* стат-плитки */
.wb-dash__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 26px; }
.wb-dash__stat {
	display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
	padding: 18px 22px; box-shadow: var(--shadow-sm);
}
.wb-dash__stat-ic { color: var(--muted); margin-bottom: 6px; }
.wb-dash__stat-ic .wb-ic { width: 20px; height: 20px; }
.wb-dash__stat-num { font-size: 1.6rem; font-weight: 800; color: var(--ink); line-height: 1; }
.wb-dash__stat-label { color: var(--muted); font-size: .88rem; }

/* ========== страница «פרטי חשבון»: категории-карточки ========== */
/* Каждая категория (личные данные / адреса / пароль) — своя белая карточка на
   мягком фоне контента (как SaaS-панели продукта); без вложенных «листов». */
.wb-account-card {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm); padding: 24px clamp(20px, 3vw, 28px); margin-bottom: 18px;
}
/* спец. `.wb-account-card X` бьёт .webbiz h2/h3 (0,1,1) — иначе заголовки секций огромные */
.wb-account-card .wb-account-card__title { font-size: 1.08rem; font-weight: 700; color: var(--ink); margin: 0; line-height: 1.3; }
.wb-account-card__hint { color: var(--muted); font-size: .9rem; line-height: 1.5; margin: 6px 0 0; }

.wb-account-fields { border: 0; padding: 0; margin: 18px 0 0; min-width: 0; }
.wb-account-fields .form-row,
.wb-account-fields > p { margin: 0 0 14px; }
.wb-account-fields > p:last-child { margin-bottom: 0; }
.wb-account-fields__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.wb-account-fields label { display: block; font-weight: 500; margin-bottom: 6px; }
.wb-account-fields .wb-req { color: var(--coral); }
.wb-account-fields em { display: block; color: var(--muted); font-size: .85rem; font-style: normal; margin-top: 5px; }
.wb-account-fields input.input-text,
.wb-account-fields select {
	width: 100%; font-family: var(--font); font-size: 1rem; color: var(--ink);
	border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; background: #fff;
}
.wb-account-fields input.input-text:focus,
.wb-account-fields select:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 4px rgba(237,67,100,.12); }
.wb-account-form__opt { color: var(--muted); font-weight: 400; font-size: .84rem; }
/* margin-top:auto прижимает кнопку к низу карточки (для равной высоты колонок),
   padding-top держит зазор в любом случае. `.wb-account-card` бьёт .webbiz p. */
.wb-account-card .wb-account-form__actions { margin: auto 0 0; padding-top: 30px; }

/* Десктоп: פרטים אישיים (справа) и שינוי סיסמה (слева) — две колонки ОДИНАКОВОЙ
   высоты, кнопки выровнены по низу. Секция «כתובת לחיוב» — во всю ширину ниже.
   На узких — стопкой. */
.wb-account-cols { display: grid; gap: 18px; margin-bottom: 18px; }
.wb-account-cols > .wb-account-card { margin-bottom: 0; min-width: 0; }
@media (min-width: 1080px) {
	.wb-account-cols { grid-template-columns: 1fr 1fr; } /* align-items:stretch по умолчанию → равная высота */
	.wb-account-cols .wb-account-card { display: flex; flex-direction: column; }
	.wb-account-cols .wb-account-card > form { flex: 1; display: flex; flex-direction: column; min-width: 0; }
}

/* адреса ВНУТРИ карточки «כתובות»: мягкие инсет-блоки. auto-fit → один адрес
   (только חיוב, доставка выключена) занимает строку; если доставку вернуть — 2 колонки. */
.wb-address-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 340px)); gap: 16px; margin-top: 16px; }
.wb-address {
	background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-md);
	padding: 16px 18px; display: flex; flex-direction: column; gap: 10px;
}
.wb-address .wb-address__title { font-size: 1rem; font-weight: 700; color: var(--ink); margin: 0; }
.wb-address__body { color: var(--muted); font-style: normal; line-height: 1.6; flex: 1; }
.wb-address__body address { font-style: normal; margin: 0; }
.wb-address .wb-btn { align-self: flex-start; }
@media (max-width: 600px) {
	.wb-account-fields__row2 { grid-template-columns: 1fr; }
	.wb-address-grid { grid-template-columns: 1fr; }
}

/* белые «листы» для остальных стоковых WC-страниц (orders / view-order / оплата) */
.wb-app .woocommerce-MyAccount-content > table,
.wb-account-paywrap {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
	padding: 24px; box-shadow: var(--shadow-sm);
}
/* Единая платёжная область: одинаковая ширина на всех 3 экранах (под самый широкий — шаг 2
   с iframe), по центру свободной зоны → при перелистывании 1→2→3 лист НЕ меняет размер. */
.wb-account-paywrap { padding: 28px 32px; max-width: 1200px; margin-inline: auto; }
/* Содержимое экрана 1 (таблица заказа + выбор метода) центрируем внутри широкого листа,
   чтобы оно не растягивалось; шаг 2 (iframe) и шаг 3 (success) центрируются своими правилами. */
.wb-account-paywrap form#order_review { max-width: 720px; margin-inline: auto; }

/* ========================================================================
   Индикатор шагов оплаты (.wb-steps) — сквозной по 3 экранам (סקירה→תשלום→אישור),
   RTL: шаг 1 справа. Свой view-transition-name → «стоит на месте» и морфит
   активный шаг между перезагрузками экранов (единый процесс без SPA).
   ======================================================================== */
.wb-steps {
	display: flex; align-items: center; justify-content: center; gap: 0;
	max-width: 520px; margin: 2px auto 26px;
	view-transition-name: wb-payment-steps;
}
.wb-steps__step { display: flex; flex-direction: column; align-items: center; gap: 9px; width: 100px; }
.wb-steps__dot {
	width: 40px; height: 40px; border-radius: var(--radius-pill, 999px);
	display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px;
	transition: background .25s, color .25s, box-shadow .25s, border-color .25s;
}
.wb-steps__check { width: 18px; height: 18px; }
.wb-steps__step--done .wb-steps__dot { background: var(--coral); color: #fff; }
.wb-steps__step--now  .wb-steps__dot { background: #fff; color: var(--coral); border: 2px solid var(--coral); box-shadow: 0 0 0 5px rgba(237,67,100,.14); }
.wb-steps__step--next .wb-steps__dot { background: var(--bg-soft); color: #aeb3c7; border: 2px solid var(--line); }
.wb-steps__lbl { font-size: 14px; font-weight: 600; color: #aeb3c7; }
.wb-steps__step--done .wb-steps__lbl,
.wb-steps__step--now  .wb-steps__lbl { color: var(--ink); }
.wb-steps__bar { height: 3px; flex: 1; max-width: 60px; border-radius: 2px; margin-bottom: 29px; }
.wb-steps__bar--done { background: var(--coral); }
.wb-steps__bar--next { background: var(--line); }
@media (max-width: 600px) {
	.wb-steps { max-width: 100%; }
	.wb-steps__step { width: 82px; }
	.wb-steps__dot { width: 34px; height: 34px; font-size: 14px; }
	.wb-steps__lbl { font-size: 12.5px; }
	.wb-steps__bar { max-width: 36px; margin-bottom: 26px; }
}
@media (prefers-reduced-motion: reduce) {
	.wb-steps__dot { transition: none; }
}

/* Trust-панель над карт-формой (Baymard: инкапсуляция карт-формы ↑ воспринимаемую безопасность). */
.wb-paysecure {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-md, 18px);
	padding: 12px 16px; margin: 0 0 14px; font-size: 14px; color: var(--ink);
}
.wb-paysecure__lock { display: inline-flex; color: #5a7d12; }
.wb-paysecure__lock svg { width: 20px; height: 20px; }
.wb-paysecure__txt { font-weight: 600; }
.wb-paysecure__cards { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.wb-paysecure__cards svg { height: 22px; width: auto; display: block; }
/* Мобильный: trust-панель в столбик и по центру (иначе элементы разъезжаются по краям). */
@media (max-width: 600px) {
	.wb-paysecure { flex-direction: column; justify-content: center; text-align: center; }
	.wb-paysecure__cards { margin-inline-start: 0; }
}

/* Skeleton поверх кросс-доменного iframe до его загрузки (убирает layout-shift/мигание). */
.wb-payframe { position: relative; }
.wb-payframe__iframe { opacity: 0; transition: opacity .4s ease; }
.wb-payframe.is-ready .wb-payframe__iframe { opacity: 1; }
.wb-payframe__skeleton {
	position: absolute; inset: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center;
	background: linear-gradient(100deg, var(--bg-soft) 30%, #eef0f7 50%, var(--bg-soft) 70%);
	background-size: 200% 100%; animation: wb-shimmer 1.3s linear infinite;
}
.wb-payframe.is-ready .wb-payframe__skeleton { opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.wb-payframe__spin {
	width: 34px; height: 34px; border-radius: var(--radius-pill, 999px);
	border: 3px solid var(--line); border-top-color: var(--coral); animation: wb-spin .8s linear infinite;
}
@keyframes wb-shimmer { to { background-position: -200% 0; } }
@keyframes wb-spin { to { transform: rotate(360deg); } }

/* Loading-состояние кнопки оплаты (экран 1): спиннер вместо текста, без даблклика. */
.wb-btn--loading { position: relative; color: transparent !important; pointer-events: none; }
.wb-btn--loading::after {
	content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px;
	border-radius: var(--radius-pill, 999px); border: 2px solid rgba(255,255,255,.5); border-top-color: #fff;
	animation: wb-spin .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
	.wb-payframe__skeleton, .wb-payframe__spin, .wb-btn--loading::after { animation: none; }
}

/* Экран 3 — success/подтверждение оплаты (спокойный премиум). */
.wb-paydone { text-align: center; padding: 22px 8px 10px; }
.wb-paydone__check {
	width: 78px; height: 78px; border-radius: var(--radius-pill, 999px); margin: 0 auto 20px;
	background: #f6fbe9; color: #5a7d12; display: flex; align-items: center; justify-content: center;
	animation: wb-pop .5s cubic-bezier(.2,.8,.3,1.4) both;
}
.wb-paydone__check svg { width: 40px; height: 40px; }
.wb-paydone__title { font-size: clamp(24px, 3.4vw, 30px); margin: 0 0 8px; color: var(--ink); }
.wb-paydone__lead { color: var(--muted); margin: 0 auto 24px; max-width: 440px; }
.wb-paydone__receipt {
	max-width: 470px; margin: 0 auto 26px; text-align: start;
	border: 1px solid var(--line); border-radius: var(--radius-md, 18px); background: var(--bg-soft); padding: 4px 20px;
}
.wb-paydone__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
@keyframes wb-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .wb-paydone__check { animation: none; } }

/* ========================================================================
   Портал «הפרויקטים שלי» (webbiz-core) — карточки проектов в кабинете
   ======================================================================== */
.wb-projects { display: grid; gap: 18px; }
.wb-project {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
	padding: 22px 24px; box-shadow: var(--shadow-sm);
}
.wb-project__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.wb-project__title { font-size: 1.2rem; font-weight: 700; color: var(--ink); margin: 0; }
.wb-project__desc { color: var(--muted); line-height: 1.6; margin: 0 0 14px; }
.wb-project__files { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 6px; }
.wb-project__file {
	display: inline-flex; align-items: center; gap: 8px; font-size: .92rem;
	background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-pill);
	padding: 7px 16px; color: var(--ink);
}
.wb-project__file:hover { border-color: var(--coral); color: var(--coral); }
.wb-project__invoice { display: inline-block; margin-top: 6px; color: var(--coral); font-weight: 600; }
/* статус-бейдж: проекты (lead…done), квоты (sent…declined), подписки (active…cancelled) */
.wb-status { font-size: .82rem; font-weight: 600; padding: 5px 14px; border-radius: var(--radius-pill); white-space: nowrap; }
.wb-status--lead { background: #eef1f9; color: var(--ink); }
.wb-status--in_progress { background: #eef8fd; color: #1f7bb0; }
.wb-status--review { background: #fff4e6; color: #b8741b; }
.wb-status--done { background: #f6fbe9; color: #5a7d12; }
.wb-status--sent { background: #eef8fd; color: #1f7bb0; }
.wb-status--viewed { background: rgba(123, 97, 255, .12); color: #5b46c9; }
.wb-status--accepted { background: #fff4e6; color: #b8741b; }
.wb-status--paid { background: #f6fbe9; color: #5a7d12; }
.wb-status--expired { background: #eef1f9; color: var(--muted); }
.wb-status--declined { background: #fdeef1; color: #b3294b; }
.wb-status--active { background: #f6fbe9; color: #5a7d12; }
.wb-status--pending_payment { background: #fff4e6; color: #b8741b; }
.wb-status--on_hold { background: #eef1f9; color: var(--muted); }
.wb-status--cancelled { background: #fdeef1; color: #b3294b; }
.wb-projects-empty { color: var(--muted); background: var(--bg-soft); border-radius: var(--radius-lg); padding: 28px; text-align: center; }

/* ========================================================================
   Кабинет: «הצעות מחיר» — список + детальная (webbiz-core)
   ======================================================================== */
.wb-quotes { display: flex; flex-direction: column; gap: 14px; }
.wb-quote-row {
	display: flex; align-items: center; gap: 16px;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
	padding: 18px 22px; box-shadow: var(--shadow-sm);
	transition: transform .18s ease, box-shadow .18s ease;
}
.wb-quote-row:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.wb-quote-row--action { border-inline-start: 5px solid var(--coral); }
.wb-quote-row__ic { flex: 0 0 42px; width: 42px; height: 42px; border-radius: var(--radius-md); background: var(--bg-soft); color: var(--coral); display: flex; align-items: center; justify-content: center; }
.wb-quote-row__ic .wb-ic { width: 21px; height: 21px; }
.wb-quote-row__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wb-quote-row__title { color: var(--ink); font-size: 1.02rem; }
.wb-quote-row__meta { color: var(--muted); font-size: .86rem; }
.wb-quote-row__total { margin-inline-start: auto; font-weight: 800; color: var(--ink); font-size: 1.05rem; white-space: nowrap; }

.wb-quote-single__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.wb-quote-single__title { font-size: 1.55rem; font-weight: 800; color: var(--ink); margin: 0 0 4px; }
.wb-quote-single__meta { color: var(--muted); font-size: .9rem; }
.wb-quote-single__scope {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
	padding: 22px 26px; box-shadow: var(--shadow-sm); margin-bottom: 20px; color: var(--ink);
}
.wb-quote-single__scope p:last-child { margin-bottom: 0; }
.wb-quote-items {
	width: 100%; border-collapse: separate; border-spacing: 0;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 22px;
}
.wb-quote-items th, .wb-quote-items td { padding: 14px 22px; text-align: start; border-bottom: 1px solid var(--line); }
.wb-quote-items thead th { color: var(--muted); font-size: .82rem; font-weight: 600; background: var(--bg-soft); border-bottom-color: var(--line); }
.wb-quote-items__qty { width: 90px; text-align: center !important; }
.wb-quote-items__price { width: 140px; text-align: end !important; }
.wb-quote-items__total td { border-bottom: none; font-weight: 800; color: var(--ink); font-size: 1.05rem; background: var(--bg-soft); }
.wb-quote-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.wb-quote-actions form { margin: 0; }
.wb-quote-actions__hint { color: var(--muted); font-size: .92rem; }

/* ========================================================================
   Кабинет: «המוצרים שלי» — сетка карточек + детальная (webbiz-core)
   ======================================================================== */
.wb-products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.wb-product-card {
	display: flex; flex-direction: column; gap: 8px;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
	padding: 20px 22px; box-shadow: var(--shadow-sm);
	transition: transform .18s ease, box-shadow .18s ease;
}
.wb-product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.wb-product-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wb-product-card__type {
	display: inline-flex; align-items: center; gap: 7px;
	font-size: .8rem; font-weight: 600; color: var(--muted);
	background: var(--bg-soft); border-radius: var(--radius-pill); padding: 4px 12px;
}
.wb-product-card__type .wb-ic { width: 14px; height: 14px; }
.wb-product-card__type--subscription { background: rgba(123, 97, 255, .1); color: #5b46c9; }
.wb-product-card__title { color: var(--ink); font-size: 1.1rem; }
.wb-product-card__meta { color: var(--muted); font-size: .9rem; }

.wb-product-card__type--feature { background: rgba(244, 162, 60, .14); color: #b8741b; }
.wb-product-single__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.wb-product-single__parent { display: inline-block; margin-inline-start: 10px; color: var(--muted); font-size: .88rem; font-weight: 500; }
.wb-product-single__parent:hover { color: var(--coral); }
.wb-product-single__links { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 8px; }
.wb-product-single__quote-link { color: var(--muted); font-weight: 600; font-size: .95rem; }
.wb-product-single__quote-link:hover { color: var(--coral); }
/* секция «הרחבות» — дочерние фичи продукта */
.wb-features { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.wb-features__row {
	display: flex; align-items: center; gap: 12px;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md);
	padding: 12px 18px; transition: transform .15s ease, box-shadow .15s ease;
}
.wb-features__row:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.wb-features__ic { flex: 0 0 30px; width: 30px; height: 30px; border-radius: var(--radius-sm); background: rgba(244, 162, 60, .14); color: #b8741b; display: flex; align-items: center; justify-content: center; }
.wb-features__ic .wb-ic { width: 16px; height: 16px; }
.wb-features__title { color: var(--ink); font-size: .98rem; flex: 1; min-width: 0; }
.wb-product-single__head .wb-product-card__type { margin-bottom: 10px; }
.wb-product-single__title { font-size: 1.55rem; font-weight: 800; color: var(--ink); margin: 0; }
.wb-product-single__desc {
	/* радиус = как у панелей wb-panel ниже (12px), не --radius-lg */
	background: #fff; border: 1px solid var(--line); border-radius: 12px;
	padding: 22px 26px; box-shadow: none; margin-bottom: 20px; color: var(--ink);
}
.wb-product-single__desc p:last-child { margin-bottom: 0; }
.wb-product-single__subhead { font-size: 1.1rem; font-weight: 700; color: var(--ink); margin: 24px 0 12px; }
.wb-product-single__cancelnote { color: var(--muted); font-size: .92rem; margin-top: 18px; }
.wb-sub-meta {
	display: flex; gap: 34px; flex-wrap: wrap;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
	padding: 18px 24px; box-shadow: var(--shadow-sm); margin-bottom: 20px;
}
.wb-sub-meta__row { display: flex; flex-direction: column; gap: 2px; color: var(--ink); font-weight: 600; }
.wb-sub-meta__label { color: var(--muted); font-size: .82rem; font-weight: 500; }
.wb-sub-orders { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wb-sub-orders li {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md);
	padding: 12px 18px; font-size: .95rem;
}
.wb-sub-orders__status { color: var(--muted); font-size: .84rem; white-space: nowrap; }
.wb-sub-cancel { margin-top: 20px; }
.wb-sub-cancel__btn { background: none; border: none; cursor: pointer; color: var(--muted); font-size: .88rem; text-decoration: underline; padding: 0; font-family: var(--font); }
.wb-sub-cancel__btn:hover { color: #b3294b; }

/* --- страница продукта 2.0 (SaaS-стиль, референс hPanel/WHMCS) ---
   Панель wb-panel: заголовок с нижним бордером + строки wb-row
   «לейбл — значение» с тонкими разделителями. Без цветных чипов и донатов. */
.wb-product-card__tpl {
	display: inline-block; margin-top: 8px; font-size: .78rem; font-weight: 600;
	color: var(--muted); border: 1px dashed var(--line); border-radius: 999px; padding: 2px 10px;
}
/* Ряды равной высоты: grid-строки со stretch (дефолт) выравнивают соседей;
   две панели против одной высокой — через ячейку-пару .wb-panel-pair
   (flex-column, дети flex:1 делят лишнюю высоту между собой). */
.wb-panel-grid {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px; margin-block: 22px;
}
.wb-panel-pair { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.wb-panel-pair .wb-panel { flex: 1 1 auto; }
/* Растянутая панель: шапка фиксирована, «воздух» уходит вниз тела. */
.wb-panel { background: #fff; border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; }
.wb-panel__body { flex: 1; }
.wb-panel--wide { grid-column: 1 / -1; }
.wb-panel__head {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 15px 22px; border-bottom: 1px solid var(--line);
	font-size: 1.02rem; font-weight: 700; color: var(--ink);
}
.wb-panel__title { display: inline-flex; align-items: center; gap: 10px; }
.wb-panel__title .wb-ic { width: 23px; height: 23px; flex: 0 0 auto; }
.wb-panel__body { padding: 4px 22px; }
.wb-panel__body--pad { padding: 16px 22px; }
.wb-panel__foot { padding: 12px 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: .84rem; }
.wb-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.wb-row:last-child { border-bottom: none; }
.wb-row__label { color: var(--muted); font-size: .9rem; }
.wb-row__label a { color: var(--ink); font-weight: 600; }
/* plaintext: направление по первому сильному символу — «50 GB NVMe» не
   пересобирается в RTL, а «גיבוי יומי» остаётся ивритом. text-align — ФИЗИЧЕСКИЙ
   left (якорь колонки значений): при plaintext «end» считается от направления
   САМОГО значения, и латинские многострочные («PHP 8.3 · …») уезжали вправо. */
.wb-row__val { color: var(--ink); font-size: .93rem; font-weight: 600; text-align: left; unicode-bidi: plaintext; display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.wb-row__val a { color: var(--ink); }
.wb-row__val a:hover { color: var(--coral); }
.wb-row__sub { color: var(--muted); font-size: .82rem; font-weight: 500; display: block; }
.wb-row__val--stack { flex-direction: column; align-items: flex-end; gap: 2px; }
.wb-row__strong { display: block; color: var(--ink); font-size: .93rem; }

/* Доступы: значение LTR-моно + кнопка-иконка копирования (как в hPanel) */
.wb-row__val--cred { min-width: 0; }
.wb-cred-val {
	direction: ltr; unicode-bidi: isolate; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .88rem; font-weight: 600; overflow-wrap: anywhere; text-align: left;
}
.wb-copy {
	display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
	width: 28px; height: 28px; padding: 0; border-radius: 8px; cursor: pointer;
	border: none; background: transparent; color: var(--muted); box-shadow: none;
	position: relative; transition: transform .12s ease, background .15s ease, color .15s ease;
}
/* Astra красит button:focus в синий и вешает box-shadow — гасим (клик
   оставляет фокус на кнопке); для клавиатуры — своё кольцо focus-visible. */
.wb-copy:focus { outline: none; background: transparent; color: var(--muted); box-shadow: none; }
.wb-copy:focus-visible { outline: 2px solid var(--coral); outline-offset: 1px; }
.wb-copy:hover, .wb-copy:focus:hover { background: var(--bg-soft); color: var(--ink); }
.wb-copy:active { transform: scale(.82); background: var(--bg-soft); }
.wb-copy .wb-ic { width: 15px; height: 15px; }
/* «Скопировано»: зелёная кнопка + всплывающая плашка «הועתק ✓» на 1.5с */
.wb-copy[data-copied], .wb-copy[data-copied]:focus { color: #4e6b10; background: #f6fbe9; }
.wb-copy[data-copied]::after {
	content: 'הועתק ✓'; position: absolute; top: -32px; left: 50%; transform: translateX(-50%);
	background: var(--ink); color: #fff; font-size: .74rem; font-weight: 600;
	padding: 4px 10px; border-radius: 7px; white-space: nowrap; pointer-events: none;
	animation: wb-tip-pop .16s ease; z-index: 5;
}
@keyframes wb-tip-pop {
	from { opacity: 0; translate: 0 5px; }
	to { opacity: 1; translate: 0 0; }
}
/* глазок: пока пароль скрыт — «eye»; показан — «eye-off» + подсветка кнопки */
.wb-copy .wb-eye-hide { display: none; }
.wb-copy[data-shown] .wb-eye-show { display: none; }
.wb-copy[data-shown] .wb-eye-hide { display: inline-block; }
.wb-copy[data-shown], .wb-copy[data-shown]:focus { color: var(--ink); background: var(--bg-soft); }

.wb-checks--tight { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; margin: 0; }
/* Узкая панель (не экран!) → пункты в одну колонку: меряем контейнером,
   т.к. ширина панели зависит от сетки и сайдбара, а не только от viewport. */
.wb-panel { container-type: inline-size; }
@container (max-width: 480px) {
	.wb-checks--tight { grid-template-columns: 1fr; }
}
.wb-product-single__tickets { margin-top: 26px; }
.wb-product-single__tickets-empty { color: var(--muted); font-size: .92rem; margin: 14px 0; }
.wb-status--open { background: #fdf3e2; color: #9a6a12; }
.wb-status--closed { background: #eef0f4; color: #6a7186; }

/* Модалка (<dialog>): центр + затемнение; открывается из main.js */
.wb-modal {
	border: none; border-radius: var(--radius-lg); padding: 28px;
	width: min(520px, calc(100vw - 40px)); box-shadow: var(--shadow-lg);
	inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%);
	position: fixed; margin: 0;
}
[dir="rtl"] .wb-modal { transform: translate(50%, -50%); }
.wb-modal::backdrop { background: rgba(20, 24, 46, .55); }
.wb-modal__title { font-size: 1.25rem; margin: 0 0 4px; }
.wb-modal__hint { color: var(--muted); font-size: .9rem; margin: 0 0 18px; }
.wb-modal__close {
	position: absolute; inset-block-start: 14px; inset-inline-end: 14px;
	display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
	border: none; background: transparent; font-size: 1rem; cursor: pointer; color: var(--muted); border-radius: 999px;
}
.wb-modal__close:hover { background: var(--bg-soft); color: var(--ink); }
.wb-modal .wb-form { max-width: none; }

/* Форма «יצירה מתבנית» на new-экране квоты */
.wb-admin-form__from-tpl { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.wb-admin-form__from-tpl select { max-width: 280px; }

@media (max-width: 880px) {
	.wb-panel-grid { grid-template-columns: 1fr; }
	.wb-checks--tight { grid-template-columns: 1fr; }
	.wb-row { flex-wrap: wrap; }
	.wb-row__val { text-align: start; justify-content: flex-start; }
}

/* ========================================================================
   Админ-портал (эндпоинты wb-* в кабинете, только manage_options)
   ======================================================================== */
.wb-admin-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.wb-admin-bar__stats { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; color: var(--muted); font-size: .93rem; }
.wb-admin-bar__stats strong { color: var(--ink); }
.wb-admin-bar__stats a { color: var(--muted); text-decoration: underline; }
.wb-admin-bar__stats a.is-on { color: var(--coral); font-weight: 600; }
.wb-btn--sm { padding: 10px 22px; font-size: .92rem; }
.wb-admin-filter { color: var(--muted); font-size: .9rem; margin: 0 0 14px; }
.wb-admin-filter a { color: var(--coral); }

.wb-admin-table { display: flex; flex-direction: column; gap: 10px; }
.wb-admin-row {
	display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md);
	padding: 14px 20px; box-shadow: var(--shadow-sm);
}
.wb-admin-row__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
/* главная колонка-ссылка: кликабельна на ВСЮ высоту строки (отрицательные
   вертикальные маргины съедают паддинги .wb-admin-row), по горизонтали — как раньше */
a.wb-admin-row__main {
	align-self: stretch; justify-content: center;
	margin-block: -14px; padding-block: 14px;
}
a.wb-admin-row__main:hover .wb-admin-row__title { color: var(--coral); }
.wb-admin-row__title { color: var(--ink); font-weight: 700; }
.wb-admin-row__title:hover { color: var(--coral); }
.wb-admin-row__meta { color: var(--muted); font-size: .85rem; }
.wb-admin-row__total { font-weight: 800; color: var(--ink); white-space: nowrap; }
/* Действия строки = панель иконок-кнопок с тултипами (best practice для таблиц:
   ≤3-4 иконок в ряд, деструктивное — отделено; см. UX-паттерны data-table row actions).
   Каждая — квадратная кнопка 34px, приглушённая, при ховере — мягкая подложка. */
.wb-admin-row__actions { display: flex; align-items: center; gap: 2px; white-space: nowrap; }
.wb-admin-row__actions .wb-row-act {
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; padding: 0; margin: 0;
	border: none; background: none; cursor: pointer;
	color: var(--muted); border-radius: 9px; font-family: var(--font);
	transition: background .15s ease, color .15s ease;
}
.wb-admin-row__actions .wb-row-act .wb-ic { width: 18px; height: 18px; }
.wb-admin-row__actions .wb-row-act:hover,
.wb-admin-row__actions .wb-row-act:focus-visible { background: var(--bg-soft); color: var(--ink); outline: none; }
.wb-admin-row__actions .wb-row-act--danger:hover,
.wb-admin-row__actions .wb-row-act--danger:focus-visible { background: rgba(237,67,100,.10); color: var(--coral); }
/* тонкий разделитель перед деструктивным действием (מחיקה) */
.wb-row-actions__sep { width: 1px; height: 20px; background: var(--line); margin-inline: 4px; flex: 0 0 auto; }
.wb-admin-row__stat { color: var(--muted); font-size: .9rem; white-space: nowrap; }
.wb-admin-row__stat strong { color: var(--ink); }
.wb-admin-row__stat.is-unpaid strong { color: #b3294b; }
.wb-admin-inline-form { display: inline; margin: 0; }
.wb-admin-inline-form button { background: none; border: none; cursor: pointer; color: var(--coral); font-weight: 600; font-size: .88rem; padding: 0; font-family: var(--font); }

/* формы портала: на белом листе, шире стандартной wb-form */
.wb-admin-form {
	max-width: 760px; background: #fff; border: 1px solid var(--line);
	border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 26px 28px;
}
.wb-admin-form p { margin: 0; }
.wb-admin-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wb-admin-form select {
	width: 100%; font-family: var(--font); font-size: 1rem; color: var(--ink);
	border: 1.5px solid var(--line); border-radius: var(--radius-sm);
	padding: 12px 14px; background: #fff;
}
.wb-admin-form select:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 4px rgba(237,67,100,.12); }
.wb-admin-form__editor label { font-weight: 500; margin-bottom: 6px; display: block; }
.wb-admin-form__hint { color: var(--muted); font-weight: 400; font-size: .84rem; }
.wb-admin-form__births { display: flex; flex-direction: column; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line); }

/* чузер секций сервиса (декларативный набор секций тавнита/сущности) */
.wb-section-chooser { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 18px; }
.wb-section-chooser__item {
	display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
	padding: 9px 14px; border: 1.5px solid var(--line); border-radius: 999px;
	font-size: .92rem; color: var(--ink); background: #fff; user-select: none;
	transition: border-color .15s, background .15s;
}
.wb-section-chooser__item:hover { border-color: var(--muted); }
.wb-section-chooser__item input { width: auto; margin: 0; accent-color: var(--coral); }
.wb-section-chooser__item:has(input:checked) { border-color: var(--coral); background: rgba(237,67,100,.06); }
.wb-admin-form__editor .wp-editor-container { border-radius: var(--radius-sm); overflow: hidden; border: 1.5px solid var(--line); }

/* repeater позиций квоты */
.wb-repeater { display: flex; flex-direction: column; gap: 8px; }
.wb-repeater__head, .wb-repeater__row { display: grid; grid-template-columns: 1fr 90px 140px 36px; gap: 10px; align-items: center; }
.wb-repeater__head { color: var(--muted); font-size: .8rem; padding-inline: 2px; }
.wb-repeater__remove {
	background: none; border: none; cursor: pointer; color: var(--muted);
	font-size: .95rem; padding: 6px; border-radius: var(--radius-sm); line-height: 1;
}
.wb-repeater__remove:hover { color: #b3294b; background: #fdeef1; }
.wb-repeater__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 6px; }
.wb-repeater__total { color: var(--muted); }
.wb-repeater__total strong { color: var(--ink); font-size: 1.1rem; }

/* карточка входа (гость на /my-account/) */
.wb-auth-card {
	max-width: 460px; margin-inline: auto;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
	padding: 38px 40px; box-shadow: var(--shadow-md);
}
.wb-auth-card__title { font-size: 1.7rem; margin-bottom: 6px; }
.wb-auth-card__lead { color: var(--muted); font-size: .98rem; margin-bottom: 22px; }
.wb-auth-card .woocommerce-form-login .button,
.wb-auth-card .woocommerce-form-register .button { width: 100%; }
/* Регистрация включена → Woo рендерит #customer_login с двумя колонками
   (вход | הרשמה). Карточка шире, float-колонки Woo (48%) → грид с разделителем.
   :has() — карточка остаётся узкой, если форма одна (регистрацию выключили). */
.wb-auth-card:has(#customer_login) { max-width: 880px; }
.wb-auth-card .col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.wb-auth-card .col2-set::before, .wb-auth-card .col2-set::after { display: none; } /* clearfix Woo = лишний грид-элемент */
.wb-auth-card .col2-set .col-1, .wb-auth-card .col2-set .col-2 { float: none !important; width: 100% !important; max-width: none !important; }
.wb-auth-card .col2-set .col-1 { border-inline-end: 1px solid var(--line); padding-inline-end: 40px; }
.wb-auth-card .col2-set h2 { font-size: 1.15rem; margin-bottom: 14px; }

/* плашка «עוד אין לכם חשבון?» под карточкой входа → страница /register/ */
.wb-auth-cta {
	max-width: 460px; margin: 18px auto 0;
	background: var(--grad-brand); color: #fff;
	border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
	padding: 24px 28px; display: flex; align-items: center; gap: 18px;
}
.wb-auth-cta__text b { display: block; font-size: 1.18rem; margin-bottom: 3px; }
.wb-auth-cta__text span { opacity: .92; font-size: .95rem; line-height: 1.45; display: block; }
.wb-auth-cta .wb-btn { flex: 0 0 auto; margin-inline-start: auto; white-space: nowrap; }

/* страница регистрации: карточка шире, чекбокс условий, ссылка «уже есть аккаунт» */
.wb-auth-card--register { max-width: 640px; }
.wb-form__terms {
	display: flex; align-items: flex-start; gap: 10px;
	font-size: .93rem; color: var(--muted); line-height: 1.5; margin-top: 4px;
}
.wb-form__terms input { margin-top: 4px; accent-color: var(--coral); width: 16px; height: 16px; flex: 0 0 auto; }
.wb-form__terms a { color: var(--ink); text-decoration: underline; }
.wb-auth-alt { text-align: center; margin-top: 20px; color: var(--muted); font-size: .95rem; }
.wb-auth-alt a { color: var(--coral); font-weight: 600; }

@media (max-width: 880px) {
	:root { --wb-header-h: 65px; } /* 64px маркетинг-шапка + 1px бордер */
	.wb-cabinet { --wb-header-h: 56px; } /* аппбар кабинета на мобиле */
	.woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
	/* кабинет в стопку: меню НАВИСАЕТ над контентом (оверлей), контент НЕ сдвигается. */
	.wb-app > .woocommerce { flex-wrap: wrap; position: relative; } /* контекст для оверлея меню */
	.wb-app .woocommerce-MyAccount-navigation { flex-basis: 100% !important; width: 100% !important; max-width: none !important; }
	.wb-app .woocommerce-MyAccount-content { flex-basis: 100% !important; width: 100% !important; padding: 22px 18px 48px; }
	/* Бургер показываем, имя пользователя рядом с аватаром прячем (на мобиле — только аватар). */
	.wb-appbar__burger { display: inline-flex; }
	.wb-appbar__name { display: none; }
	/* Лого — по центру аппбара (бургер справа/start, аватар слева/end по краям). */
	.wb-appbar__logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
	/* .wb-account-nav → раскрывающаяся панель во всю ширину, ОВЕРЛЕЙ под аппбаром (position:absolute),
	   контент за ней остаётся на месте. Свёрнута по умолчанию (max-height:0); .is-open раскрывает
	   (тоггл бургером в main.js) + тень «нависания» снизу. */
	.wb-account-nav {
		position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 20;
		height: auto; overflow: hidden; max-height: 0;
		padding: 0 12px; border-inline-end: none; border-bottom: 0; background: #fff;
		transition: max-height .28s ease;
	}
	.wb-account-nav.is-open {
		max-height: 640px; padding: 8px 12px 14px;
		border-bottom: 1px solid var(--line);
		box-shadow: 0 26px 40px -22px rgba(16, 18, 40, .45); /* «нависание» над контентом */
	}
	/* контент за меню слегка притемняется и не перехватывает тапы (тап вне меню закрывает — main.js) */
	.wb-account-nav.is-open ~ .woocommerce-MyAccount-content { opacity: .5; pointer-events: none; transition: opacity .28s ease; }
	.wb-account-nav__menu { flex-direction: column; overflow: visible; gap: 2px; }
	.wb-account-nav li { flex: 0 0 auto; }
	.wb-account-nav li a { padding: 12px 14px; font-size: 1rem; white-space: normal; }
	.wb-account-nav__group { margin: 12px 0 2px !important; padding: 10px 14px 4px !important; border-top: 1px solid var(--line); border-inline-start: none; }
	/* Аватар-дропдаун: не даём вылезти за край экрана. */
	.wb-appbar__menu { min-width: 0; width: min(280px, calc(100vw - 24px)); }
	.wb-dash__cards { grid-template-columns: 1fr; }
	.wb-dash__stats { grid-template-columns: repeat(3, 1fr); gap: 10px; }
	.wb-dash__stat { padding: 14px 16px; }
	.wb-products { grid-template-columns: 1fr; }
	.wb-attn__card { flex-wrap: wrap; }
	.wb-attn__cta { margin-inline-start: 0; }
	.wb-quote-row { flex-wrap: wrap; }
	.wb-quote-row__total { margin-inline-start: 0; }
	.wb-quote-items th, .wb-quote-items td { padding: 11px 14px; }
	.wb-auth-card { padding: 28px 22px; }
	/* формы входа/регистрации в стопку, разделитель — горизонтальный */
	.wb-auth-card .col2-set { grid-template-columns: 1fr; gap: 26px; }
	.wb-auth-card .col2-set .col-1 { border-inline-end: none; padding-inline-end: 0; border-bottom: 1px solid var(--line); padding-bottom: 26px; }
	.wb-auth-cta { flex-direction: column; align-items: flex-start; padding: 22px; }
	.wb-auth-cta .wb-btn { margin-inline-start: 0; }
	.wb-admin-form__grid { grid-template-columns: 1fr; }
	.wb-repeater__head, .wb-repeater__row { grid-template-columns: 1fr 64px 100px 32px; gap: 6px; }
	.wb-admin-row { gap: 10px; }
}
@media (max-width: 520px) {
	.woocommerce ul.products { grid-template-columns: 1fr; }
}

/* Строки админ-портала на телефоне: не тесним заголовок в узкую колонку —
   раскладываем карточкой. Главная колонка (заголовок+мета) на всю ширину →
   заголовок не рвётся на 3 строки; цена/статус/бейдж переносятся строкой ниже;
   иконки-действия уходят отдельной строкой к inline-краю, отделённые линией. */
@media (max-width: 600px) {
	.wb-admin-row { row-gap: 8px; column-gap: 10px; }
	.wb-admin-row__main { flex: 1 1 100%; }
	a.wb-admin-row__main { margin-block: -14px 0; padding-block: 14px 0; } /* кликабельно до верха, вплотную к строке ниже */
	.wb-admin-row__actions {
		flex: 1 1 100%; justify-content: flex-end;
		border-top: 1px solid var(--line); margin-top: 2px; padding-top: 8px;
	}
}

/* форма «צור קשר»: honeypot скрыт от людей, уведомление о результате */
.wb-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wb-form-notice { border-radius: var(--radius-md); padding: 14px 18px; margin-bottom: 18px; font-weight: 500; line-height: 1.5; }
.wb-form-notice--ok { background: #f6fbe9; color: #4e6b10; border-inline-start: 4px solid var(--lime); }
.wb-form-notice--err { background: #fdeef1; color: #b3294b; border-inline-start: 4px solid var(--coral); }

/* ========================================================================
   wb-showcase — тёмная сильно-скруглённая панель с декором (кружки + дуга).
   Фон = наш --ink. Вдохновлено секцией фич pickpackage. Белые карточки сверху.
   ======================================================================== */
.wb-showcase {
	position: relative;
	overflow: hidden;
	/* мягкое свечение сверху (светлее у кромки → базовый --ink ниже).
	   У pickpackage это иллюзия от белых кружков .1; тут — аккуратный градиент. */
	background:
		radial-gradient(95% 78% at 77% 6%, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 55%),
		var(--ink);
	color: #fff;
	/* умеренное скругление всех 4 углов (не «dome») */
	border-radius: 40px;
	padding: clamp(56px, 7vw, 100px) 0;
}
/* обёртка даёт цвет соседних блоков в вырезах углов секции:
   сверху cream (как блок выше), снизу soft (как блок ниже). */
.wb-showcase-wrap { background: linear-gradient(to bottom, var(--cream) 50%, var(--bg) 50%); }
.wb-showcase__head, .wb-showcase__grid { position: relative; z-index: 1; }
.wb-showcase__head h2 { color: #fff; }
.wb-showcase__head .lead { color: rgba(255, 255, 255, .72); }
/* прайс-карточки внутри showcase: светлые карточки → возвращаем тёмный текст (showcase даёт #fff) */
.wb-showcase .wb-card:not(.wb-step) { color: var(--ink); }

/* декор: пузырьки поднимаются снизу (из-под карточек), растут к верху и лопаются */
.wb-showcase__bubbles { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.wb-showcase__bubbles i {
	position: absolute; left: var(--x); top: 70%;
	width: var(--s); height: var(--s); border-radius: 50%;
	background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06) 70%);
	opacity: 0;
	animation: wb-rise var(--t, 8s) linear var(--d, 0s) infinite;
	will-change: transform, top, opacity;
}
@keyframes wb-rise {
	0%   { top: 102%; transform: scale(.3); opacity: 0; }
	8%   { opacity: .6; }
	80%  { transform: scale(1.5); opacity: .6; } /* растёт по дороге */
	100% { top: -8%; transform: scale(2.3); opacity: 0; } /* хлопок на ходу, без зависания */
}
@media (prefers-reduced-motion: reduce) {
	.wb-showcase__bubbles i { animation: none; top: 52%; opacity: .35; }
}

/* карточки-шаги: иконка в цветном чипе + акцентный номер-водяной знак.
   Цвет — из --accent (rgb-триплет на карточке). Скоупим к .wb-step, чтобы
   не задеть .wb-card на других страницах. */
.wb-step {
	position: relative; overflow: hidden;
	/* #1 яркий цветной тинт на ФОН карточки (поверх белого из .wb-card) */
	background-image: linear-gradient(rgba(var(--accent), .14), rgba(var(--accent), .14));
	/* место под верхний ряд: иконка (слева) + номер (справа) */
	padding-top: 110px;
}
/* фоновая графика — деликатно, тинт на неё не усиливаем */
.wb-step__bg {
	position: absolute; z-index: 0; inset: 0;
	color: rgb(var(--accent)); opacity: .1; pointer-events: none;
}
.wb-step__bg .wb-ic { width: 100%; height: 100%; display: block; }
.wb-step__ic, .wb-step h3, .wb-step p, .wb-step .wb-card__num { position: relative; z-index: 1; }
/* #2+#3 иконка — крупная, в ВЕРХНЕМ-ЛЕВОМ углу (после свапа) */
.wb-step__ic {
	position: absolute; inset-block-start: 26px; inset-inline-end: 26px;
	display: inline-flex; align-items: center; justify-content: center;
	width: 66px; height: 66px; margin: 0; border-radius: var(--radius-md);
	background: rgba(var(--accent), .18); color: rgb(var(--accent));
}
.wb-step__ic .wb-ic { width: 34px; height: 34px; }
/* #2 номер — в ВЕРХНЕМ-ПРАВОМ углу (после свапа), сплошной акцент */
.wb-step .wb-card__num {
	position: absolute; inset-block-start: 30px; inset-inline-start: 30px;
	margin: 0; font-size: 2.4rem; line-height: 1; color: rgb(var(--accent));
}
.wb-step:hover { box-shadow: 0 20px 44px rgba(var(--accent), .26); }
/* декор: толстая дуга справа-сверху (кольцо, частично за краем) */
.wb-showcase__arc {
	position: absolute; z-index: 0; inset-block-start: -95px; inset-inline-end: -95px;
	width: 360px; height: 360px; border-radius: 50%;
	border: 38px solid rgba(255, 255, 255, .05); pointer-events: none;
}

/* лёгкий «шахматный» сдвиг карточек на десктопе — как у референса */
@media (min-width: 900px) {
	.wb-showcase__grid > .wb-card:nth-child(even) { transform: translateY(26px); }
	/* hover поднимает чётную карточку от её базового сдвига (иначе nth-child перебивает .wb-card:hover) */
	.wb-showcase__grid > .wb-card:nth-child(even):hover { transform: translateY(20px) rotate(-.4deg); }
}
@media (max-width: 600px) {
	.wb-showcase { border-radius: 32px; }
	.wb-showcase__arc { width: 240px; height: 240px; inset-block-start: -70px; inset-inline-end: -70px; }
}
/* мобильный: карточки-шаги по 2 в ряд (вместо стопки) + компактные отступы */
@media (max-width: 680px) {
	.wb-showcase__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
	.wb-step { padding: 76px 18px 22px; }
	.wb-step__ic { width: 46px; height: 46px; inset-block-start: 18px; inset-inline-end: 18px; }
	.wb-step__ic .wb-ic { width: 24px; height: 24px; }
	.wb-step .wb-card__num { font-size: 1.7rem; inset-block-start: 22px; inset-inline-start: 20px; }
}

/* tech-stack внутри showcase: текст (справа) + лого-плитки и графика-сцена (слева) */
.wb-techstack {
	position: relative; z-index: 1;
	display: grid; grid-template-columns: 1.02fr .98fr;
	gap: clamp(28px, 5vw, 64px); align-items: center;
	margin-top: clamp(48px, 7vw, 80px); padding-top: clamp(48px, 7vw, 80px);
	border-top: 1px solid rgba(255, 255, 255, .1);
}
.wb-techstack__text h2 { color: #fff; }
.wb-techstack__text p { color: rgba(255, 255, 255, .72); }
.wb-techstack__text .wb-checks { margin-top: 18px; }
.wb-techstack__text .wb-checks li { color: rgba(255, 255, 255, .85); }
/* левая колонка: ряд лого с подписью (без плиток) + графика-сцена снизу */
.wb-techstack__media { display: flex; flex-direction: column; gap: clamp(18px, 3vw, 26px); min-width: 0; }
.wb-techlogos { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 22px; }
.wb-techtile { display: inline-flex; align-items: center; gap: 8px; }
.wb-techtile__logo { height: 26px; display: flex; align-items: center; justify-content: center; }
.wb-techtile__logo svg { height: 24px; width: auto; }
.wb-techtile > span { font-size: .82rem; font-weight: 600; color: rgba(255, 255, 255, .82); }
.wb-techscene img { display: block; width: 100%; height: auto; }
@media (max-width: 860px) {
	.wb-techstack { grid-template-columns: 1fr; gap: 30px; }
}

/* =========================================================================
   Страница «צור קשר» — богатый кремовый лэйаут (форма-карточка + способы связи)
   ========================================================================= */

/* hero-пилюли (бейджи доверия под лидом) */
.wb-hero__pills { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.wb-hero__pill {
	display: inline-flex; align-items: center; gap: 8px;
	background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16);
	color: #fff; font-weight: 500; font-size: .95rem;
	padding: 6px 20px; padding-inline-start: 7px; border-radius: var(--radius-pill);
}
.wb-hero__pill .wb-ic { width: 28px; height: 28px; }

/* сетка: форма (шире) + боковая колонка */
.wb-contact { display: grid; grid-template-columns: 1.25fr .85fr; gap: clamp(24px, 4vw, 44px); align-items: start; }

/* карточка формы — белая, на кремовом фоне */
.wb-contact__form-card {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
	padding: clamp(28px, 4vw, 48px); box-shadow: var(--shadow-md);
}
.wb-contact__form-card h2 { margin-bottom: .25em; }
.wb-contact__form-card .lead { margin-bottom: 26px; }
.wb-contact__form-card .wb-form { max-width: none; }

/* две колонки полей на десктопе */
.wb-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* поле с иконкой внутри */
.wb-field label { font-weight: 500; margin-bottom: 7px; display: block; color: var(--ink); }
.wb-field__wrap { position: relative; display: block; }
.wb-field__wrap > .wb-ic {
	position: absolute; inset-inline-start: 16px; top: 15px;
	width: 19px; height: 19px; color: var(--muted); pointer-events: none; transition: color .18s;
}
.wb-field__wrap:focus-within > .wb-ic { color: var(--coral); }
.wb-field__wrap input,
.wb-field__wrap textarea {
	width: 100%; box-sizing: border-box; font-family: var(--font); font-size: 1rem;
	padding-block: 14px; padding-inline: 46px 18px;
	border: 1px solid var(--line); border-radius: var(--radius-sm);
	background: var(--bg-soft); transition: border-color .18s, box-shadow .18s, background .18s;
}
.wb-field__wrap textarea { resize: vertical; }
.wb-field__wrap input:focus,
.wb-field__wrap textarea:focus { outline: none; border-color: var(--coral); background: #fff; box-shadow: 0 0 0 4px rgba(237,67,100,.12); }
.wb-field__wrap input::placeholder,
.wb-field__wrap textarea::placeholder { color: #aab1c8; }

/* кнопка отправки — на всю ширину, текст по центру */
.wb-form__submit { width: 100%; justify-content: center; margin-top: 4px; padding-block: 16px; font-size: 1.08rem; }
.wb-form__submit .wb-ic { width: 19px; height: 19px; }

/* мелкая строка о приватности */
.wb-form__fine { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; font-size: .88rem; color: var(--muted); }
.wb-form__fine .wb-ic { width: 16px; height: 16px; color: var(--lime); flex: 0 0 auto; }

/* боковая колонка */
.wb-contact__aside { display: grid; gap: 14px; }
.wb-section__sub { margin-bottom: 4px; }
.wb-section__sub .wb-eyebrow { margin-bottom: 10px; }
.wb-section__sub h3 { margin: 0; }

/* карточка-способ связи */
.wb-method {
	display: flex; align-items: center; gap: 16px;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md);
	padding: 18px 20px; box-shadow: var(--shadow-sm);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.wb-method:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.wb-method__icon { flex: 0 0 auto; width: 50px; height: 50px; border-radius: var(--radius-sm); display: grid; place-items: center; }
.wb-method__icon .wb-ic { width: 24px; height: 24px; }
.wb-method__body { display: grid; gap: 2px; line-height: 1.35; }
.wb-method__body b { color: var(--ink); font-weight: 600; }
.wb-method__body span { color: var(--muted); font-size: .95rem; }
.wb-method__arrow { margin-inline-start: auto; color: var(--muted); transition: transform .2s, color .2s; }
.wb-method__arrow .wb-ic { width: 20px; height: 20px; transform: scaleX(-1); } /* RTL: стрелка смотрит влево */
.wb-method:hover .wb-method__arrow { color: var(--ink); transform: translateX(-4px); }
.wb-method--coral .wb-method__icon { background: rgba(237,67,100,.12); color: var(--coral); }
.wb-method--coral:hover { border-color: var(--coral); }
.wb-method--sky .wb-method__icon { background: rgba(79,173,225,.15); color: var(--sky); }
.wb-method--sky:hover { border-color: var(--sky); }
.wb-method--lime .wb-method__icon { background: rgba(200,226,76,.22); color: #7f9417; }
.wb-method--lime:hover { border-color: var(--lime); }
.wb-method--violet .wb-method__icon { background: rgba(123,97,255,.13); color: var(--violet); }
.wb-method--violet:hover { border-color: var(--violet); }

/* блок часов работы */
.wb-hours { background: var(--ink); color: #fff; border-radius: var(--radius-md); padding: 22px 24px; display: grid; gap: 18px; }
.wb-hours__row { display: flex; gap: 14px; align-items: center; }
.wb-hours__ic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.1); color: var(--lime); }
.wb-hours__ic .wb-ic { width: 22px; height: 22px; }
.wb-hours b { display: block; color: #fff; font-weight: 600; }
.wb-hours span { color: rgba(255,255,255,.68); font-size: .95rem; }

/* FAQ: знак +/− справа от вопроса */
.wb-faq__q > span { color: var(--coral); font-weight: 400; font-size: 1.5rem; line-height: 1; transition: transform .2s; }
.wb-faq__item[open] .wb-faq__q > span { transform: rotate(45deg); }

@media (max-width: 900px) {
	.wb-contact { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
	.wb-form__row { grid-template-columns: 1fr; }
}