/* ---------- 品牌色（冒险岛风格） ---------- */
:root{
  --mintLt:#9FF6EE; --mint1:#3EA89F; --mint2:#2A7E7F;
  --ink:#eaf6f6; --muted:#b7cacc; --line:rgba(255,255,255,.12);
  --bg:#071517; --card:#0f1719;
  --dropdown-bg: #11181a; /* 下拉面板背景色（匹配目标站） */
  font-family:"Inter","PingFang SC","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);padding-top: 80px; /* 为导航栏预留空间 */}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

/* ---------- 导航栏（完全匹配fundedprogramfinder风格） ---------- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  padding: 18px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg); /* 纯背景色，匹配目标站 */
  transition: padding 0.3s ease;
}

.navbar-scrolled {
  padding: 14px 20px;
  background: var(--bg);
}

.navbar-logo {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--mintLt);
  display: flex;
  align-items: center;
  gap: 8px;
}

.navbar-logo span {
  background: linear-gradient(90deg, var(--mintLt), var(--mint1));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 导航菜单容器（横向分布） */
.navbar-menu {
  display: flex;
  gap: clamp(24px, 4vw, 36px);
  align-items: center;
  position: relative;
}

/* 导航菜单项基础样式（匹配目标站的下划线+hover效果） */
.nav-item {
  position: relative;
  color: var(--muted);
  font-weight: 500;
  font-size: 0.95rem;
  cursor: pointer;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
}

/* hover时文字变绿色 */
.nav-item:hover {
  color: var(--mint1);
}

/* 活跃/hover时的下划线（匹配目标站） */
.nav-item::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--mint1);
  transition: width 0.2s ease;
}
.nav-item:hover::after, .nav-item.active::after {
  width: 100%;
}

/* 下拉菜单容器（匹配目标站的深色面板） */
.dropdown {
  position: relative;
  display: inline-block;
}

/* 下拉面板样式（完全匹配目标站） */
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--dropdown-bg);
  border-radius: 4px;
  padding: 12px 0;
  min-width: 180px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  z-index: 9999;
   transition: opacity 0.2s ease, display 0.2s ease;
  opacity: 1;
}

/* 下拉菜单项样式 */
.dropdown-menu a {
  display: block;
  padding: 8px 16px;
  color: var(--muted);
  font-weight: 500;
  font-size: 0.9rem;
  transition: background 0.2s ease, color 0.2s ease;
}
.dropdown:not(:hover) .dropdown-menu {
  opacity: 0;
  visibility: hidden;
}

/* hover时显示下拉面板 */
.dropdown:hover .dropdown-menu {
  display: block;
  opacity: 1;
  visibility: visible;
}

/* 按钮样式（匹配目标站） */
.navbar-menu .btn {
  padding: 8px 18px;
  border-radius: 4px;
  background: var(--mint1);
  color: var(--bg) !important;
  font-weight: 600;
  transition: background 0.2s ease;
}
.navbar-menu .btn:hover {
  background: var(--mint2);
}

/* 移动端导航（适配小屏幕） */
.navbar-toggle {
  display: none;
  cursor: pointer;
  font-size: 1.5rem;
  color: var(--mintLt);
    z-index: 10000; /* 新增：确保按钮层级高于其他元素 */
  position: relative; /* 新增：配合z-index生效 */
}
.navbar-mobile-menu {
  display: none;
  position: fixed;
  top: 80px;
  left: 0;
  width: 100%;
  background: var(--bg);
  flex-direction: column;
  padding: 20px;
  gap: 16px;
  z-index: 9998;
}
.navbar-mobile-menu.active {
  display: flex;
}
@media (max-width: 768px) {
  .navbar-menu {
    display: none;
  }
  .navbar-toggle {
    display: block;
  }
  body {
    padding-top: 70px;
  }
  /* 移动端下拉菜单专属样式 */
  .navbar-mobile-menu .dropdown {
    width: 100%;
  }
  .navbar-mobile-menu .dropdown-menu {
    position: static;
    display: block;
    background: var(--dropdown-bg);
    margin-top: 8px;
    margin-left: 16px;
    min-width: unset;
    width: calc(100% - 16px);
    box-shadow: none;
  }
}

