/* Утилита: визуально скрытый label для скринридеров */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ============================================================
   v2 · Дизайн-система под айдентику Skillbox
   ------------------------------------------------------------
   Источники: material-brand.skillbox.ru (4 цвета + Graphik LC TT),
   live.contented.ru/intensive_graph (тёмные hero, неон-акцент,
   3D-объекты, sans-serif lowercase).

   Graphik LC TT — лицензионный, заменяем на бесплатный Inter
   (geometric sans с близкими метриками). Unbounded оставлен
   для display-заголовков, Fraunces — для editorial-моментов
   ВНУТРИ работ клиентов студии (логотипы, сертификаты),
   Caveat — для рукописных стикеров на доске задач.
   ============================================================ */

:root {
  /* ---------- Skillbox brand palette ---------- */
  --sb-blue:   #3D3BFF;
  --sb-pink:   #FCACA9;
  --sb-black:  #000000;
  --sb-white:  #FFFFFF;

  /* ---------- Поверхности ---------- */
  --bg-canvas: #FFFFFF;        /* основной фон страницы (был тёплый бежевый) */
  --bg-soft:   #F4F4F2;        /* приглушённая карточка (бренд-гайд) */
  --bg-frame:  #FFFFFF;        /* белые карточки поверх canvas */
  --bg-dark:   #0A0A0A;        /* тёмные блоки (по образцу Contented hero) */

  /* ---------- Текст ---------- */
  --ink:       #000000;        /* чистый чёрный заголовков */
  --ink-soft:  #6B6B6B;        /* приглушённый текст */
  --ink-mute:  #9A9A9A;        /* подписи и метки */

  /* ---------- Бордюры ---------- */
  --rail:        #E8E8E6;      /* лёгкая разделительная линия */
  --rail-strong: #BDBDBD;      /* контурные кнопки */

  /* ---------- Акценты ---------- */
  --accent:      #D2FF4F;      /* неон-салат — CTA-моменты, бейджи */
  --accent-soft: #EBFCB8;
  --accent-ink:  #1F2A00;      /* контрастный текст на ярком акценте */

  /* ---------- Состояния ---------- */
  --err: #E0483D;
  --ok:  #3F9B6E;

  /* ---------- Тени и радиусы ---------- */
  --shadow-sm: 0 4px 12px -4px rgba(0,0,0,0.08);
  --shadow:    0 12px 32px -16px rgba(0,0,0,0.18);
  --shadow-lg: 0 28px 56px -28px rgba(0,0,0,0.28);
  --shadow-window: 0 24px 48px -24px rgba(0,0,0,0.32), 0 2px 6px rgba(0,0,0,0.06);

  --radius-card:    24px;      /* крупные радиусы по гайду Skillbox */
  --radius-window:  28px;      /* для device-frame чата */
  --radius-bubble:  20px;
  --radius-pill:    999px;

  /* ---------- Палитра «творческой доски» ---------- */
  --board-cork:        #C9A579;
  --board-cork-edge:   #8B6B43;
  --board-paper:       #F8F4EB;
  --board-paper-edge:  #D5CDB8;
  --board-clip:        #B7B7B0;
  --board-pin-red:     #E0483D;
  --board-pin-blue:    var(--sb-blue);
  --board-tape:        rgba(255, 232, 115, 0.65);

  /* ---------- Цвета стикеров ---------- */
  --sticky-yellow: #FFE873;
  --sticky-pink:   #FCACA9;
  --sticky-mint:   #C7F2D6;
  --sticky-blue:   #C4D9FF;

  /* ---------- Чат: пузыри ---------- */
  --bubble-them-bg:  #ECECEE;   /* серый «входящий» (одинаков обоих режимов) */
  --bubble-them-tx:  #0A0A0A;
  --bubble-personal: #007AFF;   /* iMessage-синий — личный мессенджер */
  --bubble-corporate:#34C759;   /* зелёный — корпоративный мессенджер */
  --bubble-me-tx:    #FFFFFF;
}

/* ============================================================
   Base
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  /* Глобальный Contented-фон: голубое небо. Hero и другие экраны
     накладывают свои декорации поверх. */
  background:
    linear-gradient(180deg, #A4DAF4 0%, #BFE3F2 60%, #D5ECF5 100%);
  background-attachment: fixed;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  color: var(--ink);
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

/* Глобальный декор-слой: pixel-облака внизу страницы, видны на всех экранах.
   z-index: -1 ставит за всем контентом; pointer-events: none — не мешает кликам.
   Анимация: keyframe `cloud-drift` плавно колышет облака слева-направо +
   reactive parallax от --mx/--my (mousemove на :root). */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    url("figma/cloud-blue-large.png"),
    url("figma/cloud-blue-large.png"),
    url("figma/cloud-blue-large.png");
  background-repeat: no-repeat;
  background-size: 280px, 200px, 320px;
  image-rendering: pixelated;
  opacity: 0.85;
  /* Двойной эффект: keyframe-drift модулирует background-position,
     CSS translate реагирует на курсор */
  animation: bg-cloud-drift 26s ease-in-out infinite;
  translate: calc(var(--mx, 0) * -40px) calc(var(--my, 0) * 18px);
  transition: translate 0.6s cubic-bezier(0.2,0.8,0.2,1);
}

@keyframes bg-cloud-drift {
  0%   { background-position: -40px calc(100% - 20px), 50% calc(100% + 10px), calc(100% + 60px) calc(100% - 40px); }
  50%  { background-position:  10px calc(100% - 30px), 44% calc(100% + 0px),  calc(100% + 20px) calc(100% - 50px); }
  100% { background-position: -40px calc(100% - 20px), 50% calc(100% + 10px), calc(100% + 60px) calc(100% - 40px); }
}

/* Также idle-drift для task-board декораций (облако сверху + мобильник-стикер) */
.task-board::before { animation: tb-cloud-bob 9s ease-in-out infinite; }
.task-board::after  { animation: tb-phone-sway 7s ease-in-out infinite; }
@keyframes tb-cloud-bob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 12px -6px; }
}
@keyframes tb-phone-sway {
  0%, 100% { transform: rotate(-8deg) translate(0, 0); }
  50%      { transform: rotate(-5deg) translate(-6px, 4px); }
}

/* Alpine: прятать до инициализации */
[x-cloak] { display: none !important; }

