/* ============================================================================
   BrainBild — bb-new.css  (production marketing layer for redesign pages)
   ----------------------------------------------------------------------------
   В ПРОДЕ дизайн-токены подключаются ОТДЕЛЬНЫМ файлом ПЕРЕД этим:
     <link rel="stylesheet" href="/psycholog/wp-content/wp-recall/bb-design/tokens.css">
     <link rel="stylesheet" href="/assets/new/bb-new.css">
   В проде блок :root ниже дублирует часть значений токенов — это безопасно,
   т.к. tokens.css объявлен ВЫШЕ и одноимённые --bb-* перетираются им; новые
   marketing-токены (--bb-section-soft, --bb-hero-tint, --bb-shadow-hero и т.п.)
   живут только здесь и ядро не трогают.

   Для ОФФЛАЙН-PREVIEW (PHP/токенов локально нет) inline-fallback ниже даёт
   все используемые --bb-* значения, чтобы превью рендерилось без tokens.css.

   Никаких внешних CDN/шрифтов (РКН): шрифт — системный stack из токена.
   ========================================================================== */

:root{
  /* --- inline-fallback ядра токенов (для offline preview) --- */
  --bb-color-primary:#2bbf64; --bb-color-primary-dark:#25a557; --bb-color-primary-deep:#1d8443;
  --bb-color-primary-light:#c8ecd5; --bb-color-primary-bg:#f0faf3; --bb-color-primary-text:#1a7d3f;
  --bb-gradient-primary:linear-gradient(135deg,#2bbf64 0%,#25a557 100%);
  --bb-color-text-strong:#1d2849; --bb-color-text-body:#2d3a5c; --bb-color-text-muted:#6b7793;
  --bb-color-text-subtle:#8a96b0; --bb-color-bg-page:#f6f9fd; --bb-color-surface:#fff;
  --bb-color-surface-soft:#f6f9fd; --bb-color-surface-tag:#eef3fb; --bb-color-border:#ecf0f8;
  --bb-color-border-strong:#d6dde9; --bb-color-star:#f5a623; --bb-color-link:#2a7de1;
  --bb-shadow-card:0 1px 2px rgba(20,30,60,.04),0 8px 24px rgba(20,30,60,.06);
  --bb-shadow-card-hover:0 4px 8px rgba(20,30,60,.05),0 16px 40px rgba(20,30,60,.10);
  --bb-shadow-button:0 4px 14px rgba(43,191,100,.30);
  --bb-radius-sm:12px; --bb-radius-md:14px; --bb-radius-lg:16px; --bb-radius-xl:18px;
  --bb-radius-2xl:22px; --bb-radius-pill:999px;
  --bb-accent-warm:#ffb27a; --bb-accent-warm-soft:#fff1e6;
  --bb-font-family:system-ui,-apple-system,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* --- fluid-типографика (маркетинговая шкала, 04_DESIGN §3) --- */
  --bb-fs-hero:clamp(2rem,1.2rem + 3.6vw,3.5rem);
  --bb-fs-h2:clamp(1.5rem,1.1rem + 1.8vw,2.25rem);
  --bb-fs-h3:clamp(1.2rem,1rem + .9vw,1.5rem);
  --bb-fs-lead:clamp(1.05rem,.98rem + .5vw,1.25rem);
  --bb-fs-body:clamp(1rem,.96rem + .2vw,1.0625rem);

  /* --- marketing-токены (новые, только в bb-new.css; не в ядре) --- */
  --bb-section-soft:#f6f9fd;
  --bb-hero-tint:radial-gradient(1200px 600px at 70% -10%,#eafaf0 0%,rgba(246,249,253,0) 60%);
  --bb-shadow-hero:0 20px 60px rgba(20,30,60,.12);

  /* --- параметры motion --- */
  --bb-ease-out:cubic-bezier(.4,0,.2,1);
  --bb-reveal-dur:.7s;
}

/* ============================== RESET / БАЗА ============================== */
*{box-sizing:border-box}
html,body{margin:0;overflow-x:clip;max-width:100vw}
@supports not (overflow:clip){html,body{overflow-x:hidden}}
body{font-family:var(--bb-font-family);color:var(--bb-color-text-body);background:var(--bb-color-surface);
  -webkit-font-smoothing:antialiased;line-height:1.55}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto;display:block}
/* [hidden] должен реально прятать: иначе .jcards{display:grid}, .review-* и пр.
   перебивают UA-стиль display:none (баг: обе вкладки журнала показывались разом). */
[hidden]{display:none!important}

/* ИЗОЛЯЦИЯ модалки чат-воронки (#modal-container из form-to-chat.php + chatform.css).
   Модалка — общий с боевой Tilda-компонент, рассчитана на дефолтные метрики.
   Маркетинговые ресеты bb-new.css (* box-sizing:border-box; body line-height:1.55;
   system-ui) протекали внутрь и ломали вёрстку (степ-бар уезжал, контент обрезался).
   Возвращаем модалке нейтральные значения. */
#modal-container, #modal-container *{ box-sizing:content-box; }
#modal-container{ line-height:1.35; font-family:Arial,"Helvetica Neue",Helvetica,sans-serif; }
/* поля формы — border-box: при content-box их width:100% + padding вылазит за
   карточку формы (поле возраста уезжало за границу на 430px). */
#modal-container input,#modal-container textarea,#modal-container select,#modal-container button{ box-sizing:border-box; }

/* ============================== B2B-ФОРМА (/business → email) ============================== */
.b2b-form{display:flex;flex-direction:column;gap:12px;max-width:520px;margin-top:6px}
.b2b-inp{width:100%;box-sizing:border-box;font:inherit;color:var(--bb-color-text-strong);background:#fff;
  border:1.5px solid var(--bb-color-border-strong);border-radius:var(--bb-radius-md);padding:13px 16px;min-height:48px}
.b2b-inp::placeholder{color:var(--bb-color-text-subtle)}
.b2b-inp:focus{outline:none;border-color:var(--bb-color-primary-dark);box-shadow:0 0 0 3px var(--bb-color-primary-bg)}
.b2b-inp:disabled{background:var(--bb-color-surface-soft);color:var(--bb-color-text-muted)}
.b2b-ta{min-height:120px;resize:vertical;line-height:1.5}
.b2b-form .btn{align-self:flex-start}
.b2b-status{margin:2px 0 0;font-size:.95rem;font-weight:600}
.b2b-status--ok{color:var(--bb-color-primary-text)}
.b2b-status--err{color:#d6453c}
.b2b-note{margin-top:12px;color:var(--bb-color-text-subtle);font-size:.85rem;max-width:520px}
.b2b-note a{color:var(--bb-color-primary-text);font-weight:600}
@media(max-width:520px){.b2b-form .btn{align-self:stretch;width:100%}}

/* ============================== CTA-ПОЛОСА (повтор по странице) ============================== */
.cta-band__inner{display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,3vw,28px);
  flex-wrap:wrap;background:var(--bb-color-primary-bg);border:1px solid var(--bb-color-primary-light);
  border-radius:var(--bb-radius-2xl);padding:clamp(20px,3.5vw,30px) clamp(20px,4vw,36px)}
.cta-band__t{margin:0;font-size:var(--bb-fs-lead);line-height:1.4;color:var(--bb-color-text-strong);font-weight:600;max-width:62ch}
.cta-band .btn{flex:0 0 auto;white-space:nowrap}
@media(max-width:640px){
  .cta-band__inner{flex-direction:column;align-items:stretch;text-align:center}
  .cta-band .btn{width:100%}
}
.wrap{max-width:1180px;margin:0 auto;padding-inline:clamp(16px,5vw,40px)}

/* ============================== HEADER (.hdr) ============================== */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--bb-color-border)}
.hdr .wrap{display:flex;align-items:center;gap:24px;height:64px}
.logo{display:inline-flex;align-items:center;font-weight:800;font-size:1.25rem;color:var(--bb-color-text-strong);letter-spacing:-.02em}
.logo b{color:var(--bb-color-primary)}
/* официальный логотип-картинка (БрейнБилд: синий знак + кириллица) */
.logo img{display:block;height:34px;width:auto}
@media(max-width:520px){.logo img{height:30px}}
.nav{display:flex;gap:22px;margin-left:8px;font-size:.95rem;color:var(--bb-color-text-muted);font-weight:500}
.nav a{padding:6px 2px}
.nav a:hover{color:var(--bb-color-text-strong)}
.hdr .spacer{margin-left:auto}
.hdr__actions{display:flex;align-items:center;gap:12px;margin-left:auto}