/* ---------- Hero ---------- */
.hero{position:relative;padding:50px 20px 5px;text-align:center;overflow:hidden}
/* 移除hero的渐变背景（导航栏已同步） */
.hero::before{content:"";position:absolute;inset:-20%;background:transparent;z-index:0}
.hero>*{position:relative;z-index:1}
.hero h1{font-size:clamp(2.2rem,5vw,3.2rem);letter-spacing:1px;margin-bottom:16px}
.hero h1 span{display:inline-block;background:linear-gradient(90deg,var(--mintLt),var(--mint1));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero>p{font-size:clamp(1rem,2.2vw,1.25rem);color:var(--muted)}
.kpis{display:flex;justify-content:center;gap:clamp(20px,4vw,40px);margin:30px 0;flex-wrap:wrap}
.kpi{text-align:center}
.kpi-top{font-size:clamp(1.6rem,4vw,2.2rem);font-weight:800;color:var(--mintLt)}
.kpi-sub{font-size:clamp(.8rem,1.6vw,1rem);color:var(--muted)}
/* ---------- 其他模块居中修改部分 ---------- */
/* 其他和油管视频学习模块居中 */
.section {
  margin: 20px auto;  /* 上下间距为20px，并且使其居中 */
  max-width: 900px;    /* 限制最大宽度 */
  padding: 0 20px;     /* 左右内边距 */
  text-align: center;  /* 使内容居中 */
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));  /* 确保卡片在每行的宽度适应 */
  gap: 20px;           /* 增加模块之间的间距 */
  justify-items: center; /* 确保每个模块居中 */
}

.feature-card {
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.05);
  padding: 32px;
  border-radius: 12px;
  transition: transform .3s, box-shadow .4s;
  text-align: center;  /* 使模块内容居中 */
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(62,168,159,0.3);
}

/* 手机端修改 */
@media (max-width: 700px) {
  .features {
    display: flex;  /* 使用flex布局 */
    flex-direction: column; /* 垂直排列 */
    align-items: center;    /* 居中排列 */
    gap: 20px;              /* 增加间隙 */
  }

  .feature-card {
    width: 90%;  /* 限制卡片宽度为90%，确保适应小屏 */
    padding: 20px; /* 减少内边距，避免内容过于紧凑 */
  }

  .cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
}
/* ---------- CTA 按钮布局 ---------- */
.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
}

/* ✅ 桌面端布局优化版：按钮宽度固定，居中对齐，不再拉伸 */
@media (min-width: 900px) {
  .cta {
    display: grid;
    grid-template-columns: repeat(2, 280px);  /* 固定两列宽度 */
    justify-content: center;
    align-items: center;
    column-gap: 24px;
    row-gap: 16px;
  }

  /* 第一行独占两列 */
  .cta a:nth-child(1) {
    grid-column: 1 / span 2;
    justify-self: center;
    width: 280px; /* 与下面按钮保持一致 */
  }

  /* 所有按钮固定宽度，居中 */
  .cta a {
    width: 280px;
    justify-content: center;
    text-align: center;
  }
}

/* ✅ 手机端：竖排不变 */
@media (max-width: 899px) {
  .cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .cta a {
    width: auto;
  }
}

