/* ============================================================================
   HERO 3D — экран ноутбука: ЖИВОЙ HTML (CSS3D).
   ДИЗАЙН СТРАНИЦЫ SCREEN, итерация 10:
   · СЕКЦИЯ 1 — белый hero в духе osmo.supply: чистая центрированная
     типографика + крутящееся КОЛЕСО КАДРОВ внизу (вращение привязано к скроллу).
   · СЕКЦИЯ 2 — тёмная (#121212), остаётся тёмной до конца скроллинга.
   · МАСШТАБ: компактная типографика — это небольшой экран 3D-ноутбука,
     а не полноценная страница. Никаких гигантских кеглей и жирных весов.
   · АКЦЕНТЫ: НИКАКОГО синего; кислотный (--acid) — ТОЛЬКО
     на тёмном фоне. Сплошной заливки акцентом нет нигде.
   ПРОИЗВОДИТЕЛЬНОСТЬ: без blur-фильтров и фоновых бесконечных анимаций
   (единственное исключение — крошечный SVG-индикатор скролла 40×44).
   ========================================================================== */

/* --------- СЦЕНА ------------------------------------------------------- */
.hero3d-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: #000; /* v46: абсолютно чёрный фон */
}

/* МОНТАЖНАЯ СКЛЕЙКА (ICOMAT.CO.UK/MANIFESTO).
   ОДИН круг из-под нижней кромки: белое ядро в ОЧЕНЬ широком синем ореоле.
   Никакого отдельного «блика снизу» — весь синий живёт только внутри этого
   градиента, поэтому и уходит он целиком, не оставляя синевы у нижней кромки.

   Все опорные точки заданы В ДОЛЯХ радиуса (--r), поэтому градиент не
   «сжимается» при росте круга: переход белое → синее → прозрачное всегда
   растянут на ~2.9 радиуса. Отсюда нет ни контраста, ни видимых границ
   цвета, ни ступенчатых артефактов на картинке.

   Геометрия одна и та же у двух слоёв:
     .h3-scene-switch — ПОД холстом, меняет фон сцены;
     .h3-scene-wipe   — НАД холстом и CSS3D, физически прячет ноутбук на склейке.
   Радиус (--r, в vmax) и насыщенность синевы (--blue) пишет один обратимый
   таймлайн из hero3d.js. */
.h3-scene-switch,
.h3-scene-wipe {
    --r: 0;
    --blue: 1;
    /* ЦЕНТР КРУГА — НИЖЕ КАДРА. Отдельная переменная, а не константа 116%:
       её же читает расчёт негатива navbar в hero3d.js, и два места обязаны
       двигаться синхронно. Круг зарождается и раздувается ЗА нижней кромкой,
       поэтому «маленькой точки» в кадре не видно вообще. */
    --cy: 132%;
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    will-change: opacity, background;
}

/* ============ СЛОЙ 1: ФОН СЦЕНЫ (под холстом) ============================
   Здесь и ТОЛЬКО здесь живёт синева. Слой лежит НА чёрном .hero3d-bg и
   ничего собой не закрывает, поэтому может быть полностью непрозрачным.

   ЭТО ЕДИНСТВЕННЫЙ СЛОЙ КРУГА, и в нём НЕТ НИКАКОГО СВЕЧЕНИЯ. Эллипс
   --bloom, лежавший поверх кольца белым ядром у нижней кромки, удалён
   целиком: он подмешивал белое ПЕРЕД синевой и убивал сам акцент на синем
   («убирай уже наконец это грязное свечение перед синевой»). Теперь порядок
   строго такой, как и требовалось: СНАЧАЛА СИНИЙ край, и только ЗА ним,
   внутри круга, белое ядро.

   ГРАДАЦИЯ СИНЕГО ПО ТРЕБОВАНИЮ — тон зависит от того, с чем синева граничит:
     · по ВНУТРЕННЕМУ краю (там, где она прилегает к БЕЛОМУ) — МЯГКИЙ,
       разбавленный тон: пастельная дымка, без резкого захода в насыщенность;
     · в СЕРЕДИНЕ полосы и особенно там, где синева граничит с ЧЁРНЫМ (то
       есть ровно во время переключения) — ГЛУБОКИЙ, плотный цвет.
   Вся дорожка при этом на несколько тонов НИЖЕ прежней: самый светлый стоп
   был rgb(180,214,235) — стал rgb(158,186,206); самый насыщенный был
   rgb(78,138,188) — стал rgb(38,84,128). Синева читается, но не «ахренеть
   какого яркого цвета».

   ЧИСТОТА ЦВЕТА БЕЗ БЕЛОЙ ПОДЛОЖКИ. Полупрозрачная синь на чёрном даёт
   мутно-серый — поэтому альфа в самом кольце НЕ используется как способ
   растворения. Вся дорожка НЕПРОЗРАЧНА и уходит ЦВЕТОМ в цвет самой сцены
   (#050507, см. .hero3d-bg), сохраняя синий тон. Альфа падает в ноль лишь на
   последнем отрезке (1.86 … 1.98·r), где цвет УЖЕ равен фону: смешивать там
   нечего и «грязь» на границе с чёрным физически не возникает.

     · 0 … 0.86·r  — чистый белый: середина круга.
     · 0.86 … 1.04 — белый уходит в МЯГКИЙ приглушённый голубой.
     · 1.04 … 1.34 — САМА СИНЕВА, край круга: тон УГЛУБЛЯЕТСЯ наружу.
     · 1.34 … 1.98 — глубокий навий темнеет в цвет сцены.                     */
