/* ============================================================
   dh.css — 兴晋工作室 · 视觉增强层
   在 styles.css 之后引入，全面提升页面质感与立体感
   ============================================================ */

/* ── 全局增强变量 ── */
:root {
  --shadow-c:  0 0 32px rgba(0,229,255,.22), 0 0 8px rgba(0,229,255,.12);
  --shadow-o:  0 0 32px rgba(255,98,0,.22),  0 0 8px rgba(255,98,0,.12);
  --shadow-g:  0 0 32px rgba(255,208,0,.22), 0 0 8px rgba(255,208,0,.12);
  --glow-c:    0 0 60px rgba(0,229,255,.18);
  --glow-o:    0 0 60px rgba(255,98,0,.18);
  --glass:     rgba(0,229,255,.035);
  --glass-bd:  rgba(0,229,255,.14);
  --lift:      0 8px 40px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.35);
  --tr:        all .3s cubic-bezier(.22,.68,0,1.2);
}

/* ── 全局滚动条美化 ── */
::-webkit-scrollbar { width: 4px }
::-webkit-scrollbar-track { background: var(--dk) }
::-webkit-scrollbar-thumb { background: rgba(0,229,255,.3); border-radius: 2px }
::-webkit-scrollbar-thumb:hover { background: var(--c) }

/* ── body 背景增强（层叠在原背景上） ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% -10%, rgba(0,180,255,.06) 0%, transparent 55%),
    radial-gradient(ellipse 40% 30% at 85% 90%, rgba(255,98,0,.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* ── 噪点纹理叠加，增加质感 ── */
body {
  position: relative;
}
body::before {
  background:
    radial-gradient(ellipse 90% 55% at 10% -5%,rgba(0,70,150,.20) 0%,transparent 55%),
    radial-gradient(ellipse 70% 50% at 90% 105%,rgba(255,98,0,.11) 0%,transparent 50%),
    repeating-linear-gradient(0deg,transparent,transparent 79px,rgba(0,229,255,.028) 80px),
    repeating-linear-gradient(90deg,transparent,transparent 79px,rgba(0,229,255,.028) 80px);
}

/* ══════════════════════════════════════════
   NAV 增强
══════════════════════════════════════════ */
nav {
  background: rgba(2,10,18,.92);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border-bottom: 1px solid rgba(0,229,255,.12);
  box-shadow: 0 1px 0 rgba(0,229,255,.06), 0 4px 20px rgba(0,0,0,.4);
}

/* logo 图片圆形光晕 */
.logo-img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(0,229,255,.4);
  box-shadow: 0 0 10px rgba(0,229,255,.3);
  transition: var(--tr);
}
.logo:hover .logo-img {
  box-shadow: var(--shadow-c);
  border-color: var(--c);
}

.logo-text {
  background: linear-gradient(135deg, #fff 30%, var(--c));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 3px;
}

.nav-links a {
  position: relative;
  transition: var(--tr);
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 1px;
  background: var(--c);
  transition: width .25s ease, left .25s ease;
  box-shadow: 0 0 6px var(--c);
}
.nav-links a:hover::after { width: 100%; left: 0 }

.nav-btn {
  position: relative;
  overflow: hidden;
  transition: var(--tr);
}
.nav-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,.08) 50%, transparent 100%);
  opacity: 0;
  transition: opacity .3s;
}
.nav-btn:hover::before { opacity: 1 }
.nav-btn:hover {
  box-shadow: var(--shadow-o);
  transform: translateY(-1px);
}

/* 移动端 nav 增强 */
.mob-toggle {
  border-radius: 4px;
  transition: var(--tr);
}
.mob-toggle:hover { background: rgba(0,229,255,.08); border-color: var(--c) }

.mob-nav {
  background: rgba(2,10,18,.98);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--glass-bd);
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.mob-nav a {
  transition: var(--tr);
  border-left: 2px solid transparent;
}
.mob-nav a:hover {
  border-left-color: var(--c);
  padding-left: 28px !important;
  background: rgba(0,229,255,.07) !important;
}
.mob-cta {
  border-radius: 4px;
  box-shadow: var(--shadow-o);
  border-left: 2px solid transparent !important;
}
.mob-cta:hover { box-shadow: 0 0 24px rgba(255,98,0,.45) !important }

