.creator-stage{
  position: relative;

  overflow: hidden;

  margin-top: 60px;

  width: 100%;
}

.creator-placeholder img{
  width: 100%;
  height: auto;

  display: block;

  object-fit: cover;

  transform: scale(1.08);

  filter:
    brightness(.84)
    saturate(1.08);

  transition:
    transform 2s ease,
    filter 1.5s ease;
}
.creator-panel{
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: auto;

  display: flex;
  gap: 70px;

  align-items: flex-start;

  opacity: 0;
  pointer-events: none;

  transform:
    translateX(120px)
    scale(.95)
    rotateY(-8deg);

  filter:
    blur(18px);

  transition:
    transform 1s cubic-bezier(.22,.61,.36,1),
    opacity .9s ease,
    filter .9s ease;
}

/* ===== 当前 ===== */

.creator-panel.active{
  opacity: 1;
  pointer-events: auto;

  transform:
    translateX(0)
    scale(1)
    rotateY(0);

  filter:
    blur(0);

  z-index: 3;
}

/* ===== 离场 ===== */

.creator-panel.leave{
  opacity: 0;

  transform:
    translateX(-180px)
    scale(.92)
    rotateY(10deg);

  filter:
    blur(24px);

  z-index: 1;
}

/* ===== 进入 ===== */

.creator-panel.enter{
  opacity: 0;

  transform:
    translateX(180px)
    scale(.94)
    rotateY(-10deg);

  filter:
    blur(20px);
}

/* ===== 左侧视觉 ===== */

.creator-visual{
  width: 58%;

  position: relative;
}

/* 图片容器 */

.creator-placeholder{
  overflow: hidden;

  border-radius: 34px;

  position: relative;
}

/* 图片 */

.creator-placeholder img{
  width: 100%;
  height: 100%;

  object-fit: cover;

  transform: scale(1.08);

  filter:
    brightness(.84)
    saturate(1.08);

  transition:
    transform 2s ease,
    filter 1.5s ease;
}

/* 当前激活 */

.creator-panel.active .creator-placeholder img{
  transform: scale(1);

  filter:
    brightness(1)
    saturate(1.12);
}

/* ===== 右侧文案 ===== */

.creator-copy{
  flex: 1;
}

/* meta */

.creator-meta{
  font-size: 13px;
  letter-spacing: 4px;

  text-transform: uppercase;

  color:
    rgba(212,175,55,.75);

  margin-bottom: 24px;
}

/* 标题 */

.creator-copy h3{
  font-size: 42px;
  line-height: 1.5;

  margin-bottom: 28px;
}

/* 正文 */

.creator-copy p{
  line-height: 2;

  color:
    rgba(255,255,255,.72);

  margin-bottom: 24px;
}

/* ===== 标签 ===== */

.creator-tags{
  position: absolute;

  left: 30px;
  bottom: 30px;

  display: flex;
  gap: 14px;

  flex-wrap: wrap;
}

.creator-tags span{
  padding:
    10px 18px;

  border-radius: 999px;

  background:
    rgba(0,0,0,.45);

  border:
    1px solid rgba(255,255,255,.08);

  backdrop-filter:
    blur(12px);

  font-size: 13px;

  color:
    rgba(255,255,255,.88);
}

/* ===== note ===== */

.creator-note{
  margin-top: 30px;

  padding: 28px;

  border-radius: 28px;

  background:
    rgba(255,255,255,.03);

  border:
    1px solid rgba(255,255,255,.06);

  backdrop-filter:
    blur(12px);
}

/* ===== tabs ===== */

.creator-tabs{
  display: flex;
  gap: 16px;

  flex-wrap: wrap;
}

/* tab */

.creator-tab{
  position: relative;

  padding:
    14px 28px;

  border-radius: 999px;

  border:
    1px solid rgba(255,255,255,.08);

  background:
    rgba(255,255,255,.03);

  color: #fff;

  cursor: pointer;

  overflow: hidden;

  transition:
    transform .3s ease,
    background .4s ease,
    border-color .4s ease;
}

/* hover */

.creator-tab:hover{
  transform: translateY(-2px);
}

/* 当前 */