/* burger button (mobile) — скрыт на десктопе */
.burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;
  border:1px solid var(--bb-color-border-strong);border-radius:var(--bb-radius-sm);
  background:#fff;cursor:pointer;padding:0;color:var(--bb-color-text-strong)}
.burger:hover{border-color:var(--bb-color-primary-dark)}
.burger span{position:relative;display:block;width:18px;height:2px;background:currentColor;border-radius:2px;
  transition:transform .25s var(--bb-ease-out),opacity .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;
  background:currentColor;border-radius:2px;transition:transform .25s var(--bb-ease-out),top .25s var(--bb-ease-out)}
.burger span::before{top:-6px}
.burger span::after{top:6px}
/* анимация бургер→крестик при открытом меню */
body.nav-open .burger span{background:transparent}
body.nav-open .burger span::before{top:0;transform:rotate(45deg)}
body.nav-open .burger span::after{top:0;transform:rotate(-45deg)}

/* мобильное выпадающее меню — БЕЗ translateX(100%):
   скрытие через opacity+visibility+translateY сверху (не даёт гор. скролл) */
.mobnav{position:fixed;left:0;right:0;top:64px;z-index:49;
  background:#fff;border-bottom:1px solid var(--bb-color-border);
  box-shadow:var(--bb-shadow-card);
  padding:8px clamp(16px,5vw,40px) 18px;
  display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .25s ease,transform .25s var(--bb-ease-out),visibility .25s}
.mobnav a{display:flex;align-items:center;min-height:48px;font-size:1rem;font-weight:500;
  color:var(--bb-color-text-body);border-bottom:1px solid var(--bb-color-border)}
.mobnav a:last-of-type{border-bottom:0}
.mobnav .btn{margin-top:12px;width:100%}
body.nav-open .mobnav{opacity:1;visibility:visible;transform:translateY(0)}
/* блюр-оверлей под мобильным меню: блюрит контент (z 1-9), но не меню (49)/хедер (50).
   Тап по оверлею закрывает меню (вешается в bb-new.js). Скролл фона заблокирован. */
.nav-overlay{position:fixed;inset:0;z-index:48;opacity:0;visibility:hidden;
  background:rgba(16,24,20,.22);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  transition:opacity .25s ease,visibility .25s ease}
body.nav-open .nav-overlay{opacity:1;visibility:visible}
/* надёжный скролл-лок фона при открытом меню (position:fixed работает и на iOS,
   где overflow:hidden игнорируется). top выставляется в JS = -scrollY (без прыжка). */
body.nav-open{position:fixed;left:0;right:0;width:100%;overflow:hidden}
/* cookie-баннер (z-9000) не торчит чётким над блюром при открытом меню */
body.nav-open .cookie-consent{display:none!important}

/* ============================== BUTTONS ============================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:13px 26px;
  border-radius:var(--bb-radius-md);font-size:1rem;font-weight:600;cursor:pointer;border:1.5px solid transparent;
  font-family:inherit;transition:.2s}
.btn--primary{background:var(--bb-gradient-primary);color:#fff;box-shadow:var(--bb-shadow-button)}
.btn--primary:hover{transform:translateY(-1px)}
.btn--secondary{background:#fff;color:var(--bb-color-text-body);border-color:var(--bb-color-border-strong)}
.btn--secondary:hover{border-color:var(--bb-color-primary-dark);color:var(--bb-color-primary-dark)}
.btn--ghostgreen{background:var(--bb-color-primary-bg);color:var(--bb-color-primary-text);font-weight:600}
.btn--sm{min-height:42px;padding:9px 18px}

/* ============================== TYPO / HERO PRIMITIVES ============================== */
.label{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--bb-color-primary-text);
  font-weight:700;display:inline-flex;align-items:center;gap:8px}
.label::before{content:"";width:22px;height:2px;background:var(--bb-color-primary);border-radius:2px}
h1.hero-h{font-size:var(--bb-fs-hero);line-height:1.1;letter-spacing:-.02em;color:var(--bb-color-text-strong);
  font-weight:800;margin:.5em 0 .35em;text-wrap:balance}
.lead{font-size:var(--bb-fs-lead);color:var(--bb-color-text-body);max-width:40ch;line-height:1.5}
.microtrust{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:18px;font-size:.9rem;color:var(--bb-color-text-muted)}
.microtrust span{display:inline-flex;align-items:center;gap:6px}
.microtrust .dot{width:7px;height:7px;border-radius:50%;background:var(--bb-color-primary)}

/* ============================== TRUST NUMBERS BAR ============================== */
.trust{background:var(--bb-color-bg-page);border-block:1px solid var(--bb-color-border)}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-block:26px;text-align:center}
.trust .n{font-size:1.7rem;font-weight:800;color:var(--bb-color-text-strong)}
.trust .t{font-size:.85rem;color:var(--bb-color-text-muted);margin-top:2px}
.trust .star{color:var(--bb-color-star)}

