/* Герой, вариант 8 — «Хаос вокруг ноутбука → на экране складывается сервис». Только свои классы .gx… (бар и чат-бот не трогаем).
   Слои: пол-сетка (CSS) → PixiJS (бирки за ноутбуком, ноутбук, экраны из бирок, бирки перед ноутбуком) → подписи режимов → текст.
   На главной: .gx лежит в слое сцены 1 (div.layer.hero.gx-hero#hero, плёнка kino.js); глобальных правил здесь нет —
   фон, сетку, бар и бота даёт glavnaya.css. Классы gx-js / gx-show на <html> ставит скрипт в <head> главной. */

/* слой сцены 1: высоту задаёт .gx (у старого героя .hero были своя высота 100vh/620 и отступ снизу 44 px на ≤ 1100) */
.hero.gx-hero{ height:auto; min-height:0; padding-bottom:0 }
/* в плёнке на ПК слой героя = сцена (100vh): .gx — ровно по ней, и при окне ниже 640 px низ (кнопки) не обрезается */
@media (min-width:1101px){ .film-on .hero.gx-hero > .gx{ height:100%; min-height:0 } }
.gx{
  --gx-fs:min(4.2vw, 6.8vh, 124px);
  --gx-head:68px;
  position:relative; height:100vh; height:100svh; min-height:640px; overflow:hidden; isolation:isolate;
}
@media (max-width:720px){ .gx{ --gx-head:58px; --gx-fs:min(10.4vw, 7vh, 52px); min-height:700px } }

