/* Сцена «процесс» в первом экране (направление А, 20.09): тёмный мховый стол с пятном света и зерном,
   документы — карточки интерфейса на разных глубинах по оси Z. Четыре состояния data-state="1…4":
   новая карточка ложится на передний план, прежние уходят вглубь (слои A → B → C → D) и теряют резкость.
   data-state="all" — все карточки разом: так стоит в разметке (без JS и при reduced-motion); "0" — пустой стол.
   Параллакс к курсору и смена состояний — scripts/scene.js. Размеры внутри карточек — в em от cqw стола. */
@property --gx { syntax: '<percentage>'; inherits: true; initial-value: 78%; }   /* зарегистрированы, чтобы пятно света плыло за курсором, а не прыгало */
@property --gy { syntax: '<percentage>'; inherits: true; initial-value: 18%; }
.hero-scene {
  transition: --gx .35s var(--ease-out), --gy .35s var(--ease-out);
  --desk-1: #24493a;
  --desk-2: #14302a;
  --desk-3: #0e211c;
  --glow: rgba(159, 208, 168, .28);
  --glow-2: rgba(219, 231, 201, .16);
  --on: #f1f3ec;                        /* текст на столе */
  --on-muted: rgba(241, 243, 236, .66);
  --card: #ffffff;
  --card-ink: #232722;
  --card-title: #171a17;
  --card-muted: #8a8f86;
  --card-line: #edefe8;
  --accent: #1f4d3a;                    /* акценты внутри карточек не зависят от темы страницы */
  --accent-soft: #e9f0dc;
  --accent-chip: #dbe7c9;
  --scene-dwell: 7s;                    /* столько же в scene.js; 7 с — «не успеть прочитать» при 4 с (разбор 20.09) */
  --rx: 0deg; --ry: 0deg;               /* наклон стола к курсору, ставит scene.js */
  --cz: 0px; --cx: 0deg;                /* камера рассказа (П2): наезд по Z и наклон вниз, ставит scene.js по ходу прокрутки */
  --px: 0px; --py: 0px;                 /* сдвиг слоёв к курсору; каждый слой умножает на свой --p */
  --gx: 78%; --gy: 18%;                 /* пятно света */
  grid-column: main-start;
  grid-row: 2;
  position: relative;
  aspect-ratio: 12 / 5;
  min-height: 320px;
}

.hero-scene.is-enter { transition-duration: 1.4s; }   /* вход первого кадра — только светом (scene.js) */

/* П2 (21.09): прокрутка как рассказ. На десктопе первый экран держится на месте (sticky) две высоты окна хода прокрутки —
   всего ≈ три экрана; шаги 1 → 4 идут по ходу (scene.js: SEG), автосмена работает, пока не прокручивали; камера наезжает
   и опускается (--cz/--cx), свет уезжает вниз. Пропуск — обычной прокруткой, без перехвата. Телефон и reduced-motion — без рассказа. */
@media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
  .hero-stage::after { content: ""; display: block; height: 200vh; }   /* ход рассказа — распорка, не padding: sticky держится только внутри контентного бокса родителя */
  .hero-stage .hero { position: sticky; top: var(--stick, 0px); }   /* стадия начинается с самого верха: первое движение колеса уже ведёт сцену; ниже нуля — если сцена не влезает в окно (scene.js) */
}

