/* outsky.app — общая основа страниц в концепции «Туманность»: токены, база и типографика, фон (зерно, свечение у курсора,
   созвездия, туманности), стекло, пилюли, метки, шапка и меню, заголовки секций, FAQ, финал и подвал, режимы.
   Порядок подключения: fonts.css → nebula.css → (app-ui.css — только где есть макет приложения) → CSS страницы (home.css у главной).
   Шрифт Inter — /assets/css/fonts.css (начертания 300–800). Поведение — core.js и sky.js. */
:root{
  --ok:#4ADE80; --warn:#FACC15; --err:#F87171;
  --r-sm:12px; --r-md:16px; --r-xl:28px; --r-pill:999px;
  --wrap:1180px; --gutter:clamp(16px,4vw,24px); --sec-y:clamp(96px,11vw,160px); --header-h:64px;
  --z-header:50; --z-grain:60; --z-menu:100;
  --e-out:cubic-bezier(.17,.25,.30,1);    /* появления */
  --e-mech:cubic-bezier(.7,0,.3,1);       /* переключатели */
  --e-expo:cubic-bezier(.16,1,.3,1);      /* вход сцены */
  --e-film:cubic-bezier(.2,.7,.2,1);      /* «кино»: проявления 1.0–1.4s */
  --d-xs:.15s; --d-s:.3s; --d-m:.5s; --d-l:.8s; --st-card:.06s;
  --font:"Inter","Inter Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,"Cascadia Code","SF Mono",Consolas,monospace;   /* своего моно-файла нет — системный */
  --ink:#07081C; --text:#F3F5FE; --text-2:#BEBBD8; --hair:rgb(255 255 255/.14); --lav:#B5ABFC; --violet:#7B61FF;
  --grad-text:linear-gradient(100deg,#e7e5fe 0%,#b5abfc 35%,#7b61ff 70%,#a24bf0 100%);   /* акцентная строка */
  --grad-glass:linear-gradient(#fff 22.5%,rgb(255 255 255/.7));                           /* «стеклянная» строка */
  --hg:clamp(16px,4vw,56px);                 /* поля первого экрана и шапки */
  --glass:linear-gradient(rgb(255 255 255/.06),rgb(255 255 255/.02)),rgb(13 11 36/.62);
  --edge:linear-gradient(160deg,rgb(181 171 252/.7),rgb(255 255 255/.07) 38%,rgb(123 97 255/.5));
  --mask-ring:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
}
/* против CLS при подмене шрифта (на Android Arial нет — там системный фолбэк) */
@font-face{ font-family:"Inter Fallback"; src:local("Arial"); size-adjust:107.4%; ascent-override:90.2%; descent-override:22.48%; line-gap-override:0% }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%; background:var(--ink); color-scheme:dark}
body{margin:0; font-family:var(--font); -webkit-font-smoothing:antialiased; overflow-x:clip; background:var(--ink); color:var(--text); font-size:17px; line-height:1.6}
img,svg{max-width:100%}
a{color:inherit}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid #B5ABFC; outline-offset:3px}
::selection{background:rgb(123 97 255/.45); color:#fff}
/* «К содержимому» (и «Пропустить» перед закреплённой колодой главной) — видны только в фокусе */
.skip{position:absolute; left:var(--gutter); top:8px; z-index:var(--z-menu); padding:10px 16px; border-radius:var(--r-pill);
  background:#120D2B; color:#F3F5FE; text-decoration:none; transform:translateY(-200%)}
.skip:focus{transform:none}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter)}
.sec{position:relative; isolation:isolate; overflow-x:clip; padding:calc(var(--sec-y) * .62) 0}   /* clip не ломает sticky */
/* первый экран внутренней страницы: отступ под закреплённую шапку, как у .hero главной (home.css) */
.sec-top{position:relative; isolation:isolate; overflow-x:clip; padding:calc(var(--header-h) + clamp(18px,4.2vh,44px)) 0 clamp(56px,7vw,96px)}

/* появления: начальные «скрытые» состояния — только с JS, без ?shot и без reduced-motion (core.js ставит .is-in) */
@media (prefers-reduced-motion:no-preference){
  html.js:not(.shot) .rv{opacity:0; transform:translateY(16px); transition:opacity var(--d-l) var(--e-out), transform var(--d-l) var(--e-out); transition-delay:calc(var(--i,0) * var(--st-card))}
  html.js:not(.shot) .rv.is-in{opacity:1; transform:none}
}
/* закреплённые сцены (core.js, [data-track]): только с html.pin (≥1100×680, JS, без RM и ?shot) — иначе обычный поток */
html:not(.pin) [data-track]{height:auto !important}
html:not(.pin) [data-track] > .pin-frame{position:static; height:auto}

/* зерно: SVG feTurbulence поверх всего, еле заметное; тайл сдвигается раз в .4 с — только мышь и ≥981px */
.grain{position:fixed; inset:0; z-index:var(--z-grain); pointer-events:none; overflow:hidden}
.grain i{position:absolute; inset:-64px; opacity:.065; mix-blend-mode:lighten;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1.6 0 0 0 -.55 1.6 0 0 0 -.55 1.6 0 0 0 -.55 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/128px 128px}
@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine) and (min-width:981px){
  html.js:not(.shot) .grain i{animation:grain-calm 1.6s steps(1,end) infinite}
}
@keyframes grain-calm{0%{transform:translate(0,0)} 25%{transform:translate(-23px,17px)} 50%{transform:translate(31px,-9px)} 75%{transform:translate(-11px,-29px)}}
@media (max-width:980px){ .grain i{mix-blend-mode:normal; opacity:.028} }
@media (max-width:420px){ .grain{display:none} }

