/* outsky.app — главная, концепция «Туманность»: секции главной (сцена первого экрана, манифест, колода, (06)–(09),
   галерея). Общая основа (токены, фон, стекло, пилюли, шапка, заголовки, FAQ, финал, подвал) — nebula.css,
   макет приложения — app-ui.css; оба подключаются раньше.
   Каскад: правило этого файла перекрывает правило nebula.css той же специфичности — в том числе её режимы (RM, прозрачность,
   контраст, forced-colors). Поэтому режимы для блоков главной (и повтор общего правила, если блок главной его перебивает) — в конце
   этого файла. Не сочетать классы главной с общими на одном элементе без проверки: .disp — не .h2, .rv.draw — не .kick. */

/* созвездия главной (база .cst, а также FAQ и финал — nebula.css). Порядок — сверху вниз по странице */
.c-per{left:4.5%; top:72%; width:62px; rotate:-8deg; opacity:.15}                                      /* первый экран: под текстом слева (Персей) */
.c-ursa{right:4.5%; top:42%; width:clamp(150px,13vw,200px); rotate:4deg; opacity:.16}                  /* манифест: справа между строк (Большая Медведица) */
.c-cass{right:3%; top:64px; width:clamp(110px,10vw,150px); rotate:-6deg; opacity:.17}                  /* «Возможности»: правее h2 (Кассиопея) */
.c-gem{left:calc(max(var(--gutter),50% - 566px) + 2%); top:62%; width:110px; rotate:7deg; opacity:.15} /* сетка 3+2: слева от нижнего ряда (Близнецы) */
.deck-sky .cst{z-index:1}                                                                              /* в закреплённой сцене: над её пятнами */
.c-sco{right:7%; top:calc(var(--header-h) + 3%); width:76px; rotate:-10deg; opacity:.16}               /* сцена колоды: справа сверху, над счётчиком (Скорпион) */
.c-leo{left:4.5%; bottom:8%; width:170px; rotate:-5deg; opacity:.15}                                   /* сцена колоды: слева под оглавлением (Лев) */
.c-orion{right:calc((100% - 100vw) / 2 + 34px); top:9%; width:78px; rotate:6deg; opacity:.16}          /* (06)–(09): за правым краем колонки (Орион) */
.c-umi{left:calc((100% - 100vw) / 2 + 40px); top:calc(100% + 20px); width:44px; rotate:-12deg; opacity:.17} /* под (06)–(09), в левом поле (Малая Медведица) */
.c-lyra{right:2.5%; top:58px; width:62px; rotate:8deg; opacity:.18}                                    /* «Платформы»: правее первой строки h2 (Лира) */
.c-and{left:3.5%; bottom:-42px; width:130px; rotate:-7deg; opacity:.15}                                /* между галереей и FAQ, слева (Андромеда) */
.c-and{display:block}
@media (max-width:1099px){ .c-and{bottom:-31px; width:96px} }   /* по середине зазора галерея → FAQ (2 × .62 · --sec-y) */
@media (min-width:700px){ .c-cass,.c-lyra{display:block} }
@media (min-width:1000px){ .c-ursa{display:block} }
@media (min-width:1100px){ html:not(.pin) .c-gem{display:block} }
html.pin .c-sco,html.pin .c-leo{display:block}
@media (min-width:1240px){ .c-per{display:block} }
@media (min-width:1340px){ .c-umi{display:block} }
@media (min-width:1400px){ .c-orion{display:block} }

/* комета главной пилюли первого экрана: один круг при появлении; у карточек галереи — на наведении и в фокусе */
@media (prefers-reduced-motion:no-preference){
  .plc:hover .comet i,.plc:focus-visible .comet i{animation-play-state:running}
  html.js:not(.shot) .hero .pill-main .comet{animation:cshow 4.5s linear .9s 1 both}
  html.js:not(.shot) .hero .pill-main .comet i{animation:spin 4.5s linear .9s 1}
  html.js:not(.shot) .hero .pill-main:hover .comet,html.js:not(.shot) .hero .pill-main:focus-visible .comet{animation:none; opacity:1}
  html.js:not(.shot) .hero .pill-main:hover .comet i,html.js:not(.shot) .hero .pill-main:focus-visible .comet i{animation:spin 4.5s linear infinite}
}
@keyframes cshow{0%{opacity:0} 8%,90%{opacity:1} 100%{opacity:0}}

