/* ============================================================
   v3 · HERO в стилистике Contented-2024 (sky-blue + pixel-art),
   с сохранением визуальной политики Skillbox:
   - шрифты: Unbounded display + Inter body (уже в проекте)
   - 4 брендовых цвета доступны через :root в styles.css
   - крупные радиусы карточек 24-28px
   - Skillbox-blue/black для CTA, fuchsia только для декора

   3D-ассеты (буква «B», CRT-монитор, скрепка-popup) пока
   плейсхолдеры — ждём экспорт из Figma. См. v2/CONTENTED-2024-NOTES.md
   ============================================================ */

/* ---------- Фон с небом ---------- */
.hero-sky {
  position: relative;
  background: linear-gradient(180deg, #A4DAF4 0%, #BFE3F2 60%, #D5ECF5 100%);
  overflow: hidden;
  min-height: 100vh;
  color: #000000;
}

/* Декоративный слой за контентом */
.hero-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 10;
}

/* ---------- Pixel-облака (SVG-inline через background-image) ---------- */
.pixel-cloud {
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  /* Pixel-stepped cloud silhouette */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 28' shape-rendering='crispEdges'><path fill='%23FFFFFF' d='M14 8h6v-2h6v-2h10v2h4v2h8v-2h4v2h6v2h6v2h4v6h-4v2h-50v-2h-4v-2h-2v-2h2z'/><path fill='%23CBE8F5' d='M14 20h54v-2h-54zM16 22h50v-2h-50z'/></svg>");
}
.pixel-cloud--lg { width: 260px; height: 90px; }
.pixel-cloud--md { width: 170px; height: 60px; }
.pixel-cloud--sm { width: 110px; height: 38px; opacity: 0.85; }

/* ============================================================
   Реальные ассеты из Figma (cropped + transparent)
   ============================================================ */

/* Розовое pixel-облако (из figma) */
.pixel-cloud--real-pink {
  background-image: url("figma/cloud-pink.png");
  image-rendering: pixelated;
}
.pixel-cloud--real-pink-lg { width: 280px; height: 130px; }
.pixel-cloud--real-pink-md { width: 180px; height: 84px; }

/* Голубое pixel-облако (из figma) */
.pixel-cloud--real-blue {
  background-image: url("figma/cloud-blue-large.png");
  image-rendering: pixelated;
}
.pixel-cloud--real-blue-lg { width: 320px; height: 150px; }
.pixel-cloud--real-blue-md { width: 220px; height: 100px; }
.pixel-cloud--real-blue-sm { width: 140px; height: 65px; opacity: 0.85; }

/* Pink курсор-стрелка как декоративный элемент */
.pixel-cursor {
  position: absolute;
  background-image: url("figma/cursor-pink.png");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}
.pixel-cursor--md { width: 60px; height: 78px; }
.pixel-cursor--sm { width: 40px; height: 52px; }