/* ============================================================
   Типографика
   ============================================================ */
.font-display { font-family: 'Unbounded', 'Inter', sans-serif; letter-spacing: -0.01em; }
.font-sans    { font-family: 'Inter', -apple-system, sans-serif; }
.font-serif   { font-family: 'Inter', -apple-system, sans-serif; }  /* override — было Fraunces */
.font-edit    { font-family: 'Fraunces', Georgia, serif; }          /* editorial-моменты ВНУТРИ работ студии */
.font-hand    { font-family: 'Caveat', 'Comic Sans MS', cursive; }  /* для стикеров на доске */

h1, h2, h3, .h-display { font-family: 'Unbounded', 'Inter', sans-serif; letter-spacing: -0.015em; }

/* ============================================================
   Кнопки
   ============================================================ */
.btn {
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 500;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--sb-black);
  color: var(--sb-white);
  padding: 16px 32px;
  font-size: 15px;
  letter-spacing: 0;
}
.btn-primary:hover { background: var(--sb-blue); }

.btn-brand {
  background: var(--sb-blue);
  color: var(--sb-white);
  padding: 16px 32px;
  font-size: 15px;
}
.btn-brand:hover { box-shadow: var(--shadow); transform: translateY(-1px); }

.btn-accent {
  background: var(--accent);
  color: var(--accent-ink);
  padding: 16px 32px;
  font-size: 15px;
  font-weight: 600;
}
.btn-accent:hover { box-shadow: var(--shadow); transform: translateY(-1px); }

.btn-ghost {
  background: transparent;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  padding: 12px 22px;
  font-size: 13px;
  font-weight: 500;
}
.btn-ghost:hover { background: var(--ink); color: var(--sb-white); }
.btn-ghost.active { background: var(--ink); color: var(--sb-white); }

/* ============================================================
   Карточки выбора
   ============================================================ */
.choice-card {
  background: var(--bg-frame);
  border: 1.5px solid var(--rail);
  border-radius: var(--radius-card);
  padding: 20px 22px;
  cursor: pointer;
  transition: border-color .2s ease, transform .15s ease, box-shadow .2s ease;
  text-align: left;
  font-family: inherit;
}
.choice-card--compact { padding: 13px 18px; }
.choice-card:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow); }
.choice-card.selected { border-color: var(--sb-blue); border-width: 2px; }
.choice-card.is-correct { border-color: var(--ok); border-width: 2px; background: #F1F8F3; }
.choice-card.is-wrong   { border-color: var(--err); border-width: 2px; background: #FBF0EF; }
.verdict-ok { color: var(--ok); }
.verdict-no { color: var(--err); }

/* ============================================================
   Поля форм
   ============================================================ */
.field {
  width: 100%; padding: 14px 16px;
  border: 1.5px solid var(--rail);
  border-radius: 14px;
  font-family: inherit; font-size: 15px;
  background: var(--bg-frame); color: var(--ink);
}
.field:focus { outline: none; border-color: var(--sb-blue); }
.field.error { border-color: var(--err) !important; }

/* ============================================================
   Юр-блок / стипендия Skillbox
   ============================================================ */
.legal-link    { color: var(--sb-blue); text-decoration: underline; cursor: pointer; }
.consent-check { width: 24px; height: 24px; flex-shrink: 0; accent-color: var(--sb-blue); cursor: pointer; }
.consent-row.error .consent-check { outline: 2px solid var(--err); outline-offset: 2px; border-radius: 4px; }
.consent-row.error .consent-label { color: var(--err); }
.sb-badge { color: var(--sb-blue); font-family: 'Unbounded', 'Inter', sans-serif; font-weight: 700; }

/* ============================================================
   ЧАТ · device-frame (десктоп-монитор / мобильный телефон)
   ============================================================ */

/* Корневой контейнер чата — sky-blue фон от body виден вокруг устройства.
   Внутри chat-device визуализация мессенджера НЕ меняется. */
.chat-screen {
  background: transparent;
  padding: 24px 16px 32px;
}

/* «Устройство» — окно с тонким бордером-bezel и шапкой */
.chat-device {
  max-width: 720px;
  margin: 0 auto;
  background: var(--sb-white);
  border-radius: var(--radius-window);
  box-shadow: var(--shadow-window);
  overflow: hidden;
  border: 1px solid var(--rail);
  display: flex;
  flex-direction: column;
  min-height: 70vh;
}
@media (min-width: 768px) {
  .chat-device { min-height: 76vh; }
}

/* Шапка устройства — заодно «traffic lights» в стиле macOS */
.chat-titlebar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: #F5F5F4;
  border-bottom: 1px solid var(--rail);
  position: relative;
}
.chat-lights { display: flex; gap: 6px; flex-shrink: 0; }
.chat-lights i {
  width: 11px; height: 11px; border-radius: 50%;
  display: block;
  background: #FF5F57;
  box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.1);
}
.chat-lights i:nth-child(2) { background: #FEBC2E; }
.chat-lights i:nth-child(3) { background: #28C840; }

/* Центральный «таб» в шапке — имя собеседника */
.chat-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--sb-white);
  border: 1px solid var(--rail);
  border-radius: var(--radius-pill);
  padding: 5px 14px 5px 5px;
  margin: 0 auto;
  font-size: 12px;
  color: var(--ink);
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-tab .chat-tab-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--sb-blue);
  color: var(--sb-white);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600;
  flex-shrink: 0;
}
.chat-tab-sub { color: var(--ink-mute); }

/* ---------- Корпоративный мессенджер: синяя шапка студии ----------
   Применяется на всех data-mode="corporate" экранах (4.5 и далее).
   Форму окна НЕ меняем — только заливка titlebar становится Skillbox-синей,
   «светофор» уезжает в белую плашку, имя студии — белым нашим шрифтом (Inter). */
.chat-screen[data-mode="corporate"] .chat-titlebar {
  background: var(--sb-blue);
  border-bottom: none;
}
.chat-screen[data-mode="corporate"] .chat-lights {
  background: var(--sb-white);
  padding: 5px 8px;
  border-radius: 8px;
}
.chat-screen[data-mode="corporate"] .chat-tab {
  background: transparent;
  border: none;
  margin: 0;
  max-width: none;
  overflow: visible;
  color: var(--sb-white);
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 700;
  font-size: 14px;
}
.chat-screen[data-mode="corporate"] .chat-tab-avatar { display: none; }
.chat-screen[data-mode="corporate"] .chat-tab-sub {
  color: rgba(255,255,255,0.72);
  font-weight: 500;
}
.chat-screen[data-mode="corporate"] .chat-channel-tag {
  color: rgba(255,255,255,0.72);
}