.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border:1px solid var(--line);border-radius:10px;font-weight:600;transition:.3s}
.btn.primary{background:transparent;border-color:var(--mint1)}
.btn.primary:hover{background:var(--mint1);color:var(--bg)}
.btn.ghost:hover{background:rgba(255,255,255,.05);border-color:var(--mintLt)}
/* ---------- Top5 ---------- */
.top5{max-width:420px;margin:40px auto;border:1px solid var(--line);border-radius:14px;padding:20px;background:rgba(255,255,255,.02)}
.top5 h3{margin:0 0 8px;font-size:20px}
.top5 .desc{font-size:14px;color:var(--muted);margin-bottom:12px}
.firms{display:grid;gap:10px}
.card{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:10px;transition:.3s}
.card:hover{border-color:var(--mint1);background:rgba(255,255,255,.03)}
.logo{width:56px;height:56px;object-fit:contain;border-radius:10px;background:#fff;padding:6px}
.name{font-weight:700;font-size:15px}
.info{font-size:12px;color:var(--muted)}
.deal{padding:8px 14px;background:var(--mint1);color:var(--bg);border-radius:8px;font-size:13px;font-weight:700}
.usecode{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;font-size:14px}
.code-btn{background:transparent;border:1px solid var(--mintLt);color:var(--mintLt);padding:4px 8px;border-radius:6px;font-weight:700;cursor:pointer;transition:.3s}
.code-btn:hover{background:var(--mintLt);color:var(--bg)}
/* ---------- 折扣列表 ---------- */
.discounts-section{padding:60px 20px}
.discounts-section h2{text-align:center;font-size:clamp(1.8rem,4vw,2.4rem);margin-bottom:40px}
#QQ-discounts-app{margin:0 auto;max-width:1100px}
/* ---------- 其他段落样式保持 ---------- */
.section h2{text-align:center;font-size:clamp(1.6rem,3.5vw,2.2rem);margin-bottom:40px;}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;}  /* 减小模块之间的间隙 */
.feature-card{background:var(--card);border:1px solid rgba(255,255,255,0.05);padding:32px;border-radius:12px;transition:transform .3s,box-shadow .4s;}
.feature-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(62,168,159,0.3);}
/* ---------- FAQ ---------- */
.faq-section{padding-top:40px;padding-bottom:40px;max-width:800px;margin:auto;margin-top: 0;}  /* 减少FAQ顶部与底部间距 */
.faq-section h2{text-align:center;font-size:clamp(1.8rem,4vw,2.4rem);margin-bottom:40px}
.faq-item{border:1px solid var(--line);border-radius:10px;margin-bottom:14px;background:rgba(255,255,255,.03);overflow:hidden}
.faq-item input{display:none}
.faq-question{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;font-size:17px;font-weight:600;cursor:pointer;transition:.3s}
.faq-question:hover{color:var(--mintLt)}
.faq-icon{position:relative;width:16px;height:16px;flex-shrink:0}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;background:var(--mintLt);transition:.3s}
.faq-icon::before{width:100%;height:2px;top:50%;left:50%;transform:translate(-50%,-50%)}
.faq-icon::after{width:2px;height:100%;top:50%;left:50%;transform:translate(-50%,-50%)}
.faq-answer{max-height:0;padding:0 22px;overflow:hidden;transition:max-height .35s,padding .35s}
.faq-answer p{line-height:1.7;margin-bottom:18px;color:var(--muted)}
.faq-item input:checked~.faq-answer{max-height:300px;padding:0 22px 18px}
.faq-item input:checked~.faq-question .faq-icon::after{transform:translate(-50%,-50%) scaleY(0)}
/* ----------  Discord 模块 ---------- */
.discord-wrap{margin-top:30px;padding-top:40px;padding-bottom:40px;text-align:center;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01))}
.discord-card{max-width:720px;margin:auto;border:1px solid var(--line);border-radius:18px;padding:40px 20px;background:var(--card);position:relative;overflow:hidden}
.discord-card::before{content:"";position:absolute;inset:-20%;background:radial-gradient(60% 120% at 50% -20%,rgba(62,168,159,.18),transparent 60%);z-index:0}
.discord-card>*{position:relative;z-index:1}
.discord-card h3{font-size:clamp(1.4rem,3.6vw,2rem);margin-bottom:10px}
.discord-card p{color:var(--muted);margin-bottom:20px}
.discord-btn{display:inline-block;padding:14px 26px;border-radius:999px;background:var(--mint1);color:var(--bg);font-weight:700;font-size:1rem;transition:.3s}
.discord-btn:hover{background:var(--mint2);transform:translateY(-2px)}
/* ---------- 订阅 ---------- */
.subscribe-wrap{padding:60px 20px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02))}
.subscribe{margin:auto;max-width:720px;border:1px solid var(--line);border-radius:18px;padding:40px 20px;text-align:center;position:relative;overflow:hidden;background:var(--card)}
.subscribe::before{content:"";position:absolute;inset:-20%;background:radial-gradient(60% 120% at 50% -20%,rgba(62,168,159,.18),transparent 60%);z-index:0}
.subscribe>*{position:relative;z-index:1}
.subscribe h3{font-size:clamp(1.4rem,3.6vw,2rem);margin-bottom:10px}
.subscribe p{color:var(--muted);margin-bottom:20px}
.sub-form{display:flex;gap:12px;max-width:500px;margin:auto}
.sub-form input{flex:1;height:48px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.05);color:var(--ink);outline:none}
.sub-form input:focus{border-color:var(--mint1)}
.sub-form button{padding:0 24px;height:48px;border:none;border-radius:999px;background:var(--mint1);color:var(--bg);font-weight:700;cursor:pointer;transition:.3s}
.sub-form button:hover{background:var(--mint2)}
footer{padding:40px 20px;text-align:center;font-size:13px;color:var(--muted)}
/* --------- 针对"规则汇总介绍"按钮的样式 --------- */
.rule-btn {
  padding:24px 38px;   /* 调整按钮上下/左右大小 */
  font-size:21px;      /* 调整文字大小 */
}

