")
}
.scanline {
display: none;
position: fixed;
inset: 0;
pointer-events: none;
z-index: 99;
background: repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(255, 255, 255, 0.012) 3px, rgba(255, 255, 255, 0.012) 4px)
}
body.fx-full .noise,
body.fx-full .scanline {
display: block
}
/* ---------- nav ---------- */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 90;
padding: 20px 40px;
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(180deg, rgba(11, 18, 32, .8) 0%, rgba(11, 18, 32, 0) 100%);
backdrop-filter: blur(0px);
transition: backdrop-filter .3s, background .3s
}
.nav.scrolled {
backdrop-filter: blur(14px);
background: rgba(11, 18, 32, .72);
border-bottom: 1px solid var(--line)
}
.nav .brand {
display: flex;
align-items: center;
gap: 14px;
font-family: var(--en);
letter-spacing: .02em
}
.nav .brand .mark {
width: 96px;
height: 96px;
display: block;
flex: none;
object-fit: contain;
filter: drop-shadow(0 0 14px rgba(0, 225, 180, .35))
}
.nav .links {
display: flex;
gap: 36px;
font-size: 13px;
color: var(--ink-2)
}
.nav .links a {
position: relative;
padding: 4px 0;
transition: color .2s
}
.nav .links a:hover {
color: var(--teal)
}
.nav .links a::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 0;
height: 1px;
background: var(--teal);
transition: width .3s
}
.nav .links a:hover::after {
width: 100%
}
.nav .cta {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 16px;
border: 1px solid var(--teal);
color: var(--teal);
font-family: var(--en);
font-size: 12px;
letter-spacing: .1em;
border-radius: 999px;
transition: all .2s;
font-weight: 500
}
.nav .cta:hover {
background: var(--teal);
color: #001815
}
.nav .cta::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--teal);
animation: pulse 2s infinite
}
@keyframes pulse {
0%,
100% {
opacity: 1;
box-shadow: 0 0 0 0 rgba(0, 225, 180, .6)
}
50% {
opacity: .6;
box-shadow: 0 0 0 6px rgba(0, 225, 180, 0)
}
}
@media(max-width:900px) {
.nav .links {
display: none
}
.nav {
padding: 16px 20px
}
}
/* ---------- shared section primitives ---------- */
section {
position: relative;
padding: 160px 40px;
min-height: 100vh
}
.wrap {
max-width: 1280px;
margin: 0 auto;
position: relative
}
.eyebrow {
display: flex;
align-items: center;
gap: 14px;
font-family: var(--en);
font-size: 12px;
letter-spacing: .22em;
color: var(--ink-2);
text-transform: uppercase;
margin-bottom: 32px
}
.eyebrow .dot-pair {
display: inline-flex;
gap: 7px
}
.eyebrow .dot-pair i {
width: 7px;
height: 7px;
border-radius: 50%;
display: block
}
.eyebrow .dot-pair i:first-child {
background: var(--teal);
box-shadow: 0 0 10px var(--teal)
}
.eyebrow .dot-pair i:last-child {
border: 1px solid var(--ink-3)
}
.eyebrow .sep {
color: var(--ink-4)
}
.eyebrow .zh {
font-family: var(--cn);
letter-spacing: .15em;
color: var(--ink-3)
}
.h-title {
font-family: var(--cn);
font-weight: 600;
letter-spacing: -.01em;
line-height: 1.1;
font-size: clamp(36px, 5.2vw, 72px)
}
.h-title .accent {
color: var(--teal)
}
.lead {
font-family: var(--cn);
font-weight: 300;
font-size: clamp(18px, 1.6vw, 24px);
line-height: 1.6;
color: var(--ink-2);
max-width: 720px;
margin-top: 28px
}
.muted {
color: var(--ink-3)
}
/* card primitive */
.gcard {
position: relative;
border-radius: 16px;
padding: 32px;
background: linear-gradient(180deg, rgba(255, 255, 255, .025) 0%, rgba(255, 255, 255, .01) 100%);
overflow: hidden;
transition: transform .35s cubic-bezier(.2, .7, .2, 1), background .35s
}
.gcard::before {
content: "";
position: absolute;
inset: 0;
border-radius: 16px;
padding: 1px;
background: linear-gradient(135deg, rgba(0, 225, 180, .4), rgba(255, 255, 255, .05) 60%, rgba(0, 225, 180, .15));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none
}
.gcard:hover {
transform: translateY(-3px);
background: linear-gradient(180deg, rgba(0, 225, 180, .04) 0%, rgba(255, 255, 255, .015) 100%)
}
.gcard:hover::before {
background: linear-gradient(135deg, rgba(0, 225, 180, .7), rgba(255, 255, 255, .08) 60%, rgba(0, 225, 180, .3))
}
/* reveal on scroll */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1)
}
.reveal.in {
opacity: 1;
transform: none
}
.reveal.d1 {
transition-delay: .08s
}
.reveal.d2 {
transition-delay: .16s
}
.reveal.d3 {
transition-delay: .24s
}
.reveal.d4 {
transition-delay: .32s
}
.reveal.d5 {
transition-delay: .4s
}
/* ================= SECTION 1 · HERO ================= */
.hero {
padding: 0;
height: 100vh;
min-height: 780px;
overflow: hidden
}
.hero #heroCanvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%
}
.hero .grid-bg {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(0, 225, 180, .05) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 225, 180, .05) 1px, transparent 1px);
background-size: 80px 80px;
mask-image: radial-gradient(ellipse 70% 50% at 50% 50%, #000 0%, transparent 75%)
}
.hero .vignette {
position: absolute;
inset: 0;
background: radial-gradient(ellipse 80% 60% at 50% 45%, transparent 40%, rgba(11, 18, 32, .85) 100%)
}
.hero-inner {
position: relative;
z-index: 5;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 120px 56px 64px;
max-width: 1440px;
margin: 0 auto
}
.hero .badge {
align-self: flex-end;
display: inline-flex;
align-items: center;
gap: 12px;
padding: 10px 18px;
border-radius: 999px;
border: 1px solid var(--teal);
background: rgba(0, 225, 180, .06);
backdrop-filter: blur(8px);
font-size: 12px;
letter-spacing: .08em;
color: var(--ink-2);
font-family: var(--cn)
}
.hero .badge .live {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--teal);
animation: pulse 1.8s infinite
}
.hero .badge .sep {
opacity: .35
}
.hero .badge b {
font-weight: 500;
color: var(--teal)
}
.hero .badge .en {
font-family: var(--en);
letter-spacing: .14em;
font-size: 11px;
color: var(--ink-3)
}
.hero h1 {
font-family: var(--cn);
font-weight: 600;
font-size: clamp(48px, 7.2vw, 104px);
line-height: 1.02;
letter-spacing: -.02em;
max-width: 1100px
}
.hero h1 .gl {
background: linear-gradient(180deg, #fff 0%, #9ea9c2 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent
}
.hero h1 .xr {
color: var(--teal);
font-family: var(--en);
font-weight: 600;
font-style: italic;
letter-spacing: -.03em
}
.hero .subtitle {
margin-top: 28px;
display: flex;
align-items: center;
gap: 18px;
color: var(--ink-3);
font-family: var(--en);
font-size: 14px;
letter-spacing: .14em
}
.hero .subtitle .zh {
font-family: var(--cn);
letter-spacing: .08em;
color: var(--ink-2);
font-size: 15px
}
.hero .ctas {
display: flex;
gap: 14px;
margin-top: 48px;
align-items: center
}
.btn {
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 28px;
border-radius: 999px;
font-size: 14px;
letter-spacing: .05em;
cursor: pointer;
transition: all .25s;
border: 0;
font-family: var(--cn);
font-weight: 500
}
.btn.primary {
background: var(--teal);
color: #001815
}
.btn.primary:hover {
background: #32efc6;
transform: translateY(-1px);
box-shadow: 0 12px 40px -10px rgba(0, 225, 180, .6)
}
.btn.ghost {
background: transparent;
border: 1px solid var(--line-2);
color: var(--ink-2)
}
.btn.ghost:hover {
border-color: var(--teal);
color: var(--teal)
}
.btn .arrow {
width: 14px;
height: 14px;
position: relative;
display: inline-block
}
.btn .arrow::before,
.btn .arrow::after {
content: "";
position: absolute;
background: currentColor
}
.btn .arrow::before {
width: 14px;
height: 1.5px;
top: 6px;
left: 0
}
.btn .arrow::after {
width: 8px;
height: 1.5px;
right: 0;
top: 2px;
transform: rotate(45deg);
transform-origin: right
}
.btn .arrow em {
position: absolute;
width: 8px;
height: 1.5px;
right: 0;
bottom: 2px;
background: currentColor;
transform: rotate(-45deg);
transform-origin: right
}
.hero .meta-row {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 40px;
font-family: var(--en);
font-size: 11px;
letter-spacing: .18em;
color: var(--ink-4);
text-transform: uppercase
}
.hero .meta-row .col {
display: flex;
flex-direction: column;
gap: 6px
}
.hero .meta-row .col b {
color: var(--ink-2);
font-weight: 500;
font-size: 13px
}
.hero .marker {
display: flex;
align-items: center;
gap: 8px
}
.hero .marker::before {
content: "";
width: 20px;
height: 1px;
background: var(--teal)
}
.hero .ticker {
display: flex;
align-items: center;
gap: 10px;
color: var(--ink-3);
font-family: var(--mono);
font-size: 11px
}
.hero .ticker .live {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--teal);
animation: pulse 1.8s infinite
}
.hero .scroll-hint {
position: absolute;
left: 50%;
bottom: 28px;
transform: translateX(-50%);
font-family: var(--en);
font-size: 10px;
letter-spacing: .3em;
color: var(--ink-3);
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
z-index: 6
}
.hero .scroll-hint::after {
content: "";
width: 1px;
height: 40px;
background: linear-gradient(180deg, var(--teal), transparent);
animation: scroll-line 2s infinite
}
@keyframes scroll-line {
0% {
opacity: 1;
transform: scaleY(0);
transform-origin: top
}
50% {
opacity: 1;
transform: scaleY(1);
transform-origin: top
}
100% {
opacity: 0;
transform: scaleY(1);
transform-origin: bottom
}
}
/* ================= SECTION 2 · WHO ================= */
.who {
background: var(--bg)
}
.who .lines {
margin-top: 64px;
display: flex;
flex-direction: column;
gap: 8px
}
.who .ln {
display: flex;
align-items: baseline;
gap: 32px;
padding: 28px 0;
border-bottom: 1px solid var(--line);
font-family: var(--cn);
line-height: 1.2
}
.who .ln:last-child {
border-bottom: 0
}
.who .ln .num {
font-family: var(--mono);
font-size: 13px;
color: var(--teal);
min-width: 60px;
letter-spacing: .05em
}
.who .ln .txt {
font-size: clamp(28px, 3.6vw, 52px);
font-weight: 300;
color: var(--ink-2);
flex: 1
}
.who .ln .txt b {
font-weight: 600;
color: #fff;
position: relative;
white-space: nowrap
}
.who .ln .txt s {
text-decoration: line-through;
text-decoration-color: var(--p1);
text-decoration-thickness: 2px;
color: var(--ink-3);
font-weight: 300
}
.who .ln:nth-child(even) {
padding-left: clamp(0px, 10vw, 180px)
}
.who .ln:nth-child(odd) .txt b {
color: var(--teal)
}
@media(max-width:800px) {
.who .ln {
flex-direction: column;
gap: 8px;
padding: 20px 0
}
.who .ln:nth-child(even) {
padding-left: 0
}
}
/* ================= SECTION 3 · TIMELINE ================= */
.timeline {
background: linear-gradient(180deg, var(--bg) 0%, #070c17 100%)
}
.timeline .track {
margin-top: 72px;
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--line)
}
.timeline .cell {
background: var(--bg);
padding: 36px 28px;
position: relative;
transition: background .35s
}
.timeline .cell:hover {
background: #0f1729
}
.timeline .cell .idx {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-4);
letter-spacing: .2em
}
.timeline .cell .bar {
height: 1px;
background: var(--line);
margin: 22px 0;
position: relative
}
.timeline .cell .bar::after {
content: "";
position: absolute;
left: 0;
top: -2px;
width: 24px;
height: 5px;
background: var(--teal);
transition: width .5s
}
.timeline .cell:hover .bar::after {
width: 100%
}
.timeline .cell h3 {
font-family: var(--cn);
font-size: 22px;
font-weight: 600;
color: #fff;
margin-bottom: 14px;
line-height: 1.3
}
.timeline .cell p {
font-size: 13px;
color: var(--ink-3);
line-height: 1.7;
min-height: 70px
}
.timeline .cell .logos {
margin-top: 24px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px
}
.timeline .cell .logo-slot {
height: 38px;
border: 1px solid var(--line);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--mono);
font-size: 9px;
color: var(--ink-4);
letter-spacing: .12em;
background: rgba(255, 255, 255, .01)
}
.timeline .count {
display: flex;
align-items: baseline;
gap: 14px;
margin-top: 28px;
padding-top: 24px;
border-top: 1px dashed var(--line)
}
.timeline .count .big {
font-family: var(--en);
font-size: 44px;
font-weight: 500;
color: #fff;
line-height: 1;
letter-spacing: -.02em
}
.timeline .count .unit {
font-family: var(--cn);
font-size: 12px;
color: var(--ink-3)
}
@media(max-width:900px) {
.timeline .track {
grid-template-columns: 1fr;
gap: 1px
}
}
/* ================= SECTION 4 · SCENARIOS ================= */
.scenarios {
background: #070c17
}
.scenarios .split {
margin-top: 72px;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 24px
}
.scenarios .col>* {
min-width: 0
}
.scenarios .col h3 {
word-break: normal;
overflow-wrap: break-word
}
.scenarios .col {
position: relative;
padding: 44px;
border-radius: 20px;
overflow: hidden;
min-height: 520px;
display: flex;
flex-direction: column;
justify-content: space-between
}
.scenarios .col.lbe {
background: radial-gradient(ellipse at 100% 0%, rgba(0, 225, 180, .12), transparent 60%), linear-gradient(180deg, #0c1528, #0a1122)
}
.scenarios .col.seat {
background: radial-gradient(ellipse at 0% 100%, rgba(255, 138, 61, .1), transparent 60%), linear-gradient(180deg, #0c1528, #0a1122)
}
.scenarios .col::before {
content: "";
position: absolute;
inset: 0;
border-radius: 20px;
padding: 1px;
background: linear-gradient(135deg, rgba(0, 225, 180, .25), rgba(255, 255, 255, .04));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none
}
.scenarios .col.seat::before {
background: linear-gradient(135deg, rgba(255, 138, 61, .25), rgba(255, 255, 255, .04))
}
.scenarios .col .eye {
font-family: var(--en);
font-size: 11px;
letter-spacing: .24em;
color: var(--teal);
margin-bottom: 10px
}
.scenarios .col.seat .eye {
color: var(--p2)
}
.scenarios .col h3 {
font-size: 36px;
font-weight: 600;
line-height: 1.15;
margin-bottom: 14px
}
.scenarios .col p.sub {
color: var(--ink-3);
font-size: 14px;
line-height: 1.7;
max-width: 420px
}
.scenarios .viz {
flex: 1;
margin: 28px 0;
position: relative;
min-height: 220px
}
.scenarios .sizes {
display: flex;
gap: 24px;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
letter-spacing: .05em
}
.scenarios .sizes b {
color: #fff;
font-weight: 500;
margin-right: 6px
}
.scenarios .price {
margin-top: 18px;
font-family: var(--en);
font-size: 13px;
color: var(--ink-2)
}
.scenarios .price b {
color: var(--teal);
font-size: 18px;
font-weight: 500
}
.scenarios .col.seat .price b {
color: var(--p2)
}
.scenarios .chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 22px
}
.scenarios .chip {
font-size: 12px;
padding: 6px 12px;
border-radius: 999px;
border: 1px solid var(--line-2);
color: var(--ink-2)
}
/* lbe viz */
.lbe-viz {
position: absolute;
inset: 0;
border: 1px solid rgba(0, 225, 180, .3);
border-radius: 12px;
overflow: hidden
}
.lbe-viz::before {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(rgba(0, 225, 180, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 225, 180, .08) 1px, transparent 1px);
background-size: 28px 28px
}
.lbe-dot {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--teal);
box-shadow: 0 0 12px var(--teal)
}
.lbe-path {
position: absolute;
inset: 0
}
/* seat viz */
.seat-viz {
position: absolute;
inset: 0;
display: grid;
grid-template-rows: 1fr 60px;
gap: 14px;
padding: 20px
}
.seat-rows {
display: grid;
grid-template-rows: repeat(5, 1fr);
gap: 6px
}
.seat-row {
display: flex;
gap: 4px;
justify-content: center
}
.seat-row .seat-dot {
width: 18px;
height: 16px;
border-radius: 3px 3px 8px 8px;
background: rgba(255, 138, 61, .2);
border: 1px solid rgba(255, 138, 61, .4)
}
.seat-row .seat-dot.on {
background: var(--p2);
box-shadow: 0 0 10px var(--p2)
}
.screen {
height: 100%;
border-radius: 6px;
background: linear-gradient(180deg, rgba(255, 138, 61, .15), rgba(255, 138, 61, .02));
border: 1px solid rgba(255, 138, 61, .3);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--mono);
font-size: 10px;
color: var(--p2);
letter-spacing: .15em
}
/* sub cards */
.scenarios .quad {
margin-top: 32px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px
}
.scenarios .quad .gcard {
padding: 28px 24px;
min-height: 200px
}
.scenarios .quad .gcard .num {
font-family: var(--en);
font-size: 11px;
color: var(--teal);
letter-spacing: .2em
}
.scenarios .quad .gcard h4 {
font-family: var(--cn);
font-size: 18px;
font-weight: 600;
margin: 18px 0 10px
}
.scenarios .quad .gcard p {
font-size: 12px;
color: var(--ink-3);
line-height: 1.7
}
@media(max-width:900px) {
.scenarios .split,
.scenarios .quad {
grid-template-columns: 1fr
}
}
/* ================= SECTION 4.5 · PLATFORM CAPABILITIES ================= */
.platform {
background: var(--bg);
padding: 180px 40px;
position: relative;
overflow: hidden
}
.platform::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse 60% 40% at 50% 30%, rgba(0, 225, 180, .04), transparent 70%);
pointer-events: none
}
.platform .wrap {
position: relative
}
/* ① 四端架構圖 */
.platform .arch {
margin-top: 72px;
position: relative;
padding: 40px 0 24px;
display: grid;
grid-template-columns: 1fr;
gap: 56px;
justify-items: center
}
.platform .arch::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 50% 50%, rgba(0, 225, 180, .08), transparent 55%);
pointer-events: none
}
.platform .hub {
position: relative;
padding: 36px 52px;
border-radius: 20px;
background: linear-gradient(180deg, #0d1a2b, #08111e);
display: flex;
align-items: center;
gap: 32px;
flex-wrap: wrap;
justify-content: center;
z-index: 2
}
.platform .hub::before {
content: "";
position: absolute;
inset: 0;
border-radius: 20px;
padding: 1px;
background: linear-gradient(135deg, rgba(0, 225, 180, .6), rgba(255, 255, 255, .06));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none
}
.platform .hub-eye {
font-family: var(--en);
font-size: 11px;
letter-spacing: .24em;
color: var(--teal);
padding-right: 24px;
border-right: 1px solid rgba(0, 225, 180, .2)
}
.platform .hub-stat {
display: inline-flex;
align-items: baseline;
gap: 8px;
font-family: var(--en)
}
.platform .hub-stat b {
font-size: 40px;
font-weight: 600;
color: #fff;
letter-spacing: -.02em
}
.platform .hub-stat i {
font-family: var(--cn);
font-style: normal;
font-size: 13px;
color: var(--ink-3)
}
.platform .hub-dot {
position: absolute;
right: 28px;
top: 28px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--teal);
box-shadow: 0 0 12px var(--teal);
animation: pulse 1.8s ease-in-out infinite
}
.platform .arch-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
width: 100%;
position: relative;
z-index: 2
}
.platform .arch-grid::before {
content: "";
position: absolute;
left: 12.5%;
right: 12.5%;
top: -36px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0, 225, 180, .3) 15%, rgba(0, 225, 180, .3) 85%, transparent)
}
.platform .end {
position: relative;
padding: 32px 28px 30px;
border-radius: 16px;
background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, .005));
border: 1px solid var(--line);
min-height: 160px;
display: flex;
flex-direction: column;
gap: 10px
}
.platform .end::before {
content: "";
position: absolute;
left: 50%;
top: -36px;
width: 1px;
height: 36px;
background: linear-gradient(180deg, transparent, rgba(0, 225, 180, .5))
}
.platform .end::after {
content: "";
position: absolute;
left: 50%;
top: -6px;
transform: translateX(-50%);
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(0, 225, 180, .15);
border: 1px solid var(--teal)
}
.platform .end-tag {
font-family: var(--en);
font-size: 10px;
letter-spacing: .2em;
color: var(--teal)
}
.platform .end h4 {
font-size: 22px;
font-weight: 600;
color: #fff;
letter-spacing: .02em
}
.platform .end p {
font-size: 13px;
color: var(--ink-3);
line-height: 1.7;
margin-top: 4px
}
/* ② 雙列:內容方 / 運營方 */
.platform .duo {
margin-top: 96px;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 24px
}
.platform .side {
position: relative;
padding: 44px 40px;
border-radius: 20px;
background: linear-gradient(180deg, #0c1528, #0a1122);
overflow: hidden;
min-height: 480px
}
.platform .side::before {
content: "";
position: absolute;
inset: 0;
border-radius: 20px;
padding: 1px;
background: linear-gradient(135deg, rgba(0, 225, 180, .3), rgba(255, 255, 255, .04));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none
}
.platform .side.seat::before {
background: linear-gradient(135deg, rgba(255, 138, 61, .3), rgba(255, 255, 255, .04))
}
.platform .side-head {
margin-bottom: 32px;
padding-bottom: 24px;
border-bottom: 1px solid rgba(255, 255, 255, .06)
}
.platform .side-head .en {
display: block;
font-family: var(--en);
font-size: 11px;
letter-spacing: .24em;
color: var(--teal);
margin-bottom: 14px
}
.platform .side.seat .side-head .en {
color: var(--p2)
}
.platform .side-head h3 {
font-size: 24px;
font-weight: 500;
line-height: 1.4;
color: #fff;
letter-spacing: .01em
}
.platform .caps {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px 28px;
list-style: none
}
.platform .caps li {
position: relative;
padding: 14px 0 14px 46px;
border-bottom: 1px dashed rgba(255, 255, 255, .05)
}
.platform .caps li .num {
position: absolute;
left: 0;
top: 16px;
font-family: var(--en);
font-size: 11px;
letter-spacing: .15em;
color: var(--teal);
padding: 3px 7px;
border: 1px solid rgba(0, 225, 180, .35);
border-radius: 4px
}
.platform .side.seat .caps li .num {
color: var(--p2);
border-color: rgba(255, 138, 61, .4)
}
.platform .caps li b {
display: block;
font-size: 15px;
font-weight: 600;
color: #fff;
margin-bottom: 3px
}
.platform .caps li i {
display: block;
font-style: normal;
font-size: 12px;
color: var(--ink-3);
line-height: 1.6
}
/* ③ 功能矩陣 + 迭代速度 */
.platform .features {
margin-top: 80px;
padding: 48px 40px;
border-radius: 20px;
background: linear-gradient(180deg, rgba(0, 225, 180, .04), rgba(0, 225, 180, .01));
border: 1px solid rgba(0, 225, 180, .15)
}
.platform .features-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 40px;
margin-bottom: 36px;
flex-wrap: wrap
}
.platform .eyebrow-sm {
font-family: var(--en);
font-size: 11px;
letter-spacing: .24em;
color: var(--teal);
margin-bottom: 12px
}
.platform .features-head h3 {
font-size: 32px;
font-weight: 600;
line-height: 1.2;
color: #fff
}
.platform .cadence {
display: flex;
align-items: center;
gap: 28px;
padding: 18px 28px;
border-radius: 12px;
background: rgba(0, 0, 0, .25);
border: 1px solid rgba(0, 225, 180, .2)
}
.platform .cad-block {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px
}
.platform .cad-en {
font-family: var(--en);
font-size: 10px;
letter-spacing: .22em;
color: var(--ink-3)
}
.platform .cad-block b {
font-family: var(--en);
font-size: 26px;
font-weight: 600;
color: var(--teal);
letter-spacing: -.01em;
line-height: 1
}
.platform .cad-block b i {
font-family: var(--cn);
font-style: normal;
font-size: 13px;
font-weight: 400;
color: var(--ink-2);
margin-left: 4px
}
.platform .cad-zh {
font-size: 11px;
color: var(--ink-3)
}
.platform .cad-sep {
width: 1px;
height: 42px;
background: rgba(255, 255, 255, .08)
}
/* 分組過濾 pills */
.platform .feat-legend {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 24px
}
.platform .fl-pill {
--gc: var(--teal);
padding: 8px 16px;
border-radius: 999px;
border: 1px solid var(--line-2);
background: rgba(255, 255, 255, .02);
color: var(--ink-3);
font-family: var(--cn);
font-size: 13px;
font-weight: 500;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all .25s;
position: relative
}
.platform .fl-pill em {
font-family: var(--mono);
font-size: 10px;
font-style: normal;
color: var(--ink-4);
letter-spacing: .1em;
padding: 2px 6px;
border-radius: 4px;
background: rgba(255, 255, 255, .04)
}
.platform .fl-pill:hover {
border-color: var(--gc);
color: #fff
}
.platform .fl-pill:hover em {
color: var(--gc)
}
.platform .fl-pill.active {
background: color-mix(in srgb, var(--gc) 14%, transparent);
border-color: var(--gc);
color: #fff;
box-shadow: 0 0 0 1px var(--gc) inset, 0 8px 26px -14px var(--gc)
}
.platform .fl-pill.active em {
color: var(--gc);
background: rgba(0, 0, 0, .35)
}
/* 分組網(wǎng)格容器 */
.platform .feat-grid {
display: flex;
flex-direction: column;
gap: 8px
}
.platform .feat-row {
--gc: var(--teal);
display: grid;
grid-template-columns: minmax(120px, 170px) repeat(4, minmax(0, 1fr));
gap: 8px;
align-items: stretch;
position: relative;
padding-left: 14px;
border-radius: 12px;
transition: opacity .35s, transform .35s, filter .35s;
min-width: 0
}
.platform .feat-row::before {
content: "";
position: absolute;
left: 0;
top: 6px;
bottom: 6px;
width: 3px;
border-radius: 3px;
background: var(--gc);
box-shadow: 0 0 14px color-mix(in srgb, var(--gc) 55%, transparent);
transition: all .35s
}
.platform .feat-row:hover::before {
width: 4px;
box-shadow: 0 0 22px color-mix(in srgb, var(--gc) 75%, transparent)
}
.platform .feat-tag {
display: flex;
align-items: center;
gap: 10px;
padding: 0 12px;
font-family: var(--cn);
font-size: 15px;
font-weight: 600;
color: #fff;
letter-spacing: .02em;
position: relative;
white-space: nowrap;
min-width: 0;
overflow: hidden
}
.platform .feat-tag i {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--gc);
box-shadow: 0 0 10px var(--gc);
flex: none
}
.platform .feat-tag span {
font-family: var(--en);
font-size: 10px;
letter-spacing: .22em;
color: color-mix(in srgb, var(--gc) 75%, white);
margin-left: auto;
opacity: .85;
flex: none
}
/* 單個 feat */
.platform .feat {
--gc: var(--teal);
padding: 18px 12px;
border-radius: 10px;
background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, .005));
border: 1px solid var(--line);
text-align: center;
font-size: 13px;
color: var(--ink-2);
cursor: default;
position: relative;
overflow: hidden;
transition: all .35s cubic-bezier(.2, .7, .2, 1);
font-family: var(--cn);
font-weight: 500
}
.platform .feat::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 2px;
background: var(--gc);
transform: scaleX(.2);
transform-origin: left center;
opacity: .55;
transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .35s
}
.platform .feat::after {
content: "";
position: absolute;
inset: 0;
border-radius: 10px;
background: radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--gc) 28%, transparent), transparent 65%);
opacity: 0;
transition: opacity .35s;
pointer-events: none
}
.platform .feat:hover {
border-color: var(--gc);
color: #fff;
transform: translateY(-4px) scale(1.06);
z-index: 2;
box-shadow: 0 14px 40px -18px color-mix(in srgb, var(--gc) 80%, transparent), 0 0 0 1px color-mix(in srgb, var(--gc) 60%, transparent)
}
.platform .feat:hover::before {
transform: scaleX(1);
opacity: 1
}
.platform .feat:hover::after {
opacity: 1
}
.platform .feat.ripple {
animation: featRipple .7s ease-out
}
@keyframes featRipple {
0% {
transform: translateY(0) scale(1);
box-shadow: 0 0 0 0 color-mix(in srgb, var(--gc) 55%, transparent)
}
50% {
transform: translateY(-2px) scale(1.03);
box-shadow: 0 0 0 8px color-mix(in srgb, var(--gc) 10%, transparent)
}
100% {
transform: translateY(0) scale(1);
box-shadow: 0 0 0 0 transparent
}
}
/* 過濾狀態(tài):非選中組變暗 */
.platform .feat-grid.filtered .feat-row.dim {
opacity: .18;
filter: grayscale(.4)
}
.platform .feat-grid.filtered .feat-row.dim:hover {
opacity: .35
}
@media(max-width:900px) {
.platform .feat-row {
grid-template-columns: 100px repeat(2, 1fr)
}
.platform .feat-tag {
font-size: 13px;
padding: 0 6px
}
.platform .feat-tag span {
display: none
}
}
@media(max-width:560px) {
.platform .feat-row {
grid-template-columns: 1fr 1fr
}
.platform .feat-tag {
grid-column: 1/-1;
padding: 2px 6px 0
}
}
@media(max-width:1100px) {
.platform .arch-grid {
grid-template-columns: repeat(2, 1fr)
}
.platform .arch-grid::before {
display: none
}
.platform .caps {
grid-template-columns: 1fr
}
}
@media(max-width:800px) {
.platform .duo {
grid-template-columns: 1fr
}
.platform .features-head {
flex-direction: column;
align-items: flex-start
}
}
/* ================= SECTION 5 · MIDDLEWARE ================= */
.middleware {
background: #050912;
overflow: hidden
}
.middleware .split {
margin-top: 64px;
display: grid;
grid-template-columns: 1.1fr .9fr;
gap: 40px;
align-items: stretch
}
.middleware .viz-box {
position: relative;
min-height: 520px;
border-radius: 20px;
background: radial-gradient(ellipse at 50% 50%, rgba(0, 225, 180, .08), transparent 70%), #030610;
overflow: hidden;
border: 1px solid var(--line)
}
.middleware #venueCanvas {
position: absolute;
inset: 0
}
.middleware .viz-labels {
position: absolute;
inset: 0;
pointer-events: none;
font-family: var(--mono);
font-size: 10px;
color: var(--teal);
letter-spacing: .1em
}
.middleware .viz-labels .lb {
position: absolute;
display: flex;
align-items: center;
gap: 6px;
text-shadow: 0 0 8px rgba(0, 225, 180, .6)
}
.middleware .viz-labels .lb::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--teal);
box-shadow: 0 0 10px var(--teal)
}
.middleware .viz-labels .lb.l1 {
top: 18%;
left: 22%
}
.middleware .viz-labels .lb.l2 {
top: 62%;
right: 18%
}
.middleware .viz-labels .lb.l3 {
bottom: 20%;
left: 30%
}
.middleware .viz-labels .readout {
position: absolute;
left: 20px;
top: 20px;
display: flex;
flex-direction: column;
gap: 4px;
color: var(--ink-3)
}
.middleware .viz-labels .readout b {
color: var(--teal)
}
.middleware .viz-labels .fps {
position: absolute;
right: 20px;
top: 20px;
color: var(--ink-3)
}
.middleware .viz-labels .corner {
position: absolute;
width: 16px;
height: 16px;
border: 1px solid var(--teal);
opacity: .5
}
.middleware .viz-labels .c-tl {
top: 12px;
left: 12px;
border-right: 0;
border-bottom: 0
}
.middleware .viz-labels .c-tr {
top: 12px;
right: 12px;
border-left: 0;
border-bottom: 0
}
.middleware .viz-labels .c-bl {
bottom: 12px;
left: 12px;
border-right: 0;
border-top: 0
}
.middleware .viz-labels .c-br {
bottom: 12px;
right: 12px;
border-left: 0;
border-top: 0
}
.middleware .code-box {
position: relative;
border-radius: 20px;
background: #07101c;
border: 1px solid var(--line);
overflow: hidden;
display: flex;
flex-direction: column
}
.middleware .code-head {
padding: 14px 18px;
border-bottom: 1px solid var(--line);
display: flex;
align-items: center;
gap: 10px;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3)
}
.middleware .code-head .dots {
display: flex;
gap: 6px
}
.middleware .code-head .dots i {
width: 9px;
height: 9px;
border-radius: 50%;
display: block
}
.middleware .code-head .dots i:nth-child(1) {
background: #ff5f57
}
.middleware .code-head .dots i:nth-child(2) {
background: #febc2e
}
.middleware .code-head .dots i:nth-child(3) {
background: #28c840
}
.middleware .code-head .path {
margin-left: auto;
color: var(--ink-4)
}
.middleware pre {
margin: 0;
padding: 22px 22px;
font-family: var(--mono);
font-size: 12.5px;
line-height: 1.8;
color: var(--ink-2);
flex: 1;
overflow: hidden
}
.middleware .kw {
color: #FF6B9D
}
.middleware .fn {
color: var(--teal)
}
.middleware .str {
color: #FFD24D
}
.middleware .cm {
color: var(--ink-4)
}
.middleware .num {
color: #9B7CFF
}
.middleware .typed::after {
content: "▊";
color: var(--teal);
animation: blink 1s steps(2) infinite
}
@keyframes blink {
50% {
opacity: 0
}
}
.middleware .cards3 {
margin-top: 40px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px
}
.middleware .cards3 .gcard {
padding: 28px;
min-height: 180px;
display: flex;
flex-direction: column;
justify-content: space-between
}
.middleware .cards3 .icon {
width: 40px;
height: 40px;
border: 1px solid var(--teal);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: var(--teal);
font-family: var(--mono);
font-size: 14px;
margin-bottom: 20px;
background: rgba(0, 225, 180, .05)
}
.middleware .cards3 h4 {
font-size: 20px;
font-weight: 600;
margin-bottom: 10px;
line-height: 1.3
}
.middleware .cards3 p {
font-size: 13px;
color: var(--ink-3);
line-height: 1.7
}
.middleware .kicker {
margin-top: 56px;
text-align: center;
font-family: var(--cn);
font-size: clamp(20px, 2.4vw, 34px);
font-weight: 300;
color: var(--ink-2);
letter-spacing: .02em
}
.middleware .kicker b {
color: var(--teal);
font-weight: 500
}
@media(max-width:1000px) {
.middleware .split {
grid-template-columns: 1fr
}
.middleware .cards3 {
grid-template-columns: 1fr
}
}
/* ================= SECTION 6 · COMPAT ================= */
.compat {
background: var(--bg);
padding-top: 160px;
padding-bottom: 160px
}
.compat .logos-track {
margin-top: 60px;
overflow: hidden;
position: relative;
padding: 24px 0;
mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%)
}
.compat .logos-track .flow {
display: flex;
gap: 48px;
animation: flow 38s linear infinite;
width: max-content
}
@keyframes flow {
to {
transform: translateX(-50%)
}
}
.compat .logos-track .plat {
flex: none;
display: flex;
align-items: center;
gap: 12px;
padding: 18px 28px;
border: 1px solid var(--line);
border-radius: 14px;
background: rgba(255, 255, 255, .015);
font-family: var(--en);
color: var(--ink-2);
letter-spacing: .05em;
font-size: 16px;
font-weight: 500;
white-space: nowrap
}
.compat .logos-track .plat .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--teal)
}
.compat .logos-track .plat .zh {
font-family: var(--cn);
color: var(--ink-3);
font-size: 13px;
margin-left: 4px
}
.compat .modes {
margin-top: 72px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px
}
.compat .mode {
position: relative;
padding: 40px 32px;
border-radius: 18px;
background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, .005));
border: 1px solid var(--line);
transition: all .35s cubic-bezier(.2, .7, .2, 1);
cursor: pointer
}
.compat .modes:has(.mode.active) .mode:not(.active) {
opacity: .55
}
.compat .mode.active {
background: linear-gradient(180deg, rgba(0, 225, 180, .08), rgba(0, 225, 180, .01));
border-color: var(--teal);
transform: translateY(-2px)
}
.compat .mode.featured {
background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, .005));
border-color: var(--line)
}
.compat .mode:hover {
transform: translateY(-3px)
}
.compat .mode .tag {
font-family: var(--en);
font-size: 10px;
letter-spacing: .24em;
color: var(--ink-3);
margin-bottom: 18px
}
.compat .mode.featured .tag {
color: var(--teal)
}
.compat .mode.active .tag {
color: var(--teal)
}
.compat .mode h4 {
font-size: 24px;
font-weight: 600;
margin-bottom: 8px
}
.compat .mode p {
font-size: 13px;
color: var(--ink-3);
line-height: 1.7;
margin-bottom: 24px
}
.compat .mode .diagram {
height: 80px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
font-family: var(--mono);
font-size: 10px;
color: var(--ink-4);
letter-spacing: .08em
}
.compat .mode .node {
width: 36px;
height: 36px;
border: 1px solid var(--ink-4);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 9px;
background: #0a1021
}
.compat .mode.featured .node {
border-color: var(--teal);
color: var(--teal)
}
.compat .mode.active .node {
border-color: var(--teal);
color: var(--teal)
}
.compat .mode:not(.active) .node {
border-color: var(--ink-4);
color: var(--ink-4)
}
.compat .mode .wire {
flex: 1;
height: 1px;
background: repeating-linear-gradient(90deg, var(--ink-4) 0, var(--ink-4) 4px, transparent 4px, transparent 8px);
margin: 0 10px;
position: relative
}
.compat .mode.featured .wire {
background: repeating-linear-gradient(90deg, var(--teal) 0, var(--teal) 4px, transparent 4px, transparent 8px)
}
.compat .mode.active .wire {
background: repeating-linear-gradient(90deg, var(--teal) 0, var(--teal) 4px, transparent 4px, transparent 8px)
}
.compat .mode:not(.active) .wire {
background: repeating-linear-gradient(90deg, var(--ink-4) 0, var(--ink-4) 4px, transparent 4px, transparent 8px)
}
.compat .mode.featured .wire::after {
content: "";
position: absolute;
top: -3px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--teal);
box-shadow: 0 0 12px var(--teal);
animation: packet 1.8s linear infinite
}
.compat .mode.active .wire::after {
content: "";
position: absolute;
top: -3px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--teal);
box-shadow: 0 0 12px var(--teal);
animation: packet 1.8s linear infinite
}
.compat .mode:not(.active) .wire::after {
display: none
}
@keyframes packet {
from {
left: 0
}
to {
left: 100%
}
}
.compat .mode .badge-feat {
position: absolute;
top: -1px;
right: 24px;
transform: translateY(-50%);
padding: 4px 10px;
background: var(--teal);
color: #001815;
font-family: var(--en);
font-size: 10px;
letter-spacing: .15em;
border-radius: 4px;
font-weight: 600
}
@media(max-width:900px) {
.compat .modes {
grid-template-columns: 1fr
}
}
/* ================= SECTION 7 · STATS ================= */
.stats {
background: radial-gradient(ellipse 80% 60% at 50% 50%, #0c1a2e, #030610);
overflow: hidden;
text-align: center;
padding: 180px 40px
}
.stats canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: .6
}
.stats .wrap {
position: relative;
z-index: 3
}
.stats .pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
margin-top: 80px
}
.stats .stat {
position: relative;
padding: 60px 20px
}
.stats .stat .plus {
font-family: var(--en);
font-size: clamp(100px, 18vw, 240px);
font-weight: 500;
line-height: .9;
letter-spacing: -.04em;
background: linear-gradient(180deg, #fff 0%, #00E1B4 120%);
-webkit-background-clip: text;
background-clip: text;
color: transparent
}
.stats .stat .unit {
font-family: var(--cn);
font-size: 22px;
font-weight: 500;
margin-top: 10px;
color: #fff
}
.stats .stat .desc {
font-size: 14px;
color: var(--ink-3);
margin-top: 12px;
line-height: 1.7;
max-width: 340px;
margin-left: auto;
margin-right: auto
}
.stats .stat .ring {
position: absolute;
inset: 20px;
border: 1px solid rgba(0, 225, 180, .15);
border-radius: 50%;
pointer-events: none
}
.stats .divider {
position: absolute;
left: 50%;
top: 20%;
bottom: 20%;
width: 1px;
background: linear-gradient(180deg, transparent, var(--line-2), transparent);
transform: translateX(-50%)
}
@media(max-width:800px) {
.stats .pair {
grid-template-columns: 1fr
}
.stats .divider {
display: none
}
}
/* ================= SECTION 8 · FIVE PLANS · Apple pinned-scroll ================= */
.plans {
--c: var(--teal);
--c2: var(--teal);
background: var(--bg);
padding: 0 0 0;
position: relative;
overflow: visible
}
.plans::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse 60% 30% at 50% 0%, color-mix(in srgb, var(--c) 12%, transparent), transparent 70%);
opacity: .6;
pointer-events: none;
transition: background .8s
}
/* 總容器:5 屏滾動 */
.plans-stage {
position: relative;
height: 500vh
}
.plans-sticky {
position: sticky;
top: 0;
height: 100vh;
display: flex;
flex-direction: column;
padding: max(72px, 8vh) 40px 40px;
overflow: hidden
}
/* 頂部 header + 進度 */
.plans .plans-head {
max-width: 1280px;
margin: 0 auto;
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 40px;
margin-bottom: min(48px, 5vh);
flex-wrap: wrap
}
.plans .plans-head .left .eyebrow {
margin-bottom: 16px
}
.plans .plans-head .kicker {
font-family: var(--cn);
font-size: clamp(28px, 3.2vw, 44px);
font-weight: 300;
color: var(--ink-2);
line-height: 1.25;
letter-spacing: -.01em;
margin: 0
}
.plans .plans-head .kicker b {
font-weight: 600;
color: #fff
}
.plans .plans-head .kicker .accent {
color: var(--c);
transition: color .6s
}
.plans .plans-progress {
flex: 1;
max-width: 360px;
min-width: 200px;
display: flex;
flex-direction: column;
gap: 8px
}
.plans .pp-nums {
font-family: var(--mono);
font-size: 11px;
letter-spacing: .1em;
color: var(--ink-3);
display: flex;
justify-content: space-between
}
.plans .pp-nums b {
color: var(--c);
font-size: 22px;
font-weight: 500;
line-height: 1;
letter-spacing: -.02em;
transition: color .6s
}
.plans .pp-bar {
height: 2px;
background: rgba(255, 255, 255, .08);
border-radius: 2px;
overflow: hidden;
position: relative
}
.plans .pp-bar i {
position: absolute;
inset: 0;
width: 0;
background: linear-gradient(90deg, var(--c), var(--c2));
box-shadow: 0 0 14px var(--c);
transition: width .35s cubic-bezier(.2, .7, .2, 1), background .6s
}
/* split 內容區(qū) */
.plans-split {
flex: 1;
max-width: 1280px;
width: 100%;
margin: 0 auto;
display: grid;
grid-template-columns: 360px 1fr;
gap: 80px;
align-items: stretch;
min-height: 0
}
.plans-left {
position: relative;
display: flex;
flex-direction: column;
gap: 28px;
padding-top: 30px
}
.plans-nav {
display: flex;
flex-direction: column;
gap: 2px
}
.plans-nav .pn {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 0;
border-top: 1px solid var(--line);
cursor: pointer;
opacity: .45;
transition: opacity .35s
}
.plans-nav .pn:last-child {
border-bottom: 1px solid var(--line)
}
.plans-nav .pn .pip {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--ink-4);
transition: all .35s
}
.plans-nav .pn .num {
font-family: var(--mono);
font-size: 11px;
letter-spacing: .08em;
color: var(--ink-3);
min-width: 28px
}
.plans-nav .pn .nm {
font-family: var(--cn);
font-size: 15px;
font-weight: 500;
color: var(--ink-2);
flex: 1
}
.plans-nav .pn.active {
opacity: 1
}
.plans-nav .pn.active .pip {
background: var(--pc);
box-shadow: 0 0 14px var(--pc);
transform: scale(1.35)
}
.plans-nav .pn.active .num {
color: var(--pc)
}
.plans-nav .pn.active .nm {
color: #fff
}
.plans-nav .pn.passed {
opacity: .75
}
.plans-nav .pn.passed .pip {
background: color-mix(in srgb, var(--pc) 40%, transparent)
}
/* 右側切片舞臺 */
.plans-right {
position: relative;
min-height: 0
}
.plans-slide {
--c: var(--teal);
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
opacity: 0;
transform: translateY(40px) scale(.98);
transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
pointer-events: none;
will-change: opacity, transform
}
.plans-slide.active {
opacity: 1;
transform: none;
pointer-events: auto
}
.plans-slide.before {
transform: translateY(-40px) scale(.98)
}
.plans-slide::before {
content: attr(data-idx);
position: absolute;
right: -30px;
top: -20px;
font-family: var(--en);
font-size: clamp(180px, 22vw, 320px);
font-weight: 500;
line-height: .85;
color: transparent;
-webkit-text-stroke: 1px color-mix(in srgb, var(--c) 32%, transparent);
text-stroke: 1px color-mix(in srgb, var(--c) 32%, transparent);
letter-spacing: -.05em;
pointer-events: none;
opacity: .5;
z-index: 0
}
.plans-slide .tag {
font-family: var(--en);
font-size: 12px;
letter-spacing: .28em;
color: var(--c);
display: inline-flex;
align-items: center;
gap: 10px;
position: relative;
z-index: 1
}
.plans-slide .tag::before {
content: "";
width: 36px;
height: 1px;
background: var(--c)
}
.plans-slide .pills {
display: flex;
gap: 8px;
margin-top: 14px;
position: relative;
z-index: 1
}
.plans-slide .pills .pill {
font-size: 11px;
padding: 5px 12px;
border-radius: 999px;
border: 1px solid var(--c);
color: var(--c);
background: color-mix(in srgb, var(--c) 8%, transparent);
font-family: var(--cn)
}
.plans-slide h3 {
font-family: var(--cn);
font-size: clamp(32px, 4.2vw, 56px);
font-weight: 600;
line-height: 1.1;
margin: 24px 0 16px;
letter-spacing: -.01em;
position: relative;
z-index: 1
}
.plans-slide h3 b {
color: var(--c)
}
.plans-slide .lead {
font-size: clamp(15px, 1.4vw, 19px);
color: var(--ink-2);
font-weight: 300;
line-height: 1.55;
max-width: 720px;
position: relative;
z-index: 1
}
.plans-slide .grid-sub {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px 32px;
margin-top: 36px;
position: relative;
z-index: 1;
overflow-y: auto
}
.plans-slide .sub {
padding: 16px 0;
border-top: 1px solid rgba(255, 255, 255, .08)
}
.plans-slide .sub .n {
font-family: var(--mono);
font-size: 10px;
color: var(--c);
letter-spacing: .12em;
margin-bottom: 8px
}
.plans-slide .sub h5 {
font-family: var(--cn);
font-size: 15px;
font-weight: 600;
margin-bottom: 4px;
color: #fff
}
.plans-slide .sub p {
font-size: 12.5px;
color: var(--ink-3);
line-height: 1.6
}
.plans-slide .hero-num {
display: flex;
align-items: baseline;
gap: 20px;
margin: 20px 0 22px;
position: relative;
z-index: 1
}
.plans-slide .hero-num .n {
font-family: var(--en);
font-size: clamp(80px, 11vw, 160px);
font-weight: 500;
line-height: .9;
color: var(--c);
letter-spacing: -.04em;
text-shadow: 0 0 60px color-mix(in srgb, var(--c) 50%, transparent)
}
.plans-slide .hero-num .label {
font-family: var(--cn);
color: var(--ink-2);
font-size: 15px;
max-width: 240px;
line-height: 1.5
}
.plans-slide .stats-row {
display: flex;
gap: 40px;
margin: 22px 0 28px;
padding: 20px 0;
border-top: 1px solid rgba(255, 255, 255, .08);
border-bottom: 1px solid rgba(255, 255, 255, .08);
position: relative;
z-index: 1
}
.plans-slide .stats-row .s b {
font-family: var(--en);
font-size: clamp(28px, 3vw, 38px);
font-weight: 500;
color: var(--c);
display: block;
letter-spacing: -.02em;
line-height: 1
}
.plans-slide .stats-row .s span {
font-size: 12px;
color: var(--ink-3);
margin-top: 4px;
display: block
}
/* plan color palette */
.plans-slide.p1 {
--c: #FF6B9D
}
.plans-slide.p2 {
--c: #FF8A3D
}
.plans-slide.p3 {
--c: #00E1B4
}
.plans-slide.p4 {
--c: #9B7CFF
}
.plans-slide.p5 {
--c: #5EE695
}
/* 側邊膠片感刻度 */
.plans-ruler {
position: absolute;
right: 28px;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 6px;
align-items: flex-end;
font-family: var(--mono);
font-size: 10px;
letter-spacing: .12em;
color: var(--ink-4);
pointer-events: none;
z-index: 5
}
.plans-ruler .tk {
display: flex;
align-items: center;
gap: 8px;
opacity: .45;
transition: opacity .35s
}
.plans-ruler .tk .bar {
width: 22px;
height: 1px;
background: var(--ink-4)
}
.plans-ruler .tk.active {
opacity: 1;
color: var(--c)
}
.plans-ruler .tk.active .bar {
width: 42px;
background: var(--c);
box-shadow: 0 0 10px var(--c)
}
/* scroll hint on enter */
.plans-hint {
position: absolute;
left: 50%;
bottom: 28px;
transform: translateX(-50%);
font-family: var(--en);
font-size: 10px;
letter-spacing: .3em;
color: var(--ink-4);
display: flex;
align-items: center;
gap: 8px;
opacity: 0;
transition: opacity .4s;
pointer-events: none;
z-index: 5
}
.plans-hint.show {
opacity: .7
}
.plans-hint i {
display: inline-block;
width: 1px;
height: 18px;
background: linear-gradient(180deg, var(--c), transparent);
animation: scroll-line 2s infinite
}
@media(max-width:1100px) {
.plans-split {
grid-template-columns: 220px 1fr;
gap: 40px
}
.plans-slide::before {
font-size: 160px;
right: -10px
}
}
@media(max-width:800px) {
.plans-stage {
height: auto
}
.plans-sticky {
position: relative;
top: 0;
height: auto;
min-height: auto;
padding: 80px 24px 60px
}
.plans-split {
grid-template-columns: 1fr;
gap: 24px
}
.plans-left {
padding-top: 0;
flex-direction: column
}
.plans-nav {
flex-direction: row;
overflow-x: auto;
gap: 12px;
padding-bottom: 8px
}
.plans-nav .pn {
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding: 10px 14px;
border: 1px solid var(--line);
border-radius: 10px;
min-width: 140px;
flex: none
}
.plans-nav .pn:last-child {
border-bottom: 1px solid var(--line)
}
.plans-right {
min-height: auto
}
.plans-slide {
position: relative;
inset: auto;
opacity: 1;
transform: none;
pointer-events: auto;
margin-bottom: 40px
}
.plans-slide.before {
transform: none
}
.plans-ruler,
.plans-hint {
display: none
}
.plans-slide .grid-sub {
grid-template-columns: 1fr
}
}
/* (legacy plan-card styles removed · replaced by .plans-slide) */
/* ================= SECTION 9 · ROLES ================= */
.roles {
background: linear-gradient(180deg, var(--bg) 0%, #070c17 100%)
}
.roles .grid {
margin-top: 72px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px
}
.roles .gcard {
padding: 40px 32px;
min-height: 280px;
display: flex;
flex-direction: column;
justify-content: space-between
}
.roles .gcard .nm {
font-family: var(--en);
font-size: 11px;
letter-spacing: .24em;
color: var(--teal);
margin-bottom: auto
}
.roles .gcard h4 {
font-size: 26px;
font-weight: 600;
line-height: 1.2;
margin-top: 60px;
margin-bottom: 10px
}
.roles .gcard p {
font-size: 13px;
color: var(--ink-3);
line-height: 1.7
}
.roles .gcard .icon-geo {
position: absolute;
top: 32px;
right: 32px;
width: 32px;
height: 32px;
opacity: .7
}
@media(max-width:1000px) {
.roles .grid {
grid-template-columns: 1fr 1fr
}
}
@media(max-width:600px) {
.roles .grid {
grid-template-columns: 1fr
}
}
/* (legacy .market section styles removed · section not in DOM) */
/* ================= PAIN → SOLUTION (new) ================= */
.pain {
background: #050912;
padding: 180px 40px;
position: relative;
overflow: hidden
}
.pain::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(0, 225, 180, .06), transparent 70%)
}
.pain .wrap {
position: relative
}
.pain .table {
margin-top: 72px;
border-top: 1px solid var(--line)
}
.pain .row {
display: grid;
grid-template-columns: 60px 1fr 60px 1fr;
align-items: center;
gap: 24px;
padding: 28px 0;
border-bottom: 1px solid var(--line);
position: relative;
transition: background .3s;
padding-left: 16px;
padding-right: 16px;
margin-left: -16px;
margin-right: -16px;
border-radius: 4px
}
.pain .row:hover {
background: rgba(0, 225, 180, .03)
}
.pain .row .idx {
font-family: var(--mono);
font-size: 12px;
color: var(--ink-4);
letter-spacing: .1em
}
.pain .row .pain-txt {
font-family: var(--cn);
font-size: clamp(18px, 2vw, 24px);
font-weight: 400;
color: var(--ink-3);
position: relative
}
.pain .row .pain-txt s {
text-decoration: line-through;
text-decoration-color: #FF6B9D;
text-decoration-thickness: 1.5px;
text-underline-offset: 3px
}
.pain .row .arrow-ico {
display: flex;
align-items: center;
justify-content: center;
font-family: var(--mono);
color: var(--teal);
font-size: 18px
}
.pain .row .arrow-ico::before {
content: "";
width: 28px;
height: 1px;
background: var(--teal);
margin-right: 6px
}
.pain .row .solve-txt {
font-family: var(--cn);
font-size: clamp(18px, 2vw, 24px);
font-weight: 500;
color: #fff;
letter-spacing: .01em
}
.pain .row .solve-txt b {
color: var(--teal)
}
.pain .caption {
display: grid;
grid-template-columns: 60px 1fr 60px 1fr;
gap: 24px;
padding-bottom: 20px;
font-family: var(--en);
font-size: 11px;
letter-spacing: .24em;
color: var(--ink-4);
padding-left: 16px;
padding-right: 16px;
margin-left: -16px;
margin-right: -16px
}
.pain .caption .a {
color: #FF6B9D
}
.pain .caption .b {
color: var(--teal)
}
@media(max-width:800px) {
.pain .row {
grid-template-columns: 40px 1fr;
gap: 12px
}
.pain .row .arrow-ico,
.pain .caption {
display: none
}
.pain .row .solve-txt {
grid-column: 1/-1;
padding-left: 52px;
padding-top: 4px
}
}
/* (legacy .revenue section styles removed · section not in DOM) */
/* ================= AI+ FLYWHEEL (new) ================= */
.ai-fly {
background: linear-gradient(180deg, #050912, #070c17);
padding: 180px 40px;
position: relative;
overflow: hidden
}
.ai-fly .layout {
margin-top: 72px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center
}
.ai-fly .diag {
position: relative;
aspect-ratio: 1;
max-width: 560px;
margin: 0 auto
}
.ai-fly svg {
width: 100%;
height: 100%;
overflow: visible
}
.ai-fly .text-side h3 {
font-family: var(--cn);
font-size: clamp(28px, 3.6vw, 44px);
font-weight: 600;
line-height: 1.2;
margin-bottom: 24px
}
.ai-fly .text-side h3 b {
color: var(--teal)
}
.ai-fly .text-side .fly-rows {
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 40px
}
.ai-fly .fly-row {
padding: 22px 0;
border-top: 1px solid var(--line);
display: grid;
grid-template-columns: auto 1fr;
gap: 20px;
align-items: start
}
.ai-fly .fly-row .n {
font-family: var(--mono);
font-size: 12px;
color: var(--teal);
letter-spacing: .1em;
padding-top: 4px
}
.ai-fly .fly-row h5 {
font-size: 18px;
font-weight: 600;
margin-bottom: 6px
}
.ai-fly .fly-row p {
font-size: 13px;
color: var(--ink-3);
line-height: 1.65
}
@media(max-width:900px) {
.ai-fly .layout {
grid-template-columns: 1fr;
gap: 40px
}
}
/* ================= SECTION 10 · FOOTER CTA · cinematic v2 ================= */
.finale {
--reveal: 0;
background: #02040a;
padding: 240px 40px 80px;
overflow: hidden;
position: relative;
content-visibility: auto;
contain-intrinsic-size: 100vh
}
/* 黑場幕布:一進來先"夜場燈暗"然后拉開 */
.finale-curtain {
position: absolute;
inset: 0;
z-index: 4;
background: #000;
opacity: calc(1 - var(--reveal));
transition: opacity .3s linear;
pointer-events: none
}
.finale-curtain::before,
.finale-curtain::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 50%;
background: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
transition: transform 1.2s cubic-bezier(.7, 0, .3, 1)
}
.finale-curtain::before {
top: 0;
transform: translateY(calc(var(--reveal) * -100%))
}
.finale-curtain::after {
bottom: 0;
background: linear-gradient(0deg, #000 0%, #000 70%, transparent 100%);
transform: translateY(calc(var(--reveal) * 100%))
}
/* 投影機光錐:從下方中心射向屏幕 */
.finale-projector {
position: absolute;
left: 50%;
bottom: -20%;
transform: translateX(-50%);
width: 80vmin;
height: 70vh;
pointer-events: none;
z-index: 2;
opacity: calc(var(--reveal) * 0.9);
mix-blend-mode: screen;
filter: blur(calc((1 - var(--reveal)) * 20px))
}
.finale-projector .beam {
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 100%;
height: 100%;
background: conic-gradient(from 270deg at 50% 100%, transparent 0deg, transparent 75deg, rgba(0, 225, 180, .12) 85deg, rgba(120, 255, 230, .25) 90deg, rgba(0, 225, 180, .12) 95deg, transparent 105deg, transparent 360deg);
opacity: calc(var(--reveal) * 0.8);
animation: beamFlicker 3.4s ease-in-out infinite;
animation-play-state: paused
}
.finale[data-lit="1"] .finale-projector .beam,
.finale[data-lit="1"] .finale-projector .dust {
animation-play-state: running
}
@keyframes beamFlicker {
0%,
100% {
opacity: .75
}
50% {
opacity: .95
}
52% {
opacity: .5
}
54% {
opacity: .9
}
}
.finale-projector .dust {
position: absolute;
inset: 0;
background-image:
radial-gradient(2px 2px at 20% 70%, rgba(255, 255, 255, .5), transparent 50%),
radial-gradient(1px 1px at 50% 50%, rgba(255, 255, 255, .6), transparent 50%),
radial-gradient(2px 2px at 80% 30%, rgba(255, 255, 255, .4), transparent 50%),
radial-gradient(1px 1px at 30% 40%, rgba(255, 255, 255, .5), transparent 50%),
radial-gradient(1.5px 1.5px at 70% 60%, rgba(255, 255, 255, .5), transparent 50%);
background-size: 100% 100%;
animation: dustFloat 9s linear infinite;
animation-play-state: paused;
opacity: .6
}
@keyframes dustFloat {
0% {
transform: translateY(0)
}
100% {
transform: translateY(-40px)
}
}
/* 鏡頭光暈(屏幕亮起時炸開) */
.finale-flare {
position: absolute;
left: 50%;
top: 46%;
transform: translate(-50%, -50%);
width: 70vmin;
height: 70vmin;
pointer-events: none;
z-index: 3;
opacity: 0
}
.finale-flare.pop {
animation: flarePop 1.4s cubic-bezier(.2, .9, .3, 1) forwards
}
.finale-flare::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle, rgba(255, 255, 255, .8) 0%, rgba(0, 225, 180, .4) 15%, rgba(0, 225, 180, .1) 30%, transparent 55%);
mix-blend-mode: screen
}
.finale-flare::after {
content: "";
position: absolute;
left: -20%;
right: -20%;
top: 48%;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(0, 225, 180, .9), rgba(255, 255, 255, 1), rgba(0, 225, 180, .9), transparent);
filter: blur(2px)
}
@keyframes flarePop {
0% {
opacity: 0;
transform: translate(-50%, -50%) scale(.4)
}
25% {
opacity: 1;
transform: translate(-50%, -50%) scale(1.05)
}
60% {
opacity: .6;
transform: translate(-50%, -50%) scale(1.4)
}
100% {
opacity: 0;
transform: translate(-50%, -50%) scale(2)
}
}
/* 膠片引帶倒數(shù) */
.finale-leader {
position: absolute;
left: 50%;
top: 45%;
transform: translate(-50%, -50%);
z-index: 5;
pointer-events: none;
font-family: var(--mono);
opacity: 0;
transition: opacity .3s
}
.finale-leader.show {
opacity: 1
}
.finale-leader .num {
font-size: clamp(140px, 24vw, 280px);
font-weight: 300;
color: rgba(0, 225, 180, .85);
line-height: 1;
letter-spacing: -.04em;
text-shadow: 0 0 40px rgba(0, 225, 180, .5);
position: relative
}
.finale-leader .num::before,
.finale-leader .num::after {
content: "";
position: absolute;
inset: 0;
border: 1px solid rgba(0, 225, 180, .5);
border-radius: 50%;
transform: scale(1.8);
opacity: .5
}
.finale-leader .num::after {
transform: scale(1.3);
border-color: rgba(0, 225, 180, .8)
}
.finale-leader .label {
text-align: center;
font-size: 11px;
letter-spacing: .3em;
color: rgba(0, 225, 180, .7);
margin-top: 10px
}
/* 膠片齒孔裝飾(左右兩側) */
.finale-film-strip {
position: absolute;
top: 0;
bottom: 0;
width: 26px;
pointer-events: none;
z-index: 2;
opacity: calc(var(--reveal) * 0.5);
background-image: repeating-linear-gradient(180deg, transparent 0 24px, rgba(255, 255, 255, .12) 24px 32px, transparent 32px 56px);
background-size: 26px 56px
}
.finale-film-strip.l {
left: 0;
border-right: 1px solid rgba(255, 255, 255, .06)
}
.finale-film-strip.r {
right: 0;
border-left: 1px solid rgba(255, 255, 255, .06)
}
/* 巨字 bigword 增強:進入時 "銀幕" 兩字有強發(fā)光脈沖 */
.finale .bigword .w.accent {
animation: accentPulse 3s ease-in-out infinite
}
@keyframes accentPulse {
0%,
100% {
filter: drop-shadow(0 0 30px rgba(0, 225, 180, .5))
}
50% {
filter: drop-shadow(0 0 60px rgba(0, 225, 180, .9)) drop-shadow(0 0 100px rgba(0, 225, 180, .4))
}
}
/* 原 starfield 被 curtain 遮擋時不清除 —— curtain 會淡出 */
.finale .starfield {
z-index: 1
}
.finale .bgfx {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 70% 50% at 50% 45%, rgba(0, 225, 180, .18), transparent 70%),
radial-gradient(ellipse 100% 60% at 50% 100%, rgba(155, 124, 255, .06), transparent 60%);
pointer-events: none
}
/* starfield particles */
.finale .starfield {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none
}
.finale .starfield span {
position: absolute;
width: 2px;
height: 2px;
border-radius: 50%;
background: #fff;
opacity: .5;
animation: twinkle 3s ease-in-out infinite;
animation-play-state: paused
}
.finale[data-lit="1"] .starfield span {
animation-play-state: running
}
@keyframes twinkle {
0%,
100% {
opacity: .1;
transform: scale(1)
}
50% {
opacity: .8;
transform: scale(1.3)
}
}
/* virtual cinema screen frame behind headline */
.finale .screen-frame {
position: absolute;
top: 180px;
left: 50%;
transform: translateX(-50%);
width: min(1200px, 88vw);
aspect-ratio: 16/5;
pointer-events: none;
z-index: 1
}
.finale .screen-glow {
position: absolute;
inset: -40px;
background: radial-gradient(ellipse 60% 40% at 50% 50%, rgba(0, 225, 180, .18), transparent 70%);
filter: blur(30px)
}
.finale .screen-scan {
position: absolute;
inset: 0;
border: 1px solid rgba(0, 225, 180, .25);
border-radius: 6px;
background: linear-gradient(180deg, transparent 0%, rgba(0, 225, 180, .02) 50%, transparent 100%);
overflow: hidden
}
.finale .screen-scan::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(0, 225, 180, .03) 4px, rgba(0, 225, 180, .03) 5px)
}
.finale .screen-scan::after {
content: "";
position: absolute;
left: -100%;
top: 0;
width: 80%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(0, 225, 180, .12), transparent);
animation: scanMove 5s linear infinite
}
@keyframes scanMove {
0% {
left: -100%
}
100% {
left: 100%
}
}
.finale .screen-tick {
position: absolute;
top: -12px;
left: -8px;
width: 20px;
height: 20px;
border-left: 2px solid var(--teal);
border-top: 2px solid var(--teal)
}
.finale .screen-tick.right {
left: auto;
right: -8px;
border-left: none;
border-right: 2px solid var(--teal);
border-top: 2px solid var(--teal)
}
.finale .screen-film {
position: absolute;
top: -24px;
left: 0;
right: 0;
height: 10px;
background: repeating-linear-gradient(90deg, transparent 0 10px, rgba(255, 255, 255, .08) 10px 14px);
opacity: .5
}
.finale .wrap {
position: relative;
z-index: 3
}
/* cinematic bigword */
.finale .bigword {
font-family: var(--cn);
font-weight: 600;
font-size: clamp(44px, 8vw, 120px);
line-height: 1.1;
letter-spacing: -.02em;
text-align: center;
max-width: 1200px;
margin: 0 auto;
position: relative
}
.finale .bigword .line {
display: block;
white-space: nowrap
}
.finale .bigword .w {
display: inline-block;
background: linear-gradient(180deg, #fff 20%, #4a5570 120%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
opacity: 0;
transform: translateY(20px);
transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1)
}
.finale .bigword .w.accent {
background: linear-gradient(180deg, #6ff4d4 10%, #00E1B4 80%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 0 30px rgba(0, 225, 180, .5))
}
.finale .bigword .w.comma {
color: var(--ink-3);
-webkit-text-fill-color: var(--ink-3);
font-weight: 300
}
.finale .bigword .w.gap {
width: .1em
}
.finale .bigword.in .w {
opacity: 1;
transform: translateY(0)
}
.finale .en-sub {
text-align: center;
margin-top: 36px;
font-family: var(--en);
font-size: 15px;
letter-spacing: .32em;
color: var(--teal);
font-weight: 300;
position: relative
}
.finale .en-sub span {
margin: 0 8px;
opacity: .4
}
/* credit reel */
.finale .credit-reel {
margin: 100px auto 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
max-width: 900px
}
.finale .cr-tag {
font-family: var(--en);
font-size: 10px;
letter-spacing: .32em;
color: var(--ink-4)
}
.finale .cr-brand {
font-family: var(--en);
font-size: 22px;
letter-spacing: .14em;
color: var(--ink);
font-weight: 500
}
.finale .cr-brand.tiny {
font-size: 14px;
color: var(--ink-2);
letter-spacing: .1em
}
.finale .cta-grid {
margin-top: 100px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
position: relative
}
.finale .cta-card {
position: relative;
padding: 40px 32px;
border-radius: 18px;
background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .005));
border: 1px solid var(--line);
cursor: pointer;
transition: all .35s;
overflow: hidden
}
.finale .cta-card::after {
content: "→";
position: absolute;
bottom: 32px;
right: 32px;
font-family: var(--en);
font-size: 22px;
color: var(--teal);
transition: transform .3s
}
.finale .cta-card:hover {
background: linear-gradient(180deg, rgba(0, 225, 180, .08), rgba(0, 225, 180, .01));
border-color: var(--teal);
transform: translateY(-4px)
}
.finale .cta-card:hover::after {
transform: translate(4px, -4px)
}
.finale .cta-card .en {
font-family: var(--en);
font-size: 11px;
letter-spacing: .24em;
color: var(--ink-3);
margin-bottom: 36px
}
.finale .cta-card h5 {
font-size: 28px;
font-weight: 600;
margin-bottom: 8px
}
.finale .cta-card p {
font-size: 13px;
color: var(--ink-3);
line-height: 1.6
}
.finale footer {
margin-top: 120px;
padding-top: 40px;
border-top: 1px solid var(--line);
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--en);
font-size: 11px;
color: var(--ink-4);
letter-spacing: .1em;
position: relative
}
.finale footer .l {
display: flex;
gap: 24px;
align-items: center
}
.finale footer .r {
display: flex;
gap: 24px
}
.finale footer b {
color: var(--ink-2);
font-weight: 500
}
@media(max-width:800px) {
.finale .cta-grid {
grid-template-columns: 1fr
}
.finale footer {
flex-direction: column;
gap: 16px
}
.finale .bigword .line {
white-space: normal
}
}
/* ================= SYSTEM ARCHITECTURE · diamond (new) ================= */
.sysarch {
background: linear-gradient(180deg, var(--bg), #050912);
padding: 180px 40px 200px;
position: relative;
overflow: hidden
}
.sysarch-grid-bg {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(0, 225, 180, .04) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 225, 180, .04) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 40%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 40%, transparent 80%);
pointer-events: none;
opacity: .7
}
.sysarch .wrap {
position: relative;
z-index: 2
}
.sys-diamond {
margin-top: 80px;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0
}
.sys-row {
position: relative;
padding: 16px 0
}
.row-tag {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--en);
font-size: 11px;
letter-spacing: .22em;
color: var(--ink-3);
margin-bottom: 16px;
padding: 0 0 0 4px
}
.row-tag .pip {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--teal);
box-shadow: 0 0 10px var(--teal)
}
.row-tag.core-tag {
color: var(--teal)
}
.sys-nodes {
display: flex;
justify-content: center;
gap: 24px
}
.sys-nodes.two {
grid-template-columns: repeat(2, 1fr);
display: grid;
gap: 24px;
max-width: 900px;
margin: 0 auto
}
/* A · 監(jiān)管 */
.sys-node {
position: relative;
padding: 24px 28px;
border: 1px solid var(--line);
border-radius: 16px;
background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .008));
min-width: 280px;
transition: all .35s
}
.sys-node:hover {
border-color: rgba(0, 225, 180, .3);
transform: translateY(-2px);
box-shadow: 0 12px 40px -20px rgba(0, 225, 180, .3)
}
.sys-node .n-hd {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
flex-wrap: wrap
}
.sys-node .n-hd svg {
width: 22px;
height: 22px;
color: var(--teal);
flex-shrink: 0
}
.sys-node .n-hd b {
font-family: var(--cn);
font-size: 18px;
font-weight: 600;
color: #fff
}
.sys-node .n-sub {
font-family: var(--en);
font-size: 10px;
letter-spacing: .18em;
color: var(--ink-3);
flex: 1;
text-align: right
}
.sys-node .n-tags {
display: flex;
flex-wrap: wrap;
gap: 6px
}
.sys-node .n-tags span {
padding: 4px 10px;
font-size: 11px;
border: 1px solid var(--line-2);
border-radius: 999px;
color: var(--ink-2);
background: rgba(255, 255, 255, .02);
font-family: var(--cn)
}
.n-reg {
max-width: 680px;
margin: 0 auto;
border-color: rgba(0, 225, 180, .25)
}
.n-reg .n-hd svg {
color: var(--teal)
}
/* B · partners */
.n-creator {
border-color: rgba(0, 225, 180, .2)
}
.n-creator .n-hd svg {
color: var(--teal)
}
.n-op {
border-color: rgba(155, 124, 255, .25)
}
.n-op .n-hd svg {
color: #9B7CFF
}
/* flow arrows */
.sys-flow {
display: flex;
justify-content: center;
gap: 60px;
padding: 14px 0;
min-height: 46px;
position: relative
}
.sys-flow.double {
gap: 40px
}
.sys-flow .arr {
position: relative;
width: 1px;
height: 40px;
background: linear-gradient(180deg, rgba(0, 225, 180, .4), rgba(0, 225, 180, .05))
}
.sys-flow .arr::after {
content: "";
position: absolute;
bottom: -2px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-top: 5px solid rgba(0, 225, 180, .5)
}
/* C · CORE */
.layer-c.core .row-tag .pip {
background: var(--teal);
animation: pulse 2s ease-in-out infinite
}
.core-card {
position: relative;
padding: 40px 36px;
border-radius: 20px;
background: linear-gradient(135deg, rgba(0, 225, 180, .08), rgba(0, 225, 180, .02) 50%, rgba(155, 124, 255, .04));
border: 1px solid rgba(0, 225, 180, .35);
box-shadow: 0 30px 80px -40px rgba(0, 225, 180, .4)
}
.core-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: 20px;
padding: 1px;
background: linear-gradient(135deg, var(--teal), rgba(155, 124, 255, .4) 60%, transparent);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none
}
.core-head {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 30px;
flex-wrap: wrap
}
.core-logo {
position: relative;
width: 48px;
height: 48px;
flex-shrink: 0
}
.core-logo .lo-ring {
position: absolute;
inset: 0;
border: 1.5px solid var(--teal);
border-radius: 50%;
animation: rot 8s linear infinite
}
.core-logo .lo-ring::before {
content: "";
position: absolute;
top: -3px;
left: 50%;
transform: translateX(-50%);
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--teal);
box-shadow: 0 0 10px var(--teal)
}
.core-logo .lo-core {
position: absolute;
inset: 12px;
border-radius: 50%;
background: radial-gradient(circle, var(--teal), transparent 70%);
filter: blur(4px)
}
@keyframes rot {
to {
transform: rotate(360deg)
}
}
.core-en {
font-family: var(--en);
font-size: 11px;
letter-spacing: .28em;
color: var(--teal);
margin-bottom: 4px
}
.core-zh {
font-family: var(--cn);
font-size: 22px;
font-weight: 600;
color: #fff
}
.core-stats {
margin-left: auto;
display: flex;
gap: 26px
}
.core-stats span {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px
}
.core-stats b {
font-family: var(--en);
font-size: 26px;
font-weight: 500;
color: #fff;
letter-spacing: -.02em;
line-height: 1
}
.core-stats i {
font-family: var(--cn);
font-size: 10px;
letter-spacing: .1em;
color: var(--ink-3);
font-style: normal
}
.core-modules {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 10px
}
.core-modules .mod {
padding: 14px 12px;
border: 1px solid rgba(255, 255, 255, .07);
border-radius: 10px;
background: rgba(0, 0, 0, .3);
text-align: left;
transition: all .3s
}
.core-modules .mod:hover {
border-color: rgba(0, 225, 180, .35);
background: rgba(0, 225, 180, .06);
transform: translateY(-2px)
}
.core-modules .mi {
font-family: var(--mono);
font-size: 10px;
color: var(--teal);
letter-spacing: .08em;
display: block;
margin-bottom: 6px
}
.core-modules b {
font-family: var(--cn);
font-size: 13px;
font-weight: 600;
color: #fff;
display: block;
margin-bottom: 2px
}
.core-modules i {
font-family: var(--cn);
font-size: 10px;
color: var(--ink-3);
font-style: normal
}
/* D · hardware */
.sys-nodes.hw {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 10px;
max-width: 1100px;
margin: 0 auto
}
.hw-node {
padding: 18px 14px;
border: 1px solid var(--line);
border-radius: 12px;
background: rgba(255, 255, 255, .02);
text-align: center;
transition: all .3s
}
.hw-node:hover {
border-color: rgba(0, 225, 180, .3);
background: rgba(0, 225, 180, .03);
transform: translateY(-2px)
}
.hw-node b {
font-family: var(--en);
font-size: 15px;
font-weight: 600;
color: #fff;
display: block;
margin-bottom: 3px;
letter-spacing: -.01em
}
.hw-node i {
font-family: var(--cn);
font-size: 10px;
color: var(--ink-3);
font-style: normal;
letter-spacing: .06em
}
/* E · venues */
.sys-nodes.venues {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 10px;
max-width: 1100px;
margin: 0 auto
}
.v-node {
padding: 20px 12px;
border: 1px solid var(--line);
border-radius: 12px;
background: linear-gradient(180deg, rgba(155, 124, 255, .04), rgba(255, 255, 255, .01));
text-align: center;
transition: all .3s
}
.v-node:hover {
border-color: rgba(155, 124, 255, .3);
transform: translateY(-2px)
}
.v-node .v-ic {
width: 24px;
height: 24px;
color: #9B7CFF;
margin: 0 auto 10px
}
.v-node b {
font-family: var(--cn);
font-size: 13px;
font-weight: 600;
color: #fff;
display: block;
margin-bottom: 2px
}
.v-node i {
font-family: var(--cn);
font-size: 10px;
color: var(--ink-3);
font-style: normal;
letter-spacing: .04em
}
@media(max-width:1100px) {
.sys-nodes.two {
grid-template-columns: 1fr
}
.core-modules {
grid-template-columns: repeat(3, 1fr)
}
.sys-nodes.hw,
.sys-nodes.venues {
grid-template-columns: repeat(3, 1fr)
}
.sys-flow {
gap: 30px
}
}
@media(max-width:600px) {
.core-modules {
grid-template-columns: repeat(2, 1fr)
}
.sys-nodes.hw,
.sys-nodes.venues {
grid-template-columns: repeat(2, 1fr)
}
.core-head {
flex-direction: column;
align-items: flex-start
}
.core-stats {
margin-left: 0;
gap: 18px
}
}
/* ================= ? V1-V15 VISUAL FX LAYER ================= */
/* ---------- global mouse spotlight (V3) ---------- */
/* 只在 fx-full 高性能模式下啟用 —— mix-blend-mode:screen 跟隨鼠標會觸發(fā)全屏重繪 */
.spotlight {
display: none;
position: fixed;
inset: 0;
pointer-events: none;
z-index: 80;
opacity: 0;
transition: opacity .6s;
mix-blend-mode: screen;
background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 225, 180, .1), rgba(0, 225, 180, .03) 30%, transparent 60%)
}
body.fx-full .spotlight {
display: block
}
body.fx-full.has-cursor .spotlight {
opacity: 1
}
/* ---------- custom crosshair cursor (V13) ---------- */
@media(hover:hover) and (pointer:fine) {
html,
body {
cursor: none
}
a,
button,
.cta-card,
.mode,
.feat,
[data-qr],
.pn,
.tk,
.fl-pill {
cursor: none
}
.cursor {
position: fixed;
top: 0;
left: 0;
width: 36px;
height: 36px;
pointer-events: none;
z-index: 9999;
transform: translate(-50%, -50%);
transition: width .25s, height .25s, opacity .25s;
will-change: transform
}
.cursor::before,
.cursor::after {
content: "";
position: absolute;
background: #00E1B4;
box-shadow: 0 0 8px rgba(0, 225, 180, .8)
}
.cursor::before {
left: 50%;
top: 0;
bottom: 0;
width: 1px;
transform: translateX(-50%)
}
.cursor::after {
top: 50%;
left: 0;
right: 0;
height: 1px;
transform: translateY(-50%)
}
.cursor i {
position: absolute;
inset: 6px;
border: 1px solid rgba(0, 225, 180, .6);
border-radius: 50%;
transition: all .25s
}
.cursor.hot {
width: 54px;
height: 54px
}
.cursor.hot i {
inset: 2px;
border-color: #00E1B4;
box-shadow: 0 0 18px rgba(0, 225, 180, .5)
}
.cursor-dot {
position: fixed;
top: 0;
left: 0;
width: 6px;
height: 6px;
border-radius: 50%;
background: #00E1B4;
pointer-events: none;
z-index: 9998;
transform: translate(-50%, -50%);
box-shadow: 0 0 12px rgba(0, 225, 180, .8);
transition: transform .08s linear
}
}
/* ---------- boot sequence overlay (V14) ---------- */
.boot {
position: fixed;
inset: 0;
z-index: 9997;
background: #000;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: var(--mono);
color: var(--teal);
transition: opacity .8s;
overflow: hidden
}
.boot.done {
opacity: 0;
pointer-events: none
}
.boot .boot-noise {
position: absolute;
inset: 0;
opacity: .4;
background-image: url("data:image/svg+xml;utf8,")
}
.boot .boot-logo {
width: 120px;
height: 120px;
margin-bottom: 40px;
position: relative;
animation: bootLogoSpin 4s linear infinite
}
.boot .boot-logo::before {
content: "";
position: absolute;
inset: 0;
border: 1px solid var(--teal);
border-radius: 50%;
opacity: .6
}
.boot .boot-logo::after {
content: "";
position: absolute;
inset: 10px;
border: 1px dashed var(--teal);
border-radius: 50%;
animation: bootLogoSpin 2s linear infinite reverse;
opacity: .3
}
.boot .boot-logo img {
position: absolute;
inset: 22px;
width: auto;
height: auto;
object-fit: contain;
filter: drop-shadow(0 0 20px rgba(0, 225, 180, .8))
}
@keyframes bootLogoSpin {
to {
transform: rotate(360deg)
}
}
.boot .boot-lines {
max-width: 720px;
width: 86vw;
padding: 20px 24px;
border: 1px solid rgba(0, 225, 180, .25);
border-radius: 6px;
background: rgba(0, 225, 180, .02);
min-height: 180px;
font-size: 12px;
line-height: 1.9;
letter-spacing: .05em
}
.boot .boot-lines .ln {
display: block;
opacity: 0;
transform: translateX(-8px);
transition: opacity .3s, transform .3s
}
.boot .boot-lines .ln.in {
opacity: 1;
transform: none
}
.boot .boot-lines .ln .ok {
color: #5EE695;
margin-left: 10px
}
.boot .boot-lines .ln .mut {
color: var(--ink-4)
}
.boot .boot-bar {
margin-top: 30px;
width: min(520px, 80vw);
height: 3px;
background: rgba(0, 225, 180, .12);
overflow: hidden;
border-radius: 2px
}
.boot .boot-bar i {
display: block;
width: 0;
height: 100%;
background: linear-gradient(90deg, var(--teal), #9B7CFF);
box-shadow: 0 0 16px var(--teal);
transition: width .2s linear
}
.boot .boot-tag {
margin-top: 16px;
font-size: 10px;
letter-spacing: .3em;
color: var(--ink-3);
text-transform: uppercase
}
/* ---------- nav laser scan on hover (V7) ---------- */
.nav .links a {
overflow: hidden
}
.nav .links a::before {
content: "";
position: absolute;
left: -100%;
top: 0;
bottom: 0;
width: 100%;
background: linear-gradient(90deg, transparent, rgba(0, 225, 180, .25), transparent);
transition: left .5s cubic-bezier(.2, .7, .2, 1);
pointer-events: none
}
.nav .links a:hover::before {
left: 100%
}
/* ---------- mobile fullscreen menu (Q7) ---------- */
.nav .hamburger {
display: none;
width: 42px;
height: 42px;
background: transparent;
border: 1px solid var(--line-2);
border-radius: 8px;
position: relative;
padding: 0;
cursor: pointer;
z-index: 101
}
.nav .hamburger i {
position: absolute;
left: 10px;
right: 10px;
height: 1.5px;
background: var(--ink-2);
transition: all .35s cubic-bezier(.2, .7, .2, 1)
}
.nav .hamburger i:nth-child(1) {
top: 13px
}
.nav .hamburger i:nth-child(2) {
top: 20px
}
.nav .hamburger i:nth-child(3) {
top: 27px
}
body.menu-open .hamburger i:nth-child(1) {
top: 20px;
transform: rotate(45deg);
background: var(--teal)
}
body.menu-open .hamburger i:nth-child(2) {
opacity: 0;
transform: translateX(20px)
}
body.menu-open .hamburger i:nth-child(3) {
top: 20px;
transform: rotate(-45deg);
background: var(--teal)
}
.mobile-menu {
position: fixed;
inset: 0;
z-index: 95;
background: rgba(3, 8, 14, .88);
backdrop-filter: blur(30px) saturate(1.4);
-webkit-backdrop-filter: blur(30px) saturate(1.4);
opacity: 0;
pointer-events: none;
transition: opacity .5s;
display: flex;
flex-direction: column;
padding: 100px 40px 60px
}
.mobile-menu.open {
opacity: 1;
pointer-events: auto
}
.mobile-menu .mm-rain {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
opacity: .3
}
.mobile-menu .mm-rain span {
position: absolute;
top: -20px;
font-family: var(--mono);
font-size: 13px;
color: var(--teal);
text-shadow: 0 0 6px var(--teal);
animation: mmRain linear infinite;
white-space: nowrap
}
@keyframes mmRain {
to {
transform: translateY(110vh)
}
}
.mobile-menu .mm-eye {
font-family: var(--en);
font-size: 10px;
letter-spacing: .32em;
color: var(--ink-3);
margin-bottom: 40px;
display: flex;
align-items: center;
gap: 14px;
position: relative;
z-index: 2
}
.mobile-menu .mm-eye i {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--teal);
box-shadow: 0 0 10px var(--teal)
}
.mobile-menu nav {
display: flex;
flex-direction: column;
gap: 4px;
position: relative;
z-index: 2
}
.mobile-menu nav a {
display: flex;
align-items: baseline;
gap: 20px;
padding: 18px 0;
border-bottom: 1px solid rgba(0, 225, 180, .08);
font-family: var(--cn);
font-size: 26px;
font-weight: 500;
color: var(--ink);
opacity: 0;
transform: translateX(-20px);
transition: opacity .5s, transform .5s, color .2s;
text-decoration: none
}
.mobile-menu nav a .mnum {
font-family: var(--mono);
font-size: 11px;
color: var(--teal);
letter-spacing: .1em;
min-width: 36px
}
.mobile-menu nav a .men {
font-family: var(--en);
font-size: 11px;
letter-spacing: .2em;
color: var(--ink-3);
margin-left: auto
}
.mobile-menu.open nav a {
opacity: 1;
transform: none
}
.mobile-menu.open nav a:nth-child(1) {
transition-delay: .08s
}
.mobile-menu.open nav a:nth-child(2) {
transition-delay: .14s
}
.mobile-menu.open nav a:nth-child(3) {
transition-delay: .2s
}
.mobile-menu.open nav a:nth-child(4) {
transition-delay: .26s
}
.mobile-menu.open nav a:nth-child(5) {
transition-delay: .32s
}
.mobile-menu.open nav a:nth-child(6) {
transition-delay: .38s
}
.mobile-menu.open nav a:nth-child(7) {
transition-delay: .44s
}
.mobile-menu nav a:active,
.mobile-menu nav a:hover {
color: var(--teal)
}
.mobile-menu .mm-foot {
margin-top: auto;
padding-top: 30px;
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--en);
font-size: 10px;
color: var(--ink-4);
letter-spacing: .2em;
position: relative;
z-index: 2
}
.mobile-menu .mm-foot a.cta-sm {
padding: 12px 20px;
border: 1px solid var(--teal);
color: var(--teal);
border-radius: 999px;
font-weight: 500
}
@media(max-width:900px) {
.nav .hamburger {
display: block
}
.nav .cta {
display: none
}
body.menu-open {
overflow: hidden
}
}
/* ---------- QR contact modal (Part 2) ---------- */
.cta-grid .cta-card {
cursor: pointer;
user-select: none
}
.modal-overlay {
position: fixed;
inset: 0;
z-index: 200;
background: rgba(3, 8, 14, .7);
backdrop-filter: blur(18px) saturate(1.4);
-webkit-backdrop-filter: blur(18px) saturate(1.4);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity .35s
}
.modal-overlay.open {
opacity: 1;
pointer-events: auto
}
.modal-overlay::before {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 225, 180, .04) 3px 4px);
pointer-events: none
}
.modal-overlay::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 100%;
background: linear-gradient(180deg, transparent 0%, rgba(0, 225, 180, .04) 50%, transparent 100%);
background-size: 100% 200%;
background-position: 0 -100%;
animation: modalScan 3s linear infinite;
pointer-events: none
}
@keyframes modalScan {
to {
background-position: 0 200%
}
}
.modal {
position: relative;
width: min(520px, 92vw);
padding: 48px 44px 40px;
background: linear-gradient(180deg, #0a1425 0%, #050912 100%);
border-radius: 20px;
transform: scale(.88) translateY(20px);
opacity: 0;
transition: all .5s cubic-bezier(.2, .8, .2, 1)
}
.modal-overlay.open .modal {
transform: none;
opacity: 1
}
.modal::before {
content: "";
position: absolute;
inset: 0;
border-radius: 20px;
padding: 1px;
background: linear-gradient(135deg, var(--teal), rgba(155, 124, 255, .5) 50%, var(--teal));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
animation: modalBorder 4s linear infinite
}
@keyframes modalBorder {
to {
filter: hue-rotate(360deg)
}
}
.modal .m-corner {
position: absolute;
width: 18px;
height: 18px;
border: 2px solid var(--teal);
box-shadow: 0 0 10px rgba(0, 225, 180, .6)
}
.modal .m-corner.tl {
top: -2px;
left: -2px;
border-right: 0;
border-bottom: 0
}
.modal .m-corner.tr {
top: -2px;
right: -2px;
border-left: 0;
border-bottom: 0
}
.modal .m-corner.bl {
bottom: -2px;
left: -2px;
border-right: 0;
border-top: 0
}
.modal .m-corner.br {
bottom: -2px;
right: -2px;
border-left: 0;
border-top: 0
}
.modal .m-close {
position: absolute;
top: 16px;
right: 16px;
width: 32px;
height: 32px;
border: 1px solid var(--line-2);
background: transparent;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
color: var(--ink-2);
cursor: pointer;
font-size: 16px;
transition: all .2s
}
.modal .m-close:hover {
border-color: var(--teal);
color: var(--teal);
transform: rotate(90deg)
}
.modal .m-eye {
font-family: var(--en);
font-size: 10px;
letter-spacing: .3em;
color: var(--teal);
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px
}
.modal .m-eye i {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--teal);
box-shadow: 0 0 10px var(--teal);
animation: pulse 1.8s infinite
}
.modal h4 {
font-family: var(--cn);
font-size: 28px;
font-weight: 600;
color: #fff;
margin-bottom: 6px;
line-height: 1.2
}
.modal .m-sub {
font-size: 13px;
color: var(--ink-3);
margin-bottom: 30px
}
.modal .qr-frame {
position: relative;
width: 220px;
height: 220px;
margin: 0 auto 24px;
padding: 14px;
background: #fff;
border-radius: 14px;
box-shadow: 0 0 40px rgba(0, 225, 180, .3), 0 0 0 1px rgba(0, 225, 180, .4);
overflow: hidden
}
.modal .qr-frame::before,
.modal .qr-frame::after {
content: "";
position: absolute;
inset: -2px;
border-radius: 14px;
pointer-events: none
}
.modal .qr-frame::before {
border: 1px solid var(--teal);
animation: qrPulse 2s ease-in-out infinite
}
@keyframes qrPulse {
0%,
100% {
opacity: .4;
transform: scale(1)
}
50% {
opacity: 1;
transform: scale(1.04)
}
}
.modal .qr-frame .qr-img {
width: 100%;
height: 100%;
object-fit: contain;
display: block
}
.modal .qr-frame .qr-placeholder {
width: 100%;
height: 100%;
background:
repeating-linear-gradient(0deg, #000 0 4px, #fff 4px 8px),
repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 8px);
background-blend-mode: multiply;
border-radius: 6px;
position: relative;
display: flex;
align-items: center;
justify-content: center
}
.modal .qr-frame .qr-placeholder::after {
content: "SCAN ME";
position: absolute;
bottom: 8px;
left: 50%;
transform: translateX(-50%);
background: #fff;
padding: 3px 10px;
font-family: var(--mono);
font-size: 9px;
letter-spacing: .2em;
color: #000
}
.modal .qr-corner {
position: absolute;
width: 22px;
height: 22px;
border: 2px solid var(--teal)
}
.modal .qr-corner.tl {
top: -6px;
left: -6px;
border-right: 0;
border-bottom: 0
}
.modal .qr-corner.tr {
top: -6px;
right: -6px;
border-left: 0;
border-bottom: 0
}
.modal .qr-corner.bl {
bottom: -6px;
left: -6px;
border-right: 0;
border-top: 0
}
.modal .qr-corner.br {
bottom: -6px;
right: -6px;
border-left: 0;
border-top: 0
}
.modal .qr-matrix {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
font-family: var(--mono);
font-size: 10px;
color: var(--teal);
opacity: .25
}
.modal .qr-matrix span {
position: absolute;
animation: qrMatrix linear infinite;
text-shadow: 0 0 6px var(--teal)
}
@keyframes qrMatrix {
to {
transform: translateY(260px)
}
}
.modal .m-contact {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 4px
}
.modal .m-contact .ct {
padding: 12px 14px;
border: 1px solid var(--line);
border-radius: 10px;
font-family: var(--mono);
font-size: 12px;
color: var(--ink-2);
display: flex;
flex-direction: column;
gap: 3px;
transition: all .2s
}
.modal .m-contact .ct:hover {
border-color: var(--teal);
background: rgba(0, 225, 180, .04)
}
.modal .m-contact .ct span {
font-family: var(--en);
font-size: 9px;
letter-spacing: .2em;
color: var(--teal)
}
.modal .m-tip {
margin-top: 18px;
text-align: center;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-4);
letter-spacing: .08em
}
.modal .m-tip b {
color: var(--teal);
font-weight: 500
}
@media(max-width:600px) {
.modal {
padding: 40px 24px 30px
}
.modal h4 {
font-size: 22px
}
.modal .qr-frame {
width: 180px;
height: 180px
}
}
/* ---------- section chromatic transition (V5) ---------- */
.ca-flash {
position: fixed;
inset: 0;
z-index: 88;
pointer-events: none;
opacity: 0;
mix-blend-mode: screen
}
.ca-flash.fire {
animation: caFire .35s ease-out
}
@keyframes caFire {
0% {
opacity: 0;
transform: translateX(0);
filter: blur(0)
}
30% {
opacity: .7;
transform: translateX(-6px);
filter: blur(.5px);
background: radial-gradient(ellipse at center, rgba(255, 107, 157, .4), transparent 60%)
}
60% {
opacity: .5;
transform: translateX(6px);
background: radial-gradient(ellipse at center, rgba(0, 225, 180, .4), transparent 60%)
}
100% {
opacity: 0;
transform: translateX(0)
}
}
/* ---------- finale word glitch enhancement (V6) ---------- */
.finale .bigword .w.glitching {
animation: wordGlitch .28s steps(3);
text-shadow: -2px 0 #FF6B9D, 2px 0 #00E1B4;
}
@keyframes wordGlitch {
0% {
transform: translate(0, 0) skewX(0)
}
30% {
transform: translate(-2px, 1px) skewX(-3deg)
}
60% {
transform: translate(3px, -1px) skewX(2deg)
}
100% {
transform: translate(0, 0) skewX(0)
}
}
/* ---------- stats live chart overlay (V9) ---------- */
.stats-chart {
position: absolute;
left: 50%;
top: 52%;
transform: translate(-50%, -50%);
width: min(900px, 88vw);
height: 140px;
pointer-events: none;
opacity: .45;
z-index: 2
}
/* ---------- wireframe easter egg mode (V15) ---------- */
body.wireframe {
filter: hue-rotate(20deg) contrast(1.2)
}
body.wireframe section,
body.wireframe .wrap,
body.wireframe .gcard {
background: transparent !important
}
body.wireframe * {
background-image: none !important;
background-color: transparent !important;
color: #00E1B4 !important;
border-color: #00E1B4 !important;
text-shadow: 0 0 4px rgba(0, 225, 180, .6) !important;
box-shadow: none !important
}
body.wireframe img {
filter: invert(1) hue-rotate(160deg) saturate(3)
}
body.wireframe::before {
content: "WIREFRAME MODE · [SPACE] TO EXIT";
position: fixed;
top: 16px;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
font-family: var(--mono);
font-size: 11px;
color: #00E1B4;
padding: 6px 14px;
border: 1px solid #00E1B4;
letter-spacing: .2em;
background: rgba(0, 0, 0, .7)
}
/* ---------- WebGL CSS fallback for hero (Q3) ---------- */
.hero.no-webgl #heroCanvas {
display: none
}
.hero.no-webgl .fallback-fx {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden
}
.hero.no-webgl .fallback-fx .blob {
position: absolute;
width: 50vmin;
height: 50vmin;
border-radius: 50%;
filter: blur(80px);
opacity: .6;
animation: blobFloat 18s ease-in-out infinite
}
.hero.no-webgl .fallback-fx .b1 {
background: radial-gradient(circle, var(--teal), transparent 60%);
top: 20%;
left: 30%
}
.hero.no-webgl .fallback-fx .b2 {
background: radial-gradient(circle, #9B7CFF, transparent 60%);
top: 50%;
left: 55%;
animation-delay: -6s
}
.hero.no-webgl .fallback-fx .b3 {
background: radial-gradient(circle, #FF6B9D, transparent 60%);
top: 30%;
left: 10%;
animation-delay: -12s
}
@keyframes blobFloat {
0%,
100% {
transform: translate(0, 0) scale(1)
}
33% {
transform: translate(8vmin, -4vmin) scale(1.1)
}
66% {
transform: translate(-6vmin, 6vmin) scale(.9)
}
}
/* ---------- mouse trail (V2) canvas ---------- */
.mouse-trail {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 85;
mix-blend-mode: screen
}
/* ---------- accessibility helpers ---------- */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 9999;
padding: 12px 18px;
background: var(--teal);
color: #001815;
font-family: var(--en);
font-size: 12px;
letter-spacing: .14em
}
.skip-link:focus {
left: 16px;
top: 16px
}
/* ---------- 懸浮聯(lián)系按鈕 ---------- */
.float-contact {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 150;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 18px;
border-radius: 999px;
border: 1px solid var(--teal);
background: rgba(3, 8, 14, .78);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
color: var(--teal);
font-family: var(--cn);
font-size: 13px;
font-weight: 500;
letter-spacing: .05em;
cursor: pointer;
box-shadow: 0 14px 40px -12px rgba(0, 225, 180, .45), 0 0 0 1px rgba(0, 225, 180, .2) inset;
transition: transform .3s cubic-bezier(.2, .7, .2, 1), opacity .3s, background .2s;
opacity: 0;
transform: translateY(12px) scale(.92);
pointer-events: none
}
.float-contact.show {
opacity: 1;
transform: none;
pointer-events: auto;
animation: floatPulse 2.8s ease-in-out infinite
}
.float-contact:hover {
background: var(--teal);
color: #001815;
transform: translateY(-2px) scale(1.02)
}
.float-contact[hidden] {
display: none
}
@keyframes floatPulse {
0%,
100% {
box-shadow: 0 14px 40px -12px rgba(0, 225, 180, .45), 0 0 0 0 rgba(0, 225, 180, .35)
}
50% {
box-shadow: 0 14px 40px -12px rgba(0, 225, 180, .7), 0 0 0 8px rgba(0, 225, 180, 0)
}
}
@media(max-width:600px) {
.float-contact {
right: 16px;
bottom: 16px;
padding: 10px 14px;
font-size: 12px
}
.float-contact svg {
width: 16px;
height: 16px
}
}
/* ======================================================
* MOBILE OVERHAUL · 移動端系統(tǒng)性適配
* ---------
* - 100vh → 100dvh 解決 iOS Safari 地址欄跳動
* - 緊湊 section padding
* - 超大字號 clamp 下調
* - tap target ≥44px
* - 大量 overlay/裝飾在移動端降級或隱藏
* ====================================================== */
@supports(height:100dvh) {
.hero {
height: 100dvh
}
.plans-sticky {
height: 100dvh
}
}
/* 平板 / 小桌面 (≤1024px) */
@media(max-width:1024px) {
section {
padding: 120px 32px;
min-height: auto
}
.platform,
.stats,
.pain,
.ai-fly,
.sysarch,
.market {
padding: 120px 32px
}
.finale {
padding: 180px 32px 72px
}
}
/* 手機 (≤768px) —— 核心移動端布局 */
@media(max-width:768px) {
/* 通用:section 間距大幅壓縮 */
section {
padding: 72px 20px;
min-height: auto
}
.platform,
.stats,
.pain,
.ai-fly,
.sysarch,
.market,
.scenarios,
.who,
.timeline,
.compat,
.plans,
.roles {
padding: 72px 20px
}
.wrap {
padding: 0
}
/* nav */
.nav {
padding: 12px 16px
}
.nav .brand .mark {
width: 64px;
height: 64px
}
/* Hero:用 100dvh 避免地址欄跳動,min-height 去掉 */
.hero {
height: 100dvh;
min-height: 560px
}
.hero-inner {
padding: 92px 20px 56px;
gap: 20px;
justify-content: space-between
}
.hero h1 {
font-size: clamp(32px, 8.6vw, 48px);
line-height: 1.1;
letter-spacing: -.01em
}
.hero h1 br {
display: none
}
.hero .badge {
font-size: 10px;
padding: 7px 12px;
gap: 8px
}
.hero .badge span:not(.live):not(.en):not(.sep) {
display: none
}
.hero .badge .en {
font-size: 10px
}
.hero .badge b {
font-size: 11px
}
.hero .subtitle {
font-size: 11px;
gap: 8px;
flex-wrap: wrap
}
.hero .subtitle .zh {
font-size: 12px
}
.hero .ctas {
flex-direction: column;
align-items: stretch;
gap: 10px;
margin-top: 28px
}
.hero .ctas .btn {
justify-content: center;
padding: 14px 22px;
font-size: 14px
}
.hero .meta-row {
flex-wrap: wrap;
gap: 14px;
font-size: 9.5px
}
.hero .meta-row .col {
flex: 1 1 48%;
min-width: 0
}
.hero .meta-row .col b {
font-size: 11px
}
.hero .scroll-hint {
bottom: 14px;
font-size: 9px
}
/* 標題層級整體縮小 */
.h-title {
font-size: clamp(26px, 6.8vw, 40px);
line-height: 1.18
}
.eyebrow {
font-size: 10px;
letter-spacing: .18em;
margin-bottom: 20px;
flex-wrap: wrap
}
.lead {
font-size: 15px;
line-height: 1.6;
margin-top: 18px
}
/* WHO */
.who .ln {
padding: 20px 0;
flex-direction: column;
align-items: flex-start;
gap: 6px
}
.who .ln .txt {
font-size: clamp(20px, 5.2vw, 28px)
}
.who .ln:nth-child(even) {
padding-left: 0
}
/* Scenarios 兩大場景卡 */
.scenarios .col {
padding: 28px 22px;
min-height: auto
}
.scenarios .col h3 {
font-size: 26px
}
.scenarios .col p.sub {
font-size: 13px
}
.scenarios .viz {
min-height: 180px
}
/* PAIN 表格:2 列簡版 */
.pain .row {
padding: 20px 12px;
gap: 8px
}
.pain .row .pain-txt,
.pain .row .solve-txt {
font-size: 15px
}
/* Timeline 時間線 */
.timeline .track {
margin-top: 40px
}
.timeline .cell {
padding: 24px 20px
}
.timeline .cell h3 {
font-size: 18px
}
.timeline .cell .count .big {
font-size: 32px
}
/* Platform */
.platform .hub {
padding: 20px 24px;
gap: 18px
}
.platform .hub-stat b {
font-size: 28px
}
.platform .duo {
margin-top: 40px
}
.platform .side {
padding: 28px 22px;
min-height: auto
}
.platform .side-head h3 {
font-size: 18px
}
.platform .caps li {
padding: 12px 0 12px 42px
}
.platform .caps li .num {
font-size: 10px;
padding: 2px 6px
}
.platform .caps li b {
font-size: 14px
}
.platform .features {
margin-top: 40px;
padding: 28px 20px
}
.platform .features-head h3 {
font-size: 22px
}
.platform .cadence {
padding: 14px 18px;
gap: 18px
}
.platform .cad-block b {
font-size: 20px
}
.platform .feat-row {
grid-template-columns: 1fr 1fr;
row-gap: 6px
}
.platform .feat-tag {
grid-column: 1/-1;
font-size: 13px;
padding: 2px 4px 4px
}
.platform .feat {
padding: 14px 8px;
font-size: 12px
}
.platform .fl-pill {
font-size: 12px;
padding: 7px 12px
}
/* Middleware (venue + code) */
.middleware .split {
gap: 24px
}
.middleware .viz-box {
min-height: 340px
}
.middleware pre {
font-size: 11px;
line-height: 1.7;
padding: 16px
}
.middleware .cards3 {
margin-top: 28px
}
.middleware .cards3 .gcard {
padding: 22px;
min-height: auto
}
.middleware .kicker {
font-size: clamp(18px, 4vw, 24px)
}
/* Compat */
.compat .logos-track .plat {
padding: 14px 22px;
font-size: 14px
}
.compat .mode {
padding: 30px 24px
}
.compat .mode h4 {
font-size: 20px
}
/* Stats 大數(shù)字 */
.stats {
padding: 80px 20px
}
.stats .stat {
padding: 32px 12px
}
.stats .stat .plus {
font-size: clamp(72px, 18vw, 120px);
line-height: .95
}
.stats .stat .unit {
font-size: 17px
}
.stats .stat .desc {
font-size: 13px
}
.stats-chart {
width: 92vw;
height: 100px;
top: 50%
}
/* Plans:小屏強制線性堆疊,去掉 sticky,去掉 stage 高度 */
.plans-stage {
height: auto !important
}
.plans-sticky {
position: relative !important;
top: 0;
height: auto;
padding: 0;
overflow: visible;
display: block
}
.plans .plans-head {
margin-bottom: 28px;
flex-direction: column;
align-items: stretch;
gap: 16px
}
.plans .plans-head .kicker {
font-size: clamp(22px, 5.6vw, 30px)
}
.plans .plans-progress {
display: none
}
.plans-split {
grid-template-columns: 1fr;
gap: 28px;
align-items: stretch
}
.plans-left {
padding-top: 0
}
.plans-nav {
flex-direction: row;
overflow-x: auto;
gap: 8px;
padding-bottom: 8px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none
}
.plans-nav::-webkit-scrollbar {
display: none
}
.plans-nav .pn {
flex-direction: row;
align-items: center;
gap: 10px;
padding: 12px 16px;
border: 1px solid var(--line);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
border-radius: 999px;
min-width: auto;
flex: none;
opacity: .6
}
.plans-nav .pn.active {
opacity: 1;
border-color: var(--pc);
background: color-mix(in srgb, var(--pc) 10%, transparent)
}
.plans-nav .pn .nm {
font-size: 13px
}
.plans-right {
min-height: auto;
position: relative
}
.plans-slide {
position: relative !important;
inset: auto !important;
opacity: 1 !important;
transform: none !important;
pointer-events: auto !important;
margin-bottom: 48px;
padding: 24px 22px;
border: 1px solid var(--line);
border-radius: 16px;
background: rgba(255, 255, 255, .012)
}
.plans-slide::before {
font-size: 120px !important;
right: -4px;
top: -8px;
opacity: .35
}
.plans-slide h3 {
font-size: clamp(24px, 5.6vw, 32px);
margin: 16px 0 12px
}
.plans-slide .lead {
font-size: 14px
}
.plans-slide .grid-sub {
grid-template-columns: 1fr;
margin-top: 20px;
gap: 0
}
.plans-slide .hero-num .n {
font-size: clamp(72px, 18vw, 110px)
}
.plans-slide .stats-row {
flex-wrap: wrap;
gap: 16px;
margin: 16px 0 20px;
padding: 16px 0
}
.plans-slide .stats-row .s b {
font-size: 26px
}
.plans-ruler {
display: none
}
.plans-hint {
display: none
}
/* Roles */
.roles .grid {
gap: 12px
}
.roles .gcard {
padding: 24px 20px;
min-height: auto
}
.roles .gcard h4 {
margin-top: 40px;
font-size: 20px
}
/* System Architecture */
.sysarch {
padding: 72px 20px 80px
}
.sys-node {
min-width: auto;
padding: 18px 20px
}
.sys-node .n-hd b {
font-size: 16px
}
.core-card {
padding: 26px 22px
}
.core-head {
flex-direction: column;
align-items: flex-start;
gap: 12px
}
.core-stats {
margin-left: 0;
gap: 18px
}
.core-zh {
font-size: 18px
}
.sys-flow {
min-height: 32px;
gap: 20px
}
.sys-flow .arr {
height: 28px
}
/* AI Flywheel */
.ai-fly .text-side h3 {
font-size: clamp(22px, 5.4vw, 30px)
}
.ai-fly .diag {
max-width: 360px
}
/* Market */
.market .stats-grid {
margin-top: 32px
}
.market .stat-cell {
padding: 28px 22px;
min-height: auto
}
.market .stat-cell .num {
font-size: clamp(44px, 11vw, 68px)
}
/* Finale:電影級但不撐破小屏 */
.finale {
padding: 140px 20px 60px
}
.finale .screen-frame {
top: 130px;
width: min(560px, 92vw);
aspect-ratio: 16/7
}
.finale .bigword {
font-size: clamp(32px, 9.2vw, 56px);
line-height: 1.18;
white-space: normal
}
.finale .bigword .line {
white-space: normal;
display: block
}
.finale .bigword .w.gap {
width: .25em
}
.finale .en-sub {
font-size: 11px;
letter-spacing: .22em;
margin-top: 24px
}
.finale .credit-reel {
margin-top: 60px;
gap: 10px
}
.finale .cr-brand {
font-size: 17px
}
.finale .cr-brand.tiny {
font-size: 12px
}
.finale .cta-grid {
margin-top: 56px;
gap: 10px
}
.finale .cta-card {
padding: 24px 22px
}
.finale .cta-card h5 {
font-size: 22px
}
.finale .cta-card::after {
bottom: 24px;
right: 22px;
font-size: 18px
}
.finale footer {
margin-top: 60px;
flex-direction: column;
gap: 12px;
text-align: center;
line-height: 1.8
}
.finale footer .l,
.finale footer .r {
flex-wrap: wrap;
justify-content: center;
gap: 10px
}
.finale-film-strip {
width: 16px;
background-size: 16px 40px;
background-image: repeating-linear-gradient(180deg, transparent 0 18px, rgba(255, 255, 255, .1) 18px 22px, transparent 22px 40px)
}
.finale-leader .num {
font-size: clamp(96px, 26vw, 180px)
}
/* QR Modal */
.modal {
padding: 32px 22px 26px;
width: min(460px, 94vw)
}
.modal h4 {
font-size: 22px
}
.modal .qr-frame {
width: 180px;
height: 180px
}
.modal .m-contact {
grid-template-columns: 1fr
}
.modal .m-close {
width: 36px;
height: 36px;
top: 12px;
right: 12px
}
/* Float contact button: ≥44px tap target */
.float-contact {
right: 14px;
bottom: 14px;
padding: 12px 16px;
font-size: 13px;
min-height: 44px
}
/* Mobile menu 內項目 ≥44px */
.mobile-menu nav a {
padding: 16px 0;
min-height: 44px;
font-size: 22px
}
.mobile-menu .mm-rain {
display: none
}
/* 數(shù)字雨在小屏完全省掉,減少 GPU */
/* 隱藏裝飾性 scroll-line 在太小屏 */
.hero .scroll-hint {
display: none
}
}
/* 超窄屏 (≤420px) —— iPhone SE / 老安卓 */
@media(max-width:420px) {
section {
padding: 56px 16px
}
.hero-inner {
padding: 84px 16px 48px
}
.hero h1 {
font-size: clamp(30px, 8.4vw, 40px)
}
.stats .stat .plus {
font-size: clamp(64px, 20vw, 96px)
}
.h-title {
font-size: clamp(24px, 7vw, 32px)
}
.finale .bigword {
font-size: clamp(28px, 9vw, 44px)
}
.finale .cta-card {
padding: 22px 18px
}
.modal .qr-frame {
width: 150px;
height: 150px
}
.modal h4 {
font-size: 20px
}
.platform .feat {
font-size: 11.5px;
padding: 12px 6px
}
.plans-slide {
padding: 22px 18px
}
.nav .brand .mark {
width: 52px;
height: 52px
}
}
/* 橫屏低高度(如 iPhone SE 橫屏) */
@media(max-height:500px) and (orientation:landscape) {
.hero {
height: auto;
min-height: 500px;
padding: 80px 20px 40px
}
.hero-inner {
padding: 20px;
gap: 16px
}
.boot {
padding: 20px
}
.mobile-menu {
padding: 60px 24px 24px
}
}
/* ---------- 折疊屏 / 超窄屏兜底(<480px) ---------- */
@media(max-width:480px) {
.nav {
padding: 12px 14px
}
.nav .brand .mark {
width: 56px;
height: 56px
}
section {
padding: 100px 20px
}
.h-title {
font-size: clamp(30px, 8vw, 44px)
}
.hero-inner {
padding: 88px 18px 48px
}
.hero h1 {
font-size: clamp(36px, 10vw, 60px)
}
.hero .meta-row {
flex-wrap: wrap;
gap: 16px;
font-size: 10px
}
.hero .meta-row .col {
flex: 1 1 48%
}
.hero .ctas {
flex-direction: column;
align-items: stretch;
gap: 10px
}
.hero .ctas .btn {
justify-content: center
}
.finale {
padding: 160px 16px 56px
}
.finale .bigword {
font-size: clamp(34px, 11vw, 64px);
line-height: 1.15
}
.finale .bigword .line {
white-space: normal
}
.finale .cta-card {
padding: 26px 20px
}
.mobile-menu nav a {
font-size: 22px;
padding: 14px 0
}
.modal {
padding: 32px 18px 24px
}
.modal .qr-frame {
width: 160px;
height: 160px
}
}
/* honor reduced motion but keep base atmosphere (only kill heavy loops) */
@media (prefers-reduced-motion:reduce) {
.boot {
display: none
}
.mm-rain,
.modal-overlay::after {
display: none
}
}
跳到主內容
INSITPACE · XR CINEMA OS · v2.6
INSITPACE / XR CINEMA OS
//
v2.6 · BEIJING
BIFF
北京國際電影節(jié)
·
無界∞沉浸
·
技術支持單位 2026
AI + XR
AI 驅動的 XR 院線平臺
與產業(yè)技術服務商
院線技術平臺
·
空間智能中間件
·
內容發(fā)行與票務
·
XR 程序化廣告
SCROLL
ABOUT US·我們是誰
我們不做設備,也不獨占內容。
我們做的,是 XR 院線的基礎設施。
01 / 04
我們不做設備,我們讓設備更有價值。
02 / 04
我們不獨占內容,我們讓內容流動。
03 / 04
我們不是影院,我們是 XR 院線的基礎設施。
04 / 04
我們相信 XR 還有未來——并愿意做最穩(wěn)的那塊基石。
PAIN → SOLUTION·行業(yè)痛點 → 我們的解法
行業(yè)有 六個痛點,
我們一一給出了答案。
THE PAIN · 行業(yè)痛點OUR
ANSWER · 我們的解法
01播控系統(tǒng)封閉跨引擎統(tǒng)一播控平臺——UE / Unity 一體機 / 串流全適配
02場地異構 · 部署成本高AI 空間語義引擎——場地掃描 → 自動標注 → 部署時間由周→小時
03多內容同場路線沖突AI 自動排版引擎——多內容 × 多場地自動適配,軟引導防沖突
04行業(yè)標準缺失SDK 標準化接入——三級接入(基礎 1 天 / 標準 3 天 / 深度可選)
05缺乏發(fā)行票務平臺大眼企鵝票務 · XR 院線發(fā)行——覆蓋全國主要城市
06無廣告變現(xiàn)通路XR 廣告 SDK · 程序化購買——植入 XR 內容 · RTB 競價 · AI
定向
FOR THE INDUSTRY·為行業(yè)做了什么
三年時間,我們打通了
XR 院線的全鏈條。
從內容高效生產,到平臺分發(fā)、發(fā)行票務、院線放映——我們用技術與平臺,把分散的環(huán)節(jié)串成閉環(huán)。
01 · STANDARD
標準參與
行業(yè)標準核心技術提供方;參與起草 XR 院線相關技術規(guī)范與合規(guī)標準。
STD · A
STD · B
CTTQ
NRTA
04項參與
起草/評審
02 · FILM FESTIVAL
電影節(jié)合作
金雞獎 XR 單元、北京國際電影節(jié)「無界∞沉浸」技術服務商。
BIFF ·26
GOLDEN ROOSTER
XR UNIT
CN FFA
06屆/場
電影節(jié)技術服務
03 · CULTURE × MEDIA
文旅與廣電
服務河南廣電奧映、山東、上海、陜西、山西等多地文旅與廣電項目。
HE · OYING
SD CULTURE
SH XR
SX · SHANXI
12省市級
文旅/廣電項目
04 · ORIGINAL
自有內容
獨立 XR 內容制作能力,具備 UE / Unity 雙引擎、行進式與坐觀式制作經(jīng)驗。
TITLE · 01
TITLE · 02
TITLE · 03
TITLE · 04+
05+自制作品
持續(xù)更新
ALL SCENARIOS·全場景支持
行進式、坐觀式,
我們都支持。
無論是大空間自由探索,還是影院級沉浸觀影——一套平臺全部覆蓋,跨內容、跨平臺、跨硬件、跨引擎、同場播控。
WALKING EXPERIENCE
行進式 LBE · 大空間
多人自由探索,實時位置追蹤、路徑規(guī)劃、碰撞預警、動線編排。
S6 × 8 m
M8 × 10 m
L12 × 16 m
每 3 – 5 ㎡ / 1 觀眾
多人組隊碰撞預警動線編排同場播控
SEATED THEATER
坐觀式 XR 影院
復用傳統(tǒng)影院資產,多設備同步,影廳環(huán)境聯(lián)動——把影院的儀式感搬進 XR。
MDM多設備管理
SYNC音響同步
ENV影廳聯(lián)動
單場覆蓋 5 – 200 席
音響同步影廳播控排片系統(tǒng)高保真音畫
SYSTEM ARCHITECTURE·系統(tǒng)架構 · 全產業(yè)鏈打通
一張圖,
看清從監(jiān)管到終端的每一層。
從專資監(jiān)管、內容方接入,到平臺核心服務、運營商/代理商協(xié)同,再到各類硬件與運營形態(tài)——
這是一條真實跑通的產業(yè)鏈路。
A · REGULATION · 監(jiān)管
B · PARTNERS · 合作方
運營商 / 代理商OPERATORS · DOWNSTREAM
總部連鎖單店自營聯(lián)營代理
C · CORE PLATFORM · 遙在 XR 院線平臺
INSITPACE · XR CINEMA CORE
遙在 XR 院線應用平臺
6大平臺
12系統(tǒng)模塊
數(shù)百項功能
01票務系統(tǒng)大眼企鵝票務
02場地管理單店·連鎖·總部
03播控系統(tǒng)遠程推送·設備監(jiān)聽
04財務系統(tǒng)訂單·對賬·分賬
05營銷分發(fā)私域·分銷·優(yōu)惠券
06數(shù)據(jù)看板營業(yè)·行為·評估
D · HARDWARE · 終端硬件
PICO一體機
QuestMeta
HTCVive
AppleVision Pro
PC VR串流
OEM定制硬件
SPATIAL MIDDLEWARE·空間智能中間件
M × N 的適配難題,
我們用一層中間件解決。
M 個內容 × N 個場地 × K 種硬件。不重復適配、不綁死引擎——一次接入,全網(wǎng)可跑。
VENUE · L · 12×16m
TRACKING drift ≤ 3mm
PLAYERS 18 / 24
LATENCY 8ms
60 FPS · RTT 12ms
PLAYER · 07
ANCHOR · A3
PATH · LOOP
insitpace_sdk.ts
~/platform/middleware
// Insitpace Spatial Middleware · SDK v2.6
// One integration, every venue, every headset.
import { Venue, Content } from '@insitpace/core';
const venue = await Venue.connect({
id: 'VEN-BJ-01',
size: { w: 12, h: 16 },
anchors: 4,
});
const film = await Content.load('xr://title/INFINITY');
venue.warp(film, {
driftCorrection: 'predictive', // 追蹤漂移預測性修正
coPresence: 'multi-user', // 多人位置預測補償
contentMap: 'auto', // 內容地圖自動變形
});
await venue.sync(24).play(film);
◎
追蹤漂移預測性修正
動態(tài)補償 inside-out 追蹤的長時漂移,保證多小時體驗下的位置一致性。
?
多人位置預測補償
多人同場下的位置預測與碰撞前置,毫秒級同步,消除"假影"錯位。
?
內容地圖自動變形
一份內容 → 任意尺寸場地;AI 空間語義 + 自動排版,部署時間從周級壓到小時級。
M × N 的適配難題,我們用一層中間件解決。
AI+ STRATEGY·AI+ 戰(zhàn)略
對內降本增效 · 對外能力輸出
構建 數(shù)據(jù)壁壘。
AI 貫穿創(chuàng)作 / 制作 / 發(fā)行 / 運營 / 營銷全流程——同時我們把核心能力打包成 SDK 對外輸出,形成雙飛輪。
雙飛輪驅動,
數(shù)據(jù)與規(guī)模 互相成就。
WHEEL 01
空間智能飛輪
場地越多 → 空間 AI 越精準 → 部署成本越低 → 吸引更多場地。
WHEEL 02
內容智能飛輪
內容方越多 → AI 創(chuàng)作工具越智能 → 吸引更多創(chuàng)作者 → 內容生態(tài)更繁榮。
EXPORT
對外能力輸出
空間語義引擎 · 自動排版 · NPC 交互 · 體驗評估 · 低代碼 · AI 審核 · 營銷工具——可按 SaaS / SDK / 接口 三種模式輸出。
COMPATIBILITY·全平臺兼容
跨內容 · 跨引擎 · 跨硬件,
一次接入,觸達全網(wǎng)。
主流頭顯全覆蓋,三種接入方式按場景自由組合。
MODE 01 · 一體機原生
Standalone Native
直接在頭顯一體機上運行,適合小場地、輕量化部署、快速落地。
MODE 02 · PCVR 有線
PCVR Wired
PC 算力驅動重體驗內容,畫質與幀率上限最高,適合旗艦影廳。
MODE 03 · 串流
Wireless Streaming
PC 算力 + 一體機自由度。主推接入方式,復用 PC 體驗 / 支持多人大空間、無線穿梭。
TRACTION·我們的成績
做完今天,
已經(jīng)走得足夠遠。
平臺、空間、內容——三組真實的數(shù)字,支撐我們面對下一階段。
0+
累計服務 XR 空間
覆蓋院線級影院、商業(yè)體、主題展、文旅空間——覆蓋一二三線城市,多種運營形態(tài)并行。
0+
累計服務內容
匯聚國內主流 XR 內容方,影片庫持續(xù)擴充——覆蓋敘事、紀錄、親子、沉浸演藝等品類。
WHAT'S NEXT·下一步 · 五大計劃
做完今天,更要做好明天。
PLAN · 01
AI 制作AI 發(fā)行
AI+ 計劃
用 AI 重塑生產與發(fā)行。
六項 AI 核心能力,貫穿內容生產、場地部署、發(fā)行決策、用戶運營全鏈路。降本、增效、可規(guī)模化復制。
01 · SEMANTIC
AI 空間語義
場地掃描 · 自動標注 · 動線規(guī)劃
02 · WARP
自動排版引擎
多內容 × 多場地 AI 自適配
03 · DISTRIBUTION
AI 輔助發(fā)行決策
內容評估 · 場地匹配 · 排片建議
04 · MARKETING
AI 營銷素材生成
海報 · 短視頻 · 文案自動生成
05 · NPC
NPC 實時交互
LLM 驅動 · 空間感知 · 動態(tài)敘事
06 · EVAL
體驗質量評估
行為分析 · 沉浸度判斷
PLAN · 02
坐觀影院級
坐觀式增強計劃
把影院級體驗,做到極致。
把傳統(tǒng)影院的「儀式感」搬進 XR——更適合坐觀場景的運營流程與感官體驗。
01 · AUDIO SYNC
影院音響同步
頭顯與場內音響精準同步,還原影院級聲場
02 · OPS
坐觀運營優(yōu)化
排片 · 入場 · 觀影 · 離場 全流程適配
03 · PLAYBACK
多設備同場播控
數(shù)十臺設備同步開播 · 零延遲統(tǒng)一節(jié)奏
04 · ENV
影廳環(huán)境聯(lián)動
燈光 · 座椅 · 環(huán)境特效與內容協(xié)同
PLAN · 03
流量扶持聯(lián)合未來視界
XR 影院流量扶持
讓每一家場館,都不缺人氣。
+30%
運營場所線上流量提升預期
聯(lián)合未來視界,為運營場所引流
01 · PARTNER
聯(lián)合未來視界
強勢內容方與渠道資源整合
02 · ONLINE
線上流量入口
短視頻 · 小程序 · 社交平臺多入口曝光
03 · FUNNEL
線上→線下→復購
線上引流 → 線下到店 → 復購轉化
04 · MEMBER
私域沉淀
會員體系 · 社群運營 · 復購引導
PLAN · 04
程序化廣告 SDK
XR 媒介變現(xiàn)計劃
把 XR 空間,變成下一代媒介。
團隊源自前京東鉬媒核心——國內最大線下媒體程序化購買平臺。把經(jīng)過億級終端驗證的變現(xiàn)模型,搬進 XR 空間。
160萬+接入終端
¥15 億年廣告銷售額
RTB程序化競價
01 · SDK
空間廣告 SDK
植入 XR 內容程序 · 沉浸式品牌體驗
02 · RTB
程序化購買
RTB 競價 · AI 定向投放
03 · LOOP
數(shù)據(jù)閉環(huán)
觀眾行為 → 投放優(yōu)化 → 變現(xiàn)回流
04 · ATTR
效果歸因
曝光-到店-轉化 三段式歸因追蹤
PLAN · 05
共擔風險新人扶持
優(yōu)質內容投資計劃
讓好內容更快被看見。
不只做平臺,也做內容的助推器——內容繁榮 = 平臺繁榮。
01 · CO-PROD
聯(lián)合出品
與頭部內容方共擔風險 · 共享收益
02 · PROMO
宣發(fā)資源置換
平臺流量與發(fā)行渠道資源支持
03 · MGR
保底分賬激勵
為優(yōu)質內容提供保底收益保障
04 · FUND
新人扶持基金
孵化 XR 原創(chuàng)團隊 · 培育下一代創(chuàng)作者
SCROLL
OUR COMMITMENT·我們的承諾
服務 XR 電影行業(yè),
打磨產業(yè)基石。
不與內容方爭利、不與運營方搶生意——只做支撐全行業(yè)的底層平臺與工具。
① STANDARD
標準參與者
參與起草與評審 XR 院線相關技術規(guī)范與行業(yè)標準。
② TECH SERVICE
技術服務方
空間智能中間件、多設備播控、MDM——跨硬件跨引擎全鏈路工具。
③ PLATFORM
平臺運營者
六大平臺、十二模塊,從內容接入到分賬結算,運轉一整條院線。
④ PEER
行業(yè)同行者
聯(lián)合內容方、運營方、渠道方、監(jiān)管方,把所有人連到一起。
FOR CREATORS · 內容方合作
掃碼即可對接
微信掃一掃,直接對接對應商務負責人。
長按圖片可保存 · 或Esc關閉