/* ============================================================
   BASE — сброс, шрифты, «сцена» с пиксель-точным масштабом
   Desktop  = Figma Frame 13 · 1440 × 5781
   Mobile   = Figma Frame 16 ·  375 × 5782
   ============================================================ */

:root{
  --scale: 1;              /* ставится из js/main.js */
  --ink: #121212;          /* Rectangle 89 — фон страницы */
  --accent: #1BA0FF;       /* Rectangle 96 — голубой градиент */
}

*,*::before,*::after{ box-sizing: border-box; }

html,body{ margin:0; padding:0; }

/* Фоновые слои шире макета — обрезаем их ровно по ширине экрана.
   overflow-x:clip (а не hidden) не создаёт скролл-контейнер,
   поэтому вертикальная прокрутка страницы остаётся обычной.      */
html,body{ overflow-x: clip; }

body{
  background: var(--ink);
  color:#fff;
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img{ display:block; max-width:none; border:0; }
a{ text-decoration:none; color:inherit; }
p,h1,h2,h3,h4{ margin:0; }

/* --- Сцена: фиксированная ширина макета, пропорциональный zoom ---
   overflow-x: visible — чтобы фоновые слои могли выходить за 1440px
   и занимать всю ширину экрана, как в макете.
   overflow-y: clip   — вертикальная обрезка сохраняется.              */
.stage{
  position: relative;
  margin: 0 auto;
  overflow-x: visible;
  overflow-y: clip;
  background: var(--ink);
  zoom: var(--scale);
}

/* Полноширинные фоны.
   --over — на сколько экран шире макета с каждой стороны (0, если уже).
   Фон сохраняет свою геометрию из макета и дополнительно вырастает
   в ту сторону, где в макете его обрезал кадр.
   .fb-l  — растёт только влево;  .fb-lr — растёт в обе стороны.
   --dl — left из макета, --dw — ширина из макета.                     */
.fb-l { left: calc(var(--dl) - var(--over)); width: calc(var(--dw) +     var(--over)); }
.fb-lr{ left: calc(var(--dl) - var(--over)); width: calc(var(--dw) + 2 * var(--over)); }
.fb-r { left: var(--dl);                      width: calc(var(--dw) +     var(--over)); }

/* Фоновый слой — без горизонтальной обрезки.
   Контентный слой — обрезается ровно рамкой макета, как в Figma. */
.stage-bg     { position:absolute; inset:0; }
.stage-content{ position:absolute; inset:0; overflow:hidden; }

.stage--d{
  width:1440px; height:8483px;
  --over: max(0px, calc((100vw / var(--scale) - 1440px) / 2));
}
.stage--m{
  width:375px; height:6820px; display:none;
  --over: max(0px, calc((100vw / var(--scale) - 375px) / 2));
}

@media (max-width: 767px){
  .stage--d{ display:none; }
  .stage--m{ display:block; }
}