.scene-media {
  position: absolute; inset: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 30px 60px -30px rgba(14, 33, 28, .55), 0 0 0 1px rgba(23, 26, 23, .06);
  background:
    radial-gradient(900px 520px at var(--gx) var(--gy), var(--glow), transparent 60%),
    radial-gradient(700px 400px at 14% 96%, var(--glow-2), transparent 60%),
    linear-gradient(200deg, rgba(0, 0, 0, 0) 40%, rgba(6, 16, 12, .45) 100%),
    url("../assets/scene/desk-paper.webp") center / cover no-repeat,   /* стол: тёмно-зелёный картон, свет справа-сверху (Higgsfield, gpt_image_2_5, 21.09) */
    linear-gradient(160deg, var(--desk-1) 0%, var(--desk-2) 55%, var(--desk-3) 100%);
}
.scene-media::before {                   /* окно: виньетка к краям, светлая кромка стекла, блик сверху слева */
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .08),
    inset 0 1px 0 rgba(255, 255, 255, .22),
    inset 0 -1px 0 rgba(0, 0, 0, .35),
    inset 0 0 60px rgba(8, 20, 16, .45),
    inset 0 -40px 80px -40px rgba(6, 16, 12, .7),
    inset 40px 0 80px -60px rgba(6, 16, 12, .5),
    inset -40px 0 80px -60px rgba(6, 16, 12, .5);
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .04) 18%, transparent 34%),
    linear-gradient(to bottom, rgba(255, 255, 255, .06), transparent 12%);
}
.scene-media::after {                    /* зерно */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: .07; mix-blend-mode: overlay;      /* у картона своё зерно, шум только связывает слои */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Шаги — стеклянные таблетки; активная закрашивается слева направо за время показа */
.scene-steps { position: absolute; left: 18px; top: 18px; z-index: 6; display: flex; gap: 6px; width: max-content; max-width: calc(100% - 36px); }
.scene-step {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 13px 0 6px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset;
  color: var(--on);
  font-size: 12.5px; font-weight: 500;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.scene-step i {
  font-style: normal;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .16);
  font-size: 10px; font-weight: 700;
  position: relative; z-index: 1;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.scene-step span { position: relative; z-index: 1; }
.scene-step::before {                    /* полоса времени */
  content: ""; position: absolute; inset: auto 0 0 0; height: 2px; width: 0;
  background: var(--accent);
}
.scene-step.is-on { border-color: transparent; background: rgba(219, 231, 201, .35); color: var(--accent); }
.scene-step.is-on i { background: var(--accent); color: #f3f7ee; }
.scene-step.is-on::before { animation: step-fill var(--scene-dwell) linear forwards; }
.hero-scene.is-paused .scene-step.is-on::before { animation-play-state: paused; }
[data-state="all"] .scene-step.is-on::before { animation: none; width: 100%; }
.hero-scene.is-scroll .scene-step.is-on::before { animation: none; width: var(--fill, 0%); }   /* в рассказе полоса — ход прокрутки внутри шага */
.scene-step:hover:not(.is-on) { background: rgba(255, 255, 255, .18); }
.scene-step:focus-visible { outline-color: var(--accent-chip); outline-offset: 2px; border-radius: var(--r-pill); }
@keyframes step-fill { from { width: 0; } to { width: 100%; } }

/* Подпись состояния — строка и пояснение, сменяются наплывом */
.leads { position: absolute; left: 26px; top: 68px; width: min(26ch, 46%); z-index: 6; pointer-events: none; }
.lead {
  position: absolute; left: 0; top: 0; width: 100%;
  font-family: var(--font-text); font-weight: 600;                        /* П4: один заголовок на экран — H1; подпись сцены тише и короче */
  font-size: clamp(17px, 1.5vw, 21px); line-height: 1.2; letter-spacing: -.01em;
  color: var(--on);
  opacity: 0; translate: 0 12px;
  transition: opacity .5s var(--ease-out), translate .12s linear;
}
.lead small {
  display: block; margin-top: 8px; max-width: 32ch;
  font-family: var(--font-text); font-size: 13.5px; line-height: 1.45; letter-spacing: 0;
  color: var(--on-muted);
}
.lead.is-on { opacity: 1; translate: 0 0; transition-delay: .7s; }   /* подпись — последней: свет → листы → слова */

/* Стол — настоящее 3D: перспектива, наклон к курсору, карточки на своих глубинах */
.desk {
  position: absolute; inset: 0; z-index: 2;
  container-type: size;
  transform-style: preserve-3d;
  transform: perspective(1400px) translateZ(var(--cz)) rotateX(calc(7deg + var(--rx) + var(--cx))) rotateY(var(--ry));
  transform-origin: 50% 60%;
  transition: transform .12s linear;    /* плавность ведёт scene.js (догоняет курсор и возвращается с затуханием) */
}
.hero-scene.no-anim .desk, .hero-scene.no-anim .lead { transition: none; }

/* Свет и материал (П1, 21.09, research/2026-09-премиальные-3d-сайты.md): стол — картон с настоящим светом (Higgsfield,
   assets/scene/), у листов блик от пятна света, не главные листы темнее и размыты (глубина резкости), главный поднимается
   к зрителю при наведении. Свет справа-сверху → тени вниз-влево. Предметы на столе сняты решением владельца 21.09. */
@property --lift { syntax: '<length>'; inherits: false; initial-value: 0px; }
.sc-sheet::after, .sc-calc2::after, .sc-mail::after, .sc-lk::after {           /* блик на бумаге — идёт за пятном света (--gx/--gy) */
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 4;
  background: radial-gradient(70% 60% at var(--gx) var(--gy), rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 72%);
  mix-blend-mode: soft-light;
}
[data-state="1"] .sc-stack:hover, [data-state="2"] .sc-calc2:hover, [data-state="3"] .sc-mail:hover, [data-state="4"] .sc-lk:hover { --lift: 44px; }


/* Стопка — слой на своей глубине, как остальные слои; лист наклонён к столу (rotateX), внутри listы держат свой поворот */
.sc-stack {
  --p: 1;
  position: absolute;
  width: 29%; aspect-ratio: 1 / 1.3;
  left: 42%; top: 100%;
  transform: translateZ(-200px) rotateX(16deg) rotateZ(-6deg);
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  translate: calc(var(--px) * var(--p)) calc(var(--py) * var(--p)) var(--lift);
  opacity: 0;
  font-size: clamp(8px, .95cqw, 11px);
  transition: left 1s var(--ease-out), top 1s var(--ease-out), transform 1s var(--ease-out), translate .12s linear, --lift .5s var(--ease-out), opacity .6s var(--ease-out), filter 1s var(--ease-out);
  will-change: transform, translate, opacity;
}
.hero-scene.no-anim .sc-stack, .hero-scene.no-anim .sc-count { transition: none; }
/* Декларация: стопка листов (.sc-stack) — слой со своей глубиной, внутри лист по бланку ДТ1 и два листа под ним. */
/* Лист — бумага А4 с зелёными линейками бланка ДТ1, содержимое машинописью, штамп таможни синими чернилами.
   Свет — от пятна в правом верхнем углу сцены: блик на верхней кромке, тень вниз-влево. Под листом ещё два — реестр.
   Три графы, которые мы читаем, обведены маркером с номерами ①②③ — это наша пометка, не бланк. */
.sc-sheet {
  --paper: #fbfbf6;
  --rule: #2f8a57;            /* зелёный линеек бланка */
  --rule-soft: rgba(47, 138, 87, .55);
  --type: #2a2d29;            /* машинопись */
  --hi: rgba(219, 231, 201, .85);
  position: absolute; inset: 0;
  padding: 1.1em 1.2em 0;
  font-size: clamp(8px, .95cqw, 11px);
  color: var(--type);
  background:
    linear-gradient(200deg, rgba(255,255,255,.75) 0%, transparent 45%),
    linear-gradient(20deg, rgba(23, 26, 23, .10) 0%, transparent 40%),
    var(--paper);
  border-radius: .25em;
  transform: translateZ(20px) rotateZ(-3deg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset -1px 0 0 rgba(255,255,255,.5),
    -2px 3px 4px rgba(0,0,0,.25),
    -18px 34px 40px -12px rgba(0,0,0,.55),
    -40px 80px 110px -30px rgba(0,0,0,.6);
  overflow: hidden;
}
.sc-sheet::before {                       /* лёгкая фактура бумаги */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  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='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .94 0 0 0 0 .94 0 0 0 0 .9 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* два листа под первым — реестр */
.sc-sheet-under { position: absolute; inset: 0; background: #f1f2ec; border-radius: .25em; box-shadow: -10px 20px 30px -10px rgba(0,0,0,.5); }
.sc-sheet-under.u1 { transform: translateZ(10px) rotateZ(1deg) translate(1.5%, .8%); }
.sc-sheet-under.u2 { transform: rotateZ(4deg) translate(3.5%, 1.6%); background: #e6e8e0; }

.sc-sheet .ttl { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: .95em; letter-spacing: .02em; color: var(--rule); margin-bottom: .5em; display: flex; justify-content: space-between; align-items: baseline; }
.sc-sheet .ttl small { font-weight: 500; font-size: .7em; color: var(--rule-soft); letter-spacing: 0; }
.sc-sheet .form { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 2.15em; border-top: 1.5px solid var(--rule); border-left: 1.5px solid var(--rule); }
.sc-sheet .f { position: relative; grid-column: span var(--w); grid-row: span var(--h, 1); border-right: 1.5px solid var(--rule); border-bottom: 1.5px solid var(--rule); padding: 1.05em .45em .2em; min-width: 0; }
.sc-sheet .f::before { content: attr(data-l); position: absolute; left: .35em; top: .22em; font-size: .56em; line-height: 1.1; color: var(--rule); font-weight: 600; white-space: nowrap; overflow: hidden; max-width: calc(100% - .7em); text-overflow: clip; }
.sc-sheet .f::before { font-weight: 500; }
.sc-sheet .f i { font-style: normal; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .62em; line-height: 1.35; color: var(--type); display: block; white-space: pre-line; letter-spacing: .01em; }
.sc-sheet .f.big i { font-size: .64em; }
.sc-sheet .f.dash { border-right-style: dashed; }
.sc-sheet .f.blank::before { content: ""; }
.sc-sheet .f.lab { padding: .3em .35em; }                  /* графа-шапка слева: только подпись */
.sc-sheet .f.lab::before { position: static; font-size: .56em; white-space: normal; max-width: none; display: block; }

/* маркер: три графы, которые мы читаем */
.sc-sheet .f.on { background: var(--hi); box-shadow: inset 0 0 0 1.5px #1f4d3a; }
.sc-sheet .f.on::after { content: attr(data-k); position: absolute; right: -.7em; top: -.7em; z-index: 2; width: 1.9em; height: 1.9em; border-radius: 50%; background: #1f4d3a; color: #f3f7ee; font-size: .68em; font-weight: 700; display: grid; place-items: center; box-shadow: 0 .2em .5em rgba(0,0,0,.3); }

/* штамп таможни — синие чернила, чуть неровно */
.sc-sheet .stamp { position: absolute; right: 7%; top: 78%; z-index: 3; padding: .35em .7em .3em; border: .18em solid rgba(52, 78, 168, .75); border-radius: .3em; color: rgba(52, 78, 168, .85); font-family: 'Manrope', sans-serif; font-weight: 800; font-size: .72em; letter-spacing: .06em; text-transform: uppercase; line-height: 1.15; text-align: center; rotate: -7deg; mix-blend-mode: multiply;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.2 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.2 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.sc-sheet .stamp small { display: block; font-weight: 600; font-size: .85em; letter-spacing: .02em; text-transform: none; margin-top: .15em; }

/* счётчик реестра: не поверх листа, а на его уголке */
.sc-count { position: absolute; left: 70%; top: 13%; z-index: 5; transform: translateZ(100px); opacity: 0; transition: opacity .5s var(--ease-out); display: inline-flex; align-items: center; gap: .5em; height: 2.2em; padding: 0 .9em 0 .5em; border-radius: 999px; font-size: clamp(9px, 1.05cqw, 12px); font-weight: 600; color: #f1f3ec; background: rgba(23,26,23,.78); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(10px); box-shadow: 0 10px 24px rgba(0,0,0,.4); white-space: nowrap; }
.sc-count .icon { width: 1.5em; height: 1.5em; padding: .32em; border-radius: 50%; background: #dbe7c9; color: #1f4d3a; stroke-width: 2; }

[data-state="1"] .sc-count, [data-state="all"] .sc-count { opacity: 1; transition-delay: .8s; }

/* Расчёт: лист из файла Расчёт-2026.xlsx — слой со своей глубиной, как остальные слои */
/* Альбомный лист (контраст к портретной декларации) — та же бумага, что у декларации: тон, зерно, толщина двух листов
   по нижней и левой кромке (свет справа-сверху), контактная и рассеянная тень. Первая колонка — то, что взято из декларации,
   с теми же номерами ①②③, что стоят на её графах (заход 21.09: связь шага 1 и шага 2 глазом); остальные колонки — что мы
   добавили: группа перечня словами, норматив, ставка, сумма. Строки появляются по очереди (--d), итог набирается счётчиком
   (scene.js). Внизу ярлыки листов книги: Итог · Позиции · Исключено · Вопросы — это файл, который получает заказчик. */
.sc-calc2 {
  --paper: #fbfbf6; --line: #d6dad0; --hd: #6f746c; --ink: #232722; --title: #171a17; --acc: #1f4d3a; --hi: #e9f0dc;
  --p: 1;
  position: absolute;
  width: 41%;
  left: 42%; top: 100%;
  opacity: 0;
  padding: 1.2em 1.4em 0;
  font-size: clamp(8px, .95cqw, 11px);
  line-height: 1.35;
  color: var(--ink);
  background:
    linear-gradient(200deg, rgba(255,255,255,.8) 0%, transparent 45%),
    linear-gradient(20deg, rgba(23, 26, 23, .08) 0%, transparent 40%),
    var(--paper);
  border-radius: .25em;
  transform: translateZ(-200px) rotateX(16deg) rotateZ(-6deg);
  transform-origin: 50% 100%;
  transition: left 1s var(--ease-out), top 1s var(--ease-out), transform 1s var(--ease-out), translate .12s linear, --lift .5s var(--ease-out), opacity .6s var(--ease-out), filter 1s var(--ease-out);
  will-change: transform, translate, opacity;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset -1px 0 0 rgba(255,255,255,.5),
    -1px 1px 0 #e4e6dd, -2px 2px 0 #d3d6cc,                 /* толщина: под этим листом ещё один — «Итог» */
    -2px 3px 4px rgba(0,0,0,.25),
    -18px 34px 40px -12px rgba(0,0,0,.55),
    -40px 80px 110px -30px rgba(0,0,0,.6);
  translate: calc(var(--px) * var(--p)) calc(var(--py) * var(--p)) var(--lift);
}
.sc-calc2::before {                       /* зерно бумаги — то же, что у декларации */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: multiply; border-radius: inherit;
  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='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .94 0 0 0 0 .94 0 0 0 0 .9 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.sc-calc2 .hd { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; padding-bottom: .7em; border-bottom: 1.5px solid var(--acc); }
.sc-calc2 .hd b { font-family: 'Manrope', sans-serif; font-size: .82em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--title); }
.sc-calc2 .hd span { font-size: .78em; color: var(--hd); white-space: nowrap; }
.sc-calc2 .hd span em { font-style: normal; font-family: 'JetBrains Mono', monospace; color: var(--ink); }
.sc-calc2 table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sc-calc2 col.c1 { width: 29%; } .sc-calc2 col.c3 { width: 22%; } .sc-calc2 col.c4 { width: 21%; } .sc-calc2 col.c5 { width: 14%; } .sc-calc2 col.c6 { width: 14%; }
.sc-calc2 th { text-align: left; font-size: .68em; font-weight: 600; color: var(--hd); padding: .8em .6em .5em 0; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: bottom; overflow: hidden; }
.sc-calc2 td { padding: .85em .8em .85em 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.sc-calc2 tbody tr { transition: opacity .45s var(--ease-out) var(--d, 0s), translate .45s var(--ease-out) var(--d, 0s); }   /* строки — по очереди, после того как лист лёг */
[data-state="0"] .sc-calc2 tbody tr, [data-state="1"] .sc-calc2 tbody tr { opacity: 0; translate: 0 .5em; transition: none; }
.sc-calc2 td.num, .sc-calc2 th.num { text-align: right; padding-right: 0; }
.sc-calc2 .name b { display: block; font-weight: 600; color: var(--title); }
.sc-calc2 .name small { display: block; font-size: .8em; color: var(--hd); margin-top: .2em; white-space: nowrap; }
.sc-calc2 .name small code { font-family: 'JetBrains Mono', monospace; color: var(--ink); }
.sc-calc2 .name small i { font-style: normal; display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--acc); color: #f3f7ee; font-size: .8em; font-weight: 700; margin-right: .4em; vertical-align: -.2em; }   /* номер графы, откуда взято — как ①②③ на декларации */
.sc-calc2 .v { font-family: 'JetBrains Mono', monospace; font-size: .95em; font-weight: 500; color: var(--title); white-space: nowrap; }
.sc-calc2 .src { display: block; font-size: .78em; line-height: 1.3; color: var(--hd); margin-top: .25em; }
.sc-calc2 .on { background: var(--hi); box-shadow: inset 0 0 0 1.5px var(--acc); border-radius: .3em; padding-left: .5em; }
.sc-calc2 .sum { font-family: var(--font-display); font-weight: 400; font-size: 1.4em; letter-spacing: -.01em; color: var(--title); white-space: nowrap; }
.sc-calc2 .total td { border-bottom: 0; padding-top: .9em; padding-bottom: 1em; }
.sc-calc2 .total .lbl { font-size: .85em; color: var(--hd); }
.sc-calc2 .total .lbl b { display: block; font-size: 1.1em; font-weight: 600; color: var(--title); }
.sc-calc2 .total .sum { font-size: 1.9em; letter-spacing: -.02em; }
.sc-calc2 .tabs { display: flex; gap: .2em; margin: 0 -1.4em; padding: 0 1.4em; border-top: 1px solid var(--line); background: #f1f2ec; }
.sc-calc2 .tabs span { font-size: .78em; font-weight: 600; color: var(--hd); padding: .55em .9em; border-right: 1px solid var(--line); }
.sc-calc2 .tabs span.is-on { background: var(--paper); color: var(--acc); border-bottom: 2px solid var(--acc); margin-bottom: -1px; }
.sc-calc2 .tabs span:last-child { border-right: 0; }


/* Письмо этапа — как оно приходит заказчику; слой со своей глубиной, как остальные слои */
/* Шапка письма: отправитель с маркой ЭПЦ, кому, тема без счётчика этапов. Три раздела по шаблону письма-отчёта:
   ① Что сделано ② Что нужно от вас ③ Следующий шаг. Вложения — файлы с типом и размером. Лежит на столе, как листы. */
.sc-mail {
  --paper: #ffffff; --line: #e6e8e1; --hd: #7a7f76; --ink: #2a2d29; --title: #171a17; --acc: #1f4d3a;
  --p: 1;
  position: absolute;
  width: 31%;
  left: 42%; top: 100%;
  opacity: 0;
  font-size: clamp(8px, .95cqw, 11px);
  line-height: 1.45;
  color: var(--ink);
  background: linear-gradient(200deg, rgba(255,255,255,1) 0%, #f7f8f3 60%);
  border-radius: 1.1em;
  overflow: hidden;
  transform: translateZ(-200px) rotateX(16deg) rotateZ(-6deg);
  transform-origin: 50% 100%;
  transition: left 1s var(--ease-out), top 1s var(--ease-out), transform 1s var(--ease-out), translate .12s linear, --lift .5s var(--ease-out), opacity .6s var(--ease-out), filter 1s var(--ease-out);
  will-change: transform, translate, opacity;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), -2px 3px 4px rgba(0,0,0,.25), -18px 34px 40px -12px rgba(0,0,0,.55), -40px 80px 110px -30px rgba(0,0,0,.6);
  translate: calc(var(--px) * var(--p)) calc(var(--py) * var(--p)) var(--lift);
}
.sc-mail .from { display: grid; grid-template-columns: auto 1fr; gap: .9em; align-items: center; padding: 1.2em 1.5em .9em; }
.sc-mail .ava { width: 3em; height: 3em; border-radius: 50%; background: var(--acc); display: grid; place-items: center; color: #f3f7ee; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.sc-mail .ava .mark { width: 60%; height: 60%; }
.sc-mail .ava .mark use { --bg: #1f4d3a; }
.sc-mail .from b { display: block; font-weight: 700; color: var(--title); }
.sc-mail .from small { display: block; font-size: .85em; color: var(--hd); margin-top: .05em; }
.sc-mail .from .when { font-size: .85em; color: var(--hd); align-self: start; margin-top: .2em; }
.sc-mail .subj { padding: 0 1.5em .9em; font-weight: 600; font-size: 1.05em; color: var(--title); border-bottom: 1px solid var(--line); }
.sc-mail .subj small { display: block; font-weight: 500; font-size: .8em; color: var(--hd); margin-top: .2em; }
.sc-mail .body { padding: 1em 1.5em .5em; }
.sc-mail .body p { margin: 0 0 .7em; }
.sc-mail .body p b { color: var(--title); }
.sc-mail .body p i { font-style: normal; display: inline-grid; place-items: center; width: 1.55em; height: 1.55em; border-radius: 50%; background: var(--acc); color: #f3f7ee; font-size: .8em; font-weight: 700; margin-right: .5em; vertical-align: -.2em; }
.sc-mail .sign { padding: .2em 1.5em .9em; font-size: .9em; color: var(--hd); }
.sc-mail .sign b { font-weight: 600; color: var(--ink); }
.sc-mail .att { display: flex; gap: .6em; padding: .9em 1.5em 1.2em; border-top: 1px solid var(--line); background: #f3f4ee; }
.sc-mail .att span { display: inline-flex; align-items: center; gap: .55em; padding: .45em .8em .45em .5em; border-radius: .6em; background: #fff; border: 1px solid var(--line); font-size: .85em; font-weight: 600; color: var(--title); }
.sc-mail .att span small { font-weight: 500; color: var(--hd); }
.sc-mail .att span em { font-style: normal; width: 1.9em; height: 1.9em; border-radius: .4em; display: grid; place-items: center; font-size: .7em; font-weight: 800; letter-spacing: .02em; color: #fff; }
.sc-mail .att .xlsx em { background: #1d7a4a; }
.sc-mail .att .pdf em { background: #b23a3a; }

/* пометки на столе для шага 3 — правила шаблона письма */
.sc-notes3 { position: absolute; left: 27%; top: 44%; z-index: 4; width: 15%; display: grid; gap: .9em; font-size: clamp(9px, 1cqw, 12px); color: #f1f3ec; transform: translateZ(90px); }
.sc-note3 { display: grid; grid-template-columns: 1.55em 1fr; gap: .6em; align-items: start; }
.sc-note3 i { font-style: normal; width: 1.55em; height: 1.55em; border-radius: 50%; background: #dbe7c9; color: #1f4d3a; font-size: .85em; font-weight: 700; display: grid; place-items: center; margin-top: .1em; }
.sc-note3 b { display: block; font-weight: 600; }
.sc-note3 small { display: block; font-size: .88em; color: rgba(241,243,236,.62); margin-top: .1em; }

.hero-scene.no-anim .sc-mail { transition: none; }

/* Кабинет Росприроднадзора — единственный экран в сцене; слой со своей глубиной, как .sc-mail */
/* Единственный экран в сцене (остальное — бумага и письмо): узкая строка браузера с адресом, заголовок кабинета,
   две строки отчётности со статусом «Принят» и датой. Больше ничего — это финал, он должен быть самым чистым. */
.sc-lk {
  --paper: #ffffff; --line: #e6e8e1; --hd: #7a7f76; --ink: #2a2d29; --title: #171a17; --acc: #1f4d3a; --ok: #dbe7c9;
  --p: 1;
  position: absolute;
  width: 36%;
  left: 42%; top: 100%;
  opacity: 0;
  font-size: clamp(8px, .95cqw, 11px);
  line-height: 1.4;
  color: var(--ink);
  background: #fff;
  border-radius: .9em;
  overflow: hidden;
  transform: translateZ(-200px) rotateX(16deg) rotateZ(-6deg);
  transform-origin: 50% 100%;
  transition: left 1s var(--ease-out), top 1s var(--ease-out), transform 1s var(--ease-out), translate .12s linear, --lift .5s var(--ease-out), opacity .6s var(--ease-out), filter 1s var(--ease-out);
  will-change: transform, translate, opacity;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 1px rgba(23,26,23,.12), -2px 3px 4px rgba(0,0,0,.25), -18px 34px 40px -12px rgba(0,0,0,.55), -40px 80px 110px -30px rgba(0,0,0,.6);
  translate: calc(var(--px) * var(--p)) calc(var(--py) * var(--p)) var(--lift);
}
.sc-lk .bar { display: flex; align-items: center; gap: .5em; padding: .55em .9em; background: #f1f2ec; border-bottom: 1px solid var(--line); }
.sc-lk .bar i { width: .8em; height: .8em; border-radius: 50%; background: #d3d6cd; }
.sc-lk .bar span { margin-left: .6em; flex: 1; text-align: center; font-size: .78em; color: var(--hd); background: #fff; border-radius: .5em; padding: .25em 1em; }
.sc-lk .head { display: flex; justify-content: space-between; align-items: baseline; padding: 1.1em 1.5em .8em; }
.sc-lk .head b { font-weight: 700; color: var(--title); }
.sc-lk .head span { font-size: .85em; color: var(--hd); }
.sc-lk .row { display: grid; grid-template-columns: 1fr auto auto; gap: 1.2em; align-items: center; padding: .9em 1.5em; border-top: 1px solid var(--line); }
.sc-lk .row span { color: var(--title); }
.sc-lk .row small { font-size: .85em; color: var(--hd); font-family: 'JetBrains Mono', monospace; }
.sc-lk .row em { font-style: normal; display: inline-flex; align-items: center; gap: .4em; padding: .3em .8em .3em .55em; border-radius: 999px; background: var(--ok); color: var(--acc); font-size: .85em; font-weight: 700; }
.sc-lk .row em::before { content: ""; width: .9em; height: .9em; border-radius: 50%; background: var(--acc); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4 10-10'/%3E%3C/svg%3E") center/70% no-repeat, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4 10-10'/%3E%3C/svg%3E") center/70% no-repeat, linear-gradient(#000 0 0); mask-composite: exclude; }

.hero-scene.no-anim .sc-lk { transition: none; }

/* Слои. A — передний план (z +60), B (z −90), C (z −220), D (z −360) — вглубь, темнее и мягче */
[data-state="1"] .sc-stack   { left: 54%; top: 5%;  transform: translateZ(60px) rotateX(16deg) rotateZ(0deg); --p: .55; opacity: 1; }
[data-state="2"] .sc-stack   { left: 66%; top: -2%; transform: translateZ(-90px) rotateX(16deg) rotateZ(7deg); --p: 1; opacity: 1; filter: brightness(.82) blur(1.2px); }
[data-state="3"] .sc-stack   { left: 74%; top: -6%; transform: translateZ(-220px) rotateX(16deg) rotateZ(11deg); --p: 1.5; opacity: 1; filter: brightness(.66) blur(3px); }
[data-state="4"] .sc-stack   { left: 80%; top: -8%; transform: translateZ(-360px) rotateX(16deg) rotateZ(15deg); --p: 2.1; opacity: 1; filter: brightness(.52) blur(5px); }

[data-state="2"] .sc-calc2   { left: 44%; top: 12%; transform: translateZ(60px) rotateX(16deg) rotateZ(-2deg); --p: .55; opacity: 1; }
[data-state="3"] .sc-calc2   { left: 52%; top: 2%;  transform: translateZ(-90px) rotateX(16deg) rotateZ(4deg); --p: 1; opacity: 1; filter: brightness(.82) blur(1.2px); }
[data-state="4"] .sc-calc2   { left: 60%; top: -4%; transform: translateZ(-220px) rotateX(16deg) rotateZ(8deg); --p: 1.5; opacity: 1; filter: brightness(.66) blur(3px); }

[data-state="3"] .sc-mail    { left: 46%; top: 14%; transform: translateZ(60px) rotateX(16deg) rotateZ(-2deg); --p: .55; opacity: 1; }
[data-state="4"] .sc-mail    { left: 58%; top: 6%;  transform: translateZ(-90px) rotateX(16deg) rotateZ(4deg); --p: 1; opacity: 1; filter: brightness(.82) blur(1.2px); }

[data-state="4"] .sc-lk      { left: 44%; top: 28%; transform: translateZ(60px) rotateX(16deg) rotateZ(-2deg); --p: .55; opacity: 1; }

[data-state="all"] .sc-stack   { left: 66%; top: -4%; transform: translateZ(-220px) rotateX(16deg) rotateZ(9deg); --p: 1.5; opacity: 1; filter: brightness(.8) blur(1.5px); }
[data-state="all"] .sc-calc2   { left: 40%; top: 10%; transform: translateZ(-60px) rotateX(16deg) rotateZ(-3deg); --p: 1; opacity: 1; }
[data-state="all"] .sc-mail    { left: 66%; top: 40%; transform: translateZ(20px) rotateX(16deg) rotateZ(2deg); --p: .7; opacity: 1; }
[data-state="all"] .sc-lk      { left: 38%; top: 60%; transform: translateZ(70px) rotateX(16deg) rotateZ(-1deg); --p: .5; opacity: 1; }


/* Узкий экран: сцена выше, на столе — одна карточка на шаг */
@media (max-width: 980px) {
  .hero-scene { grid-row: 4; aspect-ratio: auto; min-height: 0; height: auto; }
  .scene-media { position: relative; height: 470px; }
  .leads { top: 64px; width: min(22ch, 78%); }
  .lead { font-size: clamp(17px, 4.6vw, 20px); }
  .lead small { max-width: 34ch; }
  .desk { transform: perspective(1100px) rotateX(calc(5deg + var(--rx))) rotateY(var(--ry)); }
  .sc-stack { width: 84%; left: 30%; top: 100%; font-size: clamp(8px, 2.3cqw, 11px); }
  .sc-count { left: auto; right: 30px; top: auto; bottom: 16px; transform: translateZ(80px); }
  .sc-stack, .sc-calc2, .sc-mail, .sc-lk { will-change: auto; }
  .sc-calc2 { width: 90%; left: 5%; font-size: clamp(7.5px, 2.15cqw, 11px); }
  .sc-calc2 col.c1 { width: 30%; } .sc-calc2 col.c3 { width: 18%; } .sc-calc2 col.c4 { width: 20%; } .sc-calc2 col.c5 { width: 15%; } .sc-calc2 col.c6 { width: 17%; }
  .sc-calc2 .v { font-size: .85em; }
  .sc-calc2 .sum { font-size: 1.25em; }
  .sc-mail { width: 88%; left: 10%; font-size: clamp(8.5px, 2.5cqw, 11px); }
  .sc-lk { width: 90%; left: 8%; font-size: clamp(8.5px, 2.5cqw, 11px); }
  .sc-lk .row { grid-template-columns: 1fr auto; }
  .sc-lk .row small { display: none; }
  [data-state="1"] .sc-stack   { left: 16%; top: 44%; transform: translateZ(40px) rotateX(12deg) rotateZ(0deg); opacity: 1; }
  [data-state="2"] .sc-stack, [data-state="3"] .sc-stack, [data-state="4"] .sc-stack { left: -20%; top: 30%; transform: translateZ(-300px) rotateX(12deg) rotateZ(-10deg); opacity: 0; filter: none; }
  [data-state="2"] .sc-calc2   { left: 5%; top: 54%; transform: translateZ(40px) rotateX(12deg) rotateZ(-1deg); opacity: 1; }   /* ниже подписи шага 2 — она в четыре строки */
  [data-state="3"] .sc-calc2, [data-state="4"] .sc-calc2 { left: -30%; top: 30%; transform: translateZ(-300px) rotateX(12deg) rotateZ(-10deg); opacity: 0; filter: none; }
  [data-state="3"] .sc-mail    { left: 10%; top: 46%; transform: translateZ(40px) rotateX(12deg) rotateZ(-1deg); opacity: 1; }
  [data-state="4"] .sc-mail    { left: -30%; top: 30%; transform: translateZ(-300px) rotateX(12deg) rotateZ(-10deg); opacity: 0; filter: none; }
  [data-state="4"] .sc-lk      { left: 8%; top: 48%; transform: translateZ(40px) rotateX(12deg) rotateZ(-1deg); opacity: 1; }
  [data-state="all"] .sc-stack   { left: 20%; top: 36%; transform: translateZ(-200px) rotateX(12deg) rotateZ(-6deg); opacity: 1; filter: brightness(.9) blur(.3px); }
  [data-state="all"] .sc-calc2   { left: 6%; top: 46%; transform: translateZ(-60px) rotateX(12deg) rotateZ(-3deg); opacity: 1; }
  [data-state="all"] .sc-mail    { left: 12%; top: 60%; transform: translateZ(20px) rotateX(12deg) rotateZ(-1deg); opacity: 1; }
  [data-state="all"] .sc-lk      { left: 8%; top: 74%; transform: translateZ(70px) rotateX(12deg) rotateZ(0deg); opacity: 1; }
}
@media (max-width: 560px) {
  .scene-steps { left: 14px; top: 14px; gap: 5px; }
  .scene-step { padding-right: 10px; }
  .scene-step:not(.is-on) { padding-right: 5px; }
  .scene-step:not(.is-on) span { display: none; }                          /* у неактивных шагов только номер */
  .leads { left: 16px; }
}