.gx-floor{position:absolute; z-index:0; left:0; right:0; bottom:0; height:42%; max-height:460px; overflow:hidden; perspective:520px; perspective-origin:50% 0;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 72%); mask-image:linear-gradient(to bottom, transparent 0, #000 72%); pointer-events:none}
.gx-floor-plane{position:absolute; left:-60%; right:-60%; top:0; height:240%; transform-origin:50% 0; transform:rotateX(72deg);
  background-image:linear-gradient(rgba(59,123,246,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(59,123,246,.16) 1px, transparent 1px);
  background-size:80px 80px}

.gx-pixi{position:absolute; z-index:2; left:0; top:0; width:100%; height:100%; pointer-events:none}
.gx-pixi canvas{position:absolute; left:0; top:0; width:100%; height:100%; display:block}

/* подпись режимов на подбородке ноутбука; место ставит JS */
.gx-modes{position:absolute; z-index:3; left:0; top:0; display:flex; align-items:center; justify-content:center; gap:12px; height:18px; opacity:0;
  font:500 10px/1 var(--f-mono, 'JetBrains Mono', monospace); letter-spacing:.11em; text-transform:uppercase; color:#8B97AE; pointer-events:none}
.gx-modes span{position:relative; transition:color .45s}
.gx-modes span.on{color:#3B7BF6}
.gx-modes i{display:block; width:16px; height:1px; background:#DDE3EE}
.gx-prog{position:absolute; left:0; top:0; width:10px; height:2px; overflow:visible}
.gx-prog line{stroke:#3B7BF6; stroke-width:1.5}

/* текст */
.gx-in{position:relative; z-index:4; height:100%; display:flex; flex-direction:column; align-items:center; text-align:center;
  width:calc(100% - 2 * var(--gut, 64px)); margin:0 auto; padding:calc(var(--gx-head) + 3.2vh) 0 2.6vh; pointer-events:none}
.gx-in a{pointer-events:auto}
.gx-kick{margin:0; font:500 12px/1.2 var(--f-mono, 'JetBrains Mono', monospace); letter-spacing:.08em; text-transform:uppercase; color:#2C64D8}
/* заголовок стоит на чистом: мягкий ореол цвета фона гасит сетку и бирки за буквами */
.gx-top{position:relative; isolation:isolate}
.gx-top::before{content:''; position:absolute; z-index:-1; left:-14%; right:-14%; top:-38%; bottom:-46%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(246,248,252,1) 0%, rgba(246,248,252,.96) 55%, rgba(246,248,252,0) 100%);
  opacity:var(--gx-halo, 1)}   /* при уходе в сцену 2 гасит geroy.js */
.gx-h1{margin:1.8vh 0 0; font:460 var(--gx-fs)/1.04 var(--f-big, 'Unbounded', sans-serif); letter-spacing:-.04em; color:#0D1324; white-space:nowrap}
.gx-l{display:block; padding-bottom:.04em}
.gx-acc{font-style:normal; color:#3B7BF6}
.gx-nw{white-space:nowrap}   /* предлог не висит в конце строки */
.gx-stage{flex:1 1 auto; width:100%; min-height:200px}
/* абзац с прода в композицию не помещается — оставлен для чтения экранными дикторами */
.gx-sub{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; margin:0}
.gx-bot{display:flex; flex-direction:column; align-items:center}
.gx-cta{display:flex; align-items:center}
.gx-link{margin-left:26px; font-weight:500; text-decoration:none; padding:12px 0; border-bottom:1px solid #DDE3EE; color:#0D1324; transition:border-color .3s}
.gx-link:hover{border-color:#0D1324}
/* подсказка прокрутки под кнопками (вместо строки «0% комиссии…», Юра 11.10): в строку, компактно, в потоке.
   Постоянная часть героя (Юра 11.10 «а подсказка где?»): kino.js прячет её на весь визит после первой прокрутки
   (.gone + sessionStorage) — здесь она видна всегда, пока виден герой, и появляется вместе с кнопками (она внутри .gx-bot).
   display:flex !important — kino.js ставит display:none после ухода, а место под ней должно быть всегда (ноутбук считается
   по высоте с ней); top:auto !important — на телефоне kino.js ставит style.top под прежнее absolute-место;
   visibility !important — kino.js прячет её inline, если рядом плашка cookie (плашка до кнопок не доходит, см. ниже) */
#hero .skh{position:relative; left:auto; bottom:auto; top:auto !important; margin:14px 0 0; -webkit-flex-direction:row; flex-direction:row;
  gap:10px; padding:4px 10px; display:-webkit-flex !important; display:flex !important; visibility:visible !important;
  opacity:1; pointer-events:auto; -webkit-transform:none; transform:none; transition:none}
#hero .skh .skh-wheel{-webkit-animation:skWheel 1.9s cubic-bezier(.45, 0, .3, 1) infinite; animation:skWheel 1.9s cubic-bezier(.45, 0, .3, 1) infinite}
#hero .skh .skh-chev{-webkit-animation:skBob 1.9s ease-in-out infinite; animation:skBob 1.9s ease-in-out infinite}
#hero .skh-mouse{width:18px; height:28px}
#hero .skh-t{margin:0; font-size:11px; letter-spacing:.12em}
#hero .skh-chev{margin:0; width:12px; height:8px}
@media (min-width:1700px){ #hero .skh-mouse{width:20px; height:31px} #hero .skh-t{font-size:12px} }

.gx-js .gx-kick, .gx-js .gx-bot{opacity:0}
.gx-js .gx-h1{visibility:hidden}
.gx-show .gx-kick, .gx-show .gx-bot{opacity:1 !important}
.gx-show .gx-h1{visibility:visible !important}

@media (max-width:720px){
  .gx-in{width:calc(100% - 32px); padding:calc(var(--gx-head) + 20px) 0 22px}
  .gx-kick{font-size:11px}
  .gx-h1{margin-top:12px; white-space:normal; letter-spacing:-.05em}
  .gx-l{display:inline}
  .gx-stage{flex:none; height:calc((100vw - 24px) * 0.66 + 18px); margin-top:18px}
  .gx-bot{margin-top:34px}
  .gx-cta .btn{flex:none; padding:0 22px; font-size:15px; white-space:nowrap; min-height:48px}
  .gx-link{margin-left:18px; font-size:15px}
  #hero .skh{margin-top:12px}
  #hero .skh .skh-tip{-webkit-animation:skTip 1.9s cubic-bezier(.45, 0, .3, 1) infinite; animation:skTip 1.9s cubic-bezier(.45, 0, .3, 1) infinite}
  .gx-modes{font-size:9px; gap:9px; letter-spacing:.09em; height:13px}
  .gx-modes i{width:12px}
}
@media (prefers-reduced-motion:reduce){
  #hero .skh{-webkit-transition:none !important; transition:none !important}
  #hero .skh .skh-wheel, #hero .skh .skh-chev, #hero .skh .skh-tip{-webkit-animation:none; animation:none}
  .gx-js .gx-kick, .gx-js .gx-bot{opacity:1}
  .gx-js .gx-h1{visibility:visible}
}

/* неподвижная картинка ноутбука: без JS (noscript) и когда холст не поднялся (нет WebGL / библиотеки не дошли) */
.gx-still{ display:block; width:100%; height:100%; object-fit:contain; transition:opacity .2s }
@media (max-width:720px){ .gx-still{ object-position:50% 0 } }

/* плашка cookie (cookie.css, cookie.js; v8.css грузится только на главной). cookie.js ставил её по #title старого героя —
   левым краем по заголовку, ниже его кнопок; у v8 #title нет, кнопки по центру, и плашка по умолчанию (слева внизу,
   500 px) закрывала «Запустить бесплатно». Место задаёт CSS: слева внизу, правый край не ближе 12 px к кнопке
   (кнопки героя ~390 px по центру — левый край 50vw − 195 px). Узкие ноутбуки (≤ 1340): на «билет в строку» места нет —
   билет столбиком (бумага над корешком с кнопками) */
@media (min-width:1101px){
  html .tkc{ width:min(500px, calc(50vw - 207px - var(--tkc-r))) }
}
@media (min-width:1101px) and (max-height:800px){
  /* низкий экран: кнопки корешка друг под другом (в строку по ширине не помещаются) */
  html .tkc-stub{ flex:0 0 172px }
  html .tkc-bs{ flex-direction:column; gap:6px }
  html .tkc-btn, html .tkc-btn:first-child{ flex:none; width:100% }
  html .tkc-btn + .tkc-btn{ margin:0 }
}
@media (min-width:1101px) and (max-width:1340px){
  html .tkc-in{ display:block }
  html .tkc-top{ border-radius:10px 10px 0 0 }
  html .tkc-perf{ width:auto; height:0; margin:0 14px; border-left:0; border-top:2px dashed rgba(13,19,36,.2); box-shadow:-5px 0 0 #fff, 5px 0 0 #fff }
  html .tkc-stub{ display:block; padding:8px 12px 10px; border-radius:0 0 10px 10px }
  html .tkc-bs{ flex-direction:row; gap:6px }
  html .tkc-btn, html .tkc-btn:first-child{ flex:1 1 auto; width:auto; min-height:32px; padding:0 10px; font-size:12px }
  html .tkc-btn + .tkc-btn{ margin:0 }
}