.h3-scene-switch {
    background:
        /* ВЫБЕЛИВАНИЕ КОЛЬЦА НА ВЫХОДЕ. --blue — не альфа синевы, а «сколько
           синевы осталось»; гасить её альфой значило бы проявлять сквозь неё
           чёрный фон (та самая грязь). Вместо этого поверх кольца лежит белая
           вуаль с альфой (1 − blue): синева не темнеет в серость, а выцветает
           в белый — «синева растворяется и ей на смену приходит белый фон».

           КРИТИЧНО: вуаль обрезана ТЕМИ ЖЕ радиусами, что и кольцо
           (1.86 … 1.98·r). Поэтому белое физически не может оказаться
           СНАРУЖИ синего края — по краю только синева. К концу склейки
           blue = 0 и r огромен, так что вуаль кроет весь кадр ровным белым. */
        radial-gradient(circle 300vmax at 50% var(--cy),
            rgba(255,255,255, calc(1 - var(--blue))) 0%,
            rgba(255,255,255, calc(1 - var(--blue))) calc(var(--r) * 1.86vmax),
            rgba(255,255,255, 0) calc(var(--r) * 1.98vmax)),
        /* САМО КОЛЬЦО — статичные непрозрачные стопы: белое ядро → мягкий
           голубой у белого → глубокая синь у чёрного → цвет сцены. */
        radial-gradient(circle 300vmax at 50% var(--cy),
            #ffffff 0%,
            #ffffff calc(var(--r) * 0.86vmax),
            /* --- мягкий тон: синева ПРИЛЕГАЕТ К БЕЛОМУ --- */
            rgb(240,245,249) calc(var(--r) * 0.90vmax),
            rgb(223,233,241) calc(var(--r) * 0.94vmax),
            rgb(199,215,229) calc(var(--r) * 0.99vmax),
            rgb(158,186,206) calc(var(--r) * 1.04vmax),
            /* --- углубление: дальше от белого, ближе к чёрному --- */
            rgb(126,160,187) calc(var(--r) * 1.09vmax),
            rgb(100,138,171) calc(var(--r) * 1.14vmax),
            rgb(78,118,155)  calc(var(--r) * 1.19vmax),
            rgb(58,99,139)   calc(var(--r) * 1.25vmax),
            /* --- ГЛУБОКИЙ цвет: граница с ЧЁРНЫМ, момент переключения --- */
            rgb(38,84,128)   calc(var(--r) * 1.34vmax),
            rgb(28,66,105)   calc(var(--r) * 1.42vmax),
            rgb(20,50,82)    calc(var(--r) * 1.50vmax),
            rgb(14,37,62)    calc(var(--r) * 1.58vmax),
            rgb(9,25,44)     calc(var(--r) * 1.66vmax),
            rgb(6,15,28)     calc(var(--r) * 1.74vmax),
            rgb(5,7,13)      calc(var(--r) * 1.81vmax),
            rgb(5,5,7)       calc(var(--r) * 1.86vmax),
            rgba(5,5,7, 0)   calc(var(--r) * 1.98vmax));
}

/* ============ СЛОЙ 2: ЗАЛИВКА ПОВЕРХ НОУТБУКА (z7) =======================
   Этот слой лежит НАД холстом и CSS3D. Раньше он был «чистым светом»: белое
   ядро с длинным спадом АЛЬФЫ до 1.24·r. Именно он и давал белое СНАРУЖИ
   синего края — полупрозрачная белая кайма выходила за синий ореол слоя 1 и
   ложилась на чёрный кадр («никакого белого цвета не должно быть за
   пределами синевы»). Плюс тот же эллипс --bloom подсвечивал кадр белым ДО
   прихода синевы.

   Теперь слой 2 — ТОТ ЖЕ САМЫЙ КРУГ, что и слой 1, с теми же радиусами и
   теми же тонами: белое ядро → мягкий голубой → глубокая синь. Никакого
   свечения и никакой белой каймы. Наружу уходит не белое, а ГЛУБОКАЯ СИНЬ,
   и уходит она АЛЬФОЙ — в зоне, где цвет уже почти равен цвету сцены
   (rgb(5,5,7)), поэтому по краю не возникает ни ореола, ни грязи.

   Ноутбук этот слой больше не «выключает»: он растворяется в круге
   собственной прозрачностью (см. postClosePose/dissolve в hero3d.js), а
   круг просто приходит поверх.                                             */
.h3-scene-wipe {
    background:
        radial-gradient(circle 300vmax at 50% var(--cy),
            rgba(255,255,255, calc(1 - var(--blue))) 0%,
            rgba(255,255,255, calc(1 - var(--blue))) calc(var(--r) * 1.34vmax),
            rgba(255,255,255, 0) calc(var(--r) * 1.52vmax)),
        radial-gradient(circle 300vmax at 50% var(--cy),
            rgb(255,255,255) 0%,
            rgb(255,255,255) calc(var(--r) * 0.86vmax),
            rgb(240,245,249) calc(var(--r) * 0.90vmax),
            rgb(223,233,241) calc(var(--r) * 0.94vmax),
            rgb(199,215,229) calc(var(--r) * 0.99vmax),
            rgb(158,186,206) calc(var(--r) * 1.04vmax),
            rgb(126,160,187) calc(var(--r) * 1.09vmax),
            rgb(100,138,171) calc(var(--r) * 1.14vmax),
            rgb(78,118,155)  calc(var(--r) * 1.19vmax),
            rgb(58,99,139)   calc(var(--r) * 1.25vmax),
            rgb(38,84,128)   calc(var(--r) * 1.34vmax),
            /* дальше уходим АЛЬФОЙ, оставаясь в глубоком синем: за краем
               круга кадр обязан остаться нетронутым */
            rgba(28,66,105, .92) calc(var(--r) * 1.42vmax),
            rgba(20,50,82, .70)  calc(var(--r) * 1.50vmax),
            rgba(14,37,62, .44)  calc(var(--r) * 1.58vmax),
            rgba(9,25,44, .22)   calc(var(--r) * 1.66vmax),
            rgba(6,15,28, .08)   calc(var(--r) * 1.74vmax),
            rgba(5,5,7, 0)       calc(var(--r) * 1.82vmax));
}

/* ДИЗЕРИНГ. Градиент такой ширины 8-битный буфер отрисовывает полосами —
   именно они и читаются как «артефакты на картинке». Тончайший шум поверх
   разбивает полосы в равномерное зерно; текстура 180×180 тайлится, поэтому
   стоит примерно ничего. */
.h3-scene-switch::after,
.h3-scene-wipe::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .5;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
    background-size: 180px 180px;
}

/* СЛОЙ ВСПЫШКИ УДАЛЁН НАМЕРЕННО.
   Здесь была `.h3-scene-flash` — сплошная белая заливка на весь кадр плюс
   пересвеченное ядро снизу, поверх ВСЕГО (z8). Она и была главным источником
   «грязного свечения перед синевой»: белое приходило в кадр РАНЬШЕ круга и
   гасило акцент на синем, а на пике заливала белым в том числе зону СНАРУЖИ
   синего края. Оба этих требования её прямо запрещают.

   Растворение ноутбука теперь делается не вспышкой, а честно: материалы
   модели и DOM-слои экрана уводятся в прозрачность (dissolve в hero3d.js),
   пока круг наползает поверх. Элемент в JS больше не создаётся — если он
   вдруг остался в DOM от старого кэша, он обязан быть невидим. */
.h3-scene-flash { display: none !important; }

.h3-scene-switch { z-index: 0; }

/* Выше #hero3dCanvas (z1), .hero3d-css3d (z2), .h3-screen-glow (z5)
   и .h3-hero-vignette (z6) — иначе ноутбук не перекрыть. */
