/* =========================================================
   首页专用样式（只被 index.php 加载）
   依赖 app.css 中的 :root 变量
   ========================================================= */

/* ---------- 背景层 ---------- */
.bg-scan{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 3px,
    rgba(80,140,200,.012) 3px,
    rgba(80,140,200,.012) 4px
  );
}

/* ---------- 顶部导航（透明 → 实色） ---------- */
.home-topbar{
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-bottom:1px solid transparent;
  transition:background .3s, border-color .3s, backdrop-filter .3s;
}
.home-topbar.scrolled{
  background:rgba(6,9,16,.85);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.home-nav a{font-size:13.5px}

/* ---------- 首页主体 ---------- */
.home-main{padding-bottom:0}

/* ---------- Hero ---------- */
.hero2{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:48px;
  align-items:center;
  max-width:1200px;
  margin:0 auto;
  padding:80px 20px 64px;
}

.hero2-tag{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 12px;border-radius:20px;
  background:rgba(53,211,234,.08);
  border:1px solid rgba(53,211,234,.28);
  color:#7fe6f7;font-size:11.5px;letter-spacing:1.4px;
  margin-bottom:22px;
}
.hero2-tag .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 10px var(--cyan);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.5;transform:scale(.85)}
}

.hero2-title{
  font-size:clamp(30px, 4.4vw, 52px);
  line-height:1.16;
  letter-spacing:-.5px;
  font-weight:700;
  color:var(--txt-hi);
  margin-bottom:20px;
}
.hero2-title span{
  background:linear-gradient(110deg, var(--cyan) 10%, var(--blue) 90%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero2-desc{
  color:var(--txt-dim);
  font-size:15px;
  line-height:1.85;
  max-width:600px;
  margin-bottom:28px;
}
.hero2-desc b{color:var(--txt)}
.hero2-desc .hl{color:#ffd18a}

.hero2-actions{
  display:flex;gap:12px;flex-wrap:wrap;margin-bottom:36px;
}
.btn-lg{
  padding:12px 24px;
  font-size:14.5px;
  border-radius:10px;
}
.btn-lg .arrow{
  display:inline-block;transition:transform .2s;margin-left:4px;
}
.btn-lg:hover .arrow{transform:translateX(4px)}

/* Hero 数据条 */
.hero2-stats{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding:20px 24px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(14,21,36,.55);
  backdrop-filter:blur(8px);
  max-width:640px;
}
.hs{flex:1;min-width:80px}
.hs-num{
  font-size:26px;font-weight:700;
  color:var(--txt-hi);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.5px;
  line-height:1.1;
}
.hs-num i{
  font-style:normal;font-size:14px;
  color:var(--cyan);margin-left:2px;
}
.hs-label{
  font-size:11.5px;color:var(--txt-dim);
  margin-top:4px;letter-spacing:.4px;
}
.hs-sep{
  width:1px;height:32px;
  background:linear-gradient(180deg,transparent,var(--line),transparent);
}

/* Hero 右侧视觉卡片 */
.hero2-visual{
  position:relative;
  display:flex;justify-content:center;
}
.vis-card{
  width:100%;max-width:380px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(10,16,28,.85);
  backdrop-filter:blur(10px);
  overflow:hidden;
  box-shadow:
    0 20px 60px rgba(0,0,0,.4),
    0 0 0 1px rgba(88,160,220,.06),
    inset 0 1px 0 rgba(255,255,255,.03);
  transform:perspective(1200px) rotateY(-4deg) rotateX(2deg);
  transition:transform .5s ease;
}
.vis-card:hover{
  transform:perspective(1200px) rotateY(-1deg) rotateX(0deg);
}
.vis-head{
  display:flex;align-items:center;gap:6px;
  padding:10px 14px;
  background:rgba(6,10,18,.6);
  border-bottom:1px solid var(--line);
}
.vis-dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.vis-dot.red  {background:#ff5d6c}
.vis-dot.amber{background:#f5a524}
.vis-dot.green{background:#3ddc97}
.vis-title{
  margin-left:auto;font-size:11px;color:var(--txt-dim);
  font-family:ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:.5px;
}
.vis-body{padding:18px}
.vis-line{
  display:flex;justify-content:space-between;
  font-size:12.5px;padding:6px 0;
  font-family:ui-monospace,Menlo,Consolas,monospace;
}
.vis-k{color:var(--txt-dim);letter-spacing:1px}
.vis-v{color:var(--txt-hi)}
.vis-v.accent{color:var(--cyan)}
.vis-v.ok{color:var(--green)}
.vis-sep{
  height:1px;margin:14px 0;
  background:linear-gradient(90deg,transparent,var(--line),transparent);
}
.vis-code{
  display:flex;flex-direction:column;gap:4px;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:12px;
  color:var(--txt-dim);
}
.vis-code span{
  padding:5px 9px;
  background:rgba(53,211,234,.04);
  border:1px solid rgba(53,211,234,.12);
  border-radius:5px;
}
.vis-code span.dim{color:#3d4a5e;text-align:center;letter-spacing:2px}
.vis-foot{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:16px;padding-top:12px;
  border-top:1px dashed var(--line);
  font-size:11px;
}
.vis-badge{
  padding:2px 8px;border-radius:4px;
  background:rgba(245,165,36,.12);
  border:1px solid rgba(245,165,36,.3);
  color:#ffd18a;letter-spacing:1.2px;font-size:10.5px;
}
.vis-time{color:#4d5b70;font-family:ui-monospace,monospace}

/* ---------- 声明条 ---------- */
.notice-strip{
  border-top:1px solid rgba(245,165,36,.15);
  border-bottom:1px solid rgba(245,165,36,.15);
  background:
    linear-gradient(90deg, rgba(245,165,36,.03), rgba(245,165,36,.06), rgba(245,165,36,.03));
}
.notice-inner{
  max-width:1200px;margin:0 auto;
  padding:16px 20px;
  display:flex;align-items:center;gap:14px;
}
.notice-icon{
  flex-shrink:0;
  width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(245,165,36,.15);
  border:1px solid rgba(245,165,36,.4);
  color:#ffd18a;font-weight:700;font-size:12px;
}
.notice-text{
  font-size:13px;color:#e8c98a;line-height:1.6;
}
.notice-text b{color:#ffb84d}

/* ---------- 通用 section ---------- */
.sec{
  max-width:1200px;
  margin:0 auto;
  padding:88px 20px;
}
.sec-alt{
  max-width:none;
  background:
    linear-gradient(180deg, transparent, rgba(88,140,200,.02) 20%, rgba(88,140,200,.02) 80%, transparent);
  border-top:1px solid rgba(88,130,190,.06);
  border-bottom:1px solid rgba(88,130,190,.06);
}
.sec-alt > *{max-width:1200px;margin-left:auto;margin-right:auto}

.sec-head{
  text-align:center;
  margin-bottom:52px;
}
.sec-k{
  display:inline-block;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:11px;letter-spacing:2.4px;
  color:var(--cyan);
  padding:4px 10px;
  border:1px solid rgba(53,211,234,.25);
  border-radius:4px;
  margin-bottom:16px;
}
.sec-head h2{
  font-size:clamp(22px, 3vw, 32px);
  letter-spacing:-.3px;
  margin-bottom:12px;
}
.sec-head p{
  color:var(--txt-dim);
  font-size:14.5px;
  max-width:560px;
  margin:0 auto;
}

/* ---------- 功能卡片网格 ---------- */
.feat-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}
.feat-card{
  position:relative;
  padding:26px 24px;
  border:1px solid var(--line);
  border-radius:12px;
  background:linear-gradient(180deg, rgba(14,21,36,.7), rgba(10,16,28,.5));
  transition:.25s;
  overflow:hidden;
}
.feat-card::before{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(400px 180px at 100% 0%, rgba(53,211,234,.08), transparent 70%);
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.feat-card:hover{
  border-color:rgba(88,160,220,.35);
  transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(0,0,0,.3);
}
.feat-card:hover::before{opacity:1}

.feat-num{
  display:inline-block;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:11px;letter-spacing:1.6px;
  color:var(--cyan);
  padding:3px 9px;
  border:1px solid rgba(53,211,234,.28);
  border-radius:4px;
  margin-bottom:16px;
}
.feat-card h3{
  font-size:16px;
  margin-bottom:10px;
  letter-spacing:-.2px;
}
.feat-card > p{
  color:var(--txt-dim);
  font-size:13.5px;
  line-height:1.75;
  margin-bottom:16px;
}
.feat-list{
  list-style:none;
  padding:0;
  border-top:1px dashed var(--line);
  padding-top:14px;
}
.feat-list li{
  position:relative;
  padding-left:16px;
  font-size:12.5px;
  color:var(--txt);
  line-height:1.9;
}
.feat-list li::before{
  content:"";
  position:absolute;left:0;top:.85em;
  width:5px;height:5px;border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 6px rgba(53,211,234,.6);
}
.feat-list b{color:var(--cyan)}

/* 卡片个性化色相微调 */
.feat-b .feat-num{color:#a8c6ff;border-color:rgba(79,140,255,.35)}
.feat-b .feat-list li::before{background:var(--blue);box-shadow:0 0 6px rgba(79,140,255,.6)}
.feat-b::before{background:radial-gradient(400px 180px at 100% 0%, rgba(79,140,255,.08), transparent 70%)}

.feat-c .feat-num{color:#ffd18a;border-color:rgba(245,165,36,.35)}
.feat-c .feat-list li::before{background:var(--amber);box-shadow:0 0 6px rgba(245,165,36,.6)}

.feat-d .feat-num{color:#8ff0c4;border-color:rgba(61,220,151,.35)}
.feat-d .feat-list li::before{background:var(--green);box-shadow:0 0 6px rgba(61,220,151,.6)}

/* ---------- 流程 ---------- */
.flow{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  gap:12px;
  align-items:center;
}
.flow-step{
  padding:22px 20px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(14,21,36,.5);
  position:relative;
}
.flow-idx{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:20px;font-weight:600;
  color:var(--cyan);
  letter-spacing:-.5px;
  margin-bottom:10px;
  opacity:.85;
}
.flow-step h4{
  font-size:14.5px;
  margin-bottom:6px;
}
.flow-step p{
  color:var(--txt-dim);
  font-size:12.5px;
  line-height:1.7;
}
.flow-arrow{
  width:24px;height:1px;
  background:linear-gradient(90deg, var(--line), rgba(53,211,234,.5), var(--line));
  position:relative;
}
.flow-arrow::after{
  content:"";
  position:absolute;right:0;top:-3px;
  width:0;height:0;
  border-left:6px solid rgba(53,211,234,.7);
  border-top:3.5px solid transparent;
  border-bottom:3.5px solid transparent;
}

/* ---------- 会员等级 ---------- */
.plan-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:22px;
  max-width:840px;
  margin:0 auto;
}
.plan{
  position:relative;
  padding:32px 28px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(14,21,36,.6);
  overflow:hidden;
  transition:.25s;
}
.plan:hover{transform:translateY(-3px)}

.plan-normal{border-color:rgba(124,139,163,.25)}
.plan-normal .plan-badge{
  background:rgba(124,139,163,.14);
  border-color:rgba(124,139,163,.35);
  color:#b8c4d6;
}

.plan-diamond{
  border-color:rgba(53,211,234,.45);
  background:linear-gradient(180deg, rgba(53,211,234,.06), rgba(14,21,36,.7));
  box-shadow:0 0 0 1px rgba(53,211,234,.08), 0 20px 60px rgba(0,0,0,.35);
}
.plan-diamond .plan-badge{
  background:rgba(53,211,234,.15);
  border-color:rgba(53,211,234,.5);
  color:#7fe6f7;
}
.plan-glow{
  position:absolute;
  top:-60px;right:-60px;
  width:220px;height:220px;
  background:radial-gradient(circle, rgba(53,211,234,.22), transparent 65%);
  pointer-events:none;
}

.plan-head{margin-bottom:22px}
.plan-badge{
  display:inline-block;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:10.5px;letter-spacing:2px;
  padding:3px 10px;border-radius:4px;border:1px solid;
  margin-bottom:14px;
}
.plan-head h3{
  font-size:22px;
  margin-bottom:6px;
  letter-spacing:-.3px;
}
.plan-sub{
  color:var(--txt-dim);
  font-size:13px;
}

.plan-list{
  list-style:none;
  padding:0;
  border-top:1px solid var(--line);
  padding-top:20px;
  margin-bottom:24px;
}
.plan-list li{
  position:relative;
  padding:8px 0 8px 26px;
  font-size:13.5px;
  color:var(--txt);
}
.plan-list li::before{
  content:"";
  position:absolute;left:0;top:50%;
  transform:translateY(-50%);
  width:14px;height:14px;
  border-radius:4px;
}
.plan-list li.yes::before{
  background:rgba(61,220,151,.15);
  border:1px solid rgba(61,220,151,.5);
}
.plan-list li.yes::after{
  content:"";
  position:absolute;left:5px;top:50%;
  width:4px;height:7px;
  border-right:1.5px solid #3ddc97;
  border-bottom:1.5px solid #3ddc97;
  transform:translateY(-65%) rotate(45deg);
}
.plan-list li.no{
  color:#5a6a80;
}
.plan-list li.no::before{
  background:rgba(124,139,163,.08);
  border:1px solid rgba(124,139,163,.25);
}
.plan-list li.no::after{
  content:"";
  position:absolute;left:4px;top:50%;
  width:6px;height:1.5px;
  background:#5a6a80;
  transform:translateY(-50%);
}
.plan-note{
  text-align:center;
  font-size:11.5px;
  color:var(--txt-dim);
  margin-top:12px;
}

/* ---------- FAQ ---------- */
.faq{
  max-width:780px;
  margin:0 auto;
  display:flex;flex-direction:column;gap:10px;
}
.faq-item{
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(14,21,36,.5);
  overflow:hidden;
  transition:border-color .2s;
}
.faq-item[open]{
  border-color:rgba(88,160,220,.35);
  background:rgba(14,21,36,.7);
}
.faq-item summary{
  list-style:none;
  padding:16px 20px 16px 46px;
  cursor:pointer;
  font-size:14px;
  color:var(--txt-hi);
  position:relative;
  transition:.2s;
  user-select:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before,
.faq-item summary::after{
  content:"";
  position:absolute;left:20px;
  background:var(--cyan);
  border-radius:2px;
  transition:transform .25s;
}
.faq-item summary::before{
  top:50%;width:12px;height:1.5px;transform:translateY(-50%);
}
.faq-item summary::after{
  top:50%;width:1.5px;height:12px;transform:translateY(-50%);
}
.faq-item[open] summary::after{
  transform:translateY(-50%) scaleY(0);
}
.faq-item[open] summary{
  color:var(--cyan);
  border-bottom:1px solid var(--line);
}
.faq-item summary:hover{
  background:rgba(88,140,200,.05);
}
.faq-body{
  padding:16px 20px 18px 46px;
  font-size:13.5px;
  line-height:1.8;
  color:var(--txt-dim);
}
.faq-body b{color:var(--txt-hi)}

/* ---------- 底部 CTA ---------- */
.cta{
  border-top:1px solid var(--line);
  background:
    radial-gradient(600px 240px at 50% 0%, rgba(53,211,234,.08), transparent 65%),
    linear-gradient(180deg, transparent, rgba(10,16,28,.5));
}
.cta-inner{
  max-width:720px;
  margin:0 auto;
  padding:80px 20px;
  text-align:center;
}
.cta-inner h2{
  font-size:clamp(22px, 3vw, 30px);
  margin-bottom:12px;
  letter-spacing:-.3px;
}
.cta-inner p{
  color:var(--txt-dim);
  font-size:14.5px;
  margin-bottom:28px;
}
.cta-actions{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
}

/* =========================================================
   响应式
   ========================================================= */
@media (max-width:1024px){
  .hero2{
    grid-template-columns:1fr;
    gap:36px;
    padding:60px 20px 52px;
  }
  .hero2-visual{order:-1;max-width:100%}
  .vis-card{max-width:420px;transform:none}
  .feat-grid{grid-template-columns:repeat(2, 1fr)}
  .flow{
    grid-template-columns:1fr;
    gap:14px;
  }
  .flow-arrow{
    width:1px;height:24px;margin:0 auto;
    background:linear-gradient(180deg, var(--line), rgba(53,211,234,.5), var(--line));
  }
  .flow-arrow::after{
    right:auto;top:auto;bottom:0;left:-3px;
    border-left:3.5px solid transparent;
    border-right:3.5px solid transparent;
    border-top:6px solid rgba(53,211,234,.7);
    border-bottom:none;
  }
}

@media (max-width:768px){
  .home-topbar{
    background:rgba(6,9,16,.85);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom-color:var(--line);
  }
  .home-nav{
    order:4;display:none;width:100%;flex-direction:column;
    margin:0;padding-top:8px;border-top:1px solid var(--line);
  }
  body.nav-open .home-nav{display:flex}
  .home-nav a{padding:10px 12px}
  .userbox{order:3;margin-left:auto}

  .hero2{padding:44px 16px 40px}
  .hero2-title{font-size:28px}
  .hero2-desc{font-size:14px}
  .hero2-stats{padding:16px 18px;gap:14px}
  .hs-num{font-size:22px}

  .sec{padding:60px 16px}
  .sec-head{margin-bottom:36px}
  .feat-grid{grid-template-columns:1fr;gap:14px}
  .plan-grid{grid-template-columns:1fr;gap:16px}
  .plan{padding:26px 22px}

  .notice-inner{padding:14px 16px;gap:10px}
  .notice-text{font-size:12.5px}

  .vis-card{max-width:100%}

  .cta-inner{padding:60px 20px}
  .cta-actions{flex-direction:column;align-items:stretch}
  .cta-actions .btn{width:100%}
}

@media (max-width:420px){
  .hero2-stats{
    flex-wrap:wrap;gap:12px;
  }
  .hs{min-width:calc(50% - 10px)}
  .hs-sep{display:none}
  .hero2-actions{flex-direction:column}
  .hero2-actions .btn{width:100%}
}