/* свечение у курсора: один слой под секциями (туманности и «дыры» его приглушают), двигается только transform; включает sky.js (html.cg) */
.cglow{display:none; position:fixed; left:0; top:0; z-index:0; width:960px; height:960px; margin:-480px 0 0 -480px; border-radius:50%; pointer-events:none; opacity:0;
  background:radial-gradient(closest-side,rgb(141 66 232/.19),rgb(123 97 255/.1) 18%,rgb(123 97 255/.045) 44%,rgb(123 97 255/.016) 70%,transparent);
  visibility:hidden; transition:opacity .6s var(--e-out),visibility 0s .6s; will-change:transform}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){ html.cg:not(.shot) .cglow{display:block} }
.cglow.on{opacity:1; visibility:visible; transition:opacity .6s var(--e-out)}

/* созвездия на фоне (/assets/img/constellations.svg): еле видимые, только в пустых полях (не под текстом и кнопками),
   не больше двух на экран 1440×900. По умолчанию скрыты: место, размер, поворот, яркость и ширины, с которых видно, —
   класс места на странице (здесь — для FAQ и финала, остальные главной — в home.css) */
.cst{position:absolute; z-index:-1; pointer-events:none; color:#B5ABFC; opacity:.16; overflow:visible; height:auto; display:none}
.c-cygnus{left:calc((100% - 868px) / 4 - 46px); top:20%; width:92px; rotate:10deg; opacity:.15}        /* FAQ: посреди левого поля, ниже линии-горизонта (Лебедь) */
.c-dra{right:calc((100% - 868px) / 4 - 65px); top:52%; width:130px; rotate:-6deg; opacity:.14}         /* FAQ: посреди правого поля (Дракон) */
.c-cass2{left:7%; top:clamp(24px,8vw,120px); width:clamp(96px,10vw,140px); rotate:5deg; opacity:.15}    /* финал: верхнее поле слева */
.c-peg{right:6%; bottom:clamp(20px,3vw,40px); width:clamp(110px,10vw,150px); rotate:-4deg; opacity:.14} /* финал: низ справа, над горизонтом (Пегас) */
.c-cass2{display:block}
@media (min-width:700px){ .c-peg{display:block} }
@media (min-width:1240px){ .c-cygnus{display:block} }
@media (min-width:1320px){ .c-dra{display:block} }

/* туманности: пятна не режутся по высоте секции — свет перетекает без полос; низ режет main{overflow:clip} (sticky работает) */
main{overflow:clip}
.neb{position:absolute; inset:0; overflow-x:clip; z-index:-1; pointer-events:none}
.neb i{position:absolute; width:clamp(560px,88vw,1300px); aspect-ratio:1; border-radius:50%; translate:-50% -50%;
  background:radial-gradient(closest-side,rgb(142 123 255/.42),rgb(75 54 201/.24) 48%,transparent 74%)}
.neb i.ind{background:radial-gradient(closest-side,rgb(74 70 216/.44),rgb(31 23 96/.28) 48%,transparent 74%)}
.neb i.mag{background:radial-gradient(closest-side,rgb(141 66 232/.38),rgb(91 59 239/.2) 48%,transparent 74%)}   /* пурпур края залитой кнопки приложения */
.neb .tr{left:86%; top:16%} .neb .tl{left:12%; top:16%} .neb .br{left:88%; top:84%} .neb .bl{left:10%; top:84%}
.neb .bc{left:50%; top:96%; width:70vw} .neb .tr2{left:62%; top:4%; width:52vw}
/* свет разгорается при входе */
@media (prefers-reduced-motion:no-preference){
  html.js:not(.shot) [data-live] > .neb i{opacity:0; transition:opacity 1.6s var(--e-out)}
  html.js:not(.shot) [data-live].is-live > .neb i{opacity:1}
}
/* дрейф: ≥980px, .is-live */
@media (prefers-reduced-motion:no-preference) and (min-width:980px){
  html.js:not(.shot) .is-live > .neb i{animation:drift 34s ease-in-out infinite alternate}
  html.js:not(.shot) .is-live > .neb i:nth-child(2){animation-duration:40s; animation-delay:-14s}
  html.js:not(.shot) .is-live > .neb i:nth-child(3){animation:none}
}
@keyframes drift{from{transform:translate(-3vw,-2vh) scale(1)} to{transform:translate(3vw,2vh) scale(1.06)}}
@media (max-width:980px){ .neb i{width:140vw} .neb i:nth-child(3){display:none} }

/* «дыра»: под абзацем свет ≤ .30 */
.hole{position:relative; isolation:isolate}
.hole::before{content:""; position:absolute; inset:-16% -10%; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side,rgb(7 8 28/.82) 40%,transparent)}

