/**
* Project Twelve —— CSS 动画系统说明
* 文件来源：由原站 Vue CLI 打包压缩 CSS（app.f68d12ce.css）解构展开而来
*
* ══════ 动画类型概览 ══════
* 1. 整屏翻页 —— JS 驱动 .screens__flow-container 的 translate3d(0, calc(-N*(100vh - var(--header-height))), 0)
*    （补丁见 css/patch.css：transition: transform 1s ease-in-out）
* 2. 屏内入场 —— 屏加 .active 类触发，利用 -trAnim-N 实现阶梯延迟入场
* 3. 视频球换位 —— 3 个 .fluid-ball 的 transform/z-index 由 js/main.js 控制
* 4. 常驻动画 —— 纯 CSS @keyframes（orbitRotation / progressLighten / lighten）
* 5. 左侧导航 —— rotate(-90deg) + JS 居中公式
*
* 📌 二次开发原则：新样式请追加到 css/patch.css，勿直接修改此文件
*/
.learn-button { display: flex; justify-content: flex-start; align-items: center; font-family: PlusJakartaDisplay, sans-serif; font-weight: 700; font-size: 1rem; letter-spacing: .3em; text-transform: uppercase; text-decoration: none; color: #fff; cursor: pointer }
.learn-button .icon { display: block; width: 4rem; height: 3rem; margin-left: 1.5rem }
.learn-button .icon svg { display: block; width: 100%; height: 100%; min-width: 100%; min-height: 100% }
.learn-button { --transition-time: .3s }
.learn-button > span { transition: opacity var(--transition-time) ease, transform var(--transition-time) ease }
.learn-button rect { transition: fill var(--transition-time) ease }
.learn-button:hover > span { opacity: .8 }
.learn-button:hover > .icon { transform: translate3d(-4px, 0, 0) }
.learn-button:hover > .icon > svg > rect {     /* fill: #0500ff */ }
.learn-button { opacity: 0; transition: var(--content-appear-time) opacity .25s ease }
.learn-button svg rect { transform: matrix(.5, 0, 0, .5, 12.5, 12.5); transition: var(--content-appear-time) transform .5s, fill .3s ease }
.learn-button svg .tip { transform: translate3d(-2.25rem, 0, 0) }
.learn-button svg .cane, .learn-button svg .tip { transition: var(--content-appear-time) transform .5s }
.learn-button svg .cane { transform: matrix(.25, 0, 0, 1, 0, 0) }
.active .learn-button { opacity: 1 }
.active .learn-button svg rect { transform: matrix(1, 0, 0, 1, 0, 0) }
.active .learn-button svg .tip { transform: translateZ(0) }
.active .learn-button svg .cane { transform: matrix(1, 0, 0, 1, 0, 0) }
/**
* Screen 0: PROJECT TWELVE（首屏英雄区）
* —— 标题滑入入场（右侧 15rem/25rem → 0）、divider 展开、message 上移
* —— background canvas 是 WebGL 流体模拟（原站），静态版保留空标签
* @animation: --content-appear-time 变量统一控制
*/
.project-twelve { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center }
.project-twelve:before { content: ""; position: absolute; z-index: 1; position: absolute; width: 1391.28px; height: 921.09px; left: 86px; top: -263px; background: radial-gradient(58% 58% at 57.07% 36.2%, #00F0FF 13.96%, #10E2BF 27.57%, #1F6AC5 62.98%, #0F335F 100%)         /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */ ; opacity: 0.85; filter: blur(100px); transform: rotate(31.13deg); }
.project-twelve .project-twelve__title { position: relative; z-index: 1; pointer-events: none }
.project-twelve h1 { font-family: Azonix, sans-serif; font-weight: 300; font-size: 7rem; text-transform: uppercase; line-height: 7.5rem; text-align: left; z-index: 1; display: flex; flex-direction: column; max-width: 800px; }
.project-twelve .divider { --divider-width: 6.125rem; width: var(--divider-width); height: 4px; background: #fff; margin-top: 3.75rem; z-index: 1 }
.project-twelve .learn-button { margin-top: 3.75rem; z-index: 1 }
.project-twelve .social { position: absolute; display: flex; flex-direction: column; top: 50%; right: 4rem; transform: translate3d(0, -50%, 0); color: #5a4bff; z-index: 1 }
.project-twelve .social > div { width: 1.5rem; height: 1.5rem; cursor: pointer }
.project-twelve .social > div:not(:first-child) { margin-top: 2rem }
.project-twelve .social > div svg { width: 100%; height: 100%; min-width: 100%; min-height: 100% }
.project-twelve .message { position: absolute; display: flex; justify-content: flex-start; align-items: stretch; right: 4rem; bottom: 4rem; z-index: 1; pointer-events: none }
.project-twelve .message .vertical-divider { width: 4px; height: auto; background: #fff; margin-right: 1.5rem; pointer-events: none }
.project-twelve .message p { font-family: PlusJakartaDisplay, sans-serif; font-weight: 300; font-size: 1rem; line-height: 1.375rem; max-width: 21.8125rem; text-align: left }
/** 
*  .project-twelve__background：WebGL Canvas 流体模拟
*  作用：鼠标移动时产生烟雾/流体特效（原站是 Pavel Dobryakov WebGL Fluid Simulation）
*  静态版：保留空 canvas 标签，如需复原需引入独立流体库
*/
/** 
* .project-twelve__background：WebGL Canvas 流体模拟
* 原站使用 Pavel Dobryakov 的 WebGL-Fluid-Simulation（PIXEL/SIM_RESOLUTION 等参数）
* 静态版保留空标签，无实际视觉贡献
*/
.project-twelve__background { position: absolute; width: 100%; height: 200%; left: 0; top: 0; z-index: 0 }
.project-twelve h1 { opacity: 0; transition: opacity var(--content-appear-time) }
.project-twelve h1 span:first-child { transform: translate3d(15rem, 0, 0); transition: transform var(--content-appear-time) ease }
.project-twelve h1 span:last-child { transform: translate3d(25rem, 0, 0); transition: transform var(--content-appear-time) ease }
.project-twelve .divider { max-width: 0; transition: max-width var(--content-appear-time) ease }
.project-twelve .message .vertical-divider { max-height: 0; transition: var(--content-appear-time) max-height .3s ease }
.project-twelve .message p { transform: translate3d(0, 5rem, 0); opacity: 0; transition: var(--content-appear-time) transform .3s ease, var(--content-appear-time) opacity .5s }
.project-twelve.active h1 { opacity: 1 }
.project-twelve.active h1 span:first-child, .project-twelve.active h1 span:last-child { transform: translateZ(0) }
.project-twelve.active .divider { max-width: var(--divider-width) }
.project-twelve.active .message .vertical-divider { max-height: 15rem }
.project-twelve.active .message p { transform: translateZ(0); opacity: 1 }
/**
* Screen 1: ORGANIC SUSTAINABLE
* 阶梯入场模式（所有屏一致）：
* -trAnim-N 延迟 = 0.1s × N（subtitle=.1s, title=.2s, text=.3s, button=.4s）
* 整屏从上到下依次下移 5rem 淡入 → 归位
* background blur 伪元素 opacity:0 → .7 淡入
*/
.organic-sustainable { position: relative; display: flex; justify-content: space-between; align-items: center; z-index: 3 }
.organic-sustainable__description { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; flex: 1; margin-right: 6.25rem; z-index: 3 }
.organic-sustainable__description .screen-title { margin-top: 1rem }
.organic-sustainable__description .text-block { margin-top: 2.9375rem; margin-left: 3.375rem }
.organic-sustainable__description .text-block p:first-child { position: relative; font-family: PlusJakartaDisplay, sans-serif; font-weight: 500; font-size: 1.375rem }
.organic-sustainable__description .text-block p:first-child:before { content: ""; display: block; position: absolute; top: 50%; right: calc(100% + 1.625rem); transform: translateY(-50%); width: 1.75rem; height: 4px; background: #D9D9D9; }
.organic-sustainable__description .text-block p:last-child { font-family: PlusJakartaDisplay, sans-serif; font-weight: 300; font-size: .875rem; max-width: 13.875rem; margin-top: 1rem; color: hsla(0, 0%, 100%, .8) }
.organic-sustainable__description .learn-button { margin-top: 3.125rem }
.organic-sustainable__magazine { position: relative; display: flex; flex-direction: column; justify-content: center; width: auto; padding: 4rem 0; margin-top: 2rem; z-index: 3 }
.organic-sustainable__magazine:before { width: 100%; height: 1px; top: 2rem; left: 3.75rem }
.organic-sustainable__magazine:after, .organic-sustainable__magazine:before { content: ""; display: block; position: absolute; background: linear-gradient(270deg, hsla(0, 0%, 100%, .0855) -16.64%, hsla(0, 0%, 100%, .1035) 0, hsla(0, 0%, 100%, .15) 47.12%, hsla(0, 0%, 100%, .102) 109.56%); pointer-events: none }
.organic-sustainable__magazine:after { height: 90%; width: 1px; top: 3rem; left: 0 }
.organic-sustainable__magazine .row { display: flex; align-items: flex-start; justify-content: space-between; width: 38.375rem }
.organic-sustainable__magazine .row img { width: 19.1875rem; height: auto }
.organic-sustainable__magazine .row:nth-child(2) { flex-direction: row-reverse }
.organic-sustainable__magazine .row:nth-child(2) h4:before { content: "2" }
.organic-sustainable__magazine .row:nth-child(3) h4:before { content: "3" }
.organic-sustainable__magazine .row__text-content { padding: 2rem 3rem; width: 19.1875rem }
.organic-sustainable__magazine .row__text-content h4 { position: relative; font-family: PlusJakartaDisplay, sans-serif; font-weight: 500; font-size: 1.125rem; width: 100% }
.organic-sustainable__magazine .row__text-content h4:before { content: "1"; display: block; position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-weight: 300; font-size: 2.5rem }
.organic-sustainable__magazine .row__text-content p { font-family: PlusJakartaDisplay, sans-serif; font-weight: 300; font-size: .875rem; line-height: 1.25rem; margin-top: 1.5rem }
.organic-sustainable .organic-sustainable__magazine .row:first-child, .organic-sustainable .screen-subtitle { transition: var(--content-appear-time) transform .1s, var(--content-appear-time) opacity .1s; transform: translate3d(0, 5rem, 0); opacity: 0 }
.organic-sustainable .organic-sustainable__magazine .row:nth-child(2), .organic-sustainable .screen-title { transition: var(--content-appear-time) transform .2s, var(--content-appear-time) opacity .2s; transform: translate3d(0, 5rem, 0); opacity: 0 }
.organic-sustainable .organic-sustainable__magazine .row:nth-child(3), .organic-sustainable .text-block { transition: var(--content-appear-time) transform .3s, var(--content-appear-time) opacity .3s; transform: translate3d(0, 5rem, 0); opacity: 0 }
.organic-sustainable .learn-button { transition: var(--content-appear-time) transform .4s, var(--content-appear-time) opacity .4s; transform: translate3d(0, 5rem, 0); opacity: 0 }
.organic-sustainable:before { opacity: 0; transition: var(--content-appear-time) opacity }
.organic-sustainable .organic-sustainable__magazine:after, .organic-sustainable .organic-sustainable__magazine:before { opacity: 0; transition: var(--content-appear-time) transform, var(--content-appear-time) opacity }
.organic-sustainable .organic-sustainable__magazine:before { transform: translate3d(5rem, 0, 0) }
.organic-sustainable .organic-sustainable__magazine:after { transform: translate3d(0, 5rem, 0) }
.organic-sustainable.active .learn-button, .organic-sustainable.active .organic-sustainable__magazine .row:first-child, .organic-sustainable.active .organic-sustainable__magazine .row:nth-child(2), .organic-sustainable.active .organic-sustainable__magazine .row:nth-child(3), .organic-sustainable.active .screen-subtitle, .organic-sustainable.active .screen-title, .organic-sustainable.active .text-block { transform: translateZ(0); opacity: 1 }
.organic-sustainable.active:before { opacity: .7 }
.organic-sustainable.active .organic-sustainable__magazine:after, .organic-sustainable.active .organic-sustainable__magazine:before { opacity: 1; transform: translateZ(0) }
/**
* Screen 2: ECONS
* 阶梯延迟: subtitle(.1s)→title(.2s)→text-p1(.3s)→text-p2(.4s)→stages(.5s)
*/
.econs { position: relative; display: flex; justify-content: flex-start; align-items: center }
.econs:before { content: ""; display: block; position: absolute; background: url(../image/blur-2.13723007.png) no-repeat; background-size: contain; background-position: 50%; opacity: .5; width: 100vw; height: 100vh; left: 0; top: 0; border-radius: 50%; z-index: 1 }
.econs:after { content: ""; display: block; position: absolute; background: url(../image/blur-3.d0a31c8a.png) no-repeat; background-size: contain; background-position: 50%; opacity: .7; width: 150vh; height: 150vh; right: -50vh; top: -25vh; border-radius: 50%; z-index: 1 }
.econs__description { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; flex: 1; z-index: 1 }
.econs__description .screen-title { margin-top: 1rem }
.econs__description .text-block { margin-top: 2.9375rem }
.econs__description .text-block p:first-child { position: relative; font-family: Azonix, sans-serif; font-weight: 300; font-size: 1.375rem; line-height: 1.625rem }
.econs__description .text-block p:last-child { font-family: PlusJakartaDisplay, sans-serif; font-weight: 400; font-size: .875rem; max-width: 31.125rem; margin-top: 2.75rem; line-height: 1.4375rem; color: hsla(0, 0%, 100%, .8) }
.econs__description .stages { position: relative; font-family: Azonix, sans-serif; font-weight: 300; font-size: 1.375rem; margin-top: 6.625rem; display: flex; justify-content: space-between; align-items: center }
.econs__description .stages:before { content: ""; display: block; position: absolute; width: 7rem; height: 7rem; border-radius: 50%; background: hsla(0, 0%, 100%, .01); box-shadow: inset -10px 14px 20px hsla(0, 0%, 100%, .08); -webkit-backdrop-filter: blur(44px); backdrop-filter: blur(44px); z-index: -1; top: 50%; left: -2.75rem; transform: translateY(-50%) }
.econs__description .stages .line { width: 3.375rem; height: 2px; background: #fff; margin: 0 1.3125rem }
.econs .screen-subtitle { transition: var(--content-appear-time) transform .1s, var(--content-appear-time) opacity .1s; transform: translate3d(0, 5rem, 0); opacity: 0 }
.econs .screen-title { transition: var(--content-appear-time) transform .2s, var(--content-appear-time) opacity .2s; transform: translate3d(0, 5rem, 0); opacity: 0 }
.econs .text-block p:first-child { transition: var(--content-appear-time) transform .3s, var(--content-appear-time) opacity .3s; transform: translate3d(0, 5rem, 0); opacity: 0 }
.econs .text-block p:last-child { transition: var(--content-appear-time) transform .4s, var(--content-appear-time) opacity .4s; transform: translate3d(0, 5rem, 0); opacity: 0 }
.econs .stages { transition: var(--content-appear-time) transform .5s, var(--content-appear-time) opacity .5s; transform: translate3d(0, 5rem, 0); opacity: 0 }
.econs:after, .econs:before { opacity: 0; transition: var(--content-appear-time) opacity }
.econs.active .screen-subtitle, .econs.active .screen-title, .econs.active .stages, .econs.active .text-block p:first-child, .econs.active .text-block p:last-child { transform: translateZ(0); opacity: 1 }
.econs.active:before { opacity: .5 }
.econs.active:after { opacity: .7 }
/**
* Screen 3: BLOCKCHAIN VETERANS
* 标题 4 个 span 依次延迟 0.1s~0.4s，divider(.5s) 再接 button(.6s)
*/
.blockchain-veterans { position: relative; display: flex; justify-content: center; align-items: center }
.blockchain-veterans:after { content: ""; display: block; position: absolute; width: 150vh; height: 150vh; right: -12vh; top: -20vh; z-index: 1; background: radial-gradient(72.27% 126.17% at 83.68% 19.4%, #0F335F 0%, #00F0FF 31.01%, #1F6AC5 62.02%, #011C2E 100%)         /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */ ; opacity: 0.35 !important; filter: blur(100px); }
.blockchain-veterans h2 { text-align: center; font-size: 3rem; line-height: 3.5rem; }
.blockchain-veterans h2 span, .blockchain-veterans h2 p { display: block; text-align: center; margin: 0 }
.blockchain-veterans__description { display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2 }
.blockchain-veterans__description .divider { width: 6.125rem; height: 4px; background: #fff; margin-top: 4rem }
.blockchain-veterans__description .learn-button { margin-top: 4rem }
.blockchain-veterans .screen-title span:first-child, .blockchain-veterans .screen-title p:first-child { transition: var(--content-appear-time) transform .1s, var(--content-appear-time) opacity .1s; transform: translate3d(0, 5rem, 0); opacity: 0 }
.blockchain-veterans .screen-title span:nth-child(2), .blockchain-veterans .screen-title p:nth-child(2) { transition: var(--content-appear-time) transform .2s, var(--content-appear-time) opacity .2s; transform: translate3d(0, 5rem, 0); opacity: 0 }
.blockchain-veterans .screen-title span:nth-child(3), .blockchain-veterans .screen-title p:nth-child(3) { transition: var(--content-appear-time) transform .3s, var(--content-appear-time) opacity .3s; transform: translate3d(0, 5rem, 0); opacity: 0 }
.blockchain-veterans .screen-title span:nth-child(4), .blockchain-veterans .screen-title p:nth-child(4) { transition: var(--content-appear-time) transform .4s, var(--content-appear-time) opacity .4s; transform: translate3d(0, 5rem, 0); opacity: 0 }
.blockchain-veterans .divider { transition: var(--content-appear-time) transform .5s, var(--content-appear-time) opacity .5s; transform: translate3d(0, 5rem, 0); opacity: 0 }
.blockchain-veterans .learn-button { transition: var(--content-appear-time) transform .6s, var(--content-appear-time) opacity .6s; transform: translate3d(0, 5rem, 0); opacity: 0 }
.blockchain-veterans:after, .blockchain-veterans:before { opacity: 0; transition: var(--content-appear-time) opacity }
.blockchain-veterans.active .divider, .blockchain-veterans.active .learn-button, .blockchain-veterans.active .screen-title span:first-child, .blockchain-veterans.active .screen-title span:nth-child(2), .blockchain-veterans.active .screen-title span:nth-child(3), .blockchain-veterans.active .screen-title span:nth-child(4), .blockchain-veterans.active .screen-title p:first-child, .blockchain-veterans.active .screen-title p:nth-child(2), .blockchain-veterans.active .screen-title p:nth-child(3), .blockchain-veterans.active .screen-title p:nth-child(4), .blockchain-veterans.active .blockchain-description { transform: translateZ(0); opacity: 1 }
.blockchain-veterans.active:after, .blockchain-veterans.active:before { opacity: 1 }
.blockchain-veterans .blockchain-description { transition: var(--content-appear-time) transform .2s, var(--content-appear-time) opacity .2s; transform: translate3d(0, 5rem, 0); margin-top: 4rem; opacity: 0; font-size: 1rem; width: 100%; text-align: center; }
/**
* Screen 4: ARCHITECTURE FIRST
* 含轨道公转 @keyframes（见下方）：orbit-2（30vh 半径·30s）、orbit-3（37.5vh·50s）
* 入场时 .orbits opacity:0→1
*/
.architecture-first { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center }
.architecture-first__description { position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; z-index: 4; width: 51.25rem }
.architecture-first__description .screen-subtitle { margin-top: 2rem }
.architecture-first__description .screen-title { position: relative; margin-top: 1rem }
.architecture-first__scheme { --architecture-scheme-height: 70vh; position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; width: 51.25rem; height: var(--architecture-scheme-height) }
.architecture-first__scheme:before { content: ""; display: block; position: absolute; background: url(../image/projecttwelve.040eba3e.svg) no-repeat; background-size: contain; background-position: 50%; width: 18.4375rem; height: 10rem; z-index: 1; left: 0; top: 5% }
.architecture-first__scheme .platform { display: flex; justify-content: center; align-items: flex-end; width: 75%; z-index: 3; }
.architecture-first__scheme .platform img { max-width: 100%; height: auto; max-height: 100% }
.architecture-first__scheme .citizens { position: relative; display: flex; justify-content: center; align-items: center; width: 25vh; height: 25vh; margin-bottom: 1rem }
.architecture-first__scheme .citizens .citizens-icon { position: absolute; width: 40%; height: 33%; left: 35%; bottom: 100%; object-fit: contain; object-position: 50%; z-index: 1 }
.architecture-first__scheme .citizens .citizens__video { position: relative; width: 100% }
.architecture-first__scheme .citizens .citizens__video:before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: #08051f; z-index: -3 }
.architecture-first__scheme .citizens .citizens__video:after { content: ""; display: block; position: absolute; background: url(../image/blur-5.svg) no-repeat; background-size: contain; background-position: 50%; width: 500%; height: 500%; left: -200%; top: -200%; opacity: .7; z-index: -2 }
.architecture-first__scheme .citizens .citizens__video video { width: 100%; mix-blend-mode: screen }
.architecture-first__scheme .citizens .citizens-title { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-family: Azonix, sans-serif; font-weight: 300; font-size: 1.625rem; color: #fff }
.architecture-first__scheme .citizens .citizens-title .citizens-title-icon { position: absolute; height: 33%; object-fit: contain; object-position: 50%; }
.architecture-first__scheme .citizens .citizens-title .citizens-title-icon--left { width: 65%; right: 90%; top: 70%; }
.architecture-first__scheme .citizens .citizens-title .citizens-title-icon--right { width: 63%; left: 90%; top: 70%; }
.architecture-first__scheme .orbits { --orbit-size: var(--architecture-scheme-height) + 5vh; position: absolute; top: 0; left: 0; width: 100%; height: 100% }
.architecture-first__scheme .orbits [class*=orbit] { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid hsla(0, 0%, 100%, .1); border-radius: 50%; z-index: 2 }
.architecture-first__scheme .orbits .orbit-1 { width: calc(var(--orbit-size) - 30vh); height: calc(var(--orbit-size) - 30vh) }
.architecture-first__scheme .orbits .orbit-2 { width: calc(var(--orbit-size) - 15vh); height: calc(var(--orbit-size) - 15vh) }
/**
* 🌀 轨道公转动画（Screen 4）
* 原理：translateX(N) 使支点偏移圆心 → rotate(1turn) 实现绕行
* 关键：伪元素在 orbit 容器正中间（left:50%-宽/2, top:50%-高/2）
*       旋转中心始终是伪元素自身，translateX 偏移后绕容器中心公转
*/
.architecture-first__scheme .orbits .orbit-2:before { content: ""; display: block; position: absolute; width: 4vh; height: 4vh; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, #fff 0, #0F335F 100%); left: calc(50% - 2vh); top: calc(50% - 2vh); -webkit-animation: orbit2Rotation1 30s linear infinite; animation: orbit2Rotation1 30s linear infinite }
/**
* keyframes: orbit2Rotation1 — orbit-2 第一个小球公转
* rotate(0deg) + translateX(-30vh) → rotate(1turn) + translateX(-30vh)
*/
.architecture-first__scheme .orbits .orbit-2:after { content: ""; display: block; position: absolute; width: 3vh; height: 3vh; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, #1b75a7 0, #330867 100%); filter: blur(6px); left: calc(50% - 1.5vh); top: calc(50% - 1.5vh); -webkit-animation: orbit2Rotation2 30s linear infinite; animation: orbit2Rotation2 30s linear infinite }
.architecture-first__scheme .orbits .orbit-3 { position: absolute; width: calc(var(--orbit-size)); height: calc(var(--orbit-size)); z-index: 5; }
/** 轨道第 3 层（50s 周期） */
.architecture-first__scheme .orbits .orbit-3:before { content: ""; display: block; position: absolute; width: 6vh; height: 6vh; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(15, 51, 95, 0) 49.04%, #0F335F 100%);     /* background: radial-gradient(50% 50% at 50% 50%, #6664dd 0, #43206d 100%); */ left: calc(50% - 3vh); top: calc(50% - 3vh); -webkit-animation: orbit3Rotation 50s linear infinite; animation: orbit3Rotation 50s linear infinite }
.architecture-first__scheme .orbits .glass-circle { position: absolute; border-radius: 50%; background: hsla(0, 0%, 100%, .01); background: radial-gradient(50% 50% at 50% 50%, rgba(15, 51, 95, 0) 49.04%, #0F335F 100%);     /* box-shadow: inset -10px 14px 20px hsla(0, 0%, 100%, .08); */ -webkit-backdrop-filter: blur(44px); backdrop-filter: blur(44px); display: flex; justify-content: center; align-items: center; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-weight: 300; font-size: 2rem; text-transform: uppercase; }
.architecture-first__scheme .orbits .glass-circle > div { color: #ffffff; background-color: #ffffff; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent }
.architecture-first__scheme .orbits .glass-circle-text { position: absolute; color: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-weight: 300; font-size: 1.5rem; line-height: 1.2; white-space: nowrap; }
.architecture-first__scheme .orbits .orbit-2 .glass-circle:first-child { width: 8vh; height: 8vh; z-index: 5; left: -5%; bottom: 50% }
.architecture-first__scheme .orbits .orbit-2 .glass-circle:first-child .glass-circle-text { right: 120%; top: 27%; width: 265px; white-space: normal; }
.architecture-first__scheme .orbits .orbit-2 .glass-circle:last-child { width: 8vh; height: 8vh; z-index: 5; right: -5%; bottom: 55% }
.architecture-first__scheme .orbits .orbit-2 .glass-circle:last-child .glass-circle-text { left: 120%; top: 27%; }
.architecture-first__scheme .orbits .orbit-3 .glass-circle:first-child { width: 8vh; height: 8vh; z-index: 5; left: 16%; bottom: 5%; font-size: 1.3rem; }
.architecture-first__scheme .orbits .orbit-3 .glass-circle:first-child .glass-circle-text { right: 120%; top: 27%; width: 225px; white-space: normal; }
.architecture-first__scheme .orbits .orbit-3 .glass-circle:nth-child(2) { width: 7vh; height: 7vh; z-index: 5; right: 10%; bottom: 13% }
.architecture-first__scheme .orbits .orbit-3 .glass-circle:nth-child(3) { width: 7vh; height: 7vh; z-index: 5; right: 39%; bottom: 1.5% }
.architecture-first__scheme .orbits .orbit-3 .glass-circle:nth-child(2) .glass-circle-text { left: 120%; top: 27%; width: 250px; white-space: normal; }
.architecture-first__scheme .orbits .orbit-3 .glass-circle:nth-child(3) .glass-circle-text { left: 120%; top: 27%; width: 190px; white-space: normal; }
.architecture-first .architecture-first__description:before, .architecture-first .architecture-first__scheme:before, .architecture-first .orbits, .architecture-first:after, .architecture-first:before { opacity: 0; transition: var(--content-appear-time) opacity }
.architecture-first.active:before { opacity: .5 }
.architecture-first.active .architecture-first__scheme:before { opacity: 1 }
.architecture-first.active .architecture-first__description:before, .architecture-first.active:after { opacity: .7 }
.architecture-first.active .orbits { opacity: 1 }
.body-zh .architecture-first__scheme .orbits .orbit-2 .glass-circle:first-child .glass-circle-text {  width: 80px;  }
.body-zh .architecture-first__scheme .orbits .orbit-3 .glass-circle:first-child .glass-circle-text { width: 80px; }
@-webkit-keyframes orbit2Rotation1 {
0% { transform: rotate(0deg) translateX(-30vh) }
to { transform: rotate(1turn) translateX(-30vh) }
}
@keyframes orbit2Rotation1 {
0% { transform: rotate(0deg) translateX(-30vh) }
to { transform: rotate(1turn) translateX(-30vh) }
}
@-webkit-keyframes orbit2Rotation2 {
0% { transform: rotate(0deg) translateX(30vh) }
to { transform: rotate(1turn) translateX(30vh) }
}
@keyframes orbit2Rotation2 {
0% { transform: rotate(0deg) translateX(30vh) }
to { transform: rotate(1turn) translateX(30vh) }
}
@-webkit-keyframes orbit3Rotation {
0% { transform: rotate(0deg) translateX(37.5vh) }
to { transform: rotate(1turn) translateX(37.5vh) }
}
@keyframes orbit3Rotation {
0% { transform: rotate(0deg) translateX(37.5vh) }
to { transform: rotate(1turn) translateX(37.5vh) }
}
@-webkit-keyframes orbit2Rotation1Mob {
0% { transform: rotate(0deg) translateX(-20vh) }
to { transform: rotate(1turn) translateX(-20vh) }
}
@keyframes orbit2Rotation1Mob {
0% { transform: rotate(0deg) translateX(-20vh) }
to { transform: rotate(1turn) translateX(-20vh) }
}
@-webkit-keyframes orbit2Rotation2Mob {
0% { transform: rotate(0deg) translateX(20vh) }
to { transform: rotate(1turn) translateX(20vh) }
}
@keyframes orbit2Rotation2Mob {
0% { transform: rotate(0deg) translateX(20vh) }
to { transform: rotate(1turn) translateX(20vh) }
}
@-webkit-keyframes orbit3RotationMob {
0% { transform: rotate(0deg) translateX(27.5vh) }
to { transform: rotate(1turn) translateX(27.5vh) }
}
@keyframes orbit3RotationMob {
0% { transform: rotate(0deg) translateX(27.5vh) }
to { transform: rotate(1turn) translateX(27.5vh) }
}
/**
* Screen 5: ARCHITECTURE SECOND
* 流程图箭头/连接线用 max-width 展开动画（from 0 → 100%），opacity 配合同步
*/
.architecture-second { position: relative; display: flex; justify-content: space-between; align-items: stretch }
.architecture-second:before { content: ""; display: block; position: absolute; background: url(../image/blur-6.svg) no-repeat top right; background-size: contain; width: 60%; height: 60%; right: 0; top: 0; left: auto; z-index: 1; pointer-events: none }
.architecture-second__description { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; z-index: 2; width: 100% }
.architecture-second__description .screen-subtitle { margin-top: 2rem }
.architecture-second__description .screen-title { position: relative; margin-top: 1rem }
.architecture-second__flow-container { position: relative; display: flex; justify-content: flex-start; align-items: center; margin-top: 3% }
.architecture-second__flow-container:before { content: ""; display: block; position: absolute; width: 100%; height: 3px; background: #fff; top: 49.25%; opacity: .5; left: 12% }
.architecture-second__scheme .column { position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch }
.architecture-second__scheme .column .row:not(:first-child), .architecture-second__scheme .column > [class*=block]:not(:first-child) { margin-top: 1.75rem }
.architecture-second__scheme .column .row { display: flex; align-items: center; justify-content: flex-start }
.architecture-second__scheme .column .row > div:last-child { margin-top: 0; margin-left: 5% }
.architecture-second__scheme .arrow { position: absolute; height: calc(100% - 4rem); width: auto; top: 2rem; right: 100% }
.column-nav { position: relative; margin-left: 21%; align-self: center; flex-shrink: 0; }
.architecture-second__scheme .column-nav [class*="-trAnim-"] { transform: none; }
.column-2-panel { position: relative; margin-left: 0% }
.column-3 { margin-left: 0% !important }
/* .architecture-second__scheme .column:nth-child(3) {
margin-left: 34%
} */
.architecture-second__scheme .column:nth-child(3) .arrow { top: 1.95rem; width: 6rem; }
.architecture-second__scheme .gradient-block { padding: .75rem 3.1875rem; background: linear-gradient(274.52deg, #1875B3 0%, #00F0FF 114.18%); -webkit-backdrop-filter: blur(180px); backdrop-filter: blur(180px) }
.architecture-second__scheme .glass-block, .architecture-second__scheme .gradient-block {     /* box-shadow: inset 1px 1px 2px hsla(0, 0%, 100%, .2); */
display: flex; justify-content: center; align-items: center }
.architecture-second__scheme .glass-block { font-family: PlusJakartaDisplay, sans-serif; font-weight: 700; font-size: 1.25rem; padding: 1.25rem 3rem; -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); line-height: 1.75rem; text-align: center; white-space: nowrap; border-radius: 0.625rem; }
.architecture-second__scheme .glass-block.block-dark, .architecture-second__scheme .glass-block.block-light { background: rgba(255, 255, 255, 0.125); }
.architecture-second__scheme .column-nav .glass-block.block-light { cursor: pointer; opacity: .55; transition: opacity .35s ease, background .35s ease; }
.architecture-second__scheme .column-nav .glass-block.block-light.is-active, .architecture-second__scheme .column-nav .glass-block.block-light:hover { opacity: 1; background: rgba(255, 255, 255, .22); }
.architecture-second__scheme .column-1, .architecture-second__scheme .column-2, .architecture-second__scheme .column-3, .architecture-second__scheme .column-4 { display: none; }
.architecture-second__scheme .column-1.is-active, .architecture-second__scheme .column-2.is-active, .architecture-second__scheme .column-3.is-active, .architecture-second__scheme .column-4.is-active { display: flex; }
.architecture-second__scheme .column-panels { margin-left: 34%; align-self: center; }
.architecture-second__scheme .column-1 .arrow, .architecture-second__scheme .column-2 .arrow, .architecture-second__scheme .column-3 .arrow, .architecture-second__scheme .column-4 .arrow { top: 1.95rem; }
.architecture-second__scheme .glass-block.block-small { font-family: PlusJakartaDisplay, sans-serif; font-weight: 500; font-size: 1rem; padding: .625rem 1.25rem; text-transform: uppercase }
.architecture-second .architecture-second__flow-container:before { opacity: 0; max-width: 0; transition: var(--content-appear-time) opacity .4s, var(--content-appear-time) max-width .4s }
.architecture-second .arrow { opacity: 0; max-width: 0; transition: calc(var(--content-appear-time) + .5s) opacity .4s, calc(var(--content-appear-time) + .5s) max-width .4s }
.architecture-second:before { opacity: 0; transition: calc(var(--content-appear-time) + .5s) opacity }
.architecture-second.active .architecture-second__flow-container:before { opacity: .3; max-width: 100% }
.architecture-second.active .arrow { opacity: 1; max-width: 15rem }
.architecture-second.active:before { opacity: 1 }
/**
* Screen 6: TECH SOLUTION
* 入场时 blur 伪元素 + canvans 背景 opacity:0→1 淡入
*/
.tech-solution { position: relative; display: flex; flex-direction: column; justify-content: center }
.tech-solution:before { background: url(../image/blur-7.svg) no-repeat center; background-size: contain; height: 200vh; min-width: 200vh; right: 0; left: 0 }
.tech-solution:after, .tech-solution:before { content: ""; display: block; position: absolute; width: 100vw; opacity: .7; z-index: 1 }
/**
* 左侧三条弧线：tech-arcs.svg 完整显示（833×1070），等比缩放不裁切
*/
.tech-solution:after { background: url(../image/tech-arcs.svg) no-repeat left center; background-size: contain; width: 100%; height: 100%; left: 0; top: 0; right: auto; pointer-events: none }
.tech-solution .tech-solution__description { z-index: 3 }
.tech-solution .tech-solution__description .screen-subtitle { margin-top: 2rem }
.tech-solution .tech-solution__description .screen-title { position: relative; margin-top: 1rem }
.tech-solution__scheme { width: 100%; height: 100%; max-height: 100%; position: relative; z-index: 2 }
/**
* 画布：以 Figma 设计稿 1247×690 为坐标系，内部元素全部按百分比定位，
* 因此整块随 width（em）等比缩放，无需逐个断点重排
*/
.tech-solution__scheme .tech-solution__canvas { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); width: 100em; max-width: 96%; aspect-ratio: 1247/690 }
/**
* 三条流向箭头，几何取自 Figma 导出的 demo.svg
* __glow 为模糊底光，__body 为 3D 带体，__spark 为沿路径流动的高光
*/
.tech-flow { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; opacity: 0; transition: var(--content-appear-time) opacity .3s }
.tech-solution.active .tech-flow { opacity: 1 }
.tech-flow__glow { stroke-width: 3; filter: url(#techBeamBlur); animation: techBeamPulse 3.2s ease-in-out infinite; animation-delay: var(--beam-delay, 0s) }
.tech-flow__line { stroke-width: 1.5 }
.tech-flow__body { fill: #74bce7 }
.tech-flow__spark { stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 12 100; stroke-dashoffset: 12; filter: url(#techBeamBlur); animation: techBeamFlow 3.2s linear infinite; animation-delay: var(--beam-delay, 0s) }
@keyframes techBeamPulse {
0%, 100% { opacity: .55 }
50% { opacity: 1 }
}
@keyframes techBeamFlow {
0% { stroke-dashoffset: 12; opacity: 0 }
10%, 80% { opacity: 1 }
100% { stroke-dashoffset: -100; opacity: 0 }
}
/**
* 直角标记：复刻 demo.svg 的双线拐角（粗线 + 50% 透明细线 + 白色外发光）
* 基准形态为左下角 ⌞，其余三个方向用 scale 翻转，保证包围盒不变
*/
.tech-mark { position: absolute; display: block; width: 1.9em; height: 1.35em; pointer-events: none; animation: techMarkBlink 2.6s ease-in-out infinite; animation-delay: var(--mark-delay, 0s) }
.tech-mark:after, .tech-mark:before { content: ""; position: absolute; border: 0 solid #fff }
.tech-mark:before { left: 0; top: 0; right: 0; bottom: 0; border-left-width: .19em; border-bottom-width: .19em; filter: drop-shadow(0 0 .45em hsla(0, 0%, 100%, .95)) }
.tech-mark:after { left: .58em; top: .28em; right: .3em; bottom: .26em; border-left-width: .11em; border-bottom-width: .11em; opacity: .5; filter: drop-shadow(0 0 .3em hsla(0, 0%, 100%, .9)) }
.tech-mark--tl { transform: scaleY(-1) }
.tech-mark--tr { transform: scale(-1) }
.tech-mark--br { transform: scaleX(-1) }
@keyframes techMarkBlink {
0%, 100% { opacity: .28 }
45%, 60% { opacity: 1 }
}
/**
* 单元：桌面端 display:contents，让图片/标题/参数各自相对画布定位
*/
.tech-item { display: contents }
.tech-item--2 { --mark-delay: .35s; --beam-delay: .45s }
.tech-item--3 { --mark-delay: .7s; --beam-delay: .9s }
.tech-item__visual { position: absolute; z-index: 2 }
.tech-item__visual img { display: block; width: 100%; height: auto }
/* 三张床垫按底面外轮廓与对应箭头对齐，再整体上移 ~1.2%，让箭头从底边露出 */
.tech-item--1 .tech-item__visual { left: 29.13%; top: 11.99%; width: 26.79% }
.tech-item--2 .tech-item__visual { left: 43.69%; top: 26.81%; width: 29.51% }
.tech-item--3 .tech-item__visual { left: 62.87%; top: 43.42%; width: 32.28% }
.tech-item__note, .tech-item__tag { position: absolute; z-index: 3; width: -webkit-max-content; width: max-content }
.tech-item__tag { max-width: 22em }
.tech-item--1 .tech-item__tag { left: 0; top: 34.5% }
.tech-item--2 .tech-item__tag { left: 15.6%; top: 59.5% }
.tech-item--3 .tech-item__tag { left: 35.1%; top: 83.5% }
.tech-item--1 .tech-item__note { left: 55.5%; top: 3.6% }
.tech-item--2 .tech-item__note { left: 69%; top: 14.5% }
.tech-item--3 .tech-item__note { left: 83%; top: 33.6% }
.tech-item__tag h3 { position: relative; display: inline-block; font-family: PlusJakartaDisplay, sans-serif; font-weight: 700; font-size: 1.25em; line-height: 1.3; color: #00f0ff; background: linear-gradient(102.46deg, #00f0ff -3.7%, #44acef 73.3%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent }
.tech-item__tag h3 sup { font-size: .55em; vertical-align: .75em }
.tech-item__tag p { position: relative; display: inline-block; font-family: PlusJakartaDisplay, sans-serif; font-weight: 400; font-size: 1.05em; line-height: 1.35; margin-top: .35em; color: #37d9b4 }
.tech-item__tag h3 .processor__arrow, .tech-item__tag p .processor__arrow { position: absolute; width: 3.2em; height: 2.7em; pointer-events: none }
.tech-item__tag h3 .processor__arrow svg, .tech-item__tag p .processor__arrow svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 .4em hsla(0, 0%, 100%, .9)) }
.tech-item__tag h3 .processor__arrow--tr { right: -1.2em; bottom: calc(100% + .15em) }
.tech-item__tag p .processor__arrow--bl { left: .4em; top: calc(100% + .35em) }
.tech-item__note p { font-family: PlusJakartaDisplay, sans-serif; font-weight: 300; font-size: .95em; line-height: 1.55; white-space: nowrap; color: hsla(0, 0%, 100%, .88) }
.tech-item__note .processor__arrow { position: absolute; width: 3.2em; height: 2.7em; pointer-events: none }
.tech-item__note .processor__arrow svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 .4em hsla(0, 0%, 100%, .9)) }
.tech-item__note .processor__arrow--tl { left: -1.2em; bottom: calc(100% + .45em) }
.tech-item__note .processor__arrow--br { right: -1.2em; top: calc(100% + .45em) }
/**
* 小屏：等距透视排布改为「缩略图 + 文案」三行栅格，箭头换成图下方的流光线
*/
/**
* @keyframes: lighten（箭头扫光动画）
* 用于 tech-solution 和 nomocracy 屏的箭头
* 原理：--color-path-1/2 CSS 变量在 hsla(0,0%,100%,.3)↔#fff 间切换
*        箭头 SVG path 引用这些变量作为 fill，实现波浪式高亮
*/
.processor__arrow { --color-path-1:hsla(0, 0%, 100%, 0.3); --color-path-2:#fff; -webkit-animation: lighten 1.5s infinite; animation: lighten 1.5s infinite }
.processor__arrow svg path { transition: fill .5s ease, stroke .5s ease }
@-webkit-keyframes lighten {
0% { --color-path-1:hsla(0, 0%, 100%, 0.3); --color-path-2:#fff }
50% { --color-path-1:#fff; --color-path-2:hsla(0, 0%, 100%, 0.3) }
to { --color-path-1:hsla(0, 0%, 100%, 0.3); --color-path-2:#fff }
}
@keyframes lighten {
0% { --color-path-1:hsla(0, 0%, 100%, 0.3); --color-path-2:#fff }
50% { --color-path-1:#fff; --color-path-2:hsla(0, 0%, 100%, 0.3) }
to { --color-path-1:hsla(0, 0%, 100%, 0.3); --color-path-2:#fff }
}
.tech-solution:after, .tech-solution:before { opacity: 0; transition: calc(var(--content-appear-time) + .5s) opacity }
.tech-solution.active:before { opacity: 1 }
.tech-solution.active:after { opacity: .85 }
/**
* Screen 7: ECONS SOLUTION
* 入场时左侧渐变列表条（:before 伪元素）max-height:0→100% + opacity 展开
*/
.econs-solution { position: relative; display: flex; flex-direction: column; justify-content: center }
/**
* 右侧光晕：按 demo.svg（1216×1468）等比缩放，贴右垂直居中
*/
.econs-solution:after { content: ""; display: block; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 63.33vw; aspect-ratio: 1216 / 1468; background: url(../image/econs-glow.svg) no-repeat center / contain; z-index: 1; pointer-events: none }
.econs-solution .econs-solution__description { z-index: 3 }
.econs-solution .econs-solution__description .screen-subtitle { margin-top: 2rem }
.econs-solution .econs-solution__description .screen-title { position: relative; margin-top: 30px; max-width: 28em; line-height: 1; }
.econs-solution .econs-solution__description .screen-title2 { position: relative; margin-top: 1rem; max-width: 28em; line-height: 1; }
.econs-solution__content { position: relative; display: flex; justify-content: flex-start; margin-top: 3.5rem; z-index: 3 }
.econs-solution__content .text-block { margin-top: 8.75rem; max-width: 18.5rem; padding-bottom: .5rem }
.econs-solution__content .text-block p { font-family: PlusJakartaDisplay, sans-serif; font-weight: 300; font-size: 1rem; line-height: 1.5; color: hsla(0, 0%, 100%, .88) }
.econs-solution__content .list { --item-gap: 2.75rem; position: relative; margin-left: 10%; padding-left: 10%; }
/**
* 中间竖向分隔线：上下淡出，入场时自顶向下展开
*/
.econs-solution__content .list:before { content: ""; display: block; position: absolute; width: 6px; height: 100%; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 50%, rgba(255, 255, 255, 0) 100%); left: 0; top: 0 }
.econs-solution__content .list .item { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 3.25rem; padding-left: 2.25rem; transition: transform .35s ease, opacity .35s ease }
.econs-solution__content .list .item:not(:first-child) { margin-top: var(--item-gap) }
.econs-solution__content .list .item:before { content: ""; position: absolute; left: 0; top: 1.05rem; width: .4rem; height: .4rem; border-radius: 50%; background: #fff; box-shadow: 0 0 .55rem hsla(0, 0%, 100%, .65) }
.econs-solution__content .list .item h5 { font-family: PlusJakartaDisplay, sans-serif; font-size: .95rem; letter-spacing: .04em; line-height: 1.35; color: #fff; font-weight: 300; text-transform: uppercase }
.econs-solution__content .list .item p { font-family: PlusJakartaDisplay, sans-serif; font-weight: 300; font-size: .95rem; line-height: 1.45; margin-top: .35rem; color: hsla(0, 0%, 100%, .72) }
/**
* 条目之间的横向分隔线（每条下方居中淡入）
*/
.econs-solution__content .list .item:not(:last-child):after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--item-gap) / -2); height: 1px; background: linear-gradient(90deg, hsla(0, 0%, 100%, .28), hsla(0, 0%, 100%, .08) 70%, transparent) }
.econs-solution__content .list .item:hover { transform: translateX(.35rem) }
.econs-solution__content .list .item:hover:before { box-shadow: 0 0 .85rem hsla(185, 100%, 70%, .95); background: #00f0ff }
.econs-solution:after, .econs-solution:before { opacity: 0; transition: calc(var(--content-appear-time) + .5s) opacity }
.econs-solution .list:before { opacity: 0; max-height: 0; transition: calc(var(--content-appear-time) + .5s) opacity, calc(var(--content-appear-time) + .5s) max-height }
.econs-solution.active:after, .econs-solution.active:before { opacity: 1 }
.econs-solution.active .list:before { opacity: 1; max-height: 100% }
/**
* Screen 8: TOKEN ECONOMY
* 入场时 blur 伪元素 opacity:0→1
*/
.token-economy { position: relative; display: flex; justify-content: space-between; align-items: center }
.token-economy:before { content: ""; display: block; position: absolute; width: 100vw; height: 100vw; right: 0vw; opacity: .7; z-index: 1; position: absolute; left: 0px; background: radial-gradient(50% 50% at 50% 50%, #144683 0%, #000000 100%); }
.token-economy__description { z-index: 3 }
.token-economy__description .screen-subtitle { margin-top: 2rem }
.token-economy__description .screen-title { position: relative; margin-top: 1rem }
.token-economy__description .text-block { font-family: PlusJakartaDisplay, sans-serif; font-weight: 300; font-size: 1rem; line-height: 1.375rem; max-width: 17.625rem; margin-top: 3.6875rem }
.token-economy__description .learn-button { margin-top: 5.0625rem }
.token-economy__slider { z-index: 3; display: flex; justify-content: center; align-items: center; margin-left: 12.5rem }
.token-economy__slider .token-economy__sliders { background: hsla(0, 0%, 100%, .06); padding: 7.25rem 5rem; -webkit-backdrop-filter: blur(50px); backdrop-filter: blur(50px) }
.token-economy__slider .token-economy__items { display: grid; grid-template-columns: 1fr; grid-template-rows: 3fr; grid-gap: 2.5rem; }
.token-economy__slider .token-economy__item::before { margin-top: 0.625rem; content: ""; position: absolute; display: block; width: 10px; height: 10px; background: #fff; border-radius: 50%; }
.token-economy__slider .token-economy__items .line { width: 100%; height: 1px; background: #888888; }
.token-economy__slider .token-economy__info { margin-left: 1.25rem; }
.token-economy__slider .token-economy__item h5 { margin-bottom: .625rem; font-size: 1.25rem; font-weight: 400; line-height: 1.375rem; color: #fff; }
.token-economy__slider .token-economy__item p { font-size: 1rem; font-weight: 400; color: #fff; line-height: 1.375rem; }
.token-economy__slider .token-economy__sliders .slide h4 { font-family: PlusJakartaDisplay, sans-serif; font-weight: 700; font-size: 1.375rem; line-height: 2rem; display: flex; justify-content: flex-start; align-items: center }
.token-economy__slider .token-economy__sliders .slide h4:before { content: "01"; font-family: PlusJakartaDisplay, sans-serif; font-weight: 300; font-size: 2.1875rem; margin-right: .875rem }
.token-economy__slider .token-economy__sliders .slide .subtitle { font-family: PlusJakartaDisplay, sans-serif; font-weight: 400; font-size: .875rem; line-height: 1.3125rem; margin-top: .75rem; max-width: 20rem }
.token-economy__slider .token-economy__sliders .slide ul { --line-height: 1.3125rem; font-family: PlusJakartaDisplay, sans-serif; font-weight: 300; font-size: .875rem; line-height: var(--line-height); margin-top: 2rem; max-width: 22rem; opacity: .85 }
.token-economy__slider .token-economy__sliders .slide ul li { display: flex; justify-content: flex-start; align-items: flex-start }
.token-economy__slider .token-economy__sliders .slide ul li:before { content: ""; display: block; width: .5rem; height: .5rem; min-width: .5rem; min-height: .5rem; background: #fff; border-radius: 50%; margin-top: calc(var(--line-height)/3); margin-right: 1rem }
.token-economy__slider .token-economy__sliders .slide ul li:not(:first-child) { margin-top: 1rem }
.token-economy__slider .stages { position: relative; font-family: Azonix, sans-serif; font-weight: 300; font-size: 1.375rem; margin-left: 3.4375rem; display: flex; flex-direction: column; justify-content: space-between; align-items: center }
.token-economy__slider .stages:before { content: ""; display: block; position: absolute; width: 7rem; height: 7rem; border-radius: 50%; background: hsla(0, 0%, 100%, .01); box-shadow: inset -10px 14px 20px hsla(0, 0%, 100%, .08); -webkit-backdrop-filter: blur(44px); backdrop-filter: blur(44px); z-index: -1; top: 10%; left: -2.5rem; transform: translateY(-50%) }
.token-economy__slider .stages .line { height: 3.375rem; width: 2px; background: #fff; margin: 1.3125rem 0 }
.token-economy:before { opacity: 0; transition: calc(var(--content-appear-time) + .5s) opacity }
.token-economy.active:after, .token-economy.active:before { opacity: 1 }
/**
* Screen 9: NOMOCRACY
* 箭头使用 lighten @keyframes 扫光动画
*/
.nomocracy { position: relative; display: flex; justify-content: center; align-items: center }
.nomocracy:after { content: ""; display: block; position: absolute; background: url(../image/blur-11.0e8e4eb3.png) no-repeat; background-size: contain; background-position: 50%; width: 100vw; height: 100vw; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: .7; z-index: 1 }
.nomocracy__description { display: flex; flex-direction: column; align-items: center; z-index: 3 }
.nomocracy__description .screen-title { margin-top: 3.375rem }
.nomocracy__description .subtitle { display: flex; justify-content: center; align-items: center; font-family: Azonix, sans-serif; font-weight: 300; font-size: 1.375rem; margin-top: 4rem }
.nomocracy__description .divider { height: 1.5rem; width: 1px; background: #fff; margin: 0 3rem }
.nomocracy__description p { width: 14.3125rem }
.nomocracy__text-content { display: flex; justify-content: center; align-items: flex-start }
.nomocracy__text-content .text-block { --text-block-height: 6.25rem; position: relative; margin-bottom: var(--text-block-height); height: 6.125rem }
.nomocracy__text-content .text-block h4 { font-family: PlusJakartaDisplay, sans-serif; font-weight: 500; font-size: 1.125rem }
.nomocracy__text-content .text-block ul { margin-top: .625rem }
.nomocracy__text-content .text-block ul li:not(:first-child) { font-family: PlusJakartaDisplay, sans-serif; font-weight: 300; font-size: 1rem; margin-top: .5rem }
.nomocracy__text-content .text-block ul li { display: flex; justify-content: flex-start; align-items: center }
.nomocracy__text-content .text-block ul li:before { content: ""; display: block; width: 3px; height: 3px; min-width: 3px; min-height: 3px; background: #fff; border-radius: 50%; margin-right: 1rem }
.nomocracy__text-content .text-block .arrow { position: absolute; display: block; width: 7.125rem; height: 7.1875rem; top: calc(100% + var(--text-block-height)/3); left: 50%; transform: translate(-50%) }
.nomocracy__text-content .text-block .arrow svg { width: 100%; height: 100%; min-width: 100%; min-height: 100% }
.nomocracy__text-content .text-block:nth-child(2) { margin-left: 8.4375rem; margin-right: 7.4375rem }
.nomocracy__text-content .arrow { --color-path-1:hsla(0, 0%, 100%, 0.3); --color-path-2:#fff; -webkit-animation: lighten 1.5s infinite; animation: lighten 1.5s infinite }
.nomocracy__text-content .arrow svg path { transition: fill .5s ease }
.nomocracy:after, .nomocracy:before { opacity: 0; transition: calc(var(--content-appear-time) + .5s) opacity }
.nomocracy.active:after, .nomocracy.active:before { opacity: 1 }
/**
* Screen 10: ROADMAP
* @keyframes: progressLighten —— SVG 路径扫光动画
* 6 个 CSS 变量（--color-path-1~6）依次高亮，模拟进度线条流动
*/
.roadmap { position: relative; display: flex; flex-direction: column; justify-content: center }
.roadmap:before { background: url(../image/blur-12.svg) no-repeat center bottom; background-size: 100%; height: 100vh; min-width: 100vh; right: 0; left: 0 }
.roadmap:after, .roadmap:before { content: ""; display: block; position: absolute; width: 100vw; opacity: .7; z-index: 1 }
/* .roadmap:after {
background: url(../image/blur-8.d23feeef.png) no-repeat;
background-size: contain;
background-position: 50%;
height: 100vh;
min-width: 100vh;
left: -50vw;
top: 0
} */
.roadmap__description { position: relative; z-index: 3 }
.roadmap__description .screen-title { position: relative; margin-top: 1rem }
.roadmap__text-content { display: flex; justify-content: space-between; align-items: flex-end; z-index: 3 }
.roadmap__text-content .text-block { position: relative; max-width: 16rem }
.roadmap__text-content .text-block h4 { font-family: Azonix, sans-serif; font-weight: 300; font-size: 1.125rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.roadmap__text-content .text-block p { font-family: sans-serif; font-weight: 300; font-size: .875rem; }
.roadmap__text-content .text-block ul { margin-top: .625rem }
.roadmap__text-content .text-block ul li:not(:first-child) { font-family: PlusJakartaDisplay, sans-serif; font-weight: 300; font-size: 1rem; margin-top: .5rem }
.roadmap__text-content .text-block ul li { display: flex; justify-content: flex-start; align-items: center }
.roadmap__text-content .text-block ul li:before { content: ""; display: block; width: 3px; height: 3px; min-width: 3px; min-height: 3px; background: #fff; border-radius: 50%; margin-right: 1rem }
.roadmap__text-content .text-block:nth-child(2) { margin-bottom: 2rem }
.roadmap__text-content .text-block:nth-child(3) { margin-bottom: 5rem }
.roadmap__text-content .text-block:nth-child(4) { margin-bottom: 10rem }
.roadmap__text-content .text-block:nth-child(5) { margin-bottom: 18rem }
.roadmap__progress { --color-path-1:hsla(0, 0%, 100%, 0.3); --color-path-2:hsla(0, 0%, 100%, 0.3); --color-path-3:hsla(0, 0%, 100%, 0.3); --color-path-4:hsla(0, 0%, 100%, 0.3); --color-path-5:hsla(0, 0%, 100%, 0.3); --color-path-6:hsla(0, 0%, 100%, 0.3); position: absolute; width: 100%; height: 100%; top: 0; left: 0; -webkit-animation: progressLighten 2s infinite; animation: progressLighten 2s infinite; z-index: 1 }
.roadmap__progress svg { position: absolute; width: 100vw; height: auto; bottom: -9.5vw; right: -4vw; }
.roadmap__progress svg path { transition: fill .3s ease }
@-webkit-keyframes progressLighten {
0% { --color-path-1:#fff }
15% { --color-path-1:hsla(0, 0%, 100%, 0.3); --color-path-2:#fff }
30% { --color-path-2:hsla(0, 0%, 100%, 0.3); --color-path-3:#fff }
45% { --color-path-3:hsla(0, 0%, 100%, 0.3); --color-path-4:#fff }
60% { --color-path-4:hsla(0, 0%, 100%, 0.3); --color-path-5:#fff }
75% { --color-path-5:hsla(0, 0%, 100%, 0.3); --color-path-6:#fff }
80% { --color-path-6:hsla(0, 0%, 100%, 0.3) }
to { --color-path-6:hsla(0, 0%, 100%, 0.3) }
}
@keyframes progressLighten {
0% { --color-path-1:#fff }
15% { --color-path-1:hsla(0, 0%, 100%, 0.3); --color-path-2:#fff }
30% { --color-path-2:hsla(0, 0%, 100%, 0.3); --color-path-3:#fff }
45% { --color-path-3:hsla(0, 0%, 100%, 0.3); --color-path-4:#fff }
60% { --color-path-4:hsla(0, 0%, 100%, 0.3); --color-path-5:#fff }
75% { --color-path-5:hsla(0, 0%, 100%, 0.3); --color-path-6:#fff }
80% { --color-path-6:hsla(0, 0%, 100%, 0.3) }
to { --color-path-6:hsla(0, 0%, 100%, 0.3) }
}
.roadmap .roadmap__progress, .roadmap:after, .roadmap:before { opacity: 0; transition: calc(var(--content-appear-time) + .5s) opacity }
.roadmap.active .roadmap__progress, .roadmap.active:after, .roadmap.active:before { opacity: 1 }
/**
* .screens——整屏翻页容器
* 可视高度 = 100vh - 顶栏高度，避免内容被 main-header 遮挡
* 注意：不能加 position/z-index（否则会创建堆叠上下文，把底部 .container 里的 fluid-ball 视频球整个盖住）
* .screens__flow-container 所有子屏垂直排列，由 js/main.js 通过 transform 逐屏位移
*/
.screens { overflow: hidden; margin-top: var(--header-height); height: calc(100vh - var(--header-height)); max-height: calc(100vh - var(--header-height)) }
/** .screens__flow-container——每个子屏的默认布局 */
.screens__flow-container > div:nth-child(n+1) { position: relative; width: 100%; height: calc(100vh - var(--header-height)); padding-left: 14.5rem; padding-top: 2rem; padding-bottom: 2rem; padding-right: 2rem; box-sizing: border-box }
@media screen and (max-width:1400px) {
.screens__flow-container > div:nth-child(n+1) { padding-left: 4rem; }
}
/**
* .navigation-bar——左侧竖排导航
* 关键巧妙设计：
* 1. rotate(-90deg) 让水平排列变成竖排显示
* 2. transform-origin 保持旋转后位置正确
* 3. .nav-button 文字 white-space:nowrap 防止旋转后换行
* 4. 居中公式（js/main.js）：x = flow容器宽度 - 按钮offsetLeft
* 5. 移动端：取消旋转变为全屏菜单，translate3d(0,100%,0) 隐藏
*/
.navigation-bar { position: absolute; top: 50%; left: 5rem; width: 100vh; height: 2.25rem; transform: translate3d(-50%, -50%, 0) rotate(-90deg); overflow: hidden; z-index: 10 }
.navigation-bar .nav-button { font-family: Manifold, sans-serif; font-weight: 400; letter-spacing: .1em; font-size: 1.125rem; opacity: .3; transition: opacity .5s ease; cursor: pointer; white-space: nowrap }
.navigation-bar .nav-button > span { display: block; transform: scale(.8); transition: transform 1s ease }
.navigation-bar .nav-button:hover { opacity: .7 }
.navigation-bar .nav-button.active { opacity: 1; visibility: visible }
.navigation-bar .nav-button.active > span { transform: scale(1) }
.navigation-bar .nav-button.active:hover { opacity: 1 }
.navigation-bar .nav-button:not(:last-child) { margin-left: 6rem }
.navigation-bar__offset-container { position: absolute; width: 100%; height: 100%; right: 50%; top: 0 }
.navigation-bar__flow-container { position: absolute; display: flex; justify-content: flex-start; flex-direction: row-reverse; align-items: center; will-change: transform; contain: layout; right: 0; top: 0 }
.navigation-bar__active { position: absolute; width: 1.25rem; height: 2px; background: #fff; left: 50%; bottom: 0 }
.navigation-bar .header { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 2rem }
.navigation-bar .header .logo img { width: 3.25rem; height: auto }
.navigation-bar .header .close { width: 1.625rem; height: 1.625rem }
.navigation-bar .header .close img, .navigation-bar .header .close svg { width: 100%; height: 100%; min-width: 100%; min-height: 100% }
.navigation-bar .footer { display: flex; justify-content: flex-start; align-items: center; margin-top: auto }
.navigation-bar .footer a { display: block; width: 2rem; height: 2rem }
.navigation-bar .footer a img, .navigation-bar .footer a svg { width: 100%; height: 100%; min-width: 100%; min-height: 100% }
.navigation-bar .footer a:not(:first-child) { margin-left: 2rem }
/**
* .main-header——顶部常驻导航栏（fixed，各屏高度扣除 --header-height）
* 鼠标悬停效果：链接上浮 2px（translate3d(0,-2px,0)）
*/
.main-header { position: fixed; display: flex; justify-content: space-between; align-items: center; width: 100%; height: var(--header-height); padding: 0 10rem; background: #fff; border-bottom: 1px solid rgba(0, 0, 0, .06); top: 0; left: 0; z-index: 30; box-sizing: border-box; transition: opacity .3s ease }
.main-header .logo img { width: 8.75rem; height: auto; display: block }
.main-header .links { display: flex; align-items: center; font-family: Arial, sans-serif; font-weight: 400; font-size: 1rem; margin-left: auto }
.main-header .links .nav-item { position: relative; display: inline-block }
.main-header .links .nav-item + .nav-item, .main-header .links .nav-item + a, .main-header .links a + a { margin-left: 1.75rem }
.main-header .links a { display: inline-block; color: #1d1d1f; text-decoration: none; transition: opacity .3s ease, color .3s ease, transform .3s ease }
.main-header .links .nav-item > a:hover, .main-header .links > a:hover { opacity: .8; color: #003da5; transform: translate3d(0, -2px, 0) }
.main-header .links .nav-item > a.active, .main-header .links > a.active{opacity: .8; color: #003da5; transform: translate3d(0, 0px, 0)}
.main-header .links .nav-caret { display: inline-block; width: 6px; height: 6px; margin-left: .35rem; margin-bottom: .15rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); vertical-align: middle }
.main-header .links .nav-dropdown { position: absolute; top: calc(100% + .35rem); left: 0; min-width: 12.5rem; padding: .45rem 0; background: #fff; border: 1px solid rgba(0, 0, 0, .06); border-radius: .35rem; box-shadow: 0 10px 28px rgba(15, 51, 95, .12); opacity: 0; visibility: hidden; pointer-events: none; transform: translate3d(0, .4rem, 0); transition: opacity .22s ease, transform .22s ease, visibility .22s; z-index: 31 }
.main-header .links .nav-item.has-dropdown::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: .55rem }
.main-header .links .nav-item.has-dropdown:hover .nav-dropdown, .main-header .links .nav-item.has-dropdown:focus-within .nav-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateZ(0) }
.main-header .links .nav-dropdown a { display: block; margin: 0; padding: .55rem 1rem; white-space: nowrap; transform: none }
.main-header .links .nav-dropdown a:hover,.main-header .links .nav-dropdown a.active { color: #003da5; background: rgba(0, 61, 165, .06) }
.main-header .button-menu { display: none }
/**
* Mobile flyout (<991px): Apple-style globalnav-flyout
*/
.main-header .logo a { display: block; line-height: 0 }
.main-header a { text-decoration: none }
/**
* .fluid-ball——视频背景球（3 个）
* 每个屏有专属的 transform/z-index 状态（来自 js/main.js 的 BALL_STATES 表）
* mix-blend-mode:screen 使彩色视频与深色背景融合
* video 内联铺满，transition: transform 1s ease-in-out 平滑切换
*/
.fluid-ball { position: absolute; width: 120vw; height: 120vh; top: -5vw; left: -5vh; z-index: 1; mix-blend-mode: screen; pointer-events: none; transition: transform 1s ease-in-out; display: flex; justify-content: center; align-items: center }
.fluid-ball video { width: 100%; height: 100% }
.main { position: relative; overflow: hidden; width: 100%; height: 100vh; max-height: 100vh }
* { margin: 0; padding: 0; outline: none; border: none; text-decoration: none; box-sizing: border-box }
h1, h2, h3, h4, h5, h6 { font-weight: 300 }
ul { list-style: none }
.screen-title { font-family: Azonix, sans-serif; font-weight: 300; font-size: 2rem; color: #00F0FF; background-color: #00F0FF; background: linear-gradient(102.46deg, #00F0FF -3.7%, #44ACEF 73.3%);     /* background-image: linear-gradient(93.77deg, #6c6aff -14.61%, #fbc7d4 86.26%, #ff658b 106.26%); */ -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent }
.screen-title span, .screen-title p { color: #00F0FF; background-color: #00F0FF; background: linear-gradient(102.46deg, #00F0FF -3.7%, #44ACEF 73.3%);     /* background-image: linear-gradient(93.77deg, #6c6aff -14.61%, #fbc7d4 86.26%, #ff658b 106.26%); */ -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent }
.screen-subtitle { font-family: PlusJakartaDisplay, sans-serif; font-weight: 500; font-size: 1.125rem; color: #fff }
/**
* :root——入口动画时间变量（核心控制点）
* --content-appear-time: .75s —— 所有屏内入场动画的基础时长
* 所有 -trAnim 延迟 = .75s + 0.1s×N，即整体持续 1.5s × 15 级
* 可根据需要调整此变量加快/减慢全部入场动画
*/
:root { --header-height: 4.5rem; --content-appear-time: .75s }
/**
* :root——设计令牌（Design Tokens）
* 颜色、间距、字号等全局变量，所有屏的样式均引用这些值
*/
:root { --color-white: #fff; --color-blue-light: #5a4bff; --color-blue: #0500ff; --color-blue-dark: #08051f; --spacing-1:1px; --spacing-84:5.25rem; --font-size-14:0.875rem; --font-size-16:1rem; --font-size-18:1.125rem; --font-size-20:1.25rem; --font-size-22:1.375rem; --font-size-24:1.5rem; --font-size-26:1.625rem; --font-size-32:2rem; --font-size-36:2.25rem; --font-size-38:2.375rem; --font-size-40:2.5rem; --font-size-54:3.375rem; --font-size-61:3.8125rem; --font-size-64:4rem; --font-size-144:9rem }
html { font-family: PlusJakartaDisplay, sans-serif; font-weight: 300; color: #fff; background: #08051f; font-size: 16px }
:root { --color-white: #fff; --color-blue-light: #5a4bff; --color-blue: #0500ff; --color-blue-dark: #08051f; --spacing-1:1px; --spacing-84:5.25rem; --font-size-14:0.875rem; --font-size-16:1rem; --font-size-18:1.125rem; --font-size-20:1.25rem; --font-size-22:1.375rem; --font-size-24:1.5rem; --font-size-26:1.625rem; --font-size-32:2rem; --font-size-36:2.25rem; --font-size-38:2.375rem; --font-size-40:2.5rem; --font-size-54:3.375rem; --font-size-61:3.8125rem; --font-size-64:4rem; --font-size-144:9rem }
/**
* @font-face——字体声明
* 3 个字体族：Azonix（标题粗体）、Manifold（导航/header）、PlusJakartaDisplay（正文）
* 所有 .otf 文件位于 ../fonts/ 目录
* 注意：字体加载完成前，JS 会等待 document.fonts.ready 再重算导航居中
*/
@font-face { font-family: Azonix; src: url(../fonts/Azonix.cdfe47b3.otf) format("truetype"); font-style: normal; font-weight: 300 }
@font-face { font-family: Manifold; src: url(../fonts/Fontspring-DEMO-manifoldextendedcf-medium.98e5d531.otf) format("truetype"); font-style: normal; font-weight: 400 }
@font-face { font-family: PlusJakartaDisplay; src: url(../fonts/PlusJakartaDisplay-Light.c54e8a0e.otf) format("truetype"); font-style: normal; font-weight: 300 }
@font-face { font-family: PlusJakartaDisplay; src: url(../fonts/PlusJakartaDisplay-Regular.a81ce9b4.otf) format("truetype"); font-style: normal; font-weight: 400 }
@font-face { font-family: PlusJakartaDisplay; src: url(../fonts/PlusJakartaDisplay-Medium.1f27f846.otf) format("truetype"); font-style: normal; font-weight: 500 }
@font-face { font-family: PlusJakartaDisplay; src: url(../fonts/PlusJakartaDisplay-Bold.1e5642fd.otf) format("truetype"); font-style: normal; font-weight: 700 }
/**
* ===== -trAnim-N 工具类（屏内元素入场动画）=====
* 使用方式：给需要入场动画的元素添加 class="-trAnim-1" ~ "-trAnim-15"
* 编号越大，延迟越长（延迟 = --content-appear-time + 编号×0.1s）
* 动画内容：translate3d(0, 5rem, 0) + opacity:0 → translateZ(0) + opacity:1
* 触发条件：父级屏元素获得 .active 类
* 最后一条规则是所有 .active 下的 -trAnim-N 同时归位
*/
.-trAnim-1 { transition: var(--content-appear-time) transform .1s, var(--content-appear-time) opacity .1s }
.-trAnim-1, .-trAnim-2 { transform: translate3d(0, 5rem, 0); opacity: 0 }
.-trAnim-2 { transition: var(--content-appear-time) transform .2s, var(--content-appear-time) opacity .2s }
.-trAnim-3 { transition: var(--content-appear-time) transform .3s, var(--content-appear-time) opacity .3s }
.-trAnim-3, .-trAnim-4 { transform: translate3d(0, 5rem, 0); opacity: 0 }
.-trAnim-4 { transition: var(--content-appear-time) transform .4s, var(--content-appear-time) opacity .4s }
.-trAnim-5 { transition: var(--content-appear-time) transform .5s, var(--content-appear-time) opacity .5s }
.-trAnim-5, .-trAnim-6 { transform: translate3d(0, 5rem, 0); opacity: 0 }
.-trAnim-6 { transition: var(--content-appear-time) transform .6s, var(--content-appear-time) opacity .6s }
.-trAnim-7 { transition: var(--content-appear-time) transform .7s, var(--content-appear-time) opacity .7s }
.-trAnim-7, .-trAnim-8 { transform: translate3d(0, 5rem, 0); opacity: 0 }
.-trAnim-8 { transition: var(--content-appear-time) transform .8s, var(--content-appear-time) opacity .8s }
.-trAnim-9 { transition: var(--content-appear-time) transform .9s, var(--content-appear-time) opacity .9s }
.-trAnim-9, .-trAnim-10 { transform: translate3d(0, 5rem, 0); opacity: 0 }
.-trAnim-10 { transition: var(--content-appear-time) transform 1s, var(--content-appear-time) opacity 1s }
.-trAnim-11 { transition: var(--content-appear-time) transform 1.1s, var(--content-appear-time) opacity 1.1s }
.-trAnim-11, .-trAnim-12 { transform: translate3d(0, 5rem, 0); opacity: 0 }
.-trAnim-12 { transition: var(--content-appear-time) transform 1.2s, var(--content-appear-time) opacity 1.2s }
.-trAnim-13 { transition: var(--content-appear-time) transform 1.3s, var(--content-appear-time) opacity 1.3s }
.-trAnim-13, .-trAnim-14 { transform: translate3d(0, 5rem, 0); opacity: 0 }
.-trAnim-14 { transition: var(--content-appear-time) transform 1.4s, var(--content-appear-time) opacity 1.4s }
.-trAnim-15 { transition: var(--content-appear-time) transform 1.5s, var(--content-appear-time) opacity 1.5s; transform: translate3d(0, 5rem, 0); opacity: 0 }
.active .-trAnim-1, .active .-trAnim-2, .active .-trAnim-3, .active .-trAnim-4, .active .-trAnim-5, .active .-trAnim-6, .active .-trAnim-7, .active .-trAnim-8, .active .-trAnim-9, .active .-trAnim-10, .active .-trAnim-11, .active .-trAnim-12, .active .-trAnim-13, .active .-trAnim-14, .active .-trAnim-15 { transform: translateZ(0); opacity: 1 }
.body-zh .project-twelve h1 { font-size: 158px; max-width: 800px; font-weight: 700; line-height: 1.4; }
.body-zh .architecture-first .screen-title { font-size: 64px; font-weight: 400; }
.body-zh .screen-title { font-size: 64px; font-weight: 400; }
.body-zh .blockchain-veterans h2 { font-size: 74px; font-weight: 400; line-height: 1.4; }
.body-zh .token-economy .screen-title { font-size: 64px; font-weight: 400; line-height: 1.4; max-width: 400px; }
.body-zh .infrared-body { margin: 20% auto 5%; max-width: 33rem; }
@media screen and (max-width:991px) {
.body-zh .project-twelve h1 { font-size: 72px; line-height: 1.25; max-width: 100%; }
.body-zh .architecture-first .screen-title,
.body-zh .screen-title,
.body-zh .token-economy .screen-title { font-size: 36px; max-width: 100%; }
.body-zh .blockchain-veterans h2 { font-size: 40px; line-height: 1.3; }
.body-zh .infrared-body { margin: 12% auto 4%; max-width: 100%; }
}
@media screen and (max-width:576px) {
.body-zh .project-twelve h1 { font-size: 40px; line-height: 1.2; }
.body-zh .architecture-first .screen-title,
.body-zh .screen-title,
.body-zh .token-economy .screen-title { font-size: 26px; }
.body-zh .blockchain-veterans h2 { font-size: 28px; line-height: 1.3; }
.body-zh .infrared-body { margin: 8% auto 3%; }
}
/**
* ===== Responsive (all @media moved here) =====
* Order: min-width / aspect-ratio / max-width 1400 → 1200 → 991 → 900 → 576
*/
@media screen and (min-width:992px) {
.globalnav-flyout, .main-header .button-menu { display: none !important }
}
@media screen and (min-width:577px) {
.architecture-second__scheme .column-panels { display: grid; align-items: stretch; justify-items: start; }
.architecture-second__scheme .column-panels > .column { grid-area: 1 / 1; display: flex; width: 100%; align-items: stretch; justify-content: center; visibility: hidden; opacity: 0; pointer-events: none; z-index: 0; }
.architecture-second__scheme .column-panels > .column.is-active { visibility: visible; opacity: 1; pointer-events: auto; z-index: 1; }
.architecture-second__scheme .column-panels .row { width: 100%; justify-content: flex-start; }
.architecture-second__scheme .column-panels .row > div:last-child { margin-left: 0; }
.architecture-second__scheme .column-panels .glass-block { align-self: flex-start; }
}
@media screen and (min-aspect-ratio:121/60) {
.architecture-first__scheme .platform { width: 50% }
}
@media screen and (min-aspect-ratio:1210/661) {
.architecture-first__scheme .platform { width: 60% }
.architecture-first__scheme .citizens { width: 20vh; height: 20vh }
.architecture-first__scheme .orbits .orbit-2 .glass-circle:first-child { width: 4vh; height: 4vh; font-size: 1rem; left: -3% }
.architecture-first__scheme .orbits .orbit-2 .glass-circle:first-child .glass-circle-text { font-size: 1rem }
.architecture-first__scheme .orbits .orbit-2 .glass-circle:last-child { width: 4vh; height: 4vh; font-size: 1rem; right: -3% }
.architecture-first__scheme .orbits .orbit-2 .glass-circle:last-child .glass-circle-text { font-size: 1rem }
.architecture-first__scheme .orbits .orbit-3 .glass-circle:first-child { width: 8.5vh; height: 8.5vh; font-size: 1.5rem; left: 12%; bottom: 5%; }
.architecture-first__scheme .orbits .orbit-3 .glass-circle:first-child .glass-circle-text { font-size: 1rem; top: 50%; right: 110% }
.architecture-first__scheme .orbits .orbit-3 .glass-circle:nth-child(2) { width: 7vh; height: 7vh; font-size: 1.25rem; bottom: 20% }
.architecture-first__scheme .orbits .orbit-3 .glass-circle:nth-child(3) { width: 7vh; height: 7vh; font-size: 1.25rem; bottom: 8% }
.architecture-first__scheme .orbits .orbit-3 .glass-circle:nth-child(2) .glass-circle-text { font-size: 1rem }
.architecture-first__scheme .orbits .orbit-3 .glass-circle:nth-child(3) .glass-circle-text { font-size: 1rem }
}
@media screen and (min-aspect-ratio:242/113) {
.architecture-first__scheme .platform { width: 40% }
}
@media screen and (min-aspect-ratio:485/234) {
.tech-solution__canvas { font-size: .6rem }
}
@media screen and (min-aspect-ratio:485/309) {
.tech-solution__canvas { font-size: .8rem }
}
@media screen and (min-aspect-ratio:97/53) {
.tech-solution__canvas { font-size: .7rem }
}
@media screen and (min-aspect-ratio:97/71) {
.tech-solution__canvas { font-size: .9rem }
}
@media screen and (max-aspect-ratio:227/203) {
.architecture-first__scheme .platform { width: 100% }
}
@media screen and (max-width:1440px) {
.roadmap__progress svg { left: -12vw }
}
@media screen and (max-width:1400px) and (min-width:577px) {
.screens__flow-container > .architecture-second { padding-left: 11rem; padding-right: 2.5rem; padding-top: 1.5rem; padding-bottom: 1.5rem; }
.architecture-second__description .screen-title { font-size: 1.75rem; }
.architecture-second__scheme .glass-block { font-size: 1.0625rem; padding: 1rem 1.75rem; line-height: 1.4; }
.architecture-second__scheme .gradient-block { padding: .6rem 2rem; }
.column-nav { margin-left: 12%; }
.architecture-second__scheme .column-panels { margin-left: 18%; }
.architecture-second__scheme .column .row:not(:first-child), .architecture-second__scheme .column > [class*=block]:not(:first-child) { margin-top: .85rem; }
.architecture-second.active .arrow { max-width: 11rem; }
}
@media screen and (max-width:1400px) {
.main-header { padding: 0 1rem; }
}
@media screen and (max-width:1200px) {
.architecture-first__scheme .orbits .orbit-2 .glass-circle:last-child .glass-circle-text { font-size: 14px; }
.architecture-first__scheme .orbits .orbit-3 .glass-circle:nth-child(2) .glass-circle-text { font-size: 14px; }
.architecture-first__scheme .orbits .orbit-3 .glass-circle:nth-child(3) .glass-circle-text { font-size: 14px; }
.architecture-first__scheme .orbits .orbit-2 .glass-circle:first-child .glass-circle-text { font-size: 14px; text-align: right; }
.architecture-first__scheme .orbits .orbit-3 .glass-circle:first-child .glass-circle-text { font-size: 14px; text-align: right; }
}
@media screen and (max-width:1200px) and (min-width:577px) {
.screens__flow-container > .architecture-second { padding-left: 8.5rem; padding-right: 2rem; }
.architecture-second__description .screen-title { font-size: 1.5rem; }
.architecture-second__scheme .glass-block { font-size: .9375rem; padding: .7rem 1.25rem; line-height: 1.35; }
.architecture-second__scheme .gradient-block { padding: .5rem 1.5rem; }
.column-nav { margin-left: 21%; }
.architecture-second__scheme .column-panels { margin-left: 20%; }
.architecture-second__scheme .column .row:not(:first-child), .architecture-second__scheme .column > [class*=block]:not(:first-child) { margin-top: .7rem; }
.architecture-second__scheme .arrow { height: calc(100% - 2.5rem); top: 1.25rem; }
.architecture-second.active .arrow { max-width: 9rem; }
.architecture-second__scheme .column-1 .arrow, .architecture-second__scheme .column-2 .arrow, .architecture-second__scheme .column-3 .arrow, .architecture-second__scheme .column-4 .arrow { top: 19px }
}
@media screen and (max-width:1200px) {
.architecture-second__scheme .column:nth-child(3) .arrow { top: 19px }
.main-header { padding: 0 2rem }
.main-header .links .nav-item + .nav-item, .main-header .links .nav-item + a, .main-header .links a + a { margin-left: 1rem }
}
@media screen and (max-width:991px) and (min-width:577px) {
.screens__flow-container > .architecture-second { padding-left: 6.5rem; padding-right: 1.5rem; }
.screens__flow-container > div:nth-child(5) { padding-left: 2rem; padding-right: 2rem; }
.architecture-second__description .screen-subtitle { margin-top: 1rem; }
.architecture-second__description .screen-title { font-size: 1.25rem; }
.architecture-second__flow-container { margin-top: 4%; }
.architecture-second__scheme .glass-block { font-size: .8125rem; font-weight: 500; padding: .5rem .95rem; line-height: 1.3; }
.architecture-second__scheme .column-panels .glass-block { white-space: normal; max-width: 12.5rem; text-align: left; }
.architecture-second__scheme .gradient-block { padding: .4rem 1.15rem; }
.architecture-second__scheme .gradient-block img { display: block; height: 1.15rem; width: auto; }
.architecture-second__scheme .column .row:not(:first-child), .architecture-second__scheme .column > [class*=block]:not(:first-child) { margin-top: .55rem; }
.architecture-second__scheme .arrow { height: calc(100% - 1.75rem); top: 1rem; }
.architecture-second.active .arrow { max-width: 6.5rem; }
}
@media screen and (max-width:991px) {
.main-header .links { display: none }
.main-header { height: 50px; padding: 0 20px; z-index: 40 }
.main-header .logo { position: relative; z-index: 42 }
.main-header .logo img { width: auto; height: 24px }
.main-header .button-menu { position: relative; z-index: 42; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 44px; height: 44px; margin-left: auto; margin-right: -8px; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent }
.main-header .button-menu__line { display: block; width: 17px; height: 1px; background: #1d1d1f; border-radius: 1px; transform-origin: center; transition: transform .32s cubic-bezier(.4, 0, .2, 1), opacity .2s ease }
.main-header .button-menu__line + .button-menu__line { margin-top: 4px }
/* 间距 4px + 线高 1px → 中心距 5px，各移 2.5px 才能对准成 X */
.main-header.is-open .button-menu__line:first-child { transform: translateY(2.5px) rotate(45deg) }
.main-header.is-open .button-menu__line:last-child { transform: translateY(-2.5px) rotate(-45deg) }
.globalnav-flyout { position: fixed; left: 0; right: 0; top: 0; height: 100vh; height: 100dvh; padding: calc(var(--header-height) + .5rem) 0 2rem; background: #fff; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; visibility: hidden; pointer-events: none; clip-path: inset(0 0 100% 0); transition: clip-path .42s cubic-bezier(.4, 0, .2, 1), visibility .42s; z-index: 41 }
.main-header.is-open .globalnav-flyout { visibility: visible; pointer-events: auto; clip-path: inset(0) }
.globalnav-flyout__content { display: flex; flex-direction: column; max-width: 42rem; margin: 0 auto; padding: 0 2.5rem }
.globalnav-flyout__list { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0 }
.globalnav-flyout__list > li > a { display: flex; align-items: center; justify-content: space-between; padding: .9rem 0; border-bottom: 1px solid rgba(0, 0, 0, .08); font-family: PlusJakartaDisplay, "Microsoft YaHei", sans-serif; font-weight: 400; font-size: 1.25rem; line-height: 1.25; letter-spacing: -.02em; color: #1d1d1f; text-decoration: none; opacity: 0; transform: translate3d(0, .75rem, 0); transition: opacity .35s ease, transform .45s cubic-bezier(.22, 1, .36, 1), color .2s ease }
.globalnav-flyout__list > li:last-child > a { border-bottom: 0 }
.globalnav-flyout__list > li.has-dropdown.is-open > a { border-bottom-color: transparent }
.globalnav-flyout__list .nav-caret { display: inline-block; width: 8px; height: 8px; margin-left: .75rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .22s ease }
.globalnav-flyout__list > li.has-dropdown.is-open > a .nav-caret { transform: rotate(-135deg) }
.globalnav-flyout__sub { display: none; list-style: none; margin: 0 0 .35rem; padding: 0 0 .35rem .2rem }
.globalnav-flyout__list > li.has-dropdown.is-open > .globalnav-flyout__sub { display: block }
.globalnav-flyout__sub a { display: block; padding: .5rem 0 .5rem .75rem; border: 0; font-family: PlusJakartaDisplay, "Microsoft YaHei", sans-serif; font-size: 1rem; line-height: 1.35; color: rgba(29, 29, 31, .72); text-decoration: none }
.main-header.is-open .globalnav-flyout__list > li > a { opacity: 1; transform: translateZ(0) }
.main-header.is-open .globalnav-flyout__list li:nth-child(1) > a { transition-delay: .08s }
.main-header.is-open .globalnav-flyout__list li:nth-child(2) > a { transition-delay: .12s }
.main-header.is-open .globalnav-flyout__list li:nth-child(3) > a { transition-delay: .16s }
.main-header.is-open .globalnav-flyout__list li:nth-child(4) > a { transition-delay: .2s }
.main-header.is-open .globalnav-flyout__list li:nth-child(5) > a { transition-delay: .24s }
.main-header.is-open .globalnav-flyout__list li:nth-child(6) > a { transition-delay: .28s }
.main-header.is-open .globalnav-flyout__list li:nth-child(7) > a { transition-delay: .32s }
.main-header.is-open .globalnav-flyout__list li:nth-child(8) > a { transition-delay: .36s }
.main-header.is-open .globalnav-flyout__list li:nth-child(9) > a { transition-delay: .4s }
.main-header.is-open .globalnav-flyout__list li:nth-child(10) > a { transition-delay: .44s }
.main-header.is-open .globalnav-flyout__list li:nth-child(n+11) > a { transition-delay: .48s }
.globalnav-flyout__list a:hover, .globalnav-flyout__list a:active { color: #0066cc }
.globalnav-flyout__footer { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid rgba(0, 0, 0, .08); opacity: 0; transform: translate3d(0, .5rem, 0); transition: opacity .35s ease .28s, transform .45s cubic-bezier(.22, 1, .36, 1) .28s }
.main-header.is-open .globalnav-flyout__footer { opacity: 1; transform: translateZ(0) }
.globalnav-flyout__lang-label { display: block; margin-bottom: .65rem; font-family: PlusJakartaDisplay, "Microsoft YaHei", sans-serif; font-size: .75rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: rgba(0, 0, 0, .48) }
.globalnav-flyout__lang { display: flex; flex-wrap: wrap; gap: .5rem .85rem }
.globalnav-flyout__lang a { font-family: PlusJakartaDisplay, "Microsoft YaHei", sans-serif; font-size: .95rem; font-weight: 500; color: #1d1d1f; text-decoration: none }
.globalnav-flyout__lang a:hover { color: #0066cc }
body.nav-open { overflow: hidden }
:root { --header-height: 50px;         /* --header-height: 3rem */ }
.architecture-first__scheme .orbits .orbit-2 .glass-circle:last-child .glass-circle-text { font-size: 13px; }
.architecture-first__scheme .orbits .orbit-3 .glass-circle:nth-child(2) .glass-circle-text { font-size: 13px; }
.architecture-first__scheme .orbits .orbit-3 .glass-circle:nth-child(3) .glass-circle-text { font-size: 13px; }
.architecture-first__scheme .orbits .orbit-2 .glass-circle:first-child .glass-circle-text { font-size: 13px; text-align: right; }
.architecture-first__scheme .orbits .orbit-3 .glass-circle:first-child .glass-circle-text { font-size: 13px; text-align: right; }
.body-zh .architecture-first__scheme .orbits .orbit-2 .glass-circle:first-child .glass-circle-text { text-align: left; }
}
@media screen and (max-width:900px) {
.tech-solution:after { background-position: -12vw 110vw; background-size: contain }
.tech-solution__scheme { display: flex; justify-content: center; align-items: center }
.tech-solution__scheme .tech-solution__canvas { position: relative; left: auto; top: auto; transform: none; width: 100%; max-width: 32em; aspect-ratio: auto; height: auto; max-height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 1.6em; font-size: clamp(12px, 3.2vw, 15px) }
.tech-solution__canvas .tech-flow { display: none }
.tech-solution__canvas .tech-item { display: grid; grid-template-columns: 38% 1fr; grid-template-areas: "visual tag" "visual note"; align-items: center; column-gap: 1.1em; row-gap: .45em }
.tech-solution__canvas .tech-item__visual { position: relative; left: auto; top: auto; width: 100%; grid-area: visual }
.tech-solution__canvas .tech-item__visual:after { display: none; content: ""; position: absolute; left: 6%; right: 6%; bottom: 7%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(22, 93, 255, 0), #00eeff 30%, #165dff 65%, rgba(22, 93, 255, 0)); animation: techBeamPulse 3.2s ease-in-out infinite; animation-delay: var(--beam-delay, 0s) }
.tech-solution__canvas .tech-item__tag { position: relative; left: auto; top: auto; width: auto; max-width: 100%; grid-area: tag; align-self: end }
.tech-solution__canvas .tech-item__note { position: relative; left: auto; top: auto; width: auto; max-width: 100%; grid-area: note; align-self: start }
.tech-solution__canvas .tech-item__tag h3 { font-size: 1.15em }
.tech-solution__canvas .tech-item__tag p { font-size: .95em; margin-top: .15em }
.tech-solution__canvas .tech-item__note p { font-size: .85em; line-height: 1.45; white-space: normal }
.tech-solution__canvas .tech-item__note .processor__arrow, .tech-solution__canvas .tech-item__tag p .processor__arrow--bl { display: none }
.tech-solution__canvas .tech-item__tag h3 .processor__arrow--tr { right: -1.5em; bottom: calc(100% + .15em) }
}
@media screen and (max-width:991px) and (min-width:577px) {
.econs-solution__content .text-block { max-width: 11.5rem; }
}
@media screen and (max-width:576px) {
.project-twelve { align-items: center; justify-content: flex-start; padding-top: 2rem !important }
.project-twelve:before { width: 200vw; height: 155vw; left: -50vw; top: -10vw; }
.project-twelve .project-twelve__title { margin-top: 8vh }
.project-twelve h1 { font-size: 3.8125rem; line-height: 4rem; text-align: center }
.project-twelve .divider { margin-top: 3.125rem }
.project-twelve .learn-button { margin-top: 3.125rem }
.project-twelve .social { display: none }
.project-twelve .message { right: auto; left: 2rem }
.project-twelve .message p { max-width: calc(100% - 4rem) }
.organic-sustainable { height: calc(2 * (100vh - var(--header-height))) !important; flex-direction: column }
.organic-sustainable__description { margin-right: 0; height: 100vh }
.organic-sustainable__description .screen-title { margin-left: 0rem; font-size: 1.25rem; }
.organic-sustainable__description .text-block { margin-left: 6.375rem }
.organic-sustainable__magazine { margin-top: 0; height: 100vh; padding-top: 8rem; max-width: 100%; overflow-x: scroll; flex-direction: row; align-items: center; justify-content: flex-start }
.organic-sustainable__magazine:after, .organic-sustainable__magazine:before { display: none }
.organic-sustainable__magazine .row { flex-direction: column !important; width: 80%; min-width: 80% }
.organic-sustainable__magazine .row img { width: 100% }
.organic-sustainable__magazine .row:not(:first-child) { margin-left: 2rem }
.organic-sustainable__magazine .row__text-content { padding-left: 0; padding-right: 0; width: 100%; height: 12rem }
.organic-sustainable__magazine .row__text-content h4 { font-size: 1rem }
.econs:before { display: none }
.econs:after { display: none }
.econs__description .text-block { margin-top: 2rem }
.econs__description .text-block p:first-child { font-size: 1rem; line-height: 1.25rem }
.econs__description .text-block p:last-child { margin-top: 2rem }
.econs__description .stages { margin-top: 4.5rem }
.blockchain-veterans:before { display: none }
.blockchain-veterans:after { right: -100vh }
.blockchain-veterans h2 { width: calc(100% + 2rem); font-size: 2rem }
.blockchain-veterans__description .divider { margin-top: 3.125rem }
.blockchain-veterans__description .learn-button { margin-top: 3.125rem }
.architecture-first__description { margin-bottom: 2.5rem; width: 100% }
.architecture-first__description .screen-subtitle { margin-top: 0rem }
.architecture-first__scheme { width: 100%; --architecture-scheme-height: 50vh }
.architecture-first__scheme:before { width: 10rem; height: 5rem }
.architecture-first__scheme .citizens { width: 20vh; height: 20vh }
.architecture-first__scheme .orbits .orbit-2:before { -webkit-animation: orbit2Rotation1Mob 30s linear infinite; animation: orbit2Rotation1Mob 30s linear infinite }
.architecture-first__scheme .orbits .orbit-2:after { -webkit-animation: orbit2Rotation2Mob 30s linear infinite; animation: orbit2Rotation2Mob 30s linear infinite }
.architecture-first__scheme .orbits .orbit-3:before { -webkit-animation: orbit3RotationMob 50s linear infinite; animation: orbit3RotationMob 50s linear infinite }
.architecture-first__scheme .orbits .orbit-2 .glass-circle:first-child { width: 5vh; height: 5vh; font-size: 1rem; bottom: 94%; left: 0%; }
.architecture-first__scheme .orbits .orbit-2 .glass-circle:first-child .glass-circle-text { font-size: .75rem; top: 120%; left: -4%; right: auto; width: auto; }
.architecture-first__scheme .orbits .orbit-2 .glass-circle:last-child { width: 5vh; height: 5vh; font-size: 1rem; bottom: 96%; right: -6px; }
.architecture-first__scheme .orbits .orbit-2 .glass-circle:last-child .glass-circle-text { font-size: .75rem; top: 120%; right: 0%; left: auto; width: auto; }
.architecture-first__scheme .orbits .orbit-3 .glass-circle:first-child { font-size: 1.5rem; width: 8vh; height: 8vh; left: 15% }
.architecture-first__scheme .orbits .orbit-3 .glass-circle:first-child .glass-circle-text { font-size: 1rem; right: auto; top: 120%; left: -32%; width: auto; text-align: center; }
.architecture-first__scheme .orbits .orbit-3 .glass-circle:nth-child(2) { font-size: 1.5rem; width: 7vh; height: 7vh }
.architecture-first__scheme .orbits .orbit-3 .glass-circle:nth-child(3) { font-size: 1.5rem; width: 7vh; height: 7vh }
.architecture-first__scheme .orbits .orbit-3 .glass-circle:nth-child(2) .glass-circle-text { font-size: 1rem; right: 0%; top: 115%; left: auto; width: auto; text-align: center; }
.architecture-first__scheme .orbits .orbit-3 .glass-circle:nth-child(3) .glass-circle-text { font-size: 1rem; right: 3%; top: 115%; left: auto; width: auto; text-align: center; }
.body-zh .architecture-first__scheme .orbits .orbit-3 .glass-circle:nth-child(2) .glass-circle-text{font-size: 12px;width: 78px;}
.body-zh .architecture-first__scheme .orbits .orbit-3 .glass-circle:nth-child(3) .glass-circle-text{font-size: 12px;}
.body-zh .architecture-first__scheme .orbits .orbit-3 .glass-circle:first-child .glass-circle-text {font-size: 12px;}
.architecture-second { padding-left: 0 !important; padding-right: 0 !important }
.architecture-second__description { width: 100vw }
.architecture-second__description .screen-subtitle { margin-left: 2rem }
.architecture-second__description .screen-title { margin-left: 2rem; font-size: 1.5rem; line-height: 1.2; }
.architecture-second__flow-container { flex-direction: column; margin-left: 2rem; margin-right: 2rem; margin-top: 0; height: 100% }
.architecture-second__flow-container:before { width: 1px; height: 13rem; top: 0; left: 49.5% }
.architecture-second__scheme { display: flex; justify-content: flex-start; padding-bottom: 4rem; margin-top: 3rem; width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.architecture-second__scheme::-webkit-scrollbar { display: none; }
.architecture-second__scheme .column { flex-direction: row; justify-content: center; margin-top: 5% }
.architecture-second__scheme .column .row:not(:first-child), .architecture-second__scheme .column > [class*=block]:not(:first-child) { margin-top: 0; margin-left: 1rem }
.architecture-second__scheme .column .row { flex-direction: column }
.architecture-second__scheme .column .row > div:last-child { margin-left: 0; margin-top: 10px; }
.architecture-second__scheme .arrow { top: -120%; height: auto; width: 18%; transform: rotate(-270deg); right: 41%; display: none }
.column-2-panel { margin-left: 0 }
.architecture-second__scheme .column:nth-child(3) { margin-left: 0; margin-top: 5% }
.architecture-second__scheme .column-panels { margin-left: 0; margin-top: 5%; width: 100%; }
.architecture-second__scheme .column-1, .architecture-second__scheme .column-2, .architecture-second__scheme .column-3, .architecture-second__scheme .column-4 { margin-left: 0; margin-top: 0; }
.architecture-second__scheme .column-1 .arrow, .architecture-second__scheme .column-2 .arrow, .architecture-second__scheme .column-3 .arrow, .architecture-second__scheme .column-4 .arrow { width: 12%; top: -118%; right: 44%; }
.architecture-second__scheme .column:nth-child(3) .arrow { width: 12%; top: -118%; right: 44% }
.architecture-second__scheme .glass-block { font-family: PlusJakartaDisplay, sans-serif; font-weight: 500; font-size: 1rem; padding: .5rem 1.5rem; line-height: 1.25rem; }
.architecture-second .architecture-second__flow-container:before { max-width: 100%; max-height: 0 }
.architecture-second.active .architecture-second__flow-container:before { max-height: 100% }
.tech-solution { padding-top: 6rem !important }
.tech-solution .tech-solution__description { margin-bottom: 2rem }
.tech-solution .tech-solution__description .screen-subtitle { margin-top: 0rem }
.tech-solution .tech-solution__description .screen-title { font-size: 2.25rem; }
.tech-solution__canvas { font-size: .8rem }
.econs-solution:before { width: 100vh; height: 100vh; top: -20vh; left: -50vh }
.econs-solution:after { width: 100vw; right: -20vw; top: auto; bottom: -10vh; transform: none }
.econs-solution__content { flex-direction: column; align-items: stretch; margin-top: 1.5rem }
.econs-solution .econs-solution__description .screen-title { font-size: 1.0625rem; }
.econs-solution .econs-solution__description .screen-title2 { font-size: 1.0625rem; }
.econs-solution__content .text-block { max-width: 100%; order: 2; margin-top: 2rem }
.econs-solution__content .text-block p { font-size: .875rem; line-height: 1.35 }
.econs-solution__content .list { --item-gap: 1.25rem; flex: none; max-width: 100%; width: 100%; margin-left: 0; padding-left: 0; padding-top: 2rem; order: 1 }
.econs-solution__content .list:before { width: 100%; height: 4px; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 50%, rgba(255, 255, 255, 0) 100%);         /* background: linear-gradient(100deg, rgba(151, 150, 240, 0), #9796f0 23.96%, #fbc7d4 77.08%, rgba(251, 199, 212, 0)) */ }
.econs-solution__content .list .item { padding-left: 1.75rem; min-height: 0 }
.econs-solution__content .list .item:before { top: .7rem; width: .35rem; height: .35rem }
.econs-solution__content .list .item h5 { font-size: .85rem }
.econs-solution__content .list .item p { font-size: .85rem; line-height: 1.35 }
.econs-solution .list:before { max-height: none; max-width: 0; transition: calc(var(--content-appear-time) + .5s) opacity .5s, calc(var(--content-appear-time) + .5s) max-width .5s }
.econs-solution.active .list:before { max-width: 100% }
.token-economy { flex-direction: column; justify-content: space-between; height: calc(2 * (100vh - var(--header-height))) !important }
.token-economy:before { width: 100vh; height: 100vh; top: -20vh; right: -50vh }
.token-economy__description { width: 100%; height: 100vh; display: flex; flex-direction: column; justify-content: center }
.token-economy__description .screen-title { font-size: 1.25rem; }
.token-economy__slider { margin-left: 0; height: 100vh }
.token-economy__slider .token-economy__sliders { padding: 2rem }
.token-economy__slider .stages { display: none }
.nomocracy { flex-direction: column; justify-content: center }
.nomocracy:after { width: 100vh; height: 100vh }
.nomocracy__description { align-items: center; width: 100% }
.nomocracy__description .screen-title { margin-top: 2rem }
.nomocracy__description .subtitle { width: 100%; margin-top: 1rem }
.nomocracy__text-content { flex-direction: column }
.nomocracy__text-content .text-block { margin-bottom: 2rem; margin-left: 5rem !important; height: auto }
.nomocracy__text-content .text-block .arrow { left: auto; top: 50%; right: 100%; transform: translateY(-50%) }
.nomocracy__text-content .text-block:nth-child(2) { margin-left: 0; margin-right: 0 }
.roadmap { height: calc(2 * (100vh - var(--header-height))) !important; justify-content: flex-start; padding-top: 14rem !important }
.roadmap__description .screen-title { text-align: center; font-size: 1.7rem; }
.roadmap__text-content { flex-direction: column; align-items: flex-end; height: 100% }
.roadmap__text-content .text-block { margin-bottom: 0; margin-right: 2rem; margin-top: 3rem; max-width: 14rem; }
.roadmap__text-content .text-block h4 { font-size: 1rem; }
.roadmap__text-content .text-block p { font-size: 0.75rem; line-height: 1.1rem; }
.roadmap__text-content .text-block:nth-child(2) { margin-bottom: 0; margin-right: 2.5rem; margin-top: 9rem; }
.roadmap__text-content .text-block:nth-child(3) { margin-bottom: 0; margin-right: 2rem; margin-top: 6rem; }
.roadmap__text-content .text-block:nth-child(4) { margin-bottom: 0; margin-right: 0rem; margin-top: 4rem; }
.roadmap__text-content .text-block:nth-child(5) { margin-bottom: 0; margin-right: 0rem; margin-top: 1rem; max-width: 11rem; }
.roadmap__progress svg { width: 350vw; height: auto; transform: rotate(96deg); left: -119vw; top: 83vw }
.screens__flow-container > div:nth-child(n+1) { padding: 1.25rem 1rem 2rem }
.navigation-bar { transform: none; left: 0; top: 0; width: 100%; height: 100%; padding: 3rem 2rem; background: rgba(8, 5, 31, .54); -webkit-backdrop-filter: blur(73px); backdrop-filter: blur(73px); opacity: 0; visibility: hidden; transform: translate3d(0, 100%, 0); transition: transform .5s ease, opacity .5s ease, visibility .5s ease }
.navigation-bar .nav-button { display: flex; justify-content: flex-start; align-items: center; font-size: 1.5rem }
.navigation-bar .nav-button > span { transform: scale(1); transition: transform 0s }
.navigation-bar .nav-button:before { content: ""; display: block; width: 2.5625rem; height: .25rem; background: linear-gradient(90deg, #9796f0, #fbc7d4); margin-right: 0; max-width: 0; transition: max-width 1s ease, margin-right 1s ease }
.navigation-bar .nav-button.active:before { margin-right: 1rem; max-width: 2rem }
.navigation-bar .nav-button:nth-child(n+3) { margin-top: 1rem }
.navigation-bar .nav-button:not(:last-child) { margin-left: 0 }
.navigation-bar.active { opacity: 1; visibility: visible; transform: translateZ(0) }
.navigation-bar__offset-container { right: 0 }
.navigation-bar__flow-container { flex-direction: column; align-items: flex-start; width: 100%; height: 100%; padding: 3rem 2rem }
.navigation-bar__active { display: none }
.fluid-ball { width: 170vw; left: -35vw; top: 0 }
.screen-title { font-size: 2.375rem }
}
@media screen and (max-width:576px) and (min-aspect-ratio:15/26) {
.nomocracy__description .subtitle { display: none }
}
@media screen and (max-width:576px) and (min-aspect-ratio:15/32) {
.tech-solution__canvas { font-size: .7rem }
}
@media screen and (max-width:576px) and (min-aspect-ratio:2/3) {
.project-twelve .message { display: none }
}
@media screen and (max-width:576px) and (min-aspect-ratio:25/41) {
.econs-solution__content .list { padding-top: 1rem }
.econs-solution__content .list:before { display: none }
.nomocracy__description .screen-title { margin-top: -.5rem }
}
@media screen and (max-width:576px) and (min-aspect-ratio:8/15) {
.econs__description .stages { display: none }
.screens__flow-container > div:nth-child(n+1) { padding-top: 1.5rem }
}
html .body-zh { font-family: "Microsoft YaHei", "Microsoft YaHei UI", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", Arial, sans-serif; }