/* ✅ 隐藏"订阅优惠与资讯"模块 */
.subscribe-wrap {
  display: none !important;
}
/* ✅ 让第一个按钮（查看规则汇总介绍）默认高亮显示 */
.cta a:nth-child(1) {
  background: var(--mint1);
  color: var(--bg);
  border-color: var(--mint1);
}

/* 悬停时颜色略微加深，增加动效 */
.cta a:nth-child(1):hover {
  background: var(--mint2);
}

/* ---------- 当前限时折扣活动 ---------- */
.discounts-live {
  padding: 60px 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
}
.discounts-live h2 {
  text-align: center;
  font-size: clamp(1.8rem,4vw,2.4rem);
  margin-bottom: 40px;
}
.discounts-list {
  max-width: 900px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.discount-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  transition: border-color .3s, background .3s, box-shadow .4s, transform .3s;
  box-shadow: 0 0 0px rgba(62,168,159,0);
}
.discount-card:hover {
  border-color: var(--mint1);
  background: rgba(255,255,255,.05);
  box-shadow: 0 0 14px rgba(62,168,159,0.35);
  transform: translateY(-2px);
}
.discount-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.discount-logo {
  width: 50px;
  height: 50px;
  object-fit: contain;
  border-radius: 10px;
  background: #fff;
  padding: 6px;
}
.discount-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.discount-name {
  font-weight: 700;
  font-size: 16px;
}
.discount-desc {
  font-size: 14px;
  color: var(--muted);
}
.discount-rate {
  color: var(--mintLt);
  font-weight: 700;
}
.discount-extra {
  font-size: 13px;
  color: var(--muted);
}
.discount-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.code-box {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--mint1);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  transition: box-shadow .3s;
}
.code-box:hover {
  box-shadow: 0 0 8px rgba(62,168,159,0.4);
}
.code-text {
  font-weight: 700;
  color: var(--mintLt);
}
.copy-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--muted);
  transition: .2s;
}
.copy-btn:hover {
  color: var(--mintLt);
}
.btn-group {
  display: flex;
  gap: 8px;
}
.buy-btn, .rule-btn {
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 10px;
  transition: box-shadow .3s, transform .3s;
}
.buy-btn:hover, .rule-btn:hover {
  box-shadow: 0 0 10px rgba(62,168,159,0.5);
  transform: translateY(-1px);
}
.rule-btn {
  border: 1px solid var(--mintLt);
  background: transparent;
  color: var(--mintLt);
}
.rule-btn:hover {
  background: var(--mintLt);
  color: var(--bg);
}

@media(max-width:700px){
  .discount-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .discount-right {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .btn-group {
    width: 100%;
    flex-wrap: wrap;
  }
}