/* стекло */
.pane{position:relative; isolation:isolate; overflow:hidden; border-radius:var(--r-xl); background:var(--glass);
  box-shadow:inset 0 1px 0 rgb(255 255 255/.08),0 28px 70px -38px rgb(123 97 255/.6)}   /* блик сверху и неоновая тень снизу */
.pane::before{content:""; position:absolute; inset:-10%; z-index:-1; pointer-events:none; transition:opacity .6s var(--e-out);
  background:radial-gradient(50% 44% at var(--gx,85%) var(--gy,90%),rgb(142 123 255/var(--ga,.32)),rgb(91 59 239/.08) 55%,transparent 72%),
             radial-gradient(35% 30% at 10% 8%,rgb(74 70 216/.18),transparent 70%)}
.pane::after{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; background:var(--edge);
  -webkit-mask:var(--mask-ring); -webkit-mask-composite:xor; mask:var(--mask-ring); mask-composite:exclude}

/* пилюли и комета */
.pill{--pl:var(--pl0,28px); position:relative; isolation:isolate; display:inline-flex; align-items:center; gap:10px; min-height:52px; padding:0 28px 0 var(--pl);
  border-radius:var(--r-pill); color:var(--text); text-decoration:none; font-size:15px; font-weight:500; line-height:1.2; background:rgb(13 11 36/.55);
  transition:transform var(--d-xs) var(--e-out),padding var(--d-l) var(--e-out),box-shadow var(--d-m) var(--e-out)}
.pill>svg{width:18px; height:18px; flex-shrink:0}
.pill::after{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(90deg,rgb(255 255 255/.30),rgb(255 255 255/.14));
  -webkit-mask:var(--mask-ring); -webkit-mask-composite:xor; mask:var(--mask-ring); mask-composite:exclude}
.pill-main{background:linear-gradient(rgb(123 97 255/.16),rgb(123 97 255/.05)),rgb(13 11 36/.6); box-shadow:0 0 24px rgb(123 97 255/.30)}
.pill-main::after{background:linear-gradient(90deg,rgb(181 171 252/.6),rgb(123 97 255/.35))}
.pill:active{transform:scale(.98)}
.pill .arr{transition:transform var(--d-l) var(--e-out)}
.comet{position:absolute; inset:0; border-radius:inherit; padding:1.5px; overflow:hidden; opacity:0; pointer-events:none; transition:opacity var(--d-m) var(--e-out);
  -webkit-mask:var(--mask-ring); -webkit-mask-composite:xor; mask:var(--mask-ring); mask-composite:exclude}
