/* Наложения на экраны в видео. Размеры — в «пикселях экрана» (data-w × data-h),
   на страницу экран масштабируется через matrix3d. */

/* ================= Сцена 1–2: экран ноутбука (1280×800) ================= */
.lp {
  background: #000;
  border-radius: 14px 14px 4px 4px;
  font-family: var(--font-text);
  color: #e8e3ea;
  /* --on — экран «включён» (GSAP), --trk — прозрачность по трекингу в перелёте B (film.js) */
  opacity: calc(var(--on, 0) * var(--trk, 1));
  isolation: isolate;
}
.lp__flash {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: radial-gradient(70% 60% at 50% 45%, rgba(255, 255, 255, .55), rgba(255, 170, 110, .12) 60%, transparent 80%);
  opacity: 0;
}
.lp__glare {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 38%),
    radial-gradient(120% 90% at 50% 50%, transparent 60%, rgba(0, 0, 0, .45));
}

/* --- редактор --- */
.lp-editor {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: #0b0c10;
}
.lp-editor__bar {
  height: 46px; flex: none;
  display: flex; align-items: center; gap: 10px;
  padding: 0 18px;
  background: #121318;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.lp-editor__bar > i { width: 13px; height: 13px; border-radius: 50%; background: #3a3b42; }
.lp-editor__bar > i:nth-child(1) { background: #ff5f57; }
.lp-editor__bar > i:nth-child(2) { background: #febc2e; }
.lp-editor__bar > i:nth-child(3) { background: #28c840; margin-right: 18px; }
.lp-editor__tab {
  font: 500 15px/1 var(--font-code);
  padding: 9px 14px; border-radius: 8px 8px 0 0;
  background: #0b0c10; color: #f2efe9;
  box-shadow: inset 0 2px 0 var(--orange);
}
.lp-editor__tab--dim { background: none; color: #6f6a75; box-shadow: none; }
.lp-editor__body { flex: 1; display: flex; min-height: 0; }
.lp-editor__tree {
  width: 210px; flex: none;
  display: flex; flex-direction: column; gap: 12px;
  padding: 22px 20px;
  border-right: 1px solid rgba(255, 255, 255, .05);
  font: 400 15px/1 var(--font-code); color: #6f6a75;
}
.lp-editor__tree span::before { content: '·  '; color: #3b3840; }
.lp-editor__tree .is-dir { color: #a7a1a8; }
.lp-editor__tree .is-dir::before { content: '▾ '; color: #6f6a75; }
.lp-editor__tree .is-on { color: var(--tiffany); }

/* код */
.lp-code {
  position: relative; flex: 1;
  padding: 22px 0 0;
  font: 400 24px/40px var(--font-code);
  font-variant-ligatures: none;   /* иначе <!-- и --> превращаются в стрелки */
  white-space: pre;
}
.cl { display: flex; height: 40px; }
.cl__n { width: 64px; flex: none; padding-right: 22px; text-align: right; color: #3f3c45; }
.cl__c { clip-path: inset(0 100% 0 0); }  /* ширина «напечатанного» — из JS */
.cl.is-sel { background: rgba(10, 186, 181, .14); }
.tk-c { color: #6b6570; font-style: italic; }   /* комментарий */
.tk-t { color: var(--orange); }                   /* тег */
.tk-a { color: var(--tiffany); }                  /* атрибут / метод */
.tk-s { color: #ffc9a0; }                         /* строка */
.tk-p { color: #8d8794; }                         /* пунктуация */
.lp-caret {
  position: absolute; left: 0; top: 0;
  width: 3px; height: 30px; margin-top: 5px;
  background: var(--orange);
  box-shadow: 0 0 10px var(--orange);
  animation: caret 1s steps(2, jump-none) infinite paused;
}
.film[data-seg^="a"] .lp-caret { animation-play-state: running; }
@keyframes caret { 50% { opacity: 0; } }

/* выделение рамкой (как на Mac) */
.lp-select {
  position: absolute; left: 0; top: 0;
  width: 1px; height: 1px;
  transform-origin: 0 0;
  border: 2px solid rgba(10, 186, 181, .95);
  background: rgba(10, 186, 181, .16);
  box-shadow: 0 0 22px rgba(10, 186, 181, .35);
  border-radius: 3px;
  opacity: 0;
}

/* курсор */
.lp-cursor {
  position: absolute; left: 0; top: 0; z-index: 4;
  width: 34px; height: 34px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6));
  opacity: 0;
}

/* --- экран «загрузки»: пиксельное лого --- */
.lp-boot {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center; align-content: center; gap: 46px;
  background: radial-gradient(60% 60% at 50% 50%, #120c08, #050405 70%);
  opacity: 0;
}
.lp-boot__mark { width: 720px; }
.lp-boot__logo { display: block; width: 100%; height: auto; overflow: visible; }
.lp-boot__logo rect { opacity: 0; }
.lp-boot__logo .px-mark { fill: var(--orange); }
.lp-boot__logo .px-name { fill: #f2efe9; }
.lp-boot__logo .px-web { fill: var(--tiffany); }
.lp-boot__logo { filter: drop-shadow(0 0 10px rgba(255, 122, 26, .55)); }
.lp-boot__bar { width: 300px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.lp-boot__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--orange), var(--tiffany)); transform-origin: 0 50%; transform: scaleX(0); }

/* --- готовый сайт (рендер) --- */
.lp-shot {
  position: absolute; inset: 0; z-index: 2;
  overflow: hidden;
  clip-path: inset(0 0 100% 0); /* проявление сверху вниз — из JS */
}
/* Сайт жёстко сидит в экране: никаких сдвигов и масштаба внутри (двигается только сам
   экран — по трекингу). Рендер 1586×992 ≈ 16:10, как экран 1280×800 */
.lp-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block; }

/* сканирующая линия */
.lp-scan {
  position: absolute; left: 0; right: 0; top: 0; z-index: 4;
  height: 160px; margin-top: -160px;
  pointer-events: none; opacity: 0;
  background: linear-gradient(to bottom, rgba(10, 186, 181, 0), rgba(10, 186, 181, .16) 85%, rgba(10, 186, 181, .35));
  border-bottom: 3px solid #bff7f4;
  box-shadow: 0 8px 26px 4px rgba(10, 186, 181, .85), 0 2px 60px 10px rgba(255, 122, 26, .25);
}

/* ореол свечения экрана (элемент больше экрана, под ним) */
.lp-halo {
  overflow: visible;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 140, 60, .42), rgba(255, 122, 26, .16) 55%, transparent 72%);
  mix-blend-mode: screen;
  opacity: calc(var(--on, 0) * var(--trk, 1));
}

/* ================= Подписи сцен ================= */
.cap {
  position: absolute;
  max-width: 260px;
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(6, 5, 7, .74);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 20px 50px rgba(0, 0, 0, .45);
  font: 700 clamp(16px, 1.35vw, 21px)/1.3 var(--font-head);
  letter-spacing: -.01em;
  color: var(--text);
  opacity: 0; visibility: hidden;
}
.cap::before {
  content: ''; display: block; width: 34px; height: 3px; margin-bottom: 14px; border-radius: 2px;
  background: linear-gradient(90deg, var(--orange), var(--tiffany));
  box-shadow: 0 0 12px var(--orange-glow);
}

/* плашки по бокам от ноутбука: моноширинный шрифт, тонкая рамка, точка, свечение */
.lp-tags { position: absolute; left: 0; top: 0; height: 0; opacity: 0; visibility: hidden; pointer-events: none; }
.lp-tags__col { position: absolute; top: 0; display: flex; flex-direction: column; gap: 14px; transform: translateY(-50%); }
.lp-tags__col--l { right: calc(100% - var(--l, 0px)); align-items: flex-end; }
.lp-tags__col--r { left: var(--r, 0px); align-items: flex-start; }
.tag {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 15px; border-radius: 11px;
  background: rgba(6, 5, 7, .8);
  box-shadow: inset 0 0 0 1px rgba(10, 186, 181, .45), 0 0 18px rgba(10, 186, 181, .14);
  font: 500 clamp(14px, 1.05vw, 17px)/1 var(--font-code); letter-spacing: .01em;
  color: #e9f6f5; white-space: nowrap;
}
.tag i { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--tiffany); box-shadow: 0 0 8px var(--tiffany); }
.tag--o { box-shadow: inset 0 0 0 1px rgba(255, 122, 26, .5), 0 0 18px rgba(255, 122, 26, .14); }
.tag--o i { background: var(--orange); box-shadow: 0 0 8px var(--orange); }
/* узкие экраны: в две строки под ноутбуком */
.lp-tags--below { height: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.lp-tags--below .lp-tags__col { position: static; transform: none; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* ================= Знак </> в светящемся кубе ================= */
.cube-mark { display: grid; place-items: center; overflow: visible; }
.cube-mark__svg {
  width: 46%; height: auto; overflow: visible;
  fill: #ffe2c8;
  filter: drop-shadow(0 0 4px #ff9a4d) drop-shadow(0 0 14px rgba(255, 122, 26, .9));
  mix-blend-mode: screen;
}
.cube-mark__svg rect { opacity: 0; }

/* ================= Сцена 3: экран телефона (390×828) ================= */
.ph {
  border-radius: 46px;
  background: #000;
  font-family: var(--font-text);
  color: #f2efe9;
  opacity: 0;               /* экран «загорается» — из JS */
}
.ph-lock, .ph-chat { position: absolute; inset: 0; padding: 0 16px; }
.ph-lock {
  background:
    radial-gradient(80% 50% at 85% 10%, rgba(255, 122, 26, .45), transparent 70%),
    radial-gradient(70% 45% at 0% 90%, rgba(10, 186, 181, .35), transparent 70%),
    linear-gradient(#141018, #07060a);
}
.ph-status {
  height: 52px; display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px 0;
  font: 600 15px/1 var(--font-text);
}
.ph-status__icons { display: flex; gap: 5px; align-items: flex-end; }
.ph-status__icons i { width: 4px; border-radius: 1px; background: #f2efe9; }
.ph-status__icons i:nth-child(1) { height: 6px; }
.ph-status__icons i:nth-child(2) { height: 9px; }
.ph-status__icons i:nth-child(3) { height: 12px; }
.ph-lock__clock { margin-top: 34px; text-align: center; font: 300 88px/1 var(--font-text); letter-spacing: -.03em; }
.ph-lock__date { margin-top: 10px; text-align: center; font: 500 15px/1 var(--font-text); color: rgba(242, 239, 233, .7); }
.ph-notes { position: absolute; left: 12px; right: 12px; top: 300px; display: flex; flex-direction: column; gap: 10px; }
.ph-note {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; border-radius: 22px;
  background: rgba(40, 36, 44, .78);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 10px 30px rgba(0, 0, 0, .35);
  opacity: 0;
}
.ph-note div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ph-note b { font: 600 15px/1.25 var(--font-text); }
.ph-note span { font: 400 14px/1.2 var(--font-text); color: rgba(242, 239, 233, .7); }
.ph-note time { align-self: flex-start; font: 400 12px/1.4 var(--font-text); color: rgba(242, 239, 233, .5); }
.ph-app {
  width: 40px; height: 40px; flex: none; border-radius: 11px;
  display: grid; place-items: center;
  font: 800 11px/1 var(--font-code); font-style: normal; letter-spacing: .02em;
}
.ph-app--tg { background: var(--tiffany); color: #021614; }
.ph-app--max { background: var(--orange); color: #1a0b02; }
.ph-app--web { background: #f2efe9; color: #0b0a0c; }

/* чат с ботом */
.ph-chat { background: #0d0c11; transform: translateY(100%); }
.ph-chat__head {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 6px 14px; border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.ph-chat__head div { display: flex; flex-direction: column; gap: 3px; }
.ph-chat__head b { font: 600 17px/1 var(--font-text); }
.ph-chat__head span { font: 400 13px/1 var(--font-text); color: var(--tiffany); }
.ph-chat__ava {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  font: 800 18px/1 var(--font-head); font-style: normal;
  background: linear-gradient(135deg, var(--orange), #c4500a); color: #1a0b02;
}
.ph-chat__body { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; }
.msg {
  max-width: 82%; padding: 11px 14px; border-radius: 18px;
  font: 400 15px/1.35 var(--font-text);
  opacity: 0;
}
.msg--bot { align-self: flex-start; background: #1d1b23; border-bottom-left-radius: 6px; }
.msg--me { align-self: flex-end; background: var(--tiffany); color: #021614; border-bottom-right-radius: 6px; font-weight: 500; }
.msg--card { display: flex; flex-direction: column; gap: 4px; width: 82%; }
.msg--card b { font-weight: 600; font-size: 16px; }
.msg--card span { color: rgba(242, 239, 233, .6); font-size: 13px; }
.msg--card strong { font: 700 20px/1.3 var(--font-head); color: var(--orange); }
.msg__btn {
  margin-top: 6px; padding: 10px; border-radius: 12px; text-align: center;
  font: 600 14px/1 var(--font-text); font-style: normal;
  background: var(--orange); color: #1a0b02;
}
.ph-order {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 16px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(10, 186, 181, .22), rgba(10, 186, 181, .06));
  box-shadow: inset 0 0 0 1px rgba(10, 186, 181, .5), 0 0 30px rgba(10, 186, 181, .25);
  opacity: 0;
}
.ph-order__top { display: flex; justify-content: space-between; font: 500 14px/1 var(--font-text); color: rgba(242, 239, 233, .75); }
.ph-order__paid { color: var(--tiffany); font-weight: 700; }
.ph-order strong { font: 800 26px/1.1 var(--font-head); }
.ph-order > span { font: 400 13px/1 var(--font-text); color: rgba(242, 239, 233, .6); }
.ph__dark { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }

/* ================= Боковой блок текста у сцены ================= */
.side {
  position: absolute;
  max-width: 460px;
  padding: 28px 30px;
  border-radius: 22px;
  background: rgba(6, 5, 7, .78);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 30px 70px rgba(0, 0, 0, .5);
  opacity: 0; visibility: hidden;
}
.side__title { font: 800 clamp(24px, 2.4vw, 36px)/1.1 var(--font-head); letter-spacing: -.015em; margin-bottom: 22px; }
.side__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.side__list li { display: flex; flex-direction: column; gap: 4px; padding-left: 18px; position: relative; }
.side__list li::before {
  content: ''; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 2px;
  background: var(--orange); box-shadow: 0 0 10px var(--orange);
}
.side__list b { font: 700 16px/1.3 var(--font-text); color: #fff; }
.side__list span { font: 400 15px/1.5 var(--font-text); color: #c9c3cb; }

/* ================= CRM-панель (на весь экран) ================= */
.crm {
  position: absolute; inset: calc(var(--hdr-h) + 8px) var(--gutter) 28px;
  display: grid; grid-template-columns: minmax(250px, 300px) 1fr; gap: 28px;
  padding: 28px;
  border-radius: 28px;
  background:
    radial-gradient(60% 50% at 100% 0%, rgba(255, 122, 26, .12), transparent 70%),
    radial-gradient(50% 50% at 0% 100%, rgba(10, 186, 181, .1), transparent 70%),
    #09080c;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); /* внешняя тень всё равно срезается clip-path */
  clip-path: inset(50% 50% 50% 50% round 40px); /* раскрытие из экрана телефона — из JS */
  will-change: transform;   /* свой слой: раскрытие и анимации внутри не перерисовывают сцену */
  visibility: hidden;
  overflow: hidden;
}
.crm__info { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 8px 4px; }
.crm__title { font: 800 clamp(26px, 2.6vw, 40px)/1.08 var(--font-head); letter-spacing: -.015em; }
.crm__points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.crm__points li {
  position: relative; padding-left: 30px;
  font: 400 15px/1.45 var(--font-text); color: #d4ced6;
}
.crm__points li::before {
  content: ''; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 6px;
  background: rgba(10, 186, 181, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%230ABAB5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
  box-shadow: inset 0 0 0 1px rgba(10, 186, 181, .5);
}
.crm__app { display: grid; grid-template-rows: auto auto 1fr auto; gap: 14px; min-width: 0; min-height: 0; }
.crm__top { display: flex; align-items: center; gap: 28px; font: 500 14px/1 var(--font-text); color: #8d8794; }
.crm__logo { font: 800 20px/1 var(--font-head); color: #f6efe8; margin-right: auto; }
.crm__logo i { color: var(--orange); font-style: normal; }
.crm__logo span { font: 600 12px/1 var(--font-code); color: var(--tiffany); letter-spacing: .14em; vertical-align: middle; margin-left: 6px; }
.crm__top nav { display: flex; gap: 20px; }
.crm__top nav .is-on { color: #f6efe8; box-shadow: 0 2px 0 var(--orange); padding-bottom: 6px; margin-bottom: -6px; }
.crm__period { font-style: normal; padding: 8px 14px; border-radius: 10px; background: rgba(255, 255, 255, .06); color: #f2efe9; }
.crm__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.kpi, .crm__card {
  border-radius: 18px;
  background: rgba(255, 255, 255, .035);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.kpi { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.kpi span { font: 500 13px/1 var(--font-text); color: #8d8794; }
.kpi b { font: 800 clamp(22px, 2.2vw, 32px)/1.1 var(--font-head); color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi small { font: 600 12px/1 var(--font-text); color: var(--tiffany); }
.crm__charts { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; min-height: 0; }
.crm__card { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.crm__card-h { display: flex; justify-content: space-between; align-items: baseline; font: 600 14px/1 var(--font-text); }
.crm__card-h span { font: 400 12px/1 var(--font-text); color: #6f6a75; }
.crm-chart { width: 100%; flex: 1; min-height: 90px; overflow: visible; }
.crm-chart__grid line { stroke: rgba(255, 255, 255, .06); stroke-width: 1; vector-effect: non-scaling-stroke; }
.crm-chart__line {
  fill: none; stroke: var(--orange); stroke-width: 3; vector-effect: non-scaling-stroke;
  stroke-linecap: round; stroke-linejoin: round;
}
.crm-chart__plot { visibility: hidden; }   /* до начала отрисовки — ничего не видно */
/* свечение линии — широкая полупрозрачная копия (дешевле, чем filter при перерисовке) */
.crm-chart__glow { stroke: rgba(255, 122, 26, .28); stroke-width: 10; }
.crm-chart__area { fill: url(#crmFill); }
.crm-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: space-around; flex: 1; gap: 6px; }
.crm-bars li { display: grid; grid-template-columns: 86px 1fr 34px; align-items: center; gap: 10px; font: 500 13px/1 var(--font-text); color: #c9c3cb; }
.crm-bars i {
  height: 10px; border-radius: 6px;
  background: linear-gradient(90deg, var(--tiffany), #6ff0eb);
  box-shadow: 0 0 12px rgba(10, 186, 181, .45);
  transform-origin: 0 50%; transform: scaleX(0);
  width: calc(var(--v) * 100%);
}
.crm-bars b { text-align: right; color: #fff; font-variant-numeric: tabular-nums; }
.crm-orders { width: 100%; border-collapse: collapse; font: 400 13px/1 var(--font-text); }
.crm-orders tr { opacity: 0; }
.crm-orders td { padding: 8px 6px; border-top: 1px solid rgba(255, 255, 255, .05); white-space: nowrap; }
.crm-orders td:first-child { color: #8d8794; font-family: var(--font-code); }
.crm-orders td:nth-child(4) { font-weight: 700; color: #fff; text-align: right; font-variant-numeric: tabular-nums; }
.crm-orders td:last-child { text-align: right; }
.src, .st {
  display: inline-block; padding: 5px 9px; border-radius: 999px;
  font: 600 11px/1 var(--font-text); font-style: normal; letter-spacing: .02em;
}
.src--tg { background: rgba(10, 186, 181, .16); color: var(--tiffany); box-shadow: inset 0 0 0 1px rgba(10, 186, 181, .45); }
.src--max { background: rgba(255, 122, 26, .14); color: var(--orange); box-shadow: inset 0 0 0 1px rgba(255, 122, 26, .45); }
.src--web { background: rgba(255, 255, 255, .08); color: #f2efe9; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.st { background: rgba(255, 255, 255, .06); color: #a7a1a8; }
.st--paid { background: rgba(10, 186, 181, .16); color: var(--tiffany); }
.st--cook { background: rgba(255, 122, 26, .14); color: var(--orange); }

/* ================= Сцена 4: цифровое пространство — 8 панелей ================= */
.pn {
  border-radius: 22px; background: #050407;
  /* --on — панель «зажглась» (GSAP), --trk — прозрачность по трекингу в полёте D (film.js) */
  opacity: calc(var(--on, 0) * var(--trk, 1));
}
.pn--chat { border-radius: 40px; }
.pn__site { position: absolute; inset: 0; overflow: hidden; }
.pn__flash {
  position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0;
  background: radial-gradient(80% 80% at 50% 50%, rgba(255, 255, 255, .85), rgba(255, 255, 255, .15) 60%, transparent);
}
.pn__code {
  position: absolute; inset: 0; z-index: 4; padding: 26px 30px; overflow: hidden;
  background: #07070b;
  font: 400 20px/30px var(--font-code); white-space: pre; font-variant-ligatures: none;
  color: #6b6570; opacity: 0;
}
.pn--chat .pn__code, .pn--chart .pn__code { font-size: 16px; line-height: 24px; padding: 40px 22px; }
.pn__code .tk-t { color: var(--orange); }
.pn__code .tk-a { color: var(--tiffany); }
.pn__code .tk-s { color: #ffc9a0; }
.pn__code-in { display: block; }

/* --- салон красоты PUDRA: тёплый минимализм, кремовый --- */
.pn--salon .pn__site {
  display: flex; flex-direction: column; padding: 0 54px 40px;
  background: radial-gradient(70% 80% at 85% 30%, #f7d9cf, transparent 70%), #f4ebe3;
  color: #3a2a26; font-family: var(--font-text);
}
.sl-nav { height: 92px; display: flex; align-items: center; gap: 30px; font: 400 18px/1 var(--font-text); color: #7a6660; }
.sl-nav b { font: 300 26px/1 var(--font-text); letter-spacing: .42em; color: #3a2a26; margin-right: auto; }
.sl-nav em { font-style: normal; padding: 12px 22px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px #b8925a; color: #8a6a3a; }
.sl-hero { flex: 1; display: flex; align-items: center; }
.sl-copy { width: 470px; flex: none; }
.sl-kicker { font: 500 16px/1 var(--font-text); letter-spacing: .3em; text-transform: uppercase; color: #b8925a; margin-bottom: 22px; }
.sl-title { margin: 0 0 22px; font: 200 72px/1.02 var(--font-text); letter-spacing: -.02em; color: #2e211e; }
.sl-text { font: 400 20px/1.5 var(--font-text); color: #7a6660; margin-bottom: 30px; max-width: 24ch; }
.sl-btn { display: inline-block; font: 500 19px/1 var(--font-text); font-style: normal; padding: 18px 30px; border-radius: 999px; background: #3a2a26; color: #f4ebe3; }
.sl-art { position: relative; flex: 1; height: 330px; }
.sl-art__sun { position: absolute; left: 60px; top: 40px; width: 230px; height: 230px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe9e1, #e8b4a8 70%); }
.sl-art__arch { position: absolute; left: 130px; top: 10px; width: 170px; height: 290px; border-radius: 90px 90px 0 0; box-shadow: inset 0 0 0 3px #b8925a; }
.sl-art__leaf { position: absolute; left: 40px; top: 210px; width: 120px; height: 46px; border-radius: 0 100% 0 100%; background: #9fae8c; transform: rotate(-24deg); }
.sl-art__leaf--b { left: 250px; top: 240px; width: 90px; height: 36px; background: #c4ccb2; transform: rotate(18deg); }
.sl-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; }
.sl-list li { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border-radius: 18px; background: rgba(255, 255, 255, .6); font: 400 17px/1.2 var(--font-text); color: #7a6660; }
.sl-list b { font: 600 22px/1 var(--font-text); color: #3a2a26; }

/* --- барбершоп BARBER 21: брутализм, ч/б --- */
.pn--barber .pn__site {
  display: flex; flex-direction: column;
  background: #f1f1ee; color: #0a0a0a;
  background-image: linear-gradient(#0a0a0a 2px, transparent 2px), linear-gradient(90deg, #0a0a0a 2px, transparent 2px);
  background-size: 100% 100%, 240px 100%;
  background-position: 0 72px, 0 0;
}
.br-top { height: 72px; display: flex; align-items: center; gap: 32px; padding: 0 30px; border-bottom: 3px solid #0a0a0a; font: 500 16px/1 var(--font-code); text-transform: uppercase; }
.br-top b { font: 900 24px/1 var(--font-head); margin-right: auto; }
.br-main { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 30px; }
.br-title { margin: 0; font: 900 76px/.92 var(--font-head); letter-spacing: -.03em; }
.br-price { display: grid; grid-template-columns: auto auto; gap: 10px 20px; padding: 20px 24px; background: #0a0a0a; color: #f1f1ee; font: 500 16px/1 var(--font-code); align-items: baseline; }
.br-price b { font: 900 30px/1 var(--font-head); text-align: right; }
.br-btn { display: block; font: 900 26px/1 var(--font-head); font-style: normal; padding: 22px 30px; background: #0a0a0a; color: #f1f1ee; letter-spacing: .02em; }

/* --- фитнес VOLT: неон-киберпанк, кислотно-зелёный --- */
.pn--fit .pn__site { padding: 0 44px; background: radial-gradient(70% 90% at 80% 20%, rgba(198, 255, 0, .16), transparent 60%), #07070a; color: #eaffb0; }
.ft-grid {
  position: absolute; left: -20%; right: -20%; bottom: -10%; height: 55%;
  background-image: linear-gradient(rgba(198, 255, 0, .35) 1px, transparent 1px), linear-gradient(90deg, rgba(198, 255, 0, .35) 1px, transparent 1px);
  background-size: 48px 48px;
  transform: perspective(300px) rotateX(58deg); transform-origin: 50% 100%;
  opacity: .5;
}
.ft-nav { position: relative; height: 80px; display: flex; align-items: center; gap: 28px; font: 500 16px/1 var(--font-code); color: #9fb86a; text-transform: uppercase; }
.ft-nav b { font: 900 26px/1 var(--font-head); color: #c6ff00; margin-right: auto; text-shadow: 0 0 18px rgba(198, 255, 0, .7); }
.ft-nav b i { font-style: normal; color: #00e5ff; }
.ft-title {
  position: relative; margin: 26px 0 10px;
  font: 900 108px/1 var(--font-head); letter-spacing: -.02em; color: #c6ff00;
  text-shadow: 4px 0 0 rgba(0, 229, 255, .8), -4px 0 0 rgba(255, 0, 170, .7), 0 0 40px rgba(198, 255, 0, .6);
}
.ft-sub { position: relative; font: 400 20px/1.4 var(--font-text); color: #d7f59a; margin-bottom: 26px; }
.ft-stats { position: relative; display: flex; gap: 36px; margin-bottom: 28px; font: 500 15px/1.3 var(--font-code); color: #9fb86a; text-transform: uppercase; }
.ft-stats b { display: block; font: 800 34px/1.1 var(--font-head); color: #fff; }
.ft-btn { position: relative; display: inline-block; font: 700 19px/1 var(--font-code); font-style: normal; text-transform: uppercase; padding: 18px 26px; color: #c6ff00; box-shadow: inset 0 0 0 2px #c6ff00, 0 0 24px rgba(198, 255, 0, .45); clip-path: polygon(0 0, 92% 0, 100% 30%, 100% 100%, 8% 100%, 0 70%); }

/* --- доставка ХРУСТ!: поп-арт, bento --- */
.pn--food .pn__site {
  display: flex; flex-direction: column; gap: 18px; padding: 24px 30px 30px;
  background: #ffd23f radial-gradient(rgba(0, 0, 0, .14) 2px, transparent 2.5px) 0 0/18px 18px;
  color: #111; font-family: var(--font-text);
}
.fd-top { display: flex; align-items: baseline; gap: 18px; }
.fd-top b { font: 900 52px/1 var(--font-head); letter-spacing: -.02em; color: #ff3d7f; -webkit-text-stroke: 3px #111; text-shadow: 5px 5px 0 #111; }
.fd-top span { font: 800 20px/1 var(--font-text); text-transform: uppercase; }
.fd-bento { flex: 1; display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; }
.fd-tile { position: relative; border: 4px solid #111; border-radius: 22px; box-shadow: 6px 6px 0 #111; padding: 18px 20px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.fd-tile b { font: 900 26px/1.05 var(--font-head); }
.fd-tile span { font: 800 22px/1.2 var(--font-text); }
.fd-tile--burger { grid-row: span 2; background: #ff7ab0; }
.fd-tile--time { background: #3d7bff; color: #fff; flex-direction: row; align-items: center; gap: 14px; justify-content: flex-start; }
.fd-tile--time b { font-size: 72px; }
.fd-tile--time span { font-size: 19px; }
.fd-tile--pizza { background: #fff; }
.fd-burger { position: absolute; left: 50%; top: 14%; width: 210px; height: 170px; margin-left: -105px; }
.fd-burger i { position: absolute; left: 0; right: 0; border: 4px solid #111; }
.fd-burger i:nth-child(1) { top: 0; height: 70px; border-radius: 110px 110px 18px 18px; background: #ffb347; }
.fd-burger i:nth-child(2) { top: 68px; height: 36px; border-radius: 12px; background: #5a2d1a; }
.fd-burger i:nth-child(3) { top: 102px; height: 50px; border-radius: 12px 12px 40px 40px; background: #ffb347; }
.fd-pizza { position: absolute; right: -30px; top: -30px; width: 170px; height: 170px; border-radius: 50%; border: 4px solid #111; background: radial-gradient(circle at 30% 40%, #d62828 9%, transparent 10%), radial-gradient(circle at 62% 30%, #d62828 9%, transparent 10%), radial-gradient(circle at 50% 66%, #d62828 9%, transparent 10%), #ffcf5c; box-shadow: inset 0 0 0 14px #e8a33d; }

/* --- телефоны: чаты ботов --- */
.pn--chat .pn__site { display: flex; flex-direction: column; gap: 12px; padding: 54px 18px 20px; background: #0d0c11; color: #f2efe9; font-family: var(--font-text); }
.bt-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.bt-head i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 800 18px/1 var(--font-head); font-style: normal; }
.pn--tg .bt-head i { background: #f1f1ee; color: #0a0a0a; }
.pn--max .bt-head i { background: #ffd23f; color: #111; }
.bt-head div { display: flex; flex-direction: column; gap: 4px; }
.bt-head b { font: 700 18px/1 var(--font-text); }
.bt-head span { font: 500 14px/1 var(--font-text); }
.pn--tg .bt-head span { color: var(--tiffany); }
.pn--max .bt-head span { color: var(--orange); }
.bt-msg { align-self: flex-start; max-width: 84%; padding: 12px 15px; border-radius: 18px 18px 18px 6px; background: #1d1b23; font: 400 17px/1.35 var(--font-text); }
.bt-msg--me { align-self: flex-end; border-radius: 18px 18px 6px 18px; font-weight: 600; }
.pn--tg .bt-msg--me { background: var(--tiffany); color: #021614; }
.pn--max .bt-msg--me { background: var(--orange); color: #1a0b02; }
.bt-keys { display: flex; flex-wrap: wrap; gap: 8px; }
.bt-keys span { flex: 1; text-align: center; padding: 12px 6px; border-radius: 12px; background: rgba(255, 255, 255, .07); font: 600 15px/1 var(--font-text); }
.pn--tg .bt-keys .is-on { background: rgba(10, 186, 181, .25); box-shadow: inset 0 0 0 1.5px var(--tiffany); }
.pn--max .bt-keys .is-on { background: var(--orange); color: #1a0b02; }
.bt-cart { padding: 14px 16px; border-radius: 18px; background: #1d1b23; display: flex; flex-direction: column; gap: 10px; }
.bt-cart p { margin: 0; display: flex; justify-content: space-between; font: 400 16px/1.2 var(--font-text); color: #c9c3cb; }
.bt-cart b { color: #fff; }
.bt-cart__sum { padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .08); }
.bt-cart__sum span, .bt-cart__sum b { font-weight: 700; color: var(--orange) !important; font-size: 18px; }

/* --- аналитика (дальние маленькие панели) --- */
.pn--chart .pn__site { display: flex; flex-direction: column; gap: 10px; padding: 36px 38px; background: radial-gradient(80% 80% at 80% 0%, rgba(255, 122, 26, .2), transparent 70%), #0a090d; color: #f2efe9; }
.pn--chart-t .pn__site { background: radial-gradient(80% 80% at 80% 0%, rgba(10, 186, 181, .2), transparent 70%), #0a090d; }
.ch-h { font: 600 24px/1 var(--font-text); color: #a7a1a8; }
.ch-big { font: 800 84px/1 var(--font-head); color: var(--orange); text-shadow: 0 0 30px rgba(255, 122, 26, .6); }
.pn--chart-t .ch-big { color: var(--tiffany); text-shadow: 0 0 30px rgba(10, 186, 181, .6); }
.ch-bars { flex: 1; display: flex; align-items: flex-end; gap: 14px; }
.ch-bars i { flex: 1; height: calc(var(--h) * 100%); border-radius: 8px 8px 2px 2px; background: linear-gradient(var(--orange), rgba(255, 122, 26, .3)); }
.ch-line { flex: 1; width: 100%; }
.ch-line path { fill: none; stroke: var(--tiffany); stroke-width: 6; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* ================= Текст внизу сцены (над полом) ================= */
.bottom {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 80px var(--gutter) clamp(24px, 4vh, 44px);
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
  background: linear-gradient(to top, rgba(6, 5, 7, .92) 0%, rgba(6, 5, 7, .78) 55%, rgba(6, 5, 7, 0));
  opacity: 0; visibility: hidden;
}
.bottom__title { font: 800 clamp(24px, 2.8vw, 42px)/1.1 var(--font-head); letter-spacing: -.015em; }
.bottom__text { max-width: 760px; font: 400 clamp(14px, 1.15vw, 17px)/1.55 var(--font-text); color: #cfc9d1; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
.chips span {
  padding: 9px 16px; border-radius: 999px;
  font: 600 13px/1 var(--font-text); letter-spacing: .02em;
  background: rgba(10, 186, 181, .12); color: #bff7f4;
  box-shadow: inset 0 0 0 1px rgba(10, 186, 181, .5), 0 0 18px rgba(10, 186, 181, .2);
}

/* ================= Сцена 5: кубы — тексты в зонах (px кадра 1916×1080) ================= */
.zn { overflow: visible; display: flex; align-items: center; }
.zn--title { justify-content: center; }
.zn__title {
  font: 800 70px/1.05 var(--font-head); letter-spacing: -.02em; text-align: center;
  text-shadow: 0 0 40px rgba(255, 122, 26, .35), 0 4px 30px rgba(0, 0, 0, .8);
}
/* затемнённая подложка под списками — читается на любом фоне */
/* каждый плюс — на своей затемнённой подложке */
.zn--plus li {
  padding: 16px 22px; border-radius: 18px;
  background: rgba(6, 5, 7, .78);
  box-shadow: inset 0 0 0 1px rgba(10, 186, 181, .25), 0 16px 40px rgba(0, 0, 0, .5);
}
.zn--left { justify-content: flex-end; }          /* ближе к светящемуся кубу */
.zn--left .zn__list { align-items: flex-end; }
.zn--right { justify-content: flex-start; }
.zn--right .zn__list { align-items: flex-start; }
.zn--plus .zn__list { padding: 0; }
.zn--minus { justify-content: flex-start; }
.zn--plus { justify-content: flex-end; }
.zn__list { list-style: none; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.zn__list li {
  position: relative; display: flex; align-items: center; gap: 16px;
  align-self: flex-start;           /* ширина строки = по тексту: линия зачёркивает только его */
  font: 600 27px/1.25 var(--font-text); color: #e6e1e8; white-space: nowrap;
}
.zn--minus li::before {
  content: ''; width: 26px; height: 26px; flex: none; border-radius: 8px;
  background: rgba(255, 59, 59, .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7' fill='none' stroke='%23ff5a5a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat;
  box-shadow: inset 0 0 0 1.5px rgba(255, 59, 59, .55);
}
.zn--plus li { color: #fff; font-size: 30px; align-self: auto; }
.zn--plus .zn__list { gap: 26px; }
.zn--plus li::before {
  content: ''; width: 26px; height: 26px; flex: none; border-radius: 8px;
  background: rgba(10, 186, 181, .2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%230ABAB5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
  box-shadow: inset 0 0 0 1.5px rgba(10, 186, 181, .7), 0 0 16px rgba(10, 186, 181, .45);
}
.zn--plus li span { text-shadow: 0 0 18px rgba(10, 186, 181, .45); }
/* красная линия зачёркивания */
.zn__strike {
  position: absolute; left: 36px; right: -6px; top: 50%; height: 3px; margin-top: -1px;
  border-radius: 2px; background: var(--red);
  box-shadow: 0 0 10px rgba(255, 59, 59, .85);
  transform-origin: 0 50%; transform: scaleX(0);
}

/* ================= Сцена 6: финал у стола ================= */
.fin-lp { border-radius: 14px 14px 4px 4px; background: #000; opacity: 0; }
.fin-lp__shot { position: absolute; inset: 0; }
.fin-lp__shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block; }
/* телефон на столе включён: тот же экран блокировки, что в сцене телефона, все уведомления на месте */
.fin-ph { border-radius: 46px; }
.fin-ph .ph-note { opacity: 1; }
.fin-ph .ph-notes { top: 286px; gap: 9px; }
.fin-ph .lp__glare { border-radius: inherit; }
/* свечение экрана телефона на столе (ореол больше экрана, под ним) */
.ph-halo {
  overflow: visible;
  background: radial-gradient(50% 50% at 50% 50%, rgba(10, 186, 181, .5), rgba(255, 122, 26, .16) 55%, transparent 72%);
  mix-blend-mode: screen;
  opacity: 0;
}
/* облачко-уведомление над телефоном: тёмное стекло, тонкая рамка тиффани, хвостик вниз */
.bubble {
  --tail: 50%;
  position: absolute; left: 0; top: 0; z-index: 2;
  transform-origin: var(--tail) calc(100% + 10px);   /* всплывает из телефона — от кончика хвостика */
  pointer-events: none;
  opacity: 0; visibility: hidden;
}
.bubble__float { animation: bubble-float 3.4s ease-in-out infinite paused; }
/* бесконечные анимации идут только в своей сцене (data-seg на .film — из film.js),
   вне её не тратят кадры */
.film[data-seg="eHold"] .bubble__float { animation-play-state: running; }
@keyframes bubble-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-5px) rotate(-.6deg); }
}
.bubble__card {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  width: max-content; max-width: 260px;
  padding: 12px 16px 12px 12px; border-radius: 16px;
  /* заранее затемнённый фон вместо backdrop-filter: blur — в Safari размытие подложки дорогое */
  background: rgba(10, 12, 16, .88);
  box-shadow: inset 0 0 0 1px rgba(10, 186, 181, .75), 0 0 24px rgba(10, 186, 181, .35), 0 14px 34px rgba(0, 0, 0, .45);
}
/* хвостик-указатель вниз, на экран телефона */
.bubble__card::after {
  content: ''; position: absolute; left: var(--tail); bottom: -6px;
  width: 12px; height: 12px; margin-left: -6px;
  background: rgba(14, 17, 21, .92);
  box-shadow: 1px 1px 0 0 rgba(10, 186, 181, .75);
  transform: rotate(45deg);
}
.bubble__ic { width: 36px; height: 36px; flex: none; }
/* нить от хвостика к экрану телефона (когда облачко стоит выше крышки ноутбука) */
.bubble__card::before {
  content: ''; position: absolute; left: var(--tail); top: calc(100% + 6px);
  width: 1.5px; height: var(--stem, 0px); margin-left: -.75px;
  background: linear-gradient(rgba(10, 186, 181, .85), rgba(10, 186, 181, .15));
  box-shadow: 0 0 6px rgba(10, 186, 181, .6);
}
.bubble__txt { display: flex; flex-direction: column; gap: 2px; }
.bubble__kicker { font: 600 13px/1.2 var(--font-text); color: #e6f6f5; }
.bubble__sum { font: 800 22px/1.15 var(--font-head); color: #fff; text-shadow: 0 0 18px rgba(10, 186, 181, .45); white-space: nowrap; }
.bubble__meta { font: 500 11.5px/1.2 var(--font-text); color: rgba(220, 235, 234, .62); }
/* телефон: компактнее */
.bubble--compact .bubble__card { gap: 8px; padding: 8px 10px 8px 8px; border-radius: 13px; }
.bubble--compact .bubble__ic { width: 26px; height: 26px; }
.bubble--compact .bubble__kicker { font-size: 11px; }
.bubble--compact .bubble__sum { font-size: 16px; }
.bubble--compact .bubble__meta { font-size: 10px; }

.side__text { font: 400 15px/1.6 var(--font-text); color: #cfc9d1; margin-bottom: 22px; }
.stats { display: flex; gap: 28px; margin-bottom: 24px; }
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat b {
  font: 800 clamp(28px, 2.6vw, 40px)/1 var(--font-head); color: var(--orange);
  font-variant-numeric: tabular-nums; text-shadow: 0 0 24px rgba(255, 122, 26, .45);
}
.stat span { font: 500 14px/1 var(--font-text); color: #a7a1a8; }

/* надписи-трафареты на передних гранях серых кубов */
.cube-face { overflow: visible; }
/* надпись — только на передней грани: отступ от видимой боковой грани куба
   (проценты left/right у абсолютного элемента считаются от самой грани) */
.cube-face__word { position: absolute; top: 50%; transform: translateY(-50%); }
.cube-face--r .cube-face__word { left: 6%; right: 18%; }   /* боковая грань справа */
.cube-face--l .cube-face__word { left: 18%; right: 6%; }   /* боковая грань слева */
.cube-face__word {
  font-family: var(--font-code); font-weight: 700; letter-spacing: .06em;
  text-align: center; line-height: 1.15; white-space: nowrap;
  color: rgba(205, 205, 215, .5);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .08), 0 0 10px rgba(255, 255, 255, .12);
  opacity: 0;
}
.cube-face__word { animation: sign-flicker 4.5s steps(1, end) infinite paused; }   /* старая вывеска: изредка «подмигивает» */
.film[data-seg="dHold"] .cube-face__word { animation-play-state: running; }
@keyframes sign-flicker {
  0%, 100% { filter: none; }
  42% { filter: brightness(.55); }
  44% { filter: none; }
  71% { filter: brightness(.7); }
  72% { filter: none; }
}

/* лучи от светящегося куба к плюсам */
.cube-rays { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; will-change: opacity; }   /* свой слой: угасание без перестройки слоёв */
.cube-rays path { fill: none; stroke-linecap: butt; stroke-dasharray: 1; stroke-dashoffset: 1.001; }
.cube-rays__line { stroke: var(--tiffany); stroke-width: 2; }
.cube-rays__glow { stroke: rgba(10, 186, 181, .3); stroke-width: 8; }
.cube-rays .is-orange .cube-rays__line { stroke: var(--orange); }
.cube-rays .is-orange .cube-rays__glow { stroke: rgba(255, 122, 26, .3); }

/* ================= Портрет (телефон) ================= */
/* плашки у ноутбука: два столбика по три под ноутбуком */
.is-portrait .lp-tags--below { flex-direction: row; justify-content: center; align-items: flex-start; gap: 8px; }
.is-portrait .lp-tags--below .lp-tags__col { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 8px; }
.is-portrait .tag { font-size: 12.5px; padding: 10px 11px; gap: 8px; }

/* текст сцены — листом под объектом во всю ширину */
.side--sheet {
  left: 12px !important; right: 12px; bottom: 12px; top: auto !important;
  max-width: none; padding: 18px 18px 20px; border-radius: 20px;
}
.side--sheet .side__title { font-size: 21px; margin-bottom: 14px; }
.side--sheet .side__list { gap: 10px; }
.side--sheet .side__list b { font-size: 14.5px; }
.side--sheet .side__list span { font-size: 13.5px; line-height: 1.45; }

/* CRM на телефоне: одна колонка, компактно */
@media (max-width: 640px) {
  .crm { inset: calc(var(--hdr-h) + 6px) 10px 12px; grid-template-columns: 1fr; gap: 12px; padding: 16px; border-radius: 22px; align-content: start; }
  .crm__info { gap: 8px; padding: 0; }
  .crm__info .eyebrow { display: none; }
  .crm__title { font-size: 22px; }
  .crm__points { gap: 5px; }
  .crm__points li { font-size: 12.5px; padding-left: 24px; }
  .crm__points li::before { width: 15px; height: 15px; background-size: 10px; }
  .crm__app { gap: 10px; grid-template-rows: auto auto auto auto; }
  .crm__top nav, .crm__period { display: none; }
  .crm__kpis { gap: 8px; }
  .kpi { padding: 10px; gap: 4px; }
  .kpi span { font-size: 11px; }
  .kpi b { font-size: 16px; }
  .kpi small { font-size: 10px; }
  .crm__charts { grid-template-columns: 1fr; }
  .crm__card--bars { display: none; }
  .crm__card { padding: 12px; }
  .crm-chart { min-height: 110px; }
  .crm-orders td { padding: 6px 3px; font-size: 11.5px; }
  .crm-orders td:nth-child(2) { display: none; }
  .crm-orders tr:nth-child(n+4) { display: none; }
}

/* кубы на телефоне: мелкие тексты в кадре скрыты, вместо них — экранные */
.cubes-m { display: none; }
.is-portrait .zn, .is-portrait .cube-face, .is-portrait .cube-rays { display: none; }
.is-portrait .cubes-m { display: block; position: absolute; inset: 0; pointer-events: none; }
.cubes-m__top { position: absolute; left: 16px; right: 16px; top: calc(var(--hdr-h) + 14px); text-align: center; }
.cubes-m__title { font: 800 24px/1.1 var(--font-head); letter-spacing: -.015em; margin: 0 0 14px; text-shadow: 0 0 30px rgba(255, 122, 26, .35); }
.cubes-m__minus { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.cubes-m__minus s {
  padding: 7px 9px; border-radius: 8px;
  font: 600 11.5px/1 var(--font-code); letter-spacing: .06em;
  color: rgba(205, 205, 215, .55); text-decoration: none;
  background: rgba(30, 30, 34, .8); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  background-image: linear-gradient(var(--red), var(--red)); background-repeat: no-repeat;
  background-position: 6px 50%; background-size: 0 2px;    /* зачёркивание — из JS (ширина) */
}
.cubes-m__plus {
  position: absolute; left: 16px; right: 16px; bottom: 18px;
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px;
}
.cubes-m__plus li {
  position: relative; padding: 12px 14px 12px 42px; border-radius: 14px;
  font: 600 14.5px/1.3 var(--font-text); color: #fff;
  background: rgba(6, 5, 7, .82); box-shadow: inset 0 0 0 1px rgba(10, 186, 181, .35), 0 0 18px rgba(10, 186, 181, .12);
}
.cubes-m__plus li::before {
  content: ''; position: absolute; left: 13px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 6px;
  background: rgba(10, 186, 181, .2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%230ABAB5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
  box-shadow: inset 0 0 0 1.5px rgba(10, 186, 181, .7);
}