/* ══════════════════════════════════════════
   TICKER 增强
══════════════════════════════════════════ */
.ticker-wrap {
  background: linear-gradient(90deg, rgba(0,229,255,.03), rgba(255,98,0,.03), rgba(0,229,255,.03));
  border-top: 1px solid rgba(0,229,255,.08);
  border-bottom: 1px solid rgba(0,229,255,.08);
}
.ti { color: rgba(176,216,238,.65) }
.ti i { color: var(--o); text-shadow: 0 0 6px var(--o) }

/* ══════════════════════════════════════════
   HERO 增强
══════════════════════════════════════════ */
.hero { background: radial-gradient(ellipse 100% 80% at 30% 50%, rgba(0,40,80,.3) 0%, transparent 65%) }

.hero-tag {
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 16px rgba(0,229,255,.1);
}

/* h1 标题光效 */
.hero h1 { text-shadow: 0 0 80px rgba(0,229,255,.08) }
.hl1 { text-shadow: 0 2px 20px rgba(0,0,0,.6) }
.hl2 { filter: drop-shadow(0 0 20px rgba(0,180,255,.4)) }
.hl3 { text-shadow: 0 0 30px rgba(255,98,0,.5) }

/* stats 数字发光 */
.sn {
  text-shadow: var(--shadow-c);
  position: relative;
}
.stat {
  padding: 12px 18px;
  background: rgba(0,229,255,.03);
  border: 1px solid rgba(0,229,255,.1);
  border-radius: 4px;
  transition: var(--tr);
  position: relative;
  overflow: hidden;
}
.stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c), transparent);
  opacity: .5;
}
.stat:hover {
  background: rgba(0,229,255,.07);
  border-color: rgba(0,229,255,.3);
  transform: translateY(-3px);
  box-shadow: var(--lift), 0 0 20px rgba(0,229,255,.1);
}

/* HUD 增强 */
.hero-hud {
  background: rgba(0,10,20,.6);
  border: 1px solid rgba(0,229,255,.15);
  padding: 14px 16px;
  backdrop-filter: blur(10px);
  border-radius: 2px;
  box-shadow: var(--lift);
  animation: fadeIn 1.2s ease .6s both, hudFloat 4s ease-in-out 2s infinite;
}
@keyframes hudFloat {
  0%, 100% { transform: translateY(-50%) }
  50% { transform: translateY(calc(-50% - 6px)) }
}
.hud-fill {
  background: linear-gradient(90deg, var(--c), #00b8d9);
  box-shadow: 0 0 8px rgba(0,229,255,.5);
}
.hud-sys {
  font-size: 8px;
  letter-spacing: 3px;
  color: var(--c);
  opacity: .6;
  animation: blink 2.5s infinite;
  text-shadow: 0 0 6px var(--c);
}

/* corner bracket 发光 */
.corner { opacity: .5 }
.ctL, .ctR { box-shadow: -4px -4px 12px rgba(0,229,255,.08) }
.cbL, .cbR { box-shadow: -4px 4px 12px rgba(0,229,255,.08) }

/* ══════════════════════════════════════════
   按钮增强
══════════════════════════════════════════ */
.btn-p {
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 rgba(0,229,255,0);
  transition: var(--tr);
}
.btn-p::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transition: left .5s ease;
}
.btn-p:hover::before { left: 100% }
.btn-p:hover {
  box-shadow: 0 0 28px rgba(0,229,255,.5), 0 6px 20px rgba(0,0,0,.3);
  transform: translateY(-3px);
}
.btn-p:active { transform: translateY(0) }

.btn-s {
  position: relative;
  overflow: hidden;
  transition: var(--tr);
}
.btn-s:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,.3);
}

/* ══════════════════════════════════════════
   SERVICES 服务卡片增强
══════════════════════════════════════════ */
.svc-grid { gap: 18px }

