/* ==========================================================================
   VPNDM — pricing.css
   套餐页（plans.html）专属样式：页首氛围 / 计费方式切换 / 选档建议 /
   权益清单 / 支付方式 / 退款面板 / 底部拉新细带
   ========================================================================== */

/* ---------- 页首 ---------- */
.pg-hero{
  position:relative;
  overflow-x:clip;
  max-width:100%;
  padding-top:64px;
  padding-bottom:56px;
  background:linear-gradient(180deg,var(--bg-top) 0%,var(--bg-bottom) 100%);
}
.pg-hero .stardust{position:absolute;inset:0;width:100%;height:100%}
.pg-hero .wrap{position:relative;z-index:1}
.pg-hero-in{max-width:860px;margin-inline:auto;text-align:center}
.pg-hero h1{margin-top:20px;font-size:clamp(34px,5vw,58px);line-height:1.12}
.pg-hero .lede{margin-top:20px;font-size:17px;line-height:1.82}
.pg-hero .lede strong{color:var(--ink)}
.pg-hero .ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}
.pg-hero .trust{justify-content:center;margin-top:26px}
.pg-hero .stat-band{margin-top:34px}

/* ---------- 计费方式切换 ---------- */
.tabs-center .tablist{margin-inline:auto}
.bill-note{
  max-width:780px;
  margin:22px auto 0;
  padding:14px 18px;
  border:1px solid var(--border);
  border-left:3px solid var(--coral);
  border-radius:var(--r);
  background:var(--panel-3);
  font-size:14px;
  line-height:1.78;
  color:var(--ink-2);
}

/* ---------- 套餐卡补充 ---------- */
.plan-fit{margin-top:14px;font-size:13px;line-height:1.68;color:var(--muted)}

/* ---------- 流量包补充 ---------- */
.pack-foot{margin-top:16px;display:flex}
.pack-foot .btn{flex-shrink:0;white-space:nowrap}

/* ---------- 选档建议 ---------- */
.fit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.fit-grid > *{min-width:0}
.fit-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:22px 20px;
  box-shadow:var(--shadow-soft);
}
.fit-card h3{font-size:17px}
.fit-card .fit-price{
  margin-top:8px;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--accent-dark);
}
.fit-card p{margin-top:12px;font-size:14px;line-height:1.78}

/* ---------- 权益清单 ---------- */
.incl-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px 26px;
  max-width:980px;
  margin-inline:auto;
}
.incl-grid li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:14px;
  line-height:1.72;
  color:var(--muted);
}
.incl-grid svg{flex-shrink:0;margin-top:3px;color:var(--success)}
.incl-grid b{color:var(--ink)}

/* ---------- 支付方式 ---------- */
.pay-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  max-width:860px;
  margin-inline:auto;
}
.pay-grid > *{min-width:0}
.pay-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:20px;
  text-align:center;
  box-shadow:var(--shadow-soft);
}
.pay-card b{
  display:block;
  font-family:var(--font-display);
  font-weight:800;
  font-size:16px;
  color:var(--ink);
}
.pay-card span{display:block;margin-top:8px;font-size:13px;line-height:1.7;color:var(--muted)}

/* ---------- 退款面板 ---------- */
.refund-panel{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:26px;
  align-items:center;
  background:var(--panel);
  border:1px solid var(--coral);
  border-radius:var(--r);
  padding:26px 24px;
  box-shadow:0 18px 36px -14px var(--coral-glow),inset 0 1px 0 var(--hl);
}
.refund-num{
  font-family:var(--font-display);
  font-weight:900;
  font-size:52px;
  line-height:1;
  letter-spacing:-.03em;
  color:var(--accent);
  white-space:nowrap;
}
.refund-num i{
  display:block;
  margin-top:8px;
  font-style:normal;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--muted-2);
}
.refund-panel p{font-size:14.5px;line-height:1.8}
.refund-panel p + p{margin-top:10px}

/* ---------- 底部拉新细带 ---------- */
.cta-slim{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px;
  margin-top:34px;
  background:var(--panel);
  border:1px solid var(--accent);
  border-radius:var(--r);
  padding:20px 22px;
  box-shadow:var(--shadow-panel);
}
.cta-slim .cta-slim-copy{flex:1 1 320px;min-width:0}
.cta-slim b{
  display:block;
  font-family:var(--font-display);
  font-weight:800;
  font-size:17px;
  letter-spacing:-.01em;
  color:var(--ink);
}
.cta-slim p{margin-top:6px;font-size:13.5px}
.cta-slim .btn{flex-shrink:0;white-space:nowrap}

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  .fit-grid{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
}
@media (max-width:980px){
  .pay-grid{grid-template-columns:1fr;max-width:480px}
  .incl-grid{grid-template-columns:1fr}
  .refund-panel{grid-template-columns:1fr;gap:16px}
}
@media (max-width:768px){
  .pg-hero{padding-top:48px;padding-bottom:44px}
  .pg-hero .lede{font-size:15.5px}
  .pg-hero .ctas .btn{flex:1 1 150px}
  .cta-slim .btn{width:100%}
}
@media (max-width:640px){
  .pg-hero h1{font-size:clamp(30px,8.4vw,40px)}
  .pg-hero .ctas .btn{width:100%;flex-basis:100%}
  .refund-num{font-size:42px}
  .pay-grid{max-width:100%}
}
@media (prefers-reduced-motion:reduce){
  .pg-hero .stardust{display:none}
}