/* ========== 基础重置 ========== */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Microsoft YaHei','PingFang SC',sans-serif;
  background:#0d0a0a;
  color:#f5e6e6;
  overflow-x:hidden;
  cursor:none;
}
a{text-decoration:none;color:inherit;transition:all .3s;}
ul{list-style:none;}
img{max-width:100%;display:block;}

/* ========== 自定义光标 ========== */
.cursor{
  position:fixed;width:20px;height:20px;
  border:2px solid #ff8800;border-radius:50%;
  pointer-events:none;z-index:99999;
  transition:width .3s,height .3s,background .3s,border-color .3s;
  transform:translate(-50%,-50%);
  mix-blend-mode:difference;
}
.cursor.hover{
  width:40px;height:40px;
  background:rgba(255,51,51,.15);
  border-color:#ff3333;
}
.cursor-dot{
  position:fixed;width:6px;height:6px;
  background:#ffd700;border-radius:50%;
  pointer-events:none;z-index:99999;
  transform:translate(-50%,-50%);
  transition:width .2s,height .2s;
}

/* ========== 粒子背景 ========== */
#particles{
  position:fixed;top:0;left:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
}

/* ========== 液态渐变背景光球 ========== */
.blob{
  position:fixed;border-radius:50%;filter:blur(80px);
  opacity:.35;pointer-events:none;z-index:0;
}
.blob-1{
  width:500px;height:500px;top:-10%;left:-10%;
  background:radial-gradient(circle,#ff3333,#ff8800,transparent);
  animation:blobFloat 20s ease-in-out infinite;
}
.blob-2{
  width:400px;height:400px;top:40%;right:-5%;
  background:radial-gradient(circle,#ff8800,#ffd700,transparent);
  animation:blobFloat 25s ease-in-out infinite reverse;
}
.blob-3{
  width:350px;height:350px;bottom:-5%;left:30%;
  background:radial-gradient(circle,#ff6600,#ff3333,transparent);
  animation:blobFloat 18s ease-in-out infinite 5s;
}
@keyframes blobFloat{
  0%,100%{transform:translate(0,0) scale(1);}
  25%{transform:translate(50px,-80px) scale(1.1);}
  50%{transform:translate(-30px,60px) scale(.9);}
  75%{transform:translate(80px,30px) scale(1.05);}
}

/* ========== 噪点纹理 ========== */
.noise{
  position:fixed;top:0;left:0;width:100%;height:100%;
  pointer-events:none;z-index:1;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* ========== 顶部公告条 ========== */
.announcement{
  position:relative;z-index:10;
  background:linear-gradient(90deg,#ff3333,#ff8800,#ffd700,#ff8800,#ff3333);
  background-size:200% 100%;
  animation:shimmer 3s linear infinite;
  padding:10px 20px;
  display:flex;justify-content:space-between;align-items:center;
  font-size:14px;font-weight:600;
  box-shadow:0 2px 20px rgba(255,51,51,.3);
}
@keyframes shimmer{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}
.announcement .left span{
  margin-right:20px;
  text-shadow:0 0 8px rgba(255,255,255,.5);
}
.announcement .right a{
  margin-left:15px;
  padding:4px 12px;
  background:rgba(0,0,0,.3);
  border-radius:20px;
  font-size:12px;
  transition:all .3s;
}
.announcement .right a:hover{
  background:rgba(255,255,255,.2);
  transform:translateY(-1px);
}

/* ========== 导航栏 ========== */
.navbar{
  position:sticky;top:0;z-index:100;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  background:rgba(13,10,10,.7);
  border-bottom:1px solid rgba(255,136,0,.2);
  padding:15px 40px;
  display:flex;justify-content:space-between;align-items:center;
  transition:all .3s;
}
.navbar.scrolled{
  padding:10px 40px;
  background:rgba(13,10,10,.9);
  box-shadow:0 4px 30px rgba(255,51,51,.15);
}
.nav-brand{
  font-size:24px;font-weight:900;
  background:linear-gradient(135deg,#ff3333,#ff8800,#ffd700);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  text-shadow:0 0 30px rgba(255,136,0,.3);
}
.nav-links{display:flex;gap:30px;}
.nav-links a{
  position:relative;font-size:15px;font-weight:500;
  padding:5px 0;
}
.nav-links a::after{
  content:'';position:absolute;bottom:0;left:0;
  width:0;height:2px;
  background:linear-gradient(90deg,#ff3333,#ff8800);
  transition:width .3s;
}
.nav-links a:hover::after{width:100%;}
.nav-links a:hover{color:#ffd700;}

/* ========== Hero区域 ========== */
.hero{
  position:relative;z-index:5;
  min-height:70vh;
  display:flex;flex-direction:column;
  justify-content:center;align-items:center;
  text-align:center;
  padding:80px 20px;
}
.hero h1{
  font-size:clamp(40px,8vw,80px);
  font-weight:900;
  line-height:1.1;
  margin-bottom:20px;
  background:linear-gradient(135deg,#fff,#ff3333,#ff8800,#ffd700,#fff);
  background-size:300% 300%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  animation:gradientShift 4s ease infinite;
}
@keyframes gradientShift{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}
.hero p{
  font-size:18px;color:#aa8888;
  max-width:600px;margin-bottom:40px;
  line-height:1.8;
}
.hero .cta-btn{
  display:inline-block;
  padding:16px 48px;
  background:linear-gradient(135deg,#ff3333,#ff8800);
  border-radius:50px;
  font-size:18px;font-weight:700;
  color:#fff;
  box-shadow:0 8px 30px rgba(255,51,51,.4);
  transition:all .3s;
  position:relative;overflow:hidden;
}
.hero .cta-btn::before{
  content:'';position:absolute;top:0;left:-100%;
  width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  transition:left .5s;
}
.hero .cta-btn:hover::before{left:100%;}
.hero .cta-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 40px rgba(255,51,51,.5);
}

/* ========== 数据统计 ========== */
.stats{
  position:relative;z-index:5;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:30px;padding:60px 40px;
  max-width:1200px;margin:0 auto;
}
.stat-card{
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,136,0,.15);
  border-radius:20px;
  padding:40px 30px;
  text-align:center;
  transition:all .4s;
  position:relative;overflow:hidden;
}
.stat-card::before{
  content:'';position:absolute;top:0;left:0;
  width:100%;height:3px;
  background:linear-gradient(90deg,#ff3333,#ff8800,#ffd700);
  transform:scaleX(0);transform-origin:left;
  transition:transform .4s;
}
.stat-card:hover::before{transform:scaleX(1);}
.stat-card:hover{
  transform:translateY(-8px);
  border-color:rgba(255,136,0,.4);
  box-shadow:0 20px 40px rgba(255,51,51,.15);
}
.stat-number{
  font-size:48px;font-weight:900;
  background:linear-gradient(135deg,#ff3333,#ffd700);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  display:block;margin-bottom:10px;
}
.stat-label{font-size:15px;color:#aa8888;}

/* ========== 区块通用 ========== */
.section{
  position:relative;z-index:5;
  padding:80px 40px;
  max-width:1200px;margin:0 auto;
}
.section-title{
  font-size:clamp(28px,5vw,42px);
  font-weight:900;text-align:center;
  margin-bottom:50px;
  position:relative;display:inline-block;
  width:100%;
}
.section-title span{
  background:linear-gradient(135deg,#ff3333,#ff8800,#ffd700);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.section-title::after{
  content:'';display:block;width:80px;height:4px;
  background:linear-gradient(90deg,#ff3333,#ff8800);
  margin:15px auto 0;border-radius:2px;
}

/* ========== 充值详情卡片 ========== */
.recharge-info{
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,136,0,.2);
  border-radius:24px;
  padding:50px;
  margin-bottom:50px;
  position:relative;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.recharge-info::before{
  content:'';position:absolute;top:-50%;right:-50%;
  width:100%;height:100%;
  background:radial-gradient(circle,rgba(255,51,51,.08),transparent 60%);
  pointer-events:none;
}
.recharge-info h3{
  font-size:28px;font-weight:800;
  margin-bottom:25px;
  background:linear-gradient(135deg,#ff3333,#ff8800,#ffd700);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  animation:flameShift 3s ease-in-out infinite;
}
@keyframes flameShift{
  0%,100%{filter:hue-rotate(0deg);}
  50%{filter:hue-rotate(20deg);}
}
.recharge-info p,.recharge-info li{
  font-size:17px;line-height:2;
  color:#f5c8a0;
  margin-bottom:12px;
}
.recharge-info strong{
  color:#ffd700;
  text-shadow:0 0 10px rgba(255,215,0,.3);
}
.recharge-info .highlight{color:#ff6600;font-weight:700;}
.recharge-info .highlight-red{color:#ff3333;font-weight:700;text-shadow:0 0 10px rgba(255,51,51,.4);}

/* ========== 套餐卡片网格 ========== */
.packages-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:25px;margin-top:40px;
}
.package-card{
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,136,0,.15);
  border-radius:20px;
  padding:35px 30px;
  transition:all .4s;
  position:relative;overflow:hidden;
}
.package-card::after{
  content:'';position:absolute;top:0;left:0;
  width:100%;height:100%;
  background:linear-gradient(135deg,rgba(255,51,51,.05),transparent);
  opacity:0;transition:opacity .4s;
}
.package-card:hover::after{opacity:1;}
.package-card:hover{
  transform:translateY(-10px);
  border-color:rgba(255,136,0,.4);
  box-shadow:0 25px 50px rgba(255,51,51,.15);
}
.package-card.featured{
  border-color:#ff8800;
  background:rgba(255,136,0,.08);
}
.package-card.featured::before{
  content:'推荐';position:absolute;top:15px;right:15px;
  background:linear-gradient(135deg,#ff3333,#ff8800);
  padding:5px 15px;border-radius:20px;
  font-size:12px;font-weight:700;
}
.package-price{
  font-size:36px;font-weight:900;
  background:linear-gradient(135deg,#ff3333,#ffd700);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  margin-bottom:15px;
}
.package-price small{font-size:16px;}
.package-features{
  list-style:none;padding:0;
}
.package-features li{
  padding:8px 0;
  border-bottom:1px solid rgba(255,136,0,.1);
  font-size:15px;color:#f5c8a0;
  display:flex;align-items:center;gap:8px;
}
.package-features li::before{
  content:'\2713';color:#ffd700;font-weight:bold;
}

/* ========== 支付方式 ========== */
.payment-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:25px;margin-top:40px;
}
.payment-card{
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,136,0,.15);
  border-radius:20px;
  padding:40px 30px;
  text-align:center;
  transition:all .4s;
  cursor:pointer;
}
.payment-card:hover{
  transform:translateY(-8px) scale(1.02);
  border-color:#ff8800;
  box-shadow:0 20px 40px rgba(255,51,51,.15);
}
.payment-card img{
  width:80px;height:80px;
  margin:0 auto 20px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid rgba(255,136,0,.3);
  transition:all .3s;
}
.payment-card:hover img{
  border-color:#ffd700;
  box-shadow:0 0 20px rgba(255,215,0,.3);
}
.payment-card h4{
  font-size:18px;font-weight:700;
  margin-bottom:8px;
  color:#f5e6e6;
}
.payment-card p{font-size:14px;color:#aa8888;}

/* ========== 页脚 ========== */
.footer{
  position:relative;z-index:5;
  border-top:1px solid rgba(255,136,0,.15);
  padding:60px 40px;
  text-align:center;
  background:rgba(0,0,0,.3);
  backdrop-filter:blur(10px);
}
.footer-content{
  max-width:1200px;margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:30px;
}
.footer-logo img{width:120px;opacity:.8;transition:opacity .3s;}
.footer-logo img:hover{opacity:1;}
.footer-links a{
  display:inline-block;margin:0 12px;
  color:#aa8888;font-size:14px;
  transition:color .3s;
}
.footer-links a:hover{color:#ffd700;}
.footer-copy{
  margin-top:30px;padding-top:20px;
  border-top:1px solid rgba(255,136,0,.1);
  font-size:13px;color:#666;
}

/* ========== 音乐按钮 ========== */
.music-btn{
  position:fixed;bottom:30px;right:30px;
  z-index:9999;
  width:50px;height:50px;
  border-radius:50%;
  background:linear-gradient(135deg,#ff3333,#ff8800);
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;color:#fff;
  box-shadow:0 4px 20px rgba(255,51,51,.4);
  transition:all .3s;
  animation:pulse 2s infinite;
}
.music-btn:hover{
  transform:scale(1.1);
  box-shadow:0 6px 30px rgba(255,51,51,.6);
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(255,51,51,.4);}
  70%{box-shadow:0 0 0 15px rgba(255,51,51,0);}
  100%{box-shadow:0 0 0 0 rgba(255,51,51,0);}
}

/* ========== 滚动动画 ========== */
.fade-in{
  opacity:0;transform:translateY(30px);
  transition:opacity .8s,transform .8s;
}
.fade-in.visible{
  opacity:1;transform:translateY(0);
}

/* ========== 滚动条 ========== */
::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-track{background:#0d0a0a;}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#ff3333,#ff8800);
  border-radius:4px;
}

/* ========== 响应式 ========== */
@media(max-width:768px){
  .announcement{flex-direction:column;gap:10px;text-align:center;}
  .navbar{padding:12px 20px;}
  .nav-links{gap:15px;}
  .nav-links a{font-size:13px;}
  .section{padding:50px 20px;}
  .recharge-info{padding:30px 20px;}
  .footer-content{flex-direction:column;}
  .hero h1{font-size:36px;}
}

/* ========== 文字加颜色（增强覆盖） ========== */
body{color:#fff0e6;}

/* 顶部公告条文字 */
.announcement .left span{color:#fff7d6;text-shadow:0 0 10px rgba(255,215,0,.6);}
.announcement .right a{color:#ffe8b0;}
.announcement .right a:hover{color:#fff;}

/* 导航文字上色 */
.nav-links a{color:#ffd9a0;}
.nav-links a:hover{color:#ffd700;}

/* Hero 副标题文字 */
.hero p{
  background:linear-gradient(135deg,#ffd700,#ff8800,#ff5555);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;color:transparent;font-weight:600;
}

/* 统计标签上色 */
.stat-label{color:#ffcf7a;font-weight:600;}

/* 套餐列表项多彩轮换 */
.package-features li{color:#ffe3bd;font-weight:500;}
.package-features li:nth-child(3n+1){color:#ffd700;}
.package-features li:nth-child(3n+2){color:#ff8a3d;}
.package-features li:nth-child(3n+3){color:#ff5a5a;}
.package-features li::before{color:#7CFC98;}

/* 支付方式文字上色 */
.payment-card h4{
  background:linear-gradient(135deg,#ffd700,#ff8800);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;color:transparent;
}
.payment-card p{color:#ff9d5c;font-weight:500;}

/* 页脚链接与版权文字上色 */
.footer-links a{color:#ffb36b;}
.footer-links a:nth-child(3n+1){color:#ffd700;}
.footer-links a:nth-child(3n+3){color:#ff7a5c;}
.footer-links a:hover{color:#fff;text-shadow:0 0 12px rgba(255,215,0,.7);}
.footer-copy{color:#c98a55;}

/* 详情正文整体提亮 */
.recharge-info p,.recharge-info li{color:#ffdcb0;}