.svc-card {
  background: linear-gradient(145deg, rgba(0,20,38,.95), rgba(5,17,28,.95));
  border: 1px solid rgba(0,229,255,.12);
  border-radius: 6px;
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
  transition: var(--tr);
  box-shadow: 0 4px 24px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04);
}
.svc-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c), transparent);
  opacity: 0;
  transition: opacity .3s;
}
.svc-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 40% at 50% -10%, rgba(0,229,255,.07) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
.svc-card:hover {
  border-color: rgba(0,229,255,.4);
  transform: translateY(-6px) scale(1.01);
  box-shadow: var(--lift), var(--glow-c);
}
.svc-card:hover::before, .svc-card:hover::after { opacity: 1 }

.svc-ico {
  width: 52px; height: 52px;
  background: rgba(0,229,255,.07);
  border: 1px solid rgba(0,229,255,.2);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: 16px;
  color: var(--c);
  transition: var(--tr);
  box-shadow: 0 0 0 rgba(0,229,255,0);
}
.svc-card:hover .svc-ico {
  background: rgba(0,229,255,.12);
  box-shadow: var(--shadow-c);
  transform: scale(1.08) rotate(-3deg);
}

.svc-card h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 2px;
  margin-bottom: 10px;
  transition: color .2s;
}
.svc-card:hover h3 { color: var(--c) }

.svc-price {
  display: inline-block;
  margin-top: 14px;
  padding: 5px 12px;
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--o);
  border: 1px solid rgba(255,98,0,.3);
  background: rgba(255,98,0,.06);
  border-radius: 2px;
  text-shadow: 0 0 10px rgba(255,98,0,.4);
  clip-path: polygon(5px 0%, 100% 0%, calc(100% - 5px) 100%, 0% 100%);
}

/* ══════════════════════════════════════════
   EARNINGS 收益增强
══════════════════════════════════════════ */
.earn-panel {
  background: linear-gradient(145deg, rgba(0,16,30,.98), rgba(5,17,28,.95));
  border: 1px solid rgba(0,229,255,.15);
  border-radius: 6px;
  box-shadow: var(--lift);
  overflow: hidden;
}
.ep-head {
  background: linear-gradient(90deg, rgba(0,229,255,.08), transparent);
  border-bottom: 1px solid rgba(0,229,255,.15) !important;
  letter-spacing: 3px;
  text-shadow: 0 0 12px rgba(0,229,255,.4);
}

.tier {
  transition: var(--tr);
  border-left: 2px solid transparent !important;
  border-radius: 0 !important;
  position: relative;
}
.tier:hover {
  border-left-color: var(--c) !important;
  background: rgba(0,229,255,.06) !important;
  transform: translateX(4px);
}
.tier-name { font-weight: 700 }
.tier-pct {
  font-family: 'Orbitron', sans-serif;
  font-size: 22px !important;
  text-shadow: var(--shadow-c);
}

/* 收益侧面板 */
.earn-notes { border-radius: 6px }

.earn-note {
  background: linear-gradient(135deg, rgba(0,229,255,.04), rgba(0,229,255,.02));
  border: 1px solid rgba(0,229,255,.1);
  border-radius: 4px;
  transition: var(--tr);
  position: relative;
  overflow: hidden;
}
.earn-note::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--c), transparent);
}
.earn-note:hover {
  border-color: rgba(0,229,255,.28);
  transform: translateX(4px);
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}

/* ══════════════════════════════════════════
   REFERRAL 推荐奖励增强
══════════════════════════════════════════ */
.ref-card {
  background: linear-gradient(145deg, rgba(0,20,38,.95), rgba(5,17,28,.95));
  border: 1px solid rgba(0,229,255,.12);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  transition: var(--tr);
  box-shadow: 0 4px 20px rgba(0,0,0,.35);
}
.ref-card::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--o), transparent);
  opacity: 0;
  transition: opacity .3s;
}
.ref-card:hover {
  border-color: rgba(255,98,0,.35);
  transform: translateY(-5px);
  box-shadow: var(--lift), var(--glow-o);
}
.ref-card:hover::before { opacity: 1 }

.ref-icon {
  box-shadow: 0 0 20px rgba(255,208,0,.2) !important;
  transition: var(--tr) !important;
}
.ref-card:hover .ref-icon {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 0 30px rgba(255,208,0,.4) !important;
}

