*{box-sizing:border-box}
body{
margin:0;
font-family:"Microsoft YaHei",Arial;
color:#222;
background:#fff;
line-height:1.8;
}
header{
height:72px;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 10%;
border-bottom:1px solid #eee;
}
header a{
background:#111;
color:#fff;
padding:10px 28px;
border-radius:30px;
text-decoration:none;
}
.hero{
height:620px;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
background:#faf9f6;
}
.hero-inner{
max-width:700px;
}
.small-title{
color:#b08d45;
letter-spacing:4px;
}
h1{
font-size:58px;
font-weight:500;
line-height:1.3;
}
.hero p{
color:#777;
font-size:18px;
}
button{
background:#111;
color:white;
border:0;
padding:14px 45px;
border-radius:30px;
}
.exchange{
padding:80px 10%;
text-align:center;
}
.gold-card{
max-width:420px;
margin:auto;
padding:50px;
background:linear-gradient(145deg,#fff,#f4ead5);
border-radius:30px;
box-shadow:0 20px 40px #0001;
}
.line{
font-size:40px;
color:#b08d45;
}
.intro,.contact{
padding:80px 10%;
text-align:center;
}
.items{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}
.items div{
padding:35px;
border:1px solid #eee;
border-radius:20px;
}
.numbers{
display:flex;
justify-content:center;
gap:80px;
padding:60px;
background:#111;
color:white;
}
.numbers b{
display:block;
font-size:40px;
color:#d6b56d;
}
.numbers span{
font-size:14px;
}
footer{
text-align:center;
padding:35px;
}
footer a{
color:#999;
font-size:14px;
text-decoration:none;
}
.mobile-bar{
display:none;
}
@media(max-width:768px){
h1{font-size:36px}
.items{grid-template-columns:1fr}
.numbers{
gap:20px;
padding:30px;
}
.mobile-bar{
display:flex;
position:fixed;
bottom:0;
left:0;
right:0;
height:70px;
background:#111;
color:#fff;
align-items:center;
justify-content:space-between;
padding:0 20px;
z-index:99;
}
.mobile-bar a{
background:#d6b56d;
color:#111;
padding:8px 20px;
border-radius:20px;
text-decoration:none;
}
}


/* 客服中心优化 */
.contact-desc{
max-width:650px;
margin:15px auto 0;
color:#64748b;
font-size:18px;
}

.customer-panel{
width:min(560px,92%);
margin:45px auto;
padding:35px;
background:rgba(255,255,255,.95);
border-radius:32px;
box-shadow:0 20px 50px rgba(0,0,0,.08);
}

.online-badge{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 18px;
border-radius:30px;
background:#effdf5;
color:#16a34a;
margin-bottom:20px;
}

.online-badge i{
width:9px;
height:9px;
border-radius:50%;
background:#22c55e;
animation:onlinePulse 1.5s infinite;
}

.customer-row{
display:flex;
align-items:center;
gap:18px;
padding:18px;
margin:15px 0;
background:#f8fafc;
border-radius:22px;
text-align:left;
transition:.25s;
}

.customer-row:hover{
transform:translateY(-4px);
box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.customer-row h3{
margin:0;
font-size:20px;
}

.customer-row p{
margin:0;
color:#64748b;
}

.customer-icon{
width:58px;
height:58px;
border-radius:18px;
display:flex;
align-items:center;
justify-content:center;
font-size:26px;
font-weight:bold;
color:white;
background:#22c55e;
}

.customer-icon.qq{
background:#2563eb;
}

.customer-icon.phone{
background:#f59e0b;
}

.service-tags{
display:flex;
justify-content:space-around;
flex-wrap:wrap;
gap:12px;
color:#2563eb;
font-size:15px;
margin-top:25px;
}

@keyframes onlinePulse{
50%{opacity:.3;transform:scale(.8);}
}

@media(max-width:768px){
.customer-panel{
padding:22px;
}
.customer-row{
padding:14px;
}
.service-tags{
flex-direction:column;
}
}

.contact-desc{color:#64748b;font-size:18px}
.business-contact{max-width:650px;margin:40px auto;background:#fff;border-radius:28px;padding:35px;box-shadow:0 18px 45px rgba(0,0,0,.08)}
.contact-top{display:flex;align-items:center;justify-content:center;gap:18px}
.avatar{width:65px;height:65px;border-radius:50%;background:#e8f1ff;color:#2563eb;display:flex;align-items:center;justify-content:center;font-size:28px}
.contact-top p{color:#64748b}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:30px}
.contact-grid div{background:#f8fafc;border-radius:18px;padding:20px}
.contact-grid small,.contact-grid strong{display:block}
.contact-grid strong{font-size:20px;margin-top:8px}
.contact-note{margin-top:25px;color:#2563eb}
@media(max-width:768px){.contact-grid{grid-template-columns:1fr}}