.h3-scene-wipe { z-index: 7; }

#hero3dCanvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

/* CSS3D-слой с живым HTML-экраном поверх WebGL */
.hero3d-css3d {
    position: absolute !important;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}
.hero3d-css3d .scr {
    pointer-events: auto;
}

/* ------------------------------ ЭКРАН ------------------------------------ */
.scr {
    --ink: #0F0F10;    /* строгий чёрный */
    --mut: #7A7C82;    /* вторичный серый */
    --hair: #E3E4E8;   /* тонкая линия */
    --dark: #121212;   /* тёмная секция */
    --acid: #B7FF00;   /* кислотный акцент — ТОЛЬКО на тёмном фоне */
    position: relative;
    overflow: hidden;
    background: #FFFFFF; /* после помех фон снова белый */
    color: var(--ink);
    font-family: 'Gilroy', system-ui, sans-serif;
    opacity: 0;
    -webkit-user-select: none;
    user-select: none;
    /* ЧЁТКОСТЬ: никаких filter на .scr — иначе браузер растрирует CSS3D-слой
       в низком разрешении (пиксельное месиво). */
    contain: layout paint;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.scr a,
.scr button,
.scr .scr-card,
.scr .scr-videowrap { cursor: pointer; }

.scr-page {
    position: absolute;
    inset: 0 0 auto 0;
    will-change: transform;
}

/* --------------------------- СЕКЦИИ ЭКРАНА ------------------------------ */
.scr-s {
    /* СТОПКА КАРТОЧЕК: все секции лежат в одной точке, позицию задаёт
       только transform из updateScreenScroll (следующая ждёт ЗА нижней
       кромкой и заезжает поверх только после полного просмотра) */
    position: absolute;
    top: 0; left: 0; right: 0;
    will-change: transform;
    height: var(--scr-h, 1657px);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
    contain: layout paint;
}

/* появление/исчезновение + параллакс: ТОЛЬКО opacity/transform —
   никаких blur-фильтров, они роняли кадры на большом экране */
.scr-s .p1, .scr-s .p2, .scr-s .p3 {
    opacity: 0;
    transition: opacity .7s ease;
}
.scr-s .p1 { transform: translateY(calc(var(--par, 0) * -60px)); }
.scr-s .p2 { transform: translateY(calc(var(--par, 0) * -130px)); }
.scr-s .p3 { transform: translateY(calc(var(--par, 0) * -200px)); }
.scr-s.is-in .p1, .scr-s.is-in .p2, .scr-s.is-in .p3 {
    opacity: 1;
}

/* СТОПКА СЕКЦИЙ (scroll.js): входящая секция заезжает поверх предыдущей
   РОВНЫМ ПРЯМЫМ ЛИСТОМ СТРОГО после полного просмотра — без скруглённых
   углов и без раннего выглядывания снизу. Transform и z-index пишет
   updateScreenScroll; накрытая секция притемняется через --exit ниже. */
.scr-s::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #000;
    opacity: calc(var(--exit, 0) * .42);
    pointer-events: none;
}

/* ---------------------- СЕКЦИЯ 1: БЕЛЫЙ HERO (theqream + osmo) ----------
   Начало страницы = theqream.com, только на БЕЛОМ фоне: гигантская строгая
   типографика по центру, НИКАКИХ навбаров и лишних надписей.
   Ниже — КОЛЕСО КАРТОЧЕК с osmo.supply: крутится ТОЛЬКО САМО. */
.scr-hero {
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: 54px;
    padding: 124px 150px 0;
    background: #FFFFFF;
}

.scr-h1 {
    margin: 0;
    font-size: 152px;
    line-height: 1.03;
    font-weight: 500;
    letter-spacing: .008em;
    text-transform: uppercase;
    color: var(--ink);
}

.scr-sub {
    margin: 0;
    max-width: 1260px;
    font-size: 32px;
    line-height: 1.5;
    font-weight: 500;
    color: #55575D;
}

.scr-ctarow {
    display: flex;
    align-items: center;
    gap: 26px;
}
.scr-cta {
    font-family: inherit;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: .12em;
    color: #fff;
    background: var(--ink);
    border: 1px solid var(--ink);
    border-radius: 100px; /* пилюля, как у osmo */
    padding: 32px 68px;
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease, color .25s ease,
                transform .25s ease, box-shadow .25s ease;
}
.scr-cta:hover {
    background: var(--acid);
    border-color: var(--acid);
    color: var(--ink);
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(183, 255, 0, .35);
}
.scr-cta:active { transform: translateY(0) scale(.98); }

/* ------------------- КОЛЕСО КАРТОЧЕК (в точности osmo.supply) -----------
   18 карточек на невидимом диске R=1580px с НОРМАЛЬНЫМ зазором (~95px);
   диск ПОДНЯТ ближе к тексту и крутится ТОЛЬКО САМ (--wheel из rAF) —
   на скролл не реагирует ВООБЩЕ. */
.scr-wheelwrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1080px;
    overflow: hidden;
    pointer-events: none; /* сам слой клики не ест — кликабельны КАРТОЧКИ */
}
.scr-wheel {
    position: absolute;
    left: 50%;
    top: 2010px; /* центр диска под кадром: дуга ПОДНЯТА к тексту сверху */
    width: 0;
    height: 0;
    transform: rotate(calc(var(--wheel, 0) * 1deg));
    will-change: transform;
}
.scr-card {
    position: absolute;
    left: -230px;
    top: -150px;
    width: 460px;
    height: 300px;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: var(--dark);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 24px; /* мягкие скругления, как у osmo */
    transform: rotate(calc(var(--i, 0) * 20deg)) translateY(-1580px);
    transition: transform .35s cubic-bezier(.22, .61, .36, 1), border-color .3s ease;
    pointer-events: auto;
    cursor: pointer;
}
.scr-card:hover {
    transform: rotate(calc(var(--i, 0) * 20deg)) translateY(-1606px);
    border-color: rgba(255, 255, 255, .3);
}
.scr-card:active {
    transform: rotate(calc(var(--i, 0) * 20deg)) translateY(-1592px) scale(.985);
}
.scr-card figcaption {
    font-size: 17px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #E9EAEC;
    text-align: left;
}