/* ══════════════════════════════════════════
   LEVEL 等级卡片增强
══════════════════════════════════════════ */
.lv-card {
  background: linear-gradient(145deg, rgba(0,16,30,.98), rgba(5,15,25,.95));
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  transition: var(--tr);
  box-shadow: 0 4px 20px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04);
}
.lv-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--lift);
}

/* 等级徽章光圈 */
.lv-badge {
  position: relative;
  transition: var(--tr);
}
.lv-card:hover .lv-badge { transform: scale(1.05) }

/* ══════════════════════════════════════════
   RULES 赔付规则增强
══════════════════════════════════════════ */
.rule-item {
  background: linear-gradient(135deg, rgba(0,20,38,.9), rgba(5,17,28,.9));
  border: 1px solid rgba(0,229,255,.1);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  transition: var(--tr);
}
.rule-item::after {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--c), rgba(0,229,255,.2));
  opacity: 0;
  transition: opacity .3s;
}
.rule-item:hover {
  border-color: rgba(0,229,255,.25);
  transform: translateY(-3px);
  box-shadow: var(--lift);
}
.rule-item:hover::after { opacity: 1 }

/* ══════════════════════════════════════════
   REQUIREMENTS 入驻要求增强
══════════════════════════════════════════ */
.req-card {
  background: linear-gradient(145deg, rgba(0,20,38,.95), rgba(5,17,28,.95));
  border: 1px solid rgba(0,229,255,.12);
  border-radius: 6px;
  transition: var(--tr);
  box-shadow: 0 4px 20px rgba(0,0,0,.35);
  position: relative;
  overflow: hidden;
}
.req-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(0,229,255,.04) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .4s;
}
.req-card:hover {
  border-color: rgba(0,229,255,.3);
  transform: translateY(-4px);
  box-shadow: var(--lift), var(--glow-c);
}
.req-card:hover::before { opacity: 1 }

/* ══════════════════════════════════════════
   APPLY 申请表单增强
══════════════════════════════════════════ */
.apply-form-wrap {
  background: linear-gradient(145deg, rgba(0,16,30,.98), rgba(2,12,20,.95));
  border: 1px solid rgba(0,229,255,.15);
  border-radius: 8px;
  box-shadow: var(--lift), var(--glow-c);
  position: relative;
  overflow: hidden;
}
.apply-form-wrap::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c), #0088ff, var(--o));
}

/* 表单输入框增强 */
.fg input, .fg select, .fg textarea,
.rfi input {
  background: rgba(0,10,20,.7) !important;
  border: 1px solid rgba(0,229,255,.15) !important;
  border-radius: 4px;
  transition: var(--tr) !important;
  caret-color: var(--c);
}
.fg input:focus, .fg select:focus, .fg textarea:focus,
.rfi input:focus {
  border-color: var(--c) !important;
  box-shadow: 0 0 0 2px rgba(0,229,255,.1), var(--shadow-c) !important;
  background: rgba(0,20,36,.8) !important;
}
.fg input:hover, .fg select:hover, .fg textarea:hover {
  border-color: rgba(0,229,255,.3) !important;
}

.apply-perks {
  background: rgba(0,229,255,.03);
  border: 1px solid rgba(0,229,255,.1);
  border-radius: 4px;
  padding: 16px 20px;
  position: relative;
}
.apply-perks::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c), transparent);
  opacity: .4;
}
.apply-perks li {
  padding: 6px 0;
  border-bottom: 1px solid rgba(0,229,255,.06);
  font-size: 14px;
  transition: color .2s;
}
.apply-perks li:last-child { border-bottom: none }
.apply-perks li:hover { color: var(--c) }

.submit-btn {
  background: linear-gradient(135deg, var(--c), #0099cc) !important;
  position: relative;
  overflow: hidden;
  transition: var(--tr) !important;
}
.submit-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  transition: left .5s ease;
}
.submit-btn:hover::before { left: 100% }
.submit-btn:hover {
  box-shadow: var(--shadow-c) !important;
  transform: translateY(-2px);
}

/* ══════════════════════════════════════════
   Q&A 问答增强
══════════════════════════════════════════ */
.qa-form {
  background: linear-gradient(145deg, rgba(0,16,30,.98), rgba(2,12,20,.95));
  border-radius: 6px;
  border: 1px solid rgba(0,229,255,.15) !important;
  box-shadow: var(--lift);
}