/* 1. первый экран (метка, h1, вводный абзац, кнопки и галочки — nebula.css) */
.hero{position:relative; isolation:isolate; overflow-x:clip; padding:calc(var(--header-h) + clamp(18px,4.2vh,44px)) 0 clamp(56px,7vw,96px)}
.hero .neb .tr{left:74%; top:26%; width:clamp(600px,92vw,1380px)}
.hero .neb .bl{left:2%; top:68%}
.hero .neb .tl{left:20%; top:4%; width:60vw}
.hero-in{position:relative; display:grid; grid-template-columns:minmax(0,1fr); max-width:1680px; margin:0 auto; padding:0 var(--hg); --k:.62; --pk:1}
.hero-top{position:relative; z-index:3; width:fit-content; max-width:100%}
.hero-top.hole::before{inset:-30% -34%; background:radial-gradient(18% 26% at 80% 72%,rgb(7 8 28/.72),rgb(7 8 28/.4) 55%,transparent),radial-gradient(40.5% 41% at 50% 50%,rgb(7 8 28/.55) 45%,rgb(7 8 28/.3) 78%,transparent)}   /* конец акцентной строки h1 — над светом глобуса ≥ 3:1 */
.hero-bot.hole::before{background:radial-gradient(closest-side,rgb(7 8 28/.6) 35%,transparent)}
.hero-bot{position:relative; z-index:3}

/* сцена: глобус 0 · окно 1 · телефон 2 · тексты 3 — все в контексте .hero (isolation); scale() внутри коробок нужного размера */
.stage{position:relative}
.w-box{position:relative; width:calc(1080px * var(--k)); height:calc(680px * var(--k))}
.w-box>.osw{transform:scale(var(--k)); transform-origin:0 0}
.p-box{position:relative; width:calc(292px * var(--pk)); height:calc(600px * var(--pk))}
.p-box>.osp{transform:scale(var(--pk)); transform-origin:0 0}
.globe{position:absolute; aspect-ratio:1; border-radius:50%; pointer-events:none}
/* сфера светится */
.globe::before{content:""; position:absolute; inset:-16%; border-radius:50%; z-index:-1; background:radial-gradient(closest-side,rgb(123 97 255/.34),rgb(75 54 201/.13) 58%,transparent 74%)}
.globe::after{content:""; position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 66% 24%,rgb(181 171 252/.12),rgb(75 54 201/.07) 42%,transparent 70%);
  box-shadow:inset 0 0 0 1px rgb(181 171 252/.16),inset -26px 0 64px -18px rgb(142 123 255/.42)}   /* свет справа: слева конец h1 */
.globe canvas{position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity 1.2s var(--e-out); touch-action:pan-y}
.globe.on canvas{opacity:1}
html:not(.js) .globe{background:url(/assets/img/home/globe.svg) center/100% 100% no-repeat}
html[lang=en]:not(.js) .globe{background-image:url(/assets/img/home/globe-en.svg)}
/* подписи стран (fx-home.js): свой слой .globe.g-lb на месте глобуса, но выше текстов и дымки первого экрана (.hero-top::before
   гасит левый край глобуса). На тексты, окно и телефон подписи не встают — это решает JS. Слой без свечения сферы и без событий мыши */
.globe.g-lb{z-index:4}
.globe.g-lb::before,.globe.g-lb::after{content:none}
/* ореол за окном */
.w-box::before{content:""; position:absolute; inset:-24% -16%; z-index:-1; pointer-events:none; border-radius:50%;
  background:radial-gradient(closest-side,rgb(123 97 255/.4),rgb(91 59 239/.15) 55%,transparent)}
.cap{margin:0; font-size:12.5px; line-height:1.4; color:var(--text-2); width:fit-content; padding:6px 13px; border-radius:var(--r-pill);
  background:rgb(13 11 36/.78); box-shadow:inset 0 0 0 1px var(--hair)}

