*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:
"PingFang SC",
"Microsoft YaHei",
sans-serif;

background:transparent;
color:white;
overflow-x:hidden;
position:relative;
}

/* 背景 */

#bg{
position:fixed;
left:0;
top:0;
width:100vw;
height:100vh;

z-index:-30;

background-size:cover;
background-position:center;
background-repeat:no-repeat;

transform:scale(1.02);

filter:
brightness(1.08)
saturate(1.22)
contrast(1.05);
}

/* 粒子层 */

#particles{
position:fixed;
left:0;
top:0;
width:100%;
height:100%;

z-index:-25;

pointer-events:none;
}

/* 智能遮罩 */

.overlay{
position:fixed;
inset:0;

z-index:-20;

background:
linear-gradient(
to bottom,
rgba(0,0,0,.38) 0%,
rgba(0,0,0,.18) 30%,
rgba(0,0,0,.06) 60%,
rgba(0,0,0,.02) 100%
);

pointer-events:none;
}

.container{
width:min(1180px,92%);
margin:auto;
}

/* Hero */

.hero{
min-height:100vh;
padding:16px 0 100px;
}

/* 顶部导航 */

.glass-nav{
width:min(1180px,92%);

display:flex;
justify-content:space-between;
align-items:center;

padding:18px 28px;

border-radius:28px;

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

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

backdrop-filter:
blur(18px)
saturate(1.4);

box-shadow:
0 10px 40px rgba(0,0,0,.28),
inset 0 1px 0 rgba(255,255,255,.12);

position:fixed;

top:12px;
left:50%;

transform:translateX(-50%);

z-index:1000;
}

.logo{
font-size:24px;
font-weight:700;
}

.nav-links{
display:flex;
gap:28px;
}

.nav-links a{
color:rgba(255,255,255,.82);
text-decoration:none;

transition:.25s;
}

.nav-links a:hover{
color:white;
}

/* 主区域 */

.hero-content{
min-height:82vh;

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;

text-align:center;

padding-top:80px;

position:relative;
}

/* 标题玻璃底 */

.hero-content h1{
position:relative;

font-size:clamp(58px,9vw,110px);

line-height:.95;

margin-bottom:26px;

background:
linear-gradient(
135deg,
#fff,
#dbe5ff,
#ffd7f3
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

text-shadow:none;
}

.hero-content h1::before{
content:'';

position:absolute;

inset:-28px -48px;

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

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

border-radius:36px;

backdrop-filter:blur(20px);

z-index:-1;
}

.badge{
padding:12px 20px;

border-radius:999px;

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

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

backdrop-filter:
blur(16px)
saturate(1.4);

margin-bottom:30px;
}

/* 副标题 */

.hero-content p{
font-size:21px;
line-height:1.9;

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

margin-bottom:42px;

text-shadow:
0 2px 12px rgba(0,0,0,.25);
}

/* 按钮 */

.buttons{
display:flex;
gap:18px;
flex-wrap:wrap;
}

.btn{
display:inline-block;

text-decoration:none;
color:white;

padding:15px 28px;

border-radius:20px;

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

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

backdrop-filter:
blur(16px)
saturate(1.4);

transition:.35s;
}

.primary{
background:
linear-gradient(
135deg,
rgba(125,140,255,.42),
rgba(255,130,215,.24)
);
}

.btn:hover{
transform:translateY(-4px);

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

box-shadow:
0 10px 30px rgba(0,0,0,.22);
}

/* 通用 section */

section{
padding:120px 0;
}

.section-title{
text-align:center;
margin-bottom:70px;
}

.section-title span{
color:#adc1ff;
letter-spacing:2px;
}

.section-title h2{
font-size:54px;
margin-top:14px;

text-shadow:
0 2px 12px rgba(0,0,0,.25);
}

/* 卡片 */

.cards{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(300px,1fr));

gap:30px;
}

.card,
.contact-box{
background:rgba(255,255,255,.06);

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

border-radius:34px;

padding:38px;

backdrop-filter:
blur(18px)
saturate(1.4);

box-shadow:
0 10px 40px rgba(0,0,0,.22),
inset 0 1px 0 rgba(255,255,255,.10);

transition:.35s;
}

.card:hover{
transform:
translateY(-8px);

box-shadow:
0 18px 50px rgba(0,0,0,.28);
}

/* 卡片标题 */

.card h3,
.contact-box h3{
font-size:30px;
margin-bottom:18px;

text-shadow:
0 2px 10px rgba(0,0,0,.25);
}

/* 内容 */

.card p,
.contact-box p{
line-height:1.9;
color:rgba(255,255,255,.84);
margin-bottom:24px;
}

/* 头像 */

.avatar{
width:100px;
height:100px;

border-radius:50%;

object-fit:cover;

border:
2px solid rgba(255,255,255,.18);

box-shadow:
0 8px 24px rgba(0,0,0,.25);

margin-bottom:22px;

transition:.35s;
}

.avatar:hover{
transform:scale(1.05);

box-shadow:
0 10px 32px rgba(255,255,255,.18);
}

/* 职位 */

.role{
display:inline-block;

padding:8px 14px;

border-radius:999px;

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

margin-bottom:18px;
}

/* 社交媒体 */

.socials{
display:flex;
gap:12px;
flex-wrap:wrap;
}

.socials a{
text-decoration:none;
color:white;

padding:10px 14px;

border-radius:14px;

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

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

transition:.25s;
}

.socials a:hover{
background:rgba(255,255,255,.14);

transform:translateY(-2px);
}

.contact-box{
text-align:center;
}

/* Footer */

.glass-footer{
padding:40px 0 60px;

display:flex;
justify-content:center;
}

.footer-content{
display:flex;
align-items:center;
gap:12px;

padding:14px 24px;

border-radius:999px;

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

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

backdrop-filter:
blur(18px)
saturate(1.4);

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

font-size:15px;
}

.footer-link{
text-decoration:none;

color:#ffffff;

font-weight:600;

transition:.25s;
}

.footer-link:hover{
opacity:.8;

transform:translateY(-1px);
}

/* Reveal 动画 */

.reveal{
opacity:0;

transform:translateY(50px);

transition:
opacity .9s ease,
transform .9s ease;
}

.reveal.show{
opacity:1;

transform:translateY(0);
}

/* 响应式 */

@media(max-width:768px){

.glass-nav{
flex-direction:column;

gap:18px;

padding:16px 20px;
}

.nav-links{
gap:18px;

flex-wrap:wrap;

justify-content:center;
}

.section-title h2{
font-size:42px;
}

.hero-content p{
font-size:17px;
}

section{
padding:90px 0;
}

.hero-content h1{
font-size:64px;
}

.hero-content h1::before{
inset:-20px -20px;
}

}