.qa-item {
  background: linear-gradient(135deg, rgba(0,16,30,.95), rgba(5,17,28,.95)) !important;
  border: 1px solid rgba(0,229,255,.1) !important;
  border-radius: 4px;
  transition: var(--tr);
  margin-bottom: 10px !important;
}
.qa-item:hover {
  border-color: rgba(0,229,255,.22) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}

.official-badge {
  background: linear-gradient(135deg, rgba(0,229,255,.15), rgba(0,229,255,.08)) !important;
  box-shadow: 0 0 8px rgba(0,229,255,.15);
}

.rfi-btn {
  transition: var(--tr) !important;
}
.rfi-btn:hover {
  box-shadow: var(--shadow-c) !important;
  transform: translateY(-1px);
}

/* ══════════════════════════════════════════
   FAQ 增强
══════════════════════════════════════════ */
.faq-item {
  background: linear-gradient(135deg, rgba(0,16,30,.95), rgba(5,17,28,.9)) !important;
  border: 1px solid rgba(0,229,255,.1) !important;
  border-radius: 4px;
  margin-bottom: 6px !important;
  transition: var(--tr);
}
.faq-item:hover { border-color: rgba(0,229,255,.22) !important }
.faq-item.open {
  border-color: rgba(0,229,255,.3) !important;
  box-shadow: 0 0 16px rgba(0,229,255,.08);
}

.faq-q {
  font-size: 14px;
  color: rgba(255,255,255,.9) !important;
  padding: 18px 20px !important;
}
.faq-q:hover { background: rgba(0,229,255,.04) !important }

.faq-chv {
  border-radius: 2px;
  transition: var(--tr) !important;
}
.faq-item.open .faq-chv {
  background: rgba(0,229,255,.1);
  box-shadow: 0 0 8px rgba(0,229,255,.2);
}

.faq-a { color: rgba(176,216,238,.7) !important }
.faq-item.open .faq-a { max-height: 320px !important }

/* ══════════════════════════════════════════
   JOIN 加入增强
══════════════════════════════════════════ */
.join-panel {
  background: linear-gradient(145deg, rgba(0,16,30,.98), rgba(2,12,20,.95)) !important;
  border: 1px solid rgba(0,229,255,.18) !important;
  border-radius: 8px !important;
  box-shadow: var(--lift), var(--glow-c) !important;
  position: relative;
  overflow: hidden;
}
.join-panel::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c), #0055aa, var(--c));
  background-size: 200% 100%;
  animation: shimmerBorder 3s linear infinite;
}
@keyframes shimmerBorder {
  0% { background-position: 200% 0 }
  100% { background-position: -200% 0 }
}

.step {
  transition: var(--tr);
  position: relative;
  overflow: hidden;
}
.step::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 80% at 50% -10%, rgba(0,229,255,.06) 0%, transparent 70%);
  opacity: 0;
  transition: opacity .3s;
}
.step:hover::before { opacity: 1 }
.step:hover { background: rgba(0,229,255,.04) }
.step:hover .step-n { opacity: .8 !important; text-shadow: var(--shadow-c) }
.step-n {
  transition: var(--tr);
}

.join-id {
  background: rgba(0,229,255,.05) !important;
  border: 1px solid rgba(0,229,255,.25) !important;
  border-radius: 4px;
  box-shadow: 0 0 20px rgba(0,229,255,.08);
  transition: var(--tr);
  letter-spacing: 3px !important;
}
.join-id:hover {
  box-shadow: var(--shadow-c);
  border-color: rgba(0,229,255,.5) !important;
}

/* ══════════════════════════════════════════
   SECTION HEADER 增强
══════════════════════════════════════════ */
.shdr { position: relative }
.stitle { position: relative; display: inline-block }

.sline {
  height: 2px !important;
  background: linear-gradient(90deg, var(--c), rgba(0,229,255,.3), transparent) !important;
  width: 80px !important;
  box-shadow: 0 0 8px rgba(0,229,255,.4);
}

.eye {
  letter-spacing: 5px;
  text-shadow: 0 0 12px rgba(255,98,0,.5);
}