/* Шахматная лента-флаг (реальная, с прозрачностью) */
.fig-checker-ribbon {
  position: absolute;
  background-image: url("figma/checker-ribbon.png");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

/* 3D-«А» розовая. PIL вырезал чёрный фон. */
.fig-letter-3d {
  position: absolute;
  background-image: url("figma/letter-a-3d-pink.png");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}
.fig-letter-3d--white {
  background-image: url("figma/letter-a-3d-white.png");
}

/* Voxel-звезда жёлтая (3D, с прозрачностью) */
.fig-voxel-star {
  position: absolute;
  background-image: url("figma/voxel-star-yellow.png");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

/* 3D «GO» pixel-розовая (для других блоков) */
.fig-voxel-go {
  position: absolute;
  background-image: url("figma/voxel-go-pink.png");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

/* CRT-монитор (реалистичный 3D) */
.fig-crt-monitor {
  position: absolute;
  background-image: url("figma/crt-monitor.png");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

/* Скрепка-маскот Clippy — реальное PNG */
.fig-clippy {
  position: absolute;
  background-image: url("figma/clippy-paperclip.png");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  width: 60px;
  height: 88px;
}

/* Pixel-мобильник (для b6-application и других) */
.fig-pixel-phone {
  position: absolute;
  background-image: url("figma/pixel-phone-pink.png");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}
@keyframes hero-cloud-float { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(14px); } }

/* ---------- Pixel-звёздочки (8-конечные, белые) ---------- */
.pixel-star {
  position: absolute;
  width: 28px; height: 28px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'><path fill='%23FFFFFF' d='M7 0h2v2h1v3h3v1h2v2h-2v1h-3v3h-1v2h-2v-2h-1v-3h-3v-1h-2v-2h2v-1h3v-3h1z'/></svg>");
}
.pixel-star--outline {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'><path fill='none' stroke='%23FFFFFF' stroke-width='0.7' d='M7 0h2v2h1v3h3v1h2v2h-2v1h-3v3h-1v2h-2v-2h-1v-3h-3v-1h-2v-2h2v-1h3v-3h1z'/></svg>");
}
.pixel-star--sm { width: 18px; height: 18px; }
.pixel-star--xs { width: 12px; height: 12px; }

/* ---------- Шахматные ленты-флаги ---------- */
.checker-banner {
  position: absolute;
  background-color: transparent;
  background-image:
    linear-gradient(45deg, #E5E5E5 25%, transparent 25%),
    linear-gradient(-45deg, #E5E5E5 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #E5E5E5 75%),
    linear-gradient(-45deg, transparent 75%, #E5E5E5 75%);
  background-size: 24px 24px;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;
  background-color: #FFFFFF;
  border-radius: 12px;
  opacity: 0.75;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

/* ---------- Win95-popup ---------- */
.win95-popup {
  position: absolute;
  background: #ECECEC;
  border: 2px solid #444;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.18);
  font-family: 'Inter', sans-serif;
  color: #000;
  width: 280px;
}
.win95-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 4px 10px;
  height: 26px;
  background: linear-gradient(90deg, #5AB7E8 0%, #C45BB1 55%, #E81B7F 100%);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.win95-titlebar button {
  background: #ECECEC;
  border-top: 1.5px solid #FFFFFF;
  border-left: 1.5px solid #FFFFFF;
  border-bottom: 1.5px solid #555;
  border-right: 1.5px solid #555;
  width: 20px; height: 18px;
  font-size: 11px;
  line-height: 1;
  color: #000;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.win95-body {
  padding: 16px 18px 14px;
  text-align: center;
  font-size: 14px;
  line-height: 1.4;
}
.win95-body p { margin-bottom: 14px; }
.win95-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.win95-buttons button {
  background: #ECECEC;
  border-top: 1.5px solid #FFFFFF;
  border-left: 1.5px solid #FFFFFF;
  border-bottom: 1.5px solid #555;
  border-right: 1.5px solid #555;
  padding: 5px 22px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  min-width: 66px;
}
.win95-buttons button:active {
  border-top-color: #555;
  border-left-color: #555;
  border-bottom-color: #FFFFFF;
  border-right-color: #FFFFFF;
}

/* ---------- Плейсхолдер для Figma-ассета ---------- */
.fig-placeholder {
  position: absolute;
  background:
    repeating-linear-gradient(45deg, #DCDCDC, #DCDCDC 8px, #F4F4F4 8px, #F4F4F4 16px);
  border: 2px dashed #888;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #555;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  padding: 16px;
  line-height: 1.35;
}
.fig-placeholder code {
  display: block;
  font-size: 10px;
  color: #888;
  margin-top: 6px;
  font-family: 'SF Mono', monospace;
  font-weight: 400;
  line-height: 1.3;
}

/* ---------- Бейдж lowercase под/над заголовком ---------- */
.hero-badge {
  display: inline-flex;
  align-items: center;
  background: #FFFFFF;
  color: #000;
  border: 2px solid #000;
  border-radius: 999px;
  padding: 8px 18px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 28px;
  text-transform: lowercase;
}

/* ---------- Главный CTA — Skillbox blue (по brand-guide) ---------- */
.btn-fuchsia {
  background: #3D3BFF;
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  border: none;
  border-radius: 14px;
  padding: 22px 60px;
  font-size: 21px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-transform: lowercase;
  letter-spacing: 0;
}
.btn-fuchsia:hover {
  background: #2E2DD9;
  box-shadow: 0 8px 20px rgba(61,59,255,0.35);
  transform: translateY(-2px);
}
.btn-fuchsia:active { transform: translateY(0); }

/* ---------- Список преимуществ ---------- */
.hero-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
}
.hero-bullets li {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  color: #000;
  padding: 6px 0;
  line-height: 1.45;
}
.hero-bullets li b { font-weight: 600; }

/* ---------- Подзаголовок hero ---------- */
.hero-sub {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.05rem, 2vw, 1.22rem);
  line-height: 1.5;
  color: #000;
  margin: 0 0 22px;
}
.hero-sub b { font-weight: 600; }

/* ---------- Плашка стипендии ---------- */
.hero-stipend {
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 28px;
  font-family: 'Inter', sans-serif;
}
.hero-stipend-title {
  font-size: clamp(1rem, 1.8vw, 1.12rem);
  line-height: 1.4;
  color: #FFFFFF;
}
.hero-stipend-title b { font-weight: 700; color: #FF4DA6; }
.hero-stipend-sub {
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 6px;
}
/* мобайл: плашка стипендии — полупрозрачно белая, заголовок в 1 строку, подзаг пропорционально мельче */
@media (max-width: 767px) {
  .hero-stipend { background: rgba(255, 255, 255, 0.55); border-color: rgba(255,255,255,0.5); padding: 12px 14px; }
  .hero-stipend-title { color: #1A1A1A; font-size: 13.5px; line-height: 1.3; white-space: nowrap; letter-spacing: -0.015em; }
  .hero-stipend-title b { color: #3D3BFF; }
  .hero-stipend-sub { color: rgba(0, 0, 0, 0.55); font-size: 11px; line-height: 1.35; margin-top: 4px; }
}

/* ---------- Текст «на экране» pixel-мобильника ---------- */
.hero-phone-note {
  position: absolute;
  left: 3.5%;
  top: 34%;
  width: 112px;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  color: #1B1A6B;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 8px;
  padding: 8px 10px;
  transform: rotate(-7deg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  pointer-events: none;
}
/* Мобильный вариант записки — над телефоном справа */
.hero-phone-note--mobile {
  left: auto;
  right: 4%;
  top: 13%;
  width: 118px;
  font-size: 12px;
}

/* ---------- Респонсив-хелперы ---------- */
.only-mobile { display: none; }

/* ---------- Правая боковая колонка (Win95-карточки контента) ---------- */
.hero-info-card {
  position: relative;
  background: #FFFFFF;
  border: 2px solid #444;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.12);
  border-radius: 0;
  font-family: 'Inter', sans-serif;
}
.hero-info-card .win95-titlebar { height: 24px; font-size: 11px; }
.hero-info-card .hero-info-body { padding: 16px 18px; }
.hero-info-card ul { list-style: none; padding: 0; margin: 0; }
.hero-info-card li {
  font-size: 13px;
  line-height: 1.5;
  padding: 5px 0;
  display: block;
  text-indent: -18px;
  padding-left: 18px;
}
.hero-info-card li::before {
  content: '— ';
  color: #888;
}

/* ---------- Зарплатная плашка (по образцу Contented) ---------- */
.hero-salary {
  background: rgba(48, 52, 62, 0.24);
  color: #000000;
  border-radius: 16px;
  padding: 20px 22px;
  font-family: 'Inter', sans-serif;
}
@media (max-width: 767px) {
  .hero-salary { background: rgba(255, 255, 255, 0.55); }
}
.hero-salary-title {
  font-size: 18px;
  font-weight: 500;
  opacity: 0.65;
  margin-bottom: 14px;
  text-transform: lowercase;
}
.hero-salary-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.hero-salary-amount {
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  font-weight: 700;
  line-height: 1;
}
.hero-salary-label {
  font-size: 13px;
  font-weight: 500;
  opacity: 0.72;
  margin-top: 6px;
  line-height: 1.3;
}
.hero-salary-bar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
.hero-salary-bar div { height: 8px; border-radius: 4px; }
.hero-salary-bar div:nth-child(1) { background: rgba(61,59,255,0.55); }
.hero-salary-bar div:nth-child(2) { background: rgba(61,59,255,0.32); }
.hero-salary-bar div:nth-child(3) { background: rgba(61,59,255,0.15); }

/* ============================================================
   b6-* экраны — Contented-стиль (fuchsia-плашки, Win95-карточки)
   ============================================================ */

/* Большая fuchsia stat-плашка для главного результата (ТОП-17%) */
.fuchsia-stat {
  background: #FFFFFF;
  color: var(--ink);
  border-radius: 20px;
  padding: 24px 26px;
  font-family: 'Inter', sans-serif;
  box-shadow: var(--shadow);
}
/* оффер-плашка: розовый фон, белый текст; «стипендию 15 000 ₽» — синий на белом выделении */
.offer-card { background: #E81B7F; color: #FFFFFF; font-family: 'Inter', sans-serif; }
.offer-card-main {
  font-size: clamp(1.3rem, 3.4vw, 1.7rem);
  font-weight: 600;
  line-height: 1.32;
}
/* мобайл: чуть мельче, чтобы «стипендию 15 000 ₽» влезла в 2 строки (а не ₽ на 3-ю) */
@media (max-width: 767px) { .offer-card-main { font-size: 1.1rem; } }
.offer-card-fine {
  font-size: 14px;
  line-height: 1.45;
  opacity: 0.92;
  margin-top: 12px;
}
.offer-hl {
  background: #FFFFFF; color: var(--sb-blue); font-weight: 700;
  border-radius: 5px; padding: 1px 6px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.fuchsia-stat-title {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.85;
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.fuchsia-stat-value {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(3rem, 8vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: #E81B7F;
}
.fuchsia-stat-sub {
  font-size: 14px;
  opacity: 0.85;
  margin-top: 10px;
  line-height: 1.4;
}

/* Win95-mini-карточка (для партнёров, секций результата) */
.win95-card {
  background: #FFFFFF;
  border: 2px solid #444;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.15);
  border-radius: 0;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
}
.win95-card .win95-titlebar {
  height: 22px;
  font-size: 11px;
  padding: 3px 6px 3px 8px;
}
.win95-card-body { padding: 12px 14px; font-size: 14px; line-height: 1.4; }
.win95-card-body--center { text-align: center; }

/* Win95-разблокировка для b6-phone отчёта */
.win95-locked {
  border: 2px solid #444;
  background: #ECECEC;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.18);
  overflow: hidden;
  position: relative;
  font-family: 'Inter', sans-serif;
}
.win95-locked .win95-titlebar {
  background: linear-gradient(90deg, #5AB7E8 0%, #C45BB1 55%, #E81B7F 100%);
  color: #FFF;
  height: 26px;
  padding: 4px 6px 4px 10px;
  font-size: 12px;
  font-weight: 600;
}
.win95-locked-body {
  background: #FFFFFF;
  padding: 18px 20px;
  font-size: 13px;
  line-height: 1.5;
}
.win95-locked-overlay {
  position: absolute;
  inset: 26px 0 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.06);
  pointer-events: none;
}
.win95-locked-badge {
  background: #000;
  color: #FFF;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* CTA-кнопка широкая fuchsia (для финальных экранов b6) */
.btn-cta-fuchsia {
  background: #E81B7F;
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  border: none;
  border-radius: 12px;
  padding: 18px 32px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
  text-transform: lowercase;
}
.btn-cta-fuchsia:hover { background: #FF2E91; box-shadow: 0 6px 16px rgba(232,27,127,0.35); transform: translateY(-2px); }

/* Skillbox-blue widget CTA */
.btn-cta-blue {
  background: #3D3BFF;
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  border: none;
  border-radius: 12px;
  padding: 18px 32px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}
.btn-cta-blue:hover { background: #2E2DD9; box-shadow: 0 6px 16px rgba(61,59,255,0.35); transform: translateY(-2px); }
/* без белой обводки при фокусе/клике — кнопка остаётся просто синей */
.btn-cta-blue:focus { outline: none; }
.btn-cta-blue:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(61,59,255,0.45); }

/* ---------- Sticky bottom-bar (по образцу Contented) ---------- */
.hero-sticky {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: #000000;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  z-index: 150;
  font-family: 'Inter', sans-serif;
}
.hero-sticky-wing {
  width: 90px;
  height: 100%;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,0.55) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,0.55) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.55) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.55) 75%);
  background-size: 18px 18px;
  background-position: 0 0, 0 9px, 9px -9px, -9px 0;
  flex-shrink: 0;
}
.hero-sticky-wing--l { clip-path: polygon(0 0, 100% 0, calc(100% - 24px) 100%, 0 100%); }
.hero-sticky-wing--r { clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%); }
.hero-sticky-text {
  flex: 1;
  font-size: 14px;
  text-align: center;
  padding: 0 16px;
  text-transform: lowercase;
}
.hero-sticky-text strong {
  font-weight: 600;
  display: block;
  text-transform: none;
}
.hero-sticky-cta {
  background: #3D3BFF;
  color: #FFFFFF;
  border: none;
  border-radius: 999px;
  padding: 12px 26px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  margin-right: 16px;
  text-transform: lowercase;
}
.hero-sticky-cta:hover { background: #2E2DD9; }

/* ============================================================
   Parallax-сдвиг декораций
   - Desktop: на mousemove обновляются --mx / --my (-0.5..0.5)
   - Mobile: на scroll обновляется --sy (0..1)
   Каждый ассет двигается со своим коэффициентом через `translate:`
   (свойство, отдельное от transform — не конфликтует с rotate)
   ============================================================ */

.hero-sky { --mx: 0; --my: 0; --sy: 0; }

@media (min-width: 769px) {
  /* Облака — parallax x3 от прошлой версии (заметное движение от мыши) */
  .pixel-cloud--real-blue { transition: translate 0.5s cubic-bezier(0.2,0.8,0.2,1); }
  .pixel-cloud--real-blue-lg  { translate: calc(var(--mx) * 54px)  calc(var(--my) * 30px);  }
  .pixel-cloud--real-blue-md  { translate: calc(var(--mx) * 72px)  calc(var(--my) * 42px);  }
  .pixel-cloud--real-blue-sm  { translate: calc(var(--mx) * 90px)  calc(var(--my) * 54px);  }
  .pixel-cloud--real-pink     { translate: calc(var(--mx) * -66px) calc(var(--my) * 36px); transition: translate 0.5s cubic-bezier(0.2,0.8,0.2,1); }

  /* Шахматные ленты — обратный сдвиг (создаёт глубину) */
  .fig-checker-ribbon {
    transition: translate 0.6s cubic-bezier(0.2,0.8,0.2,1);
    translate: calc(var(--mx) * -84px) calc(var(--my) * -48px);
  }

  /* Voxel-звезда — самый быстрый parallax (ближе к зрителю) */
  .fig-voxel-star {
    transition: translate 0.4s cubic-bezier(0.2,0.8,0.2,1);
    translate: calc(var(--mx) * 120px) calc(var(--my) * 90px);
  }

  /* Мобильник (заменил букву А) — средний parallax */
  .fig-pixel-phone {
    transition: translate 0.5s cubic-bezier(0.2,0.8,0.2,1);
    translate: calc(var(--mx) * 45px) calc(var(--my) * 30px);
  }

  /* Win95-popup и pixel-звёздочки — лёгкий drift */
  .win95-popup { transition: translate 0.5s cubic-bezier(0.2,0.8,0.2,1); translate: calc(var(--mx) * -30px) calc(var(--my) * -24px); }
  .pixel-star  { transition: translate 0.5s ease-out;                    translate: calc(var(--mx) * 36px)  calc(var(--my) * 24px); }
}

@media (max-width: 768px) {
  /* Mobile parallax — scroll-driven, тоже усилен */
  .pixel-cloud--real-blue-lg  { translate: 0 calc(var(--sy) * -120px); }
  .pixel-cloud--real-blue-md  { translate: 0 calc(var(--sy) * -80px); }
  .pixel-cloud--real-blue-sm  { translate: 0 calc(var(--sy) * -60px); }
  .pixel-cloud--real-pink     { translate: 0 calc(var(--sy) * -180px); }
  .fig-checker-ribbon         { translate: 0 calc(var(--sy) * 90px); }
  .fig-voxel-star             { translate: 0 calc(var(--sy) * -40px); }
}

/* ---------- Адаптив ---------- */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
  .only-mobile { display: revert; }

  .pixel-cloud--lg { width: 180px; height: 64px; }
  .pixel-cloud--md { width: 120px; height: 44px; }
  .fig-placeholder.hide-mobile,
  .win95-popup.hide-mobile,
  .fig-pixel-phone.hide-mobile,
  .pixel-star.hide-mobile,
  .checker-banner.hide-mobile { display: none; }

  /* На мобайле перепозиционируем CRT-монитор — верх компьютера у окончания плашки «что внутри» */
  .fig-crt-monitor {
    right: 4% !important;
    bottom: auto !important;
    top: 720px !important;
    width: 180px !important;
    height: 180px !important;
    z-index: 5;
  }

  /* Pixel-мобильник — компактный в правом верхнем углу, над подзаголовком */
  .fig-pixel-phone {
    width: 118px !important;
    height: 185px !important;
    left: auto !important;
    right: 0% !important;
    top: 0.5% !important;
  }

  /* Лента-шахматка на мобайле мешает — убираем */
  .fig-checker-ribbon { display: none !important; }

  /* Hero мобайл: пилюля сверху → крупный звонящий телефон справа → заголовок ниже */
  .fig-pixel-phone--hero {
    width: 300px !important;
    height: 184px !important;
    left: auto !important;
    right: -12px !important;
    top: 28px !important;
    z-index: 4;
    animation: ring-buzz 1.1s ease-in-out infinite;
    transform-origin: 50% 55%;
  }
  /* белое облако слева-сверху, плавно дрейфует */
  .hero-cloud-m {
    position: absolute !important;
    top: 78px; left: -8px; bottom: auto; right: auto;
    width: 150px !important; height: 56px !important;
    z-index: 3;
    animation: hero-cloud-float 6s ease-in-out infinite;
  }
  /* пилюля у самого верха, заголовок начинается ниже полосы облако+телефон */
  .hero-content { padding-top: 14px !important; }
  .hero-content h1 { margin-top: 150px; }
  /* стрелки «звонка» — при крупном телефоне места нет, прячем */
  .hero-ring { display: none !important; }

  /* Voxel-звезда — крупный десктоп-акцент; на мобайле нет свободного места,
     прячем, чтобы не накладывалась на заголовок/бейдж (декор — облака + pixel-звёзды) */
  .fig-voxel-star { display: none !important; }

  /* Облака на мобайле — крупнее, нижний пласт; розовое чуть меньше */
  .pixel-cloud--real-blue-lg { width: 240px !important; height: 110px !important; }
  .pixel-cloud--real-blue-md { width: 170px !important; height: 80px !important; }
  .pixel-cloud--real-blue-sm { width: 110px !important; height: 50px !important; }
  .pixel-cloud--real-pink-md { width: 140px !important; height: 65px !important; }

  /* Шахматную ленту делаем поменьше, чтобы не перекрывала контент */
  .fig-checker-ribbon { opacity: 0.5; }

  .hero-sticky { height: 56px; }
  .hero-sticky-wing { width: 40px; }
  .hero-sticky-text { font-size: 12px; }
}

/* ============================================================
   Прогресс-бар воронки — тонкая Skillbox-blue полоска у самого
   верха страницы. Заполняется по $store.s.progress (stepIndex).
   Скрыт на hero / b6-phone / b6-results / b6-application.
   ============================================================ */
.funnel-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 150;
  background: rgba(61, 59, 255, 0.12);
  pointer-events: none;
}
.funnel-progress__fill {
  height: 100%;
  background: var(--sb-blue);
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 6px rgba(61, 59, 255, 0.45);
  transition: width 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   Экран 2.2 · razvod-info — графдизайн как фундамент.
   Новая айдентика: телефон «Кто такой графдизайнер» + белые
   звёзды, цитата-карточка, фокусный блок с компактной
   инфографикой (4 направления растут из фундамента).
   ============================================================ */
.rv-decor { position: absolute; inset: 0; pointer-events: none; z-index: 1; }

/* Кнопочный телефон с экраном «Кто такой графдизайнер» */
.fig-pixel-phone--graphdiz { background-image: url("figma/pixel-phone-graphdiz.png"); }
.fig-pixel-phone--hero { background-image: url("../phone-hero.png?v=163"); }
.rv-phone {
  right: 9%; top: 70px;
  width: 232px; height: 384px;
  transform: rotate(4deg);
}
@media (min-width: 769px) {
  .rv-phone { transition: translate 0.5s cubic-bezier(0.2,0.8,0.2,1);
              translate: calc(var(--mx) * -40px) calc(var(--my) * 26px); }
}
@media (max-width: 1180px) { .rv-phone { right: -2%; width: 200px; height: 331px; opacity: 0.92; } }

/* Белые звёзды — россыпь */
.rv-star { z-index: 1; }
.rv-star--1 { top: 12%; right: 26%; }
.rv-star--2 { top: 58%; right: 10%; }
.rv-star--3 { top: 38%; left: 5%; }
.rv-star--4 { top: 74%; left: 18%; }

/* Цитата с примерами */
.rv-quote {
  position: relative;
  background: #FFFFFF;
  border-radius: 20px;
  padding: 20px 24px 20px 26px;
  border-left: 5px solid var(--sb-blue);
  box-shadow: var(--shadow);
}
.rv-quote p { margin: 0; font-size: clamp(1rem, 2.1vw, 1.2rem); line-height: 1.5; color: var(--ink); }
.rv-quote b { font-weight: 700; }
.rv-quote__mark {
  position: absolute; top: -18px; left: 16px;
  font-family: 'Unbounded', sans-serif; font-weight: 700;
  font-size: 56px; line-height: 1; color: var(--sb-pink);
}

/* Фокусный блок — самый яркий на странице */
.rv-foundation {
  margin-top: 26px;
  background: #FFFFFF;
  border: 2px solid var(--sb-blue);
  border-radius: 26px;
  padding: 26px 28px 30px;
  box-shadow: 0 22px 54px -20px rgba(61, 59, 255, 0.5);
}
.rv-foundation__title {
  font-family: 'Unbounded', 'Inter', sans-serif; font-weight: 700;
  font-size: clamp(1.15rem, 2.7vw, 1.55rem); line-height: 1.15; color: var(--ink);
  margin-bottom: 20px;
}
.rv-foundation__text {
  margin: 0; color: var(--ink-soft);
  font-size: clamp(0.95rem, 1.9vw, 1.05rem); line-height: 1.6;
}
.rv-foundation__text--top { margin: 0 0 22px; }

/* Win95-поп-ап (статичный, в потоке) — блок «с чем работает графдизайнер» */
.win95-window {
  background: #ECECEC;
  border: 2px solid #444;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.16);
  font-family: 'Inter', sans-serif;
  color: #000;
}
.rv-popup { max-width: 600px; }
.win95-body--text {
  text-align: left;
  padding: 18px 20px 18px;
  font-size: clamp(1rem, 2vw, 1.18rem);
  line-height: 1.5;
}
.win95-body--text p { margin: 0; }
.win95-body--text b { font-weight: 700; }

/* Компактная инфографика «фундамент → ответвления» */
.rv-diagram { user-select: none; }
.rv-diagram__branches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.rv-diagram__branches span {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 52px; padding: 8px 6px;
  background: #F1F3FF; border: 1.5px solid #D8DBFF; border-radius: 14px;
  font-family: 'Unbounded', 'Inter', sans-serif; font-weight: 600;
  font-size: clamp(0.66rem, 1.5vw, 0.9rem); color: var(--ink); line-height: 1.1;
}
.rv-diagram__arrows { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 7px 0; }
.rv-diagram__arrows i {
  width: 0; height: 0; margin: 0 auto; display: block;
  border-left: 8px solid transparent; border-right: 8px solid transparent;
  border-bottom: 11px solid var(--sb-blue);
}
.rv-diagram__base {
  background: var(--sb-blue); color: #FFFFFF; border-radius: 16px;
  padding: 18px 16px; text-align: center;
}
.rv-diagram__base-title {
  font-family: 'Unbounded', 'Inter', sans-serif; font-weight: 700; text-transform: lowercase;
  font-size: clamp(1.05rem, 2.6vw, 1.45rem); line-height: 1;
}
.rv-diagram__base-sub { margin-top: 6px; font-size: clamp(0.68rem, 1.5vw, 0.85rem); opacity: 0.92; }

@media (max-width: 520px) {
  .rv-diagram__branches { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .rv-diagram__branches span { min-height: 46px; }
  /* стрелки — центрированная связка вверх от фундамента к направлениям */
  .rv-diagram__arrows { display: flex; justify-content: center; gap: 24px; margin: 11px 0; }
}

/* ============================================================
   Глобальная шапка-«закреп» в стиле Win95-titlebar:
   градиент blue→fuchsia, белый логотип, без кнопки ×.
   Sticky — закреплена сверху на всей воронке.
   ============================================================ */
.app-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: #FFFFFF;
  border-bottom: 1px solid rgba(232, 232, 230, 0.7);
  box-shadow: 0 4px 14px -10px rgba(0, 0, 0, 0.25);
}

/* Розовое выделение фрагмента заголовка (мотивашки) */
.hl-pink { color: #E81B7F; }

/* Цитата внутри Win95-окна (пустой titlebar) */
.win95-body--quote p {
  font-style: italic;
  font-size: clamp(1.05rem, 2.1vw, 1.25rem);
  line-height: 1.45;
}