/* CSS-арт карточек — без единой картинки, ноль запросов в сеть */
.scr-cardart {
    display: block;
    flex: 1;
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .07);
    background: #17181B;
}
.scr-cardart::after {
    content: '';
    position: absolute;
    inset: 0;
}
.scr-cardart.art1::after { background: radial-gradient(circle at 32% 36%, rgba(183, 255, 0, .30), transparent 58%); }
.scr-cardart.art2::after {
    background: linear-gradient(0deg, rgba(183, 255, 0, .22) 0 34%, transparent 34%) 12% 100% / 14% 60% no-repeat,
                linear-gradient(0deg, rgba(255, 255, 255, .16) 0 62%, transparent 62%) 38% 100% / 14% 82% no-repeat,
                linear-gradient(0deg, rgba(183, 255, 0, .34) 0 88%, transparent 88%) 64% 100% / 14% 95% no-repeat,
                linear-gradient(0deg, rgba(255, 255, 255, .12) 0 46%, transparent 46%) 90% 100% / 14% 70% no-repeat;
}
.scr-cardart.art3::after {
    background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .13) 0 3px, transparent 3px 26px) 50% 32px / 62% 60% no-repeat,
                radial-gradient(circle at 82% 82%, rgba(183, 255, 0, .25), transparent 45%);
}
.scr-cardart.art4::after {
    background: repeating-radial-gradient(circle at 50% 55%, transparent 0 26px, rgba(183, 255, 0, .16) 26px 28px);
}
.scr-cardart.art5::after {
    background: linear-gradient(90deg, transparent 0 32%, rgba(255, 255, 255, .12) 32% 33%, transparent 33% 66%, rgba(255, 255, 255, .12) 66% 67%, transparent 67%),
                linear-gradient(0deg, transparent 0 32%, rgba(255, 255, 255, .12) 32% 33%, transparent 33% 66%, rgba(255, 255, 255, .12) 66% 67%, transparent 67%),
                radial-gradient(circle at 50% 50%, rgba(183, 255, 0, .22), transparent 40%);
}
.scr-cardart.art6::after {
    background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .10) 0 4px, transparent 4px 30px),
                radial-gradient(circle at 22% 22%, rgba(183, 255, 0, .22), transparent 42%);
}
/* v71: настоящие скриншоты Workflow вместо CSS-арта (assets/images/app/*_s.webp) */
.scr-cardart.shot {
    background-color: #F4F4F2;
    background-size: cover;
    background-position: left top;
    background-repeat: no-repeat;
}
.scr-cardart.shot::after { background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, .16)); }

/* ------------- СЕКЦИЯ 2: КИСЛОТНАЯ ВЫГОДА (scroll.js: свой цвет) --------- */
.scr-pitch {
    background: var(--acid);
    color: var(--ink);
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 120px;
    padding: 0 150px;
}
.scr-ph {
    margin: 0;
    max-width: 2050px;
    font-size: 128px;
    line-height: 1.06;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--ink);
}
.scr-stats {
    display: flex;
    gap: 170px;
    justify-content: center;
}
.scr-stat b {
    display: block;
    font-size: 112px;
    font-weight: 500;
    line-height: 1;
    color: var(--ink);
}
.scr-stat span {
    display: block;
    margin-top: 20px;
    font-size: 27px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(15, 15, 16, .6);
}

/* ------------- СЕКЦИЯ 3: ТЁМНАЯ — МОДУЛИ (theqream.com) ----------- */
.scr-drops {
    background: #0B0B0D;
    color: #F2F3F5;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 150px;
}
.scr-h2 {
    margin: 0;
    max-width: 2000px;
    font-size: 84px;
    line-height: 1.12;
    font-weight: 500;
    letter-spacing: .005em;
    text-transform: uppercase;
    color: #FFFFFF;
}

/* лента модулей — строка дропов theqream (скриншот 2) */
.scr-thumbs {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 26px;
    width: 100%;
    margin-top: 110px;
}
.scr-thumb {
    margin: 0;
    cursor: pointer;
    text-align: left;
}
.scr-thumb .scr-cardart {
    height: 240px;
    border-radius: 8px;
    transition: transform .3s ease, border-color .3s ease;
}
.scr-thumb:hover .scr-cardart {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, .3);
}
.scr-thumb:active .scr-cardart { transform: translateY(-3px) scale(.985); }
.scr-thumb figcaption {
    margin-top: 18px;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #C9CACF;
}

/* ------------- СЕКЦИЯ 4: ГРАФИТ — КЕЙСЫ КАРУСЕЛЬЮ (theqream.com) ------
   Блоки НОРМАЛЬНОЙ высоты (800px, не приплюснутые), листаются ТОЛЬКО
   кнопками НАЗАД/ДАЛЬШЕ — горизонтальный скролл, как у theqream. */
.scr-show {
    background: #17171B;
    color: #F2F3F5;
    align-items: stretch;
    justify-content: center;
    text-align: left;
    padding: 0 130px;
}
.scr-showhead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 60px;
}
.scr-show .scr-h2 {
    max-width: 1560px;
    text-align: left;
}
.scr-nav {
    display: flex;
    gap: 22px;
    flex: 0 0 auto;
}
.scr-navbtn {
    font-family: inherit;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: .1em;
    color: #fff;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, .28);
    border-radius: 100px;
    padding: 26px 50px;
    cursor: pointer;
    transition: background .25s ease, color .25s ease, border-color .25s ease,
                opacity .25s ease, transform .25s ease;
}
.scr-navbtn:hover {
    background: var(--acid);
    border-color: var(--acid);
    color: var(--ink);
    transform: translateY(-2px);
}
.scr-navbtn:active { transform: translateY(0) scale(.97); }
.scr-navbtn.is-off { opacity: .3; pointer-events: none; }

.scr-caro {
    overflow: hidden;
    width: 100%;
    margin-top: 90px;
}
.scr-carotrack {
    display: flex;
    gap: 40px;
    width: max-content;
    transition: transform .7s cubic-bezier(.22, .7, .2, 1);
    will-change: transform;
}
.scr-case {
    margin: 0;
    width: 1130px;
    flex: 0 0 auto;
}
.scr-caseview {
    position: relative;
    height: 800px; /* НОРМАЛЬНАЯ высота — никаких приплюснутых блоков */
    background: #101013;
    border: 1px solid rgba(255, 255, 255, .08);
    overflow: hidden; /* острые углы — никаких радиусов, как у theqream */
    transition: border-color .3s ease, transform .3s ease;
}
.scr-case:hover .scr-caseview {
    border-color: rgba(255, 255, 255, .28);
    transform: translateY(-6px);
}
.scr-case-video { cursor: none; } /* вместо курсора — кастомный play */
.scr-prevideo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.scr-case figcaption {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    margin-top: 26px;
}
.scr-case figcaption span {
    font-size: 26px;
    font-weight: 500;
    line-height: 1.4;
    color: #D9DADE;
}
.scr-case figcaption i {
    font-style: normal;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: .3em;
    color: var(--acid); /* кислота — ТОЛЬКО на тёмном фоне */
    flex: 0 0 auto;
}