/* ══════════════════════════════════════════
   FOOTER 增强
══════════════════════════════════════════ */
footer {
  background: linear-gradient(180deg, transparent, rgba(0,5,10,.4));
  border-top: 1px solid rgba(0,229,255,.1) !important;
  backdrop-filter: blur(10px);
}
.foot-logo {
  opacity: .8;
  transition: opacity .2s;
}
.foot-logo:hover { opacity: 1 }
.foot-links a {
  transition: var(--tr) !important;
  position: relative;
}
.foot-links a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 1px;
  background: var(--c);
  transform: scaleX(0);
  transition: transform .25s ease;
}
.foot-links a:hover::after { transform: scaleX(1) }

/* ══════════════════════════════════════════
   SCANLINE 增强
══════════════════════════════════════════ */
.scanline {
  opacity: .2;
  background: linear-gradient(90deg, transparent 10%, var(--c) 50%, transparent 90%);
  box-shadow: 0 0 8px rgba(0,229,255,.3);
}

/* ══════════════════════════════════════════
   通用动画工具
══════════════════════════════════════════ */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(0,229,255,.2) }
  50% { box-shadow: 0 0 20px rgba(0,229,255,.45) }
}
@keyframes float {
  0%, 100% { transform: translateY(0) }
  50% { transform: translateY(-8px) }
}

/* 粒子容器 */
.particles { z-index: 1 }

/* ══════════════════════════════════════════
   ★ 手机端全面优化
══════════════════════════════════════════ */
@media (max-width: 960px) {

  /* NAV */
  .nav-inner { padding: 0 16px; height: 56px }
  .logo-text { font-size: 15px; letter-spacing: 2px }
  .mob-toggle { padding: 7px 10px; font-size: 14px }

  /* HERO */
  .hero {
    padding: 70px 0 40px;
    min-height: auto;
    align-items: flex-start;
  }
  .hero-inner { max-width: 100% }
  .hero-tag {
    font-size: 10px;
    letter-spacing: 2px;
    padding: 5px 12px;
  }
  .hero h1 { font-size: clamp(26px, 8vw, 42px) }
  .hl3 { font-size: .42em; letter-spacing: 4px }
  .hero-sub { font-size: 14px; max-width: 100%; line-height: 1.75 }
  .hero-stats { gap: 10px; margin-top: 24px }
  .stat { padding: 10px 14px }
  .sn { font-size: 22px }
  .hero-btns { gap: 10px; margin-top: 24px }
  .btn-p, .btn-s {
    padding: 13px 22px;
    font-size: 12px;
    justify-content: center;
  }

  /* TICKER */
  .ti { font-size: 10px; letter-spacing: 2px }

  /* SECTIONS */
  section { padding: 56px 0 }
  .container { padding: 0 16px }
  .stitle { font-size: clamp(20px, 5.5vw, 32px) }
  .shdr { margin-bottom: 36px }

  /* SERVICE CARDS */
  .svc-grid { grid-template-columns: 1fr 1fr !important; gap: 12px }
  .svc-card { padding: 20px 16px }
  .svc-ico { width: 44px; height: 44px; font-size: 18px; margin-bottom: 12px }
  .svc-card h3 { font-size: 13px; letter-spacing: 1px }
  .svc-card p { font-size: 13px; line-height: 1.65 }
  .svc-price { font-size: 10px; padding: 4px 10px }

  /* EARNINGS */
  .earn-layout { gap: 20px }
  .ep-head { font-size: 11px; letter-spacing: 2px; padding: 12px 16px }
  .tier-pct { font-size: 18px !important }

  /* REFERRAL */
  .ref-grid { grid-template-columns: 1fr 1fr }
  .ref-card { padding: 18px 14px }

  /* LEVEL */
  .lv-grid { grid-template-columns: 1fr 1fr }
  .lv-card { padding: 16px 14px }

  /* APPLY */
  .apply-layout { gap: 20px }
  .apply-form-wrap { padding: 20px 16px }
  .fg-row { grid-template-columns: 1fr }
  .fg-contact { grid-template-columns: 90px 1fr }

  /* Q&A */
  .qa-layout { gap: 20px }
  .qa-form { padding: 18px 16px }
  .qa-form-wrap { position: static }

  /* FAQ */
  .faq-list { max-width: 100% }
  .faq-q { padding: 15px 16px !important; font-size: 13px }

  /* JOIN */
  .join-panel { padding: 32px 20px !important; border-radius: 6px !important }
  .join-panel h2 { font-size: 22px }
  .steps-row { border-radius: 4px; overflow: hidden }
  .step { padding: 14px }
  .step-n { font-size: 18px }
  .join-id { font-size: 13px; letter-spacing: 2px !important; padding: 10px 16px }

  /* FOOTER */
  .foot-inner {
    flex-direction: column;
    text-align: center;
    gap: 10px;
    padding: 20px 16px;
  }
  .foot-links { flex-wrap: wrap; justify-content: center; gap: 10px }
}

