/* ═══════════════════════════════════════════════════════════════════════════
   Раздел «Сотрудничество» (collaboration/*.html).
   Раскладка — язык страниц игр (hero → секции с eyebrow → тёмная секция → финальная
   карточка) на компонентах UI library. Цвет раздела — синий пара --blue / --blue-dark
   (на старом сайте это фирменный акцент раздела). Тёплый --cream остаётся фоном страницы.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Кнопки — из css/base.css (ui-library.html#buttons): основная — .ui-btn-primary--blue (на телефоне --phone), на тёмных фонах — .ui-btn-secondary--light */

.cx { color: var(--blue-dark); }
.cx h1, .cx h2, .cx h3 { color: var(--blue-dark); }
/* Надзаголовки раздела — рукописный Stampatello без тире, как .cx-script */
.cx .eyebrow { display: inline-block; margin: 0 0 var(--space-3); color: var(--blue); font-family: var(--hand); font-size: clamp(26px, 2.4vw, 32px); font-weight: 400; line-height: 1.1; letter-spacing: .01em; text-transform: none; transform: rotate(-2deg); }
.cx .eyebrow::before { display: none; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.cx-hero { position: relative; min-height: 640px; overflow: hidden; isolation: isolate; }
.cx-hero::before { position: absolute; z-index: -2; inset: 0; content: "";
  background:
    radial-gradient(58% 58% at 86% 34%, rgba(95, 112, 155, .34), transparent 70%),
    radial-gradient(35% 48% at 12% 10%, rgba(255, 255, 255, .74), transparent 76%),
    linear-gradient(126deg, #f6ecdc 0%, #e9e6ea 55%, #d5dbea 100%); }
.cx-hero::after { position: absolute; z-index: -1; right: -140px; bottom: -240px; width: 660px; height: 660px; border: 1px solid rgba(10, 27, 63, .08); border-radius: 50%;
  box-shadow: 0 0 0 80px rgba(255, 255, 255, .05), 0 0 0 160px rgba(255, 255, 255, .04); content: ""; }
.cx-hero-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: center; min-height: 600px; gap: var(--space-8); padding: var(--space-9) 0 calc(var(--space-10) + var(--leaf)); }
.cx-hero-copy { position: relative; z-index: 3; max-width: 610px; }
.cx-hero h1 { margin-bottom: var(--space-6); font-size: clamp(34px, 4.4vw, 56px); line-height: 1.05; }
.cx-hero h1 span { display: block; color: var(--blue); }
.cx-hero--hub h1 { font-size: clamp(34px, 4.8vw, 62px); }
.cx-hero .lead { max-width: 560px; margin: 0; color: color-mix(in srgb, var(--blue-dark) 78%, transparent); font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; }
.cx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-7); }

.cx-visual { position: relative; min-height: 480px; }
.cx-halo { position: absolute; left: 50%; top: 50%; width: min(520px, 90%); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: rgba(255, 255, 255, .45); box-shadow: inset 0 0 0 1px rgba(10, 27, 63, .06); }
.cx-banner { position: absolute; left: 6%; right: 0; top: 50%; translate: 0 -50%; aspect-ratio: 1110 / 491; overflow: hidden; border-radius: 24px; background: var(--blue-dark); box-shadow: var(--shadow-md); }
.cx-banner img { width: 100%; height: 100%; object-fit: cover; }
.cx-float { position: absolute; z-index: 2; width: clamp(120px, 14vw, 170px); aspect-ratio: 3 / 4; object-fit: cover; border: 6px solid var(--paper); border-radius: 18px; box-shadow: var(--shadow-md); }
.cx-float--a { left: 0; bottom: 6px; rotate: -7deg; }
.cx-float--b { right: 2%; top: 8px; rotate: 6deg; }
@media (max-width: 979px) { .cx-float { width: 110px; } .cx-float--a { bottom: 12px; } .cx-float--b { top: 4px; } }
/* Хаб: хиро ниже, без CTA; вертикальное фото в исходных пропорциях */
.cx-hero--hub { min-height: 560px; }
.cx-hero--hub .cx-hero-grid { min-height: 520px; padding: var(--space-7) 0 calc(var(--space-9) + var(--leaf)); }
.cx-hero--hub .cx-visual { min-height: 460px; }
.cx-hero--hub .cx-banner { left: 50%; right: auto; width: min(330px, 62%); translate: -50% -50%; aspect-ratio: 286 / 388; background: none; }
/* Парящие фото хаба — тоже в исходных пропорциях: горизонтальное (a) и вертикальное (b) */
.cx-hero--hub .cx-float { background: var(--paper); }
.cx-hero--hub .cx-float--a { width: clamp(170px, 19vw, 230px); aspect-ratio: 350 / 238; }
.cx-hero--hub .cx-float--b { aspect-ratio: 286 / 388; }
@media (max-width: 979px) { .cx-hero--hub .cx-float--a { width: 150px; } }