/* ≥1240: текст слева, окно справа целиком (24px от края), телефон слева внизу; --wl — левый край окна */
@media (min-width:1240px){
  .hero-in{--k:.66; --pk:.72; --wl:calc(100% + var(--hg) - 24px - 1080px * var(--k)); grid-template-rows:auto auto; row-gap:clamp(14px,2.2vh,24px)}
  .hero-top{grid-row:1}
  .hero-bot{grid-row:2; grid-column:1; align-self:start; max-width:min(calc(var(--wl) - 48px),560px)}
  .lead{max-width:none}
  .hero .pill{padding-right:24px}
  /* кнопки — в одну строку: колонка у окна бывает уже 470px (1240–1300, 1360–1380, 1400+ при высоте ≥820) — тогда русские
     пилюли (подписи длиннее английских) компактнее; с наведением «Возможности» шире на 12px — без переноса */
  .hero .ctas{flex-wrap:nowrap; gap:10px; container-type:inline-size}
  .hero .ctas>.pill{flex-shrink:0; white-space:nowrap}
  @container (max-width:470px){ .hero:lang(ru) .pill{--pl0:20px; padding-right:18px; gap:8px; font-size:14px} }
  .stage{grid-row:2; grid-column:1; height:calc(280px * var(--k) + 600px * var(--pk) + 20px)}   /* без z-index: слой подписей должен подняться над текстом */
  .w-box{position:absolute; left:var(--wl); top:4px; z-index:1}
  .p-box{position:absolute; left:calc(var(--wl) - 56px); top:calc(280px * var(--k) + 4px); z-index:2}   /* поверх бокового меню */
  .globe{z-index:0; width:min(46vw,640px); left:calc(var(--wl) + 1080px * var(--k) * .76); top:-14px; translate:-50% -50%}
  .cap{position:absolute; right:calc(24px - var(--hg)); top:-36px}
}
@media (min-width:1240px) and (max-width:1359px){ .p-box{top:calc(280px * var(--k) + 16px)} }   /* телефон на 12px ниже: в узкой колонке «Возможности» (с наведением шире на 12px) иначе впритык к его углу */
@media (min-width:1360px){ .hero-in{--k:.72; --pk:.76} }
@media (min-width:1400px) and (min-height:820px){ .hero-in{--k:.76; --pk:.8} }
/* 760–1239: текст сверху, ниже пара */
@media (min-width:760px) and (max-width:1239px){
  .hero-in{--k:.62; --pk:.72}
  .hero-bot{margin-top:28px}
  .lead{max-width:620px}
  .stage{margin-top:52px; height:calc(680px * var(--k) * .42 + 600px * var(--pk) + 16px);
    --pl:max(0px,calc((100% - 292px * var(--pk) * .55 - 1080px * var(--k)) / 2))}
  .w-box{position:absolute; left:calc(var(--pl) + 292px * var(--pk) * .55); top:0; z-index:1}
  .p-box{position:absolute; left:var(--pl); top:calc(680px * var(--k) * .42); z-index:2}
  .globe{width:min(92vw,760px); left:calc(var(--pl) + 292px * var(--pk) * .55 + 1080px * var(--k) * .5); top:calc(340px * var(--k)); translate:-50% -50%}
  .cap{position:absolute; right:0; bottom:-44px}
  .hero{padding-bottom:110px}
}
@media (min-width:760px) and (max-width:899px){ .hero-in{--k:.54} }   /* окно целиком в ширине экрана */
@media (min-width:900px) and (max-width:1239px){ .hero-in{--k:.7; --pk:.78} }
@media (min-width:1100px) and (max-width:1239px){ .hero-in{--k:.8; --pk:.84} }
/* < 760: окно скрыто (работает, телефон — зеркало) */
@media (max-width:759px){
  .w-box{display:none}
  .p-box::before{content:""; position:absolute; inset:-12% -42%; z-index:-1; pointer-events:none; border-radius:50%;
    background:radial-gradient(closest-side,rgb(123 97 255/.4),rgb(91 59 239/.15) 55%,transparent)}
  .hero-bot{margin-top:26px}
  .stage{margin-top:36px; display:flex; flex-direction:column; align-items:center}
  .globe{width:min(116vw,560px); left:50%; top:200px; translate:-50% -50%}
  .cap{margin-top:22px; text-align:center; border-radius:16px}
}
@media (max-width:359px){ .hero-in{--pk:.9} }
/* отражение: ≥1100, не в Firefox */
@media (min-width:1100px){ .p-box>.osp{-webkit-box-reflect:below 8px linear-gradient(transparent 78%,rgb(255 255 255/.09))} }