@media (max-width: 600px) {

  /* NAV */
  .nav-inner { height: 52px }
  .logo-img { width: 26px; height: 26px }
  .logo-text { font-size: 14px; letter-spacing: 1.5px }

  /* HERO */
  .hero { padding: 62px 0 36px }
  .hero h1 { font-size: clamp(24px, 9vw, 36px); line-height: 1.1 }
  .hl3 { font-size: .38em; letter-spacing: 3px }
  .hero-stats { gap: 8px }
  .stat { padding: 10px 12px; flex: 1; min-width: 0 }
  .sn { font-size: 20px }
  .sl { font-size: 10px }
  .hero-btns { flex-direction: column }
  .hero-btns .btn-p, .hero-btns .btn-s {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
  }

  /* SERVICE CARDS — 小屏单列 */
  .svc-grid { grid-template-columns: 1fr !important; gap: 10px }
  .svc-card { padding: 18px 16px; border-radius: 6px }

  /* REFERRAL 单列 */
  .ref-grid { grid-template-columns: 1fr !important }

  /* LEVEL 单列 */
  .lv-grid { grid-template-columns: 1fr !important }

  /* RULES */
  .rules-grid { grid-template-columns: 1fr !important }

  /* APPLY PERKS */
  .apply-perks { padding: 12px 14px }
  .apply-perks li { font-size: 13px }

  /* Q&A reply form 竖排 */
  .qa-reply-form.open {
    flex-direction: column;
    gap: 8px;
  }
  .rfi, .rfi-msg { flex: none; min-width: 0; width: 100% }
  .rfi-btn { width: 100%; padding: 10px }

  /* JOIN steps */
  .steps-row { border-radius: 4px }
  .step-txt { font-size: 12px }

  /* SECTION */
  section { padding: 48px 0 }
  .container { padding: 0 14px }

  /* FOOTER */
  .foot-inner { padding: 18px 14px }
  .foot-txt { font-size: 10px; text-align: center }

  /* FAQ */
  .faq-q { font-size: 13px; padding: 14px !important }
  .faq-a { font-size: 13px }

  /* 通用按钮触控区增大 */
  .btn-p, .btn-s { min-height: 44px }
  .submit-btn { min-height: 46px; font-size: 12px }
}

/* 极小屏（iPhone SE等） */
@media (max-width: 375px) {
  .hero h1 { font-size: 22px }
  .stat { padding: 8px 10px }
  .sn { font-size: 18px }
  .hero-tag { font-size: 9px; padding: 4px 10px }
  .container { padding: 0 12px }
}

/* ══════════════════════════════════════════
   触摸设备优化
══════════════════════════════════════════ */
@media (hover: none) {
  /* 移除悬浮 transform，避免手机点击闪烁 */
  .svc-card:hover,
  .ref-card:hover,
  .lv-card:hover,
  .rule-item:hover,
  .req-card:hover { transform: none }

  .btn-p:hover,
  .btn-s:hover,
  .submit-btn:hover { transform: none }

  /* 确保触摸目标足够大 */
  .mob-nav a { min-height: 48px }
  .faq-q { min-height: 48px }
  .qa-reply-toggle { min-height: 44px }
}

/* ══════════════════════════════════════════
   深色模式 & 高对比度辅助
══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .scanline,
  .ticker,
  .hero-hud { animation: none !important }
  * { transition-duration: .01ms !important }
}