.creator-tab.active{
  background:
    rgba(212,175,55,.14);

  border-color:
    rgba(212,175,55,.35);

  color:
    #f6d365;
}

/* 金色流光 */

.creator-tab::after{
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      120deg,
      transparent,
      rgba(255,255,255,.22),
      transparent
    );

  transform:
    translateX(-120%);

  transition:
    transform .9s ease;
}

.creator-tab.active::after{
  transform:
    translateX(120%);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:120px;-ms-overflow-style:none;scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:root{
--font-sans:"PingFang SC","SF Pro Text","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",sans-serif;
--font-display:"PingFang SC","SF Pro Display","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",sans-serif;
--text-label:12px;
--text-body:17px;
--text-body-large:18px;
--text-title:clamp(2.4rem,4.4vw,4.4rem);
--text-hero:clamp(3rem,5.8vw,5.8rem);
--text-card:clamp(1.85rem,2.45vw,2.45rem);
}
body{
font-family:var(--font-sans);
background:#07110f;
color:#fff;
overflow-x:hidden;
cursor:default;
line-height:1.72;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
}
[id]{scroll-margin-top:120px}
a:focus-visible,button:focus-visible{
outline:1px solid rgba(198,168,106,.72);
outline-offset:4px;
}

/* 鼠标跟踪高光效果 */
.cursor-glow{
position:fixed;
width:500px;
height:500px;
background:radial-gradient(circle,rgba(198,168,106,0.1),transparent 65%);
pointer-events:none;
z-index:0;
filter:blur(50px);
transform:translate(-50%,-50%);
transition:opacity 0.3s ease;
opacity:0;
}

body::before{
content:"";
position:fixed;
inset:0;
background:
radial-gradient(circle at 20% 20%,rgba(198,168,106,.08),transparent 25%),
radial-gradient(circle at 80% 30%,rgba(111,168,154,.08),transparent 25%),
linear-gradient(to bottom,#081511,#0d221d,#07110f);
z-index:-3;
}
/* body bg → common.css */







.hero{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:120px 20px;
position:relative;
overflow:hidden;
}
.hero-light{
position:absolute;
width:900px;
height:900px;
background:radial-gradient(circle,rgba(198,168,106,.15),transparent 60%);
filter:blur(20px);
animation:float 12s ease-in-out infinite;
}
.hero-content{
position:relative;
z-index:2;
max-width:980px;
}
.small{
color:rgba(198,168,106,.55);
letter-spacing:.18em;
margin-bottom:18px;
text-transform:uppercase;
font-size:var(--text-label);
font-weight:500;
opacity:.88;
}
h1{
font-family:var(--font-display);
font-size:var(--text-hero);
font-weight:300;
line-height:1.1;
letter-spacing:-.02em;
background:linear-gradient(to right,#f9e6c3,#C6A86A);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.desc{
margin-top:32px;
color:rgba(255,255,255,.6);
line-height:1.75;
font-size:var(--text-body-large);
max-width:35em;
}
.enter{
display:inline-flex;
align-items:center;
justify-content:center;
margin-top:0;
padding:18px 38px;
min-height:58px;
font-size:15px;
letter-spacing:.08em;
font-weight:500;
border-radius:999px;
position:relative;
overflow:hidden;
border:1px solid rgba(198,168,106,.25);
background:rgba(255,255,255,.04);
backdrop-filter:blur(24px) saturate(140%);
color:#C6A86A;
cursor:pointer;
text-decoration:none;
box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
transition:transform .5s cubic-bezier(.25,1.2,.5,1),box-shadow .5s ease,border-color .4s ease;
}
.enter::before{
content:"";
position:absolute;
top:0;left:-120%;
width:80%;height:100%;
background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);
transform:skewX(-25deg);
transition:left .8s ease;
z-index:2;
pointer-events:none;
}
.enter:hover{
transform:translateY(-3px);
border-color:rgba(198,168,106,.4);
box-shadow:0 20px 50px rgba(198,168,106,.12),inset 0 1px 0 rgba(255,255,255,.10);
}
.enter:hover::before{left:130%}
.enter:active{transform:scale(.97)}
.enter-secondary{
background:rgba(111,168,154,.08);
border-color:rgba(111,168,154,.25);
color:#d8ebe6;
}
.section{
padding:140px 8%;
position:relative;
}
.section-head{
display:grid;
gap:18px;
margin-bottom:56px;
}
.title{
font-family:var(--font-display);
font-size:var(--text-title);
font-weight:300;
margin-bottom:24px;
line-height:1.14;
letter-spacing:-.02em;
background:linear-gradient(to right,#f7e6c8,#C6A86A);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.text{
max-width:940px;
line-height:1.75;
color:rgba(255,255,255,.6);
font-size:var(--text-body);
}
.fade{
opacity:0;
filter:blur(4px);
transform:translate3d(0,30px,0);
transition:opacity .8s cubic-bezier(.25,1.2,.5,1),transform .9s cubic-bezier(.25,1.2,.5,1),filter .7s ease;
will-change:auto;
}
.fade.animating{will-change:opacity,transform,filter}
.fade.show{
opacity:1;
filter:blur(0);
transform:translate3d(0,0,0);
}
.future-hero{
padding:150px 7% 90px;
}
.hero-actions{
display:flex;
gap:18px;
justify-content:center;
flex-wrap:wrap;
margin-top:46px;
}
.finale-content .enter{margin-top:34px}
/* .page-transition-overlay → common.css */
.hero-city,
.hero-grid{
position:absolute;
pointer-events:none;
}
.hero-city{
width:46%;
bottom:0;
height:42%;
background:linear-gradient(to top,rgba(198,168,106,.16),transparent 70%);
filter:blur(10px);
opacity:.4;
}
.hero-city-a{
left:-4%;
clip-path:polygon(0 100%,8% 46%,18% 62%,26% 28%,34% 58%,42% 18%,52% 60%,64% 24%,76% 52%,86% 16%,100% 100%);
}
.hero-city-b{
right:-4%;
clip-path:polygon(0 100%,12% 24%,26% 56%,38% 18%,50% 60%,62% 26%,74% 52%,86% 22%,100% 100%);
}
.hero-grid{
inset:12% 10%;
border:1px solid rgba(198,168,106,.08);
border-radius:44px;
background:
linear-gradient(rgba(198,168,106,.03) 1px,transparent 1px),
linear-gradient(90deg,rgba(198,168,106,.03) 1px,transparent 1px);
background-size:88px 88px;
mask-image:radial-gradient(circle at center,rgba(0,0,0,1),transparent 88%);
}
.creator-shell,
.showcase-card,
.network-map,
.city-shell,
.finale-content{
position:relative;
overflow:hidden;
border-radius:34px;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.07);
backdrop-filter:blur(24px) saturate(140%);
}
.creator-shell::before,
.showcase-card::before,
.network-map::before,
.city-shell::before,
.finale-content::before{
content:"";
position:absolute;
inset:0;
background:radial-gradient(circle at top right,rgba(198,168,106,.14),transparent 42%);
pointer-events:none;
}
.creator-shell{
padding:30px;
}
.creator-tabs{
display:flex;
gap:14px;
flex-wrap:wrap;
margin-bottom:26px;
}
.creator-tab{
padding:14px 22px;
border:none;
border-radius:999px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.07);
cursor:pointer;
transition:.4s;
}
.creator-tab:hover,
.creator-tab.active{
transform:translateY(-3px);
border-color:rgba(198,168,106,.28);
color:#f1dfbb;
background:linear-gradient(145deg,rgba(198,168,106,.12),rgba(111,168,154,.08));
}
.creator-panel{
display:none;
grid-template-columns:minmax(0,1fr) minmax(320px,.92fr);
gap:28px;
align-items:center;
}
.creator-panel.active{display:grid}
.image-placeholder{
position:relative;
overflow:hidden;
border:1px solid rgba(255,255,255,.07);
background:
linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),
linear-gradient(180deg,rgba(7,17,15,.3),rgba(7,17,15,.74));
box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 20px 60px rgba(0,0,0,.2);
}
.image-placeholder::before{
content:"";
position:absolute;
inset:0;
background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.05),transparent 60%);


}
.image-placeholder span{
position:absolute;
left:22px;
right:22px;
bottom:18px;
color:rgba(255,255,255,.78);
font-size:12px;
letter-spacing:.22em;
line-height:1.8;
text-transform:uppercase;
}
.creator-placeholder{
min-height:380px;
border-radius:30px;
}
.creator-tags,
.city-points{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:18px;
}
.creator-tags span,
.city-point{
padding:10px 16px;
border-radius:999px;
border:1px solid rgba(255,255,255,.07);
background:rgba(255,255,255,.04);
color:#e9d6b0;
font-size:13px;
letter-spacing:.1em;
}
.creator-copy{
display:grid;
gap:16px;
}
.creator-meta,
.city-topline{
color:rgba(198,168,106,.55);
letter-spacing:.18em;
font-size:11px;
text-transform:uppercase;
}
.creator-copy h3,
.showcase-card h3,
.city-copy h3{
font-family:var(--font-display);
font-size:var(--text-card);
font-weight:300;
line-height:1.28;
letter-spacing:-.015em;
color:#f2dfbc;
}
.creator-copy p,
.creator-note p,
.showcase-card p,
.city-copy p,
.finale-text{
color:rgba(255,255,255,.6);
line-height:1.9;
font-size:16px;
}
.creator-note{
display:grid;
gap:10px;
padding:20px 22px;
border-radius:24px;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.07);
}
.showcase-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:24px;
}
.showcase-card{
padding:28px;
display:grid;
gap:18px;
}
.showcase-placeholder{
min-height:280px;
border-radius:26px;
}
.network-map{
padding:42px 28px;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:22px;
align-items:center;
}
.network-core{
grid-column:2;
display:flex;
align-items:center;
justify-content:center;
min-height:170px;
border-radius:999px;
border:1px solid rgba(255,255,255,.07);
background:radial-gradient(circle,rgba(198,168,106,.14),rgba(255,255,255,.03));
font-family:var(--font-display);
font-size:clamp(2rem,2.8vw,2.75rem);
font-weight:300;
letter-spacing:.16em;
color:#f2dfbc;
}
.network-node{
min-height:140px;
display:flex;
align-items:center;
justify-content:center;
padding:22px;
border-radius:28px;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.07);
text-align:center;
line-height:1.8;
color:rgba(255,255,255,.84);
}
.city-shell{
padding:30px;
display:grid;
grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);
gap:28px;
align-items:center;
}
.city-placeholder{
min-height:420px;
border-radius:30px;
}
.city-copy{
display:grid;
gap:16px;
}
.quote{
min-height:70vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:40px;
}
.quote h2{
font-family:var(--font-display);
font-size:clamp(2.6rem,4.9vw,4.9rem);
line-height:1.52;
font-weight:300;
letter-spacing:-.018em;
background:linear-gradient(to right,#f9e9cb,#C6A86A);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.finale-section{
position:relative;
min-height:84vh;
padding:120px 7% 110px;
overflow:hidden;
}
.finale-glow{
position:absolute;
inset:18% 18% auto;
height:420px;
background:radial-gradient(circle,rgba(198,168,106,.16),transparent 62%);
filter:blur(30px);
pointer-events:none;
}
.finale-content{
max-width:980px;
margin:0 auto;
padding:72px 48px;
}
/* @keyframes float → common.css */
@media(max-width:1100px){
.creator-panel,
.showcase-grid,
.city-shell{
grid-template-columns:1fr;
}
.network-map{
grid-template-columns:1fr;
}
.network-core{
grid-column:auto;
}
}
@media(max-width:768px){
.nav{width:92%;overflow:auto}
.nav ul{gap:16px}
.section{padding:100px 24px}
.future-hero{padding:130px 24px 90px}
.desc{font-size:16px}
.creator-shell,
.showcase-card,
.network-map,
.city-shell,
.finale-content{padding:24px}
.creator-placeholder,
.showcase-placeholder,
.city-placeholder{min-height:280px}
.finale-section{
padding:100px 24px;
min-height:auto;
}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{
animation:none !important;
transition:none !important;
}
.fade,.fade.show{
opacity:1;
filter:none;
transform:none;
}
}