/* ── Отраслевые шапки: у каждой страницы свой центральный визуал (вместо общей синей плашки) ── */
/* Магазины и блогеры — вертикальное фото 4:5 в синем дуотоне раздела (tools/collab-duotone.py) */
.cx-photo { position: absolute; z-index: 1; left: 50%; top: 50%; width: min(340px, 60%); aspect-ratio: 4 / 5; translate: -50% -50%; overflow: hidden;
  border-radius: 24px; background: var(--blue-dark); box-shadow: var(--shadow-md); }
.cx-photo img { width: 100%; height: 100%; object-fit: cover; }
/* Компании — веер из трёх фото, механика .pg-fan из ui-library.html#fan: сдвиг, поворот и подъём крайних, средняя сверху */
.cx-fan { --fan-width: clamp(150px, 15vw, 210px); --fan-step: calc(var(--fan-width) * .62); --fan-angle: 10deg; position: absolute; inset: 0; }
.cx-fan img { position: absolute; left: 50%; top: 50%; width: var(--fan-width); aspect-ratio: 3 / 4; object-fit: cover; border: 6px solid var(--paper); border-radius: 18px;
  background: var(--paper); box-shadow: var(--shadow-md); transform-origin: 50% 90%;
  transform: translate(calc(-50% + var(--fan-step) * var(--fan-i)), calc(-50% + var(--fan-lift))) rotate(calc(var(--fan-angle) * var(--fan-i))); }
.cx-fan img:nth-child(1) { --fan-i: -1; --fan-lift: 18px; z-index: 1; }
.cx-fan img:nth-child(2) { --fan-i: 0; --fan-lift: -8px; z-index: 3; }
.cx-fan img:nth-child(3) { --fan-i: 1; --fan-lift: 18px; z-index: 2; }
/* Эксперты — портрет в круге, вокруг концентрические кольца, как у .cx-hero::after: «эксперт в центре внимания» */
.cx-portrait { position: absolute; z-index: 1; left: 50%; top: 50%; width: min(320px, 58%); aspect-ratio: 1; translate: -50% -50%; border: 8px solid var(--paper); border-radius: 50%;
  background: var(--paper); box-shadow: 0 0 0 40px rgba(95, 112, 155, .12), 0 0 0 80px rgba(95, 112, 155, .07), var(--shadow-md); }
.cx-portrait img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
@media (max-width: 979px) {
  .cx-visual:has(.cx-photo, .cx-fan, .cx-portrait) { min-height: 420px; }
  .cx-visual:has(.cx-fan) { min-height: 320px; }
  .cx-photo { width: min(280px, 64%); }
  .cx-fan { --fan-width: clamp(120px, 34vw, 170px); --fan-angle: 9deg; }
  .cx-portrait { width: min(260px, 62%); box-shadow: 0 0 0 26px rgba(95, 112, 155, .12), 0 0 0 52px rgba(95, 112, 155, .07), var(--shadow-md); }
}

/* ── Секции ──────────────────────────────────────────────────────────────── */
/* Секции — «листы»: каждая следующая заходит на предыдущую большим скруглением сверху (выбран из 12 вариантов
   перехода, архив — archive/collab-transitions-variants.html). Отступы — по шкале ui-library.html#spacing:
   --leaf (32→48) — сколько лист заходит на соседа, --sheet-y (48→80) — видимый воздух сверху и снизу внутри листа. */
.collab { --leaf: clamp(var(--space-7), 4vw, var(--space-9)); --sheet-y: clamp(var(--space-9), 6vw, var(--space-11)); }
.cx-hero ~ .cx-section,.cx-hero ~ .cx-final{ position: relative; margin-top: calc(-1 * var(--leaf)); border-radius: var(--leaf) var(--leaf) 0 0;
  box-shadow: 0 -24px 48px -28px rgba(10, 27, 63, .28); }
/* сверху — ровно --sheet-y от края листа; снизу +--leaf, потому что низ закрывает следующий лист (и подвал) */
.cx-hero ~ .cx-section, .cx-hero ~ .cx-final { overflow: hidden; padding: var(--sheet-y) 0 calc(var(--sheet-y) + var(--leaf)); }
/* Фон светлых секций — «Скошенные полосы» (ui-library.html#gradients: linear 45°, hard-stops, ритм слева-снизу
   вправо-вверх) в синем ключе раздела вместо голого --cream. Вариации — чтобы соседние секции не сливались. */