/* метрики-кейс */
.scr-data {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px 60px;
    align-content: center;
    height: 100%;
    padding: 70px 80px;
    box-sizing: border-box;
}
.scr-datum b {
    display: block;
    font-size: 104px;
    font-weight: 500;
    line-height: 1;
    color: var(--acid);
}
.scr-datum span {
    display: block;
    margin-top: 16px;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #B9BBC1;
}

/* цитата-кейс (отзыв) */
.scr-quote {
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 80px 90px;
    box-sizing: border-box;
    font-size: 60px;
    line-height: 1.3;
    font-weight: 500;
    color: #FFFFFF;
}

/* ------------------------- ВИДЕО-РЕЖИМ ЭКРАНА -------------------------- */
.scr-videowrap {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    background: #fff; /* после помех фон снова белый */
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s ease, visibility 0s linear .4s;
    cursor: none; /* вместо курсора — кастомный play */
}
.scr.mode-video .scr-videowrap {
    opacity: 1;
    visibility: visible;
    transition: opacity .4s ease;
}
.scr.mode-video .scr-page {
    opacity: 0;
    transition: opacity .3s ease;
}
/* клоны страницы ВНУТРИ полос разрыва НЕ гасим: рвётся именно страница
   с её содержимым, а не пустой белый фон */
.scr.mode-video .scr-tear .scr-page { opacity: 1; }
.scr-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.scr-vhead {
    font-size: 42px;
    font-weight: 400;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--mut);
}
.scr-vhead em {
    font-style: normal;
    font-weight: 500;
    color: var(--ink);
}
.scr-vcard {
    width: 62%;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--ink);
    border-radius: 0; /* острые углы */
    overflow: hidden;
    background: #000;
}
.scr-vcap {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--mut);
}

/* ------------------------------- ГЛИТЧ ----------------------------------- */
.scr-glitchcanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.scr-glitchcanvas.is-on {
    opacity: 1;
    visibility: visible;
}
.g-sl {
    position: absolute;
    left: -10%;
    width: 120%;
    height: 7%;
    background: rgba(255, 255, 255, .10);
    mix-blend-mode: screen;
}
.scr.glitching .g-sl { animation: gSlice .5s steps(8) both; }
.g-sl:nth-child(1) { top: 8%; animation-delay: 0s; }
.g-sl:nth-child(2) { top: 24%; animation-delay: .04s; height: 4%; }
.g-sl:nth-child(3) { top: 41%; animation-delay: .08s; height: 10%; }
.g-sl:nth-child(4) { top: 58%; animation-delay: .02s; height: 5%; }
.g-sl:nth-child(5) { top: 72%; animation-delay: .06s; }
.g-sl:nth-child(6) { top: 88%; animation-delay: .1s; height: 4%; }
.g-logo {
    width: 38%;
    max-height: 40%;
    object-fit: contain;
    filter: drop-shadow(0 0 40px rgba(255,255,255,.35));
}
.scr.glitching .g-logo { animation: gLogo .5s steps(10) both; }
@keyframes gFlash {
    0% { opacity: 0; }
    8% { opacity: 1; }
    88% { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
}
@keyframes gSlice {
    0% { transform: translateX(-6%) scaleY(1); opacity: .1; }
    25% { transform: translateX(5%) scaleY(1.6); opacity: .5; }
    50% { transform: translateX(-4%) scaleY(.6); opacity: .25; }
    75% { transform: translateX(7%) scaleY(1.3); opacity: .6; }
    100% { transform: translateX(-3%) scaleY(1); opacity: .12; }
}
@keyframes gLogo {
    0% { transform: translate(0, 0) skewX(0); opacity: 0; }
    15% { transform: translate(-14px, 3px) skewX(6deg); opacity: 1; }
    35% { transform: translate(10px, -5px) skewX(-8deg); opacity: .7; }
    55% { transform: translate(-7px, 2px) skewX(3deg); opacity: 1; }
    78% { transform: translate(12px, -2px) skewX(-5deg); opacity: .85; }
    100% { transform: translate(0, 0) skewX(0); opacity: 1; }
}

/* --------------------- ГАШЕНИЕ ЭКРАНА + «СВЕРХНОВАЯ» -------------------- */
.scr-off {
    position: absolute;
    inset: 0;
    z-index: 7;
    background: #000;
    opacity: 0;
    pointer-events: none; /* ЧИНИТ ИНТЕРАКТИВНОСТЬ: слой больше не перехватывает клики */
}
.scr-nova {
    position: absolute;
    inset: 0;
    z-index: 8;
    pointer-events: none;
    opacity: 0;
}

/* Лёгкая глобальная виньетка внизу хиро-кадра — заметно СВЕТЛЕЕ прежней */
.h3-hero-vignette {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    opacity: 0;
    /* ВИГНЕТКА ОТКЛЮЧЕНА (v34): затемнение портило картинку Screen HTML */
    display: none !important;
    background: none;
}

/* Очень лёгкое СВЕЧЕНИЕ включённого монитора: экран «гори��» и еле-еле
   подсвечивает кадр холодным светом. Прозрачность выставляет hero3d.js
   пропорционально реальной яркости экрана (максимум ~0.16). */
.h3-screen-glow {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    transition: opacity .6s ease;
    background: radial-gradient(44% 32% at 50% 46%, rgba(214, 228, 255, .5) 0%, rgba(214, 228, 255, .16) 46%, rgba(214, 228, 255, 0) 72%);
    mix-blend-mode: screen;
}

/* --------------- НАСТОЯЩИЙ HDR-РЕФЛЕКС ПОВЕРХ ЖИВОЙ СТРАНИЦЫ ------------
   background-image сюда кладёт hero3d.js: офскрин-рендер настоящей studio.hdr
   (PMREM) на стеклянной плоскости с тем же градиентом глянца, что у 3D-стекла.
   НИКАКИХ CSS-градиентов и рисованных бликов. */
.scr-page-reflection {
    position: absolute;
    inset: 0;
    z-index: 7;
    pointer-events: none;
    opacity: 0;
    transition: opacity .6s ease;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.scr-page-reflection.is-on { opacity: calc(var(--refl, 1) * 0.17); }
.scr-page-reflection.is-on.is-dark { opacity: calc(var(--refl, 1) * 0.85); }

/* --------------------------- PLAY-КУРСОР ----------------------------------
   Строгий белый квадрат с чёрным треугольником — появляется
   ВМЕСТО курсора при наведении на видео. Без кислоты. */
.hero3d-playcursor {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1200;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid #0F0F10;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.4);
    transition: opacity .28s ease;
    box-shadow: 0 14px 60px rgba(0, 0, 0, .5);
}
.hero3d-playcursor.is-on { opacity: 1; }
.hero3d-playcursor svg {
    width: 24px;
    height: 24px;
    fill: #0F0F10;
    margin-left: 4px;
}

/* ------------------------- МОДАЛЬНЫЙ ПЛЕЕР ------------------------------ */
.hero3d-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .45s ease, visibility 0s linear .45s;
}
.hero3d-modal.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity .45s ease;
}
.hero3d-modal-back {
    position: absolute;
    inset: 0;
    background: rgba(1, 1, 3, .88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.hero3d-modal-frame {
    position: relative;
    width: min(1180px, 86vw);
    border-radius: 0; /* строгие углы */
    overflow: hidden;
    background: #000;
    box-shadow: 0 40px 160px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .08);
    transform: translateY(26px) scale(.965);
    transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.hero3d-modal.is-open .hero3d-modal-frame { transform: translateY(0) scale(1); }
.hero3d-modal-frame video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    cursor: pointer;
}
.hero3d-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.hero3d-modal-close:hover { background: #B7FF00; color: #0F0F10; } /* кислота — на тёмном плеере */

.hero3d-player {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    background: linear-gradient(transparent, rgba(0, 0, 0, .78));
    opacity: 0;
    transition: opacity .3s ease;
}
.hero3d-modal-frame:hover .hero3d-player,
.hero3d-modal:not(.is-playing) .hero3d-player { opacity: 1; }
.hp-play, .hp-mute {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, .14);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transition: background .2s ease;
}
.hp-play:hover, .hp-mute:hover { background: #B7FF00; }
.hp-play:hover svg, .hp-mute:hover svg { fill: #0F0F10; }
.hp-play svg, .hp-mute svg { width: 20px; height: 20px; fill: #fff; transition: fill .2s ease; }
.hp-i-pause { display: none; }
.hero3d-modal.is-playing .hp-i-pause { display: block; }
.hero3d-modal.is-playing .hp-i-play { display: none; }
.hp-mute.is-muted { opacity: .45; }
.hp-seek {
    position: relative;
    flex: 1;
    height: 26px;
    cursor: pointer;
}
.hp-seek::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 3px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .18);
}
.hp-seek-fill {
    position: absolute;
    left: 0;
    top: 50%;
    height: 3px;
    width: 0;
    transform: translateY(-50%);
    background: #B7FF00; /* акцентный прогресс на тёмном плеере */
    pointer-events: none;
}
.hp-seek-dot {
    position: absolute;
    top: 50%;
    left: 0;
    width: 11px;
    height: 11px;
    background: #B7FF00;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
}
.hp-seek:hover .hp-seek-dot { opacity: 1; }
.hp-time {
    font-family: 'Gilroy', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, .8);
    flex: 0 0 auto;
    min-width: 44px;
    text-align: center;
}

/* --------------------------- ПАНЕЛЬ НАСТРОЕК ----------------------------- */
.hero3d-gui {
    position: fixed !important;
    top: 90px !important;
    right: 18px !important;
    z-index: 1400 !important;
    font-family: 'Gilroy', system-ui, sans-serif !important;
}

/* ------------------------ ДОСТУПНОСТЬ ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .scr-s .p1, .scr-s .p2, .scr-s .p3 { transition: none; transform: none; }
    .scr-glitchcanvas { display: none; }
    .scr-carotrack { transition: none; }
    .h3edge { transition: none; }
    /* Склейку не убираем (без неё фон остался бы тёмным), но снимаем
       will-change и лишние блики — остаётся спокойная смена фона. */
    .h3-scene-switch, .h3-scene-wipe { transition: none; will-change: auto; }
    /* Блик оставляем (он и делает смену кадра читаемой), но снимаем
       will-change — компоновать отдельный слой каждый кадр незачем. */
    .h3-scene-flash { transition: none; will-change: auto; }
    /* Шумовой дизеринг не нужен, когда движения нет — статичный кадр
       и без него не забанжен. */
    .h3-scene-switch::after, .h3-scene-wipe::after { display: none; }
}