/* 2. манифест — крупнее h2, тот же шрифт и градиенты */
.manifest{position:relative; isolation:isolate; overflow-x:clip; padding:clamp(72px,9vw,130px) var(--hg) clamp(96px,12vw,170px)}
.manifest .neb .bl{left:4%; top:104%} .manifest .neb .br{left:92%; top:90%}   /* левое пятно ниже — акцентная строка над ним ≥ 3:1 */
.disp{position:relative; margin:0 auto; max-width:1500px; font-weight:700; font-size:clamp(34px,6.4vw,96px); line-height:1.04; letter-spacing:-.035em}
.disp .ln{display:block; width:fit-content; padding-bottom:.04em; background:var(--grad-glass); -webkit-background-clip:text; background-clip:text; color:transparent}
.disp .l2{margin-left:1.1em}
.disp .l3{margin-left:.45em}
.disp .acc{background:var(--grad-text); -webkit-background-clip:text; background-clip:text}
.disp.hole::before{inset:-24% -12%; background:radial-gradient(20% 26% at 22% 72%,rgb(7 8 28/.6),transparent),radial-gradient(45% 40.5% at 50% 50%,rgb(7 8 28/.6) 30%,transparent)}   /* пятна не выходят за край — без резких границ */
.mf-sky{position:absolute; inset:8% var(--hg); width:calc(100% - 2 * var(--hg)); height:84%; overflow:visible; pointer-events:none}
.mf-sky path{fill:none; stroke:rgb(181 171 252/.28); stroke-width:1; vector-effect:non-scaling-stroke; stroke-dasharray:1; stroke-dashoffset:0}
.mf-sky circle{fill:#d2cefd; transform-box:fill-box; transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  html.js:not(.shot) .rv.draw{opacity:1; transform:none}
  html.js:not(.shot) .draw path{stroke-dashoffset:1; transition:stroke-dashoffset 1.4s ease-in-out}
  html.js:not(.shot) .draw path:nth-child(2){transition-delay:.2s}
  html.js:not(.shot) .draw circle{transform:scale(0); transition:transform .4s var(--e-expo) .9s}
  html.js:not(.shot) .draw.is-in path{stroke-dashoffset:0}
  html.js:not(.shot) .draw.is-in circle{transform:none}
}

/* 3. колода */
.feat .neb .tr{top:6%} .feat .neb .bl{top:94%}
.deck-wrap{position:relative; margin-top:clamp(48px,7vw,96px)}
.skip.skip-in{transform:none; top:calc(clamp(48px,7vw,96px) / -2 - 20px); padding:6px 14px; clip-path:inset(50%)}   /* в отступе над колодой */
.skip.skip-in:focus{clip-path:none}
.deck-track{position:relative}
.pin-frame{position:relative}
.deck-idx{display:none}
.card{--gx:85%; --gy:90%; display:flex; flex-direction:column; gap:12px; padding:28px; color:var(--text)}
.card:nth-child(2){--gx:12%; --gy:92%} .card:nth-child(3){--gx:90%; --gy:10%} .card:nth-child(4){--gx:88%; --gy:92%} .card:nth-child(5){--gx:102%; --gy:46%}
.card .ix{font-size:12px; font-weight:500; letter-spacing:.08em; color:var(--lav); font-variant-numeric:tabular-nums}
.card h3{margin:0; font-size:22px; line-height:1.25; font-weight:300; letter-spacing:-.005em}
.card>p{margin:0; font-size:15px; line-height:1.55; color:var(--text-2)}
.card .viz{margin-top:auto; padding-top:6px}
@media (hover:hover) and (pointer:fine){ .card:hover{--ga:.38} }

/* мини-интерактивы в карточках (сноска .fnote и список ul.mini — nebula.css) */
.states{display:flex; flex-wrap:wrap; gap:6px}
.states span{display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:5px 10px; border-radius:var(--r-pill); color:var(--text-2);
  background:rgb(255 255 255/.04); box-shadow:inset 0 0 0 1px var(--hair); transition:box-shadow .4s,color .4s}
