/* ========== 全局重置 ========== */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:#f5f7fa;color:#333;line-height:1.6;padding-top:64px}
a{text-decoration:none;color:#1e80ff}
a:hover{color:#0055cc}

/* ========== 顶部导航 - 固定不滚动 ========== */
.my-top-nav{background:linear-gradient(135deg,#0a1628,#1a2a4a);padding:0 20px;position:fixed;top:0;left:0;right:0;z-index:99999;box-shadow:0 2px 20px rgba(0,0,0,0.3);height:64px}
.my-top-nav .nav-wrap{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:64px}

.my-top-nav .logo{display:flex;align-items:center;gap:10px;color:#fff;font-size:20px;font-weight:700;flex-shrink:0}
.my-top-nav .logo a{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
.my-top-nav .logo img{width:32px;height:32px;border-radius:6px;display:block;flex-shrink:0}
.my-top-nav .logo span{display:inline-block;line-height:32px;vertical-align:middle}

.my-top-nav .nav{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.my-top-nav .nav a{display:flex;align-items:center;gap:5px;color:rgba(255,255,255,0.7);padding:6px 12px;border-radius:5px;font-size:13px;transition:all 0.3s;font-weight:500;text-decoration:none}
.my-top-nav .nav a img{width:18px;height:18px;display:block;flex-shrink:0}
.my-top-nav .nav a:hover,.my-top-nav .nav a.active{color:#fff;background:rgba(255,255,255,0.1);text-decoration:none}
.my-top-nav .nav a.active{background:rgba(30,128,255,0.25)}

.my-top-nav .has-dropdown{position:relative}
.my-top-nav .dropdown-menu{display:none;position:absolute;top:100%;left:0;min-width:160px;background:#0a1628;border-radius:8px;padding:6px 0;box-shadow:0 12px 40px rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.06);z-index:999}
.my-top-nav .has-dropdown:hover .dropdown-menu{display:block}
.my-top-nav .dropdown-menu a{display:flex;align-items:center;gap:6px;padding:8px 16px;color:rgba(255,255,255,0.7);font-size:12px;border-radius:0;white-space:nowrap;text-decoration:none}
.my-top-nav .dropdown-menu a:hover{background:rgba(255,255,255,0.06);color:#fff;text-decoration:none}
.my-top-nav .dropdown-menu a img{width:16px;height:16px}

.my-top-nav .menu-toggle{display:none;color:#fff;font-size:26px;cursor:pointer;padding:5px 10px}

/* 隐藏注册代理和代理后台按钮 */
.header-actions{display:none!important}

/* ========== 移动端菜单 ========== */
.my-mobile-menu{display:none;background:#0a1628;padding:14px 18px;flex-direction:column;gap:3px;border-top:1px solid rgba(255,255,255,0.06);position:fixed;top:64px;left:0;right:0;z-index:999;max-height:calc(100vh - 64px);overflow-y:auto}
.my-mobile-menu.active{display:flex}
.my-mobile-menu .mobile-nav-item{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,0.8);padding:10px 12px;border-radius:6px;font-size:14px;transition:all 0.3s;text-decoration:none}
.my-mobile-menu .mobile-nav-item:hover{background:rgba(255,255,255,0.06);color:#fff;text-decoration:none}
.my-mobile-menu .mobile-nav-item img{width:18px;height:18px}
.my-mobile-menu .mobile-sub{display:flex;flex-direction:column;gap:2px;padding-left:38px;margin-bottom:2px}
.my-mobile-menu .mobile-sub a{display:flex;align-items:center;gap:6px;color:rgba(255,255,255,0.5);padding:6px 12px;border-radius:5px;font-size:13px;transition:all 0.3s;text-decoration:none}
.my-mobile-menu .mobile-sub a:hover{background:rgba(255,255,255,0.04);color:#fff;text-decoration:none}
.my-mobile-menu .mobile-sub a img{width:14px;height:14px}
.my-mobile-menu .mobile-reg,.my-mobile-menu .mobile-admin{display:none}

/* ========== Hero区域 ========== */
.hero-section{background:linear-gradient(145deg,#0d1b2a,#1b3a5c 50%,#0d1b2a);padding:50px 20px 70px;position:relative;overflow:hidden}
.hero-wrap{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:40px;position:relative;z-index:1}
.hero-content{flex:1}
.hero-content h1{font-size:44px;font-weight:800;color:#fff;margin-bottom:6px;letter-spacing:-1px}
.hero-sub{font-size:20px;color:#64b5f6;font-weight:500;margin-bottom:16px}
.hero-badge{display:inline-block;background:rgba(255,215,0,0.15);color:#ffd700;padding:3px 14px;border-radius:20px;font-size:13px;font-weight:600;margin-bottom:10px;border:1px solid rgba(255,215,0,0.2)}
.invite-code-box{background:rgba(255,255,255,0.05);border-radius:12px;padding:16px 20px;margin-bottom:20px;border:1px solid rgba(255,255,255,0.08)}
.invite-code{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.invite-code span{color:rgba(255,255,255,0.7);font-size:15px}
.invite-code strong{color:#ffd700;font-size:24px;letter-spacing:3px;font-weight:700}
.copy-btn{background:rgba(255,255,255,0.15);color:#fff;border:none;padding:3px 14px;border-radius:5px;font-size:13px;cursor:pointer;transition:all 0.3s}
.copy-btn:hover{background:rgba(255,255,255,0.25)}
.invite-tip{color:rgba(255,255,255,0.5);font-size:12px;margin-top:6px}
.hero-btns{display:flex;flex-wrap:wrap;gap:10px}
.hero-btns a{padding:12px 28px;border-radius:6px;font-size:15px;font-weight:600;transition:all 0.3s;text-align:center;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.btn-primary{background:linear-gradient(135deg,#1e80ff,#0055cc);color:#fff!important;box-shadow:0 4px 20px rgba(30,128,255,0.3)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(30,128,255,0.4);text-decoration:none}
.btn-secondary{background:rgba(255,255,255,0.1);color:#fff!important;border:1px solid rgba(255,255,255,0.2)}
.btn-secondary:hover{background:rgba(255,255,255,0.2);transform:translateY(-2px);text-decoration:none}
.btn-primary-outline{background:transparent;color:#fff!important;border:2px solid #1e80ff}
.btn-primary-outline:hover{background:#1e80ff;transform:translateY(-2px);text-decoration:none}
.btn-outline{background:transparent;color:#fff!important;border:1px solid rgba(255,255,255,0.3)}
.btn-outline:hover{background:rgba(255,255,255,0.1);transform:translateY(-2px);text-decoration:none}
.hero-image{flex-shrink:0;width:160px;text-align:center}
.hero-image img{width:100%;max-width:150px;filter:drop-shadow(0 20px 40px rgba(0,0,0,0.3));animation:float 4s ease-in-out infinite;display:block;margin:0 auto}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.hero-stats{display:flex;gap:30px;margin-top:24px;padding-top:18px;border-top:1px solid rgba(255,255,255,0.06)}
.stat-item{display:flex;flex-direction:column}
.stat-num{font-size:24px;font-weight:700;color:#fff}
.stat-label{font-size:12px;color:rgba(255,255,255,0.5)}
.hero-image-wrap{position:relative;display:inline-block}
.floating-badge{position:absolute;padding:4px 12px;border-radius:16px;font-size:11px;font-weight:600;animation:float 3s ease-in-out infinite}
.badge-1{top:-8px;right:-16px;background:linear-gradient(135deg,#ff6b6b,#ee5a24);color:#fff;animation-delay:0s}
.badge-2{bottom:-8px;left:-16px;background:linear-gradient(135deg,#f9ca24,#f0932b);color:#fff;animation-delay:1.5s}

/* ========== 功能卡片 - 内容居左 ========== */
.features-section{padding:50px 20px 60px;background:#f5f7fa}
.features-wrap{max-width:1200px;margin:0 auto}
.section-title{text-align:center;margin-bottom:40px}
.section-title h2{font-size:30px;font-weight:700;color:#0a1628;margin-bottom:6px}
.section-title p{font-size:16px;color:#888}
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

.feature-card{
  background:#fff;
  border-radius:14px;
  padding:28px 24px 24px;
  transition:all 0.35s ease;
  border:2px solid #dce4ed;
  box-shadow:0 2px 12px rgba(0,0,0,0.04);
  display:block;
  color:inherit;
  text-decoration:none!important;
  cursor:pointer;
  position:relative;
  text-align:left;
}
.feature-card:hover{transform:translateY(-8px);border-color:#1e80ff;box-shadow:0 16px 48px rgba(30,128,255,0.12);text-decoration:none!important}
.feature-card:active{transform:scale(0.97)}

/* ===== 图标容器 ===== */
.feature-card .feature-icon{
  width:56px;
  height:56px;
  margin:0 0 14px 0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f0f4ff;
  border-radius:14px;
  transition:all 0.3s;
  border:1px solid #dce4ed;
}

/* ===== 普通图标悬停：蓝底白图 ===== */
.feature-card:not(:nth-child(3)):hover .feature-icon {
  background: linear-gradient(135deg, #1e80ff, #0055cc);
  border-color: #1e80ff;
}
.feature-card:not(:nth-child(3)):hover .feature-icon img {
  filter: brightness(0) invert(1);
}

/* ===== APP图标（第3个卡片）：悬停时图标变蓝色（不是变白） ===== */
.feature-card:nth-child(3):hover .feature-icon {
  background: #f0f4ff;
  border-color: #dce4ed;
}
.feature-card:nth-child(3):hover .feature-icon img {
  filter: brightness(0) saturate(100%) invert(0) hue-rotate(180deg);
  /* 上面这个不行，用下面这个直接改色 */
}
/* 直接用brightness(0)让图片变黑，然后配合其他方式无法直接变蓝 */
/* 更可靠的方式：用sepia+色相旋转把白色变成蓝色 */
.feature-card:nth-child(3):hover .feature-icon img {
  filter: brightness(0.5) sepia(1) hue-rotate(180deg) saturate(10);
}

.feature-card .feature-icon img{
  width:32px;
  height:32px;
  object-fit:contain;
  display:block;
  transition:all 0.3s;
}

.feature-card h3{
  font-size:17px;
  font-weight:700;
  color:#0a1628;
  margin-bottom:8px;
  letter-spacing:-0.3px;
  text-align:left;
}
.feature-card p{
  font-size:13.5px;
  color:#666;
  line-height:1.7;
  margin-bottom:0;
  text-align:left;
}
.feature-card .card-tag{
  display:inline-block;
  margin-top:14px;
  font-size:12px;
  font-weight:600;
  color:#1e80ff;
  background:rgba(30,128,255,0.08);
  padding:3px 16px;
  border-radius:20px;
  transition:all 0.3s;
}
.feature-card:hover .card-tag{background:#1e80ff;color:#fff}

/* ========== 侧边栏 ========== */
.sidebar{background:#ffffff;border-radius:12px;padding:20px 18px 16px;color:#1a2a4a;min-width:200px;position:sticky;top:80px;box-shadow:0 2px 12px rgba(0,0,0,0.06);border:1px solid #e8ecf1}
.sidebar-logo{text-align:center;padding-bottom:16px;border-bottom:1px solid #eef2f7;margin-bottom:14px}
.sidebar-logo .logo-wrap{display:flex;align-items:center;justify-content:center;gap:10px}
.sidebar-logo img{width:36px;height:36px;border-radius:8px;display:block;flex-shrink:0}
.sidebar-logo .logo-text{text-align:left}
.sidebar-logo .logo-text h3{font-size:16px;font-weight:700;color:#0a1628;line-height:1.2}
.sidebar-logo .logo-text .badge{display:inline-block;background:rgba(255,215,0,0.15);color:#b8860b;font-size:10px;padding:1px 10px;border-radius:12px;margin-top:2px}
.sidebar-info{display:none}
.sidebar-footer{border-top:1px solid #eef2f7;padding-top:14px;margin-top:0}
.sidebar-footer .invite-code-box{background:#f5f8fc;border-radius:10px;padding:12px 14px;text-align:center;border:1px dashed #d0ddee}
.sidebar-footer .invite-code-box p{font-size:11px;color:#999;margin-bottom:2px}
.sidebar-footer .invite-code-box strong{color:#d4a017;font-size:20px;letter-spacing:3px;display:block;margin-bottom:6px}
.sidebar-footer .invite-code-box .copy-btn{background:#1e80ff;color:#fff;border:none;padding:4px 18px;border-radius:5px;font-size:12px;cursor:pointer;transition:background 0.3s}
.sidebar-footer .invite-code-box .copy-btn:hover{background:#0055cc}
.sidebar-footer .copyright{font-size:11px;color:#bbb;text-align:center;margin-top:10px}

/* ========== Toast ========== */
@keyframes fadeInUp{from{opacity:0;transform:translateX(-50%) translateY(30px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.toast-message{animation:fadeInUp 0.4s ease;position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.85);color:#fff;padding:12px 28px;border-radius:8px;font-size:15px;z-index:9999;box-shadow:0 8px 30px rgba(0,0,0,0.3)}

/* ========== 响应式 ========== */
@media(max-width:1024px){.features-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){
  .my-top-nav .nav{display:none}
  .my-top-nav .menu-toggle{display:block}
  .hero-wrap{flex-direction:column;text-align:center}
  .hero-content h1{font-size:30px}
  .hero-sub{font-size:17px}
  .invite-code{justify-content:center;padding:8px 14px}
  .invite-code strong{font-size:20px}
  .hero-btns{justify-content:center}
  .hero-btns a{padding:10px 20px;font-size:14px;flex:1 1 45%;min-width:120px}
  .hero-image{width:120px}
  .hero-image img{max-width:120px}
  .features-grid{grid-template-columns:1fr 1fr;gap:14px}
  .feature-card{padding:20px 16px}
  .section-title h2{font-size:24px}
  .hero-stats{gap:16px;flex-wrap:wrap}
  .stat-num{font-size:20px}
  .floating-badge{display:none}
  .sidebar{min-width:auto}
}
@media(max-width:480px){
  .features-grid{grid-template-columns:1fr}
  .hero-content h1{font-size:24px}
  .invite-code strong{font-size:17px}
  .hero-btns a{flex:1 1 100%}
}