/* --------- МУЛЬТЯШНЫЕ «!!» ПРИ ПРЫЖКЕ (намеренно резкая анимация) ---- */
.hero3d-excl {
    position: fixed;
    top: 0; left: 0;
    z-index: 1250;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
    filter: drop-shadow(0 6px 22px rgba(0, 0, 0, .6));
}
.hero3d-excl.is-on { opacity: 1; }
.hero3d-excl .hx { position: absolute; display: block; }
.hero3d-excl .hx1 {
    width: 86px; height: 126px;
    transform: rotate(-24deg);
    animation: hxWob1 .148s steps(1) infinite;
}
.hero3d-excl .hx2 {
    width: 64px; height: 94px;
    left: 100px; top: -26px;
    transform: rotate(-6deg);
    animation: hxWob2 .148s steps(1) infinite;
}
.hero3d-excl .hx svg {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    overflow: visible;
}
.hero3d-excl .hx .f1 { animation: hxFrameA .148s steps(1) infinite; } /* 13.5 fps */
.hero3d-excl .hx .f2 { animation: hxFrameB .148s steps(1) infinite; }
@keyframes hxFrameA { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes hxFrameB { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes hxWob1 {
    0% { transform: rotate(-24deg) scale(1); }
    50% { transform: rotate(-31deg) scale(1.08); }
    100% { transform: rotate(-24deg) scale(1); }
}
@keyframes hxWob2 {
    0% { transform: rotate(-6deg) scale(1); }
    50% { transform: rotate(1deg) scale(.92); }
    100% { transform: rotate(-6deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .hero3d-excl { display: none; }
}

/* ---------- ОБВОДКА СВЕТА ПО КРАЯМ МОНИТОРА (интро, CSS3D-оверлей) ---------- */
.h3edge {
    position: relative;
    pointer-events: none !important;
    opacity: 1;
    transition: opacity 1.15s ease;
    will-change: opacity;
}
.h3edge svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, .55))
            drop-shadow(0 0 5px rgba(205, 222, 255, .18));
}
.h3edge .ep-band {
    fill: none;
    stroke-linecap: butt;
    stroke-linejoin: round;
}
.h3edge .ep-band-glow {
    stroke: rgba(220, 232, 255, .42);
    stroke-width: 2.6;
}
.h3edge .ep-band-core {
    stroke: #ffffff;
    stroke-width: 1.5;
}
.h3edge .ep-band-group {
    opacity: 0;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 25%, rgba(0,0,0,.75) 55%, rgba(0,0,0,.55) 80%, rgba(0,0,0,.4) 93%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 25%, rgba(0,0,0,.75) 55%, rgba(0,0,0,.55) 80%, rgba(0,0,0,.4) 93%, transparent 100%);
}
.h3edge.h3edge-burst svg {
    filter: drop-shadow(0 0 2.5px rgba(255, 255, 255, .7))
            drop-shadow(0 0 8px rgba(205, 222, 255, .26));
}