.comet i{position:absolute; left:50%; top:50%; width:150%; aspect-ratio:1; translate:-50% -50%;
  background:conic-gradient(transparent 0,#7B61FF 5%,#fff 10%,#7B61FF 15%,transparent 20%)}
@media (hover:hover) and (pointer:fine){
  .pill:hover .comet{opacity:1; animation:none}
  .pill-main:hover{box-shadow:0 0 32px rgb(123 97 255/.42)}
  .pill-line:hover{--pl:calc(var(--pl0,28px) + 12px)}
  .pill-line:hover .arr{transform:translateX(4px)}
}
.pill:focus-visible .comet{opacity:1; animation:none}
@media (prefers-reduced-motion:no-preference){
  .comet i{animation:spin 4.5s linear infinite paused}
  .pill:hover .comet i,.pill:focus-visible .comet i{animation-play-state:running}
}
@keyframes spin{to{rotate:1turn}}
@media (max-width:759px){ .pill{min-height:48px; padding-right:22px; --pl:22px} }

/* микро-капс: метки и ссылки */
.kick{display:table; margin:0 auto 44px; padding:8px 16px; border-radius:var(--r-pill); font-size:12px; font-weight:500; line-height:1.3; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text); background:rgb(13 11 36/.6); box-shadow:inset 0 0 0 1px var(--hair)}
.micro{margin:0; font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--lav)}

/* шапка: закреплена всегда, под ней матовая полоса в цвет фона и волосяная линия снизу */
.hd{position:fixed; top:0; left:0; right:0; z-index:var(--z-header); height:var(--header-h); display:flex; align-items:center; gap:clamp(16px,2.6vw,36px);
  padding:0 var(--hg)}
.hd-frost{position:absolute; inset:0; z-index:-1; background:rgb(7 8 28/.9); border-bottom:1px solid rgb(181 171 252/.14)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hd-frost{background:rgb(7 8 28/.62); -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%)}
}
/* якоря не прячутся под шапкой */
[id]{scroll-margin-top:calc(var(--header-h) + 16px)}
/* и фокус с клавиатуры (Shift+Tab вверх) не прячется под шапкой; внутри превью приложения — свои списки, их не трогаем */
:where(a,button,summary,[tabindex]):not(.os-ui *){scroll-margin-top:calc(var(--header-h) + 16px)}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); flex-shrink:0}
.logo .mark{display:block; width:30px; height:30px; border-radius:8px; box-shadow:0 0 16px rgb(123 97 255/.4)}
.word{font-weight:700; font-size:16px; letter-spacing:-.01em} .word b{color:var(--lav); font-weight:700}
.hd-nav{display:flex; align-items:center; gap:clamp(18px,2.4vw,32px); margin-left:auto}
.hd-nav a,.lang a{font-size:13px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--text-2); text-decoration:none; transition:color var(--d-s)}
.hd-nav a:hover,.lang a:hover{color:var(--text)}
.hd-nav .vpn i{font-style:normal; font-size:10px; letter-spacing:.06em; margin-left:7px; padding:1px 7px; border-radius:var(--r-pill); color:var(--lav); box-shadow:inset 0 0 0 1px rgb(181 171 252/.35); vertical-align:2px}
.lang{display:flex; gap:12px}
.lang a.on{color:var(--text); box-shadow:0 1px 0 var(--lav)}
/* текущая страница — aria-current="page" на ссылке шапки, меню и подвала (у главной таких ссылок нет) */
.hd-nav a[aria-current=page]{color:var(--text); box-shadow:0 1px 0 var(--lav)}
.menu-btn{display:none; margin-left:auto; align-items:center; gap:10px; height:40px; padding:0 18px; border:0; border-radius:var(--r-pill); cursor:pointer; text-decoration:none;
  background:rgb(13 11 36/.6); box-shadow:inset 0 0 0 1px var(--hair); color:var(--text); font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase}