/* Лента сообщений */
.chat-feed {
  flex: 1;
  padding: 20px 16px 24px;
  background: var(--sb-white);
  overflow-y: auto;
}
@media (min-width: 768px) {
  .chat-feed { padding: 24px 32px 28px; }
}

/* Скролл-контейнер чата */
.chat-scroll { display: flex; flex-direction: column; gap: 8px; }

/* Подвал устройства — поле ввода (декоративное, не функциональное) */
.chat-composer {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: #FAFAF9;
  border-top: 1px solid var(--rail);
}
.chat-composer-input {
  flex: 1;
  background: var(--sb-white);
  border: 1px solid var(--rail);
  border-radius: var(--radius-pill);
  padding: 9px 16px;
  font-size: 13px;
  color: var(--ink-mute);
}
.chat-composer-send {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--sb-blue);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}

/* Элемент сообщения — блок на всю ширину колонки; выравнивание содержимого
   через margin:auto (надёжнее флекса: короткие пузыри не схлопываются). */
.chat-item { display: block; }
.chat-item > .chat-bubble,
.chat-item > .chat-item-el { margin-right: auto; }            /* them — слева */
.chat-item--me > .chat-bubble,
.chat-item--me > .chat-item-el { margin-right: 0; margin-left: auto; }  /* me — справа */
.chat-item-el { width: max-content; max-width: 100%; }

/* ---------- Пузыри ---------- */
.chat-bubble {
  max-width: 80%;
  width: max-content;        /* по содержимому, чтобы короткие пузыри не схлопывались в флексе */
  padding: 10px 14px;
  border-radius: var(--radius-bubble);
  font-size: 15px;
  line-height: 1.4;
  font-family: inherit;
  word-wrap: break-word;
}
.chat-bubble.them {
  background: var(--bubble-them-bg);
  color: var(--bubble-them-tx);
  border-bottom-left-radius: 6px;
  align-self: flex-start;
}
.chat-bubble.me {
  background: var(--bubble-personal);
  color: var(--bubble-me-tx);
  border-bottom-right-radius: 6px;
  align-self: flex-end;
}
/* Корпоративный режим: «me» переходит в зелёный */
.chat-screen[data-mode="corporate"] .chat-bubble.me {
  background: var(--bubble-corporate);
}

/* Аватарка слева у входящего сообщения — облегчённая в новой системе */
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--sb-blue);
  color: var(--sb-white);
  border: none;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
}
/* Корпоративный — аватарка контрастная (например, оливковая или зелёная) */
.chat-screen[data-mode="corporate"] .avatar {
  background: var(--sb-black);
  color: var(--accent);
}

/* Фото-аватар Веры — заменяет букву «В» реальным фото.
   ?v=N нужен свой: CSS url() кэшируется отдельно от HTML. */
.avatar.avatar--vera,
.chat-screen[data-mode="corporate"] .avatar.avatar--vera,
.chat-tab .chat-tab-avatar.chat-tab-avatar--vera {
  background: url("figma/vera.png?v=80") center / cover no-repeat;
  color: transparent;
  font-size: 0 !important;
}
.avatar.avatar--daniil,
.chat-screen[data-mode="corporate"] .avatar.avatar--daniil,
.chat-tab .chat-tab-avatar.chat-tab-avatar--daniil {
  background: url("figma/daniil.png?v=142") center 28% / cover no-repeat;
  color: transparent;
  font-size: 0 !important;
}

/* Метка-«читается как канал» поверх шапки в корп-режиме */
/* Slack-гибрид: шапка группы (имя+время) и реакции */
.chat-group + .chat-group { margin-top: 14px; }
.chat-author {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.2;
}
.chat-time {
  font-size: 11px;
  color: var(--ink-mute);
  line-height: 1.2;
}
.chat-reaction {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--sb-white);
  border: 1px solid var(--rail);
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.chat-channel-tag {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--ink-mute);
  font-weight: 500;
}

/* ============================================================
   ЗАДАЧИ · «творческая доска» + окно поверх
   ============================================================ */

/* Внешний слой — небо с pixel-облаками вместо корборда (Contented-стиль).
   На фоне между облаками — мобильник-стикер как декор. */
.task-board {
  position: relative;
  min-height: 100vh;
  background: transparent;  /* sky-blue придёт от body */
  padding: 32px 16px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .task-board { padding: 56px 32px; }
}
/* мобайл: сборщик сертификата (t4-builder) ужимается под экран — был обрезан overflow:hidden */
@media (max-width: 767px) {
  .task-board { padding: 24px 12px; }
  .task-window--builder {
    max-width: 100% !important;
    width: 100%;
    min-width: 0;
    padding: 20px 14px;
  }
  /* цветов 9 — в одну строку на мобайле не влезают; убираем 6-й и 9-й (десктоп не трогаем) */
  .cert-colors > button:nth-child(6), .cert-colors > button:nth-child(9) { display: none; }
  .cert-colors { gap: 7px !important; flex-wrap: nowrap; }
  .cert-colors > button { width: 33px !important; height: 33px !important; }
  /* логотип на макете — компактнее, чтобы не наезжал на иллюстрацию */
  .cert-preview .cert-logo-m { width: 60px !important; }
  /* мобайл: иллюстрация прижата к низу карточки + ближе к тексту (ориентир — ракета, самая высокая) */
  .cert-preview .cert-illust-wrap { bottom: 0 !important; top: 158px !important; left: 0 !important; right: 0 !important; }
  .cert-preview .cert-illust-wrap img { object-position: 50% bottom !important; transform-origin: 50% bottom !important; }
  /* мобайл: тексты крупнее (~×1.5 от компактной версии); ширина под полную, чтобы не давило в иллюстрацию */
  .cert-preview .cert-text  { max-width: 100% !important; }
  .cert-preview .cert-title { font-size: 18px !important; line-height: 1.15 !important; letter-spacing: -0.025em !important; }
  .cert-preview .cert-sub   { font-size: 14px !important; line-height: 1.3 !important; }
  /* уменьшаем внутр. паддинг карточки, чтобы заг #2 в 1 строку и подзаги в 2 строки */
  .cert-preview.p-5 { padding: 14px !important; }
}
/* перенос строки только на мобайле (заг сертификата, заг b6-results и пр.) */
@media (min-width: 768px) {
  br.br-mobile-only { display: none; }
}