/* СПИРАЛЬ КОНТЕНТА ТЕПЕРЬ ПОЛНОСТЬЮ НА THREE.JS (hero3d.js):
   DOM/CSS-версия удалена — плоские карточки не могли жить в общем z-буфере
   со сценой и не могли честно проходить ЗА ноутбуком и ПЕРЕД ним. */

/* пока помехи идут текстурой по 3D-стеклу — HTML-экран скрыт */
.scr.is-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
}


/* =========================================================================
   РЕДИЗАЙН v37: перф-фиксы (шум на transform, без blur у текста), фон-текст
   только с заголовками + маска-растворение + глитч у границ, живые
   заголовки, разрыв v2, средняя типографика
   ========================================================================= */

/* ---- СИНЯЯ «СУПЕРНОВА» (ICOMAT-переход) — УБРАНА ПОЛНОСТЬЮ ---- */
.h3-scene-switch, .h3-scene-wipe { display: none !important; }

/* ---- ФОН: глубокий чёрный сверху → чуть светлее снизу + слабые помехи.
     Шум двигается через TRANSFORM (композитор, GPU) — раньше анимация
     background-position ПЕРЕРИСОВЫВАЛА весь экран 8 раз в секунду на CPU
     и душила FPS всего сайта ---- */
.hero3d-bg { background: #000 !important; } /* v46: абсолютно чёрный, без градиентов и шума */
/* СТРАХОВКА от «коричневого» кадра за шторками: под ВСЕМИ слоями страницы —
   только чёрный. Никакой другой цвет физически не может проступить. */
html, body { background-color: #000 !important; }
.hero3d-bg::after { content: none !important; display: none !important; } /* v46: помехи удалены */

/* ---- ФОН-ТЕКСТ (elvalabs): тёмный, мягкий, виден ТОЛЬКО с заголовками;
     у границ монитора ПЛАВНО РАСТВОРЯЕТСЯ (CSS-маска со всех 4 сторон);
     без filter: blur — он растрировал гигантские слои и душил GPU ---- */
.h3-script {
    position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
    /* слой появляется и исчезает ТОЛЬКО плавным fade (и никогда — во время загрузки) */
    opacity: 0;
    transition: opacity .8s ease;
    /* плавное растворение только там, где текст касается границ экрана:
       мягко сверху и СИЛЬНЫЙ fade у НИЖНЕЙ кромки */
    /* v48: затухание теперь считает сам canvas (script2d.js: мягко слева/сверху/справа,
       широко и сильно снизу) — CSS-маска отключена, чтобы не двоить эффект */
    -webkit-mask-image: none;
    mask-image: none;
}
.h3-script.is-on { opacity: 1; }
/* v48: фон-текст — canvas (script2d.js): короткая фраза (≈3 слова, 1–2 строки), связный кистевой курсив-обводка по логотипу Workflow.
   Размер canvas (полоса слова вверху секции) задаёт сам модуль. */
.h3-script canvas, .h3-script-cv { position: absolute; left: 0; top: 0; display: block; }



/* «Отражение космоса» при включении ноутбука: очень лёгкий синеватый
   градиент снизу, близкий к чёрному. Гаснет вместе с окончанием включения
   (opacity ведёт hero3d.js от igniteB) — дальше страница как обычно. */
.h3-cosmos {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s linear; /* v46: значение ведёт applyScreenLum — только окно запуска */
    background:
        radial-gradient(120% 46% at 50% 112%, rgba(47, 84, 224, .11), rgba(28, 48, 132, .055) 40%, rgba(8, 13, 40, .022) 58%, transparent 70%);
}

/* ---- ЗАГОЛОВОК: средний, чуть ПЛОТНЕЕ и ЖИВЕЕ (мягкое дыхание +
     пружинящее появление); механика смены — как hover у navbar ---- */
.h3-hero-title {
    position: fixed;
    top: 13vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 950;
    pointer-events: none;
    font-family: 'Gilroy', sans-serif;
    font-weight: 600;                       /* v46: чуть-чуть толще */
    font-size: clamp(20px, 2.05vw, 36px);   /* средний, не большой (elvalabs) */
    letter-spacing: .035em;
    text-transform: uppercase;
    color: #ffffff;                         /* v47: чисто белый */
    text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
    text-align: center;
    width: min(92vw, 1200px);
}
.h3t-roll {
    position: relative; display: block; overflow: hidden; height: 1.36em;
}
.h3t {
    position: absolute;
    left: 0; right: 0; top: .08em;
    transform: translateY(-125%);   /* по умолчанию спрятан СВЕРХУ, «в пустоте» */
    opacity: 0;
    transition: transform .62s cubic-bezier(.25, .8, .3, 1), opacity .42s ease; /* БЕЗ пружины и отскока */
    will-change: transform;
}
.h3-hero-title .h3t.is-in  { transform: translateY(0);    opacity: 1; }  /* спускается сверху */
.h3-hero-title .h3t.is-out { transform: translateY(125%); opacity: 0; }  /* уезжает вниз */
.h3-hero-title .h3t.h3t-snap { transition: none !important; }              /* мгновенный возврат наверх перед новым спуском */

/* ---- РАЗРЫВ «БУМАГИ» v2: тонкие рваные кромки, БЕЗ стакания, по очереди
     сверху вниз, быстро и заметно; дёргано-покадрово (cartoon 2d) ---- */
.scr-tear, .scr-tear * { pointer-events: none !important; } /* v46: видео под разрывом кликабельно уже во время анимации */
.scr-tear { position: absolute; inset: 0; z-index: 60; }
.scr-formflash { display: none !important; } /* v46: белой вспышки при вылете нет */
.scr-tearstrip { contain: paint; will-change: transform; backface-visibility: hidden; }
.scr-tearstrip {
    position: absolute;
    left: 0; right: 0;
    overflow: hidden;
    background: #141416;   /* срез тонкого картона — тёмный, не «детская» бумага */
    will-change: transform;
    contain: layout paint; /* и БЕЗ filter: drop-shadow — от него были лаги */
    transform: translateZ(0);
}
.scr-tearinner { position: absolute; left: 0; right: 0; top: 0; }
.scr-tearpage  { position: absolute; inset: 0 0 auto 0; }
.scr-tear-vph  { position: absolute; inset: 0; background: #0B0B0D; }
.scr-tearstrip.ts1 { clip-path: polygon(0 0, 100% 0, 100% 96.4%, 96% 99%, 91% 96%, 86% 99.6%, 80% 96.6%, 74% 99.2%, 68% 96.2%, 61% 99.6%, 54% 96.4%, 47% 99.4%, 40% 96.2%, 33% 99.6%, 26% 96.6%, 19% 99.2%, 12% 96.2%, 6% 99.4%, 0 96.8%); }
.scr-tearstrip.ts2 { clip-path: polygon(0 3.2%, 6% .6%, 12% 3.6%, 19% .8%, 26% 3.4%, 33% .4%, 40% 3.8%, 47% .6%, 54% 3.6%, 61% .4%, 68% 3.8%, 74% .8%, 80% 3.4%, 86% .4%, 91% 4%, 96% 1%, 100% 3.6%, 100% 96.6%, 95% 99.4%, 89% 96.4%, 83% 99.6%, 77% 96.2%, 70% 99.2%, 63% 96.6%, 56% 99.6%, 49% 96.2%, 42% 99.4%, 35% 96.4%, 28% 99.6%, 21% 96.2%, 14% 99.2%, 7% 96.6%, 0 99.2%); }
.scr-tearstrip.ts3 { clip-path: polygon(0 3.4%, 5% .8%, 11% 3.8%, 18% .6%, 25% 3.4%, 32% .4%, 39% 3.6%, 46% .8%, 53% 3.8%, 60% .4%, 67% 3.6%, 73% .6%, 79% 3.8%, 85% .4%, 90% 3.6%, 95% 1%, 100% 3.4%, 100% 100%, 0 100%); }
/* v44: покадрово 13.5 fps — 4 отрезка × steps(4) = 16 кадров за 1.18 с */
.scr-tear.is-torn .ts1 { animation: h3TearTop 1.18s steps(4, end) forwards; }
.scr-tear.is-torn .ts2 { animation: h3TearMid 1.18s steps(4, end) .38s forwards; }
.scr-tear.is-torn .ts3 { animation: h3TearBot 1.18s steps(4, end) .76s forwards; }
@keyframes h3TearTop {
    0%   { transform: translate(0, 0) rotate(0); }
    25%  { transform: translate(-1.4%, -12%) rotate(-1.6deg); }
    50%  { transform: translate(1%, -46%) rotate(1.2deg); }
    75%  { transform: translate(-2.4%, -98%) rotate(-3.2deg); }
    100% { transform: translate(-2%, -170%) rotate(-4.4deg); }
}
@keyframes h3TearMid {
    0%   { transform: translate(0, 0) rotate(0); }
    25%  { transform: translate(-13%, .6%) rotate(1deg); }
    50%  { transform: translate(-48%, -.4%) rotate(-.8deg); }
    75%  { transform: translate(-102%, .8%) rotate(1.8deg); }
    100% { transform: translate(-175%, .4%) rotate(2.4deg); }
}
@keyframes h3TearBot {
    0%   { transform: translate(0, 0) rotate(0); }
    25%  { transform: translate(1.2%, 12%) rotate(1.4deg); }
    50%  { transform: translate(-.8%, 46%) rotate(-1deg); }
    75%  { transform: translate(2%, 98%) rotate(2.8deg); }
    100% { transform: translate(1.6%, 170%) rotate(4deg); }
}

/* ---- ТИПОГРАФИКА ЭКРАНА: Gilroy; БОЛЬШИЕ тексты — ТАБУ ---- */
.scr-h1  { font-weight: 400 !important; letter-spacing: -0.01em !important; font-size: 84px !important; }
.scr-ph  { font-size: 72px !important; }
.scr-h2  { font-size: 56px !important; }
.scr-h2, .scr-ph, .scr-vhead { font-weight: 400 !important; }
.scr-vhead { font-size: 34px !important; }
.scr-sub { font-weight: 300 !important; }
.scr-cta { font-weight: 500 !important; letter-spacing: .12em !important; }

@media (prefers-reduced-motion: reduce) {
    .h3-dust { display: none; }
}

/* =========================================================================
   v46
   ========================================================================= */
/* v47: курсив для фон-слова (script2d.js) — канцелярский курсив Z003,
   латиница + кириллица; жирность и доп. наклон добавляет сам модуль */
@font-face {
    font-family: 'WF Script';
    src: url('../../fonts/Z003-MediumItalic.woff2') format('woff2'), url('../../fonts/Z003-MediumItalic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
/* 2D-пыль приземления: полноэкранный canvas поверх 3D, под «!!» (1250) */
.h3-dust {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1240;
    pointer-events: none;
    display: block;
}
/* HDR-рефлекс страницы отключён (CAPS) */
.scr-page-reflection { display: none !important; }

/* v83: притемнение накрытой секции — отдельный слой с прямой opacity (см. updateScreenScroll) */
.scr-s::after { content: none; display: none; }
.scr-dim { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; display: none; will-change: opacity; }
@media (hover: none) and (pointer: coarse) {
  /* параллакс-слои двигаются прямым transform — держим их отдельными слоями, без перерисовки секции */
  .scr-s .p1, .scr-s .p2, .scr-s .p3 { will-change: transform; }
}

/* v85: телефон — HTML-экран ноутбука 1280 px вместо 2560: всё содержимое (сверстано под 2560)
   уменьшено zoom-ом; слой логотипа меряется в cqw и в zoom не нуждается */
.scr.wf85-z > :not(.wf-logo-stage) { zoom: .5; }
.hero3d-excl { transform-origin: 0 0; }
@media (max-width: 1024px) { .hero3d-excl { filter: none; } }

/* v86 (телефоны): кромка-подсветка нарисована в половинном размере и растянута (EDGE_Z в hero3d.js) —
   радиусы свечения уменьшены вдвое, чтобы после растяжения выглядеть так же */
html.wf86-touch .h3edge svg {
    filter: drop-shadow(0 0 .75px rgba(255, 255, 255, .55))
            drop-shadow(0 0 2.5px rgba(205, 222, 255, .18));
}
html.wf86-touch .h3edge.h3edge-burst svg {
    filter: drop-shadow(0 0 1.25px rgba(255, 255, 255, .7))
            drop-shadow(0 0 4px rgba(205, 222, 255, .26));
}
/* v86: скрытые «восклицательные» знаки не крутят анимации вхолостую */
.hero3d-excl:not(.is-on),
.hero3d-excl:not(.is-on) * {
    animation-play-state: paused !important;
}