.menu-btn i{position:relative; width:16px; height:6px; border-block:1.5px solid currentColor; transition:transform var(--d-s) var(--e-out)}
body:has(#menu:popover-open) .menu-btn i{transform:scaleY(.25)}
@media (max-width:980px){
  .hd-nav,.hd>.lang{display:none}
  @supports selector(:popover-open){ .menu-btn:not(.menu-fb){display:inline-flex} }
  @supports not selector(:popover-open){ .menu-fb{display:inline-flex} }
}
@supports not selector(:popover-open){ #menu{display:none} }
/* меню под шапкой: кнопка видна и закрывает его */
#menu{inset:var(--header-h) 0 0; width:auto; height:auto; max-width:none; max-height:none; margin:0; border:0; padding:32px var(--hg) 40px;
  background:var(--ink); color:var(--text); overflow:auto; overscroll-behavior:contain}
#menu:popover-open{display:flex; flex-direction:column; justify-content:space-between; gap:32px}
#menu .neb{position:fixed; inset:var(--header-h) 0 0}
.menu-list{margin:0; padding:0; list-style:none}
.menu-list a{display:flex; align-items:baseline; gap:14px; padding:10px 0; font-size:clamp(26px,9vw,40px); line-height:1.1; font-weight:300; letter-spacing:-.02em; text-transform:uppercase;
  color:var(--text); text-decoration:none; border-bottom:1px solid var(--hair)}
.menu-list .ix{font-size:12px; font-weight:500; letter-spacing:.04em; color:var(--lav); font-variant-numeric:tabular-nums}
.menu-list a i{font-style:normal; font-size:12px; letter-spacing:.08em; color:var(--lav); align-self:center}
.menu-list a[aria-current=page]{color:var(--lav)}
#menu .lang a{font-size:15px}

/* первый экран: метка-ссылка, h1, вводный абзац, кнопки, галочки (раскладку сцены страница задаёт сама) */
.tag{display:inline-flex; align-items:center; flex-wrap:wrap; gap:6px 10px; padding:5px 14px 5px 5px; border-radius:var(--r-pill); text-decoration:none; color:var(--text-2); font-size:13px; line-height:1.3;
  background:var(--glass); box-shadow:inset 0 0 0 1px rgb(181 171 252/.22)}
.tag .dot{display:inline-flex; align-items:center; gap:7px; padding:4px 10px; border-radius:var(--r-pill); background:rgb(123 97 255/.2); color:#E7E5FE;
  font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase}
.tag .dot::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--lav); box-shadow:0 0 8px var(--lav)}
.tag .ar{color:var(--lav); transition:transform var(--d-s) var(--e-out)}
.tag:hover .ar{transform:translateX(3px)}
/* заголовки: Inter 700, обычный регистр; строка — «стекло», акцентная — --grad-text; «лесенка» — сдвигом */
.h1{margin:22px 0 0; font-weight:700; font-size:clamp(40px,5vw,72px); line-height:1.02; letter-spacing:-.035em; color:var(--text)}
.h1 .ln{display:block; width:fit-content; padding-bottom:.04em; background:var(--grad-glass); -webkit-background-clip:text; background-clip:text; color:transparent}
.h1 .l2{margin-left:.6em}
.h1 .l3{margin-left:1.2em; background:var(--grad-text); -webkit-background-clip:text; background-clip:text}
.h1 .acc{background:var(--grad-text); -webkit-background-clip:text; background-clip:text}   /* акцентная строка без «лесенки» (внутренние страницы) */
/* h1: с .2, не с нуля (LCP); на ≤980px без анимации */
@media (prefers-reduced-motion:no-preference) and (min-width:981px){
  html.js:not(.shot) .h1 .ln{animation:h1in 1s var(--e-film) both; animation-delay:calc(var(--i,0) * .12s)}
}
@keyframes h1in{from{opacity:.2; filter:blur(6px)} to{opacity:1; filter:none}}
.lead{margin:0; max-width:560px; font-size:18px; line-height:1.55; color:var(--text-2)}
.lead b{color:var(--text); font-weight:600}
.ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px}
.checks{display:flex; flex-wrap:wrap; gap:10px 22px; margin:20px 0 0; padding:0; list-style:none}
.checks li{display:flex; align-items:center; gap:7px; font-size:12px; font-weight:500; line-height:1.3; letter-spacing:.08em; text-transform:uppercase; color:var(--text-2)}
.checks svg{width:14px; height:14px; color:var(--lav); flex-shrink:0}
@media (max-width:759px){
  .tag{border-radius:18px; padding:6px 14px 8px 6px} .tag>span:nth-child(2){padding-left:6px}
  .lead{font-size:17px}
}
@media (max-width:359px){ .tag{font-size:12px} }
@media (max-width:700px){ .h1 .l2{margin-left:.4em} .h1 .l3{margin-left:.8em} }
/* ≤480: каждая строка — в одну строку (акцентная чуть меньше, ≥ 24px) */
@media (max-width:480px){ .h1{font-size:min(40px,10vw)} .h1 .l3{margin-left:.4em; font-size:max(24px,.8em)} }
@media (max-width:359px){ .h1 .l2{margin-left:.2em} .h1 .l3{margin-left:0} }