/* ============================== AVATARS ============================== */
.ava{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;
  font-size:1.1rem;box-shadow:0 4px 12px rgba(20,30,60,.12);border:2px solid #fff}
.a1{background:linear-gradient(135deg,#5b8def,#3a6fd8)} .a2{background:linear-gradient(135deg,#2bbf64,#1d8443)}
.a3{background:linear-gradient(135deg,#f5a623,#e8861a)} .a4{background:linear-gradient(135deg,#a06bf0,#7b46d8)}
.a5{background:linear-gradient(135deg,#ef6b8d,#d83a64)}
/* avatar — реальное фото (живые данные): img с классом .ava заполняет кружок */
.ava--img{object-fit:cover;background:var(--bb-color-surface-tag);padding:0;overflow:hidden}
/* hero-кружок: .ava--img как span-обёртка вокруг <img> (круглое фото, clip по радиусу) */
span.ava--img{padding:0;overflow:hidden}
span.ava--img img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}

/* ============================== CHIPS ============================== */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:9px 15px;background:var(--bb-color-surface-tag);
  border:1.5px solid transparent;border-radius:var(--bb-radius-pill);font-size:.92rem;font-weight:500;
  color:var(--bb-color-text-body);cursor:pointer;transition:.15s;font-family:inherit;line-height:1.2}
.chip:hover{border-color:var(--bb-color-primary-light);background:var(--bb-color-primary-bg)}
.chip.sel{background:var(--bb-color-primary-bg);border-color:var(--bb-color-primary-light);
  color:var(--bb-color-primary-text)}

/* ============================== SECTIONS ============================== */
.sec{padding-block:clamp(48px,8vw,96px)}
.sec--soft{background:var(--bb-section-soft)}
.sec h2{font-size:var(--bb-fs-h2);color:var(--bb-color-text-strong);font-weight:800;letter-spacing:-.02em;
  margin:0 0 8px;text-wrap:balance}
.sec .sub{color:var(--bb-color-text-muted);margin:0 0 28px;font-size:1.05rem}

/* темы-проблемы */
.themes{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.theme{background:#fff;border:1px solid var(--bb-color-border);border-radius:var(--bb-radius-xl);padding:20px;
  box-shadow:var(--bb-shadow-card);transition:.2s;display:flex;flex-direction:column;gap:10px;min-height:130px;min-width:0}
.theme:hover{transform:translateY(-3px);box-shadow:var(--bb-shadow-card-hover)}
.theme .ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:1.4rem;
  background:var(--bb-accent-warm-soft)}
.theme .nm{font-weight:700;color:var(--bb-color-text-strong);font-size:1.05rem}
.theme .go{margin-top:auto;color:var(--bb-color-primary-text);font-weight:600;font-size:.9rem}

/* карточка психолога (мини) */
.pcard{background:#fff;border:1px solid var(--bb-color-border);border-radius:var(--bb-radius-xl);padding:16px;
  box-shadow:var(--bb-shadow-card);display:flex;gap:12px;align-items:center;min-width:230px}
.pcard .meta{font-size:.82rem;color:var(--bb-color-text-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pcard .nm{font-weight:700;color:var(--bb-color-text-strong);font-size:.98rem}
.pcard .rt{color:var(--bb-color-star);font-size:.85rem;font-weight:600}

/* ============================== FOOTER (site-footer.php) ============================== */
.ftr{background:var(--bb-color-text-strong);color:#cfd6e6;padding-block:clamp(40px,6vw,64px) 0}
.ftr a{color:#cfd6e6}
.ftr a:hover{color:#fff}
.ftr__top{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px 24px}
.ftr__brand .logo{color:#fff}
.ftr__brand .logo b{color:var(--bb-color-primary)}
.ftr__brand .logo img{height:42px}
.ftr__tagline{margin:14px 0 18px;font-size:.92rem;color:#9aa6c2;max-width:34ch;line-height:1.55}
.ftr__social{display:flex;gap:10px}
.ftr__social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:var(--bb-radius-sm);background:rgba(255,255,255,.08);transition:.18s}
.ftr__social a:hover{background:rgba(255,255,255,.16)}
.ftr__col h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:#fff;margin:0 0 14px;font-weight:700}
.ftr__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.ftr__col li a{display:flex;align-items:center;min-height:34px;font-size:.92rem;color:#9aa6c2}
.ftr__col li a:hover{color:#fff}
.ftr__contact{margin-top:8px;font-size:.92rem;color:#9aa6c2}
.ftr__contact a{color:#fff;font-weight:600}
.ftr__bottom{margin-top:36px;padding-block:20px;border-top:1px solid rgba(255,255,255,.10);
  display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;justify-content:space-between;
  font-size:.85rem;color:#7e8aa6}
/* бейдж «Сделано в Fabriq» (тёмный подвал) */
.made-fabriq{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;
  border:1px solid rgba(255,255,255,.15);border-radius:9px;
  font-size:.78rem;color:#7e8aa6;text-decoration:none;white-space:nowrap;
  transition:border-color .2s ease,color .2s ease}
.made-fabriq:hover{border-color:#d97757;color:#c5cee0}
.made-fabriq__logo{display:block;height:17px;width:auto;position:relative;top:1px}

/* legacy mockup footer */
footer.mk{padding:34px 0;color:var(--bb-color-text-subtle);font-size:.85rem;border-top:1px solid var(--bb-color-border)}

/* ============================== MOTION UTILITIES ============================== */
/* scroll-reveal: класс .in добавляет JS через IntersectionObserver */
.reveal{opacity:0;transform:translateY(26px);transition:opacity var(--bb-reveal-dur) ease,transform var(--bb-reveal-dur) ease}
.reveal.in{opacity:1;transform:none}

/* staggered reveal колонок доверия (.trust получает .in от JS) */
.trust .col{opacity:0;transform:translateY(16px);transition:.6s}
.trust.in .col{opacity:1;transform:none}
.trust.in .col:nth-child(2){transition-delay:.1s}
.trust.in .col:nth-child(3){transition-delay:.2s}
.trust.in .col:nth-child(4){transition-delay:.3s}

/* общие keyframes (специфичный hero-моушен переопределяется в стилях страницы) */
@keyframes bb-shimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes bb-floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes bb-popIn{from{opacity:0;transform:scale(.6) translateY(8px)}to{opacity:1;transform:none}}
@keyframes bb-chipIn{to{opacity:1;transform:none}}

/* ============================== FAQ ACCORDION ============================== */
.bb-acc{display:flex;flex-direction:column;gap:12px}
.bb-acc__item{background:#fff;border:1px solid var(--bb-color-border);border-radius:var(--bb-radius-lg);
  box-shadow:var(--bb-shadow-card);overflow:hidden}
.bb-acc__q{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;
  min-height:56px;padding:16px 20px;background:none;border:0;cursor:pointer;text-align:left;
  font-family:inherit;font-size:1.05rem;font-weight:600;color:var(--bb-color-text-strong)}
.bb-acc__q::after{content:"+";font-size:1.4rem;font-weight:400;color:var(--bb-color-text-muted);
  transition:transform .25s var(--bb-ease-out);line-height:1}
.bb-acc__item.open .bb-acc__q::after{transform:rotate(45deg)}
.bb-acc__a{max-height:0;overflow:hidden;transition:max-height .3s var(--bb-ease-out)}
.bb-acc__a-inner{padding:0 20px 18px;color:var(--bb-color-text-body);font-size:1rem;line-height:1.6}
.bb-acc__item.open .bb-acc__a{max-height:800px}

/* ============================== RESPONSIVE ============================== */
/* tablet */
@media(max-width:1024px){
  .themes{grid-template-columns:repeat(3,1fr)}
  .ftr__top{grid-template-columns:1fr 1fr}
}
/* нижний планшет / широкий телефон */
@media(max-width:860px){
  .nav{display:none}
  .hdr__actions .btn{display:none}        /* «Войти» уезжает в мобменю */
  .burger{display:inline-flex}
  .trust .wrap{grid-template-columns:repeat(2,1fr)}
  .themes{grid-template-columns:repeat(2,1fr)}
  .ftr__top{grid-template-columns:1fr 1fr}
}
/* телефон */
@media(max-width:520px){
  .themes{grid-template-columns:1fr}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%}
  .ftr__top{grid-template-columns:1fr}
  .ftr__bottom{flex-direction:column;align-items:flex-start}
}

/* ============================== REDUCED MOTION ============================== */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal,.trust .col{opacity:1!important;transform:none!important}
  .mobnav{transition:none}
}

/* ============================================================================
   T1.1 — ГЛАВНАЯ: партиалы (hero-home, quiz, how-it-works, psy-strip,
   journal-strip, reviews). Переиспользуют токены; новых стилей минимум.
   Эталон моушена/раскладки — mockups/variant-e.html.
   ========================================================================== */

/* ---- узкая обёртка (FAQ читаемой ширины) ---- */
.wrap--narrow{max-width:820px}

/* ============================== HERO-HOME ============================== */
.hero-home{position:relative;overflow:hidden;
  background:linear-gradient(120deg,#f3fbf6 0%,#f6f9fd 45%,#eef7ff 100%);
  background-size:200% 200%;animation:bb-shimmer 14s ease-in-out infinite}
.hero-home .wrap{display:grid;grid-template-columns:1fr 440px;gap:clamp(48px,6vw,96px);align-items:center;
  padding-block:clamp(40px,7vw,84px)}
.hero-home__copy .lead{max-width:34ch}
.hero-cta{display:flex;gap:14px;margin-top:24px;flex-wrap:wrap}

/* строка аватаров + подпись доверия */
.facesrow{display:flex;align-items:center;margin-top:26px;flex-wrap:wrap;gap:10px 0}
.facesrow .ava{width:44px;height:44px;font-size:.9rem;margin-left:-12px;animation:bb-popIn .5s both}
.facesrow .ava:first-child{margin-left:0}
.facesrow .ava:nth-child(2){animation-delay:.08s}
.facesrow .ava:nth-child(3){animation-delay:.16s}
.facesrow .ava:nth-child(4){animation-delay:.24s}
.facesrow .ava:nth-child(5){animation-delay:.32s}
.facesrow .cap{margin-left:16px;font-size:.9rem;color:var(--bb-color-text-muted);max-width:32ch}

/* ============================== QUIZ (анкета) ============================== */
.quiz{background:#fff;border:1px solid var(--bb-color-border);border-radius:var(--bb-radius-2xl);
  box-shadow:var(--bb-shadow-hero);padding:26px;animation:bb-floatY 5.5s ease-in-out infinite}
.quiz .step{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--bb-color-text-subtle);font-weight:700}
.quiz .q{font-size:1.3rem;font-weight:800;color:var(--bb-color-text-strong);margin:8px 0 18px;line-height:1.25}
.quiz .prog{height:6px;background:var(--bb-color-surface-tag);border-radius:99px;overflow:hidden;margin-bottom:16px}
.quiz .prog i{display:block;height:100%;width:22%;background:var(--bb-gradient-primary);border-radius:99px;
  transition:width .5s var(--bb-ease-out)}
.quiz .chips{margin-bottom:22px}
.quiz .chips .chip{opacity:0;transform:translateY(8px);animation:bb-chipIn .45s forwards}
.quiz .chips .chip:nth-child(1){animation-delay:.25s}.quiz .chips .chip:nth-child(2){animation-delay:.33s}
.quiz .chips .chip:nth-child(3){animation-delay:.41s}.quiz .chips .chip:nth-child(4){animation-delay:.49s}
.quiz .chips .chip:nth-child(5){animation-delay:.57s}.quiz .chips .chip:nth-child(6){animation-delay:.65s}
.quiz .chips .chip:nth-child(7){animation-delay:.73s}.quiz .chips .chip:nth-child(8){animation-delay:.81s}
.quiz .qbtn{width:100%}
.quiz .free{margin-top:14px;text-align:center;font-size:.85rem;color:var(--bb-color-text-muted)}

/* ============================== HOW IT WORKS ============================== */
.hiw{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hiw__step{background:#fff;border:1px solid var(--bb-color-border);border-radius:var(--bb-radius-xl);
  padding:24px;box-shadow:var(--bb-shadow-card)}
.hiw__num{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--bb-color-primary-bg);color:var(--bb-color-primary-text);font-weight:800;font-size:1.1rem;margin-bottom:14px}
.hiw__nm{font-weight:700;color:var(--bb-color-text-strong);font-size:1.1rem;margin-bottom:6px}
.hiw__tx{margin:0;color:var(--bb-color-text-muted);font-size:.98rem;line-height:1.55}
/* тёплый акцент-блок про ассистента (забота, не «бот») */
.hiw__care{display:flex;gap:16px;align-items:flex-start;margin-top:22px;padding:20px 24px;
  background:var(--bb-accent-warm-soft);border:1px solid #ffe2cc;border-radius:var(--bb-radius-xl)}
.hiw__care-ic{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:#fff;font-size:1.3rem;box-shadow:var(--bb-shadow-card)}
.hiw__care-tx{color:var(--bb-color-text-body);font-size:1rem;line-height:1.6}
.hiw__care-tx strong{color:var(--bb-color-text-strong)}

/* =========================== STRIP HEAD (психологи/журнал) =========================== */
.psy-strip__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.psy-strip__head h2{margin-bottom:0}
.psy-strip__all{color:var(--bb-color-primary-text);font-weight:600;font-size:.95rem;white-space:nowrap}
.psy-strip__all:hover{color:var(--bb-color-primary-dark)}

/* ============================== PSYCHOLOGISTS STRIP ============================== */
/* grid-auto-rows:1fr + растяжка ячеек → ВСЕ карточки в ряду равной высоты,
   независимо от длины имени / наличия бейджа «сегодня». */
.psy-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch;grid-auto-rows:1fr}
/* вертикальная вариация карточки психолога (для сетки на главной + problem-страницы).
   Единый каркас: flex-колонка во всю высоту ячейки. */
.pcard--v{flex-direction:column;align-items:flex-start;gap:12px;min-width:0;height:100%}
.pcard--v .ava{width:52px;height:52px;font-size:1.05rem;flex:none;border-radius:50%}
/* реальное фото-аватар (img.ava ava--img): заполняем кружок одинаково у всех */
.pcard--v img.ava{object-fit:cover;display:block}
.pcard--v picture{flex:none;display:block;line-height:0}
/* тело карточки — тоже колонка во всю высоту, чтобы нижний блок прижимался к низу */
.pcard__body{width:100%;flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.pcard--v .nm{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.25}
/* гибкий спейсер: всё что после .meta уезжает вниз → нижние блоки выровнены по низу у всех */
.pcard--v .meta{margin-top:4px}
.pcard__row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px;
  margin-top:auto;padding-top:10px}
.pcard__price{font-weight:700;color:var(--bb-color-text-strong);font-size:.92rem}
.pcard__badge{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--bb-radius-pill);
  background:var(--bb-color-primary-bg);color:var(--bb-color-primary-text);font-size:.78rem;font-weight:600;
  align-self:flex-start}
/* ДНЕВНОЙ бейдж «Можно записаться сегодня» — зелёная пилюля (переиспользует
   primary-токены, но насыщеннее .pcard__badge, чтобы доступность «сегодня»
   читалась сразу). Точка-индикатор подчёркивает «свободно прямо сейчас».
   Рендерится только когда id психолога есть в дневном book-today.json.
   Стоит ВЫШЕ гибкого спейсера (.pcard__row{margin-top:auto}), поэтому
   карточки с бейджем и без него всё равно равной высоты (нижний блок
   прижат к низу грид-стретчем). */
.pcard__today{display:inline-flex;align-items:center;gap:7px;margin:2px 0 0;
  padding:5px 11px;border-radius:var(--bb-radius-pill);
  background:var(--bb-color-primary-bg);color:var(--bb-color-primary-text);
  border:1px solid var(--bb-color-primary-light);
  font-size:.76rem;font-weight:700;line-height:1.2;max-width:100%}
.pcard__today::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;
  background:var(--bb-color-primary)}

/* ============================== JOURNAL STRIP ============================== */
/* табы «Последнее / Популярное» (pill-кнопки, активная — заливка) */
.jtabs__nav{display:inline-flex;gap:6px;margin:4px 0 22px;padding:5px;
  background:var(--bb-color-surface-tag);border-radius:var(--bb-radius-pill)}
.jtab{appearance:none;border:0;cursor:pointer;font:inherit;font-weight:600;font-size:.92rem;
  padding:8px 18px;min-height:40px;border-radius:var(--bb-radius-pill);
  background:transparent;color:var(--bb-color-text-muted);transition:.18s var(--bb-ease-out)}
.jtab:hover{color:var(--bb-color-text-strong)}
.jtab.is-active{background:var(--bb-gradient-primary);color:#fff;box-shadow:var(--bb-shadow-card)}
.jtab:focus-visible{outline:2px solid var(--bb-color-primary);outline-offset:2px}

.jcards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.jcard{background:#fff;border:1px solid var(--bb-color-border);border-radius:var(--bb-radius-xl);overflow:hidden;
  box-shadow:var(--bb-shadow-card);transition:.2s;display:flex;flex-direction:column}
.jcard:hover{transform:translateY(-3px);box-shadow:var(--bb-shadow-card-hover)}
.jcard__cover{height:150px}
/* cover — реальная обложка (живые данные) */
.jcard__cover--img{width:100%;object-fit:cover;display:block}
.jc1{background:linear-gradient(135deg,#5b8def,#7b46d8)}
.jc2{background:linear-gradient(135deg,#2bbf64,#1d8443)}
.jc3{background:linear-gradient(135deg,#f5a623,#ef6b8d)}
.jcard__body{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}
.jcard__cat{align-self:flex-start;padding:4px 11px;border-radius:var(--bb-radius-pill);
  background:var(--bb-color-surface-tag);color:var(--bb-color-text-muted);font-size:.76rem;font-weight:600}
.jcard__title{font-weight:700;color:var(--bb-color-text-strong);font-size:1.02rem;line-height:1.35}
.jcard__date{margin-top:auto;color:var(--bb-color-text-subtle);font-size:.83rem}

/* ============================== REVIEWS ============================== */
.reviews{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.review{margin:0;background:#fff;border:1px solid var(--bb-color-border);border-radius:var(--bb-radius-xl);
  padding:22px;box-shadow:var(--bb-shadow-card);display:flex;flex-direction:column;gap:12px}
.review__rt{color:var(--bb-color-star);font-size:1rem;letter-spacing:2px}
.review__rt--dim{color:var(--bb-color-border-strong)}
.review__tx{margin:0;color:var(--bb-color-text-body);font-size:1rem;line-height:1.6}
.review__by{display:flex;align-items:center;gap:10px;color:var(--bb-color-text-muted);font-size:.9rem}
.review__ava{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#fff;
  font-weight:700;font-size:.85rem;flex:none}
.review__ava--img{overflow:hidden;background:var(--bb-color-surface-tag)}
.review__ava--img img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}

/* --- REVIEWS CAROUSEL — лента живых отзывов: равная высота карточек,
   обрезка текста по строкам (clamp) + «Читать полностью», листание стрелками.
   Нативный скроллбар скрыт; на тач остаётся свайп (scroll-snap).
   Блок ВИЗУАЛЬНО ШИРЕ обычного .wrap: своя обёртка .reviews-wrap (max ~1380px),
   центрируется, внутренний паддинг = .wrap. Карточки крупнее (440px) — на
   десктопе помещается ~3 крупные карточки. Лента overflow внутри своего
   контейнера (max-width:100%) → горизонтального скролла СТРАНИЦЫ не даёт. --- */
.reviews-wrap{max-width:1380px;margin:0 auto;padding-inline:clamp(16px,5vw,40px)}
.reviews-carousel{position:relative;max-width:100%}
.reviews-rail{display:flex;gap:22px;overflow-x:auto;overflow-y:hidden;max-width:100%;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  align-items:stretch; /* равная высота карточек в ряду */
  padding:4px 2px 8px;margin:0 -2px;
  scrollbar-width:none;-ms-overflow-style:none} /* нативный скроллбар скрыт */
.reviews-rail::-webkit-scrollbar{display:none;width:0;height:0}
.review--rail{flex:0 0 auto;width:min(440px,88vw);scroll-snap-align:start;
  margin:0;background:#fff;border:1px solid var(--bb-color-border);border-radius:var(--bb-radius-xl);
  padding:26px 28px;box-shadow:var(--bb-shadow-card);display:flex;flex-direction:column;gap:14px}
.review--rail .review__tx{font-size:1.05rem}
/* текст отзыва: обрезка по 5 строкам (clamp), низкие равные карточки */
.review--rail .review__tx{flex:1 0 auto;margin:0;overflow:hidden;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5}
/* раскрытая карточка — снять clamp */
.review--rail.is-expanded .review__tx{display:block;-webkit-line-clamp:unset;overflow:visible}
/* кнопка «Читать полностью / Свернуть» */
.review__more{align-self:flex-start;appearance:none;background:none;border:0;cursor:pointer;
  font:inherit;font-size:.86rem;font-weight:600;padding:0;margin:-4px 0 0;
  color:var(--bb-color-primary-text)}
.review__more:hover{color:var(--bb-color-primary-dark);text-decoration:underline}
.review__more:focus-visible{outline:2px solid var(--bb-color-primary);outline-offset:2px;border-radius:4px}
.review__by{margin-top:auto} /* подпись прижата к низу — карточки ровные */
.review__psy{color:var(--bb-color-primary-text);font-weight:600;text-decoration:none}
.review__psy:hover{color:var(--bb-color-primary-dark);text-decoration:underline}

/* стрелки листания ‹ › */
.reviews-arrow{position:absolute;top:42%;z-index:2;width:44px;height:44px;
  display:grid;place-items:center;border-radius:50%;cursor:pointer;
  border:1px solid var(--bb-color-border);background:#fff;color:var(--bb-color-text-strong);
  font-size:1.6rem;line-height:1;box-shadow:var(--bb-shadow-card-hover);
  transition:.18s var(--bb-ease-out)}
.reviews-arrow:hover{background:var(--bb-color-primary-bg);color:var(--bb-color-primary-text)}
.reviews-arrow:focus-visible{outline:2px solid var(--bb-color-primary);outline-offset:2px}
.reviews-arrow[hidden]{display:none}
/* стрелки слегка наезжают на края ленты (внутри .reviews-wrap),
   чтобы не выходить за пределы страницы на 1280 */
.reviews-arrow--prev{left:-6px}
.reviews-arrow--next{right:-6px}
/* свайп-хинт под лентой отзывов (виден только на мобиле, где стрелки скрыты) */
.reviews-swipe{display:none;align-items:center;justify-content:center;gap:7px;
  margin:14px auto 0;font-size:.85rem;color:var(--bb-color-text-muted);font-weight:500}
.reviews-swipe__ico{display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;background:var(--bb-color-primary-bg);
  color:var(--bb-color-primary-dark);font-size:1.1rem;line-height:1;
  animation:revSwipeNudge 1.4s var(--bb-ease-out) infinite}
@keyframes revSwipeNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@media(prefers-reduced-motion:reduce){.reviews-swipe__ico{animation:none}}

/* ============================== T1.1 RESPONSIVE ============================== */
@media(max-width:1024px){
  .psy-strip{grid-template-columns:repeat(2,1fr)}
  .jcards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  .hero-home .wrap{grid-template-columns:1fr;gap:30px}
  .hiw{grid-template-columns:1fr}
  .jcards{grid-template-columns:1fr}
  .reviews{grid-template-columns:1fr}
  /* на телефоне/планшете листаем отзывы свайпом — стрелки прячем, показываем хинт */
  .reviews-arrow{display:none!important}
  .reviews-swipe{display:flex}
}
@media(max-width:520px){
  .psy-strip{grid-template-columns:1fr}
  .facesrow .cap{margin-left:0;margin-top:6px;flex-basis:100%}
  .jtabs__nav{display:flex;width:100%}
  .jtab{flex:1;text-align:center;padding-inline:10px}
}

/* T1.1: reduced-motion — погасить hero-моушен/чипы/прогресс */
@media(prefers-reduced-motion:reduce){
  .quiz .chips .chip{opacity:1!important;transform:none!important}
  .quiz .prog i{width:22%!important}
}

/* ============================================================================
   T1.3 problem-shell — SEO-страница проблемы (hero проблемы, симптомы-список,
   читаемая проза «как помогает», related-чипы, финальный CTA).
   Переиспользует токены и существующие примитивы (.label,.hero-h,.lead,.chip,
   .hero-cta,.microtrust,.bb-acc,.pcard,.jcard). Новых стилей — минимум.
   ========================================================================== */

/* hero проблемы — мягкий тинт + читаемая колонка по центру */
.prob-hero{background:var(--bb-hero-tint),linear-gradient(120deg,#f3fbf6 0%,#f6f9fd 60%);
  padding-block:clamp(40px,7vw,80px)}
.prob-hero__inner{display:flex;flex-direction:column;align-items:flex-start}
.prob-hero__h1{margin:.35em 0 .4em}
.prob-hero__lead{max-width:60ch}
.prob-hero .hero-cta{margin-top:26px}

/* список симптомов — карточки-маркеры в 2 колонки, на телефоне 1 */
.prob-sympt{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.prob-sympt__item{position:relative;background:#fff;border:1px solid var(--bb-color-border);
  border-radius:var(--bb-radius-lg);box-shadow:var(--bb-shadow-card);
  padding:16px 18px 16px 46px;font-size:1rem;line-height:1.5;color:var(--bb-color-text-body)}
.prob-sympt__item::before{content:"";position:absolute;left:18px;top:21px;width:14px;height:14px;
  border-radius:50%;background:var(--bb-color-primary-bg);
  box-shadow:inset 0 0 0 2px var(--bb-color-primary)}
.prob-sympt__item strong{color:var(--bb-color-text-strong);font-weight:700}
.prob-sympt__note{margin:20px 0 0;padding:16px 18px;background:var(--bb-accent-warm-soft);
  border:1px solid #ffe2cc;border-radius:var(--bb-radius-lg);
  color:var(--bb-color-text-body);font-size:1rem;line-height:1.6}

/* читаемая проза «как помогает терапия» */
.prob-prose p{margin:0 0 16px;font-size:var(--bb-fs-body);line-height:1.7;color:var(--bb-color-text-body);
  max-width:68ch}
.prob-prose p:last-child{margin-bottom:0}
.prob-prose strong{color:var(--bb-color-text-strong)}

/* related-чипы как ссылки (наследуют .chip; здесь только обёртка) */
.prob-related{display:flex;flex-wrap:wrap;gap:10px}

/* финальный CTA-блок */
.prob-cta__inner{text-align:center;background:linear-gradient(135deg,#f0faf3 0%,#eef7ff 100%);
  border:1px solid var(--bb-color-border);border-radius:var(--bb-radius-2xl);
  padding:clamp(28px,5vw,48px);box-shadow:var(--bb-shadow-card)}
.prob-cta__inner .sub{max-width:52ch;margin-left:auto;margin-right:auto}
.prob-cta__btns{justify-content:center}

@media(max-width:640px){
  .prob-sympt{grid-template-columns:1fr}
  .prob-cta__btns{flex-direction:column;align-items:stretch}
  .prob-cta__btns .btn{width:100%}
}

/* ============================================================================
   SECTION TRANSITIONS — ПЕРЕКЛЮЧАТЕЛЬ из 4 трактовок (для ревью).
   Управляется классом на <body>: .fx-1 | .fx-2 | .fx-3 | .fx-4 (см. index.php, ?fx=).
   ----------------------------------------------------------------------------
   ОБЩАЯ БАЗА (всегда): делаем фоны секций ЯВНЫМИ (плоский .sec был прозрачным
   и показывал body=#fff). Это нужно всем трём трактовкам, чтобы швы вели себя
   предсказуемо. z-index лесенкой — на случай наездов в fx-2/fx-3.
   ========================================================================== */
main > .sec{ background:var(--bb-color-surface); }
main > .sec.sec--soft{ background:var(--bb-section-soft); }

/* нарастающий z-index по порядку секций (нужно для наездов fx-2/fx-3) */
main > section:nth-of-type(1){position:relative;z-index:1}
main > section:nth-of-type(2){position:relative;z-index:2}
main > section:nth-of-type(3){position:relative;z-index:3}
main > section:nth-of-type(4){position:relative;z-index:4}
main > section:nth-of-type(5){position:relative;z-index:5}
main > section:nth-of-type(6){position:relative;z-index:6}
main > section:nth-of-type(7){position:relative;z-index:7}
main > section:nth-of-type(8){position:relative;z-index:8}
main > section:nth-of-type(9){position:relative;z-index:9}
.ftr{position:relative;z-index:10}

/* ============================================================================
   fx-1 «БЕСШОВНЫЙ ГРАДИЕНТ»
   Никаких линий и скруглённых наездов. Soft-зоны (.how-it-works, .faq) больше
   не плоские полосы: их фон растворяется вертикальным градиентом
   #fff → #f6f9fd → #fff с широкими перьями (~14%), так что граница со светлыми
   соседями исчезает. Плюс две низкоконтрастные радиальные подсветки бренд-цветом
   (зелёная за hero, тёплая за заголовком «С чем помогаем») — глубина в стиле
   Stripe/Linear, без бандинга и без видимых швов.
   ========================================================================== */
body.fx-1 main > .sec.sec--soft{
  background:
    linear-gradient(180deg,
      var(--bb-color-surface) 0%,
      var(--bb-section-soft) 14%,
      var(--bb-section-soft) 86%,
      var(--bb-color-surface) 100%);
}
/* .trust в fx-1 — тоже бесшовная: убираем border-block и растворяем фон */
body.fx-1 .trust{
  border-block:0;
  background:
    linear-gradient(180deg,
      var(--bb-color-surface) 0%,
      var(--bb-section-soft) 30%,
      var(--bb-section-soft) 70%,
      var(--bb-color-surface) 100%);
}
/* мягкая зелёная подсветка за hero (поверх его собственного градиента) */
body.fx-1 .hero-home::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(900px 520px at 78% -8%,
    rgba(43,191,100,.10) 0%, rgba(43,191,100,0) 60%);
}
body.fx-1 .hero-home .wrap{position:relative;z-index:1}
/* тёплая подсветка за заголовком секции «С чем помогаем» (#themes) */
body.fx-1 #themes{overflow:hidden}
body.fx-1 #themes::before{
  content:"";position:absolute;left:0;right:0;top:-40px;height:420px;pointer-events:none;z-index:0;
  background:radial-gradient(680px 360px at 22% 0%,
    rgba(255,178,122,.12) 0%, rgba(255,178,122,0) 62%);
}
body.fx-1 #themes .wrap{position:relative;z-index:1}

/* ============================================================================
   fx-2 «МЯГКИЕ ВОЛНЫ / КРИВЫЕ»
   Между контрастными секциями — деликатная SVG-кривая малой амплитуды,
   залитая цветом СЛЕДУЮЩЕЙ секции (через CSS mask: волна «съедает» верх блока,
   а фон самого блока её заливает). На всю ширину, без h-scroll. Тонко.
   Применяем на стыках, где есть контраст: hero→trust, how→themes(белый),
   reviews→faq(soft), faq→footer(тёмный). Одноцветные стыки не трогаем.
   ----------------------------------------------------------------------------
   Механика: у «верхней» секции стыка отрицательный margin-top на высоту волны
   (наезжает), а её собственный фон обрезается mask-кривой сверху → получается,
   что фон текущей секции волной «втекает» в предыдущую. Высота волны = --bb-wave.
   ========================================================================== */
body.fx-2{ --bb-wave:54px; }
/* SVG-волна как mask: прозрачная вогнутая дуга сверху, ниже — сплошная заливка.
   preserveAspectRatio none → тянется по ширине.
   Стыки с контрастом (волну заливает фон СЛЕДУЮЩЕЙ секции, т.е. самой секции):
     hero→.trust(soft), how-it-works(soft)→#themes(белый),
     reviews(белый)→faq(soft, sec 8), faq→footer(тёмный).
   Одноцветные стыки (trust→how, themes→psy→journal→reviews) волны НЕ получают. */
body.fx-2 .trust,
body.fx-2 #themes,
body.fx-2 main > section:nth-of-type(8),
body.fx-2 .ftr{
  margin-top:calc(var(--bb-wave) * -1);
  padding-top:calc(var(--bb-wave) + 10px);
  /* два слоя маски: фиксированная по высоте волна сверху (--bb-wave) +
     сплошная заливка ниже. Волна не «растягивается» по высоте секции. */
  -webkit-mask:var(--bb-wave-svg) top center / 100% var(--bb-wave) no-repeat,
               linear-gradient(#000,#000) bottom center / 100% calc(100% - var(--bb-wave) + 1px) no-repeat;
          mask:var(--bb-wave-svg) top center / 100% var(--bb-wave) no-repeat,
               linear-gradient(#000,#000) bottom center / 100% calc(100% - var(--bb-wave) + 1px) no-repeat;
}
body.fx-2{
  /* мягкая низкоамплитудная кривая; preserveAspectRatio none → тянется по ширине,
     вертикаль фиксируется mask-size'ом до --bb-wave. */
  --bb-wave-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='80' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,46 C300,8 560,8 720,28 C900,50 1160,62 1440,26 L1440,80 L0,80 Z' fill='%23000'/%3E%3C/svg%3E");
}
/* hero — первый блок, маску не получает (нечему втекать сверху) */
body.fx-2 main > :first-child{margin-top:0;-webkit-mask:none;mask:none;padding-top:revert}
/* .trust в fx-2: убираем border-block (волна заменяет границу) */
body.fx-2 .trust{border-block:0}

/* ============================================================================
   fx-3 «ПЛАВАЮЩИЕ СЕКЦИИ»
   Белый холст. Сгруппированные/«soft» блоки + блок цифр — крупные скруглённые
   панели (радиус ~30px) с мягкой размытой тенью, «парят» с щедрыми
   вертикальными отступами (SaaS-стиль). Контентные .sec остаются на холсте,
   но между ними — воздух. Footer как обычно (тёмный, на всю ширину).
   ========================================================================== */
body.fx-3{ --bb-float-radius:30px; }
body.fx-3 main{padding-block:20px}
/* «парящие» панели: трактуем как панель .trust + soft-секции */
body.fx-3 .trust,
body.fx-3 main > .sec.sec--soft{
  max-width:1180px;
  margin-inline:auto;
  margin-block:clamp(28px,5vw,56px);
  width:calc(100% - clamp(24px,5vw,64px));
  border:1px solid var(--bb-color-border);
  border-radius:var(--bb-float-radius);
  box-shadow:0 4px 12px rgba(20,30,60,.04),0 24px 60px rgba(20,30,60,.10);
}
/* .trust как парящая карточка: убираем border-block, добавляем внутренний воздух */
body.fx-3 .trust{
  border-block:0;
  background:var(--bb-color-surface);
}
body.fx-3 .trust .wrap{padding-block:34px}
/* soft-секции внутри панели — фон чуть мягче белого, контент с отступом */
body.fx-3 main > .sec.sec--soft{
  background:var(--bb-section-soft);
  padding-block:clamp(40px,6vw,72px);
}
/* контентные (белые) .sec — воздух между блоками без рамки */
body.fx-3 main > .sec:not(.sec--soft){margin-block:clamp(20px,3vw,40px)}
/* hero без верхнего отступа (не уезжает под шапку) */
body.fx-3 main > :first-child{margin-top:0}

/* ============================================================================
   fx-4 «ГИБРИД» (плавающие панели + точечная волна на входе в подвал)
   ----------------------------------------------------------------------------
   БАЗА = как fx-3: белый холст, soft-блоки и блок цифр .trust — крупные
   скруглённые «парящие» панели (radius ~28–32px) с мягкой размытой тенью и
   щедрым воздухом; белые контентные .sec — на холсте, между ними воздух.
   ВОЛНА = как fx-2, но ТОЧЕЧНО только на единственном полноширинном
   контрастном стыке, который остаётся при плавающих панелях: белый холст →
   тёмный подвал .ftr. Волну заливает фон самой .ftr (тёмный), через mask она
   «втекает» вверх в холст — самый эффектный переход. На плавающие панели волну
   НЕ вешаем (получилось бы грязно: панели и так отделены воздухом + тенью).
   ========================================================================== */
body.fx-4{ --bb-float-radius:30px; --bb-wave:54px; }
body.fx-4 main{padding-block:0 20px}/* верхний отступ убран: давал белую полосу под sticky-хедером; нижний нужен для волны в подвал */
/* «парящие» панели: блок цифр .trust + все soft-секции (how / journal / faq) */
body.fx-4 .trust,
body.fx-4 main > .sec.sec--soft{
  max-width:1180px;
  margin-inline:auto;
  margin-block:clamp(28px,5vw,56px);
  width:calc(100% - clamp(24px,5vw,64px));
  border:1px solid var(--bb-color-border);
  border-radius:var(--bb-float-radius);
  box-shadow:0 4px 12px rgba(20,30,60,.04),0 24px 60px rgba(20,30,60,.10);
}
/* .trust как парящая карточка: убираем border-block, внутренний воздух */
body.fx-4 .trust{
  border-block:0;
  background:var(--bb-color-surface);
}
body.fx-4 .trust .wrap{padding-block:34px}
/* soft-секции внутри панели — мягкий фон, контент с отступом */
body.fx-4 main > .sec.sec--soft{
  background:var(--bb-section-soft);
  padding-block:clamp(40px,6vw,72px);
}
/* белые контентные .sec — воздух между блоками без рамки */
body.fx-4 main > .sec:not(.sec--soft){margin-block:clamp(20px,3vw,40px)}
/* hero без верхнего отступа (не уезжает под шапку) */
body.fx-4 main > :first-child{margin-top:0}

/* ВОЛНА в тёмный подвал: .ftr наезжает на холст и обрезается mask-кривой сверху,
   тёмный фон подвала заливает волну (использует --bb-wave-svg из fx-2 ниже —
   определяем его и тут, т.к. fx-2-переменная объявлена в своём блоке). */
body.fx-4{
  --bb-wave-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='80' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,46 C300,8 560,8 720,28 C900,50 1160,62 1440,26 L1440,80 L0,80 Z' fill='%23000'/%3E%3C/svg%3E");
}
body.fx-4 .ftr{
  margin-top:calc(var(--bb-wave) * -1);
  padding-top:calc(var(--bb-wave) + 10px);
  -webkit-mask:var(--bb-wave-svg) top center / 100% var(--bb-wave) no-repeat,
               linear-gradient(#000,#000) bottom center / 100% calc(100% - var(--bb-wave) + 1px) no-repeat;
          mask:var(--bb-wave-svg) top center / 100% var(--bb-wave) no-repeat,
               linear-gradient(#000,#000) bottom center / 100% calc(100% - var(--bb-wave) + 1px) no-repeat;
}

/* ============================================================================
   ОБЩЕЕ: первый блок <main> (hero) никогда не уезжает под шапку.
   ========================================================================== */
main > :first-child{margin-top:0}

/* ---- МОБИЛЬНАЯ адаптация трактовок ---- */
@media(max-width:520px){
  body.fx-2{ --bb-wave:34px; }            /* мельче амплитуда волны на телефоне */
  body.fx-3{ --bb-float-radius:20px; }     /* мягче радиусы парящих панелей */
  body.fx-3 .trust,
  body.fx-3 main > .sec.sec--soft{
    width:calc(100% - 24px);
    margin-block:clamp(18px,4vw,32px);
  }
  /* fx-4: мягче радиусы панелей и мельче амплитуда волны подвала */
  body.fx-4{ --bb-float-radius:20px; --bb-wave:34px; }
  body.fx-4 .trust,
  body.fx-4 main > .sec.sec--soft{
    width:calc(100% - 24px);
    margin-block:clamp(18px,4vw,32px);
  }
}

/* reduced-motion: всё статично (градиенты/тени/маски не анимированы) — ок. */