/* Декоративные облака + мобильник на доске задач */
.task-board::before {
  content: '';
  position: absolute;
  top: 10%;
  left: 6%;
  width: 220px;
  height: 100px;
  background-image: url("figma/cloud-blue-large.png");
  background-repeat: no-repeat;
  background-size: contain;
  image-rendering: pixelated;
  pointer-events: none;
  opacity: 0.7;
}
.task-board::after {
  content: '';
  position: absolute;
  top: 12%;
  right: 4%;
  width: 180px;
  height: 280px;
  background-image: url("figma/pixel-phone-pink.png");
  background-repeat: no-repeat;
  background-size: contain;
  transform: rotate(-8deg);
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 768px) {
  .task-board::before { width: 130px; height: 60px; top: 5%; }
  .task-board::after  { width: 90px;  height: 140px; top: 5%; right: 3%; }
}

/* Старые декор-элементы корборда (handwritten стикеры, булавки, скотч)
   на task-board больше не нужны — заменены воздушными облаками + мобильником */
.task-board .sticker,
.task-board .pin,
.task-board .tape { display: none; }

/* ---------- Декор «рабочей доски» задания (десктоп) ----------
   На экранах, где пользователь что-то «дизайнит», вокруг окна —
   телефон + стикер с брифом + checker-ленты. Облака идут от body.
   На .task-board--decor отключаем дженерик-облако/телефон (::before/::after),
   т.к. ставим свой набор. Мобайл — декор скрыт (только окно). */
.task-board--decor::before,
.task-board--decor::after { display: none; }

/* «Чистая» доска: убираем телефон (::after), оставляем только
   анимированное облако (::before) + облака от body. */
.task-board--clean::after { display: none; }

/* ---------- Карточки выбора логотипа (t2-work) ---------- */
.logo-card {
  border: 1px solid var(--rail);
  border-radius: 16px;
  overflow: hidden;
  background: var(--sb-white);
  text-align: center;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.12s;
}
.logo-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.logo-card-img {
  aspect-ratio: 16 / 9;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  padding: 8%;
}
.logo-card-img img { width: 100%; height: 100%; object-fit: contain; }
.logo-card-head { padding: 10px 8px; transition: background 0.15s, color 0.15s; }
/* выбранная карточка — подсветка хедера полупрозрачным Skillbox-синим + рамка */
.logo-card.is-picked { border-color: var(--sb-blue); box-shadow: 0 0 0 2px var(--sb-blue); }
.logo-card.is-picked .logo-card-head { background: rgba(61, 59, 255, 0.12); }
.logo-card.is-picked .logo-card-head .font-display { color: var(--sb-blue); }

/* готовый логотип (t2-done) — картинка в скруглённой карточке */
.logo-final {
  width: 100%;
  max-width: 360px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: #fff;            /* подложка под прозрачный PNG-лого */
  padding: 8% 10%;
}
.logo-final img { display: block; width: 100%; height: auto; }

/* комментарий выбора — полупрозрачная плашка снизу */
.logo-comment {
  margin: 22px auto 0;
  max-width: 26rem;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: rgba(61, 59, 255, 0.10);
  border: 1px solid rgba(61, 59, 255, 0.18);
  border-radius: 14px;
  padding: 12px 18px;
}

.board-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.board-decor img { position: absolute; }

/* Телефон + «волны звонка» по бокам — позиционируем группой */
.board-decor .bd-phone-wrap {
  position: absolute;
  left: 6%; top: 10%;
}
.board-decor .bd-phone {
  position: static;
  display: block;
  width: clamp(150px, 14vw, 215px);
  transform: rotate(-4deg);
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.14));
  animation: ring-buzz 1.1s ease-in-out infinite;
  transform-origin: 50% 60%;
}
.board-decor .bd-ring {
  position: absolute;
  top: 18%;
  width: clamp(34px, 3.4vw, 54px);
  image-rendering: pixelated;
  filter: drop-shadow(0 1px 2px rgba(40,90,160,0.25));
}
.board-decor .bd-ring-r { left: 100%;  margin-left: 4px;  animation: ring-pulse 1.3s ease-in-out infinite; }
.board-decor .bd-ring-l { right: 100%; margin-right: 4px; animation: ring-pulse-l 1.3s ease-in-out infinite; }

@keyframes ring-buzz {
  0%, 100% { transform: rotate(-6deg); }
  25%      { transform: rotate(-2.5deg); }
  50%      { transform: rotate(-6deg); }
  75%      { transform: rotate(-9deg); }
}
@keyframes ring-pulse {
  0%, 100% { opacity: 0.3;  transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1.1); }
}
@keyframes ring-pulse-l {
  0%, 100% { opacity: 0.3;  transform: scaleX(-1) scale(0.85); }
  50%      { opacity: 1;    transform: scaleX(-1) scale(1.1); }
}
.board-decor .bd-sticker {
  right: 3.5%; top: 18%;
  width: clamp(180px, 17vw, 250px);
  transform: rotate(4deg);
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.12));
}
/* t3-стикер (новый landscape-арт) — ×2 к базовому размеру */
.board-decor .bd-sticker--lg { width: clamp(360px, 34vw, 500px); }
.board-decor .bd-ribbon { width: clamp(110px, 11vw, 160px); opacity: 0.9; }
.board-decor .bd-ribbon-1 { top: 4%;  right: 25%; transform: rotate(10deg); }
.board-decor .bd-ribbon-2 { bottom: 7%; left: 23%; transform: rotate(-14deg); }

/* окно задачи — над декором */
.task-board--decor .task-window { z-index: 2; }

@media (max-width: 768px) {
  .board-decor { display: none; }
}

/* «Окно» поверх доски — где живёт сам интерфейс задачи */
.task-window {
  position: relative;
  background: var(--sb-white);
  border-radius: var(--radius-window);
  box-shadow: var(--shadow-window);
  border: 1px solid var(--rail);
  padding: 28px 24px;
  max-width: 640px;
  margin: 0 auto;
  z-index: 5;
}
@media (min-width: 768px) {
  .task-window { padding: 36px 40px; }
}

