/* Движение и глубина (Claude, 25.09.2026).
   html.motion — ставит motion.js, если не выбрано «Уменьшить движение»: появления, пыль, шапка, наклоны.
   html.rift   — ставит motion.js, если есть WebGL: сцена раскола на первом экране.
   Без скриптов сайт выглядит как раньше. Внешних библиотек нет — политика безопасности сайта
   разрешает только свои файлы (script-src 'self'). */
:root{--ease:cubic-bezier(.16,1,.3,1);--ease-soft:cubic-bezier(.45,0,.2,1)}

/* Картинка первого экрана: WebP 0,12 МБ вместо PNG 2,1 МБ; тот же файл берёт WebGL — второй загрузки нет. */
.hero-art{background-image:url('assets/hero.png');background-image:image-set(url('assets/hero.webp?v=20260925r2') type('image/webp'),url('assets/hero.png') type('image/png'))}

.hero-scene{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-layer{position:absolute;inset:0}
.hero-gl,.hero-light,.hero-dust,.rift-reveal{display:none}

/* ---------- первый экран ---------- */
html.motion .hero-layer{will-change:transform;transform:scale(1.08)}
html.motion .hero-scene{animation:scene-in 2.6s var(--ease) both}
@keyframes scene-in{from{opacity:0;transform:scale(1.1)}to{opacity:1;transform:none}}

/* Свет в щели между скалами (координаты щели считает motion.js: --gx, --gy, --top, --bw). */
html.motion .hero-light{display:block;position:absolute;inset:0;z-index:2;mix-blend-mode:screen;pointer-events:none;animation:fade-from 3s var(--ease) .6s backwards}
.hero-light i{position:absolute;display:block}
.hero-light .beam{left:calc(var(--gx) - var(--bw) / 2);top:var(--top);width:var(--bw);height:calc(var(--gy) - var(--top));background:linear-gradient(180deg,#fff0,#ffffff26 35%,#ffffff66 88%,#fff0);filter:blur(calc(var(--bw) * .45));animation:breathe 7s ease-in-out infinite}
.hero-light .glow{left:var(--gx);top:var(--gy);width:calc(var(--bw) * 16);height:calc(var(--bw) * 3.4);translate:-50% -50%;background:radial-gradient(closest-side,#ffffff4d,#ffffff12 55%,#fff0);animation:breathe-glow 7s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes breathe-glow{0%,100%{opacity:.55;scale:1}50%{opacity:1;scale:1.1}}
@keyframes fade-in{to{opacity:1}}
/* «Из прозрачного» без фиксации конца: после появления прозрачностью управляет скрипт. */
@keyframes fade-from{from{opacity:0}}

/* Пыль в луче — частицы в перспективе (canvas 2D). На свету — «разность»: тёмные осколки на белом. */
html.motion .hero-dust{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;animation:fade-from 2.5s var(--ease) 1s backwards}
html.motion .hero.is-open .hero-dust{mix-blend-mode:difference}

/* Появление текста: слова заголовка всплывают по очереди, остальное — следом. */
html.motion .hero-content>*:not(h1),html.motion .hero-bottom{animation:rise 1.3s var(--ease) backwards;animation-delay:calc(.35s + var(--i, 0) * .1s)}
html.motion .hero .eyebrow{--i:0}
html.motion .hero-description{--i:5}
html.motion .hero-actions{--i:6}
html.motion .availability{--i:7}
html.motion .hero-bottom{--i:9}
@keyframes rise{from{opacity:0;transform:translate3d(0,26px,0);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
html.motion .hero h1:not(.split){opacity:0;animation:fade-in 0s 2.5s forwards}   /* страховка, если скрипт не дошёл */
html.motion .hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .1em .16em;margin:0 -.1em -.16em}
html.motion .hero h1 .w>span{display:inline-block;animation:word-up 1.4s var(--ease) both;animation-delay:calc(.45s + var(--wi) * 90ms)}
@keyframes word-up{from{transform:translate3d(0,112%,0) rotate(4deg)}to{transform:none}}

html.motion .scroll-line{position:relative;overflow:hidden}
html.motion .scroll-line::after{content:'';position:absolute;left:0;top:0;width:1px;height:12px;background:#fff;animation:scroll-cue 2.4s var(--ease-soft) infinite}
@keyframes scroll-cue{0%{transform:translateY(-12px)}100%{transform:translateY(30px)}}

/* ---------- сцена раскола (WebGL) ---------- */
/* Дорожка: пока её прокручивают, экран закреплён; motion.js ведёт сцену по сглаженной доле пути. */
html.rift .hero-track{position:relative;height:480svh}
/* Первый кадр — целая скала (та же склейка, что в шейдере); луч в щели не нужен — щели ещё нет. */
html.rift .hero-art{background-image:url('assets/hero-whole.webp?v=20260925r2')}
html.rift .hero-light{display:none}
html.rift .hero{position:sticky;top:0;height:100svh;min-height:0;max-height:none}
html.rift .hero-gl{display:block;position:absolute;inset:0;z-index:1;width:100%;height:100%;visibility:hidden}
html.rift .hero.gl-on .hero-gl{visibility:visible}
html.rift .hero:after{opacity:var(--veil, 1)}   /* затемнение под текстом уходит вместе с текстом */

/* Что открывается в свете: прозрачность и сдвиг — от --r1..--r4 и --out (0..1), их ведёт прокрутка. */
html.rift .rift-reveal{display:flex;position:absolute;inset:0;z-index:1;align-items:center;justify-content:center;padding:84px 24px 40px;text-align:center;pointer-events:none;color:#0b0b0b}
.rift-inner{max-width:1040px;opacity:calc(1 - var(--out, 0));transform:translate3d(0,calc(var(--out, 0) * -40px),0) scale(calc(1 - var(--out, 0) * .04));filter:blur(calc(var(--out, 0) * 8px))}
.rift-icon,.rift-eyebrow{opacity:var(--r1, 0);transform:translate3d(0,calc((1 - var(--r1, 0)) * 40px),0) scale(calc(.9 + var(--r1, 0) * .1))}
.rift-title{opacity:var(--r2, 0);transform:translate3d(0,calc((1 - var(--r2, 0)) * 56px),0);filter:blur(calc((1 - var(--r2, 0)) * 14px))}
.rift-sub{opacity:var(--r3, 0);transform:translate3d(0,calc((1 - var(--r3, 0)) * 36px),0)}
.rift-stack li{opacity:var(--r4, 0);transform:translate3d(0,calc((1 - var(--r4, 0)) * (30px + var(--k) * 22px)),0)}
.rift-note{opacity:var(--r4, 0)}
.rift-icon{display:block;width:84px;height:84px;border-radius:20px;margin:0 auto 26px;box-shadow:0 22px 60px #0005,0 0 0 1px #00000014}
html.rift .rift-reveal .rift-eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.2em;color:#2e2e2e;margin-bottom:18px}
.rift-title{font-size:clamp(2.5rem,5vw,4.8rem);font-weight:500;line-height:1.02;letter-spacing:-.05em;color:#090909}
.rift-title em{color:#090909}
html.rift .rift-reveal .rift-sub{margin-top:18px;font-size:1.15rem;color:#222}
.rift-stack{list-style:none;margin:38px auto 0;padding:0;display:grid;gap:10px;max-width:600px;text-align:left}
.rift-stack li{display:grid;grid-template-columns:1fr 56px 1fr auto;align-items:center;gap:14px;padding:14px 18px;border:1px solid #0000001c;border-radius:12px;background:#ffffffa6;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 10px 30px #0000000d}
.rift-stack li:nth-child(1){--k:0}
.rift-stack li:nth-child(2){--k:1}
.rift-stack li:nth-child(3){--k:2}
.rift-stack li:nth-child(4){--k:3}
.rift-stack span{font-size:.95rem;color:#444}
.rift-stack strong{font-weight:600;color:#090909}
.rift-stack small{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#555}
.rift-stack li:first-child small{color:#090909;font-weight:600}
.rift-stack i{position:relative;display:block;height:1px;background:linear-gradient(90deg,#0002,#000b)}
.rift-stack i::after{content:'';position:absolute;right:-2px;top:-3.5px;border:4px solid transparent;border-left:7px solid #000b;border-right:0}
html.rift .rift-reveal .rift-note{margin:16px auto 0;max-width:600px;font-size:.8rem;color:#4a4a4a}

/* ---------- шапка ---------- */
html.motion .header{position:fixed;transition:background-color .5s,border-color .5s,transform .7s var(--ease),backdrop-filter .5s}
html.motion .header.is-scrolled{background-color:#090909b3;-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);border-bottom-color:#ffffff17}
html.motion .header.is-hidden{transform:translate3d(0,-101%,0)}
.header-progress{display:none}
html.motion .header-progress{display:block;position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,#fff0,#ffffffb3);transform-origin:left;transform:scaleX(var(--p, 0));opacity:.6;pointer-events:none}

/* ---------- появление при прокрутке ---------- */
html.motion .rv{opacity:0;transform:translate3d(0,34px,0);transition:opacity 1.1s var(--ease),transform 1.4s var(--ease);transition-delay:var(--d, 0s)}
html.motion .rv.in{opacity:1;transform:none}
html.motion .rv-words .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .1em .16em;margin:0 -.1em -.16em}
html.motion .rv-words .w>span{display:inline-block;transform:translate3d(0,112%,0) rotate(3deg);filter:blur(4px);transition:transform 1.3s var(--ease),filter 1.1s var(--ease);transition-delay:calc(var(--d, 0s) + var(--wi, 0) * 55ms)}
html.motion .rv-words.in .w>span{transform:none;filter:none}

/* Линии-разделители прорисовываются слева направо. */
html.motion .rv-line{position:relative}
html.motion .rv-line::before{content:'';position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,#ffffffc0,#ffffff26);transform:scaleX(0);transform-origin:left;transition:transform 1.8s var(--ease);transition-delay:calc(var(--d, 0s) + .15s);pointer-events:none}
html.motion .rv-line.in::before{transform:scaleX(1)}

/* Тёмные панели разделов раскрываются из карточки со скруглёнными углами на всю ширину (--e: 0..1). */
html.motion .preview-section,html.motion .roadmap-section{background:#121212;clip-path:inset(0 calc((1 - var(--e, 1)) * 5%) round calc((1 - var(--e, 1)) * 40px));will-change:clip-path}
html.motion .preview-section>.container,html.motion .roadmap-section>.container{transform:translate3d(0,calc((1 - var(--e, 1)) * 60px),0) scale(calc(.97 + var(--e, 1) * .03))}

/* ---------- окно «библиотеки»: наклон за курсором ---------- */
html.motion .library-illustration{position:relative;--rx:0deg;--ry:0deg;--px:0;--py:0;--ty:46px;opacity:0;transform:perspective(1100px) translate3d(0,var(--ty),0) rotateX(calc(var(--rx) + var(--srx, 0deg))) rotateY(calc(var(--ry) + var(--sry, 0deg))) rotate(-1deg);transition:opacity 1.2s var(--ease),box-shadow .9s var(--ease)}
html.motion .library-illustration.in{--ty:0px;opacity:1}
html.motion .library-illustration.tilting{box-shadow:0 40px 110px #000a}
html.motion .library-illustration::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(520px circle at var(--lx, 50%) var(--ly, 0%),#ffffff12,transparent 45%);opacity:0;transition:opacity .6s}
html.motion .library-illustration.tilting::after{opacity:1}
html.motion .library-illustration .file-icon{transform:translate3d(calc(var(--px) * 16px),calc(var(--py) * 12px),0);animation:float 5s ease-in-out infinite}
html.motion .library-illustration .library-center{transform:translate3d(calc(var(--px) * 9px),calc(var(--py) * 7px),0)}
html.motion .library-illustration .library-tags{transform:translate3d(calc(var(--px) * 4px),calc(var(--py) * 3px),0)}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -5px}}
html.motion .flow-connector{position:relative}
html.motion .flow-connector::after{content:'';position:absolute;left:-2.5px;top:0;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 10px 2px #ffffff90;opacity:0;animation:flow 2.8s var(--ease-soft) infinite}
@keyframes flow{0%{transform:translateY(-4px);opacity:0}15%,75%{opacity:1}100%{transform:translateY(30px);opacity:0}}
html.motion .library-center img{animation:icon-glow 2.8s var(--ease-soft) infinite}
@keyframes icon-glow{0%,70%,100%{box-shadow:0 0 50px #ffffff08}86%{box-shadow:0 0 64px #ffffff2e}}

/* ---------- статусы ---------- */
html.motion .pill-live{display:inline-flex;align-items:center;gap:7px}
html.motion .pill-live::before{content:'';width:5px;height:5px;border-radius:50%;background:#fff;animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 #ffffff80}70%,100%{box-shadow:0 0 0 7px #fff0}}

/* ---------- схема «под капотом»: сигнал бежит по каждой строке ---------- */
html.motion .architecture-row{position:relative}
html.motion .architecture-row::after{content:'';position:absolute;bottom:-1px;left:0;width:140px;height:1px;background:linear-gradient(90deg,#fff0,#ffffffe0,#fff0);opacity:0;pointer-events:none}
html.motion .architecture.in .architecture-row::after{animation:signal 4.5s var(--ease-soft) infinite;animation-delay:calc(1.8s + var(--ri, 0) * .8s)}
@keyframes signal{0%{left:0;opacity:0;transform:translateX(-100%)}12%{opacity:1}72%{opacity:1}88%,100%{left:100%;opacity:0;transform:translateX(0)}}
html.motion .architecture-target{transition:color .4s}
html.motion .architecture-row:hover .architecture-target{color:#fff}
html.motion .architecture-row:hover .architecture-target:before{animation:nudge .9s var(--ease) infinite}
@keyframes nudge{50%{transform:translateX(4px)}}

/* ---------- кнопки: тянутся к курсору ---------- */
html.motion .button-gold,html.motion .nav-status{transform:translate3d(var(--bx, 0px),var(--by, 0px),0);transition:transform .6s var(--ease),background .2s,border-color .2s}
html.motion .button-gold:hover{transform:translate3d(var(--bx, 0px),var(--by, 0px),0)}
html.motion .button>span,html.motion .nav-status>span{transition:transform .35s var(--ease)}
html.motion .button:not(:disabled):hover>span,html.motion .nav-status:hover>span{transform:translate(3px,-3px)}

/* ---------- вопросы: плавное раскрытие ---------- */
html.motion .faq-list details{overflow:hidden}
html.motion .faq-list details.is-closing summary>span{transform:none}
html.motion .faq-list summary{transition:color .3s}
html.motion .faq-list summary:hover{color:#fff}

/* ---------- финал: мягкий свет за курсором ---------- */
html.motion .closing{position:relative;overflow:hidden;isolation:isolate}
html.motion .closing::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(560px circle at var(--sx, 50%) var(--sy, 100%),#ffffff0f,transparent 62%)}

@media(max-width:760px){
  html.motion .hero-light .glow{width:calc(var(--bw) * 12)}
  html.rift .hero-track{height:400svh}
  html.rift .hero-content{padding-top:120px}
  .rift-icon{width:64px;height:64px;border-radius:15px;margin-bottom:18px}
  html.rift .rift-reveal{padding-inline:22px}
  html.rift .rift-reveal .rift-eyebrow{font-size:.65rem;margin-bottom:12px}
  .rift-title{font-size:clamp(1.9rem,8.6vw,2.4rem)}
  .rift-title br{display:none}
  html.rift .rift-reveal .rift-sub{font-size:1rem;margin-top:12px}
  .rift-stack{margin-top:24px;gap:8px}
  .rift-stack li{grid-template-columns:1fr 28px 1fr;gap:10px;padding:11px 13px}
  .rift-stack small{display:none}
  .rift-stack span,.rift-stack strong{font-size:.85rem}
  html.rift .rift-reveal .rift-note{font-size:.72rem}
  html.motion .preview-section,html.motion .roadmap-section{clip-path:inset(0 calc((1 - var(--e, 1)) * 3%) round calc((1 - var(--e, 1)) * 24px))}
}
@media(hover:none){
  html.motion .library-illustration .file-icon,html.motion .library-illustration .library-center,html.motion .library-illustration .library-tags{transform:none}
}

/* ---------- объём ниже первого экрана (25.09.2026) ---------- */
/* Окно «библиотеки»: при прокрутке выпрямляется из наклона, по стеклу проходит блик, от значка — волны света. */
html.motion .library-illustration::before{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;background:linear-gradient(115deg,transparent 35%,#ffffff0d 45%,#ffffff24 50%,#ffffff0d 55%,transparent 65%);background-size:260% 100%;background-position:var(--sweep, 0%) 0;mix-blend-mode:screen}
html.motion .library-center{position:relative}
html.motion .library-center::before,html.motion .library-center::after{content:'';position:absolute;left:50%;top:0;width:76px;height:76px;margin-left:-38px;border-radius:20px;border:1px solid #ffffff55;pointer-events:none;animation:ring 3.2s var(--ease-soft) infinite}
html.motion .library-center::after{animation-delay:1.6s}
@keyframes ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.1);opacity:0}}


/* Появление строк и карточек (владелец, 25.09: 3D-повороты «трясутся»): мягко выплывают снизу из размытия,
   по очереди. Без clip-path: наблюдатель видимости считает закрытый маской блок невидимым — он не появлялся. */
html.motion .status-list>article.rv,html.motion .roadmap-grid article.rv,html.motion .architecture-row.rv,html.motion .architecture-start.rv{transform:translate3d(0,28px,0);transition:opacity 1.2s var(--ease),transform 1.5s var(--ease);transition-delay:var(--d, 0s)}
html.motion .status-list>article.rv.in,html.motion .roadmap-grid article.rv.in,html.motion .architecture-row.rv.in,html.motion .architecture-start.rv.in{transform:none}
/* Наведение на карточку: без плашки — загорается верхняя линия, заголовок ярче, карточка чуть приподнимается. */
html.motion .roadmap-grid article.rv.in{transition:opacity 1.1s var(--ease),transform .7s var(--ease)}
html.motion .roadmap-grid article.rv.in:hover{transform:translate3d(0,-4px,0)}
html.motion .roadmap-grid article::before{transition:transform 1.8s var(--ease),background .5s,box-shadow .5s;transition-delay:calc(var(--d, 0s) + .15s),0s,0s}
html.motion .roadmap-grid article:hover::before{background:linear-gradient(90deg,#fff,#ffffff40);box-shadow:0 0 18px #ffffff55}
html.motion .roadmap-grid h3,html.motion .roadmap-grid .roadmap-index{transition:color .4s}
html.motion .roadmap-grid article:hover h3{color:#fff}
html.motion .roadmap-grid article:hover .roadmap-index{color:#fff}

/* Список статусов: светящаяся линия прогресса слева и узлы, загорающиеся по мере прокрутки. */
@media(min-width:761px){
  html.motion .status-list{position:relative}
  html.motion .status-list::before{content:'';position:absolute;left:-46px;top:8px;bottom:12px;width:1px;background:#ffffff14}
  html.motion .status-list::after{content:'';position:absolute;left:-46px;top:8px;width:1px;height:calc((100% - 20px) * var(--sp, 0));background:linear-gradient(180deg,#fff0,#fff);box-shadow:0 0 14px 1px #ffffff66}
  html.motion .status-list>article::after{content:'';position:absolute;left:-50px;top:32px;width:9px;height:9px;border-radius:50%;background:#111;border:1px solid #ffffff40;transition:background .6s,border-color .6s,box-shadow .6s}
  html.motion .status-list>article:first-child::after{top:7px}
  html.motion .status-list>article.lit::after{background:#fff;border-color:#fff;box-shadow:0 0 16px 4px #ffffff70}
  html.motion .status-list>article{position:relative}
  html.motion .status-list .release-notice::after{left:-25px}
}

/* Мягкий свет за курсором по всей странице. */
.cursor-light{position:fixed;left:0;top:0;width:640px;height:640px;border-radius:50%;pointer-events:none;z-index:4;opacity:0;background:radial-gradient(closest-side,#ffffff0d,#ffffff05 45%,transparent 72%);transition:opacity .8s;will-change:transform}
.cursor-light.on{opacity:1}

/* Телефон: карточки въезжают снизу, а не сбоку — сбоку они давали горизонтальную прокрутку.
   overflow-x:clip (не hidden) — не создаёт прокручиваемый контейнер, закреплённый первый экран работает. */
html.motion body{overflow-x:clip}
@media(max-width:760px){
}
@media(max-width:760px){
  /* Телефон: скала по центру кадра, чтобы раскол шёл посередине экрана (щель на 73 % ширины картинки). */
  html.rift .hero-art{background-position:80% center}
}

/* Кадры раскола (assets/rift, собираются scripts/build-rift-frames.py) — поверх WebGL на время раскола. */
.hero-seq{display:none}
html.rift .hero.seq-on .hero-seq{display:block;position:absolute;inset:0;z-index:1;width:100%;height:100%}

/* Концовка сцены: текст в свете из чёрного становится белым, пока свет гаснет до фона сайта (--inv 0..1). */
html.rift .rift-reveal{--mix:calc(var(--inv, 0) * 100%);color:color-mix(in srgb,#f2f2f2 var(--mix),#0b0b0b)}
html.rift .rift-reveal .rift-title,html.rift .rift-reveal .rift-title em{color:color-mix(in srgb,#f5f5f5 var(--mix),#090909)}
html.rift .rift-reveal .rift-eyebrow{color:color-mix(in srgb,#bdbdbd var(--mix),#2e2e2e)}
html.rift .rift-reveal .rift-sub{color:color-mix(in srgb,#d0d0d0 var(--mix),#222)}
html.rift .rift-reveal .rift-note{color:color-mix(in srgb,#9a9a9a var(--mix),#4a4a4a)}
html.rift .rift-stack li{background:color-mix(in srgb,#ffffff0d var(--mix),#ffffffa6);border-color:color-mix(in srgb,#ffffff26 var(--mix),#0000001c);box-shadow:none}
html.rift .rift-stack span{color:color-mix(in srgb,#a8a8a8 var(--mix),#444)}
html.rift .rift-stack strong,html.rift .rift-stack li:first-child small{color:color-mix(in srgb,#fff var(--mix),#090909)}
html.rift .rift-stack small{color:color-mix(in srgb,#9a9a9a var(--mix),#555)}
html.rift .rift-stack i{background:linear-gradient(90deg,transparent,color-mix(in srgb,#fffc var(--mix),#000b))}
html.rift .rift-stack i::after{border-left-color:color-mix(in srgb,#fffc var(--mix),#000b)}
html.rift .rift-icon{box-shadow:0 22px 60px #0005,0 0 0 1px color-mix(in srgb,#ffffff26 var(--mix),#00000014)}

/* Капля и круги по воде (canvas из motion.js) вместо прежних колец и бегущей точки. */
html.motion .illustration-body{position:relative}
.ripple-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;display:block}
html.motion .illustration-body>*:not(.ripple-canvas){position:relative;z-index:1}
html.motion .library-center::before,html.motion .library-center::after{content:none}
html.motion .flow-connector::after{content:none}
html.motion .library-center img{animation:none}

/* Волны по всему сайту (motion.js, setupWaves): прозрачная поверхность поверх страницы, только свет. */
.wave-canvas{position:fixed;left:0;top:0;width:100vw;height:100vh;pointer-events:none;z-index:6;display:block}   /* без mix-blend-mode — он заставлял Safari пересмешивать всю страницу */

/* Вопросы: при наведении текст мягко сдвигается, по нижней линии пробегает свет, «+» поворачивается,
   за строкой — лёгкое свечение слева. Открытый вопрос держит линию подсвеченной. */
html.motion .faq-list details{position:relative}
html.motion .faq-list details::before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#ffffff0a,#ffffff00 65%);opacity:0;transition:opacity .6s var(--ease)}
html.motion .faq-list details::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;background:linear-gradient(90deg,#ffffffd0,#ffffff00);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease)}
html.motion .faq-list details:hover::before{opacity:1}
html.motion .faq-list details:hover::after,html.motion .faq-list details[open]::after{transform:scaleX(1)}
html.motion .faq-list summary{transition:color .3s,padding-left .6s var(--ease)}
html.motion .faq-list summary:hover{padding-left:12px}
html.motion .faq-list summary>span{transition:transform .6s var(--ease),color .3s}
html.motion .faq-list summary:hover>span{transform:rotate(90deg) scale(1.3);color:#fff;text-shadow:0 0 12px #ffffff90}
html.motion .faq-list details[open] summary>span{transform:rotate(45deg)}
html.motion .faq-list details[open] summary:hover>span{transform:rotate(45deg) scale(1.2)}
html.motion .faq-list details p{transition:padding-left .6s var(--ease)}
html.motion .faq-list details:hover p{padding-left:12px}
html.motion .faq-list details.is-closing summary>span{transform:none}
.hero-news{margin-top:18px;max-width:560px;font-size:.95rem;line-height:1.5;color:#d9dccf}.hero-news strong{color:#e8c56a;font-weight:600}.hero-news .text-link{margin-left:4px}