.cx-stripes { --s-angle: 45deg; --s1: #e9e6ea; --s2: #dde1ec; --s3: #d0d7e8; --s4: #c4cde3;
  background: linear-gradient(var(--s-angle), var(--s1) 0 30%, var(--s2) 30% 54%, var(--s3) 54% 76%, var(--s4) 76% 100%); }
.cx-stripes--mirror { --s-angle: -45deg; }
.cx-stripes--reverse { --s-angle: 225deg; }
.cx-stripes--soft { --s-angle: 135deg; --s1: #eeebee; --s2: #e3e5ee; --s3: #d8deeb; --s4: #ccd4e6; }
.cx .section-head p { color: color-mix(in srgb, var(--blue-dark) 78%, transparent); }
.cx-section .section-head { margin-bottom: var(--space-8); }
.cx h2 { font-size: clamp(30px, 3.6vw, 52px); }

.cx-cards { display: grid; gap: var(--space-6); grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.cx-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; background: var(--paper); box-shadow: var(--shadow-md); }
.cx-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cx-card--wide img { aspect-ratio: 5 / 2; }
.cx-card__body { padding: var(--space-6) var(--space-6) var(--space-7); }
.cx-card h3 { margin: 0 0 var(--space-3); font-size: clamp(21px, 2vw, 26px); font-weight: 700; line-height: 1.15; }
.cx-card p { margin: 0; font-size: 15px; line-height: 1.55; color: color-mix(in srgb, var(--blue-dark) 82%, transparent); }
.cx-card p + p { margin-top: var(--space-3); }
.cx-card--row { flex-direction: row; align-items: stretch; }
.cx-card--row img { flex: 0 0 38%; width: 38%; aspect-ratio: auto; min-height: 220px; }
.cx-card img.cx-img--top { object-position: 50% 0; } /* в кадре голова у верхнего края — обрезаем снизу */
.cx-card--row .cx-card__body { align-self: center; }

/* Категории хаба — как .ui-cat из библиотеки: фото + синий градиент, текст снизу, кнопка .btn-secondary--light.
   Кликабельна вся карточка: слой-ссылка .cx-cat-cover под текстом (без фокуса и озвучки), основная ссылка — кнопка */
.cx-cat { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 420px; overflow: hidden; border-radius: 20px; padding: var(--space-7) var(--space-6); color: var(--cream); background: var(--blue-dark);
  box-shadow: var(--shadow-md); }
.cx-cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cx-cat::before { position: absolute; inset: 0; z-index: 1; content: ""; background: linear-gradient(180deg, rgba(10, 27, 63, .05) 20%, rgba(10, 27, 63, .92) 100%); }
.cx-cat-cover { position: absolute; inset: 0; z-index: 2; }
.cx-cat > div { position: relative; z-index: 3; pointer-events: none; }
.cx-cat > div a { pointer-events: auto; }
.cx-cat h3 { margin: 0 0 var(--space-3); color: var(--cream); font-size: clamp(24px, 2.4vw, 30px); font-weight: 700; line-height: 1.1; }
.cx-cat p { margin: 0 0 var(--space-6); font-size: 15px; line-height: 1.5; color: var(--cream); opacity: .92; }
.cx-cat a:focus-visible { outline: 3px solid var(--honey); outline-offset: 3px; }

/* Doodle-фон — рукописные значки из assets/doodle-icons бледным узором (маска, как .dood-* в ui-library.html#icons).
   Разметка: <div class="cx-doodles" aria-hidden="true"><i style="--icon:url(…svg)"></i>×10</div> первым ребёнком секции. */
.cx-doodle-bg { background: linear-gradient(180deg, var(--paper), #eef0f5); }
.cx-doodles { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
.cx-doodles ~ .wrap { position: relative; z-index: 1; }
.cx-doodles i { position: absolute; width: 64px; aspect-ratio: 1; background: var(--blue); opacity: .2;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.cx-doodles i:nth-child(1)  { left: 3%;  top: 9%;  rotate: -12deg; }
.cx-doodles i:nth-child(2)  { left: 46%; top: 5%;  rotate: 8deg; width: 48px; }
.cx-doodles i:nth-child(3)  { right: 4%; top: 11%; rotate: 14deg; }
.cx-doodles i:nth-child(4)  { left: 1%;  top: 44%; rotate: 6deg; width: 52px; }
.cx-doodles i:nth-child(5)  { right: 2%; top: 40%; rotate: -10deg; width: 56px; }
.cx-doodles i:nth-child(6)  { left: 48%; top: 52%; rotate: -6deg; width: 44px; }
.cx-doodles i:nth-child(7)  { left: 4%;  bottom: 8%; rotate: 10deg; }
.cx-doodles i:nth-child(8)  { left: 30%; bottom: 4%; rotate: -14deg; width: 48px; }
.cx-doodles i:nth-child(9)  { right: 30%; bottom: 5%; rotate: 12deg; width: 50px; }
.cx-doodles i:nth-child(10) { right: 3%; bottom: 9%; rotate: -8deg; }
@media (max-width: 979px) { .cx-doodles i { width: 40px; } }

/* «Кристалл» — 3× radial mesh из ui-library.html#gradients в синем ключе раздела */
.cx-bg-mesh { background:
  radial-gradient(42% 46% at 12% 22%, rgba(95, 112, 155, .38), transparent 70%),
  radial-gradient(38% 42% at 88% 30%, rgba(108, 64, 127, .22), transparent 70%),
  radial-gradient(46% 44% at 58% 96%, rgba(236, 160, 74, .26), transparent 72%),
  var(--paper); }
/* Кольца — концентрические круги, как у .cx-hero::after, на светло-голубом (не путать с белой формой) */
.cx-bg-rings { background: linear-gradient(180deg, #eef0f5, #e3e7f0); }
.cx-bg-rings::before, .cx-bg-rings::after { position: absolute; z-index: 0; border: 1px solid rgba(10, 27, 63, .16); border-radius: 50%; content: ""; pointer-events: none; }
.cx-bg-rings::before { left: -220px; top: -260px; width: 720px; height: 720px; box-shadow: 0 0 0 80px rgba(95, 112, 155, .09), 0 0 0 160px rgba(95, 112, 155, .06); }
.cx-bg-rings::after { right: -260px; bottom: -300px; width: 760px; height: 760px; box-shadow: 0 0 0 90px rgba(95, 112, 155, .09), 0 0 0 180px rgba(95, 112, 155, .06); }
.cx-bg-rings > .wrap { position: relative; z-index: 1; }

/* Тёмная секция — как .audience на страницах игр, но в синем */
.cx-dark { position: relative; overflow: hidden; background: var(--blue-dark); color: var(--paper); }
.cx-dark::after { position: absolute; right: -120px; top: -160px; width: 520px; height: 520px; border: 1px solid rgba(255, 255, 255, .10); border-radius: 50%; box-shadow: 0 0 0 70px rgba(255, 255, 255, .03); content: ""; pointer-events: none; }
.cx-dark .section-head, .cx-points { position: relative; z-index: 2; }
.cx-dark h2 { color: var(--paper); }
.cx-dark .eyebrow { color: var(--yellow); }
.cx-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.cx-point { min-height: 190px; padding: var(--space-6); border: 1px solid rgba(255, 255, 255, .16); border-radius: 18px; background: rgba(255, 255, 255, .06); }
.cx-point .cx-num { display: block; margin-bottom: var(--space-7); color: var(--yellow); font-family: var(--hand); font-size: 28px; line-height: 1; }
.cx-point h3 { margin: 0 0 var(--space-2); color: var(--paper); font-size: 19px; font-weight: 700; line-height: 1.2; }
.cx-point p { margin: 0; color: rgba(255, 252, 245, .74); font-size: 15px; line-height: 1.5; }
.cx-point--text { font-size: 17px; line-height: 1.45; color: rgba(255, 252, 245, .82); }
.cx-point--text b { color: var(--paper); font-weight: 700; }

/* Шаги — цифры Stampatello, как в proof-bar библиотеки */
.cx-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.cx-steps li { padding: var(--space-6); border-radius: 20px; background: var(--paper); box-shadow: var(--shadow-md); font-size: 17px; line-height: 1.45; }
.cx-steps .cx-num { display: block; margin-bottom: var(--space-4); color: var(--blue); font-family: var(--hand); font-size: clamp(36px, 3.6vw, 48px); line-height: 1; }

/* ── Финальная карточка с формой ─────────────────────────────────────────── */
.cx-final { background: var(--paper); }
.cx-final-card { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-9); align-items: center; overflow: hidden; padding: var(--space-10); border-radius: 28px; background: linear-gradient(135deg, var(--blue-dark), #1c2f66); color: var(--paper); }
.cx-final-card::after { position: absolute; right: -180px; bottom: -230px; width: 600px; height: 600px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%; box-shadow: 0 0 0 65px rgba(255, 255, 255, .03); content: ""; pointer-events: none; }
.cx-final-copy { position: relative; z-index: 3; }
.cx-final-copy .eyebrow { color: var(--yellow); }
/* Рукописный акцент вместо eyebrow — Stampatello, как .dg-hero-script */
.cx-script { display: inline-block; margin: 0 0 var(--space-3); color: var(--yellow); font-family: var(--hand); font-size: clamp(26px, 2.4vw, 32px); line-height: 1.1; transform: rotate(-2deg); }
.cx-final-copy h2 { max-width: 14ch; margin-bottom: var(--space-4); color: var(--paper); }
.cx-final-copy p { max-width: 38ch; margin: 0; color: rgba(255, 252, 245, .82); font-size: 18px; line-height: 1.5; }

.cl-form { position: relative; z-index: 3; padding: var(--space-7); border-radius: 20px; background: var(--paper); color: var(--blue-dark); box-shadow: 0 28px 60px -30px rgba(0, 0, 0, .55); }
.cl-form label:not(.uf-consent-label) { display: block; margin: var(--space-4) 0 var(--space-2); font-size: 14px; font-weight: 600; color: var(--blue-dark); }
.cl-form label:first-of-type { margin-top: 0; }
.cl-form input[type=text], .cl-form input[type=email], .cl-form textarea { width: 100%; min-height: 48px; padding: 12px 16px; border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--paper); color: var(--blue-dark); font: inherit; font-size: 15px; font-weight: 500; }
.cl-form input:focus-visible, .cl-form textarea:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent); }
.cl-form textarea { min-height: 88px; resize: vertical; }

.cl-form .cl-status { margin-top: var(--space-2); min-height: 20px; font-size: 13.5px; }
.cl-form .cl-status:not(:empty) { margin-bottom: var(--space-4); }
.cl-form .cl-status.ok { color: var(--good); font-weight: 600; }
.cl-form .cl-status.err { color: var(--bad); font-weight: 600; }
.cl-form .ui-btn-primary { margin-top: var(--space-4); }

/* ── Планшет / мобильная ─────────────────────────────────────────────────── */
@media (max-width: 979px) {
  .cx-hero { min-height: 0; }
  .cx-hero-grid { grid-template-columns: 1fr; min-height: 0; gap: var(--space-7); padding: var(--space-7) 0 calc(var(--space-9) + var(--leaf)); }
  .cx-visual { min-height: 0; padding: var(--space-7) 0; }
  .cx-halo { display: none; }
  .cx-banner { position: relative; left: auto; right: auto; top: auto; translate: none; margin: 0 4%; aspect-ratio: 366 / 467; }
  .cx-hero--hub, .cx-hero--hub .cx-hero-grid, .cx-hero--hub .cx-visual { min-height: 0; }
  .cx-hero--hub .cx-hero-grid { padding: var(--space-7) 0 calc(var(--space-9) + var(--leaf)); }
  /* Отраслевые страницы: кнопка «Начать сотрудничество» — под фотографиями, по центру. Обёртка текста раскрывается
     (display: contents), и кнопка встаёт в общую колонку после визуала; отступы — margin'ами текста и padding визуала */
  .cx-hero-grid:has(.cx-actions) { gap: 0; }
  .cx-hero-grid:has(.cx-actions) .cx-hero-copy { display: contents; }
  .cx-hero-grid:has(.cx-actions) .cx-visual { order: 1; }
  .cx-hero-grid:has(.cx-actions) .cx-actions { order: 2; justify-content: center; margin-top: 0; }
  .cx-hero--hub .cx-banner { left: auto; width: auto; max-width: 330px; margin: 0 auto; translate: none; aspect-ratio: 286 / 388; }
  .cx-cards, .cx-steps { grid-template-columns: 1fr; gap: var(--space-4); }
  .cx-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-card--row { flex-direction: column; }
  .cx-card--row img { flex: none; width: 100%; aspect-ratio: 4 / 3; min-height: 0; }
  .cx-cat { min-height: 340px; }
  .cx-final-card { grid-template-columns: 1fr; gap: var(--space-7); padding: var(--space-8) var(--space-6); }
  .cx-final-copy h2 { max-width: none; }
}
@media (max-width: 620px) {
  .cx-points { grid-template-columns: 1fr; }
  .cx-point { min-height: 0; }
  .cx-point .cx-num { margin-bottom: var(--space-5); }
  .cl-form { padding: var(--space-6) var(--space-5); }
  .cl-form .ui-btn-primary { display: flex; width: fit-content; margin-inline: auto; } /* «Отправить» — по центру формы */
}

/* ── Шапка и подвал раздела — синие ──────────────────────────────────────── */