/* ============================================================
   定价页 — 白底大气风格（同首页）
   背景：#f8fafc 浅灰白
   文字：深色 #0f172a / #334155 / #475569 / #94a3b8
   卡片：白底 + 彩色弧形头部（绿/橙/紫/金）
   对比表：浅灰底 + 彩色表头
   ============================================================ */

.pricing-page {
  --p-bg: #f8fafc;
  --p-card: #fff;
  --p-text: #475569;
  --p-title: #0f172a;
  --p-border: #e2e8f0;
  background: var(--p-bg);
  font-family: 'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
}

/* 去掉网格和粒子 */
.ph-grid-bg, #ph-particles { display: none !important; }
.pricing-page main { position: relative; z-index: 1; padding-top: 60px !important; }

/* ---------- Hero — 白底简洁 ---------- */
.ph-hero {
  padding: 80px 20px 24px;
  text-align: center;
}
.ph-hero__label {
  font-size: 12px; letter-spacing: .25em;
  color: #3b82f6; text-transform: uppercase;
  margin-bottom: 16px; display: block; font-weight: 700;
}
.ph-hero__title {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 900; color: var(--p-title);
  margin-bottom: 14px; line-height: 1.15; letter-spacing: -0.5px;
}
.ph-hero__title .highlight {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.ph-hero__desc {
  font-size: 17px; color: var(--p-text);
  max-width: 560px; margin: 0 auto 32px; line-height: 1.7;
}

/* ---------- 方案切换标签 — 白底胶囊 ---------- */
.ph-tabs {
  display: inline-flex; flex-wrap: wrap; gap: 4px; justify-content: center;
  background: #fff; border: 1px solid var(--p-border);
  border-radius: 30px; padding: 5px; margin-bottom: 48px;
  box-shadow: 0 2px 8px rgba(15,23,42,.04);
}
.ph-tab {
  padding: 10px 26px; font-size: 14px; font-weight: 700;
  color: var(--p-text); background: none; border: none;
  border-radius: 25px; cursor: pointer; transition: all .25s; position: relative;
}
.ph-tab:hover { color: #1e40af; }
.ph-tab.active {
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  color: #fff; box-shadow: 0 4px 14px rgba(59,130,246,.35);
}
.ph-tab--hot::after {
  content: 'HOT'; position: absolute; top: -10px; right: -8px;
  font-size: 9px; font-weight: 700; background: #ef4444; color: #fff;
  padding: 2px 6px; border-radius: 4px;
}

/* ---------- 价格卡 — 4列等高，彩色弧形头部 ---------- */
.ph-grid {
  max-width: 1280px; margin: 0 auto 70px; padding: 0 24px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  align-items: stretch;
}
.ph-card {
  background:#fff;border-radius:18px;display:flex;flex-direction:column;transition:.35s cubic-bezier(.4,0,.2,1);position:relative;animation:fadeUp .55s ease both;overflow:hidden;
  border:1px solid var(--p-border);box-shadow:0 4px 24px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.03);
}
.ph-card:nth-child(2){animation-delay:.08s}
.ph-card:nth-child(3){animation-delay:.16s}
.ph-card:nth-child(4){animation-delay:.24s}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.ph-card:hover{transform:translateY(-7px);box-shadow:0 24px 56px rgba(15,23,42,.12),0 10px 24px rgba(15,23,42,.07)}

/* ====== 彩色弧形头部 ====== */
.price-head{
  padding:30px 26px 24px;text-align:center;position:relative;
  border-radius:18px 18px 0 0;
}
.price-head::after{
  content:'';position:absolute;left:-2px;right:-2px;bottom:-20px;height:22px;border-radius:50%;
}
.card-free .price-head{background:linear-gradient(160deg,#059669,#10b981 35%,#34d399);box-shadow:inset 0 -4px 12px rgba(0,0,0,.08);}
.card-free .price-head::after{background:linear-gradient(90deg,rgba(16,185,129,.15),transparent);}
.card-trial .price-head{background:linear-gradient(160deg,#c2410c,#ea580c 35%,#fb923c);box-shadow:inset 0 -4px 12px rgba(0,0,0,.08);}
.card-trial .price-head::after{background:linear-gradient(90deg,rgba(234,88,12,.15),transparent);}
.card-vip .price-head{background:linear-gradient(160deg,#6d28d9,#7c3aed 35%,#8b5cf6);box-shadow:inset 0 -4px 12px rgba(0,0,0,.10);}
.card-vip .price-head::after{background:linear-gradient(90deg,rgba(124,58,237,.15),transparent);}
.card-svip .price-head{background:linear-gradient(160deg,#b45309,#d97706 35%,#f59e0b);box-shadow:inset 0 -4px 12px rgba(0,0,0,.08);}
.card-svip .price-head::after{background:linear-gradient(90deg,rgba(217,119,6,.15),transparent);}

.price-head .ph-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:4px 14px;border-radius:20px;margin-bottom:8px;background:rgba(255,255,255,.22);color:#fff;border:1px solid rgba(255,255,255,.28)}
.price-head .ph-name{font-size:28px;font-weight:900;line-height:1.2;margin-bottom:4px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.15)}
.price-head .ph-sub{font-size:13px;opacity:.82;color:rgba(255,255,255,.88)}

/* 徽章 */
.ph-card .badge{position:absolute;top:14px;right:16px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;border-radius:20px;z-index:2;background:rgba(255,255,255,.22);color:#fff;border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(4px)}
.ph-card .badge.green{background:rgba(16,185,129,.28)}
.ph-card .badge.orange{background:rgba(234,88,12,.28)}
.ph-card .badge.purple{background:rgba(124,58,237,.28)}
.ph-card .badge.gold{background:rgba(217,119,6,.28)}

/* 价格区 */
.price-body{padding:24px 20px 0;flex:1;display:flex;flex-direction:column}
.ph-card .pp{font-size:40px;font-weight:900;line-height:1;margin:4px 0 2px;letter-spacing:-1.5px;color:#0f172a}
.ph-card .pp small{font-size:14px;font-weight:500;color:#94a3b8;margin-left:3px}
.ph-card .pop-orig{display:block;font-size:12px;color:#cbd5e1;margin-top:4px;text-decoration:line-through}
.ph-card .pd{font-size:13px;color:#94a3b8;margin-bottom:18px;line-height:1.5}

/* 功能列表 */
.ph-card .feat-full{list-style:none;margin:0 0 8px;flex:none}
.ph-card li{padding:5px 0;font-size:13px;color:#475569;display:flex;gap:8px;align-items:flex-start;line-height:1.4}
.ph-card li::before{content:'✓';font-weight:800;flex-shrink:0;font-size:14px;width:18px;text-align:center;margin-top:1px}
.card-free li::before{color:#059669}
.card-trial li::before{color:#ea580c}
.card-vip li::before{color:#6d28d9}
.card-svip li::before{color:#b45309}

/* 展开更多按钮 */
.feat-more-wrap{text-align:center;margin-bottom:16px;flex:none}
.feat-more-btn{background:none;border:1px solid var(--p-border);color:#3b82f6;font-size:12px;font-weight:600;padding:5px 16px;border-radius:20px;cursor:pointer;transition:.25s;font-family:'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif}
.feat-more-btn:hover{background:#eff6ff;border-color:#3b82f6}
.feat-rest{list-style:none;margin:10px 0 0;max-height:0;overflow:hidden;transition:max-height .35s ease}
.feat-more-wrap.expanded .feat-rest{max-height:600px}
.feat-rest li{padding:5px 0;font-size:13px;color:#475569;display:flex;gap:8px;align-items:flex-start;line-height:1.4}
.feat-rest li::before{content:'✓';font-weight:800;flex-shrink:0;font-size:14px;width:18px;text-align:center;margin-top:1px}

/* 按钮区 */
.price-foot{padding:16px 20px 24px;margin-top:auto}

/* 按钮样式 */
.ph-card__btn{width:100%;padding:14px;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;border:none;transition:.3s cubic-bezier(.4,0,.2,1);font-family:'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;letter-spacing:.02em;text-decoration:none;display:block;text-align:center}
.ph-card__btn--free{background:#f8fafc;border:2px solid var(--p-border);color:#475569}
.ph-card__btn--free:hover{border-color:#059669;color:#059669;background:rgba(5,150,105,.04);transform:translateY(-2px)}
.ph-card__btn--vip{background:linear-gradient(135deg,#6d28d9,#7c3aed);color:#fff;box-shadow:0 8px 24px rgba(109,40,217,.3)}
.ph-card__btn--vip:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(109,40,217,.45)}
.ph-card__btn--svip{background:linear-gradient(135deg,#b45309,#f59e0b);color:#fff;box-shadow:0 8px 24px rgba(180,69,9,.3)}
.ph-card__btn--svip:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(180,69,9,.45)}
.ph-card.card-trial .ph-card__btn--free,
.ph-card.card-trial .ph-card__btn--trial{background:linear-gradient(135deg,#c2410c,#ea580c);color:#fff;box-shadow:0 8px 24px rgba(194,65,12,.3)}
.ph-card.card-trial .ph-card__btn--free:hover,
.ph-card.card-trial .ph-card__btn--trial:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(194,65,12,.45)}

/* ---------- 功能全面对比 — 浅色底 + 彩色表头 ---------- */
.ph-compare { max-width: 1280px; margin: 0 auto 70px; padding: 0 24px; }
.ph-compare__title { text-align: center; font-size: 30px; font-weight: 900; color: #0f172a; margin-bottom: 8px; letter-spacing: -0.5px; }
.ph-compare__sub { text-align: center; font-size: 14px; color: #94a3b8; margin-bottom: 36px; }

/* 对比表容器 — 浅灰底，区别于纯白卡片 */
.ph-compare__table {
  overflow-x: auto;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--p-border);
  box-shadow: 0 4px 24px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.03);
}
.ph-compare__table table { width: 100%; min-width: 720px; border-collapse: collapse; }

/* 表头 — 4列彩色渐变 */
.c-hd {
  font-size: 13px; font-weight: 700; letter-spacing: .06em;
  padding: 18px 14px; text-align: center; color: #fff;
}
.c-hd:first-child {
  width: 32%; text-align: left;
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  color: #334155; font-size: 14px; font-weight: 700;
  border-radius: 17px 0 0 0;
}
.c-hd-free { background: linear-gradient(160deg, #059669, #34d399); }
.c-hd-trial { background: linear-gradient(160deg, #c2410c, #fb923c); }
.c-hd-vip { background: linear-gradient(160deg, #6d28d9, #8b5cf6); }
.c-hd-svip { background: linear-gradient(160deg, #b45309, #f59e0b); border-radius: 0 17px 0 0; }

/* 单元格 */
.ph-compare__table td {
  padding: 13px 14px; border-top: 1px solid #f1f5f9;
  font-size: 13.5px; vertical-align: middle;
}
.c-name { color: #334155; font-weight: 500; padding-left: 20px; }
.c-name-bold { font-weight: 700; color: #0f172a; }
.c-col { text-align: center; }

/* ✓ 圆形背景 */
.c-yes {
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  font-size:14px;font-weight:900;line-height:1;
}
/* ✕ 灰色 */
.c-no {
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  font-size:12px;font-weight:700;line-height:1;
  color:#cbd5e1;background:#f8fafc;
}
/* 各列 ✓ 颜色 */
.c-free .c-yes { color: #059669; background: rgba(5,150,105,.08); }
.c-trial .c-yes { color: #d97706; background: rgba(234,88,12,.1); }
.c-vip .c-yes { color: #6d28d9; background: rgba(109,40,217,.08); }
.c-svip .c-yes { color: #b45309; background: rgba(217,119,6,.08); }

/* 文字内容 */
.c-txt { font-weight: 600; color: #475569; font-size: 13px; }

/* 行悬停 */
.ph-compare__table tbody tr:hover td { background: #f8fafc; }
.ph-compare__table tbody tr:hover .c-name { background: #f8fafc; }

/* 设备数行 */
.c-dev-row td { border-top: 2px solid #e2e8f0; background: #fafbfc; }

/* ---------- CTA — 白底 ---------- */
.ph-cta { text-align: center; padding: 60px 20px 70px; }
.ph-cta__title { font-size: 28px; font-weight: 800; color: #0f172a; margin-bottom: 10px; }
.ph-cta__desc { color: #64748b; margin-bottom: 28px; font-size: 16px; }
.ph-cta__btn {
  display: inline-block; padding: 16px 44px; font-size: 17px; font-weight: 700;
  color: #fff; background: linear-gradient(135deg, #3b82f6, #6366f1);
  border-radius: 30px; text-decoration: none; box-shadow: 0 8px 30px rgba(59,130,246,.3);
  transition: all .3s;
}
.ph-cta__btn:hover { transform: translateY(-3px); box-shadow: 0 14px 44px rgba(59,130,246,.4); }

/* ---------- 购买弹窗 — 深色头部 + 白底内容 ---------- */
.ph-modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(15,23,42,.55);
  z-index: 9999; align-items: center; justify-content: center; backdrop-filter: blur(6px);
}
.ph-modal {
  background: #fff;
  border-radius: 20px; width: 90%; max-width: 500px; position: relative;
  box-shadow: 0 24px 60px rgba(15,23,42,.2); overflow: hidden;
}
.ph-modal__close { position: absolute; top: 12px; right: 14px; z-index:10;background:#fff;border:none;font-size:24px;color:#64748b;cursor:pointer;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:.2s;box-shadow:0 2px 8px rgba(0,0,0,.15);line-height:1 }
.ph-modal__close:hover { background:#f1f5f9; color:#1e293b; transform:scale(1.08);box-shadow:0 4px 14px rgba(0,0,0,.2); }

/* 深色头部 — 同卡片风格 */
.ph-modal__header { padding:30px 28px 24px;text-align:center;color:#fff;position:relative;border-radius:20px 20px 0 0; }
.ph-modal__header::after{content:'';position:absolute;left:-2px;right:-2px;bottom:-18px;height:20px;border-radius:50%}
.modal-hdr--free{background:linear-gradient(160deg,#059669,#10b981 35%,#34d399);box-shadow:inset 0 -4px 12px rgba(0,0,0,.08)}
.modal-hdr--free::after{background:linear-gradient(90deg,rgba(16,185,129,.12),transparent)}
.modal-hdr--trial{background:linear-gradient(160deg,#c2410c,#ea580c 35%,#fb923c);box-shadow:inset 0 -4px 12px rgba(0,0,0,.08)}
.modal-hdr--trial::after{background:linear-gradient(90deg,rgba(234,88,12,.12),transparent)}
.modal-hdr--vip{background:linear-gradient(160deg,#6d28d9,#7c3aed 35%,#8b5cf6);box-shadow:inset 0 -4px 12px rgba(0,0,0,.10)}
.modal-hdr--vip::after{background:linear-gradient(90deg,rgba(124,58,237,.12),transparent)}
.modal-hdr--svip{background:linear-gradient(160deg,#b45309,#d97706 35%,#f59e0b);box-shadow:inset 0 -4px 12px rgba(0,0,0,.08)}
.modal-hdr--svip::after{background:linear-gradient(90deg,rgba(217,119,6,.12),transparent)}

.mh-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:4px 14px;border-radius:20px;margin-bottom:8px;background:rgba(255,255,255,.22);color:#fff;border:1px solid rgba(255,255,255,.28)}
.mh-name{font-size:26px;font-weight:900;line-height:1.2;margin-bottom:4px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.15)}
.mh-sub{font-size:13px;opacity:.82;color:rgba(255,255,255,.88)}

/* 弹窗标题（在header下方） */
.ph-modal__title { font-size: 18px; font-weight: 800; color: #0f172a; text-align:center; padding:20px 28px 8px; margin:0 }

/* 弹窗内容区 */
.ph-modal__body { padding: 0 28px 28px; }

/* 价格行 */
.mb-price-row { display:flex;align-items:flex-end;justify-content:center;padding:8px 0 16px;gap:8px }
.mb-price { font-size:38px;font-weight:900;color:#0f172a;line-height:1;letter-spacing:-1px }
.mb-price small { font-size:14px;font-weight:500;color:#94a3b8;margin-left:3px }

/* 功能列表 */
.mb-feats { list-style:none;margin:0;padding:0;max-height:260px;overflow-y:auto;padding-right:4px }
.mb-feats::-webkit-scrollbar{width:4px}
.mb-feats::-webkit-scrollbar-thumb{background:#e2e8f0;border-radius:4px}
.mb-feats li { padding:7px 0;font-size:13.5px;color:#475569;display:flex;gap:8px;align-items:flex-start;line-height:1.4 }
.mb-feats li::before{content:'✓';font-weight:800;flex-shrink:0;font-size:13px;width:18px;text-align:center;margin-top:1px;color:#059669}

/* 按钮 */
.ph-modal__btn {
  width: 100%; padding: 14px 0; font-size: 16px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  border: none; border-radius: 12px; cursor: pointer; margin-top: 16px; transition: all .3s;
}
.ph-modal__btn:hover { opacity: .92; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(59,130,246,.3); }
.ph-modal__btn--free { background: linear-gradient(135deg,#059669,#34d399); }

/* ---------- 响应式 ---------- */
@media (max-width: 1100px) {
  .ph-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 640px) {
  .ph-hero { padding-top: 110px; }
  .ph-grid { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; }
}