/* Заголовочный «task-bar» окна — повторяет приём из chat-frame */
.task-window-bar {
  display: flex; align-items: center; gap: 10px;
  margin: -28px -24px 20px;
  padding: 10px 14px;
  background: #F5F5F4;
  border-bottom: 1px solid var(--rail);
  border-top-left-radius: var(--radius-window);
  border-top-right-radius: var(--radius-window);
  font-size: 12px;
  color: var(--ink-soft);
}
@media (min-width: 768px) {
  .task-window-bar { margin: -36px -40px 24px; }
}

/* ---------- Декоративные стикеры/кнопки/бумажки ---------- */
.sticker {
  position: absolute;
  font-family: 'Caveat', cursive;
  font-size: 18px;
  line-height: 1.2;
  color: var(--ink);
  padding: 10px 14px;
  box-shadow: var(--shadow-sm);
  z-index: 1;
  user-select: none;
  pointer-events: none;
}
.sticker.note {
  background: var(--sticky-yellow);
  min-width: 96px;
  text-align: center;
}
.sticker.note--pink  { background: var(--sticky-pink); }
.sticker.note--mint  { background: var(--sticky-mint); }
.sticker.note--blue  { background: var(--sticky-blue); }

/* Полароид — белая рамка вокруг цветного блока */
.sticker.polaroid {
  background: var(--sb-white);
  padding: 8px 8px 28px;
  font-size: 13px;
  text-align: center;
  color: var(--ink-soft);
  box-shadow: var(--shadow);
}
.sticker.polaroid > span { display: block; margin-bottom: 6px; }