/* строки из размытия — по строкам, градиент строки цельный */
@media (prefers-reduced-motion:no-preference){
  html.js:not(.shot) .rv.wr,html.js:not(.shot) .rv.ritual{opacity:1; transform:none}
  html.js:not(.shot) .wr .ln{opacity:0; transform:scale(.96); transform-origin:0 60%; transition:opacity 1.4s var(--e-film),transform 1.4s var(--e-film),filter 1.4s var(--e-film);
    transition-delay:calc(var(--i,0) * .14s)}
  html.js:not(.shot) .wr.is-in .ln{opacity:1; transform:none; filter:none}
  /* метка-пилюля после ритуала */
  html.js:not(.shot) .kick.rv{transform:scale(.9); transition:opacity var(--d-m) var(--e-expo) 1.1s,transform var(--d-m) var(--e-expo) 1.1s}
  html.js:not(.shot) .kick.rv.is-in{transform:none}
  /* приглушённые строки списка (на главной — (06)–(09)): 0.35 → 1 */
  html.js:not(.shot) .rv.dim{opacity:.35; transform:none; transition:opacity 1s var(--e-out); transition-delay:calc(var(--i,0) * .15s)}
  html.js:not(.shot) .rv.dim.is-in{opacity:1}
}
@media (prefers-reduced-motion:no-preference) and (min-width:1100px){ html.js:not(.shot) .wr .ln{filter:blur(10px)} }
/* фокус с клавиатуры: блок с фокусом (или с фокусом внутри) виден сразу, не дожидаясь появления, — иначе кольцо фокуса почти не видно */
@media (prefers-reduced-motion:no-preference){
  html.js:not(.shot) :is(.rv:focus-visible,.rv:has(:focus-visible)){opacity:1; transform:none; transition:none}
}

