/* ===== Слайд 12 (нумерация пользователя) — оверлей "Lastpopup" (Figma
     node 2898:4892) ===== НЕ реальная позиция трека (TOTAL остаётся 10,
     см. js/slides.js) — трек физически стоит на слайде 10 (контакты).
     #lastpopup-screen-backdrop и #lastpopup-fixed-wrap — настоящие
     fixed-элементы уровня .menubar/.apps-sidebar, СНАРУЖИ #stage/.stage-wrap
     целиком (см. разметку в конце body, сразу после .apps-sidebar), а не
     часть design-канваса: живи они внутри #stage-content, оба были бы
     ограничены границами 1440×760-канваса — на узких/высоких окнах
     (slideH>760, #stage-content сдвинут center-offset'ом) поверх/под
     канвасом оставались бы незатемнённые полосы, а fixed .menubar/
     .apps-sidebar (z-index:100) вообще не темнели бы. Вынос наружу —
     единственный способ одновременно поднять затемнение ПОВЕРХ .menubar и
     карточку ПОВЕРХ затемнения без подъёма z-index всего #stage целиком
     (что подняло бы и контент слайда 10 над затемнением, сломав порядок
     слоёв). z-index:150/200 — оба выше .menubar/.apps-sidebar(100), карточка
     (200) выше самого затемнения (150). #lastpopup-fixed-canvas переиспользует
     var(--stage-scale) (тот же CSS-var, что и #stage — см. js/stage.js) через
     transform:scale(), поэтому вся вёрстка внутри .lastpopup-card
     (координаты/шрифты в дизайн-px) остаётся без изменений — она просто
     помещена в новую систему координат, центрированную flex'ом в реальном
     вьюпорте (та же логика центрирования, что у .stage-wrap). Открывается/
     закрывается тем же скроллом/wheel, что и остальные слайды: advance()/
     retreat() при current===TOTAL-1 — см. js/slide11-lastpopup.js за
     анимацией (в т.ч. yPercent-подъём карточки из-за нижнего края экрана),
     js/slides.js за триггером (переменная lastPopupOpen). pointer-events:none
     по умолчанию (слайд 10 и menubar/sidebar под низом остаются кликабельны,
     пока попап закрыт) — .is-open переключает на auto. */
  #lastpopup-screen-backdrop{
    position:fixed; inset:0; z-index:150;
    background:rgba(0,0,0,0.8);
    opacity:0; pointer-events:none;
  }
  #lastpopup-fixed-wrap{
    position:fixed; left:0; right:0; top:var(--header-h); bottom:0;
    display:flex; align-items:center; justify-content:center;
    z-index:200; pointer-events:none;
  }
  /* Клики ловят ТОЛЬКО карточка и крестик, а обёртка с канвасом остаются
     pointer-events:none навсегда (правка 2026-08-05). Раньше `.is-open`
     поднимал auto на всей #lastpopup-fixed-wrap — а она растянута на весь
     экран ниже шапки, поэтому клик по затемнению физически не мог дойти до
     #lastpopup-screen-backdrop: его перехватывала прозрачная обёртка.
     pointer-events НАСЛЕДУЕТСЯ, поэтому явный auto на детях прекрасно
     работает внутри родителя с none. Тот же приём — у попапов регалий
     слайда 4 (css/solution-popups.css). */
  #lastpopup-screen-backdrop.is-open{ pointer-events:auto; }
  #lastpopup-fixed-wrap.is-open .lastpopup-card,
  #lastpopup-fixed-wrap.is-open .lastpopup-close{ pointer-events:auto; }
  #lastpopup-fixed-canvas{ position:relative; width:1440px; height:760px; transform:scale(var(--stage-scale)); }

  /* Крестик закрытия (правка 2026-08-05, по просьбе пользователя — раньше
     попап закрывался только скроллом вверх). Центром сидит на верхней кромке
     карточки: она стоит на top:24 при ширине канваса 1440, значит центр
     кнопки — (720, 24), а её левый верхний угол — (720−24, 24−24) = (696, 0).
     Ровно тот же приём и та же геометрия, что у .m-ov__close--round в
     мобилке и .sol-popup-close на слайде 4 — круг и перекладины рисуются
     CSS'ом, файла нет. Сиблинг карточки, а не её ребёнок (у карточки
     overflow:hidden, см. разметку). opacity:0 — дефолт того же рода, что у
     самой карточки: элемент живёт в DOM всегда, JS выставляет состояние
     только вокруг открытия. */
  .lastpopup-close{
    position:absolute; left:696px; top:0; width:48px; height:48px;
    margin:0; padding:0; border:none;
    background:var(--yellow); border-radius:50%;
    cursor:pointer; opacity:0; pointer-events:none;
    -webkit-appearance:none; appearance:none;
  }
  .lastpopup-close span{
    position:absolute; left:50%; top:50%; width:17.6px; height:2.5px;
    margin:-1.25px 0 0 -8.8px; background:var(--ink); border-radius:2px;
  }
  .lastpopup-close span:first-child{ transform:rotate(45deg); }
  .lastpopup-close span:last-child{ transform:rotate(-45deg); }
  /* .lastpopup-card — тёмная карточка контента, inset 24px от края
     #lastpopup-fixed-canvas со всех сторон (1440-48=1392, 760-48=712 — 1:1
     из Figma padding-24 на внешнем контейнере). opacity:0 здесь — страховочный
     CSS-дефолт: js/slide11-lastpopup.js выставляет скрытое состояние
     (yPercent/opacity) только перед открытием/после закрытия, а не сразу на
     загрузке страницы, так что без этого дефолта карточка была бы видима
     поверх Hero до самого первого открытия попапа (никакого inline-стиля до
     первого вызова openLastPopup()/closeLastPopup() ещё нет). Скрытие
     продублировано и тут (на случай, если JS ещё не успел выполниться), и в
     самом JS-модуле сразу при инициализации (см. js/slide11-lastpopup.js) —
     inline-стили GSAP всё равно перебивают этот CSS-дефолт при первом же
     gsap.set()/animation. */
  .lastpopup-card{ position:absolute; left:24px; top:24px; width:1392px; height:712px; background:#1A1A1C; border-radius:32px; box-sizing:border-box; padding:60px 50px; display:flex; flex-direction:column; align-items:center; gap:64px; overflow:hidden; opacity:0; }
  .lastpopup-logo{ width:200px; height:44.646px; flex-shrink:0; opacity:0; }
  .lastpopup-heading{ width:100%; flex-shrink:0; opacity:0; text-align:center; }
  .lastpopup-heading p{ margin:0; font-family:'Unbounded',sans-serif; font-weight:400; font-size:32px; line-height:1.4; color:#fff; }
  .lastpopup-clients{ width:100%; flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:32px; }
  .lastpopup-clients-label{ margin:0; width:100%; opacity:0; font-family:'Source Sans Pro',sans-serif; font-weight:600; font-size:16px; letter-spacing:0.5714px; text-transform:uppercase; text-align:center; color:#fff; }
  /* ----- Карусель клиентов (общая с мобилкой) ------------------------------
     Раньше это был неподвижный ряд из пяти логотипов, а стрелки по краям были
     нарисованы для вида. По правке пользователя лента едет сама и слушается
     стрелок; логика — js/clients-carousel.js, разметка та же и в мобильном
     попапе, отличается только data-visible (5 против 1).

     Слоты РАВНОЙ ширины (окно / data-visible), логотип внутри вписывается по
     object-fit. Иначе разная натуральная ширина логотипов (112…133px) давала
     бы неровный шаг и лента дёргалась бы. Ширину слотов ставит JS — она
     зависит от фактической ширины окна карусели. */
  .lastpopup-logoline{ opacity:0; }
  .clients-carousel{ display:flex; align-items:center; gap:24px; width:100%; }
  /* touch-action:pan-y — отдаём браузеру вертикальную прокрутку, горизонталь
     забираем себе под свайп (см. js/clients-carousel.js). */
  .clients-carousel__window{
    flex:1 0 0; min-width:0; overflow:hidden;
    touch-action:pan-y; -webkit-user-select:none; user-select:none;
  }
  .clients-carousel__window img{ -webkit-user-drag:none; user-drag:none; pointer-events:none; }
  .clients-carousel__track{ display:flex; align-items:center; will-change:transform; }
  .clients-carousel__slot{
    flex-shrink:0; display:flex; align-items:center; justify-content:center;
    height:32px; padding:0 8px; box-sizing:border-box;
  }
  .clients-carousel__slot img{ max-width:100%; max-height:100%; object-fit:contain; display:block; }
  /* Стрелка — шеврон на бордерах, как у остальных указателей в проекте:
     SVG-ассет тут не нужен, а кнопкой она обязана быть ради доступности. */
  .clients-carousel__arrow{
    position:relative; width:8px; height:13.946px; flex-shrink:0;
    background:none; border:none; padding:0; cursor:pointer;
  }
  .clients-carousel__arrow::after{
    content:''; position:absolute; left:1px; top:3px; width:7px; height:7px;
    border-left:2px solid #fff; border-bottom:2px solid #fff;
    transform:rotate(45deg);
  }
  .clients-carousel__arrow--next::after{ left:0; transform:rotate(-135deg); }
  .lastpopup-bottom{ width:100%; flex-shrink:0; display:flex; align-items:flex-start; justify-content:center; gap:64px; opacity:0; }
  .lastpopup-links{ display:flex; flex-direction:column; align-items:flex-start; }
  /* Правка 2026-08-07: часть строк стала настоящими ссылками и кнопками
     (юр. страницы, три запроса, почта) — раньше все были <p> и не нажимались.
     Вид не меняется: сбрасываем кнопке её собственную отрисовку и наследуем
     тот же набор свойств, что был у параграфов. */
  .lastpopup-links p,
  .lastpopup-links a,
  .lastpopup-links button{
    margin:0; font-family:'Unbounded',sans-serif; font-weight:400; line-height:1.4; color:#fff;
  }
  .lastpopup-links a{ text-decoration:none; }
  .lastpopup-links button{
    padding:0; border:none; background:none; text-align:left; cursor:pointer;
  }
  .lastpopup-links a:hover, .lastpopup-links button:hover{ text-decoration:underline; }
  .lastpopup-links--legal{ opacity:0.5; }
  .lastpopup-links--legal p, .lastpopup-links--legal a{ font-size:11px; }
  .lastpopup-links--legal p:nth-child(2), .lastpopup-links--legal p:nth-child(3){ padding-left:16px; }
  .lastpopup-links--legal p:nth-child(3){ cursor:pointer; }
  .lastpopup-links--legal p:nth-child(2){ cursor:pointer; }
  .lastpopup-links--nav{ gap:16px; }
  .lastpopup-links--nav button{ font-size:12px; cursor:pointer; }
  .lastpopup-links--contact{ gap:16px; }
  .lastpopup-contact-item{ display:flex; align-items:center; gap:12px; cursor:pointer; text-decoration:none; }
  .lastpopup-contact-item:hover p{ text-decoration:underline; }
  .lastpopup-contact-item p{ margin:0; font-family:'Unbounded',sans-serif; font-weight:400; font-size:12px; line-height:1.4; color:#fff; }
  .lastpopup-contact-icon{ width:16px; height:16px; flex-shrink:0; position:relative; }
  .lastpopup-contact-icon img{ position:absolute; }
  .lastpopup-mail-icon{ left:0; top:2.374px; width:16px; height:11.252px; }
  .lastpopup-settings-icon--base{ inset:0; left:0; top:0; width:16px; height:16px; }
  .lastpopup-settings-icon--mid{ left:3.638px; top:3.638px; width:8.724px; height:8.724px; }
  .lastpopup-settings-icon--center{ left:6.130px; top:6.637px; width:3.774px; height:3.058px; }
  .lastpopup-separator{ align-self:stretch; width:1px; background:rgba(255,255,255,0.2); flex-shrink:0; }