/* Кнопочка/булавка */
.pin {
  position: absolute;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, var(--board-pin-red) 35%, #7a1f17 100%);
  box-shadow: 0 3px 6px rgba(0,0,0,0.35), inset -1px -2px 2px rgba(0,0,0,0.2);
  z-index: 10;
}
.pin.blue { background: radial-gradient(circle at 35% 35%, #ffffff 0%, var(--sb-blue) 40%, #1d1a99 100%); }
.pin.green { background: radial-gradient(circle at 35% 35%, #ffffff 0%, #28C840 35%, #126b1f 100%); }

/* Полоса вашитейпа */
.tape {
  position: absolute;
  background: var(--board-tape);
  border-left: 1px dashed rgba(0,0,0,0.05);
  border-right: 1px dashed rgba(0,0,0,0.05);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  z-index: 6;
}

/* Утилитарный сдвиг-rotation для рассыпных стикеров */
.tilt-l1 { transform: rotate(-4deg); }
.tilt-l2 { transform: rotate(-7deg); }
.tilt-r1 { transform: rotate(3deg); }
.tilt-r2 { transform: rotate(6deg); }

/* Скрыть мелкие декорации на узких экранах, чтобы не мешали */
@media (max-width: 640px) {
  .sticker.hide-mobile { display: none; }
  .pin.hide-mobile { display: none; }
  .tape.hide-mobile { display: none; }
}

/* ============================================================
   Hero / триггерные пилюли
   ============================================================ */
.trigger-pill {
  background: var(--sb-white);
  border: 1px solid var(--rail);
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
}
.trigger-pill.accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* ============================================================
   Анимации
   ============================================================ */
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop    { 0% { opacity: 0; transform: scale(0.85); } 60% { transform: scale(1.04); } 100% { opacity: 1; transform: scale(1); } }
@keyframes pulseGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(224,72,61,0); } 50% { box-shadow: 0 0 0 8px rgba(224,72,61,0.25); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes typingDot { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.anim-fade-up { animation: fadeUp .5s cubic-bezier(.4,0,.2,1) both; }
.anim-fade-in { animation: fadeIn .5s ease both; }
.anim-pop     { animation: pop .45s cubic-bezier(.34,1.56,.64,1) both; }
.pulse-error  { animation: pulseGlow 1.6s ease-in-out infinite; }

/* Стартовые задержки для каскадного появления */
.d1 { animation-delay: .08s; } .d2 { animation-delay: .16s; } .d3 { animation-delay: .24s; }
.d4 { animation-delay: .32s; } .d5 { animation-delay: .40s; } .d6 { animation-delay: .48s; }

/* Спиннер */
.spinner { width: 44px; height: 44px; border: 3px solid var(--rail); border-top-color: var(--sb-blue); border-radius: 50%; animation: spin .8s linear infinite; }

/* Точки "печатает..." */
.typing span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-soft); margin: 0 2px; animation: typingDot 1.2s infinite; }
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }

/* Аккордеон-стрелка */
.acc-arrow { transition: transform .3s ease; }
.acc-arrow.open { transform: rotate(90deg); }

/* Уважение к prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================
   Титульник каталога (задание #3) — вертикальный постер.
   ============================================================ */
.cat-poster {
  position: relative;
  width: 378px;
  max-width: 100%;
  aspect-ratio: 820 / 1025;
  border-radius: 14px;
  overflow: hidden;
  background: #c7d2ea;
  box-shadow: var(--shadow-lg);
  container-type: inline-size;   /* для cqw-масштабирования заголовка */
}
.cat-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.cat-screen { position: absolute; left: 10.5%; top: 21%; width: 28.5%; height: 45.5%; z-index: 1; overflow: hidden; }
.cat-checker {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(45deg,#b9b9b9 25%,transparent 25%,transparent 75%,#b9b9b9 75%),
    linear-gradient(45deg,#b9b9b9 25%,#ececec 25%,#ececec 75%,#b9b9b9 75%);
  background-size: 12px 12px; background-position: 0 0, 6px 6px;
}
.cat-underlay { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cat-collage { position: absolute; left: 50%; top: 49%; transform: translate(-50%,-50%); width: 144%; max-width: none; }
.cat-title {
  position: absolute; top: 4%; left: 0; right: 0; z-index: 3;
  text-align: center; white-space: nowrap;
  font-family: 'Unbounded','Inter',sans-serif; font-weight: 700;
  color: #0f1118; letter-spacing: -0.02em; line-height: 1.0;
  font-size: 13.6cqw;
}
.cat-studio {
  position: absolute; left: 4%; bottom: 3.5%; z-index: 3;
  font-family: 'Inter',sans-serif; color: #0f1118;
  font-size: 4cqw;                 /* масштабируется вместе с постером */
}
.cat-logo { position: absolute; right: 5%; bottom: 4%; z-index: 3; width: 11cqw; }

/* ---------- Задание #3: 4 поломки на постере ---------- */
.cat-poster .clk { cursor: pointer; }
@keyframes cat-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(61,59,255,0); }
  50%      { box-shadow: 0 0 0 5px rgba(61,59,255,0.55); }
}
.cat-hint { animation: cat-pulse 1.2s ease-in-out infinite; border-radius: 10px; }

/* #1 заголовок: плавный переход; сломан = мелкий рукописный, влево */
.cat-title { transition: font-size .45s, letter-spacing .45s, color .3s; }
.cat-title.broken {
  font-family: 'Caveat','Comic Sans MS',cursive;
  font-weight: 400; font-size: 6cqw; letter-spacing: 0;
  text-align: left; padding-left: 7%; color: #2a2d3a;
}

/* #2 лого: «болтается в воздухе» */
.cat-logo { transition: all .5s cubic-bezier(.2,.8,.2,1); }
.cat-logo.broken { right: auto; left: 50%; bottom: auto; top: 31%; transform: rotate(-18deg) scale(1.15); }

/* #3 подложка съехала -> видны шашечки */
.cat-underlay { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.cat-underlay.broken { transform: translateX(53%); }
.cat-screen-hit {
  position: absolute; left: 10.5%; top: 21%; width: 28.5%; height: 45.5%;
  z-index: 5; border-radius: 18px;
}

/* #4 коллаж: 07 (правильный) ↔ куча 03/04/05 (сломано, неправильный порядок) */
.cat-collage.off { opacity: 0; transform: translate(-50%,-50%) scale(.55); }
.cat-collage.on  { opacity: 1; }
.cat-pile { position: absolute; left: 4%; top: 50%; width: 36%; height: 34%; z-index: 6;
            transition: opacity .45s, transform .45s; }
.cat-pile img { position: absolute; max-width: none; filter: drop-shadow(0 6px 12px rgba(0,0,0,0.35)); }
.cat-pile .pl-1 { width: 52%; left: 0%;   top: 2%;  transform: rotate(-17deg); }  /* цветок (не туда) */
.cat-pile .pl-2 { width: 62%; left: 42%;  top: 6%;  transform: rotate(13deg); }   /* шеврон */
.cat-pile .pl-3 { width: 86%; left: 8%;   top: 34%; transform: rotate(-7deg); }   /* S снизу */
.cat-pile.gone { opacity: 0; transform: translateY(-22%) scale(.7); pointer-events: none; }

/* ============================================================
   Сертификат «Между строк» (задание #4) — макет + лого юзера
   ============================================================ */
.cert-card {
  position: relative;
  width: 190px;
  aspect-ratio: 1566 / 892;
  border-radius: 10px;
  overflow: hidden;
  background: #e8eed8;
  box-shadow: var(--shadow);
}
.cert-card .cert-base { display: block; width: 100%; height: 100%; object-fit: cover; }
.cert-card .cert-logo {
  position: absolute; right: 5.5%; bottom: 6.5%;
  width: 17.3%; height: auto;
  /* прозрачный PNG — «впечатан» в бумагу, без подложки/тени */
}
.cert-card--thumb { cursor: zoom-in; transition: transform .18s ease, box-shadow .18s ease; }
.cert-card--thumb:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.cert-card--full { width: min(86vw, 640px); cursor: default; box-shadow: var(--shadow-lg); }

/* Лайтбокс просмотра вложений */
.lightbox-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10,12,24,0.66);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.lightbox-inner { position: relative; }
.lightbox-close {
  position: absolute; top: 12px; right: 12px; z-index: 10;
  width: 38px; height: 38px; border-radius: 50%;
  border: none; background: #fff; color: #000;
  font-size: 24px; line-height: 1; cursor: pointer;
  box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center;
}
.lightbox-close:hover { background: var(--bg-soft); }

/* Скрытый скроллбар для горизонтальных каруселей */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ============================================================
   6.3 Phone-gate — заблюренный отчёт + контактная форма
   ============================================================ */
.phone-gate { position: relative; overflow: hidden; }

/* блюр секретных значений отчёта (реальный, жёсткий blur — не плашки) */
.rep-blur { filter: blur(10px); -webkit-user-select: none; user-select: none; pointer-events: none; transition: filter .6s ease; }

/* маркеры-буллеты из айдентики (без эмодзи) */
.bm { flex: 0 0 auto; display: block; }
/* колоночная раскладка: 1,2 — левая колонка; 3,4 — правая */
.rep-list { list-style: none; display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-template-columns: repeat(2, 1fr); gap: 18px 22px; }
.rep-list li, .gift-list li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.3; }
.rep-list .bm { width: 21px; height: 21px; color: #0f1118; margin-top: 1px; }
.gift-list { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.gift-list .bm { width: 22px; height: 22px; color: var(--sb-blue); margin-top: 1px; }
.rep-divider { border-top: 1px solid var(--rail); margin: 16px 0; }

/* розовая панель формы (фуксия проекта, полупрозрачная — чтобы читалась ошибка) */
.phone-panel { background: rgba(232,27,127,0.72); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 15px; box-shadow: var(--shadow); color: #fff; }
.phone-panel .field { background: #fff; color: var(--ink); }
/* невалидный телефон на фуксия-фоне: красный кант не читается → синий мигающий
   ободок + пульсирующее синее свечение (контраст + динамика) */
.phone-panel .field.error {
  border-color: var(--sb-blue) !important;
  border-width: 2px;
  animation: phone-field-err 0.9s ease-in-out infinite;
}
@keyframes phone-field-err {
  0%, 100% { border-color: var(--sb-blue); box-shadow: 0 0 0 0 rgba(61,59,255,0.55); }
  50%      { border-color: #fff;          box-shadow: 0 0 0 5px rgba(61,59,255,0.30); }
}
.phone-panel .consent-label { color: #fff; }
.phone-panel .legal-link { color: #fff; text-decoration: underline; }
/* подсказка-ошибка над полем телефона (белым, читаемо на фуксии) */
.phone-err-msg { margin: 0; color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; }
/* ошибка согласия на розовом фоне: красный не читается → синий мигающий кант (как у поля номера) */
.phone-panel .consent-row.error .consent-check {
  outline: 2px solid var(--sb-blue); outline-offset: 2px; border-radius: 4px;
  animation: phone-check-err 0.9s ease-in-out infinite;
}
@keyframes phone-check-err {
  0%, 100% { outline-color: var(--sb-blue); box-shadow: 0 0 0 0 rgba(61,59,255,0.55); }
  50%      { outline-color: #fff;           box-shadow: 0 0 0 5px rgba(61,59,255,0.30); }
}
.phone-panel .consent-row.error .consent-label { color: #fff; }

/* мини-фейерверки на фоне */
.fireworks { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.fw { position: absolute; display: block; opacity: 0; animation: fw-burst 3.4s ease-in-out infinite; }
.fw svg { width: 100%; height: 100%; display: block; }
@keyframes fw-burst {
  0%, 100% { transform: scale(.25) rotate(0deg); opacity: 0; }
  45%      { transform: scale(1) rotate(18deg); opacity: .85; }
  72%      { transform: scale(.9) rotate(8deg); opacity: .35; }
}
.fw-1 { left: 7%;  top: 16%; width: 26px; height: 26px; color: #E81B7F; animation-delay: 0s; }
.fw-2 { left: 90%; top: 22%; width: 18px; height: 18px; color: #3D3BFF; animation-delay: .9s; }
.fw-3 { left: 13%; top: 72%; width: 20px; height: 20px; color: #D2FF4F; animation-delay: 1.7s; }
.fw-4 { left: 84%; top: 66%; width: 24px; height: 24px; color: #E81B7F; animation-delay: 2.4s; }
.fw-5 { left: 48%; top: 7%;  width: 15px; height: 15px; color: #3D3BFF; animation-delay: 1.2s; }
.fw-6 { left: 72%; top: 90%; width: 18px; height: 18px; color: #D2FF4F; animation-delay: .5s; }
/* мобайл: секция длинная (отчёт под блюром скроллится) — собираем звёзды в верхнюю зону, крупнее */
@media (max-width: 768px) {
  .fw-1 { left: 5%;  top: 8%;  width: 28px; height: 28px; }
  .fw-2 { left: 80%; top: 5%;  width: 24px; height: 24px; }
  .fw-3 { left: 9%;  top: 27%; width: 24px; height: 24px; }
  .fw-4 { left: 85%; top: 23%; width: 28px; height: 28px; }
  .fw-5 { left: 45%; top: 3%;  width: 22px; height: 22px; }
  .fw-6 { left: 66%; top: 32%; width: 24px; height: 24px; }
}

/* ============================================================
   3.7.1 · Возраст — выпадающий список
   ============================================================ */
.age-select {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #fff; border: 1.5px solid var(--rail-strong); border-radius: 14px;
  padding: 15px 18px; font-size: 16px; cursor: pointer; text-align: left;
  transition: border-color .15s, box-shadow .15s;
}
.age-select:hover { border-color: var(--sb-blue); }
.age-select.open { border-color: var(--sb-blue); box-shadow: 0 0 0 3px rgba(61,59,255,0.12); }
.age-select .placeholder { color: var(--ink-mute); }
.age-caret { width: 18px; height: 18px; color: var(--ink-soft); flex: 0 0 auto; transition: transform .2s; }
.age-select.open .age-caret { transform: rotate(180deg); }
.age-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20;
  background: #fff; border: 1.5px solid var(--rail); border-radius: 14px;
  box-shadow: var(--shadow); overflow: hidden; padding: 6px;
}
.age-option {
  display: block; width: 100%; text-align: left; padding: 11px 14px;
  border: none; background: transparent; font-size: 15px; border-radius: 9px;
  cursor: pointer; transition: background .12s, color .12s;
}
.age-option:hover { background: var(--bg-soft); }
.age-option.active { background: var(--sb-blue); color: #fff; }

/* ============================================================
   6.4 · Профиль в окне report.exe + раскрывающиеся буллеты
   ============================================================ */
/* светлый фон тела окна, чтобы белые карточки внутри читались */
.profile-window-body { background: #EAEEF4; }

/* раскрывающийся буллет: круглый синий шеврон справа = явная подсказка */
.acc-row { cursor: pointer; transition: background .15s; }
.acc-row:hover { background: var(--bg-soft); }
.acc-chevron {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  background: var(--sb-blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: transform .25s ease, background .15s;
}
.acc-chevron svg { width: 16px; height: 16px; }
.acc-chevron.open { transform: rotate(180deg); }
.acc-item.is-open { outline: 2px solid var(--sb-blue); outline-offset: -2px; }

/* Карусель отзывов выпускников (тёмная карточка) */
.testi-nav {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.12); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1; cursor: pointer; border: none;
  transition: background .15s;
}
.testi-nav:hover { background: rgba(255,255,255,0.24); }
.testi-photo {
  width: 140px; height: 175px; border-radius: 14px;
  background: rgba(255,255,255,0.10);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.5); font-size: 12px; font-family: 'Inter', sans-serif;
}
@media (max-width: 639px) { .testi-photo { width: 100%; height: 150px; } }

/* Карусель отзывов в белой карточке: горизонтальный трек тёмных карточек */
.testi-nav--light { background: #ECECEE; color: #111; }
.testi-nav--light:hover { background: #E0E0E2; }
.testi-track {
  display: flex; gap: 16px; overflow-x: auto;
  scroll-snap-type: x mandatory; padding-bottom: 4px;
}
.testi-card {
  flex: 0 0 auto; width: 88%; max-width: 470px;
  scroll-snap-align: start;
  background: #1C1C1E; color: #fff;
  border-radius: 20px; padding: 18px;
  display: flex; gap: 16px;
}
/* мобайл: фото сверху, текст под ним (а не «сосиской» сбоку) */
@media (max-width: 767px) {
  .testi-card { flex-direction: column; width: 86%; gap: 12px; padding: 14px; }
  .testi-card-photo { width: 100%; height: 168px; }
  .testi-card-img { object-position: center 28%; }
}
.testi-card-photo {
  flex: 0 0 auto; width: 96px; height: 130px; border-radius: 14px;
  background: rgba(255,255,255,0.10); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.45); font-size: 12px; font-family: 'Inter', sans-serif;
}
.testi-card-img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
.testi-role {
  align-self: flex-start; margin-top: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.08); border-radius: 999px;
  padding: 6px 12px; font-family: 'Inter', sans-serif; font-size: 12.5px;
}

/* Акцентная карточка-оффер (фокус конверсии) — чёрный герой */
.offer-focus {
  background: #0A0A0A;
  color: #fff;
  border-radius: 24px;
  padding: 32px 28px;
  box-shadow: var(--shadow-lg);
}
.offer-focus .text-ink-soft { color: rgba(255,255,255,0.72); }
/* декор-звезда: заходит на угол карточки, в основном лежит на фоне */
.offer-focus--star { overflow: visible; }
.offer-star {
  position: absolute; top: -46px; right: -34px;
  width: 130px; height: auto; z-index: 5; pointer-events: none;
}
@media (max-width: 639px) { .offer-star { width: 92px; top: -30px; right: -14px; } }

/* Закреплённый CTA на странице результатов (конверсия) */
.results-sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: rgba(189,227,242,0.92);   /* голубой под фон страницы */
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding: 14px 0;
  box-shadow: 0 -6px 20px rgba(0,0,0,0.06);
}

/* ============================================================
   Экран 6.4 — финальные блоки консультации (целевое действие)
   ============================================================ */
/* overflow: visible — декор (подарок/S) вылезает за край карточки на фон страницы.
   Ширина карточки — как у остальных блоков (без брейк-аута). */
.offer-consult { position: relative; overflow: visible; padding: 26px 30px; text-align: left; }
.offer-consult-grid { display: grid; gap: 16px; align-items: start; }
/* под заголовком: буллеты слева (узкие), форма записи справа (шире) */
@media (min-width: 768px) { .offer-consult-grid { grid-template-columns: 0.62fr 1fr; gap: 22px; } }

/* Заголовок — наверху, КРУПНЫЙ, во всю ширину формы (но не заходит под подарок справа), 2 строки */
.offer-consult .consult-heading {
  font-family: 'Unbounded', 'Inter', sans-serif; font-weight: 600;
  font-size: clamp(1.4rem, 3.1vw, 1.92rem); line-height: 1.06; margin-bottom: 16px;
  max-width: 97%;
}
.offer-consult .consult-bullets { gap: 11px; }
.offer-consult .consult-bullets li { color: #fff; font-size: 12.5px; line-height: 1.3; }
.offer-consult .consult-bullets .bm { color: var(--sb-blue); width: 19px; height: 19px; }

/* пилюля «30 минут с экспертом» */
.consult-pill {
  display: inline-flex; align-items: center; border: 2px solid var(--sb-blue);
  border-radius: 999px; padding: 4px 12px; font-size: 11px; font-weight: 500;
  font-family: 'Inter', sans-serif; color: #fff; margin-bottom: 8px;
}
/* пилюля рядом с заголовком — сразу после «бесплатно!», по тексту */
.consult-heading .consult-pill { margin: 0 0 0 14px; vertical-align: middle; white-space: nowrap; }

/* тёмная форма — мелкие компактные поля (данные предзаполнены) */
.consult-form { position: relative; z-index: 5; }
/* поля ограничены по ширине и прижаты влево — не уходят под подарок; телефон уже email */
.consult-fields { max-width: 300px; }
.consult-row2 { display: grid; grid-template-columns: 130px 1fr; gap: 6px; }
.consult-fieldgroup {
  background: #26262c; border: 1px solid #3a3a42; border-radius: 9px;
  padding: 2px 10px; margin-bottom: 5px; transition: border-color .15s; min-width: 0;
}
.consult-fieldgroup.error { border-color: var(--sb-blue); animation: phone-field-err .9s ease-in-out infinite; }
.consult-flabel { display: block; font-size: 8.5px; letter-spacing: .02em; color: #8e8e98; margin-bottom: 0; }
.consult-input { width: 100%; background: transparent; border: 0; outline: 0; color: #fff; font-size: 11.5px; font-family: 'Inter', sans-serif; }
.consult-input::placeholder { color: #6a6a74; }
/* согласия на тёмном фоне — мельче */
.consult-form .consent-label { color: rgba(255,255,255,0.82); font-size: 10px; line-height: 1.22; }
.consult-form .consent-check { width: 15px; height: 15px; }
.consult-form .legal-link { color: #fff; text-decoration: underline; }
.consult-form .consent-row.error .consent-check {
  outline: 2px solid var(--sb-blue); outline-offset: 2px; border-radius: 4px;
  animation: phone-check-err .9s ease-in-out infinite;
}
/* кнопка «Записаться» — высота на 40% меньше (текст не трогаем) */
.offer-consult .consult-submit { padding: 6px 30px; font-size: 16px; border-radius: 12px; gap: 8px; }

/* декор-подарок — крупный, бОльшая часть «висит на фоне» за плашкой, краем чуть заходит на форму */
.offer-gift {
  position: absolute; right: -190px; top: 50%; bottom: auto; transform: translateY(-48%);
  width: 290px; height: auto; z-index: 6; pointer-events: none;
}
/* мобайл: подарок — в правый верхний угол карточки (над полями формы), не на текст */
@media (max-width: 767px) {
  .offer-gift { width: 142px; right: -12px; top: 6px; bottom: auto; transform: none; }
  /* пилюля — на отдельной строке с воздухом от заголовка */
  .consult-heading .consult-pill { display: flex; width: max-content; margin: 14px 0 0; }
}

/* финальный оффер со «змейкой» S — серая полупрозрачная подложка (не строго чёрная) */
.offer-end { position: relative; overflow: visible; text-align: left; padding: 36px 40px; background: rgba(28,28,32,0.88); }
.offer-end-text { position: relative; z-index: 5; }
/* заголовок — на всю ширину (2 строки), подзаголовок — слева, мимо S справа */
@media (min-width: 768px) { .offer-end p { max-width: 56%; } }
.offer-s {
  position: absolute; right: -28px; bottom: -8px; width: 300px; height: auto;
  z-index: 6; pointer-events: none;
}
@media (max-width: 767px) {
  .offer-end { text-align: center; overflow: hidden; padding: 28px 20px; }
  .offer-s { display: none; }
  /* кнопка консультации — узкая, не на всю ширину, текст в 1 строку */
  .offer-end .btn-cta-fuchsia { padding: 16px 22px; font-size: 15px; }
}