/* ============================================================
   ИНТЕРЬЕРНАЯ ВОРОНКА — дизайн-система
   Швейцарский эдиториал × живой коллаж. Higgsfield-ассеты.
   ============================================================ */

/* ---------- Шрифт (self-host, OFL) ---------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("assets/fonts/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2191, U+2193, U+2212;
}
/* Manrope — основной гротеск (бренд-вайб Skillbox), кириллица+латиница */
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("assets/fonts/manrope-cyrillic.woff2") format("woff2");
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("assets/fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122;
}
/* Playfair Display — серифный акцент для названий стилей (premium-эдиториал) */
@font-face {
  font-family: "Playfair Display"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("assets/fonts/playfair-cyrillic.woff2") format("woff2");
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Playfair Display"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("assets/fonts/playfair-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122;
}
@font-face {
  font-family: "Playfair Display"; font-style: italic; font-weight: 500 700; font-display: swap;
  src: url("assets/fonts/playfair-cyrillic-italic.woff2") format("woff2");
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Playfair Display"; font-style: italic; font-weight: 500 700; font-display: swap;
  src: url("assets/fonts/playfair-latin-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122;
}

/* ---------- Корпоративный шрифт Skillbox — Graphik LC TT (cdn.skillbox.pro) ---------- */
@font-face { font-family: 'Graphik LC TT'; font-style: normal; font-weight: 400; font-display: swap; src: url('https://cdn.skillbox.pro/wbd-front/skillbox-static/general/fonts/GraphikLCTT-VA-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Graphik LC TT'; font-style: normal; font-weight: 500; font-display: swap; src: url('https://cdn.skillbox.pro/wbd-front/skillbox-static/general/fonts/GraphikLCTT-VA-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Graphik LC TT'; font-style: normal; font-weight: 600; font-display: swap; src: url('https://cdn.skillbox.pro/wbd-front/skillbox-static/general/fonts/GraphikLCTT-VA-Semibold.woff2') format('woff2'); }
@font-face { font-family: 'Graphik LC TT'; font-style: normal; font-weight: 700; font-display: swap; src: url('https://cdn.skillbox.pro/wbd-front/skillbox-static/general/fonts/GraphikLCTT-VA-Bold.woff2') format('woff2'); }

/* ---------- Токены ---------- */
:root {
  --paper:    #F4EEE2;   /* кремовая «журнальная страница» */
  --paper-2:  #ECE4D4;
  --paper-3:  #E0D6C2;
  --ink:      #16161A;   /* почти-чёрный текст */
  --ink-soft: #6E6A62;
  --line:     #E0D8C8;
  --blue:     #28409C;   /* legacy (мёртвые блоки старых версий) — в новых стилях НЕ использовать */
  --blue-deep:#1E2E70;   /* legacy */
  --terra:    var(--sb-blue);   /* акцент = фирменный синий Skillbox (редакторский #28409C выведен) */
  --cobalt:   var(--sb-blue);   /* действие = фирменный синий Skillbox */
  --pop:      #C8492E;   /* legacy-имя, см. --err */
  /* семантика «верно/неверно» — единые оттенки на всю воронку */
  --ok:      #1F8A4C;    /* верный ответ: текст/обводки/иконки */
  --ok-bg:   #E7F5EC;    /* верный ответ: подложка */
  --err:     #C8492E;    /* ошибка/перерасход: тёплый терракотовый (не алый) */
  --err-bg:  #FBE9E4;    /* ошибка: подложка */
  --online:  #34D07A;    /* зелёная точка «онлайн» у аватарок */
  --sb-lime:  #D8FF28;   /* legacy (кибербез-стиль) — в этой воронке НЕ использовать, яркий акцент = --ih-gold */
  --sb-dark:  #16161A;   /* legacy */
  --sb-blue:  #3D3BFF;   /* фирменный синий Skillbox — действие/CTA */
  --ih-accent:  #4A3A78; /* сигнатурный акцент — слива/индиго (в родстве с брендовым синим CTA) */
  --ih-accent-d:#37295C; /* тёмный акцент для градиента */
  /* акцентная пара из жёлтой гаммы Skillbox (как их бейджи скидок): плашки — чистый жёлтый,
     текстовые лейблы — тёмная охра той же гаммы (жёлтым текстом на светлом не читается) */
  --sb-yellow: #F6E752;
  --ih-gold:  #F0BC47; /* тёплый янтарь в тон 3D-золоту (монеты hue≈38°), не лимонный */
  --ih-graphite: #363636; /* мягкий графит тёмных карточек (не чёрный) — единый для «Фриланс» и «Тайного подарка» */
  --ih-gold-d:#BE9200;
  --ih-clay:  #C75B45;   /* чистая терракота-коралл (для мелких акцентов) */
  --ih-cream-2: #EFE7D8; /* тёплая плашка-подложка */
  --cream-card: #FFFFFF;
  /* style-pack: акценты-плашки (только из TOKENS.json); mint/peach выведены —
     смета красится системой воронки (золото + терракота) */
  --sp-surface: #F5F5F5;
  /* скругления по системе Skillbox */
  /* галочка бренда: рисованная, с круглыми концами — одна на всю воронку */
  --ck: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.6l4.7 4.7L19 7.2' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ic-gift: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='10' width='18' height='11' rx='1'/%3E%3Crect x='2' y='6' width='20' height='4' rx='1'/%3E%3Cpath d='M12 6v15'/%3E%3Cpath d='M12 6C10.6 3 6.5 3 6.5 6'/%3E%3Cpath d='M12 6c1.4-3 5.5-3 5.5 0'/%3E%3C/svg%3E");
  --ih-r-sm: 12px; --ih-r-md: 18px; --ih-r-lg: 26px; --ih-r-pill: 999px;

  /* legacy-радиусы выровнены на систему Skillbox (--ih-r-*) */
  --r-lg: var(--ih-r-lg);
  --r-md: var(--ih-r-md);
  --r-sm: var(--ih-r-sm);

  /* тени мягкие и рассеянные: раньше большое смещение давало тёмную полосу под карточкой */
  --shadow-soft: 0 1px 2px rgba(40, 30, 20, .04), 0 10px 26px -18px rgba(40, 30, 20, .22);
  --shadow-card: 0 1px 3px rgba(40, 30, 20, .05), 0 16px 38px -26px rgba(40, 30, 20, .26);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out-back: cubic-bezier(.34, 1.56, .64, 1);

  --maxw: 1040px;         /* шире: разворот-журнал */
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }

body {
  font-family: "Graphik LC TT", "Manrope", "Inter", system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

/* зернистость бумаги поверх всего */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Каркас-приложение ---------- */
.app {
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  height: 100dvh;
  margin: 0 auto;
  background: var(--paper);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* десктоп: страница-«журнал» во всю высоту, без «устройства на столе» */
@media (min-width: 540px) {
  body { background: var(--paper); }
  .app { height: 100dvh; }
  /* интерактивные экраны держим комфортной колонкой по центру широкой страницы */
  .stories, .swipe, .board, .result, .light { max-width: 680px; margin: 0 auto; width: 100%; }
}

/* ---------- Боковой коллаж ОТКЛЮЧЁН (вырезки теперь внутри обложки) ---------- */
.ambient { display: none !important; }
@media (min-width: 99999px) {
  .ambient .clip, .ambient .word, .ambient .block, .ambient .cutout {
    position: absolute;
    opacity: 0;
    animation: cutIn .9s var(--ease-out-back) forwards, floatY var(--dur, 9s) var(--ease) infinite alternate;
    animation-delay: var(--delay, 0s), calc(var(--delay, 0s) + .9s);
  }
  /* айтем-вырезка со стикер-обводкой (как в журнальном коллаже LSJ) */
  .ambient .cutout {
    width: var(--w, 150px); height: auto;
    filter:
      drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff)
      drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff)
      drop-shadow(2px 2px 0 #fff) drop-shadow(-2px -2px 0 #fff)
      drop-shadow(2px -2px 0 #fff) drop-shadow(-2px 2px 0 #fff)
      drop-shadow(0 18px 26px rgba(10,14,40,.38));
  }
  /* фото-вырезка как из журнала: белый кант, тень, подпись */
  .ambient .clip {
    width: var(--w, 190px); margin: 0;
    background: #fff; padding: 8px 8px 30px;
    border-radius: 4px;
    box-shadow: 0 26px 50px -18px rgba(30,24,14,.4);
  }
  .ambient .clip img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; border-radius: 2px; }
  .ambient .clip figcaption {
    position: absolute; left: 12px; bottom: 9px;
    font-size: 12px; font-weight: 700; letter-spacing: -.01em; color: var(--ink);
  }
  /* крупное слово-акцент */
  .ambient .word {
    font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 700;
    font-size: 70px; letter-spacing: -.01em; line-height: 1;
    color: transparent; -webkit-text-stroke: 1.5px var(--ink-soft); opacity: 0;
  }
  /* цветной стикер-блок */
  .ambient .block { width: var(--w, 56px); height: var(--w, 56px); border-radius: 8px; }
}
@keyframes cutIn  { from { opacity: 0; transform: translateY(24px) rotate(var(--rot,0deg)) scale(.92); } to { opacity: 1; transform: translateY(0) rotate(var(--rot,0deg)); } }
@keyframes floatY { from { transform: translateY(0) rotate(var(--rot,0deg)); } to { transform: translateY(-22px) rotate(var(--rot,0deg)); } }

/* верхняя плашка-хром (как дизайнерская прога) */
.chrome {
  position: relative; z-index: 30;
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  /* safe-area: бренд не должен лезть под адресную строку браузера на телефоне.
     Контейнер как у контента (1060px) — лого не прибит к краю окна на десктопе */
  width: 100%; max-width: 1060px; margin: 0 auto;
  padding: calc(18px + env(safe-area-inset-top)) 20px 12px;
}
@media (min-width: 900px) { .chrome { padding-left: 32px; padding-right: 32px; } }
.chrome .brand {
  display: flex; align-items: center; gap: 10px;
}
.brand-logo { height: 30px; width: auto; display: block; }
.brand-tag {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); border-left: 1.5px solid var(--line); padding-left: 10px;
}
.chrome .step {
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
}

/* прогресс-нить */
/* прогресс — фирменный синий на светлом треке (чёрный читался как «жирная линия» под лого) */
.progress { flex: 0 0 auto; height: 3px; background: var(--line); margin: 0 18px; border-radius: 3px; }
.progress > i { display: block; height: 100%; width: 0; background: var(--sb-blue); border-radius: 3px; transition: width .6s var(--ease); }

/* область экранов */
.stage { position: relative; flex: 1 1 auto; overflow: hidden; }

.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: 10px 18px 22px;
  opacity: 0; visibility: hidden;
  transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility .5s;
}
.screen.active { opacity: 1; visibility: visible; transform: none; }

/* ---------- Типографика ---------- */
.kicker {
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--terra);
  display: flex; align-items: center; gap: 8px;
}
.display {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 900; letter-spacing: -.01em; line-height: .98;
  font-size: clamp(44px, 13vw, 66px);
}
/* заголовок экрана — Graphik Semibold (система воронки), серифы только в концепт-блоках (названия стилей) */
.h2 { font-weight: 600; letter-spacing: -.02em; line-height: 1.12; font-size: clamp(25px, 6.4vw, 32px); overflow-wrap: break-word; }
.lead { font-size: 16px; line-height: 1.45; color: var(--ink-soft); }

/* ---------- Кнопки ---------- */
.btn {
  appearance: none; border: none; cursor: pointer;
  font-family: inherit; font-weight: 600; font-size: 16px;
  padding: 17px 22px; border-radius: 100px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: transform .25s var(--ease-out-back), background .25s, box-shadow .25s;
}
.btn:active { transform: scale(.96); }
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { box-shadow: 0 14px 30px -12px rgba(0,0,0,.5); }
.btn--cobalt { background: var(--cobalt); color: #fff; }   /* электрик-синий + белый текст */
.btn--sbblue { background: var(--sb-blue); color: #fff; }   /* фирменный синий Skillbox */
.btn--sbblue:hover { background: #302EF0; }
.btn--block { width: 100%; }

/* ============================================================
   ЭКРАН 1 · ИНТРО v6 — фирстиль Skillbox (Graphik LC TT),
   палитра «дорогой беж + изумруд + золото», CTA в первой зоне,
   кадр-анимация «дизайнер → журнальный интерьер», большой подарок
   ============================================================ */
.ih {
  /* скроллбар спрятан: его трек и резерв под него (scrollbar-gutter) рисовали вертикальную линию у правого края на всю высоту */
  height: 100%; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  width: 100%; max-width: 500px; margin: 0 auto;
  padding: 12px 16px calc(26px + env(safe-area-inset-bottom));
  font-family: "Graphik LC TT", "Manrope", sans-serif;
}
.ih::-webkit-scrollbar { width: 0; height: 0; }

/* ЗОНА 1 — кадр ограничен по высоте, ниже подглядывает «что тебя ждёт внутри» */
.ih__fold { display: flex; flex-direction: column; padding-bottom: 4px; }

.ih__eyebrow {
  display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft);
  background: var(--ih-cream-2); border: 1px solid var(--line);
  padding: 6px 13px; border-radius: var(--ih-r-pill);
}
.ih__h1 {
  font-weight: 600; line-height: 1.04; letter-spacing: -.015em;
  font-size: clamp(27px, 7.6vw, 38px); margin: 12px 0 0; color: var(--ink);
}
.ih__accent { color: var(--ink); }
.ih__sub { font-size: 14.5px; line-height: 1.4; color: var(--ink-soft); margin: 10px 0 0; max-width: 32em; }
.ih__sub b { color: var(--ink); font-weight: 600; }

/* кадр-фокал: кросс-фейд «дизайнер → журнальный интерьер» */
.ih__cover {
  position: relative; margin: 14px 0 0; border-radius: var(--ih-r-lg); overflow: hidden;
  box-shadow: var(--shadow-card); background: var(--paper-2);
  flex: none; aspect-ratio: 4 / 3; max-height: 44vh; min-height: 0;
}
.ih__slide { position: absolute; inset: 0; opacity: 0; animation: ihCarousel 13.5s var(--ease) infinite; }
.ih__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ih__slide--a img { object-position: 50% 32%; }
.ih__slide--a { z-index: 1; animation-delay: 0s; }
.ih__slide--b { z-index: 2; animation-delay: 4.5s; }
.ih__slide--c { z-index: 3; animation-delay: 9s; }
/* каждый кадр: плавно появляется, держится ~1/3 цикла, уходит — карусель «ты → интерьер → интерьер» */
@keyframes ihCarousel { 0% { opacity: 0; } 3% { opacity: 1; } 30% { opacity: 1; } 36% { opacity: 0; } 100% { opacity: 0; } }
.ih__ping {
  position: absolute; z-index: 5; top: 12px; left: 12px; display: flex; align-items: center; gap: 9px;
  padding: 7px 14px 7px 7px; border-radius: var(--ih-r-pill);
  background: rgba(255,255,255,.74); border: 1px solid rgba(255,255,255,.9);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 26px -12px rgba(0,0,0,.4);
  animation: pingIn .7s var(--ease-out-back) both .2s;
}
/* без overflow hidden: он резал зелёную точку онлайна на краю круга */
.ih__ping-av { position: relative; width: 30px; height: 30px; flex: 0 0 auto; }
.ih__ping-av img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.ih__ping-av::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--online); border: 2px solid #fff; }
.ih__ping-txt { display: flex; flex-direction: column; line-height: 1.15; }
.ih__ping-txt b { font-size: 12px; font-weight: 600; color: var(--ink); }
.ih__typing { font-size: 11px; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 3px; }
.ih__typing i { width: 3.5px; height: 3.5px; border-radius: 50%; background: currentColor; display: inline-block; animation: typingDot 1.2s infinite; }
.ih__typing i:nth-child(2) { animation-delay: .2s; }
.ih__typing i:nth-child(3) { animation-delay: .4s; }

/* «Бесплатно» — бейдж поверх кадра (верх-право) */
.ih__free {
  position: absolute; z-index: 4; top: 12px; right: 12px;
  font-size: 12px; font-weight: 600; color: #123B2A;
  background: #BFE9C9; border: 1px solid rgba(255,255,255,.5);
  padding: 5px 12px; border-radius: var(--ih-r-pill);
  box-shadow: 0 8px 20px -10px rgba(0,0,0,.35);
}
/* рейтинг с источниками — поверх кадра (низ-лево) */
.ih__rate {
  position: absolute; z-index: 4; bottom: 12px; left: 12px;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 13px; border-radius: var(--ih-r-pill);
  /* цельная белая — полупрозрачная сливалась с фото */
  background: #FFFFFF; border: 0;
  box-shadow: 0 10px 26px -12px rgba(0,0,0,.4);
}
.ih__rate-stars { display: inline-flex; }
.ih__rate-stars svg { display: block; }
.ih__rate-txt { font-size: 11.5px; color: var(--ink); font-weight: 500; }
.ih__rate-txt b { color: var(--ink); font-weight: 600; font-size: 11.5px; }
/* лого площадок (воссоздания под замену официальными файлами) */
.ih__rate-src { display: inline-flex; align-items: center; gap: 6px; margin-left: 2px; }
.lg { font-size: 10.5px; font-weight: 700; line-height: 1; padding: 3px 6px; border-radius: 5px; letter-spacing: -.01em; white-space: nowrap; }
.lg--tt { color: #fff; background: #17171F; }
.lg--oz { color: #fff; background: #43A047; }

/* подпись под кнопкой (без звёзд — рейтинг ушёл на кадр) */
.ih__note { display: inline-flex; align-items: center; gap: 6px; margin: 13px 0 2px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.ih__note svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--ih-gold-d); }
/* «что тебя ждёт внутри» — заметный заголовок со стрелкой-подсказкой + ценность */
.ih__inside { margin: 18px 0 0; }
/* нижние блоки — секции с ритмом воздуха (без принудительного 100vh, иначе короткий контент висит в пустоте) */
.ih__sec { display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; padding: clamp(26px, 4.5vh, 48px) 0; }
.ih__sec--income, .ih__sec--gift { align-items: stretch; }
.ih__sec--income .ih__income, .ih__sec--gift .ih__gift { width: 100%; max-width: 1040px; margin: 0 auto; }
.ih__inside-head { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 10px 0 26px; }
.ih__inside-title { font-weight: 500; font-size: 32px; letter-spacing: -.02em; color: var(--ink); line-height: 1.08; }
.ih__chev { display: none; } /* убран прыгающий золотой шеврон — не в стиле заголовков Skillbox; превью и так подглядывает */
.ih__chev svg { width: 20px; height: 20px; display: block; }
@keyframes chevBounce { 0%,100% { transform: translateY(0); opacity: .65; } 50% { transform: translateY(4px); opacity: 1; } }

.ih__inside-list { display: flex; flex-direction: column; gap: 9px; }
.ih__feat {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 15px; border-radius: var(--ih-r-md);
  background: var(--cream-card); border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(20,16,12,.02);
}
.ih__feat-ic {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px;
  display: grid; place-items: center; color: var(--sb-blue);
  background: linear-gradient(160deg, #EEF0FF, #E4E6FF); border: 1px solid #DADBFF;
}
.ih__feat-ic svg { width: 23px; height: 23px; }
.ih__feat-txt { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.ih__feat-txt b { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ih__feat-txt span { font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }

/* CTA (первая зона) + доверие */
.ih__cta { position: relative; margin: 24px 0 0; font-size: 18px; font-weight: 700; padding: 18px 28px; border-radius: 100px; }
/* пульс-ореол у кнопки убран — у Skillbox кнопки плоские, без свечения */
.ih__trust { margin: 11px 0 2px; text-align: center; font-size: 12px; color: var(--ink-soft); display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.ih__trust b { font-weight: 600; color: var(--ink); font-size: 13px; }
.ih__stars { color: var(--ih-gold); letter-spacing: 1px; font-size: 12px; }

/* доход/подарки — стили v3 в конце файла (система продуктовых страниц Skillbox) */
.ih__income { margin: 0; color: var(--ink); }

/* ============================================================
   CRAFT-ПАСС — эдиториал-уровень: типографика, глубина, motion
   (структура/вординг не тронуты; только исполнение)
   ============================================================ */
:root {
  --sh-1: 0 1px 2px rgba(34,24,14,.04), 0 8px 18px -12px rgba(34,24,14,.16);
  --sh-2: 0 2px 5px rgba(34,24,14,.05), 0 16px 34px -16px rgba(34,24,14,.22);
  /* тень полностью гаснет в пределах 32px от кадра: у .ih по бокам 32px и overflow hidden,
     хвост более широкого размытия режется краем контейнера в видимую вертикальную линию */
  --sh-3: 0 8px 16px -10px rgba(34,24,14,.18), 0 22px 30px -20px rgba(34,24,14,.34);
  --hair: rgba(34,24,14,.10);
}
/* бесшовный тональный фон интро во всю ширину вьюпорта — без вертикального шва на границе колонки .app.
   Тёплая кремовая база (арт-концепт). Ровный однотонный фон: у радиальных градиентов
   край эллипса банддит на 8-битных экранах и читается как «линия» — убрали совсем. */
body.on-intro { background: #F2ECE0; }
body.on-intro .app { background: transparent; max-width: none; }
body.on-intro .step { display: none; } /* «Старт» в шапке на интро не нужен */
#scr-intro { background: transparent; }

/* редакторская типографика: весовой ритм в заголовке */
/* eyebrow-пилюля по фирстилю Skillbox: цельная белая, без рамки (как бейджи на их hero),
   спокойный трекинг ≤.14em, «Бесплатно» тёмным акцентом */
.ih__eyebrow { display: inline-flex; align-items: center; font-size: clamp(10.5px, 2.9vw, 12px); font-weight: 600;
  letter-spacing: .06em; padding: 8px 14px; white-space: nowrap;
  background: #FFFFFF; border: 0; color: var(--ink-soft); }
.ih__eyebrow b { color: var(--ink); font-weight: 700; }
/* H1 держит ровно 2 строки: «Примерь профессию» / «Дизайнер интерьера» — обе части не разрываются,
   размер подогнан так, чтобы длинная часть всегда влезала в колонку */
.ih__h1 { font-weight: 600; letter-spacing: -.03em; line-height: 1.06; font-size: clamp(25px, 8vw, 40px); margin-top: 18px; }
.ih__nw { white-space: nowrap; }
.ih__accent { font-weight: 600; white-space: nowrap; }
.ih__sub { font-size: 16px; line-height: 1.5; max-width: 30ch; margin-top: 16px; }

/* кадр: кинематографичная глубина + рамка-хайрлайн + мягкий скрим */
.ih__cover { box-shadow: var(--sh-3); }
.ih__cover::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  background: linear-gradient(to top, rgba(22,16,10,.36) 0%, rgba(22,16,10,0) 27%, rgba(22,16,10,0) 73%, rgba(22,16,10,.16) 100%); }

/* коллаж: кадр «ты — дизайнер» + приклеенный уголком инсет с материалами */
.ih__collage { position: relative; margin: 14px 0 16px; }
.ih__collage .ih__cover { margin: 0; }
.ih__inset {
  position: absolute; z-index: 8; right: -2px; bottom: -14px; margin: 0;
  width: 40%; max-width: 206px;
  background: #FFFDF8; padding: 7px 7px 7px; border-radius: 11px;
  box-shadow: 0 2px 6px rgba(34,24,14,.12), 0 22px 40px -14px rgba(34,24,14,.5);
  transform: rotate(2.4deg); transform-origin: bottom right;
}
.ih__inset img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; display: block; }
.ih__inset figcaption { text-align: center; font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 700; font-size: 13px; color: var(--ih-gold-d); padding-top: 6px; }

/* растение-вырезка в верхнем-правом углу коллажа */
/* подпись-бриф от клиента (серифная, «отпечатанная») */
/* карточка брифа = вырезка из чата: входящие пузыри от Алины (стиль .pvbub--them) */
.ih__brief { position: absolute; z-index: 9; left: -6px; bottom: 31%; width: 47%; max-width: 208px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  background: var(--ih-cream-2); border: 1px solid var(--hair); border-radius: 13px; padding: 9px 10px 10px;
  box-shadow: 0 2px 6px rgba(34,24,14,.10), 0 20px 38px -16px rgba(34,24,14,.5); transform: rotate(-2deg); }
.ih__brief-k { display: block; margin-bottom: 1px; font-size: 9.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--ih-gold-d); }
.ih__brief-q, .ih__brief-meta {
  display: inline-block; align-self: flex-start; max-width: 100%;
  background: #fff; border: 1px solid var(--hair); border-radius: 12px; border-bottom-left-radius: 5px;
  box-shadow: 0 1px 2px rgba(34,24,14,.05);
}
.ih__brief-q { font-family: inherit; font-style: normal; font-weight: 500; font-size: 12px; line-height: 1.32; color: var(--ink); padding: 7px 10px; }
.ih__brief-meta { font-family: inherit; font-weight: 500; font-size: 10.5px; letter-spacing: 0; color: var(--ink-soft); padding: 6px 10px; }

/* редакторская подпись под кадром */
.ih__fig { margin: 11px 2px 0; display: flex; align-items: baseline; gap: 9px; }
.ih__fig span { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ih-gold-d); flex: 0 0 auto; }
.ih__fig em { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 700; font-size: 15.5px; line-height: 1.1; color: var(--ink-soft); }

/* мобайл: бережём первый экран — редакторскую подпись прячем, растение мельче */
@media (max-width: 560px) {
  .ih__fig { display: none; }
  .ih__collage-plant { width: 96px; top: -40px; right: -14px; }
  .ih__brief { width: 52%; bottom: 30%; }
}

/* точный крафт стеклянных чипов на кадре (поверх скрима) */
.ih__ping { z-index: 7; box-shadow: 0 2px 6px rgba(0,0,0,.12), 0 16px 32px -16px rgba(0,0,0,.55); border-color: rgba(255,255,255,.72); }
.ih__rate { z-index: 6; box-shadow: 0 2px 6px rgba(0,0,0,.12), 0 16px 32px -16px rgba(0,0,0,.55); border-color: rgba(255,255,255,.72); }
.ih__free { z-index: 6; box-shadow: 0 2px 6px rgba(0,0,0,.10), 0 14px 30px -16px rgba(0,0,0,.45); }

/* кнопка: фирменный синий Skillbox #3D3BFF — ПЛОСКАЯ, без свечения/ореола (по брендбуку) */
.ih__cta { background: var(--sb-blue); letter-spacing: .005em; }
/* «Бесплатно» — заметное слово в строке доверия под кнопкой (не на кнопке) */
.ih__note-free { font-weight: 700; color: #1E8E4A; }

/* «что тебя ждёт» — тёплые золотые иконки (меньше синего), мягкая глубина */
.ih__inside-title { font-size: 32px; }
.ih__feat { box-shadow: var(--sh-1); border-color: var(--hair); }
.ih__feat-ic { color: var(--ih-gold-d); background: linear-gradient(160deg, #FBF1DC, #F5E6C7); border-color: #EAD6AC; }

/* тень только у карточки-подарка (контейнер дохода без фона — стиль в .ih__inc выше) */
.ih__gift { box-shadow: var(--sh-1); }

/* «Любимое дело» стилизуется базовыми .ih__income / .ih__inc (стат-карточки) + брейкпоинты ниже */

/* ============================================================
   ПРЕВЬЮ ГЕЙМПЛЕЯ — «что тебя ждёт» мокапами (чат → сбор проекта → разбор)
   ============================================================ */
.ih__preview { display: flex; flex-direction: column; gap: 12px; }
.pv { background: var(--cream-card); border: 1px solid var(--hair); border-radius: 18px; overflow: hidden; box-shadow: var(--sh-1); }
.pv__scr { position: relative; }
.pv__cap { padding: 14px 16px 16px; }
.pv__cap b { display: block; font-size: 16.5px; font-weight: 600; color: var(--ink); }
.pv__cap span { display: block; margin-top: 4px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.4; }

/* 1 · чат-мокап */
.pv__scr--chat { background: linear-gradient(165deg, #F3EEE3, #EAE1D0); padding: 13px 13px 15px; display: flex; flex-direction: column; gap: 6px; min-height: 168px; }
.pvchat__head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
/* аватар с зелёной точкой онлайна + «печатает…» — как чип Алины на первом экране */
.pvchat__av { position: relative; width: 30px; height: 30px; flex: 0 0 auto; }
.pvchat__av img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.pvchat__av::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--online); border: 2px solid #fff; }
.pvchat__who b { font-size: 12.5px; font-weight: 600; display: block; line-height: 1.1; color: var(--ink); }
.pvchat__who .ih__typing { font-size: 10.5px; margin-top: 1px; }
.pvbub { font-size: 11.5px; line-height: 1.3; padding: 8px 11px; border-radius: 14px; max-width: 86%; }
.pvbub--them { align-self: flex-start; background: #fff; border: 1px solid var(--hair); border-bottom-left-radius: 5px; color: var(--ink); }
.pvbub--you { align-self: flex-end; background: var(--sb-blue); color: #fff; font-weight: 600; border-bottom-right-radius: 5px; }
/* мини-выбор ответа в мокапе чата — сразу показывает гейм-механику */
.pvchoice { margin-top: 4px; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.pvchoice__k { font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--ih-gold-d); }
/* формы кнопок Skillbox: у них радиус 12px при высоте 56px и вес 500 — в масштабе мокапа это 8px */
.pvopt { font-size: 11.5px; font-weight: 500; line-height: 1.3; padding: 7px 11px; border-radius: 8px;
  background: #fff; border: 1px solid var(--sb-blue); color: var(--sb-blue); }
.pvopt--on { background: var(--sb-blue); border-color: var(--sb-blue); color: #fff; }

/* 2 · мокап «программа дизайнера»: шапка окна + вкладки-инструменты + рендер-холст + палитра материалов */
.pv__scr--room { display: flex; flex-direction: column; }
.pvapp__bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #F6F3EC; border-bottom: 1px solid var(--hair); }
.pvapp__dots { display: inline-flex; gap: 4px; flex: 0 0 auto; }
.pvapp__dots i { width: 8px; height: 8px; border-radius: 50%; }
.pvapp__dots i:nth-child(1) { background: #EF8579; }
.pvapp__dots i:nth-child(2) { background: #F0C36A; }
.pvapp__dots i:nth-child(3) { background: #83C98B; }
.pvapp__title { font-size: 10px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pvapp__tabs { display: flex; gap: 3px; padding: 6px 9px; background: #F6F3EC; border-bottom: 1px solid var(--hair); }
.pvapp__tabs span { font-size: 9.5px; font-weight: 600; color: var(--ink-soft); padding: 4px 8px; border-radius: 7px; white-space: nowrap; }
.pvapp__tabs .on { background: var(--sb-blue); color: #fff; }
.pvapp__canvas { position: relative; flex: 1 1 auto; }
.pvroom__img { width: 100%; height: 138px; object-fit: cover; display: block; }
.pvroom__bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 7px; padding: 12px; background: linear-gradient(to top, rgba(20,16,12,.8), rgba(20,16,12,0)); }
.pvtile { width: 33px; height: 33px; border-radius: 9px; background: var(--c); border: 2px solid rgba(255,255,255,.55); flex: 0 0 auto; }
/* выбранная плитка — синяя обводка 2px как у Skillbox, без белой прослойки */
.pvtile--on { border-color: var(--sb-blue); box-shadow: 0 6px 14px -4px rgba(0,0,0,.5); transform: translateY(-3px); }

/* 3 · результат + архетип */
/* карточка «разбор» — брендовый «результат-экран» без чужого интерьера */
/* верхний бейдж — на одной высоте с шапкой чата и чипом палитры (13px от верха) */
.pv__scr--res { min-height: 168px; background: linear-gradient(160deg, #F4EFE4, #E9E0CF); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 9px; padding: 46px 16px 17px; }
.pvres__done { position: absolute; top: 13px; left: 13px; font-size: 10px; font-weight: 700; color: #16161A; background: var(--ih-gold); padding: 5px 10px; border-radius: 999px; }
.pvres__k { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ih-gold-d); }
.pvres__arch { font-size: 27px; font-weight: 600; color: var(--ink); line-height: 1; letter-spacing: -.02em; }
.pvres__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.pvres__tags span { font-size: 10.5px; font-weight: 500; background: #fff; border: 1px solid var(--hair); border-radius: 999px; padding: 4px 10px; color: var(--ink-soft); }
.pvres__tags .pvres__tag--plus { background: #FBF1DC; border-color: #EAD6AC; color: var(--ih-gold-d); font-weight: 600; }
.pvres__bar { width: 100%; max-width: 200px; height: 7px; border-radius: 999px; background: rgba(34,24,14,.1); overflow: hidden; }
.pvres__bar i { display: block; height: 100%; width: 87%; border-radius: 999px; background: var(--sb-blue); }

/* AI-наставник — карточка списка, стили v3 в конце файла */

@media (min-width: 900px) {
  .ih__preview { flex-direction: row; gap: 16px; align-items: stretch; }
  .pv { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
  /* мокап-экран занимает всю свободную высоту карточки — без пустот под подписями */
  .pv__scr { flex: 1 1 auto; }
  .pv__cap { flex: 0 0 auto; }
  .pvroom__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .ih__inside-title { font-size: 40px; }
  .ih__inside-head { margin-bottom: 34px; }
}

/* motion: аккуратный вход со сдвигом (stagger), 150–300ms-эстетика */
@keyframes ihRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ih__lead   { animation: ihRise .6s var(--ease-out-back) both; }
.ih__cover  { animation: ihRise .6s var(--ease-out-back) both .06s; }
.ih__foot   { animation: ihRise .6s var(--ease-out-back) both .12s; }
.ih__inside { animation: ihRise .6s var(--ease-out-back) both .18s; }
.ih__extra  { animation: ihRise .6s var(--ease-out-back) both .24s; }
@media (prefers-reduced-motion: reduce) {
  .ih__lead, .ih__cover, .ih__foot, .ih__inside, .ih__extra { animation: none; }
  .ih__chev, .floatbg .fitem, .ih__slide { animation: none !important; }
}

/* ---------- ДЕСКТОП ЭКРАНА 1: журнальный разворот — копия слева, коллаж справа ---------- */
@media (min-width: 900px) {
  .ih { max-width: 1060px; padding: 26px 32px 56px; }
  .ih__fold {
    display: grid;
    grid-template-columns: minmax(0, 524px) auto;
    grid-template-areas: "lead collage" "foot collage";
    justify-content: center; align-content: center;
    column-gap: 56px; row-gap: 0;
    min-height: auto; padding-top: clamp(8px, 3vh, 36px); padding-bottom: clamp(20px, 4vh, 44px);
  }
  /* текст+кнопка — ЦЕЛЬНЫЙ блок, вместе по центру напротив кадра */
  .ih__lead    { grid-area: lead;    align-self: end; }
  .ih__collage { grid-area: collage; align-self: center; margin: 0; }
  .ih__foot    { grid-area: foot;    align-self: start; }
  /* воздух и масштаб как на продуктовых лендах Skillbox: крупный H1, sub 18, щедрые интервалы */
  /* размер привязан к реальной ширине текстовой колонки (вьюпорт минус кадр и отступы):
     «Дизайнер интерьера» ≈ 10.8em — при таком расчёте всегда одна строка, без 3-строчных разломов */
  .ih__h1 { font-size: clamp(36px, calc(5.5vw - 10px), 44px); margin-top: 28px; }
  .ih__sub { font-size: 18px; max-width: 36ch; margin-top: 20px; }
  /* кнопка как на продуктовых лендах: широкая, но не во всю колонку */
  .ih__cta { font-size: 19px; padding: 19px 48px; margin-top: 36px; width: auto; min-width: 320px; }
  .ih__note { text-align: left; }
  /* картинка чуть крупнее; цветок и бриф крупнее и выходят за рамку кадра (журнальный коллаж) */
  /* на узком десктопе (900–1150) кадр ужимается, отдавая ширину текстовой колонке */
  .ih__cover { aspect-ratio: 10 / 11; max-height: none; width: clamp(340px, 38vw, 452px); max-width: 452px; margin: 0; }
  /* воздух между хедером и кадром: коллаж не липнет к шапке */
  .ih__collage { margin-top: 28px; }
  /* верх растения ниже линии хедера; правый край внутри .ih (у него overflow hidden — иначе видимый срез листьев).
     right: -24px — безопасный максимум (8px до края обрезки на 900–1060); сдвиг «в бок» — за счёт ширины */
  .ih__collage-plant { width: 152px; top: -40px; right: -24px; }
  .ih__brief { left: -38px; bottom: 24%; width: 244px; max-width: 244px; padding: 12px 13px 13px; }
  .ih__brief-k { font-size: 10.5px; }
  .ih__brief-q { font-size: 12.5px; }
  .ih__brief-meta { font-size: 11px; }
  .ih__fig  { display: none; }
  /* прогрев: больше воздуха от первого экрана */
  .ih__inside { max-width: 1040px; margin: 0 auto; }
  /* доход и подарок — отдельными блоками во всю ширину, не в кашу */
  .ih__extra  { max-width: 1040px; margin: 18px auto 0; display: flex; flex-direction: column; gap: 16px; }
  .ih__income { margin-top: 0; padding: 0; }
}

/* ============================================================
   ЭКРАН 1 — ИНТРО (кино-герой + парящие карточки)
   ============================================================ */
/* ЭКРАН 1 — ЖУРНАЛЬНАЯ ОБЛОЖКА */
#scr-intro { padding: 0; }
.cover {
  position: relative; height: 100%; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--ink);
}
.cover__media { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.cover__veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(12,10,8,.40) 0%, rgba(12,10,8,0) 24%, rgba(12,10,8,.04) 52%, rgba(12,10,8,.78) 100%);
}

/* мастхед */
.cover__masthead { position: absolute; z-index: 4; top: 16px; left: 22px; right: 22px; color: #fff; }
.cover__brand {
  font-family: "Playfair Display", Georgia, serif; font-weight: 800;
  font-size: clamp(44px, 11vw, 92px); line-height: .88; letter-spacing: -.02em;
  text-shadow: 0 2px 22px rgba(0,0,0,.35);
}
.cover__edition { font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin-top: 7px; opacity: .92; }

/* корешок (десктоп) */
.cover__spine {
  display: none;
  position: absolute; z-index: 4; right: 12px; top: 50%;
  writing-mode: vertical-rl; transform: translateY(-50%);
  font-size: 11px; font-weight: 700; letter-spacing: .22em; color: #fff; opacity: .75;
}
@media (min-width: 720px) { .cover__spine { display: block; } }

/* штамп-стикер (акцент дизайном, не плашкой) */
.cover__seal {
  position: absolute; z-index: 5; top: 92px; right: 22px;
  width: 92px; height: 92px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.9); color: #fff;
  display: grid; place-items: center; text-align: center;
  font-family: "Playfair Display", serif; font-style: italic; font-weight: 700;
  font-size: 17px; line-height: 1.05; transform: rotate(-10deg);
}

/* вырезки-стикеры внахлёст (белый контур, как LSJ) */
.cover__sticker {
  position: absolute; z-index: 3; height: auto; pointer-events: none;
  filter:
    drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff)
    drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff)
    drop-shadow(2px 2px 0 #fff) drop-shadow(-2px -2px 0 #fff)
    drop-shadow(0 16px 24px rgba(0,0,0,.4));
}
.cover__sticker.st-chair   { width: clamp(120px, 26vw, 210px); left: -14px;  bottom: 32%; transform: rotate(-6deg); }
.cover__sticker.st-cushion { width: clamp(86px, 18vw, 150px);  right: -10px; bottom: 40%; transform: rotate(9deg); }

/* титул */
.cover__title { position: relative; z-index: 4; padding: 0 22px 28px; color: #fff; }
.cover__kicker { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; opacity: .9; }
.cover__h1 {
  font-family: "Playfair Display", Georgia, serif; font-weight: 900; line-height: .92; letter-spacing: -.01em;
  font-size: clamp(48px, 13vw, 104px); margin: 6px 0 16px;
  text-shadow: 0 2px 30px rgba(0,0,0,.45);
}
.cover__h1 em { font-style: italic; font-weight: 700; }

/* кавер-строки = продающие буллиты */
.cover__lines {
  list-style: none; display: flex; flex-direction: column; gap: 7px;
  margin: 0 0 20px; max-width: 30em;
}
.cover__lines li {
  font-size: 14px; line-height: 1.25; color: #fff; padding-left: 16px; position: relative;
  text-shadow: 0 1px 10px rgba(0,0,0,.5);
}
.cover__lines li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.cover__lines b { font-family: "Playfair Display", serif; font-style: italic; font-weight: 700; }

.btn--cover { background: var(--ink); color: var(--paper); padding: 16px 28px; font-size: 16px; box-shadow: 0 14px 34px -12px rgba(0,0,0,.4); }

/* ЭКРАН 1 v3 — журнальная страница: фрейм-хиро + парящие айтемы */
.cover2 {
  position: relative; height: 100%; overflow: hidden;
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
}
.cover2__page {
  position: relative; z-index: 2;
  width: 100%; max-width: 720px; height: 100%;
  margin: 0 auto; padding: 14px 20px 18px;
  display: flex; flex-direction: column;
}
.cover2__eyebrow {
  text-align: center; flex: 0 0 auto;
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 10px;
}
.cover2__masthead { text-align: center; flex: 0 0 auto; }
.cover2 .cover__brand { color: var(--ink); text-shadow: none; font-size: clamp(40px, 13vw, 60px); }
.cover2 .cover__edition { color: var(--ink-soft); }

.frame {
  position: relative; flex: 1 1 auto; min-height: 0;
  margin: 12px 0 14px; border-radius: 22px; overflow: hidden;
  background: var(--ink); box-shadow: var(--shadow-card);
}
.frame__cycle { position: absolute; inset: 0; }
.frame__cycle img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.1s var(--ease);
  animation: kenburns 9s ease-in-out infinite alternate;
}
.frame__cycle img.on { opacity: 1; }
@keyframes kenburns { from { transform: scale(1.03); } to { transform: scale(1.13); } }
.frame__veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10,8,6,.28) 0%, rgba(10,8,6,0) 30%, rgba(10,8,6,.05) 55%, rgba(10,8,6,.82) 100%);
}
.frame__seal {
  position: absolute; z-index: 2; top: 14px; right: 14px;
  width: 78px; height: 78px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.9); color: #fff;
  display: grid; place-items: center; text-align: center;
  font-family: "Playfair Display", serif; font-style: italic; font-weight: 700;
  font-size: 15px; line-height: 1.05; transform: rotate(-10deg);
}
.frame__cap { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 20px; color: #fff; }
.frame .cover__kicker { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; opacity: .9; }
.frame .cover__h1 {
  font-family: "Playfair Display", Georgia, serif; font-weight: 900; line-height: .92; letter-spacing: -.01em;
  font-size: clamp(34px, 8.5vw, 60px); margin-top: 6px;
  text-shadow: 0 2px 26px rgba(0,0,0,.5);
}
.frame .cover__h1 em { font-style: italic; font-weight: 700; }

.cover2__lines { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; }
.cover2__lines li { font-size: 14px; line-height: 1.3; color: var(--ink); padding-left: 16px; position: relative; }
.cover2__lines li::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: var(--terra); }
.cover2__lines b { font-family: "Playfair Display", serif; font-style: italic; font-weight: 700; }

/* парящие айтемы по бокам (десктоп) — разнокалиберные */
.cover__sticker.fl { display: none; }
@media (min-width: 1000px) {
  .cover__sticker.fl {
    display: block; position: absolute; z-index: 1; height: auto;
    animation: floatItem var(--d,9s) var(--ease) infinite alternate;
  }
  .fl-tablet  { width: 130px; left: 5%;  top: 7%;  --r: -5deg; --d: 8s; }
  .fl-chair   { width: 215px; left: 1%;  top: 34%; --r: -7deg; --d: 9.5s; }
  .fl-palette { width: 150px; left: 6%;  top: 70%; --r: 6deg;  --d: 8.5s; }
  .fl-vase    { width: 92px;  right: 7%; top: 7%;  --r: 6deg;  --d: 7.5s; }
  .fl-cushion { width: 158px; right: 1%; top: 30%; --r: 8deg;  --d: 9s; }
  .fl-art     { width: 150px; right: 5%; top: 66%; --r: -6deg; --d: 10s; }
}
@keyframes floatItem { from { transform: translateY(0) rotate(var(--r,0deg)); } to { transform: translateY(-12px) rotate(var(--r,0deg)); } }
.avatar {
  width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid var(--paper);
  background: var(--terra) center/cover no-repeat;
  display: inline-grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 16px;
  box-shadow: 0 0 0 2px var(--line);
}

/* ============================================================
   ЭКРАН 2 — БРИФ (сториз)
   ============================================================ */
.stories { height: 100%; display: flex; flex-direction: column; position: relative; }
.stories__bars { display: flex; gap: 5px; margin-bottom: 14px; }
.stories__bars i { flex: 1; height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; }
.stories__bars i > span { display: block; height: 100%; width: 0; background: var(--ink); }
.stories__bars i.seen > span { width: 100%; }

.stories__head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.stories__head .who { font-weight: 700; font-size: 15px; }
.stories__head .sub { font-size: 12px; color: var(--ink-soft); }

.stories__body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.bubble {
  background: var(--cream-card); border: 1px solid var(--line);
  padding: 16px 18px; border-radius: 18px 18px 18px 6px;
  font-size: 16px; line-height: 1.4; max-width: 88%;
  box-shadow: var(--shadow-soft);
  animation: pop .5s var(--ease-out-back) both;
}
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.brief-card {
  background: var(--ink); color: var(--paper);
  border-radius: var(--r-lg); padding: 22px;
  animation: pop .5s var(--ease-out-back) both;
}
.brief-card h4 { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--cobalt); margin-bottom: 14px; }
.brief-card ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.brief-card li { font-size: 16px; display: flex; gap: 10px; align-items: baseline; }
.brief-card li::before { content: "—"; color: var(--terra); }

.stories__hint { text-align: center; font-size: 12px; color: var(--ink-soft); margin-top: 14px; }
.stories__tapzones { position: absolute; inset: 0; display: flex; z-index: 5; }
.stories__tapzones .tz { flex: 1; cursor: pointer; }

/* ============================================================
   ЭКРАН 3 — СВАЙП ВКУСА
   ============================================================ */
.swipe { height: 100%; display: flex; flex-direction: column; }
.swipe__top { text-align: center; margin-bottom: 6px; }
.swipe__top .h2 { margin: 10px 0 6px; }
.swipe__top .lead { font-size: 15px; }

.taste-meter {
  display: flex; align-items: center; gap: 10px;
  margin: 8px 2px 0; font-size: 12px; font-weight: 700; color: var(--ink-soft);
}
.taste-meter .bar { flex: 1; height: 6px; background: var(--paper-3); border-radius: 6px; overflow: hidden; }
.taste-meter .bar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--terra), var(--cobalt)); transition: width .5s var(--ease); }

.deck { position: relative; flex: 1; margin: 12px 0; }
.card {
  position: absolute; inset: 0;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--cream-card);
  box-shadow: var(--shadow-card);
  will-change: transform;
  user-select: none; touch-action: pan-y;
}
.card img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.card__info {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 30px 22px 22px;
  background: linear-gradient(180deg, transparent, rgba(20,15,10,.15) 30%, rgba(20,15,10,.85));
  color: #fff;
}
.card__kick {
  font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  opacity: .7; margin-bottom: 2px;
}
.card__style {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 800;
  font-size: clamp(32px, 9.5vw, 44px); line-height: .98; letter-spacing: -.005em;
  text-shadow: 0 2px 24px rgba(0,0,0,.5);
}
.card__room {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  font-size: 12px; font-weight: 700; color: var(--ink);
  background: rgba(247,243,234,.92); padding: 6px 12px; border-radius: 100px;
  backdrop-filter: blur(6px);
}
.card__num { position: absolute; top: 14px; right: 14px; font-size: 11px; font-weight: 700; color:#fff; background: rgba(0,0,0,.32); padding: 6px 11px; border-radius: 100px; backdrop-filter: blur(6px); }

.stamp {
  position: absolute; top: 26px; z-index: 4;
  font-weight: 900; font-size: 30px; letter-spacing: .04em;
  padding: 8px 16px; border-radius: 12px; border: 4px solid;
  opacity: 0;
}
.stamp--like { left: 18px; color: var(--ok); border-color: var(--ok); transform: rotate(-14deg); }
.stamp--nope { right: 18px; color: var(--terra); border-color: var(--terra); transform: rotate(14deg); }

.swipe__controls { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 4px 0 2px; }
.round {
  width: 64px; height: 64px; border-radius: 50%;
  border: none; cursor: pointer; background: var(--cream-card);
  box-shadow: var(--shadow-soft); font-size: 26px;
  display: grid; place-items: center;
  transition: transform .25s var(--ease-out-back);
}
.round:active { transform: scale(.88); }
.round--nope { color: var(--terra); }
.round--like { color: var(--ok); width: 76px; height: 76px; font-size: 32px; }

/* ============================================================
   ЭКРАН 4 — МУДБОРД (Pinterest / Miro)
   ============================================================ */
.board { height: 100%; display: flex; flex-direction: column; }
.board__head { margin-bottom: 12px; }
.masonry { flex: 1; overflow-y: auto; columns: 2; column-gap: 10px; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
.masonry::-webkit-scrollbar { width: 0; }
.tile {
  break-inside: avoid; margin-bottom: 10px; border-radius: 12px; overflow: hidden;
  background: var(--cream-card); box-shadow: var(--shadow-soft);
  position: relative;
  animation: tilein .6s var(--ease-out-back) both;
}
@keyframes tilein { from { opacity: 0; transform: translateY(16px) scale(.96); } }
.tile img { width: 100%; display: block; }
.tile .pin { position: absolute; top: 8px; right: 8px; background: rgba(255,255,255,.9); border-radius: 100px; font-size: 11px; font-weight: 700; padding: 4px 9px; }

/* ============================================================
   ЭКРАН 5 — РЕЗУЛЬТАТ
   ============================================================ */
.result { height: 100%; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.result .kicker { justify-content: center; }
.result .profile {
  font-weight: 600; letter-spacing: -.03em; line-height: 1.05;
  font-size: clamp(40px, 12vw, 58px); margin: 12px 0;
}
.result .profile em { color: var(--terra); font-style: normal; }
.result .lead { margin: 0 auto 22px; max-width: 24em; }
.triptych { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 26px; }
.triptych figure {
  margin: 0; border-radius: 12px; overflow: hidden;
  background: var(--cream-card); box-shadow: var(--shadow-soft);
  position: relative;
  animation: tilein .6s var(--ease-out-back) both;
}
.triptych figure:nth-child(2) { animation-delay: .08s; }
.triptych figure:nth-child(3) { animation-delay: .16s; }
.triptych img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.triptych figcaption {
  position: absolute; left: 6px; bottom: 6px;
  font-size: 10px; font-weight: 700; color: #fff;
  background: rgba(0,0,0,.42); padding: 3px 7px; border-radius: 100px; backdrop-filter: blur(4px);
}

/* ============================================================
   ЭКРАН 6 — СИЛА СВЕТА
   ============================================================ */
.light { flex: none; min-height: 100%; display: flex; flex-direction: column; }
/* свет прокручиваем на уровне экрана, как смету: вложенный скролл-контейнер
   на iOS отказывался тянуться пальцем, и конец разбора был недоступен */
#scr-light { overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* кадр 3:4 показываем целиком (свет под потолком — часть смысла), высота фикс — вердикт уходит в скролл */
.light__stage {
  position: relative; flex: none; height: clamp(260px, 42vh, 400px);
  align-self: center; aspect-ratio: 3 / 4; width: auto; max-width: 100%;
  border-radius: var(--r-md); overflow: hidden;
  background: var(--cream-card); box-shadow: var(--shadow-card);
  margin: 8px auto 12px;
  transition: height .35s var(--ease);
}
/* после выбора кадр ужимается, чтобы вердикт и кнопка «Дальше» влезли без скролла */
.light--picked .light__stage { height: clamp(170px, 27vh, 280px); }
.light__layer {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .7s var(--ease);
}
.light__layer.on { opacity: 1; }
.light__toggle { display: flex; gap: 8px; }
.lpill {
  flex: 1 1 0; min-width: 0; appearance: none; cursor: pointer;
  border: 0; background: var(--cream-card); color: var(--ink);
  font-family: inherit; font-weight: 600; letter-spacing: -.01em;
  /* «Многоуровневый» — одно длинное слово: на узком экране кегль ужимается,
     иначе плашка уезжала за правый край */
  font-size: clamp(11.5px, 3.1vw, 13.5px);
  padding: 13px 6px; border-radius: var(--ih-r-pill); min-height: 46px; line-height: 1.15;
  transition: background .2s, color .2s;
}
.lpill.on { background: var(--sb-blue); color: #fff; }
/* разбор: плашка промаха перечёркнута, переключать сценарии уже нельзя */
.lpill--miss { background: rgba(200, 73, 46, .10); color: var(--err); text-decoration: line-through; }
.light__toggle--locked .lpill { cursor: default; }
/* flex-item нельзя сжимать: разбор наставника вылезал за границы блока,
   прокрутка его не видела и конец текста был недоступен */
.light__tip { flex: none; min-height: 3em; font-size: 14px; line-height: 1.4; color: var(--ink-soft); text-align: left; padding: 4px 0 0; }
.light__tip .decide__hint { display: block; text-align: center; padding-top: 4px; }
.light__tip .paper { margin: 8px 0 0; padding: 13px 14px 14px; }
.light__tip .vmen { margin-bottom: 7px; }
.light__tip .vmen__say { font-size: 15.5px; margin-bottom: 6px; }
.light__tip .paper .decide__fb { font-size: 14px; line-height: 1.45; }
.light__tip .paper .edu { margin-top: 8px; padding: 9px 11px 10px; font-size: 12.5px; }

/* ============================================================
   РЕШЕНИЯ ЗА КЛИЕНТА (A/B)
   ============================================================ */
.decide { height: 100%; display: flex; flex-direction: column; }
.decide__pair { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0; min-height: 0; }
.dcard {
  appearance: none; border: none; cursor: pointer; padding: 0;
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  background: var(--cream-card); box-shadow: var(--shadow-card);
  transition: transform .25s var(--ease-out-back), box-shadow .25s, outline-color .2s;
  outline: 3px solid transparent; outline-offset: -3px;
}
.dcard img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dcard__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 14px 12px; text-align: left;
  background: linear-gradient(180deg, transparent, rgba(15,12,8,.82)); color: #fff; }
.dcard__cap b { display: block; font-weight: 800; font-size: 16px; }
.dcard__cap span { font-size: 12px; opacity: .85; }
.dcard:active { transform: scale(.98); }
.dcard.chosen { outline-color: var(--cobalt); }
.dcard:not(.chosen) { opacity: 1; }
.decide__pair:has(.chosen) .dcard:not(.chosen) { opacity: .45; }
.decide__tip { min-height: 3em; font-size: 14px; line-height: 1.4; color: var(--ink-soft); text-align: center; padding: 4px 6px; }

/* ============================================================
   БЮДЖЕТ — по style-pack: белая карта, плашки #F5F5F5, синий #3D3BFF,
   скругления по токенам, без теней и обводок, текст только чёрный.
   Механика: у каждой статьи жёсткие рамки ползунка и зелёная «вилка профи».
   ============================================================ */
/* экран сметы скроллится: с вердиктом контент бывает выше вьюпорта (десктоп),
   без прокрутки кнопка «Дальше» обрезалась за краем */
#scr-budget { overflow-y: auto; }
.budget { min-height: 100%; display: flex; flex-direction: column; }
.budget__card {
  flex: 1; display: flex; flex-direction: column;
  background: #fff; border-radius: var(--ih-r-lg); padding: 24px 16px 16px;
}
.budget__h { color: #000; letter-spacing: -.03em; }
.budget__lead { font-size: 16px; line-height: 1.4; color: #000; margin-top: 8px; }
.budget__lead b { font-weight: 600; white-space: nowrap; }
.budget__task { font-size: 13px; line-height: 1.4; color: #000; margin-top: 6px; }
.budget.is-checked .budget__task { display: none; } /* после проверки инструкцию сменяет вердикт */
/* вердикт наставника появляется после «Проверить смету»; реплика набором, не жирно */
.budget__verdict { margin-top: 14px; }
.budget__verdict .vmen { margin: 0 0 4px; }
.budget__verdict .vmen__say { font-size: 14px; font-weight: 400; margin: 0 0 8px; }
.budget__why { font-size: 13.5px; line-height: 1.45; color: #000; margin: 0; }

.budget__rows { display: flex; flex-direction: column; gap: 8px; margin: auto 0 0; padding-top: 16px; }
.brow { background: var(--sp-surface); border-radius: var(--ih-r-md); padding: 12px 14px 10px; }
.brow__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.brow__name b { font-weight: 600; font-size: 15px; color: #000; }
.brow__hint { font-size: 13px; color: #000; }
.brow__val {
  flex: none; font-size: 14px; font-weight: 600; color: #000; white-space: nowrap;
  padding: 4px 10px; border-radius: var(--ih-r-pill); background: #fff;
  transition: background var(--dur, 220ms) var(--ease);
}
.brow__val span { font-weight: 400; }
.brow.is-ok .brow__val { background: rgba(61, 59, 255, .12); }
.brow.is-miss .brow__val { background: var(--err-bg); }
.brow__note { display: block; margin-top: 2px; font-size: 12px; color: #000; }

/* дорожка: белая линия сквозь светло-синюю капсулу-вилку, синяя ручка 22px */
.brow__track { position: relative; height: 30px; margin-top: 6px; }
.brow__track::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  height: 6px; border-radius: var(--ih-r-pill); background: #fff;
}
.brow__zone {
  position: absolute; top: 50%; transform: translateY(-50%) scaleX(.55); transform-origin: center;
  left: calc((100% - 22px) * var(--z0)); width: calc(22px + (100% - 22px) * var(--zw));
  height: 26px; border-radius: var(--ih-r-pill); background: rgba(61, 59, 255, .16);
  opacity: 0; transition: opacity .35s var(--ease), transform .35s var(--ease-out-back);
}
.budget.is-checked .brow__zone { opacity: 1; transform: translateY(-50%); }
.brow__fill {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: calc(11px + (100% - 22px) * var(--p, 0)); height: 6px;
  border-radius: var(--ih-r-pill); background: var(--sb-blue);
}
.brow__track input[type=range] {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  -webkit-appearance: none; appearance: none; background: transparent; outline: none; cursor: grab;
}
.brow__track input[type=range]::-webkit-slider-runnable-track { height: 30px; background: transparent; }
.brow__track input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; margin-top: 4px;
  border: none; border-radius: var(--ih-r-pill); background: var(--sb-blue);
}
.brow__track input[type=range]::-moz-range-track { height: 30px; background: transparent; border: none; }
.brow__track input[type=range]::-moz-range-thumb {
  width: 22px; height: 22px; border: none; border-radius: var(--ih-r-pill); background: var(--sb-blue);
}

/* кнопка экрана — без тени; disabled как у остальных кнопок воронки, чтобы читалась кнопкой */

.budget__total { margin-top: auto; padding-top: 18px; }
.budget__bar { position: relative; height: 8px; background: var(--sp-surface); border-radius: var(--ih-r-pill); overflow: hidden; }
.budget__bar > i { position: absolute; inset: 0; width: 0; background: var(--sb-blue); border-radius: var(--ih-r-pill); transition: width .22s var(--ease), background .22s var(--ease); }

/* ============================================================
   ДО / ПОСЛЕ
   ============================================================ */
.ba { height: 100%; display: flex; flex-direction: column; }
/* кадр показываем целиком, без обрезки по бокам: сцена держит пропорции рендера */
.ba__stage {
  flex: 1 1 auto; align-self: center; position: relative; min-height: 0; aspect-ratio: 821 / 1100; max-width: 100%; width: auto;
  margin: 10px auto; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-card); cursor: ew-resize; user-select: none; touch-action: none;
}
.ba__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba__before { position: absolute; inset: 0; }
.ba__handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff; transform: translateX(-50%); box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.ba__handle span { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; font-size: 16px; box-shadow: var(--shadow-soft); }
.ba__tag { position: absolute; top: 12px; font-size: 11px; font-weight: 800; letter-spacing: .1em; color: #fff; background: rgba(0,0,0,.4); padding: 5px 10px; border-radius: 100px; backdrop-filter: blur(4px); }
.ba__tag--before { left: 12px; } .ba__tag--after { right: 12px; }

/* ============================================================
   ВИК В ПАРИЖЕ (бонус)
   ============================================================ */
.paris { height: 100%; display: flex; flex-direction: column; }
.paris__grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: center; }
.pcard {
  appearance: none; cursor: pointer; position: relative; padding: 14px;
  border-radius: var(--r-md); border: 1.5px solid var(--line); background: var(--cream-card);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: border-color .2s, transform .2s var(--ease-out-back), box-shadow .2s;
}
.pcard img { width: 100%; height: 110px; object-fit: contain; }
.pcard__cap { text-align: center; }
.pcard__cap b { display: block; font-weight: 800; font-size: 14px; }
.pcard__cap span { font-size: 11px; color: var(--ink-soft); }
.pcard__check { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; background: var(--cobalt); color: #fff; display: grid; place-items: center; font-size: 13px; font-style: normal; opacity: 0; transform: scale(.6); transition: .2s; }
.pcard.on { border-color: var(--cobalt); box-shadow: var(--shadow-soft); transform: translateY(-3px); }
.pcard.on .pcard__check { opacity: 1; transform: scale(1); }

/* ============================================================
   ОФФЕР + ЛИД-ФОРМА
   ============================================================ */
.offer { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
.offer__hero { text-align: center; padding: 4px 0 8px; }
.offer__h { font-weight: 600; letter-spacing: -.02em; line-height: 1.12; font-size: clamp(24px, 6.2vw, 34px); margin: 8px 0 12px; overflow-wrap: break-word; }
.offer__h em { color: var(--sb-blue); font-style: normal; } /* у Graphik нет курсива — синтетический не используем */
.center { text-align: center; }
.offer__bullets { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 18px 0; }
.offer__bullets li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.35; }
.offer__bullets li::before { content: ""; position: absolute; left: 0; top: 3px; width: 15px; height: 15px; background: var(--cobalt);
  -webkit-mask: var(--ck) center / contain no-repeat; mask: var(--ck) center / contain no-repeat; }
.offer__bullets b { font-weight: 800; }
.lead-form { background: var(--cream-card); border: 1px solid var(--line); border-radius: var(--ih-r-lg); padding: 20px; box-shadow: var(--shadow-soft); }
.lead-form__title { font-weight: 800; font-size: 17px; margin-bottom: 12px; }
.lead-form__input {
  width: 100%; font-family: inherit; font-size: 16px; padding: 14px 16px; margin-bottom: 10px;
  border: 1.5px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink);
}
.lead-form__input:focus { outline: none; border-color: var(--cobalt); }
/* телефон: неизменяемый префикс страны + поле с маской */
.phone-row { display: flex; gap: 8px; }
.phone-row__pref { flex: none; display: flex; align-items: center; padding: 0 16px; border: 1.5px solid var(--line);
  border-radius: 12px; background: var(--paper); font-size: 16px; font-weight: 400; color: var(--ink); margin-bottom: 10px; }
.phone-row__inp { flex: 1; min-width: 0; }
.lead-form--dark .phone-row__pref { background: #fff; border-color: #fff; color: var(--ink); }
.lead-form__note { font-size: 13px; margin-top: 8px; min-height: 1.2em; }
.lead-form__note.err { color: var(--err); }
.lead-form__note.ok { color: var(--ok); }
.lead-form__consent { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; font-size: 12px; color: var(--ink-soft); line-height: 1.45; }
.lead-form__consent a { color: var(--ink-soft); text-decoration: underline; }
.lead-form__consent input { margin-top: 2px; accent-color: var(--cobalt); }

/* ---------- ФИКС: кнопка в сториз кликабельна поверх зон-тапа ---------- */
.stories__body .btn { position: relative; z-index: 6; }

/* ---------- Парящие айтемы по всему фону (только интро, десктоп) ---------- */
.app { position: relative; z-index: 1; }
.floatbg { display: none; }
/* вырезки показываем только когда у контента есть реальные поля (≥1280) — на узком десктопе они наезжали на бровь/кнопку/карточки */
@media (min-width: 1280px) {
  body.on-intro .floatbg { display: block; position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
  .floatbg .fitem {
    position: absolute; height: auto; opacity: 0;
    animation: fadeIn 1s var(--ease) forwards, floatItem var(--d, 9s) var(--ease) infinite alternate;
    animation-delay: 0s, 1s;
    /* натуральная предметная тень, без белой обводки-стикера */
    filter: drop-shadow(0 22px 30px rgba(40,30,20,.26)) drop-shadow(0 4px 8px rgba(40,30,20,.14));
  }
  /* асимметричный натюрморт: тяжёлый левый кластер (веер образцов сверху + крупное кресло-якорь снизу),
     один воздушный акцент справа (скульптурная ваза). Масштабная иерархия + диагональный поток, не сетка. */
  /* разворот-десктоп: натюрморт «на полях» слева, уходит за край, не задевая копию; ваза убрана (клеш с растением/инсетом) */
  .fi-palette { left: -1vw;   top: 15vh; width: 122px; --r: -9deg; --d: 9s;    opacity: .85; }
  .fi-chair   { left: -2.6vw; top: 61vh; width: 160px; --r: 5deg;  --d: 10.5s; opacity: .88; }
  .fi-vase    { display: none; }
}
/* широкий десктоп — есть поля слева: собираем натюрморт треугольником, уводим от края */
@media (min-width: 1400px) {
  .fi-palette { left: 1.5vw; top: 27vh; width: 130px; --r: -8deg; opacity: .9; }
  .fi-chair   { left: 1vw;   top: 60vh; width: 174px; --r: 5deg;  opacity: .9; }
  .fi-vase    { display: block; left: 5vw; top: 14vh; width: 70px; --r: 9deg; --d: 8s; opacity: .68; }
}
@keyframes fadeIn { to { opacity: 1; } }

/* ---------- УТП-карточки (интерфейс как в кибербезе) ---------- */
.ucards { display: flex; flex-direction: column; gap: 8px; }
.ucard {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; background: var(--cream-card);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-soft);
}
.ucard__ico { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; background: var(--paper-2); color: var(--cobalt); display: grid; place-items: center; }
.ucard__ico svg { width: 22px; height: 22px; }
.ucard__t b { display: block; font-weight: 800; font-size: 15px; line-height: 1.12; }
.ucard__t span { font-size: 12.5px; color: var(--ink-soft); line-height: 1.25; }
.ucards--offer { margin: 16px 0; }

/* ---------- Интро: продающие элементы ---------- */
.cover2 .ucards { margin: 12px 0 0; }
.cover2__gift {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--terra); text-align: center; margin-top: 12px;
}
.cover2__gift svg { width: 17px; height: 17px; flex: 0 0 auto; }
.cover2__trust { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 12px; color: var(--ink-soft); }
.cover2__trust b { color: var(--ink); }

/* ============================================================
   НОВЫЕ КОМПОНЕНТЫ (редизайн v2)
   ============================================================ */

/* интро: подзаголовок-ценность + блок «что в финале» */
.cover2__sub { font-size: 14.5px; line-height: 1.4; color: var(--ink-soft); margin: 10px 2px 0; text-align: center; }
.finale-strip {
  margin: 12px 0 0; padding: 11px 14px; border-radius: 14px;
  background: var(--blue); color: #fff;
}
.finale-strip__t { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .85; margin-bottom: 8px; }
.finale-strip__row { display: flex; justify-content: space-between; gap: 8px; }
.finale-strip__row span { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; line-height: 1.1; flex: 1; }
.finale-strip__row svg { width: 17px; height: 17px; flex: 0 0 auto; opacity: .95; }
.cover2__cta { margin-top: 12px; }

/* ---------- ОНБОРДИНГ ---------- */
.onb { height: 100%; display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.onb__head { margin-bottom: 14px; }
.onb__head .h2 { margin: 4px 0 6px; }
.onb__name {
  width: 100%; font-family: inherit; font-size: 17px; padding: 15px 16px;
  border: 1.5px solid var(--line); border-radius: 14px; background: var(--cream-card); color: var(--ink);
  margin-bottom: 18px;
}
.onb__name:focus { outline: none; border-color: var(--cobalt); }
.onb__qs { display: flex; flex-direction: column; gap: 18px; flex: 1; }
.onb-q__t { font-weight: 800; font-size: 16px; margin-bottom: 10px; }
.onb-q__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt {
  appearance: none; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 14px;
  padding: 13px 16px; border-radius: 100px; border: 1.5px solid var(--line);
  background: var(--cream-card); color: var(--ink); transition: .18s; min-height: 44px;
}
.opt:active { transform: scale(.96); }
.opt.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.onb__go { margin-top: 18px; }

/* --- знакомство: один вопрос на экран, по системе воронки (Graphik + карточки .ih__feat) --- */
/* заякорен сверху с воздухом (не центрируем — иначе «плавает» и кажется мелким) */
.onbq { height: 100%; display: flex; flex-direction: column; justify-content: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.onbq__head { display: flex; align-items: baseline; justify-content: flex-end; }
.onbq__count { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--ink-soft); white-space: nowrap; }
/* заголовок вопроса — шкала и ритм hero-заголовка воронки (.ih__h1): крупный Graphik, воздух */
/* вопрос онбординга — тот же размер, что заголовки остальных экранов (.h2) */
.onbq__q {
  font-family: "Graphik LC TT", "Manrope", sans-serif; font-weight: 600;
  letter-spacing: -.02em; line-height: 1.12; color: var(--ink);
  font-size: clamp(25px, 6.4vw, 32px); overflow-wrap: break-word;
  margin: 14px 0 24px;
}
.onbq__opts { display: flex; flex-direction: column; gap: 12px; }
/* карточка ответа = фиче-карточка воронки: крем, тонкая линия, мягкая тень, плоская */
.onbq__opt {
  appearance: none; cursor: pointer; width: 100%; text-align: left;
  font-family: "Graphik LC TT", "Manrope", sans-serif; font-weight: 400; font-size: 16px; line-height: 1.3;
  min-height: 60px; padding: 17px 20px; border-radius: var(--ih-r-md);
  border: 1px solid var(--hair); background: var(--cream-card); color: var(--ink);
  box-shadow: var(--sh-1); transition: border-color .16s, box-shadow .16s, transform .1s;
}
.onbq__opt:hover { border-color: var(--sb-blue); }
.onbq__opt:active { transform: scale(.99); }

/* ---------- СВАЙП: фикс видимости кнопок поверх тени карточки ---------- */
.swipe__controls {
  position: relative; z-index: 6;
  margin-top: 6px; padding-top: 6px;
}
.swipe__hint { font-size: 11.5px; color: var(--ink-soft); font-weight: 600; white-space: nowrap; }
.round { border: 1px solid var(--line); }   /* контур, чтобы белые кнопки читались на любом фоне */
.deck { margin-bottom: 6px; }

/* ---------- МЕССЕНДЖЕР (бриф) ---------- */
.chat { height: 100%; display: flex; flex-direction: column; }
.chat__head {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 16px; background: var(--cream-card);
  border: 1px solid var(--line); box-shadow: var(--shadow-soft); flex: 0 0 auto;
}
/* шапка чата — как плашка Алины на первом экране: «Алина · новый клиент»
   одной строкой, зелёная точка «в сети» на аватаре, без капс-бейджа */
.chat__av {
  position: relative; width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
  background: var(--terra) center/cover no-repeat;
  display: grid; place-items: center; color: #fff; font-weight: 800;
}
.chat__av::after { content: ""; position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--online); border: 2px solid #fff; }
.chat__who { flex: 1; min-width: 0; }
.chat__name { font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.chat__status { font-size: 12px; color: var(--ink-soft); }
/* лента сообщений на светлой подложке, как поле переписки в мессенджерах */
.chat__body {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: 9px; padding: 14px 10px; scroll-behavior: smooth;
  background: #FBF8F1; border-radius: 16px; margin: 8px 0 0;
}
.chat__body::-webkit-scrollbar { width: 0; }
.cbub {
  max-width: 82%; padding: 12px 15px; font-size: 15px; line-height: 1.45;
  box-shadow: var(--shadow-soft);
}
.cbub--them { align-self: flex-start; background: var(--cream-card); border: 1px solid var(--line); border-radius: 16px 16px 16px 5px; }
.cbub--me { align-self: flex-end; background: var(--cobalt); color: #fff; border-radius: 16px 16px 5px 16px; }
.chat__body .brief-card { align-self: stretch; max-width: 100%; }
.chat__foot { flex: 0 0 auto; padding-top: 8px; }
.pop { animation: pop .42s var(--ease-out-back) both; }

/* ---------- ПАЛИТРА (мудборд / профиль) ---------- */
.palette { display: flex; gap: 8px; margin: 0 0 12px; }
.palette i { flex: 1; height: 30px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); animation: tilein .5s var(--ease-out-back) both; }
.palette--center { max-width: 280px; margin: 14px auto 0; }
.palette--center i { height: 26px; }

/* деталь-плитка в мудборде (вырезка на бумаге) */
.tile--detail { background: var(--paper-2); display: grid; place-items: center; padding: 14px; }
.tile--detail img { width: 78%; height: auto; aspect-ratio: 1/1; object-fit: contain; display: block;
  filter: drop-shadow(0 8px 14px rgba(40,30,20,.18)); }
.pin--tag { background: var(--ink); color: var(--paper); }

/* ---------- РЕЗУЛЬТАТ: один большой кадр + палитра ---------- */
.result__hero {
  width: 100%; max-width: 320px; margin: 4px auto 0; border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 4/3; box-shadow: var(--shadow-card); animation: tilein .6s var(--ease-out-back) both;
}
.result__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.result .lead { margin: 14px auto 0; max-width: 26em; }
.result__after { margin-top: 14px; font-size: 12px; color: var(--ink-soft); }

/* ---------- РЕШЕНИЯ: чипы брифа + правильно/неправильно ---------- */
.decide__brief { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 4px; }
.decide__brief-t { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.chip { font-size: 12px; font-weight: 700; color: var(--ink); background: var(--paper-2); border: 1px solid var(--line); padding: 5px 10px; border-radius: 100px; }
.dcard.right { outline-color: var(--sb-blue); }
.dcard.wrong { outline-color: var(--ink-soft); }
.decide__tip.ok, .decide__tip.miss { color: var(--ink-soft); }
.decide__tip b { font-weight: 700; margin-right: 4px; }
.decide__hint { color: var(--ink-soft); font-weight: 600; font-size: 13px; }
.decide__fb { margin-bottom: 8px; }
/* кнопка следующего шага — одна и та же крупная во всей воронке (размер базового .btn) */
.decide__proceed { margin-top: 2px; }

/* ---------- вердикт в продуктовом стиле: круглая иконка + Graphik, без эмодзи и заливок ---------- */
/* шапка обучающих окон — реплика AI-наставника: аватар-искра, имя, чип-вердикт справа */
.vmen { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.vmen__av { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--ih-graphite); overflow: hidden; }
.vmen__av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vmen__who { display: flex; flex-direction: column; gap: 1px; min-width: 0; text-align: left; }
.vmen__who b { font-family: "Graphik LC TT", "Manrope", sans-serif; font-weight: 600; font-size: 14.5px; letter-spacing: -.01em; color: var(--ink); line-height: 1.15; }
.vmen__who em { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 700; font-size: 12.5px; color: var(--ink-soft); }
/* чип-вердикт «шлёпается» печатью наставника */
@keyframes chip-in { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* Вердикт — журнальная пометка на полях: слово серифом Playfair italic,
   без плашки. «Верно» = брендовый синий, «Мимо» = терракота из системы воронки. */
.vmen__chip { flex: none; margin-left: auto; font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 700; font-size: 18px; line-height: 1; animation: chip-in .3s var(--ease-out-back) .15s both; }
.vmen__chip--ok { color: var(--sb-blue); }
.vmen__chip--miss { color: var(--err); }
@media (prefers-reduced-motion: reduce) { .vmen__chip, .vnote { animation: none; } }
/* речь наставника — заголовок окна */
.vmen__say { font-family: "Graphik LC TT", "Manrope", sans-serif; font-weight: 600; letter-spacing: -.01em; font-size: 17px; line-height: 1.3; color: var(--ink); margin: 0 0 8px; text-align: left; }

/* ---------- «папер» — единая образовательная карточка вердикта (стиль/программы/планировка/концепция/отделка/мебель) ---------- */
/* «пометка наставника» — белая продуктовая карточка (флэт, как карточки Skillbox),
   приклеенная «скотчем» к странице; без наклона и жирной тени — наклонённая
   карточка давала неровную «грязную» тень на фоне прямых блоков */
.paper { text-align: left; background: #fff; border: 0; border-radius: 20px; padding: 16px 16px 17px; margin: 10px 0 12px; position: relative; box-shadow: var(--sh-1); }
.paper::before, .vnote::before, .chat__lesson::before { content: ""; position: absolute; top: -9px; left: 50%; width: 78px; height: 20px; transform: translateX(-50%) rotate(-3deg); background: rgba(214, 186, 130, .38); border-left: 1px dashed rgba(255, 255, 255, .6); border-right: 1px dashed rgba(255, 255, 255, .6); pointer-events: none; }
.paper__k { display: block; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ih-gold-d); margin: 0 0 3px; }
.paper .decide__fb { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.paper .paper__k + .decide__fb::first-letter { text-transform: uppercase; }
.paper .edu { margin: 10px 0 0; box-shadow: none; background: var(--paper); }

/* ---------- вердикт разминки стилей: «пометка наставника» под колодой,
   интерьер остаётся на виду — приметы читаются, глядя на карту ---------- */
@keyframes burst-in { from { transform: scale(.9); opacity: 0; } }
@keyframes note-in { from { transform: translateY(16px) rotate(-.5deg); opacity: 0; } to { transform: rotate(-.5deg); opacity: 1; } }
.vnote { grid-column: 1 / -1; text-align: left; background: #fff; border-radius: 20px; padding: 16px 16px 17px; position: relative; box-shadow: 0 12px 34px rgba(32, 30, 24, .10); animation: note-in .45s var(--ease-out-back) both; }
.vnote__tx { font-size: 14.5px; line-height: 1.5; color: var(--ink); margin: 0 0 12px; }
.vnote .paper__k + .vnote__tx::first-letter { text-transform: uppercase; }
.vnote .vmen__say { font-size: 18px; }
.vnote .burst { margin-bottom: 12px; }

/* ---------- бейдж-итог разминки: карточка-статистика, счёт крупно, акцент синим ---------- */
/* итог разминки — компактная строка в заметке наставника (не отдельная карточка):
   так последняя карта колоды остаётся почти того же размера, что и на прочих ответах */
.burst { margin: 0 0 12px; padding: 10px 0 0; border-top: 1px solid var(--line); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; color: var(--ink); text-align: left; animation: burst-in .5s var(--ease-out-back) both; }
.burst__k { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ih-gold-d); }
.burst__n { font-family: "Graphik LC TT", "Manrope", sans-serif; font-weight: 500; font-size: 16px; letter-spacing: -.01em; line-height: 1.2; margin: 0; }
.burst__n i { font-style: normal; color: var(--sb-blue); }
.burst__sub { font-size: 13.5px; font-weight: 400; line-height: 1.4; color: var(--ink-soft); }

/* ---------- попап-знакомство поверх чата: имя + почта ---------- */
.gate { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(22, 22, 26, .45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fadein .25s ease both; }
@keyframes fadein { from { opacity: 0; } }
.gate__card { width: 100%; max-width: 400px; background: var(--paper); border-radius: var(--ih-r-lg); padding: 22px 20px 20px; box-shadow: var(--shadow-card); text-align: left; animation: burst-in .45s var(--ease-out-back) both; }
.gate__h { font-family: "Graphik LC TT", "Manrope", sans-serif; font-weight: 600; letter-spacing: -.02em; font-size: 23px; margin: 0 0 6px; }
.gate__sub { font-size: 14px; line-height: 1.45; color: var(--ink-soft); margin: 0 0 14px; }
.gate__f { display: block; margin: 0 0 10px; }
.gate__f span { display: block; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 4px; }
.gate__f input { width: 100%; padding: 12px 14px; border-radius: var(--ih-r-sm); border: 1.5px solid var(--line); background: var(--cream-card); font: inherit; font-size: 15px; color: var(--ink); outline: none; transition: border-color .15s; }
.gate__f input:focus { border-color: var(--sb-blue); }
.gate__f input.bad, .gate__f input.bad:focus { border-color: var(--err); }
.gate__f input::placeholder { color: var(--ink-soft); opacity: .6; }
.gate__err { min-height: 1.2em; font-size: 12.5px; color: var(--err); margin: 0 0 8px; }
/* подсказки доменов почты: чипы под полем, тап дополняет адрес */
.gate__doms { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; min-height: 0; }
.gate__dom { appearance: none; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 400; color: var(--ink); background: var(--cream-card); border: 1px solid var(--line); border-radius: var(--ih-r-pill); padding: 6px 11px; transition: border-color .15s, color .15s; }
.gate__dom:hover { border-color: var(--sb-blue); color: var(--sb-blue); }

/* ---------- РЕШЕНИЕ-АКЦЕНТ: карточки предметов декора ---------- */
.decide__pair--accent { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-content: center; }
.acard {
  appearance: none; cursor: pointer; position: relative; padding: 9px 8px 10px;
  border-radius: 14px; border: 1.5px solid var(--line); background: var(--cream-card);
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  transition: border-color .18s, transform .18s var(--ease-out-back), box-shadow .18s;
}
.acard img { width: 100%; height: 78px; object-fit: contain; pointer-events: none; }
.acard__cap { text-align: center; }
.acard__cap b { display: block; font-weight: 800; font-size: 12px; line-height: 1.12; }
.acard__cap span { font-size: 10.5px; color: var(--ink-soft); }
.acard__check { position: absolute; top: 6px; right: 6px; width: 21px; height: 21px; border-radius: 50%; background: var(--cobalt); color: #fff; display: grid; place-items: center; font-size: 12px; font-style: normal; opacity: 0; transform: scale(.6); transition: .18s; }
.acard:active { transform: scale(.97); }
.acard.on { border-color: var(--cobalt); box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.acard.on .acard__check { opacity: 1; transform: scale(1); }

/* ---------- БЮДЖЕТ: фактическая сумма + остаток ---------- */
.budget__sum { font-size: 15px; color: #000; margin: 0 0 8px; }
.budget__sum b { font-weight: 600; white-space: nowrap; }
.budget__sum.over b { color: var(--err); }

/* disabled-состояние кнопок */
.btn:disabled { opacity: .5; filter: saturate(.55); cursor: default; }
.btn:disabled:active { transform: none; }

/* ---------- ПЛАНИРОВКА (блюпринт-схемы) ---------- */
.plan { height: 100%; display: flex; flex-direction: column; }
/* РАЗМИНКА: колода-Тиндер «угадай стиль» */
/* на десктопе колода и кнопки собраны узкой колонкой, как мокапы первой страницы */
/* шапка разминок — как в онбординге: счётчик справа (подпись экрана только сверху справа в .step) */
.tinder { height: 100%; max-height: 880px; display: flex; flex-direction: column; width: 100%; max-width: 680px; margin: auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.tinder__head { display: flex; align-items: baseline; justify-content: flex-end; }
.tinder__count { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--ink-soft); white-space: nowrap; }

.deck { position: relative; flex: 1 1 auto; min-height: 170px; display: flex; align-items: center; justify-content: center; }
/* карта держит пропорцию 3:4 от доступной высоты колоды: при росте вердикта уменьшается, а не плющится */
.tcard { position: absolute; height: min(100%, 400px); aspect-ratio: 3 / 4; width: auto; max-width: 90%; border-radius: var(--ih-r-lg); overflow: hidden; background: var(--paper-2); box-shadow: var(--shadow-card); z-index: 3; will-change: transform; transition: transform .28s var(--ease), opacity .28s var(--ease); touch-action: pan-y; user-select: none; -webkit-user-select: none; container-type: size; cursor: grab; }
.tcard.grab { transition: none; cursor: grabbing; }
/* «взведено»: синее кольцо — визуальный аналог вибрации (iPhone вибро из браузера не умеет) */
.tcard.armed { box-shadow: 0 0 0 4px rgba(61, 59, 255, .5), var(--shadow-card); }
/* колода веером: призраки = следующие интерьеры, развёрнуты веером и приподняты
   (эффект стопки карт / вкладок). Разворот от нижнего края. */
/* призраки колоды выглядывают вправо и чуть вверх и НЕ вылезают за низ карты (не накрывают подписи) */
.tcard--ghost { z-index: 1; background-size: cover; background-position: center; transform-origin: 50% 100%; filter: brightness(.72) saturate(.92); pointer-events: none; }
.tcard--ghost::after { content: ""; position: absolute; inset: 0; background: rgba(20,18,16,.18); }
.tcard--g1 { transform: translate(16px, -10px) rotate(3deg) scale(.96); z-index: 2; }
.tcard--g2 { transform: translate(31px, -20px) rotate(6deg) scale(.925); z-index: 1; opacity: .92; }
.tcard__img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
/* подписи-подсказки свайпа — продуктовые пилюли Skillbox: синяя заливка,
   Graphik 600, без наклона и белых рамок «тиндер-штампа» */
.tcard__stamp { position: absolute; bottom: 76px; font-family: inherit; font-weight: 600; letter-spacing: -.01em; font-size: 16px; padding: 10px 18px; border-radius: 999px; color: #fff; background: var(--sb-blue); box-shadow: 0 6px 18px -6px rgba(16,16,18,.35); opacity: 0; transition: opacity .15s; pointer-events: none; }
.tcard__stamp--l { left: 14px; }
.tcard__stamp--r { right: 14px; }
.tcard.to-left  .tcard__stamp--l { opacity: 1; }
.tcard.to-right .tcard__stamp--r { opacity: 1; }
.tcard__reveal { position: absolute; left: 0; right: 0; bottom: 0; padding: 46px 16px 16px; background: linear-gradient(to top, rgba(12,12,14,.94), rgba(12,12,14,.55) 62%, transparent); color: #fff; transform: translateY(101%); transition: transform .32s var(--ease); }
.tcard.done .tcard__reveal { transform: none; }
/* имя стиля масштабируется от САМОЙ карты (cqw), не от окна: на уменьшенной
   карте после ответа текст сжимается, а не ломается по слогам */
.tcard__name { display: block; font-family: "Graphik LC TT", "Manrope", sans-serif; font-weight: 600; letter-spacing: -.02em; font-size: clamp(13px, 5vw, 24px); font-size: clamp(10px, 11.5cqw - 4px, 24px); line-height: 1.12; margin: 0 0 2px; color: #fff; }
.tcard__latin { display: block; font-size: clamp(9px, 4.5cqw, 12px); font-weight: 500; letter-spacing: .03em; color: rgba(255,255,255,.72); }
.tcard.fly-l { transform: translateX(-145%) rotate(-16deg); opacity: 0; }
.tcard.fly-r { transform: translateX(145%) rotate(16deg); opacity: 0; }

.tinder__choices { position: relative; z-index: 5; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
/* обучающее покачивание первой карты: колода сама показывает жест свайпа */
@keyframes deck-sway {
  0%, 100% { transform: none; }
  16% { transform: translateX(36px) rotate(2.6deg); }
  32% { transform: none; }
  48% { transform: translateX(-36px) rotate(-2.6deg); }
  64% { transform: none; }
}
@keyframes sway-stamp-r { 0%, 28%, 100% { opacity: 0; } 10%, 22% { opacity: 1; } }
@keyframes sway-stamp-l { 0%, 38%, 64%, 100% { opacity: 0; } 46%, 58% { opacity: 1; } }
.tcard.hint { animation: deck-sway 2.6s .7s var(--ease) 1; }
.tcard.hint .tcard__stamp--r { animation: sway-stamp-r 2.6s .7s var(--ease) 1; }
.tcard.hint .tcard__stamp--l { animation: sway-stamp-l 2.6s .7s var(--ease) 1; }
/* выборы = очевидные кнопки-пилюли (ghost-форма воронки); при драге карты кнопка стороны «заряжается» синим */
/* кнопки-стилей под колодой — вторичные кнопки: белые, тёмная обводка 1px,
   тёмный текст 500, радиус 12; при перетаскивании заливаются синим */
.tchoice { appearance: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; padding: 13px 12px; border-radius: 12px; border: 1px solid var(--ink); background: #fff; font: inherit; font-family: "Graphik LC TT", "Manrope", sans-serif; font-size: 15px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; color: var(--ink); transition: transform .15s var(--ease), color .18s, background .18s, border-color .18s, opacity .2s; }
.tchoice__lb { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) {
  .tchoice:hover:not(:disabled) { border-color: var(--sb-blue); color: var(--sb-blue); }
}
.tchoice:active { transform: scale(.97); }
.tchoice:disabled { cursor: default; }
.tchoice:disabled:not(.right):not(.wrong) { opacity: .35; }
.tinder__choices.arm-l .tchoice--l, .tinder__choices.arm-r .tchoice--r { background: var(--sb-blue); border-color: var(--sb-blue); color: #fff; transform: scale(1.03); }
.tinder__choices.arm-l .tchoice--r, .tinder__choices.arm-r .tchoice--l { opacity: .45; }
/* состояния ответа: статус ≠ кнопка — верный стиль подсвечен контуром и тонировкой, промах гаснет */
.tchoice.right { border-color: var(--sb-blue); color: var(--sb-blue); background: rgba(61, 59, 255, .07); }
.tchoice.wrong { color: var(--ink-soft); border-color: var(--line); opacity: .5; }

/* ---------- финал · «разбор от студии» (методический вердикт по этапам) ---------- */
.review { background: #fff; border-radius: 20px; padding: 18px; margin: 14px 0 4px; box-shadow: var(--sh-1); }
.review__k { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ih-gold-d); }
.review__t { font-size: 18px; font-weight: 600; letter-spacing: -.01em; margin-top: 4px; }
.review__rows { margin-top: 12px; display: flex; flex-direction: column; }
.review__row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--hair); font-size: 14px; }
.review__row:last-child { border-bottom: 0; }
.review__row b { font-weight: 600; flex: 1; }
.review__row span { color: var(--ink-soft); font-size: 12.5px; }
.review__vd { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-style: normal; font-size: 12px; font-weight: 700; }
.review__vd.ok { background: rgba(61,59,255,.1); color: var(--sb-blue); }
.review__vd.grow { background: var(--cream-2); color: var(--ih-gold-d); }
.review__insight { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft);
  background: var(--paper); border-radius: 12px; padding: 10px 12px; }
.review__insight b { color: var(--ink); font-weight: 600; }
.review__insight--grow { background: var(--cream-2); }
.review__match { margin-top: 14px; }
.review__match-k { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ih-gold-d); }
.review__match-n { font-size: 34px; font-weight: 600; letter-spacing: -.02em; margin: 2px 0 6px; }
.review__bar { height: 7px; border-radius: 999px; background: var(--line); overflow: hidden; }
.review__bar i { display: block; height: 100%; border-radius: 999px; background: var(--sb-blue); transition: width .8s var(--ease); }

/* padding 3px: кольцо выбора/ховера (box-shadow наружу) не режется о края
   скролл-контейнера .plan — у карточек есть запас со всех сторон */
.plan__pair { flex: 1; display: grid; grid-template-columns: 1fr; gap: 12px; margin: 8px 0; padding: 3px; min-height: 0; align-content: center; }
/* карточки вариантов — селектор-карты: белый флэт, радио-индикатор в подписи;
   выбор = синее кольцо (как «взведённая» карта разминки) + залитый индикатор */
.plancard {
  appearance: none; cursor: pointer; font: inherit; padding: 10px 10px 12px; border-radius: var(--ih-r-lg);
  border: 0; background: #fff; box-shadow: var(--sh-1);
  display: flex; flex-direction: column; gap: 9px;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), opacity .2s;
}
@media (hover: hover) {
  .plancard:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px rgba(61, 59, 255, .35), var(--sh-1); }
}
.plancard__sv { background: var(--paper); border-radius: var(--ih-r-md); overflow: hidden; padding: 6px; }
.plancard__sv svg { display: block; width: 100%; height: auto; }
.plancard__cap { display: flex; align-items: flex-start; gap: 9px; text-align: left; padding: 0 3px; }
.plancard__dot { flex: 0 0 auto; margin-top: 2px; width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; transition: border-color .18s, background .18s; }
.plancard__tx b { display: block; font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.plancard__tx span { font-size: 12.5px; line-height: 1.35; color: var(--ink-soft); }
.plancard:active { transform: scale(.985); }
.plancard.right { box-shadow: 0 0 0 3px var(--sb-blue), var(--sh-1); }
.plancard.right .plancard__dot { border-color: var(--sb-blue); background: var(--sb-blue); box-shadow: inset 0 0 0 3px #fff; }
.plancard.wrong { box-shadow: 0 0 0 3px var(--ink-soft), var(--sh-1); }
.plancard.wrong .plancard__dot { border-color: var(--ink-soft); background: var(--ink-soft); box-shadow: inset 0 0 0 3px #fff; }
.plan__pair:has(.chosen) .plancard:not(.chosen) { opacity: .5; }

/* ---------- образовательная врезка «правило дизайнера» ---------- */
.edu {
  margin: 10px 0 0; padding: 11px 13px 12px; position: relative;
  border-radius: 12px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-1);
  font-size: 13px; line-height: 1.5; color: var(--ink); text-align: left;
}
.edu::before { content: "Правило дизайнера"; display: block; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ih-gold-d); margin: 0 0 3px; }
.edu b { font-weight: 800; }
.decide__tip .edu { margin: 8px 0; }

/* ---------- СДАЧА ПРОЕКТА ---------- */
.handover { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; text-align: center; padding-bottom: 6px; }
/* герой сдачи = собранная игроком комната (портрет 821×1100, как в сцене) */
.handover__hero { width: 100%; max-width: 340px; margin: 0 auto 14px; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 821/1100; max-height: 46vh; box-shadow: var(--shadow-card); animation: tilein .6s var(--ease-out-back) both; }
.handover__hero .rroom { width: 100%; height: 100%; margin: 0; max-height: none; border-radius: 0; }
.handover__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.handover .kicker { justify-content: center; }
.handover .h2 { margin: 6px 0 14px; }
.handover__msg { display: flex; align-items: flex-start; gap: 10px; max-width: 440px; width: 100%; margin: 0 auto 16px; text-align: left; }
.handover__msg .chat__av { width: 38px; height: 38px; }
.handover__msg .cbub { margin: 0; }
.handover__recap { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 440px; width: 100%; margin: 0 auto; }
.recap { background: var(--cream-card); border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; text-align: left; }
.recap span { display: block; font-size: 10.5px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.recap b { font-weight: 800; font-size: 14px; }

/* ---------- РЕШЕНИЕ-ПАЛИТРА (цветовые наборы) ---------- */
.decide__pair--palette { display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.palcard {
  appearance: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 12px;
  border-radius: 16px; border: 1.5px solid var(--line); background: var(--cream-card); text-align: left;
  outline: 3px solid transparent; outline-offset: -3px; transition: .2s;
}
.palcard:active { transform: scale(.98); }
.palcard__chips { display: flex; gap: 4px; flex: 0 0 auto; }
.palcard__chips i { width: 32px; height: 46px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.07); }
.palcard__cap b { display: block; font-weight: 800; font-size: 15px; }
.palcard__cap span { font-size: 12px; color: var(--ink-soft); }
.palcard.right { outline-color: var(--sb-blue); }
.palcard.wrong { outline-color: var(--ink-soft); }
.decide__pair--palette:has(.chosen) .palcard:not(.chosen) { opacity: .5; }

.offer__why { font-size: 14px; line-height: 1.42; color: var(--cobalt); font-weight: 700; margin-top: 10px; text-align: center; }

/* ============================================================
   v2 — НОВЫЕ КОМПОНЕНТЫ
   ============================================================ */

/* десктоп: комфортная колонка по центру для всех интерактивных экранов */
@media (min-width: 540px) {
  .chat, .plan, .budget, .finish, .shop, .ba, .onb, .onbq, .handover { max-width: 680px; margin: 0 auto; width: 100%; }
}

/* ---------- ИНТРО: тёмный читаемый заголовок ---------- */
.cover2__lede { text-align: center; flex: 0 0 auto; margin: 2px 0 2px; }
.cover2__kick { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--terra); }
.cover2__h1 {
  font-family: "Playfair Display", Georgia, serif; font-weight: 900; line-height: .96; letter-spacing: -.01em;
  font-size: clamp(30px, 8.2vw, 46px); color: var(--ink); margin-top: 4px;
}
.cover2__h1 em { font-style: italic; color: var(--terra); }
.frame--intro { flex: 1 1 auto; min-height: 110px; max-height: 30vh; margin: 10px 0 12px; }

/* ---------- ЧАТ: выбор реплик дизайнера ---------- */
.chat__choice-hint { font-size: 12px; font-weight: 700; color: var(--ink-soft); text-align: center; margin-bottom: 8px; }
.chat__choices { display: flex; flex-direction: column; gap: 8px; }
.chat__choice {
  appearance: none; cursor: pointer; text-align: left; font-family: inherit; font-size: 14px; line-height: 1.35;
  padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--cobalt);
  background: rgba(40, 64, 156, .05); color: var(--ink); transition: .18s;
}
.chat__choice:hover { background: rgba(40, 64, 156, .1); }
.chat__choice:active { transform: scale(.98); }
.brief-card__pal { display: flex; gap: 6px; margin-top: 14px; }
.brief-card__pal i { flex: 1; height: 22px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }

/* ---------- ПЛАНИРОВКА: «дано» = окно программы дизайнера ----------
   Мокап со стартового экрана (бар-светофор + вкладки этапов) становится рабочим
   инструментом: активная вкладка «Планировка», внутри план от застройщика.
   Флэт по системе Skillbox: белая карточка без обводок, радиусы --ih-r-*. */
.plandev { flex: 0 0 auto; margin: 8px 0 10px; }
.planwin { background: #fff; border-radius: var(--ih-r-lg); overflow: hidden; box-shadow: var(--sh-1); }
.planwin__bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #F6F3EC; border-bottom: 1px solid var(--hair); }
.planwin__dots { display: inline-flex; gap: 5px; flex: 0 0 auto; }
.planwin__dots i { width: 9px; height: 9px; border-radius: 50%; }
.planwin__dots i:nth-child(1) { background: #EF8579; }
.planwin__dots i:nth-child(2) { background: #F0C36A; }
.planwin__dots i:nth-child(3) { background: #83C98B; }
.planwin__title { font-size: 12px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.planwin__facts { padding: 11px 14px 13px; }
.planwin__k { display: block; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ih-gold-d); margin-bottom: 6px; }
.planwin__probs { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.planwin__probs li { font-size: 12.5px; line-height: 1.35; color: var(--ink-soft); padding-left: 14px; position: relative; }
.planwin__probs li::before { content: "•"; position: absolute; left: 0; color: var(--ink); font-weight: 800; font-size: 13.5px; line-height: 1.1; }

/* ---------- ОТДЕЛКА: свотчи + превью комнаты ---------- */
.finish { height: 100%; display: flex; flex-direction: column; }
.finish__room {
  position: relative; flex: 1; min-height: 0; border-radius: var(--r-lg); overflow: hidden;
  background: #ddd center/cover no-repeat; box-shadow: var(--shadow-card); margin: 6px 0 10px;
}
.finish__overlay { position: absolute; inset: 0; transition: background .4s var(--ease); mix-blend-mode: multiply; }
.finish__spec {
  position: absolute; left: 12px; right: 12px; bottom: 12px; font-size: 12px; color: #fff;
  background: rgba(0,0,0,.42); padding: 7px 12px; border-radius: 100px; backdrop-filter: blur(6px); min-height: 1.2em;
}
.finish__spec b { font-weight: 800; }
.finish__groups { display: flex; flex-direction: column; gap: 10px; }
.swrow { display: flex; align-items: flex-start; gap: 10px; }
.swrow__label { flex: 0 0 46px; font-size: 12px; font-weight: 800; color: var(--ink); padding-top: 8px; }
.swrow__tiles { flex: 1; display: flex; gap: 8px; }
.swatch { appearance: none; cursor: pointer; flex: 1; min-width: 0; padding: 0; border: none; background: none; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.swatch i { width: 100%; height: 32px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); border: 2.5px solid transparent; transition: .18s; }
.swatch span { font-size: 9.5px; line-height: 1.05; color: var(--ink-soft); text-align: center; }
.swatch:active { transform: scale(.96); }
.swatch.on i { border-color: var(--cobalt); box-shadow: 0 4px 12px -4px rgba(40,64,156,.5), inset 0 0 0 1px rgba(0,0,0,.08); }
.swatch.on span { color: var(--ink); font-weight: 700; }

/* ---------- МАГАЗИН (мебель / декор) ---------- */
.shop { height: 100%; display: flex; flex-direction: column; }
.shop__wallet {
  flex: 0 0 auto; font-size: 12.5px; color: var(--ink); background: var(--cream-card);
  border: 1px solid var(--line); border-radius: 100px; padding: 8px 14px; text-align: center; box-shadow: var(--shadow-soft);
}
.shop__wallet b { font-weight: 800; white-space: nowrap; }
.shop__wallet.over { color: var(--err); border-color: var(--err); }
.shop__wallet.shake { animation: shakeX .42s; }
@keyframes shakeX { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }
.shop__grid {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 2px; align-content: start;
}
.shop__grid::-webkit-scrollbar { width: 0; }
.shopcard {
  appearance: none; cursor: pointer; position: relative; padding: 10px; border-radius: 16px;
  border: 1.5px solid var(--line); background: var(--cream-card);
  display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; transition: .18s;
}
.shopcard:active { transform: scale(.98); }
.shopcard.on { border-color: var(--cobalt); box-shadow: var(--shadow-soft); }
.shopcard__media { width: 100%; height: 74px; display: grid; place-items: center; }
.shopcard__media img { max-width: 100%; max-height: 74px; object-fit: contain; }
.shopcard__icon { color: var(--cobalt); }
.shopcard__icon svg { width: 46px; height: 46px; }
.shopcard__name { font-size: 13px; font-weight: 800; line-height: 1.1; }
.shopcard__tag { font-size: 10.5px; color: var(--ok); }
.shopcard__tag.off { color: var(--ink-soft); }
.shopcard__price { font-size: 13px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.shopcard__check { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--cobalt); color: #fff; display: grid; place-items: center; font-size: 12px; font-style: normal; opacity: 0; transform: scale(.6); transition: .18s; }
.shopcard.on .shopcard__check { opacity: 1; transform: scale(1); }
.shopcard__check::before { content: ""; width: 12px; height: 12px; background: #fff;
  -webkit-mask: var(--ck) center / contain no-repeat; mask: var(--ck) center / contain no-repeat; }

/* ============================================================
   v3 — БРЕНД-КНОПКИ, РЕЙТИНГ, КОНЦЕПЦИЯ, ОТДЕЛКА-БОРД, БАЛАНС, ПОДАРКИ
   ============================================================ */

/* кнопка Skillbox — тёмная пилюля + лаймовый текст (как в кибербезе: лайм на тёмном) */
/* главная CTA внутренних экранов — фирменный синий Skillbox (тёмный+лайм кибербеза выведен) */
.btn--sb { background: var(--sb-blue); color: #fff; font-weight: 700; box-shadow: none; }
.btn--sb:hover { background: #302EF0; box-shadow: none; }
.btn--sb:disabled { background: var(--paper-3); color: var(--ink-soft); }
.btn--logo { gap: 10px; }
.btn--logo::before { content: ""; width: 18px; height: 18px; border-radius: 5px; background: #fff; flex: 0 0 auto; }

/* десктоп-центровка новых экранов */
@media (min-width: 540px) {
  .concept, .shop, .finish, .light, .plan, .budget, .chat, .ba, .onb, .onbq, .handover { max-width: 680px; margin: 0 auto; width: 100%; }
}

/* ---------- ИНТРО: читаемый заголовок + фрейм в тон фона ---------- */
.cover2__lede { text-align: center; flex: 0 0 auto; margin: 2px 0 2px; }
.cover2__kick { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--terra); }
.cover2__h1 { font-family: "Playfair Display", Georgia, serif; font-weight: 900; line-height: .96; letter-spacing: -.01em; font-size: clamp(30px, 8.2vw, 46px); color: var(--ink); margin-top: 4px; }
.cover2__h1 em { font-style: italic; color: var(--terra); }
.frame--intro { flex: 1 1 auto; min-height: 120px; max-height: 30vh; margin: 10px 0 12px; background: var(--paper-3); box-shadow: 0 20px 44px -26px rgba(40,30,20,.5); }
/* лого одного масштаба на всех экранах (30px, как на первой странице) */
.chrome { padding-top: calc(20px + env(safe-area-inset-top)); }
/* десктоп: парящие айтемы поверх, но у самых краёв — не наезжают на колонку */
@media (min-width: 1280px) { body.on-intro .floatbg { z-index: 3; } }

/* ============================================================
   ЭКРАН 1 — ГЕРОЙ v4: полноэкранное фото + живой хук «клиент пишет»
   Фиксит: контент интро больше не переполняет вьюпорт (fit в .stage),
   CTA всегда в первом виде. Энергия: пульс-уведомление + лайм-CTA.
   ============================================================ */
#scr-intro { padding: 0; }
.hero {
  position: absolute; inset: 0; overflow: hidden;
  background: var(--ink);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 32%;
  opacity: 0; transition: opacity 1.1s var(--ease);
  animation: kenburns 12s ease-in-out infinite alternate;
}
.hero__media img.on { opacity: 1; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(10,8,6,.55) 0%, rgba(10,8,6,.12) 24%, rgba(10,8,6,.42) 50%, rgba(10,8,6,.78) 66%, rgba(8,6,4,.94) 84%, rgba(6,5,4,.98) 100%);
}

/* хук-уведомление «Алина печатает…» */
.hero__ping {
  position: absolute; z-index: 3; top: 16px; left: 16px; right: auto;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 8px; border-radius: 100px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.6);
  animation: pingIn .7s var(--ease-out-back) both .2s;
}
.hero__ping-av { position: relative; width: 34px; height: 34px; flex: 0 0 auto; }
.hero__ping-av img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.5); }
.hero__ping-av::after {
  content: ""; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--online); border: 2px solid #fff;
}
.hero__ping-txt { display: flex; flex-direction: column; line-height: 1.1; }
.hero__ping-txt b { color: #fff; font-size: 12.5px; font-weight: 800; }
.hero__typing { color: rgba(255,255,255,.82); font-size: 11.5px; display: inline-flex; align-items: center; gap: 3px; }
.hero__typing i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; display: inline-block; animation: typingDot 1.2s infinite; }
.hero__typing i:nth-child(2) { animation-delay: .2s; }
.hero__typing i:nth-child(3) { animation-delay: .4s; }
@keyframes typingDot { 0%,60%,100%{ opacity:.3; transform: translateY(0);} 30%{ opacity:1; transform: translateY(-2px);} }
@keyframes pingIn { from { opacity: 0; transform: translateY(-10px) scale(.9); } to { opacity: 1; transform: none; } }

.hero__seal {
  position: absolute; z-index: 3; top: 14px; right: 14px;
  width: 74px; height: 74px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.85); color: #fff;
  display: grid; place-items: center; text-align: center;
  font-family: "Playfair Display", serif; font-style: italic; font-weight: 700;
  font-size: 14px; line-height: 1.05; transform: rotate(-10deg);
  background: rgba(0,0,0,.14); backdrop-filter: blur(3px);
}

.hero__body {
  position: relative; z-index: 2; color: #fff;
  padding: 0 20px calc(18px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
}
.hero__eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.92); margin-bottom: 8px; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.hero__h1 {
  font-family: "Playfair Display", Georgia, serif; font-weight: 900;
  line-height: .96; letter-spacing: -.01em; font-size: clamp(34px, 10vw, 52px);
  text-shadow: 0 2px 24px rgba(0,0,0,.5);
}
.hero__h1 em { font-style: italic; color: #fff; }
.hero__sub { font-size: 14.5px; line-height: 1.35; color: rgba(255,255,255,.9); margin-top: 10px; max-width: 22em; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.hero__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.hero__chips span {
  font-size: 11.5px; font-weight: 700; color: #fff;
  padding: 5px 11px; border-radius: 100px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24);
  backdrop-filter: blur(6px);
}
.hero__cta { position: relative; margin-top: 16px; font-size: 15px; padding-left: 16px; padding-right: 16px; box-shadow: 0 14px 34px -12px rgba(40,64,156,.6); }
.hero__cta::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(40,64,156,.5); animation: ctaPulse 2.4s var(--ease) infinite;
  pointer-events: none;
}
@keyframes ctaPulse { 0%{ box-shadow: 0 0 0 0 rgba(40,64,156,.45);} 70%{ box-shadow: 0 0 0 13px rgba(40,64,156,0);} 100%{ box-shadow: 0 0 0 0 rgba(40,64,156,0);} }
.hero__rating { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; justify-content: center; flex-wrap: wrap; }
.hero__rating b { font-family: "Playfair Display", serif; font-weight: 800; font-size: 19px; color: #fff; }
.hero__stars { color: #F4C34D; font-size: 12px; letter-spacing: 1px; }
.hero__rating-src { font-size: 10.5px; color: rgba(255,255,255,.72); }

/* десктоп: держим герой комфортной колонкой */
@media (min-width: 540px) {
  .hero { max-width: 600px; margin: 0 auto; border-radius: 0; }
}

/* ---------- РЕЙТИНГ (как в кибербезе — со ссылкой на площадки) ---------- */
.rating { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; }
.rating__score { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.rating__score b { font-family: "Playfair Display", serif; font-weight: 800; font-size: 30px; color: var(--ink); }
.rating__stars { color: #E8A33D; font-size: 13px; letter-spacing: 1px; }
.rating__src { font-size: 11.5px; color: var(--ink-soft); text-align: left; }
.rating__pills { display: flex; gap: 6px; margin-top: 5px; }
.rating__pills i { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--ink); background: var(--paper-2); border: 1px solid var(--line); border-radius: 100px; padding: 3px 9px; }

/* ---------- ЧАТ: блок выбора реплик прямо в ленте (у сообщений) ---------- */
.chat__status.typing { color: var(--ink-soft); }
.chat__choice-block { align-self: stretch; background: var(--paper-2); border: 1px solid var(--line); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.chat__choice-hint { font-size: 12px; font-weight: 800; color: var(--ink-soft); }
/* варианты ответа — «черновики реплик»: кремовые карточки как пузыри чата,
   обычный чернильный текст, синяя обводка только при наведении */
.chat__choice { appearance: none; cursor: pointer; text-align: left; font-family: "Graphik LC TT", "Manrope", sans-serif; font-size: 14px; font-weight: 400; line-height: 1.4; padding: 13px 15px; border-radius: 14px; border: 1px solid var(--line); background: var(--cream-card); color: var(--ink); transition: .18s; }
.chat__choice:hover { border-color: var(--sb-blue); background: #fff; }
.chat__choice:active { transform: scale(.98); }
/* урок в чате — карточка-реплика наставника, «вклеенная» в ленту */
.chat__lesson { align-self: stretch; position: relative; background: #fff; border: 0; box-shadow: 0 10px 26px rgba(32, 30, 24, .09); border-radius: 16px; padding: 14px 14px 13px; transform: rotate(-.4deg); }
.chat__lesson .vmen { margin-bottom: 8px; }
.chat__lesson .vmen__say { font-size: 15px; margin-bottom: 0; }
.chat__lesson .edu { box-shadow: none; background: var(--paper); }
/* в уроках чата речь про бриф, а не общее «правило дизайнера» */
.chat__lesson .edu::before { content: "Первый шаг: бриф"; }
.brief-card__pal { display: flex; gap: 6px; margin-top: 14px; }
.brief-card__pal i { flex: 1; height: 22px; border-radius: 6px; }
/* брифкард — читаемый: тёмный заголовок на светлом (#14) */
.chat__body .brief-card { background: var(--cream-card); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.chat__body .brief-card h4 { color: var(--terra); }
.chat__body .brief-card li::before { color: var(--terra); }
/* закреплённая панель «ваш ответ» — визуально отделена от ленты сообщений */
.chat__foot { flex: 0 0 auto; padding-top: 10px; }
.chat__reply { background: #fff; border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 10px 26px rgba(32, 30, 24, .09); }
.chat__reply-h { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--cobalt); }
.chat__reply .chat__choice { background: #fff; }
.chat__reply .chat__choice:hover { background: rgba(40,64,156,.05); }

/* ---------- ПЛАНИРОВКА: экран скроллится, чертёж застройщика ограничен по высоте ---------- */
/* контейнер расширен на ширину «навылета» карточек, иначе scroll-клип
   срезает кольцо выбора по крайним краям; на широких экранах остаётся
   центрирование (max-width учитывает боковой запас 2×14px) */
.plan { height: 100%; display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; margin: 0 -14px; padding: 0 14px; }
@media (min-width: 540px) {
  .plan { margin: 0 auto; max-width: 708px; }
}
.plan::-webkit-scrollbar { width: 0; }
/* варианты — оба на одном экране, в ряд, максимально крупно: сетка выходит
   за боковые поля экрана (навылет), хром карточек ужат до минимума */
.plan__pair { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 6px -11px 10px; min-height: 0; align-content: start; padding: 3px; }
.plan__pair .plancard { padding: 4px 4px 8px; gap: 5px; }
.plan__pair .plancard__sv { padding: 0; }
.plan__pair .plancard__cap { padding: 0 6px; }
.plan__pair .plancard__dot { width: 15px; height: 15px; }
.plan__pair .plancard__tx b { font-size: 13px; }
.plancard__sv { padding: 4px; }
.plancard__sv svg { height: auto; width: 100%; }

/* ---------- КОНЦЕПЦИЯ (веер выкрасов) ----------
   Селектор-карты по системе Skillbox (радио-индикатор, выбор = синее кольцо).
   Каждая гамма — стопка карточек краски, как веер колориста: тап пружинисто
   раскрывает веер, под ним появляются материалы, пояснение тренда и кнопка
   «Беру эту гамму». Ответ фиксируется только кнопкой. */
.concept { height: 100%; display: flex; flex-direction: column; }
.concept__grid { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding: 8px 3px; }
.concept__grid::-webkit-scrollbar { width: 0; }
/* flex: none — грид скроллится, карта не сжимается под высоту экрана */
/* font: inherit — <button> не наследует шрифт страницы сам, без этого
   вся карта набирается системным шрифтом вместо Graphik */
.ccard { flex: none; appearance: none; border: 0; cursor: pointer; font: inherit; text-align: left; padding: 13px 14px 14px; border-radius: var(--ih-r-lg); background: #fff; box-shadow: var(--sh-1, var(--shadow-soft)); transition: box-shadow .25s var(--ease), opacity .2s; }
.ccard.open { box-shadow: 0 0 0 2px rgba(61, 59, 255, .35), var(--sh-1, var(--shadow-soft)); }
@media (hover: hover) {
  .ccard:not(.chosen):not(.open):hover { box-shadow: 0 0 0 2px rgba(61, 59, 255, .2), var(--sh-1, var(--shadow-soft)); }
}

.ccard__head { display: flex; align-items: center; gap: 9px; }
/* радио-индикатор selector-карты — как на планировке */
.ccard__dot { flex: 0 0 auto; width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; transition: border-color .18s, background .18s; }
.ccard__name { font-weight: 600; font-size: 17px; letter-spacing: -.01em; }
/* бейдж тренда-2026 (тёплый янтарь системы, без капслока) */
.ccard__trend { margin-left: auto; font-size: 11px; font-weight: 600; color: #3A2B07; background: var(--ih-gold); border-radius: var(--ih-r-pill); padding: 5px 12px; white-space: nowrap; }

/* — ВЕЕР: карточки краски из одной точки, тап раскрывает — */
.ccard__fan { position: relative; height: 142px; margin-top: 4px; }
.pfan { position: absolute; left: 50%; bottom: 2px; width: 84px; height: 120px; margin-left: -42px;
  border-radius: 12px; transform-origin: 50% 120%;
  background: radial-gradient(130% 90% at 25% -10%, rgba(255,255,255,.24), rgba(255,255,255,0) 55%), linear-gradient(180deg, rgba(255,255,255,0) 55%, rgba(0,0,0,.14)), var(--c);
  box-shadow: 0 6px 16px -8px rgba(40,30,20,.45), inset 0 0 0 1px rgba(0,0,0,.06);
  transform: rotate(calc(var(--i) * 2.5deg - 3.75deg));
  transition: transform .55s var(--ease-out-back); transition-delay: calc(var(--i) * 30ms); }
/* раскрытие: чистая дуга из одной нижней точки, как колода в руке */
.ccard.open .pfan { transform: rotate(calc(var(--i) * 20deg - 30deg)) translateY(-6px); }
/* имя вдоль длинного края выкраса, снизу вверх — как печатают на веерах
   красок: левый край каждой карты в веере открыт целиком */
.pfan__tx { position: absolute; left: 7px; bottom: 8px; max-height: calc(100% - 32px); writing-mode: vertical-rl; transform: rotate(180deg); display: flex; flex-direction: column; gap: 2px; }
.pfan__name { font-size: 9.5px; font-weight: 600; line-height: 1.2; letter-spacing: .02em; color: #fff; }
.pfan__hex { font-style: normal; font-size: 7.5px; font-weight: 600; letter-spacing: .05em; color: rgba(255,255,255,.66); }
.pfan--ink .pfan__name { color: rgba(22,22,26,.86); }
.pfan--ink .pfan__hex { color: rgba(22,22,26,.48); }
/* трендовый цвет: янтарная звёздочка на выкрасе */
.pfan__star { position: absolute; top: 6px; left: 6px; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; font-size: 8.5px; color: #3A2B07; background: var(--ih-gold); border: 1.5px solid #fff; border-radius: 50%; }

/* — раскрытая часть: материалы мелкой лентой + тренд + кнопка выбора — */
.ccard__more { max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; transition: max-height .45s var(--ease), opacity .35s .08s, margin-top .45s var(--ease); }
.ccard.open .ccard__more { max-height: 420px; opacity: 1; margin-top: 8px; }
.ccard__mats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.cmat { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cmat i { height: 44px; border-radius: 9px; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.cmat b { font-size: 9px; font-weight: 600; line-height: 1.15; color: var(--ink); text-align: center; }
.ccard__trendnote { margin-top: 9px; padding: 8px 11px; font-size: 11px; line-height: 1.45; color: #6B4E1E; background: rgba(240,188,71,.14); border-radius: var(--ih-r-sm); }
.ccard__trendnote b { color: #5A3E12; font-weight: 600; }
.ccard__focal { margin-top: 7px; font-size: 11.5px; color: var(--ink-soft); letter-spacing: .005em; }
.ccard__focal::first-letter { text-transform: uppercase; }
.ccard__cta { display: block; margin-top: 11px; text-align: center; font-size: 14px; font-weight: 600; color: #fff; background: var(--sb-blue); border-radius: var(--ih-r-pill); padding: 12px; }
.ccard__cta:active { opacity: .85; }
/* выбор: синее кольцо системы + залитый радио-индикатор */
.ccard.right { box-shadow: 0 0 0 3px var(--sb-blue), var(--sh-1, var(--shadow-soft)); }
.ccard.right .ccard__dot { border-color: var(--sb-blue); background: var(--sb-blue); box-shadow: inset 0 0 0 3px #fff; }
.ccard.wrong { box-shadow: 0 0 0 3px var(--ink-soft), var(--sh-1, var(--shadow-soft)); }
.ccard.wrong .ccard__dot { border-color: var(--ink-soft); background: var(--ink-soft); box-shadow: inset 0 0 0 3px #fff; }
.concept__grid:has(.chosen) .ccard:not(.chosen) { opacity: .5; }

/* ============ ФАКТУРЫ МАТЕРИАЛОВ ============ */
/* реальное фото материала (макро-съёмка дерева/камня/штукатурки) */
.tex--photo { background-color: var(--c); background-size: cover; background-position: center; background-repeat: no-repeat; }

/* CSS-фолбэк (для концепций без фото-текстур) */
.tex { background-color: var(--c); background-repeat: no-repeat; }

/* известковая штукатурка — мягкие облака света и тени + лёгкая зернистость */
.tex--plaster { background-repeat: repeat, repeat, no-repeat, no-repeat; background-size: 7px 7px, 11px 11px, 100% 100%, 100% 100%; background-image:
  radial-gradient(1px 1px at 30% 40%, rgba(90,60,30,.1), transparent 100%),
  radial-gradient(1px 1px at 75% 65%, rgba(255,255,255,.35), transparent 100%),
  radial-gradient(130% 90% at 28% 18%, rgba(255,255,255,.6), transparent 58%),
  radial-gradient(120% 100% at 82% 92%, rgba(80,52,26,.2), transparent 55%); }

/* дерево — выраженное вертикальное волокно с прожилками */
.tex--wood { background-repeat: repeat; background-image:
  repeating-linear-gradient(90deg, rgba(0,0,0,.22) 0 1px, transparent 1px 5px),
  repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0 1px, transparent 1px 8px),
  repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 2px, transparent 2px 17px),
  linear-gradient(180deg, rgba(255,255,255,.16), rgba(0,0,0,.22)); }

/* камень/травертин — плотная крапинка и мягкие прожилки */
.tex--stone { background-repeat: repeat; background-size: 15px 15px, 19px 19px, 12px 12px, 100% 100%; background-image:
  radial-gradient(1.8px 1.8px at 20% 30%, rgba(0,0,0,.24), transparent 100%),
  radial-gradient(1.8px 1.8px at 72% 62%, rgba(0,0,0,.2), transparent 100%),
  radial-gradient(1.5px 1.5px at 46% 82%, rgba(255,255,255,.6), transparent 100%),
  linear-gradient(158deg, rgba(255,255,255,.26), transparent 42%); }

/* мрамор — заметные светлые прожилки */
.tex--marble { background-image:
  linear-gradient(122deg, transparent 0 42%, rgba(255,255,255,.3) 43% 46%, transparent 48%),
  linear-gradient(98deg, transparent 0 64%, rgba(255,255,255,.2) 66% 68%, transparent 70%),
  linear-gradient(142deg, transparent 0 22%, rgba(255,255,255,.12) 23% 24%, transparent 26%),
  radial-gradient(120% 100% at 18% 8%, rgba(255,255,255,.14), transparent 60%); }

/* лён/ткань — плотное переплетение нитей */
.tex--linen { background-repeat: repeat; background-image:
  repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 1px, transparent 1px 4px),
  repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 1px, transparent 1px 4px),
  linear-gradient(180deg, rgba(255,255,255,.16), transparent); }

/* бархат — глубокий ворс с выраженным световым бликом */
.tex--velvet { background-image:
  linear-gradient(180deg, rgba(255,255,255,.28), transparent 42%, rgba(0,0,0,.36)),
  radial-gradient(85% 66% at 50% 24%, rgba(255,255,255,.26), transparent 60%); }

/* терракота/матовая глина — тёплая выраженная лепка */
.tex--clay { background-image:
  radial-gradient(95% 82% at 34% 24%, rgba(255,255,255,.28), transparent 52%),
  radial-gradient(66% 74% at 82% 90%, rgba(0,0,0,.24), transparent 58%); }

/* глянец — верхний зеркальный блик */
.tex--gloss { background-image:
  linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,0) 40%),
  linear-gradient(0deg, rgba(0,0,0,.07), transparent 28%); }

/* стекло — диагональный световой отлив */
.tex--glass { background-image:
  linear-gradient(120deg, rgba(255,255,255,.5) 8%, transparent 30%, rgba(255,255,255,.24) 54%, transparent 72%); }

/* металл (хром/латунь) — яркая полоса отражения */
.tex--metal { background-image:
  linear-gradient(102deg, rgba(255,255,255,0) 18%, rgba(255,255,255,.6) 42%, rgba(255,255,255,0) 56%, rgba(0,0,0,.2) 86%); }

/* ---------- ОТДЕЛКА: материальный борд + свотчи ---------- */
.finish { height: 100%; display: flex; flex-direction: column; }
.fboard { display: flex; gap: 12px; margin: 6px 0 12px; }
.fboard__cell { flex: 1; background: var(--cream-card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-soft); overflow: hidden; }
.fboard__chip { height: 96px; transition: background .35s var(--ease); }
.fboard__cap { padding: 8px 12px; font-size: 11px; color: var(--ink-soft); }
.fboard__cap b { display: block; font-size: 14px; color: var(--ink); }
.finish__groups { display: flex; flex-direction: column; gap: 10px; }
.swrow { display: flex; align-items: flex-start; gap: 10px; }
.swrow__label { flex: 0 0 46px; font-size: 12px; font-weight: 800; color: var(--ink); padding-top: 8px; }
.swrow__tiles { flex: 1; display: flex; gap: 8px; }
.swatch { appearance: none; cursor: pointer; flex: 1; min-width: 0; padding: 0; border: none; background: none; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.swatch i { width: 100%; height: 40px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); border: 2.5px solid transparent; transition: .18s; background-size: cover; }
.swatch span { font-size: 9.5px; line-height: 1.05; color: var(--ink-soft); text-align: center; }
.swatch.on i { border-color: var(--cobalt); box-shadow: 0 4px 12px -4px rgba(40,64,156,.5); }
.swatch.on span { color: var(--ink); font-weight: 700; }

/* ---------- СЦЕНА КОМНАТЫ (материал ложится на поверхности вживую) ---------- */
.room-wrap { position: relative; flex: 1; min-height: 150px; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-card); margin: 6px 0 12px; }
.room { position: absolute; inset: 0; overflow: hidden; background: #EDEBE6; }
.room__wall { position: absolute; top: 0; left: 0; right: 0; height: 62%; background: #EDEBE6; transition: background .35s var(--ease); }
.room__floor { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: #E7E1D6; transition: background .35s var(--ease); }
.room__base { position: absolute; left: 0; right: 0; top: 61%; height: 3px; background: rgba(0,0,0,.12); }
.room__window { position: absolute; top: 12%; right: 8%; width: 30%; height: 36%; background: linear-gradient(180deg,#cfe0ea,#eef3f6); border: 6px solid #fff; border-radius: 3px; box-shadow: 0 8px 18px -10px rgba(0,0,0,.35); }
.room__window span:nth-child(1) { position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; background: #fff; transform: translateX(-50%); }
.room__window span:nth-child(2) { position: absolute; top: 50%; left: 0; right: 0; height: 4px; background: #fff; transform: translateY(-50%); }
.room__art { position: absolute; top: 15%; left: 9%; width: 19%; height: 23%; border: 5px solid #fff; border-radius: 2px; background-image: linear-gradient(135deg,#d7cdbb,#bfae92); box-shadow: 0 8px 16px -10px rgba(0,0,0,.35); }
.room__plant { position: absolute; right: 5%; bottom: 5%; width: 11%; height: auto; z-index: 3; }
.room__lamp { position: absolute; left: 4%; bottom: 6%; width: 8%; height: auto; z-index: 2; }
.room__rug { position: absolute; left: 12%; right: 12%; bottom: 3%; height: 13%; background: rgba(0,0,0,.07); border-radius: 50%; }
.room__sofa { position: absolute; left: 15%; right: 15%; bottom: 6%; height: 44%; z-index: 2; filter: drop-shadow(0 10px 12px rgba(0,0,0,.18)); }
.room__sofa .js-sofa { fill: #E9E5DD; transition: fill .35s var(--ease); }

/* ---------- ИГРОВАЯ ПЛАШКА БАЛАНСА ---------- */
.wallet-plate { display: flex; align-items: center; gap: 12px; background: var(--cream-card); border: 1px solid var(--line); border-radius: 16px; padding: 10px 14px; box-shadow: var(--shadow-soft); flex: 0 0 auto; }
.wallet-plate.over { border-color: var(--err); }
.wallet-plate__coin { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F4D06A, #D9A72E); color: #7a5a12; display: grid; place-items: center; font-size: 17px; font-weight: 900; flex: 0 0 auto; box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
.wallet-plate__main { flex: 1; line-height: 1.05; }
.wallet-plate__main b { font-weight: 500; font-size: 21px; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
.wallet-plate.over .wallet-plate__main b { color: var(--err); }
.wallet-plate__main span { display: block; font-size: 11px; color: var(--ink-soft); }
.wallet-plate__sub { font-size: 11px; color: var(--ink-soft); white-space: nowrap; }
.wallet-plate.shake { animation: shakeX .42s; }
@keyframes shakeX { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }

/* магазин: карточки (реюз). По системе: белая карточка без бордера, мягкая тень,
   радиус 20px; выбор подсвечивается фирменным синим; теги — охра-кикер (зелёные плашки запрещены) */
.shop { height: 100%; display: flex; flex-direction: column; }
.shop__grid { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 2px; align-content: start; }
.shop__grid::-webkit-scrollbar { width: 0; }
.shopcard { appearance: none; cursor: pointer; position: relative; padding: 12px 10px 11px; border-radius: 20px; border: 1.5px solid transparent; background: #fff; box-shadow: var(--sh-1); display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; transition: .18s; }
.shopcard:active { transform: scale(.98); }
.shopcard.on { border-color: var(--cobalt); box-shadow: var(--sh-2); }
.shopcard__media { width: 100%; height: 108px; display: grid; place-items: center; }
.shopcard__media img { max-width: 92%; max-height: 108px; object-fit: contain; }
.shopcard__name { font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; }
.shopcard__tag { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ih-gold-d); }
.shopcard__tag.off { color: var(--ink-soft); }
.shopcard__price { font-size: 14.5px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.shopcard__check { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--cobalt); color: #fff; display: grid; place-items: center; font-size: 12px; opacity: 0; transform: scale(.6); transition: .18s; }
.shopcard.on .shopcard__check { opacity: 1; transform: scale(1); }
.shopcard__check::before { content: ""; width: 12px; height: 12px; background: #fff;
  -webkit-mask: var(--ck) center / contain no-repeat; mask: var(--ck) center / contain no-repeat; }

/* ---------- ПОДАРКИ (падают, открываются по клику) ---------- */
/* финальные подарки — графит с золотом, рифма с «Тайным подарком» первой страницы */
.gifts { margin: 8px 0 4px; padding: 16px 14px; border-radius: 20px; background: var(--ih-graphite); color: #fff; text-align: center; }
.gifts__head { margin-bottom: 12px; }
.gifts__title { font-weight: 600; font-size: 21px; letter-spacing: -.01em; }
.gifts__sub { font-size: 12px; opacity: .85; margin-top: 2px; }
.gifts__row { display: flex; gap: 8px; }
.gift { flex: 1; min-width: 0; appearance: none; cursor: pointer; border: none; background: rgba(255,255,255,.1); border-radius: 14px; padding: 12px 8px; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 6px; animation: giftDrop .55s var(--ease-out-back) both; }
@keyframes giftDrop { from { transform: translateY(-40px); opacity: 0; } }
.gift__box { position: relative; }
.gift__emoji { font-size: 34px; display: block; filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); transition: transform .3s var(--ease-out-back); }
.gift__lid { display: none; }
.gift__label { font-size: 11.5px; font-weight: 800; line-height: 1.15; }
.gift__reveal { font-size: 11px; opacity: 0; max-height: 0; overflow: hidden; transition: max-height .35s var(--ease), opacity .3s; line-height: 1.3; }
.gift__reveal a { color: var(--ih-gold); font-weight: 700; text-decoration: none; white-space: nowrap; }
.gift.open { background: rgba(255,255,255,.16); }
.gift.open .gift__emoji { transform: scale(1.25) rotate(-6deg); }
.gift.open .gift__reveal { opacity: 1; max-height: 140px; margin-top: 2px; }
.gifts__hint { font-size: 11px; opacity: .8; margin-top: 10px; }

/* ============================================================
   ОТДЕЛКА / МЕБЕЛЬ — перекраска утверждённой комнаты (Redecor-стиль)
   База: обесцвеченный рендер. Материал ложится на зону через multiply —
   реальные тени/складки сохраняются, меняется цвет и фактура.
   ============================================================ */
/* компактный экран отделки: комната вписывается в высоту вьюпорта,
   шаги-чипы + свотчи + кнопка видны без скролла */
/* горизонтальные поля: кольцо выделения плиток (outline + offset) выступает
   за плитку, а overflow контейнера режет по padding-box — даём ему воздух */
.fin { max-width: 680px; margin: 0 auto; width: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-left: 4px; padding-right: 4px; }
.fin::-webkit-scrollbar { width: 0; }
/* сжимается только комната; шаги, свотчи, вердикт и кнопка держат высоту */
.fin .fin__head, .fin .fin__steps, .fin .finish__groups, .fin .decide__tip, .fin .btn { flex: 0 0 auto; }
.fin__head { margin-bottom: 16px; }
.fin__head .h2 { font-size: clamp(25px, 6.4vw, 32px); margin: 10px 0 6px; }
.fin__head .lead { font-size: 15px; margin: 0; }
/* высота комнаты постоянная (не зависит от подсказки/вердикта) и оставляет
   место шагам, плиткам и кнопке «Дальше» без скролла */
#finishRoom { flex: 0 0 auto; height: clamp(260px, 40vh, 470px); display: flex; align-items: center; justify-content: center;
  overflow: visible; box-shadow: none; border-radius: 0; background: none; margin: 0 0 10px; }
/* ============================================================
   ОТДЕЛКА — перекраска живой фотографии комнаты (base-v3).
   Зона = копия фото под пиксельной маской (альфа-PNG):
   не выбрано — «грунтовка» (обесцвечено), выбран материал
   оригинала — зона прозрачна (просвечивает нетронутое фото),
   иначе — hue (mix-blend-mode: color) + shade (multiply)
   прямо по фото: свет, тени и фактура настоящие.
   ============================================================ */
.rroom { position: relative; height: 100%; width: auto; margin: 0 auto 10px;
  aspect-ratio: 821 / 1100; border-radius: var(--r-lg, 18px); overflow: hidden; isolation: isolate;
  max-height: calc((min(100vw, 520px) - 32px) * 1100 / 821);
  background: #EDE6DA; }
.rroom .rbase { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.rz { position: absolute; inset: 0; pointer-events: none; isolation: isolate;
  background: url(assets/redecor/base-v3.jpg?v=204) center / cover;
  -webkit-mask-size: cover; mask-size: cover; -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  transition: filter .45s var(--ease), opacity .45s var(--ease); }
.rz::before, .rz::after { content: ""; position: absolute; inset: 0; transition: background-color .45s var(--ease); }
.rz::before { background: var(--shade, transparent); mix-blend-mode: multiply; }
.rz::after  { background: var(--hue, transparent);  mix-blend-mode: color; }
/* комната юзера на экране декора: собранный на отделке набор.
   Экран прокручивается целиком, грид не зажимаем во внутренний скролл */
.decor-room { flex: 0 0 auto; margin: 4px 0 10px; }
.decor-room .rroom { max-height: 40vh; margin-bottom: 0; }
#scr-decor .shop { overflow-y: auto; -webkit-overflow-scrolling: touch; }
#scr-decor .shop__grid { flex: none; min-height: 0; overflow: visible; }

/* белая база + слои: зона показывает кадр своего выбора сквозь маску (маски = разница кадров) */
.rroom .rz { opacity: 0; background: none center / cover no-repeat; transition: opacity .45s var(--ease); }
/* предметы декора: слой с собственной прозрачностью, без маски */
.rzi { -webkit-mask-image: none; mask-image: none; background-size: 100% 100%; }
/* зона ждёт выбора: «грунтовка» — обесцвеченный участок того же фото */
.rz--pending { filter: saturate(.6) brightness(1.02) contrast(.99); }
/* выбран материал оригинала: зону прячем, просвечивает нетронутое фото */
.rz--canon { opacity: 0; }

/* чипы-шаги визарда: Стены · Пол · Ковёр · Диван · Стол.
   Каждый чип всегда несёт номер (сделанный — галку): состояние читается без легенды */
.fin__steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; margin: 0 0 10px; }
.fchip { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 2px;
  border: none; border-radius: 999px; background: var(--paper-2); color: var(--ink-soft); min-width: 0;
  font-family: "Graphik LC TT", "Manrope", sans-serif; font-weight: 600; font-size: 12.5px; line-height: 1;
  letter-spacing: -.01em; cursor: default; transition: background .18s, color .18s; white-space: nowrap; }
.fchip i { font-style: normal; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  border-radius: 50%; flex: none; background: rgba(31, 29, 26, .10); color: var(--ink-soft);
  font-size: 11px; font-weight: 700; line-height: 18px; font-variant-numeric: tabular-nums;
  transition: background .18s, color .18s; }
/* пройденный шаг: та же брендовая галочка, что и везде */
.fchip i.is-done::before { content: ""; width: 11px; height: 11px; background: currentColor;
  -webkit-mask: var(--ck) center / contain no-repeat; mask: var(--ck) center / contain no-repeat; }
.fchip.cur { background: var(--sb-blue); color: #fff; }
.fchip.cur i { background: rgba(255,255,255,.24); color: #fff; }
.fchip.done { color: var(--ink); cursor: pointer; }
.fchip.done i { background: var(--sb-blue); color: #fff; }

/* список промахов в вердикте отделки */
.fmiss { margin: 6px 0 0; padding-left: 18px; }
.fmiss li { margin: 2px 0; }
.fmiss b { margin-right: 0; }

/* блок обратной связи: вердикт наставника — белая карточка на всю ширину,
   подсказка — просто строка текста без плашки */
.fin .decide__tip { padding: 0; margin: 0 0 10px; min-height: 0; text-align: left; }
.fin .decide__tip .decide__hint { display: block; min-height: 34px; padding: 8px 6px;
  font-size: 14px; color: var(--ink-soft); text-align: center; }
.fin .decide__tip .paper { margin: 10px 0 0; width: 100%; }

/* инвентарь материалов */
.iv { display: flex; flex-direction: column; gap: 12px; max-width: 460px; margin: 0 auto; width: 100%; }
.iv__label { font-size: 12px; font-weight: 600; color: var(--ink); margin: 0 0 6px; }
.iv__tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.iv__tiles--3 { grid-template-columns: repeat(3, 1fr); }
#finishGroups .iv__group { margin-bottom: 6px; }
/* плитки вариантов на отделке — компактнее: узкий ряд по центру,
   картинка комнаты остаётся главной на экране */
#finishGroups .iv__tiles { max-width: 400px; margin: 0 auto; gap: 8px; }
/* плитка варианта = карточка по стайлгайду: фото сверху, подпись под фото
   тёмным по белому (не плашка-градиент поверх картинки) */
.itile { position: relative; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden;
  cursor: pointer; background: #fff; border: none; padding: 0; outline: none;
  box-shadow: 0 1px 2px rgba(34,24,14,.04), 0 8px 18px -12px rgba(34,24,14,.16); transition: .16s; }
.itile__ph { position: relative; display: block; aspect-ratio: 4 / 3; isolation: isolate;
  background-repeat: no-repeat; }
/* подпись: фиксированная высота под две строки мелким кеглем — карточки в ряду
   одного размера при любом лейбле, белого поля под фото минимум */
.itile__name { display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  height: 30px; padding: 0 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); text-align: center; line-height: 1.14;
  background: none; }
.itile:active { transform: scale(.96); }
/* выбор: кольцо с воздухом вокруг карточки */
.itile.on { outline: 2.5px solid var(--sb-blue, #3D3BFF); outline-offset: 2px; }
.itile.on::after { content: ""; position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--sb-blue, #3D3BFF); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.itile.on::before { content: ""; position: absolute; top: 10px; right: 10px; width: 12px; height: 12px; z-index: 2;
  background: #fff; -webkit-mask: var(--ck) center / contain no-repeat; mask: var(--ck) center / contain no-repeat; }

/* ============================================================
   ИНТРО · НИЖНИЕ БЛОКИ v3 — точная система продуктовых страниц
   Skillbox (salary-v2 + «Курс поможет вам»): карточки без
   бордеров и теней, radius 20, чёрный кружок-галочка, плоские
   крупные цифры, серые подписи. Референс: skillbox.ru/course/
   profession-designer-interior (снят вживую).
   ============================================================ */
/* заголовок секции — как h2 продуктовых страниц: крупный, средний вес, без кикеров */
/* масштаб продуктовых страниц Skillbox: H2 секций 32px (моб) / 40px (десктоп), вес 500 */
.ih__sec-h { font-weight: 500; font-size: 32px; letter-spacing: -.02em; line-height: 1.08; color: var(--ink); }
.ih__sec-src { margin-top: 12px; font-size: 15px; line-height: 1.45; color: var(--ink-soft);
  display: flex; align-items: center; gap: 9px; }
/* знак hh — красный круг-фавикон, белая подложка убрана из SVG; по центру строки текста */
.ih__hh { flex: 0 0 auto; width: 26px; height: 26px; display: block; }

/* ---- ДОХОД · карточки salary-v2: пилюля-лейбл сверху, воздух, крупная плоская цифра ---- */
/* отступ до блока = как у «Что тебя ждёт» (26/34) — единый ритм секций */
.ih__sal { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.ih__sal-card { position: relative; background: #FFFFFF; border-radius: 20px; border: 0; box-shadow: none;
  padding: 72px 20px 22px; overflow: hidden; }
/* обе пилюли — яркое золото воронки (лимонный Skillbox не метчился с арт-концептом беж+синий+золото) */
.ih__sal-pill { position: absolute; z-index: 2; top: 16px; left: 16px; font-size: 14px; font-weight: 600; color: #16161A;
  background: var(--ih-gold); padding: 6px 12px; border-radius: 16px; }
.ih__sal-num { position: relative; z-index: 2; display: block; font-size: 38px; font-weight: 500; letter-spacing: -.01em; line-height: 1; color: var(--ink); }
.ih__sal-cap { position: relative; z-index: 2; display: block; margin-top: 8px; font-size: 14px; color: var(--ink-soft); }
/* предметы-вырезки — заполняют воздух карточек (аналог 3D-объектов Skillbox):
   свотчи = инструмент в студии, картина = свои работы на стене своей студии */
.ih__sal-obj { position: absolute; z-index: 1; pointer-events: none; height: auto;
  filter: drop-shadow(0 10px 16px rgba(30,22,14,.22)); }
/* абстрактные гладкие 3D-монеты (стиль золотой бесконечности: без гравировки и деталей) */
/* позиция посчитана по альфа-границам PNG (у файла прозрачные поля ~27%): видимый центр = центру бесконечности */
.ih__sal-obj--coins { right: 0; bottom: 12px; width: 112px; transform: rotate(-3deg);
  filter: drop-shadow(0 16px 14px rgba(30,22,14,.28)); }
/* 3D-бесконечность Skillbox — «парит» выше, перекрашена из синего в тёплое золото (гамма воронки) */
.ih__sal-obj--inf { right: 12px; bottom: 34px; width: 118px; transform: rotate(-6deg);
  filter: grayscale(1) sepia(1) saturate(2.6) hue-rotate(-10deg) brightness(1.12) drop-shadow(0 20px 16px rgba(0,0,0,.45)); }
/* тёмная карточка «своя студия» — мягкий тёмный Skillbox #292929 (не чистый чёрный),
   пилюля — жёлтый акцент как бейджи скидок Skillbox */
.ih__sal-card--dark { background: var(--ih-graphite); }
.ih__sal-card--dark .ih__sal-pill { background: var(--ih-gold); color: #16161A; font-weight: 600; }
.ih__sal-card--dark .ih__sal-num { color: #fff; }
.ih__sal-card--dark .ih__sal-cap { color: #A6A6A6; }

/* ---- ПОДАРКИ + AI-НАСТАВНИК · список «Курс поможет вам»: белая карточка, чёрный кружок-галочка ---- */
.ih__gifts-hd { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.ih__gifts-hd .ih__sec-h { max-width: 24ch; }
.ih__glist { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.ih__gitem { display: flex; align-items: flex-start; gap: 14px; background: #FFFFFF; border: 0; box-shadow: none;
  border-radius: 20px; padding: 20px 20px 21px; }
/* кружки-иконки — фирменный синий Skillbox (цветовой акцент, связка с CTA); своя иконка на каждый подарок */
.ih__gcheck { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--sb-blue); color: #fff; }
.ih__gcheck svg { width: 20px; height: 20px; }
/* тёмный вариант — значок AI-наставника (мягкий чёрный Skillbox, не фиолетовый) */
.ih__gcheck--dark { background: var(--ih-graphite); }
.ih__gitem-tx b { display: block; font-size: 17.5px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.ih__gitem-tx span { display: block; margin-top: 5px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.45; }
/* тайный подарок — тёмная карточка-«шкатулка»: золотое свечение, вотермарк-«?», искры и пробег блика.
   Декор обрезается внутренним слоем .ih__secret-bg, сама карточка без overflow — стопка подарков торчит за края */
.ih__gitem--secret { position: relative; background: var(--ih-graphite);
  box-shadow: inset 0 0 0 1px rgba(240,188,71,.3); }
.ih__secret-bg { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.ih__secret-bg::before { content: ""; position: absolute; right: -46px; top: -70px; width: 230px; height: 230px;
  background: radial-gradient(closest-side, rgba(240,188,71,.26), transparent 72%); }
/* вотермарк — силуэт подарка (форма как у эмодзи 🎁: крышка, бант, лента, коробка) */
.ih__secret-bg::after { content: ""; position: absolute; right: -6px; bottom: -34px; width: 128px; height: 128px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F0BC47'%3E%3Cpath d='M12 6.6C10.9 4.4 8.2 3.2 6.9 4.5c-1.2 1.2-.4 3 1.6 3.5H6a2 2 0 0 0-2 2v1.6c0 .4.3.8.8.8h5.9V8h2.6v4.4h5.9c.5 0 .8-.4.8-.8V10a2 2 0 0 0-2-2h-2.5c2-.5 2.8-2.3 1.6-3.5-1.3-1.3-4-.1-5.1 2.1zm-1.3 7.4H5v5.5A2.5 2.5 0 0 0 7.5 22h3.2v-8zm2.6 8h3.2a2.5 2.5 0 0 0 2.5-2.5V14h-5.7v8z'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: .15; transform: rotate(12deg); }
/* стопка подарков — «лежит» на углу шкатулки (перенесена из шапки секции) */
.ih__secret-gifts { position: absolute; z-index: 2; right: -8px; top: -26px; width: 78px; height: auto; transform: rotate(6deg);
  pointer-events: none; filter: drop-shadow(0 12px 18px rgba(0,0,0,.3)); }
.ih__gitem--secret .ih__gitem-tx { position: relative; z-index: 1; }
.ih__gitem--secret .ih__gitem-tx b { color: #fff; }
.ih__gitem--secret .ih__gitem-tx span { color: #A6A6A6; }
.ih__gcheck--secret { position: relative; z-index: 1; background: var(--ih-gold); color: #16161A; font-weight: 700; font-size: 19px; line-height: 1;
  animation: secretPulse 2.8s var(--ease) infinite; }
@keyframes secretPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(240,188,71,.45); } 55% { box-shadow: 0 0 0 10px rgba(240,188,71,0); } }
.ih__spark { position: absolute; z-index: 1; color: var(--ih-gold); pointer-events: none; animation: sparkTw 2.4s ease-in-out infinite; }
.ih__spark--1 { top: 13px; right: 78px; font-size: 14px; }
.ih__spark--2 { top: 38px; right: 26px; font-size: 10px; animation-delay: .8s; }
.ih__spark--3 { bottom: 13px; right: 120px; font-size: 12px; animation-delay: 1.5s; }
@keyframes sparkTw { 0%, 100% { opacity: .15; transform: scale(.7) rotate(0); } 50% { opacity: 1; transform: scale(1.15) rotate(20deg); } }
.ih__shine { position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.05) 45%, rgba(240,188,71,.2) 50%, rgba(255,255,255,.05) 55%, transparent 65%);
  background-size: 260% 100%; background-position: 130% 0; animation: shineSweep 3.8s var(--ease) infinite; }
@keyframes shineSweep { 0% { background-position: 130% 0; } 55% { background-position: -60% 0; } 100% { background-position: -60% 0; } }
@media (prefers-reduced-motion: reduce) { .ih__shine, .ih__spark, .ih__gcheck--secret { animation: none; } }

/* AI-наставник — та же карточка списка */
.ih__mentor { margin: 12px 0 0; display: flex; align-items: flex-start; gap: 14px; width: auto; max-width: none;
  background: #FFFFFF; border: 0; box-shadow: none; border-radius: 20px; padding: 18px 18px 19px; text-align: left; }

/* ---- ПРЕВЬЮ «что тебя ждёт внутри» — белые карточки на креме, серые экраны-мокапы внутри ---- */
.ih__preview .pv { background: #FFFFFF; border: 0; box-shadow: none; border-radius: 20px; }
.ih__preview .pv__scr { box-shadow: none; }
.ih__preview .pv__scr--chat { background: #F1F0EC; }
.ih__preview .pv__scr--res { background: #F1F0EC; }

/* десктоп: карточки дохода в ряд, подарки сеткой 2×2 */
@media (min-width: 900px) {
  .ih__sec-h { font-size: 40px; }
  .ih__sal { flex-direction: row; gap: 16px; margin-top: 34px; }
  .ih__glist { margin-top: 34px; }
  .ih__secret-gifts { width: 92px; right: -4px; top: -32px; }
  .ih__sal-card { flex: 1 1 0; padding: 72px 24px 24px; }
  .ih__sal-num { font-size: 46px; }
  .ih__sal-obj--inf { width: 150px; right: 14px; bottom: 18px; }
  .ih__sal-obj--coins { width: 150px; right: -2px; bottom: -14px; }
  .ih__glist { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  /* высота = зарплатным карточкам (166px); контент от верхней кромки — заголовки обеих карточек на одном уровне */
  .ih__gitem { padding: 50px 24px 24px; min-height: 166px; align-items: flex-start; }
}

/* ---------- утиль ---------- */
.spacer { flex: 1; }
.center { text-align: center; }
.hidden { display: none !important; }

/* ---------- ВРЕМЕННО: дебаг-навигация по экранам (убрать перед выкаткой) ---------- */

/* ------------------------------------------------------------
   Единый отступ заголовка от шапки на всех рабочих экранах
   (разминка, квизы, планировка, смета, отделка, свет и т.д.) */
.tinder, .plan, .concept, .budget, .finish, .swipe, .light, .shop, .ba, .onbq, .handover { padding-top: clamp(14px, 3.5vh, 36px); }

/* карта при свайпе не режется о края колонки: на десктопе колода без обрезки,
   на мобиле границы контейнера растянуты до краёв экрана */
@media (min-width: 540px) {
  .tinder { overflow: visible; }
}
@media (max-width: 539.98px) {
  .tinder { width: calc(100% + 36px); margin-inline: -18px; padding-inline: 18px; }
}

/* ============================================================
   ПРЕЗЕНТАЦИЯ: «до» и «после» = две живые сцены покраски (rroom).
   «До» — все зоны в грунтовке (rz--pending), «после» — выборы юзера.
   База, зоны и маски кроются cover одинаково, геометрия половинок совпадает.
   ============================================================ */
.ba__after, .ba__beforescene { position: absolute; inset: 0; }
.ba__after img, .ba__beforescene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__after .rroom, .ba__beforescene .rroom { position: absolute; inset: 0; width: 100%; height: 100%;
  aspect-ratio: auto; max-height: none; margin: 0; border-radius: 0; box-shadow: none; }

/* ============================================================
   АНАЛИЗ ПРОЕКТА: чек-лист с оценкой перед сдачей
   ============================================================ */
.anlz { height: 100%; width: 100%; max-width: 680px; margin: 0 auto; padding-top: 18px; display: flex; flex-direction: column; }
.anlz__list { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.anlz__row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 11px 14px;
  background: var(--cream-card); border-radius: var(--ih-r-md); box-shadow: var(--shadow-soft);
  opacity: 0; transform: translateY(10px); transition: opacity .22s var(--ease), transform .22s var(--ease-out-back); }
.anlz__row.show { opacity: 1; transform: none; }
.anlz__label { font-weight: 400; font-size: 15px; line-height: 1.35; color: var(--ink); }
.anlz__ic { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; }
.anlz__row.busy .anlz__ic { border: 2.5px solid rgba(61, 59, 255, .16); border-top-color: var(--sb-blue); animation: anlzspin .7s linear infinite; }
.anlz__row.done .anlz__ic { border: none; background: var(--sb-blue); color: #fff; font-size: 11px; font-weight: 800; animation: none; }
.anlz__row.done .anlz__ic::before { content: ""; width: 12px; height: 12px; background: #fff;
  -webkit-mask: var(--ck) center / contain no-repeat; mask: var(--ck) center / contain no-repeat; }
/* миниатюра работы юзера справа в строке: его планировка, палитра, кадры комнаты */
.anlz__thumb { margin-left: auto; flex: none; width: 46px; height: 46px; border-radius: 12px; overflow: hidden;
  background: var(--paper-2); display: grid; place-items: center;
  opacity: 0; transform: scale(.9); transition: opacity .3s var(--ease), transform .3s var(--ease-out-back); }
.anlz__row.done .anlz__thumb { opacity: 1; transform: none; }
.anlz__thumb:empty { display: none; }
.anlz__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; display: block; }
.anlz__sv { width: 100%; height: 100%; display: block; padding: 4px; }
.anlz__sv svg { width: 100%; height: 100%; display: block; }
.anlz__pal { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr 1fr; }
.anlz__pal i { display: block; }
.anlz__foot { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px;
  color: var(--ink-soft); font-size: 14px; font-weight: 400; }
.anlz__spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(61, 59, 255, .16);
  border-top-color: var(--sb-blue); animation: anlzspin .7s linear infinite; }
@keyframes anlzspin { to { transform: rotate(360deg); } }

/* ============================================================
   ТЕЛЕФОН-ГЕЙТ: оценка проекта под блюром до номера
   ============================================================ */
.pgate { width: 100%; max-width: 680px; margin: 0 auto; height: 100%; padding-top: 18px; display: flex; flex-direction: column;
  overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
.pgate::-webkit-scrollbar { width: 0; }
.pgate__card { background: var(--cream-card); border-radius: var(--ih-r-lg); box-shadow: var(--shadow-card);
  padding: 16px 18px 12px; margin: 10px 0 8px; text-align: center; flex: 0 0 auto; }
/* автор оценки: наставник студии */
.pgate__by { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 10px; }
.pgate__by b { display: block; font-size: 13px; font-weight: 600; line-height: 1.2; text-align: left; }
.pgate__by em { display: block; font-style: normal; font-size: 11.5px; font-weight: 400; color: var(--ink-soft); text-align: left; }
.pgate__k { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.pgate__k--gap { margin-top: 10px; }
.pgate__score { font-size: clamp(36px, 10vw, 46px); font-weight: 700; letter-spacing: -.03em; line-height: 1.05;
  color: var(--ink); margin: 2px 0 0; }
.pgate__prof { font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); margin: 4px 0 0; }
.pgate__blur, .pgate__blurtxt { filter: blur(9px); user-select: none; -webkit-user-select: none; pointer-events: none; }
.pgate__blurtxt { filter: blur(5px); }
.pgate__row { display: flex; gap: 8px; align-items: flex-start; text-align: left; margin-bottom: 14px; }
/* заголовок над списком: отделяет обещание от реплики клиента */
.pgate__lk { margin: 4px 0 8px 2px; font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft); flex: 0 0 auto; }
.pgate__list { list-style: none; margin: 2px 0 12px; padding: 0 4px; display: flex; flex-direction: column; gap: 10px; flex: 0 0 auto; }
.pgate__list li { position: relative; padding-left: 30px; font-size: 16px; font-weight: 400; color: var(--ink); }
.pgate__list li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--sb-blue); }
.pgate__list li::after { content: ""; position: absolute; left: 4px; top: 6px; width: 12px; height: 12px;
  background: #fff; -webkit-mask: var(--ck) center / contain no-repeat; mask: var(--ck) center / contain no-repeat; }
/* подарок — выделенный пункт: своя плашка, иконка вместо галочки */
.pgate__list li.li--gift { margin-top: 2px; padding: 12px 14px 12px 44px; font-weight: 600;
  background: var(--cream-card); border-radius: var(--ih-r-md); box-shadow: var(--shadow-soft); }
.pgate__list li.li--gift::before { display: none; }
.li__gift3d { position: absolute; left: 10px; top: 6px; width: 30px; height: auto; }
.pgate__list li.li--gift::after { display: none; }
.pgate .lead-form__title { font-weight: 600; font-size: 16px; line-height: 1.3; margin-bottom: 12px; }
.pgate .lead-form { padding: 16px; flex: 0 0 auto; }
/* межстрочные по продуктовой системе: заголовки 1.15, текст 1.45, мелкое 1.35 */
.pgate .h2 { margin: 6px 0 4px; line-height: 1.15; }
.pgate .lead { line-height: 1.45; margin: 0; }
.pgate__list { gap: 12px; }
.pgate__list li { line-height: 1.4; }
.pgate__by b { line-height: 1.25; }
.pgate__by em { line-height: 1.35; }
.pgate .cbub { line-height: 1.45; }
.pgate__msg { flex: 1; min-width: 0; }
/* реакция клиента — мелким планом под крупной карточкой наставника */
.pgate__msg { display: flex; gap: 8px; align-items: flex-start; margin: 16px 0 14px; flex: 0 0 auto; }
.pgate__av { width: 32px; height: 32px; flex: 0 0 auto; }
.pgate__av::after { width: 9px; height: 9px; }
.pgate__msgbody { flex: 1; min-width: 0; }
.pgate__msgwho { display: flex; align-items: center; gap: 8px; margin: 0 0 4px 2px;
  font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--ink); }
.pgate__msgwho .ih__typing { font-size: 10.5px; font-weight: 400; }
.pgate__bub { display: inline-block; max-width: 78%; padding: 9px 12px; font-size: 13.5px; line-height: 1.4;
  border-radius: 14px 14px 14px 4px; background: var(--paper-2); border-color: transparent; box-shadow: none; }

/* ============================================================
   ФИНАЛ: оценка + доход + выпускники (блоки со страницы профессии)
   ============================================================ */
.review--match { text-align: center; padding: 22px 18px 20px; }
.review--match .review__match-k { color: var(--ih-gold-d); }
.review__match-n--big { font-size: 56px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 10px; }
.review--match .review__bar { max-width: 300px; margin: 0 auto; }
.match__basis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.gstat { background: var(--paper-2); border-radius: var(--ih-r-md); padding: 14px 8px; text-align: center; }
.gstat b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.gstat span { display: block; margin-top: 3px; font-size: 10.5px; line-height: 1.3; font-weight: 600; color: var(--ink-soft); }

.income { background: var(--ih-graphite); color: #fff; border-radius: var(--ih-r-md); box-shadow: var(--shadow-card);
  padding: 22px 18px 18px; margin: 14px 0 4px; text-align: center; }
.income__k { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ih-gold); }
.income__n { font-size: 46px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin: 6px 0 2px; }
.income__sub { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.65); }
.income__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.income__card { background: rgba(255,255,255,.08); border-radius: var(--ih-r-sm); padding: 10px 8px; }
.income__card b { display: block; font-size: 15px; font-weight: 800; }
.income__card span { display: block; margin-top: 3px; font-size: 10.5px; line-height: 1.3; font-weight: 600; color: rgba(255,255,255,.65); }

.grads { background: #fff; border-radius: 20px; padding: 18px; margin: 14px 0 4px; box-shadow: var(--sh-1); }
.grads__title { font-size: 21px; font-weight: 700; letter-spacing: -.02em; line-height: 1.16; margin-bottom: 14px; }
.grads__cards { display: flex; flex-direction: column; gap: 10px; }
.grads__card { background: var(--paper); border-radius: var(--ih-r-sm); padding: 13px 14px; }
.grads__card p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.grads__who { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.grads__card .grads__ava { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--paper-2);
  display: grid; place-items: center; font-size: 13px; font-weight: 800; letter-spacing: .02em; color: var(--ink-soft); }
.grads__card b { display: block; font-size: 13.5px; font-weight: 800; }
.grads__card span { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.3; font-weight: 600; color: var(--ink-soft); }
.grads__card { padding: 16px; }
.grads__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }

/* ============================================================
   РЕЗУЛЬТАТ СТАЖИРОВКИ: место, распаковка профиля, продающие блоки, форма
   ============================================================ */
/* та же колонка, что на остальных экранах: контент не расползается на широком экране */
.res { height: 100%; width: 100%; max-width: 680px; margin: 0 auto; padding-top: 18px; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
.res .kicker { margin: 0 0 8px; }   /* верхний отступ даёт padding самой колонки — как на гейте */
.res__client { display: flex; gap: 10px; align-items: flex-start; background: var(--cream-card); border-radius: var(--ih-r-lg);
  box-shadow: var(--shadow-card); padding: 16px; margin-top: 8px; }
.res__client b { display: block; font-size: 13px; font-weight: 800; }
.res__client p { margin: 4px 0 0; font-size: 14px; line-height: 1.42; color: var(--ink-soft); }
/* секции результата: единый вертикальный ритм и одинаковые заголовки */
.sect { margin-top: 28px; }
.sect__t { margin: 0 0 10px; font-size: 21px; font-weight: 600; letter-spacing: -.02em; line-height: 1.16; }
.sect__s { margin: -4px 0 12px; font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.res__note { margin-top: 6px; font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--ink-soft); }
.res__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

/* распаковка профиля */
.res__prof { background: var(--cream-card); border-radius: var(--ih-r-lg); box-shadow: var(--shadow-card);
  padding: 20px 18px; margin-top: 12px; }
.res__prof .kicker { margin: 0 0 6px; }
.res__pname { font-size: clamp(26px, 7vw, 34px); font-weight: 700; letter-spacing: -.025em; line-height: 1.06; margin: 0; }
.res__ptag { margin: 6px 0 0; font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--ink-soft); }
.res__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.res__chip { background: var(--paper-2); border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.res__ptext { margin: 14px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.res__mentor { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.res__mentor b { display: block; font-size: 13px; font-weight: 800; }
.res__mentor p { margin: 3px 0 0; font-size: 13px; line-height: 1.42; color: var(--ink-soft); }
.res__acc { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.racc { border: 1.5px solid var(--line); border-radius: var(--ih-r-md); overflow: hidden; }
.racc.open { border-color: var(--sb-blue); }
.racc__head { width: 100%; display: flex; align-items: center; gap: 8px; padding: 13px 14px; background: none; border: 0;
  text-align: left; cursor: pointer; font: inherit; }
.racc__head { align-items: baseline; }
.racc__head b { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.racc__head em { font-style: normal; font-size: 13px; font-weight: 400; line-height: 1.3; color: var(--ink-soft); }
.racc__head i { margin-left: auto; align-self: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--sb-blue);
  display: grid; place-items: center; transition: transform .25s var(--ease); }
.racc__head i::before { content: ""; width: 8px; height: 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: translateY(-2px) rotate(45deg); }
.racc.open .racc__head i { transform: rotate(180deg); }
.racc__body { display: none; padding: 0 14px 14px; }
.racc.open .racc__body { display: block; }
.racc__body p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.res__roles { margin: 14px 0 0; font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--ink); }

/* форма консультации */
.res__cta { background: var(--ih-graphite); color: #fff; border-radius: var(--ih-r-lg); box-shadow: var(--shadow-card);
  padding: 22px 18px; margin-top: 14px; }
.res__ctah { margin: 0; font-size: clamp(22px, 6vw, 28px); font-weight: 700; letter-spacing: -.02em; line-height: 1.12; }
.res__ctalist { list-style: none; margin: 14px 0 16px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.res__ctalist li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.35; color: rgba(255,255,255,.85); }
.res__ctalist li::before { content: ""; position: absolute; left: 0; top: .28em; width: 13px; height: 8px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
/* форма лежит прямо на тёмной карточке: без второй рамки и подложки */
.lead-form--dark { background: transparent; border: 0; box-shadow: none; padding: 0; }
.lead-form--dark .lead-form__input { background: #fff; border-color: #fff; color: var(--ink); }
.lead-form--dark .lead-form__input::placeholder { color: rgba(34, 24, 14, .42); }
.lead-form--dark .lead-form__input:focus { border-color: var(--sb-blue); }
.lead-form--dark .lead-form__consent, .lead-form--dark .lead-form__consent a { color: rgba(255,255,255,.6); }

/* дипломные проекты: карточки с реальными работами студентов курса */
.folio__row { display: flex; gap: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity; padding-bottom: 4px; }
.folio__row::-webkit-scrollbar { height: 0; }
.work { flex: 0 0 auto; width: 88%; max-width: 380px; margin: 0; scroll-snap-align: start;
  background: var(--cream-card); border-radius: var(--ih-r-lg); overflow: hidden; box-shadow: var(--shadow-soft); }
.work__pic { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.work__body { display: block; padding: 14px 16px 16px; }
.work__title { display: block; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); }
.work__tx { display: block; margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.work__who { display: block; margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--ink); }

/* истории выпускниц: реальные фото и цитаты со страницы курса */
.succ { margin-top: 22px; }
.succ__head { margin-bottom: 12px; }
.succ__title { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -.02em; line-height: 1.16; }
.succ__sub { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.succ__row { display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity; padding-bottom: 4px; }
.succ__row::-webkit-scrollbar { height: 0; }
.story { flex: 0 0 auto; width: 84%; max-width: 340px; scroll-snap-align: start;
  background: var(--cream-card); border-radius: var(--ih-r-lg); box-shadow: var(--shadow-soft); padding: 16px; }
.story__top { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.story__ava { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; }
.story__top b { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; }
.story__top span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--ink-soft); }
.story__tx { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.succ__stats { margin-top: 14px; }

.offer__bridge { text-align: center; padding: 10px 0 0; }
.lead-form__sub { margin: -6px 0 12px; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }

/* разбор шага: плитки заблокированы, промах помечен */
.iv__tiles--locked .itile { cursor: default; }
.iv__tiles--locked .itile:active { transform: none; }
.itile--miss { outline: 2.5px solid var(--err); outline-offset: 2px; opacity: .75; }
.itile--miss::after { content: "×"; position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--err); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.25); }


/* ============================================================
   РЕЗУЛЬТАТ — одна система на весь экран:
   светлая карточка / тёмная карточка / бежевая плашка,
   один радиус, одна тень, три размера текста, два цвета.
   ============================================================ */
.res .review,
.res .work,
.res .story { background: var(--cream-card); border-radius: var(--ih-r-lg); box-shadow: var(--shadow-soft); margin: 0; }
.res .review { padding: 18px; }
.res .income,
.res .gifts,
.res .res__cta { border-radius: var(--ih-r-lg); margin: 0; }
.res .income { padding: 22px 18px 18px; }
.res .gifts { padding: 18px 16px; }

/* строки разбора: без золота, вес и кегль как у остального текста */
.res .review__row { padding: 10px 0; font-size: 15px; }
.res .review__row b { font-weight: 500; }
.res .review__row span { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.res .review__vd.grow { background: var(--paper-2); color: var(--ink-soft); }
.res .review__insight { margin-top: 12px; padding: 12px 14px; border-radius: var(--ih-r-md);
  background: var(--paper-2); font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.res .review__insight b { color: var(--ink); font-weight: 600; }

/* бежевые и тёмные плашки-метрики: один радиус и одна шкала */
.res .gstat,
.res .income__card { border-radius: var(--ih-r-md); padding: 14px 10px; }
.res .gstat b { font-size: 20px; font-weight: 700; }
.res .gstat span,
.res .income__card span { font-size: 11.5px; font-weight: 400; line-height: 1.35; }
.res .income__n { font-size: clamp(36px, 10vw, 46px); font-weight: 700; letter-spacing: -.03em; }
.res .income__sub { font-size: 13px; font-weight: 400; }
.res .income__card b { font-size: 15px; font-weight: 600; }

/* подарки теперь стоят на светлом фоне секции — карточки светлые, текст тёмный */
.res .gifts__row { display: flex; gap: 10px; }
.res .gift { flex: 1; min-width: 0; border-radius: var(--ih-r-md); padding: 16px 10px;
  background: var(--cream-card); color: var(--ink); box-shadow: var(--shadow-soft); }
.res .gift__label { font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.res .gift__reveal { font-size: 12px; line-height: 1.4; color: var(--ink-soft); }
.res .gift__reveal a { color: var(--sb-blue); }
.res .gifts__hint { font-size: 12px; font-weight: 400; color: var(--ink-soft); margin-top: 12px; }

/* подарок со скидкой: крупная цифра и салют из искр при открытии */
.res .gift { position: relative; overflow: visible; }
.gift__big { display: block; max-height: 0; opacity: 0; overflow: hidden;
  font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: var(--sb-blue); }
.gift.open .gift__big { max-height: 60px; opacity: 1; margin: 6px 0 2px; animation: giftPop .5s var(--ease-out-back) both; }
@keyframes giftPop { 0% { transform: scale(.5); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.sparks { position: absolute; left: 50%; top: 38%; width: 0; height: 0; pointer-events: none; }
.sparks i { position: absolute; width: 7px; height: 7px; border-radius: 2px; opacity: 0;
  animation: sparkFly .85s cubic-bezier(.16,.8,.3,1) forwards; }
@keyframes sparkFly {
  0% { transform: translate(0,0) scale(.6) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--x), var(--y)) scale(1) rotate(180deg); opacity: 0; }
}


/* ============================================================
   СУПЕР ПОДАРОК: отдельный экран между результатом и заявкой
   ============================================================ */
.sgift { width: 100%; max-width: 680px; margin: 0 auto; height: 100%; padding-top: 18px;
  display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sgift::-webkit-scrollbar { width: 0; }
.sgift .lead { margin: 0 0 18px; }
.sgift__box { position: relative; align-self: center; appearance: none; border: none; cursor: pointer;
  width: 190px; height: 190px; border-radius: var(--ih-r-lg); background: var(--cream-card);
  box-shadow: var(--shadow-card); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  transition: transform .25s var(--ease-out-back); animation: sgiftIdle 2.4s ease-in-out infinite; }
.sgift__box:active { transform: scale(.96); }
.sgift__box.open { animation: none; }
.sgift__emoji { font-size: 74px; line-height: 1; transition: transform .4s var(--ease-out-back); }
.sgift__box.open .sgift__emoji { transform: scale(1.14) rotate(-6deg); }
.sgift__hint { font-size: 12px; font-weight: 400; color: var(--ink-soft); }
.sgift__box.open .sgift__hint { opacity: 0; }
@keyframes sgiftIdle { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-6px) rotate(-1.5deg); } }

.sgift__prize { margin-top: 18px; padding: 20px 18px; text-align: center;
  background: var(--cream-card); border-radius: var(--ih-r-lg); box-shadow: var(--shadow-soft);
  animation: giftPop .5s var(--ease-out-back) both; }
.sgift__k { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.sgift__val { font-size: clamp(44px, 14vw, 64px); font-weight: 700; letter-spacing: -.03em; line-height: 1.05;
  color: var(--sb-blue); margin: 4px 0 6px; }
.sgift__note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.sgift .pgate__msg { margin: 14px 0 0; }
.sgift .btn { margin-top: 18px; flex: 0 0 auto; }

/* плашка «скидка закреплена» на экране заявки */
.sgift__badge { display: flex; align-items: center; gap: 10px; margin: 14px 0 12px; padding: 14px 16px;
  background: var(--cream-card); border-radius: var(--ih-r-md); box-shadow: var(--shadow-soft); }
.sgift__badge img { width: 34px; height: auto; flex: none; }
.sgift__badge b { font-size: 14px; font-weight: 600; color: var(--ink); }

/* экран заявки: тёмная карточка без собственного заголовка, он уже сверху */
.consult__box { margin-top: 4px; }
#scr-consult .res__cta { padding: 16px 16px; }
#scr-consult .res__ctalist { margin: 0 0 16px; }

/* метрики результата — тонкая строка в подвале карточки, а не отдельный блок */
.res__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 12.5px; font-weight: 400; color: var(--ink-soft); }
.res__facts b { font-weight: 600; color: var(--ink); }

/* разбор профиля = та же «бумага», что в разборах заданий */
.res__paper { margin: 0; padding: 18px 18px 20px; }
.res__paper .vmen__say { font-size: 16px; }
.res__paper .decide__fb { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.res__paper .res__chips { margin-top: 14px; }
.res__paper .res__acc { margin-top: 14px; }
.res__paper .edu { margin-top: 14px; }
.res__paper .edu::before { content: "Куда тебе идти"; }
.res .res__prof { display: none; }

/* «насколько это твоё» — крупная вероятность на светлой карточке */
.fit { background: var(--cream-card); border-radius: var(--ih-r-lg); box-shadow: var(--shadow-soft);
  padding: 22px 18px; text-align: center; }
.fit__k { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
/* эмоциональная строка серифом — тот же акцент, что в разборах наставника */
.fit__say { position: relative; z-index: 1; margin: 0; font-family: "Graphik LC TT", "Manrope", sans-serif;
  font-weight: 600; letter-spacing: -.02em; font-size: clamp(21px, 5.4vw, 26px); line-height: 1.16; color: var(--ink); }
.fit__bar { position: relative; z-index: 1; height: 8px; max-width: 260px; margin: 2px auto 14px;
  border-radius: 999px; background: var(--paper-2); overflow: hidden; }
.fit__bar i { display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--sb-blue), #7C7AFF); transition: width 1.1s var(--ease); }
.fit__n { font-size: clamp(42px, 12.5vw, 62px); font-weight: 700; letter-spacing: -.035em; line-height: 1;
  color: var(--sb-blue); margin: 6px 0 10px; }
.fit__tx { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }

/* подходящие роли */
.roles { display: flex; flex-direction: column; gap: 10px; }
.role { background: var(--cream-card); border-radius: var(--ih-r-md); box-shadow: var(--shadow-soft); padding: 14px 16px; }
.role__top { display: flex; align-items: baseline; gap: 10px; }
.role__top b { font-size: 15px; font-weight: 600; color: var(--ink); }
.role__top span { margin-left: auto; flex: none; font-size: 13.5px; font-weight: 600; color: var(--sb-blue); }
.role__tx { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }

/* напоминание про подарок перед кнопкой */
.remind { display: flex; gap: 12px; align-items: flex-start; background: var(--cream-card);
  border-radius: var(--ih-r-lg); box-shadow: var(--shadow-soft); padding: 16px 18px; }
.remind__ic { font-size: 26px; line-height: 1; }
.remind b { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
.remind p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); }

/* скретч-карта подарка */
.scratch { background: var(--cream-card); border-radius: var(--ih-r-lg); box-shadow: var(--shadow-card);
  padding: 18px; text-align: center; }
.scratch__k { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.scratch__stage { position: relative; width: min(320px, 100%); margin: 14px auto 12px; height: 132px; border-radius: var(--ih-r-md); overflow: hidden;
  background: var(--paper-2); display: grid; place-items: center; }
.scratch__prize { display: grid; gap: 4px; }
.scratch__val { font-size: clamp(40px, 12vw, 54px); font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--sb-blue); }
.scratch__sub { font-size: 12.5px; font-weight: 400; color: var(--ink-soft); }
.scratch__cv { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; touch-action: none;
  transition: opacity .45s var(--ease); }
.scratch__hint { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  font-size: 12px; font-weight: 600; color: var(--ink-soft); pointer-events: none; transition: opacity .3s; }
.scratch__foot { font-size: 12px; font-weight: 400; color: var(--ink-soft); }
.sgift .scratch { position: relative; }

/* факты на финальном экране */

/* доход одним блоком: заголовок и источник живут внутри карточки */
.income--solo { padding: 22px 18px 18px; }
.income__head { margin-bottom: 14px; }
.income__t { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -.02em; line-height: 1.16; color: #fff; }
.income__note { margin: 5px 0 0; font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.6); }

/* профиль в карточке результата — одной плашкой, а не четырьмя строками подряд */
.res__pcard { display: flex; align-items: center; gap: 14px; text-align: left; margin-top: 16px;
  padding: 14px 16px; background: var(--paper-2); border-radius: var(--ih-r-md); }
.res__picon { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--cream-card);
  display: grid; place-items: center; font-size: 24px; box-shadow: var(--shadow-soft); }
.res__pbody { min-width: 0; }
.res__pk { display: block; font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft); }
.res__pcard .pgate__prof { display: block; font-size: 19px; font-weight: 600; letter-spacing: -.02em; margin: 2px 0 1px; }
.res__pcard .res__ptag { display: block; margin: 0; font-size: 13px; font-weight: 400; line-height: 1.35; color: var(--ink-soft); }

/* 3D-сердце в блоке «любимое дело» */
.fit { position: relative; overflow: visible; padding-top: 30px; }
.fit__heart { position: absolute; right: 14px; top: -26px; width: 92px; filter: drop-shadow(0 10px 18px rgba(40,30,20,.18));
  pointer-events: none; animation: heartFloat 3.6s ease-in-out infinite; }
@keyframes heartFloat { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
.fit__k, .fit__n, .fit__tx { position: relative; z-index: 1; }
.fit__tx { max-width: 92%; margin-inline: auto; }

/* холст салюта поверх экрана результата */
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 40; }

/* доход — светлая карточка вместо траурной тёмной плашки */
.res .income, .res .income--solo { background: var(--cream-card); color: var(--ink); box-shadow: var(--shadow-soft); }
.res .income__t { color: var(--ink); }
.res .income__note { color: var(--ink-soft); }
.res .income__n { color: var(--sb-blue); font-size: clamp(42px, 12.5vw, 62px); letter-spacing: -.035em; line-height: 1; }
.res .income__sub { color: var(--ink-soft); }
.res .income__card { background: var(--paper-2); }
.res .income__card b { color: var(--ink); }
.res .income__card span { color: var(--ink-soft); }
.res .income__row { align-items: stretch; }
.res .income__card { display: flex; flex-direction: column; justify-content: center; }

/* 3D-подарок над скретч-картой */
.scratch { position: relative; padding-top: 46px; }
.scratch__gift { position: absolute; left: 50%; top: -38px; transform: translateX(-50%); width: 104px;
  filter: drop-shadow(0 12px 20px rgba(40,30,20,.2)); animation: heartFloat 3.8s ease-in-out infinite; }
.sgift { padding-top: 34px; }

/* hidden должен побеждать display из компонентных правил */
[hidden] { display: none !important; }
/* подарок над скретч-картой: с воздухом, чтобы не наезжал на текст */
.scratch { width: min(380px, 100%); margin: 64px auto 0; padding-top: 62px; }
.scratch__gift { top: -60px; width: 108px; }

/* 3D-иконки подарков вместо эмодзи */
.res .gift__box { width: 74px; height: 74px; background: none; box-shadow: none; display: grid; place-items: center; }
.gift__pic { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(40,30,20,.16)); }

/* короткая подводка к подарку перед кнопкой */
.giftline { display: flex; align-items: center; gap: 12px; margin-top: 26px; padding: 14px 16px;
  background: var(--cream-card); border-radius: var(--ih-r-lg); box-shadow: var(--shadow-soft); }
.giftline__pic { width: 46px; height: auto; flex: none; filter: drop-shadow(0 6px 12px rgba(40,30,20,.16)); }
.giftline b { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.giftline p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.4; font-weight: 400; color: var(--ink-soft); }

/* скретч в форме купона: пунктир, боковые выемки и линия отрыва */
.scratch { position: relative; border-radius: var(--ih-r-lg); }
.scratch::before, .scratch::after { content: ""; position: absolute; bottom: 46px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--paper); }
.scratch::before { left: -11px; }
.scratch::after { right: -11px; }
.scratch__teaser { margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--ink-soft); }
.scratch__stage { border: 1.5px dashed rgba(31,29,26,.18); }
.scratch__foot { position: relative; margin-top: 14px; padding-top: 14px; border-top: 1.5px dashed rgba(31,29,26,.18); }

/* доход проектами: ставка за метр и чек за проект */
.paywall { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); text-align: left; }
.paywall__lead { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.paywall__rows { display: flex; flex-direction: column; gap: 8px; }
.pw { display: flex; align-items: baseline; gap: 10px; padding: 12px 14px; border-radius: var(--ih-r-md); background: var(--paper-2); }
.pw__lvl { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; color: var(--ink); }
.pw__rate { flex: none; font-size: 12.5px; font-weight: 400; color: var(--ink-soft); }
.pw__sum { flex: none; font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.pw--top { background: rgba(61, 59, 255, .08); }
.pw--top .pw__sum { color: var(--sb-blue); }
.paywall__dream { margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; font-weight: 400; color: var(--ink-soft); }

/* купон на экране заявки: праздничный заголовок, светлое поле, таймер после раскрытия */
.scratch__title { margin: 4px 0 0; font-size: clamp(24px, 6.4vw, 30px); font-weight: 600; letter-spacing: -.02em;
  line-height: 1.14; color: var(--ink); }
.scratch__stage { background: var(--cream-card); border: 1.5px dashed rgba(31,29,26,.16); }
.scratch__val { color: var(--sb-blue); }
.scratch__note { margin: 12px auto 18px; max-width: 420px; text-align: center;
  font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.scratch__foot { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.burn { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--err); }
.clock { display: flex; align-items: center; gap: 4px; }
.clock b { min-width: 44px; padding: 8px 0; border-radius: 12px; background: var(--ih-graphite); color: #fff;
  font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; }
.clock i { font-style: normal; font-size: 18px; font-weight: 700; color: var(--ink-soft); }

/* буллиты заявки: заголовок фразы и пояснение в одной строке */
#scr-consult .res__ctalist li { padding-left: 26px; font-size: 13.5px; line-height: 1.45; color: rgba(255,255,255,.72); }
#scr-consult .res__ctalist li b { color: #fff; font-weight: 600; }
#scr-consult .res__ctalist { gap: 12px; }

/* купон целиком в брендовом синем: одна плашка, без «прямоугольника внутри» */
.scratch { background: #3D3BFF; color: #fff;
  box-shadow: 0 18px 40px -24px rgba(40, 40, 120, .55); }
.scratch__k { color: rgba(255,255,255,.72); }
.scratch__title { color: #fff; }
.scratch__stage { background: none; border: none; }
.scratch__val { color: #fff; }
.scratch__sub { color: rgba(255,255,255,.75); }
.scratch__hint { color: rgba(31,29,26,.55); }
.scratch::before, .scratch::after { background: var(--paper); }
.scratch__foot { border-top: 1.5px dashed rgba(255,255,255,.35); }
.burn { color: rgba(255,255,255,.72); }
.clock b { background: #fff; color: var(--sb-blue); }
.clock i { color: rgba(255,255,255,.6); }

/* шапка формы заявки: 3D-иконка и что будет на консультации */
.cta__head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.cta__pic { width: 62px; height: auto; flex: none; filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)); }
.cta__head b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: #fff; }
.cta__head span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.65); }

/* купон компактнее: меньше поле и сама плашка */
.scratch { width: min(320px, 100%); padding: 46px 16px 16px; margin-top: 56px; }
.scratch__gift { top: -46px; width: 88px; }
.scratch__title { font-size: clamp(20px, 5.4vw, 24px); }
.scratch__stage { width: min(260px, 100%); height: 104px; margin: 12px auto 10px; }
.scratch__val { font-size: clamp(52px, 15vw, 64px); letter-spacing: -.03em; line-height: 1; }
.scratch__sub { font-size: 11.5px; }
.scratch__hint { color: rgba(255,255,255,.75); bottom: 8px; }
.scratch::before, .scratch::after { bottom: 62px; width: 18px; height: 18px; }
.clock b { min-width: 38px; padding: 6px 0; font-size: 19px; }

/* буллиты консультации с 3D-иконками */
.ctalist3 { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ctalist3 li { display: flex; align-items: center; gap: 14px; }
.ctalist3 img { width: 46px; height: 46px; object-fit: contain; flex: none;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.35)); }
.ctalist3 b { display: block; font-size: 15px; font-weight: 600; line-height: 1.25; color: #fff; }
.ctalist3 span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.66); }

/* поле стирания без собственного фона и тени: купон читается как единая плашка */
.scratch__stage { background: none; border: none; box-shadow: none; border-radius: 0; }

/* купон уже и с выраженной вырезкой по бокам; компактный, чтобы форма
   помещалась в видимую часть экрана без длинной прокрутки */
.scratch { width: min(210px, 100%); padding: 28px 12px 12px; margin-top: 32px; }
.scratch__gift { top: -28px; width: 56px; }
.scratch__title { font-size: clamp(15px, 4.2vw, 17px); }
.scratch__stage { width: 100%; height: 64px; margin: 8px auto 6px; }
.scratch__val { font-size: clamp(34px, 10vw, 40px); }
.scratch::before, .scratch::after { width: 18px; height: 18px; bottom: 40px; }
.scratch::before { left: -11px; }
.scratch::after { right: -11px; }

/* форма заявки: 3D-модель крупно сбоку, буллиты обычными значками */
.res__cta { position: relative; overflow: visible; }
.cta__side { position: absolute; right: 14px; top: -54px; width: 92px; z-index: 2;
  animation: heartFloat 4s ease-in-out infinite; }
#scr-consult .res__ctalist { gap: 8px; margin: 0 0 14px; max-width: 78%; }
#scr-consult .res__ctalist li { padding-left: 22px; font-size: 13.5px; line-height: 1.35; color: rgba(255,255,255,.85); }

/* после раскрытия заголовок купона говорит про саму скидку */
.scratch__title--won { font-size: clamp(17px, 4.6vw, 20px); line-height: 1.25; }

/* воздух между купоном и заголовком формы */
#scr-consult .scratch { margin-bottom: 18px; }
#scr-consult .sect__t { margin-top: 0; }

/* тёмная карточка формы: место под 3D-объект сверху, чтобы он не резался краем */
#scr-consult .res__cta { padding-top: 26px; }

/* 3D-иконка стоит внутри карточки рядом с пунктами, а не висит над краем */
.cta__side { display: none; }
.cta__top { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.cta__ic { width: 78px; height: auto; flex: none; }
#scr-consult .res__ctalist { margin: 0; max-width: none; }
#scr-consult .res__cta { padding-top: 20px; }
@media (max-width: 439.98px) { .cta__ic { width: 62px; } }


/* ============================================================
   БЛОКИ С ПРОДУКТОВОЙ СТРАНИЦЫ КУРСА: программа, формат, преподаватели
   ============================================================ */
.cstats { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.cstat { font-size: 13px; font-weight: 600; line-height: 1; color: var(--ink);
  background: var(--cream-card); border-radius: 999px; padding: 9px 14px; }

/* программа: чёрная пилюля раздела + белые карточки-спойлеры, как на продуктовой странице */
.cprogram { display: flex; flex-direction: column; gap: 10px; }
.cblock { display: flex; flex-direction: column; }
.cblock__head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0; background: none; border: 0;
  font: inherit; text-align: left; cursor: pointer; }
.cblock__n { font-size: 13px; line-height: 1; color: var(--ink-soft); }
.cblock__chev { margin-left: auto; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--cream-card);
  display: grid; place-items: center; transition: transform .25s var(--ease); }
.cblock__chev::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: translateY(-2px) rotate(45deg); }
.cblock.open .cblock__chev { transform: rotate(180deg); }
.cblock__body { display: none; flex-direction: column; gap: 8px; padding-top: 10px; }
.cblock.open .cblock__body { display: flex; }
.cpill { background: var(--ink); color: var(--paper);
  font-size: 12.5px; font-weight: 600; line-height: 1; padding: 9px 14px; border-radius: 999px; }
.ccourse { background: #fff; border-radius: var(--ih-r-lg); overflow: hidden; }
.ccourse__head { width: 100%; display: flex; align-items: flex-start; gap: 14px; padding: 20px;
  background: none; border: 0; text-align: left; font: inherit; cursor: pointer; }
.ccourse--flat .ccourse__head { cursor: default; }
.ccourse__tx { flex: 1 1 auto; min-width: 0; }
.ccourse__tx b { display: block; font-size: 19px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; color: var(--ink); }
.ccourse__tx span { display: block; margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.ccourse__chev { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--paper-3);
  display: grid; place-items: center; transition: transform .25s var(--ease); }
.ccourse__chev::before { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: translateY(-2px) rotate(45deg); }
.ccourse.open .ccourse__chev { transform: rotate(180deg); }
.ccourse__list { display: none; list-style: none; margin: 0; padding: 0 20px 20px; }
.ccourse.open .ccourse__list { display: flex; flex-direction: column; gap: 8px; }
.ccourse__list li { position: relative; padding-left: 16px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.ccourse__list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--sb-blue); }

/* нейросети: лента карточек с 3D-иллюстрациями, как на продуктовой странице */
.cpill--ai { display: inline-flex; margin-bottom: 12px; }
#aiTitle { margin-top: 0; }
.ai__row { display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity; margin-top: 12px; padding-bottom: 4px; }
.ai__row::-webkit-scrollbar { height: 0; }
.aicard { flex: 0 0 auto; width: 78%; max-width: 300px; scroll-snap-align: start; display: flex; flex-direction: column;
  background: var(--cream-card); border-radius: var(--ih-r-lg); padding: 18px 18px 0; overflow: hidden; }
.aicard__t { font-size: 18px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; color: var(--ink); }
.aicard__d { margin: 8px 0 14px; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.aicard__img { width: 100%; max-width: 190px; height: auto; margin: auto auto 0; display: block; }

.fmt { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.fmt__it { background: #fff; border-radius: var(--ih-r-lg); padding: 18px 20px; }
.fmt__it b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; color: var(--ink); }
.fmt__it p { margin: 7px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.teach .teach__ph { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; }
.teach .story__tx { color: var(--ink-soft); }

/* ============================================================
   ЛИПКАЯ КНОПКА ДЕЙСТВИЯ (мобайл: кнопка всегда в зоне пальца)
   Только закрепление: внешний вид кнопок не меняем, контент
   прокручивается под ними.
   ============================================================ */
#budNext, #finishNext, #lightNext, #decorNext, #styleNext,
.decide__proceed,
#scr-offer .res > .btn--block,
#gateSubmit,
.lead-form > button[type="submit"] {
  position: sticky;
  bottom: calc(8px + env(safe-area-inset-bottom));
  z-index: 12;
}
/* прилипшая кнопка непрозрачна: сквозь opacity под ней просвечивал бы контент */
#budNext:disabled, #finishNext:disabled, #lightNext:disabled, #decorNext:disabled,
#styleNext:disabled, .decide__proceed:disabled,
#scr-offer .res > .btn--block:disabled, #gateSubmit:disabled,
.lead-form > button[type="submit"]:disabled { opacity: 1; filter: none; }
/* кнопка гейта живёт под карточкой формы: тот же отступ, что у CTA других экранов */
#gateSubmit { margin-top: 14px; }
/* концепция: с разбором контент выше экрана — без прокрутки его срезало */
.concept { overflow-y: auto; -webkit-overflow-scrolling: touch; }