/* ритуал над заголовком секции: вертикаль → горизонт → звезда → метка */
.ritual{position:relative; height:112px; margin:0 0 24px}
.ritual .r-v{position:absolute; left:50%; top:0; width:1px; height:96px; background:linear-gradient(rgb(181 171 252/0),rgb(181 171 252/.7)); transform-origin:50% 0}
.ritual .r-h{position:absolute; left:0; right:0; top:96px; height:1px; background:radial-gradient(closest-side,rgb(181 171 252/.75),rgb(255 255 255/.14) 60%,transparent)}
.ritual .r-star{position:absolute; left:50%; top:96px; width:16px; height:16px; margin:-8px 0 0 -8px; fill:#E7E5FE; filter:drop-shadow(0 0 6px rgb(181 171 252/.8))}
@media (prefers-reduced-motion:no-preference){
  html.js:not(.shot) .ritual .r-v{transform:scaleY(0); transition:transform .9s var(--e-out)}
  html.js:not(.shot) .ritual .r-h{transform:scaleX(0); transition:transform var(--d-l) var(--e-out) .5s}
  html.js:not(.shot) .ritual .r-star{transform:scale(0) rotate(-45deg); transition:transform var(--d-m) var(--e-expo) .9s}
  html.js:not(.shot) .ritual.is-in .r-v,html.js:not(.shot) .ritual.is-in .r-h,html.js:not(.shot) .ritual.is-in .r-star{transform:none}
}

/* заголовок секции: метка .kick, h2 строками (.ln, акцентная — .acc), абзац справа .sh-p */
.h2{margin:0; font-weight:700; font-size:clamp(32px,4.2vw,60px); line-height:1.05; letter-spacing:-.03em}
.h2 .ln{display:block; width:fit-content; padding-bottom:.05em; background:var(--grad-glass); -webkit-background-clip:text; background-clip:text; color:transparent}
.h2 .l2{margin-left:1.2em}
.h2 .acc{background:var(--grad-text); -webkit-background-clip:text; background-clip:text}
.sh{position:relative}
.sh-p{max-width:470px; margin:32px 0 0 auto; color:var(--text-2)}
@media (max-width:700px){ .h2 .l2{margin-left:.5em} .sh-p{margin-left:0} }

/* мелочи: сноска, примечание, список с галочками, статус-метка (.dev — в разработке, .plan — запланировано, .av — доступно) */
.fnote{margin:12px 0 0; font-size:13px; line-height:1.5; color:var(--text-2)}
.note{margin:40px 0 0; font-size:14px; color:var(--text-2); text-align:center}
/* ul: у окна приложения есть свой класс .mini (свёрнутое меню) — без тега правила списка ломали бы его */
ul.mini{display:grid; gap:8px; margin:0; padding:0; list-style:none}
ul.mini li{display:flex; align-items:flex-start; gap:9px; font-size:14px; line-height:1.45; color:var(--text)}
ul.mini svg{width:16px; height:16px; margin-top:2px; color:var(--lav); flex-shrink:0}
.st{font-size:12px; font-weight:500; letter-spacing:.04em; padding:5px 12px; border-radius:var(--r-pill); white-space:nowrap}
.st.dev{color:#E7E5FE; background:rgb(123 97 255/.22); box-shadow:inset 0 0 0 1px rgb(181 171 252/.4)}
.st.plan{color:#E2E0F2; background:rgb(255 255 255/.05); box-shadow:inset 0 0 0 1px rgb(255 255 255/.12)}   /* светлее --text-2: 12px на наклонённых дальних карточках растрируется мягче */
.st.av{color:#bbf7d0; background:rgb(74 222 128/.14); box-shadow:inset 0 0 0 1px rgb(74 222 128/.38)}

/* FAQ */
.faq-in{max-width:868px}
.faq .h2{margin-bottom:44px}
.faq-list{interpolate-size:allow-keywords}
.faq-list details{border-top:1px solid var(--hair); transition:border-color .4s}
.faq-list details:last-child{border-bottom:1px solid var(--hair)}
.faq-list details:hover{border-top-color:rgb(181 171 252/.4)}
.faq-list summary{position:relative; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px 40px 22px 0; cursor:pointer; list-style:none; font-size:19px; line-height:1.35}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::before,.faq-list summary::after{content:""; position:absolute; right:4px; top:50%; width:16px; height:1.5px; margin-top:-.75px; background:var(--lav); transition:transform var(--d-s) var(--e-out)}
.faq-list summary::before{transform:rotate(90deg)}
.faq-list details[open] summary::before{transform:none}
.faq-list p{margin:0; padding:0 48px 26px 0; color:var(--text-2)}
.faq-list details::details-content{block-size:0; overflow:hidden; transition:block-size .4s var(--e-out),content-visibility .4s allow-discrete}
.faq-list details[open]::details-content{block-size:auto}
@media (prefers-reduced-motion:reduce){ .faq-list details::details-content{transition:none} }

/* финал и подвал */
.fin{position:relative; isolation:isolate; overflow-x:clip; padding:clamp(96px,13vw,190px) 0 clamp(72px,8vw,120px); text-align:center}
.fin .neb .bl{top:88%} .fin .neb .br{top:86%} .fin .neb .bc{top:104%}
/* main{overflow:clip} режет пятна финала по верхней кромке подвала, а .ft>.neb{overflow:hidden} — пятно подвала по той же линии.
   Свет гаснет к линии горизонта с обеих сторон: у финала — маска снизу, у подвала — сверху */
.fin>.neb{-webkit-mask:linear-gradient(#000 calc(100% - 300px),rgb(0 0 0/.7) calc(100% - 200px),rgb(0 0 0/.32) calc(100% - 100px),rgb(0 0 0/.08) calc(100% - 30px),transparent);
  mask:linear-gradient(#000 calc(100% - 300px),rgb(0 0 0/.7) calc(100% - 200px),rgb(0 0 0/.32) calc(100% - 100px),rgb(0 0 0/.08) calc(100% - 30px),transparent)}
/* наш знак крупно со свечением, под ним слово OutSky стилем шапки */
.fin-mark{position:relative; display:block; width:clamp(104px,10vw,136px); aspect-ratio:1; margin:0 auto}
.fin-mark::before{content:""; position:absolute; inset:-70%; z-index:-1; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side,rgb(123 97 255/.5),rgb(91 59 239/.18) 50%,transparent 75%)}
.fin-mark img{display:block; width:100%; height:100%; border-radius:24%; box-shadow:0 0 60px rgb(123 97 255/.55),0 0 120px rgb(123 97 255/.25)}
.fin-word{margin:28px 0 0; font-weight:700; font-size:clamp(40px,4.6vw,64px); line-height:1.05; letter-spacing:-.03em; color:var(--text)}
.fin-word b{font-weight:700; color:var(--lav)}
.slogan{margin:18px 0 36px; font-size:clamp(20px,2vw,26px); line-height:1.35; font-weight:400; color:var(--text-2)}
.ft{position:relative; isolation:isolate; overflow-x:clip; padding:48px 0 40px}
.ft>.neb{left:calc(50% - 50vw); right:calc(50% - 50vw); overflow:hidden; -webkit-mask:linear-gradient(transparent,rgb(0 0 0/.3) 35%,#000 85%); mask:linear-gradient(transparent,rgb(0 0 0/.3) 35%,#000 85%)}
.ft .neb .bc{top:120%; width:90vw}
.ft::before{content:""; position:absolute; top:0; left:0; right:0; height:1px; background:radial-gradient(closest-side,rgb(181 171 252/.7),rgb(255 255 255/.14) 60%,transparent)}   /* горизонт над подвалом */
.ft-in{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px 40px}
/* стеклянная карточка-ссылка на канал */
.tg-card{display:flex; align-items:center; gap:14px; padding:14px 22px 14px 14px; border-radius:18px; color:var(--text); text-decoration:none; --gx:90%; --gy:120%; --ga:.3;
  transition:transform var(--d-s) var(--e-out),box-shadow var(--d-s)}
.tg-card .ic{display:grid; place-items:center; width:40px; height:40px; border-radius:12px; color:#fff; background:linear-gradient(120deg,#5b3bef,#6d4cff 58%,#8d42e8); box-shadow:0 0 14px -2px rgb(123 97 255/.8)}
.tg-card .ic svg{width:20px; height:20px}
.tg-card b{display:block; font-size:15px; font-weight:600} .tg-card small{display:block; font-size:13px; color:var(--lav)}
@media (hover:hover) and (pointer:fine){ .tg-card:hover{--ga:.45; transform:translateY(-3px)} }
.ft-row{display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px}
.ft-nav{display:flex; flex-wrap:wrap; gap:12px 28px}
.ft-nav a{font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--text-2); text-decoration:none; transition:color var(--d-s)}
.ft-nav a:hover,.ft-nav a[aria-current=page]{color:var(--text)}
.ft-lang{padding-left:28px; border-left:1px solid var(--hair)}
.ft-c{font-size:12px; letter-spacing:.04em; color:var(--text-2)}
@media (max-width:860px){ .ft-in{flex-direction:column; align-items:flex-start} .ft-lang{padding-left:0; border-left:0} }

/* режимы (для блоков страниц — в конце CSS страницы, после их базовых правил; см. home.css) */
/* ?shot (снимки): без переходов, анимации на паузе */
html.shot *,html.shot *::before,html.shot *::after{animation-play-state:paused !important; transition:none !important}
/* RM: без движения и на hover */
@media (prefers-reduced-motion:reduce){
  .pill,.pill .arr,.tag .ar,.menu-btn i,.faq-list summary::before,.faq-list summary::after{transition:none}
  .pill-line:hover{--pl:var(--pl0,28px)} .pill-line:hover .arr,.tag:hover .ar{transform:none} .pill:active{transform:none}
  .tg-card,.tg-card:hover{transform:none; transition:none}
}
@media (prefers-reduced-transparency:reduce){
  .pane,.tag,.kick{background:#120F2C}
  .hd-frost{background:#0D0B24; backdrop-filter:none; -webkit-backdrop-filter:none}
}
@media (prefers-contrast:more){
  :root{--hair:rgb(255 255 255/.4); --text-2:#DCDAF0}
  .pane::after,.pill::after{background:rgb(181 171 252/.7)}
  .h1 .l3,.h1 .acc,.h2 .acc{background:none; color:var(--lav)}
}
@media (forced-colors:active){
  .pane,.pill,.tag,.kick,.menu-btn{border:1px solid CanvasText}
  .pane::before,.pane::after,.pill::after,.comet,.neb,.grain,.hole::before,.ritual,.cglow,.fin-mark::before{display:none}
  .cst{display:none !important}   /* показ по ширинам — более сильными селекторами */
  .h1 .ln,.h2 .ln{background:none; color:CanvasText}
  .tg-card{border:1px solid CanvasText}
  /* текущая страница и язык: черта box-shadow в этом режиме пропадает — подчёркивание */
  .hd-nav a[aria-current=page],.menu-list a[aria-current=page],.ft-nav a[aria-current=page],.lang a.on{text-decoration:underline; text-underline-offset:4px}
}