.states span::before{content:""; width:6px; height:6px; border-radius:50%; background:#9295ba}
.states .s2::before{background:var(--violet)} .states .s3::before{background:var(--ok)} .states .s4::before{background:var(--err)}
.states span.on{color:var(--text); box-shadow:inset 0 0 0 1px rgb(181 171 252/.6),0 0 16px -4px rgb(123 97 255/.8)}
.flow{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin-top:12px; font-size:12.5px; color:var(--text-2)}
.flow>div{display:inline-flex; align-items:center; gap:6px}
.flow i{display:grid; place-items:center; width:18px; height:18px; border-radius:50%; font-style:normal; font-size:10px; color:var(--text); box-shadow:inset 0 0 0 1px rgb(181 171 252/.45)}
.flow .ok{color:#bbf7d0} .flow .ok i{box-shadow:inset 0 0 0 1px rgb(74 222 128/.6)}
.flow>span{color:var(--lav)}
.diag{display:grid; gap:6px}
.diag>div:not(.hint){display:grid; grid-template-columns:20px minmax(0,1fr) auto; align-items:center; gap:10px; padding:8px 12px; border-radius:var(--r-sm); font-size:13.5px;
  background:rgb(255 255 255/.03); box-shadow:inset 0 0 0 1px rgb(255 255 255/.08)}
.diag i{font-style:normal; font-weight:700; text-align:center} .diag .y{color:var(--ok)} .diag .w{color:var(--warn)}
.diag small{font-size:12px; color:var(--text-2); font-variant-numeric:tabular-nums}
.diag .hint{margin-top:4px; padding:10px 12px; border-radius:var(--r-sm); font-size:13px; line-height:1.5; color:var(--text); background:rgb(123 97 255/.12); box-shadow:inset 2px 0 0 var(--lav)}
/* (03): список — строками-плашками, как у (02) и (04): внизу карточки цельный блок, а не повисший текст;
   плашки делят свободную высоту карточки поровну — без пустой полосы между абзацем и списком (в сетке 3+2 и в колоде) */
.card .viz:has(> ul.mini){flex:1; display:flex; flex-direction:column}
.card ul.mini{flex:1; gap:6px; grid-auto-rows:minmax(0,1fr)}
.card ul.mini li{align-items:center; padding:8px 12px; border-radius:var(--r-sm); font-size:13.5px; background:rgb(255 255 255/.03); box-shadow:inset 0 0 0 1px rgb(255 255 255/.08)}
.card ul.mini svg{margin-top:1px}
@media (max-width:1099px){ .card ul.mini{grid-auto-rows:auto; align-content:end} }   /* стопка: плашки своей высоты, список внизу карточки */
.rts{display:grid; gap:7px}
.rt{display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:var(--r-md); cursor:pointer; background:rgb(255 255 255/.03); box-shadow:inset 0 0 0 1px rgb(255 255 255/.09); transition:box-shadow var(--d-s)}
.rt>div{flex:1; min-width:0} .rt b{display:block; font-size:14px; font-weight:500} .rt small{display:block; font-size:12.5px; line-height:1.4; color:var(--text-2)}
.rt .rd{width:18px; height:18px; border-radius:50%; flex-shrink:0; box-shadow:inset 0 0 0 1.5px rgb(181 171 252/.5)}
.rt.on{box-shadow:inset 0 0 0 1px rgb(181 171 252/.6),0 0 18px -8px rgb(123 97 255/.9)}
.rt.on .rd{box-shadow:inset 0 0 0 1.5px var(--lav),inset 0 0 0 5px var(--ink),inset 0 0 0 9px var(--lav)}
.hwid{display:grid; grid-template-columns:minmax(0,1fr); gap:8px}   /* minmax(0,…): длинный ID не распирает карточку на 320–360 */
.hw-top{display:flex; align-items:center; justify-content:space-between; gap:12px}
.hw-top b{display:block; font-size:14px; font-weight:600} .hw-top small{display:block; font-size:12.5px; color:var(--text-2)}
.dots{display:flex; gap:5px} .dots i{width:9px; height:9px; border-radius:50%; box-shadow:inset 0 0 0 1.5px rgb(181 171 252/.5)} .dots i.on{background:var(--lav); box-shadow:0 0 8px rgb(181 171 252/.7)}
.hw-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 12px; border-radius:var(--r-sm); font-size:13.5px; background:rgb(255 255 255/.03); box-shadow:inset 0 0 0 1px rgb(255 255 255/.08)}
.tg{position:relative; width:38px; height:22px; border-radius:var(--r-pill); flex-shrink:0; cursor:pointer; background:rgb(255 255 255/.12); transition:background var(--d-s)}
.tg::after{content:""; position:absolute; left:3px; top:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform var(--d-s) var(--e-mech)}
.tg.on{background:linear-gradient(120deg,#5b3bef,#6d4cff 58%,#8d42e8)} .tg.on::after{transform:translateX(16px)}
.hw-id{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 6px 6px 12px; border-radius:var(--r-sm); background:rgb(0 0 0/.25); box-shadow:inset 0 0 0 1px rgb(255 255 255/.08); transition:opacity var(--d-s)}
.hw-id code{flex:1 1 0; min-width:0; font-family:var(--mono); font-size:12.5px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hw-id button{flex-shrink:0; border:0; cursor:pointer; padding:6px 12px; border-radius:var(--r-pill); font-size:12.5px; font-weight:500; background:rgb(181 171 252/.14); color:var(--text); box-shadow:inset 0 0 0 1px rgb(181 171 252/.35)}
.hw-id.off{opacity:.5} .hw-id.off button{cursor:default}
.hwid .fnote{margin-top:2px}

/* ≥1100 без .pin: сетка 3+2 */
@media (min-width:1100px){
  html:not(.pin) .deck{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:20px; max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter)}
  html:not(.pin) .card{grid-column:span 2}
  html:not(.pin) .card:nth-child(4){grid-column:2 / span 2}
  html:not(.pin) .card:nth-child(5){grid-column:4 / span 2}
}
/* .pin: трек 300svh, кадр 100svh под закреплённой шапкой, прогресс — --p (core.js).
   Колода собрана с начала трека, сверху (01); (01)…(04) по очереди уходят вверх-влево — каждая за 12% прогресса
   около .20/.40/.60/.80; (05) остаётся последней. Обратной «сдачи» нет. */
html.pin .deck-track{height:300svh}
html.pin .pin-frame{position:sticky; top:0; height:100svh; overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:40px; padding:var(--header-h) var(--hg) 0}
/* --fa — поворот веера на каждую глубину */
html.pin .deck{--cw:560px; --ch:440px; --fa:1.3deg; grid-column:2; position:relative; width:var(--cw); height:var(--ch);
  --t1:clamp(0,(var(--p,0) - .14) / .12,1); --t2:clamp(0,(var(--p,0) - .34) / .12,1);
  --t3:clamp(0,(var(--p,0) - .54) / .12,1); --t4:clamp(0,(var(--p,0) - .74) / .12,1)}
html.pin .deck::before{content:""; position:absolute; inset:-34% -28%; z-index:-1; pointer-events:none; border-radius:50%; background:radial-gradient(closest-side,rgb(123 97 255/.36),rgb(91 59 239/.12) 55%,transparent)}   /* свет за колодой */
/* --o — доля ухода карточки (0…1), --d — глубина в стопке (0 — верхняя, непрерывна от --p).
   Веер: следующие выглядывают справа-сверху — поворот на --fa за глубину вокруг точки ниже колоды и левее центра
   (край уходит вправо, а не на список). Видны две следующие, третья гаснет к глубине 3. Уход — вверх-влево, −10° */
html.pin .card{position:absolute; inset:0; background:linear-gradient(rgb(255 255 255/.06),rgb(255 255 255/.02)),rgb(13 11 36);   /* непрозрачно */
  --fd:min(var(--d),3);
  transform:translate(calc(var(--o) * -16%),calc(var(--o) * -130%))
            translate(-30%,120%) rotate(calc(var(--fa) * var(--fd))) translate(30%,-120%)
            translateY(calc(var(--fd) * -2px)) rotate(calc(var(--o) * -10deg));
  opacity:calc(clamp(0,min(1 - var(--d) * .16,3 - var(--d)),1) * (1 - var(--o) * var(--o)))}
html.pin .card:nth-child(1){--o:var(--t1); --d:0; z-index:5}
html.pin .card:nth-child(2){--o:var(--t2); --d:calc(1 - var(--t1)); z-index:4}
html.pin .card:nth-child(3){--o:var(--t3); --d:calc(2 - var(--t1) - var(--t2)); z-index:3}
html.pin .card:nth-child(4){--o:var(--t4); --d:calc(3 - var(--t1) - var(--t2) - var(--t3)); z-index:2}
html.pin .card:nth-child(5){--o:0; --d:calc(4 - var(--t1) - var(--t2) - var(--t3) - var(--t4)); z-index:1}
/* под верхней — пустое стекло; грань — ровная лавандовая линия (градиент --edge справа почти прозрачный, и край веера терялся) */
html.pin .card>*{transition:opacity var(--d-s) var(--e-out)}
html.pin .deck-track.fx .card:not(.lit)>*{opacity:0}   /* .fx — от fx-home.js; без него всё видно */
html.pin .deck-track.fx .card:not(.top)::after{opacity:1; background:rgb(181 171 252/.42)}
/* под верхней — только край; клик по нему (и по невидимой ушедшей) не фокусирует чужую карточку */
html.pin .deck-track.fx .card:not(.top){pointer-events:none}
html.pin .deck-track .card:focus-within>*,html.pin .deck-track.fx .card:focus-within>*{opacity:1}
html.pin .deck-num{display:block}
html.pin .deck,html.pin .deck-idx,html.pin .deck-num{grid-row:1}
/* свет сцены — свой sticky-слой рядом с кадром, а не внутри (overflow:hidden кадра резал пятна полосой на входе и выходе).
   margin-top:-100svh кладёт его на место кадра (снизу отступ дал бы лишние 100svh прилипания); z-index:-1 — под кадром
   и «дырами», над пятнами секции */
.deck-sky{display:none}
html.pin .deck-sky{display:block; position:sticky; inset:auto; top:0; height:100svh; margin-top:-100svh; z-index:-1}
html.pin .deck-sky .tl{left:8%; top:24%} html.pin .deck-sky .br{left:94%; top:80%}
/* счётчик «01 / 05» и точки */
.deck-num{display:none; grid-column:3; justify-self:end; text-align:right}
.deck-num p{margin:0; font-size:clamp(96px,10vw,150px); line-height:.9; font-weight:300; letter-spacing:-.04em; color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap}
.deck-num b{font-weight:300}
.deck-num p span{font-size:.2em; letter-spacing:.04em; color:var(--lav); vertical-align:top; margin-left:.3em}
.deck-dots{display:flex; justify-content:flex-end; gap:9px; margin-top:22px}
.deck-dots i{width:8px; height:8px; border-radius:50%; box-shadow:inset 0 0 0 1.5px rgb(181 171 252/.5); transition:background var(--d-s),box-shadow var(--d-s),transform var(--d-s) var(--e-out)}
.deck-dots i.on{background:var(--lav); box-shadow:0 0 10px rgb(123 97 255/.9); transform:scale(1.25)}
html.pin .deck-idx{display:block; grid-column:1; justify-self:start; margin:0; padding:0; list-style:none; max-width:300px}
.deck-idx li{display:flex; gap:12px; padding:9px 0; font-size:12px; font-weight:500; line-height:1.35; letter-spacing:.08em; text-transform:uppercase; color:var(--text-2); border-top:1px solid rgb(255 255 255/.08); transition:color var(--d-s)}
.deck-idx li span{color:rgb(181 171 252/.75); font-variant-numeric:tabular-nums}
.deck-idx li.on{color:var(--text)} .deck-idx li.on span{color:var(--lav); text-shadow:0 0 10px rgb(123 97 255/.9)}
/* 1100–1279: карточка узкая (500px) и потому выше — 460, а не 430: иначе в RU сноска (05) упиралась в нижний край */
@media (min-width:1100px) and (max-width:1279px){ html.pin .deck{--cw:500px; --ch:460px} html.pin .card{padding:24px} html.pin .deck-idx{max-width:220px} }
/* < 1100: CSS-стопка (работает и без JS) */
@media (max-width:1099px){
  .deck{max-width:640px; margin:0 auto; padding:0 var(--gutter)}
  .card{position:sticky; top:calc(84px + var(--i) * 14px); margin-bottom:28px; min-height:min(62svh,480px); background:linear-gradient(rgb(255 255 255/.06),rgb(255 255 255/.02)),rgb(13 11 36)}   /* непрозрачно: текст нижней карточки не просвечивает */
}
@media (max-width:1099px) and (max-height:640px){ .card{position:relative; top:auto; min-height:0} }
@media (max-width:420px){ .card{padding:22px 20px} }

/* (06)–(09) (примечание .note — nebula.css) */
.more{position:relative; isolation:isolate; margin-top:clamp(64px,9vw,128px)}
.more>.neb{left:calc(50% - 50vw); right:calc(50% - 50vw)}
.more .neb .bl{left:6%; top:70%} .more .neb .tr{left:94%; top:20%}
.row{display:grid; grid-template-columns:72px minmax(0,4fr) minmax(0,7fr); gap:16px 28px; padding:30px 0; border-top:1px solid var(--hair)}
.row:last-of-type{border-bottom:1px solid var(--hair)}
.row .ix{padding-top:9px; font-size:12px; font-weight:500; letter-spacing:.08em; color:var(--lav); font-variant-numeric:tabular-nums}
.row h3{margin:0; font-size:clamp(26px,2.8vw,36px); line-height:1.1; font-weight:300; letter-spacing:-.02em; text-transform:uppercase}
.row-b>p{margin:0 0 14px; color:var(--text-2)}
.protos{display:flex; flex-wrap:wrap; gap:8px}
.protos span{font-size:12.5px; font-weight:500; padding:5px 11px; border-radius:var(--r-pill); background:rgb(255 255 255/.04); box-shadow:inset 0 0 0 1px rgb(255 255 255/.12)}
@media (max-width:700px){ .row{grid-template-columns:1fr; gap:10px; padding:24px 0} .row .ix{padding:0} }

/* 4. галерея (статус-метки .st — nebula.css) */
.plats .neb .tl{top:30%} .plats .neb .br{top:76%}
.gal{position:relative; display:grid; grid-template-columns:1fr 1fr; margin-top:clamp(40px,5vw,72px)}
/* overflow-x:auto ряда режет неоновую тень карточек (~60px под карточкой) ровной линией: +36px поля снизу, отрицательный margin возвращает раскладку */
.gal-row{grid-column:1 / -1; grid-row:1; display:flex; gap:14px; margin:0 0 -36px; padding:36px max(var(--gutter),calc((100% - var(--wrap)) / 2 + var(--gutter))) 72px; list-style:none;
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain}
.gal-row::-webkit-scrollbar{display:none}
/* изогнутый ряд (JS, без RM и ?shot) */
.gal-row.curved{padding-inline:calc(50% - 140px)}   /* любую карточку можно поставить в центр */
.gal-row:focus-visible{outline-offset:-4px}
.gal-row>li{flex:0 0 280px; height:360px; scroll-snap-align:center; --d:0; --ad:0; --dim:max(.7,1 - var(--ad) * .15);
  transform:perspective(1200px) translateZ(calc(var(--ad) * -15px)) rotateY(clamp(-7deg,calc(var(--d) * -6deg),7deg)); cursor:pointer}   /* поворот ≤ ±7°, глубина ≤ −30px */
/* дальние карточки гаснут (≥ .7) блеском стекла, светом, гранью, тенью и значком; тексты — нет: контраст ≥ 4.5:1 */
.gal-row .plc{background:linear-gradient(rgb(255 255 255/calc(.06 * var(--dim))),rgb(255 255 255/calc(.02 * var(--dim)))),rgb(13 11 36/.62);
  box-shadow:inset 0 1px 0 rgb(255 255 255/calc(.08 * var(--dim))),0 28px 70px -38px rgb(123 97 255/calc(.6 * var(--dim)))}
.gal-row .plc::before,.gal-row .plc::after,.gal-row .plc .pi{opacity:var(--dim)}
.gal-row .plc::before{transition:none}
.plc{display:flex; flex-direction:column; gap:8px; height:100%; padding:28px; color:var(--text); text-decoration:none; --gx:86%; --gy:14%; --ga:.42}   /* свет — в углу напротив текста */
.plc .pi{display:grid; place-items:center; width:56px; height:56px; margin-bottom:auto; border-radius:50%; color:var(--lav); box-shadow:inset 0 0 0 1px rgb(181 171 252/.45),0 0 26px -6px rgb(123 97 255/.75); background:rgb(123 97 255/.14)}
.plc .pi svg{width:26px; height:26px}
.plc b{font-size:30px; line-height:1.05; font-weight:300; letter-spacing:-.02em}   /* имена платформ — как пишутся (iPhone, macOS), без капса */
.plc small{font-size:13.5px; line-height:1.45; color:var(--text-2)}
.plc .st{align-self:flex-start; margin-top:12px}
/* «Ваша система» (fx-home.js) */
.plc.me::after{background:linear-gradient(160deg,rgb(181 171 252/.8),rgb(255 255 255/.08) 40%,rgb(123 97 255/.5))}
.me-b{position:absolute; top:22px; right:22px; font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:#fff; padding:3px 10px; border-radius:var(--r-pill);
  background:linear-gradient(120deg,#5b3bef,#6d4cff 58%,#8d42e8)}
a.plc:hover,a.plc:focus-visible{--ga:.4}   /* карточка-ссылка: сейчас таких нет, нужна для будущей «Скачать» */
.plc .comet{border-radius:var(--r-xl)}
@media (hover:hover) and (pointer:fine){ .plc:hover .comet{opacity:1} }
.plc:focus-visible .comet{opacity:1}
.gal-b{grid-row:2; z-index:2; display:none; place-items:center; width:44px; height:44px; margin-top:4px; border:0; border-radius:50%; cursor:pointer;
  color:var(--text); background:rgb(13 11 36/.7); box-shadow:inset 0 0 0 1px rgb(181 171 252/.35); transition:box-shadow var(--d-s)}
.gal-b svg{width:20px; height:20px}
.gal-b:hover{box-shadow:inset 0 0 0 1px var(--lav),0 0 18px -4px rgb(123 97 255/.8)}
.gal-b.prev{justify-self:end; margin-right:8px} .gal-b.next{justify-self:start; margin-left:8px}
@media (hover:hover) and (pointer:fine) and (min-width:701px){ .gal.is-curved .gal-b{display:grid} }
@media (max-width:700px){ .gal-row,.gal-row.curved{padding-inline:11vw; gap:12px} .gal-row>li{flex-basis:78vw; height:340px} }

/* FAQ, финал и подвал — nebula.css */

/* режимы для блоков главной (общие — в конце nebula.css); здесь они идут после базовых правил блоков, которые перекрывают */
@media (prefers-reduced-motion:reduce){
  .tg::after,.globe canvas{transition:none}
}
@media (prefers-reduced-transparency:reduce){ .pane,.cap,.gal-row .plc{background:#120F2C} }   /* .pane — повтор: после фона карточек колоды (<1100) */
@media (prefers-contrast:more){ .disp .acc{background:none; color:var(--lav)} }
@media (forced-colors:active){
  .cap,.gal-b{border:1px solid CanvasText}
  .globe,.mf-sky,.w-box::before,.p-box::before,.deck::before{display:none}
  .disp .ln{background:none; color:CanvasText}
}