/* ============================================================
   坚果盾 · 产品页共用样式 product.css
   适用于：高防CDN / 高防IP / 高防服务器 / 云服务器
   ============================================================
   包含：
   1. 交叉引导卡 cross-link
   2. 定价区 pricing-section + 计费切换
   3. 套餐卡片 pricing-card
   4. 对比表 compare-wrap
   5. SLA 保障条 sla-strip
   6. 技术架构条 tech-bar
   7. 物理机 vs 云服务器 vs-card
   8. 硬件配置 hw-grid
   9. 流程步骤 flow-grid
   10. 响应式
   ============================================================ */

/* ========== 1. 交叉引导卡 ========== */
.cross-link{
  background:linear-gradient(135deg,#E8F0FF 0%,#E6FBF5 100%);
  border-radius:var(--radius-lg);padding:22px 26px;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;margin-bottom:40px;flex-wrap:wrap;
  border:1px solid var(--gray-2);
}
.cross-link p{font-size:15px;color:var(--gray-5);}
.cross-link p strong{color:var(--dark);}
.cross-link a{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 20px;border-radius:10px;
  font-size:14.5px;font-weight:600;
  background:#fff;color:var(--primary);border:1.5px solid var(--primary);
  transition:var(--transition);white-space:nowrap;
}
.cross-link a:hover{background:var(--primary);color:#fff;}

/* ========== 2. 定价区 ========== */
.pricing-section{
  background:linear-gradient(180deg,#F5F7FA 0%,#EDF1F9 100%);
  padding:80px 0 96px;
}
.billing-toggle{
  display:inline-flex;align-items:center;gap:4px;
  background:#fff;border-radius:14px;padding:5px;
  box-shadow:var(--shadow-sm);border:1px solid var(--gray-2);
  margin:0 auto 44px;position:relative;
  left:50%;transform:translateX(-50%);
}
.billing-toggle button{
  padding:11px 32px;border-radius:10px;
  font-size:15px;font-weight:600;
  color:var(--gray-4);transition:var(--transition);white-space:nowrap;
  position:relative;
}
.billing-toggle button.active{
  background:linear-gradient(135deg,#165DFF 0%,#0E42C8 100%);
  color:#fff;box-shadow:0 4px 14px rgba(22,93,255,.35);
}
.billing-toggle button:not(.active):hover{color:var(--primary)}
.billing-toggle .save-tag{
  position:absolute;top:-10px;right:-6px;
  background:var(--danger);color:#fff;
  font-size:10.5px;font-weight:700;
  padding:3px 8px;border-radius:999px;
  white-space:nowrap;letter-spacing:.3px;
  box-shadow:0 2px 8px rgba(255,77,79,.4);
}

/* ========== 3. 套餐卡片 ========== */
.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.pricing-card{
  background:#fff;border-radius:var(--radius-lg);
  border:1.5px solid var(--gray-2);padding:28px 22px;
  display:flex;flex-direction:column;
  transition:var(--transition);position:relative;
}
.pricing-card:hover{
  transform:translateY(-6px);box-shadow:var(--shadow-lg);
  border-color:var(--primary);
}
.pricing-card.recommended{
  border-color:var(--primary);border-width:2px;
  box-shadow:0 12px 36px rgba(22,93,255,.18);
  background:linear-gradient(180deg,#fff 0%,#F8FAFF 100%);
}
.pricing-card.recommended::after{
  content:'最受欢迎';
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,#165DFF 0%,#00C48C 100%);
  color:#fff;font-size:12px;font-weight:700;
  padding:5px 16px;border-radius:999px;white-space:nowrap;
  box-shadow:0 4px 12px rgba(22,93,255,.4);letter-spacing:.3px;
}

/* 深色旗舰卡（可选） */
.pricing-card.enterprise{
  background:linear-gradient(180deg,#0A0E27 0%,#141A3A 100%);
  border-color:rgba(255,255,255,.1);color:#fff;
}
.pricing-card.enterprise:hover{
  border-color:#4EFFC0;box-shadow:0 12px 40px rgba(0,196,140,.25);
}
.pricing-card.enterprise .card-header{border-bottom-color:rgba(255,255,255,.1);}
.pricing-card.enterprise .card-header h3{color:#fff}
.pricing-card.enterprise .price-amount{color:#4EFFC0}
.pricing-card.enterprise .features-list .label{color:rgba(255,255,255,.5)}
.pricing-card.enterprise .features-list .value{color:#fff}
.pricing-card.enterprise .defense-line{background:rgba(255,255,255,.05)}
.pricing-card.enterprise .defense-line .d-label{color:rgba(255,255,255,.5)}
.pricing-card.enterprise .defense-line .d-value{color:#fff}
.pricing-card.enterprise .defense-line .d-value.green{color:#4EFFC0}
.pricing-card.enterprise .defense-line .d-value.blue{color:#A8C4FF}
.pricing-card.enterprise .btn-buy{
  background:linear-gradient(135deg,#165DFF,#00C48C);color:#fff;
}
.pricing-card.enterprise .btn-buy:hover{
  box-shadow:0 8px 24px rgba(0,196,140,.45);transform:translateY(-1px);
}
.pricing-card.enterprise .proto{background:rgba(255,255,255,.08);color:rgba(255,255,255,.6);}
.pricing-card.enterprise .proto.on{background:rgba(0,196,140,.18);color:#4EFFC0;}

.card-header{
  padding-bottom:20px;border-bottom:1px dashed var(--gray-2);
  margin-bottom:20px;
}
.card-header h3{
  font-size:17px;font-weight:700;color:var(--dark);
  margin-bottom:14px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.card-header h3 .ver-tag{
  font-size:11px;font-weight:600;
  padding:2px 8px;border-radius:6px;
  background:var(--primary-light);color:var(--primary);
}
.card-header h3 .ver-tag.green{background:var(--accent-light);color:var(--accent)}
.card-header h3 .ver-tag.orange{background:#FFF4E6;color:#FF9F1C}
.card-header h3 .ver-tag.purple{background:#F3E8FF;color:#8B5CF6}

.price-wrap{display:flex;align-items:baseline;gap:4px}
.price-currency{font-size:18px;font-weight:700;color:var(--primary)}
.price-amount{
  font-size:38px;font-weight:800;color:var(--dark);
  letter-spacing:-.03em;line-height:1;
}
.price-period{font-size:14px;color:var(--gray-4);font-weight:500}
.price-note{font-size:12.5px;color:var(--gray-4);margin-top:6px}

.features-list{
  display:flex;flex-direction:column;gap:11px;
  flex:1;margin-bottom:24px;
}
.features-list li{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:10px;font-size:13.5px;line-height:1.5;
}
.features-list .label{color:var(--gray-4);flex-shrink:0}
.features-list .value{color:var(--dark);font-weight:600;text-align:right}

.protocol-row{
  display:flex;align-items:center;gap:6px;
  flex-wrap:wrap;justify-content:flex-end;
}
.proto{
  display:inline-flex;align-items:center;gap:3px;
  font-size:11.5px;font-weight:700;
  padding:2px 7px;border-radius:5px;
  background:var(--gray-1);color:var(--gray-4);
  cursor:help;
}
.proto.on{background:var(--accent-light);color:var(--accent)}
.proto.off{
  background:#FFF1F0;color:#FF7875;
  text-decoration:line-through;opacity:.7;
}

.defense-line{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;font-size:13.5px;
  padding:9px 12px;border-radius:8px;
  background:var(--gray-1);margin-bottom:8px;
}
.defense-line .d-label{color:var(--gray-4);font-weight:500;flex-shrink:0}
.defense-line .d-value{color:var(--dark);font-weight:700;text-align:right}
.defense-line .d-value.green{color:var(--accent)}
.defense-line .d-value.blue{color:var(--primary)}

.btn-buy{
  display:block;width:100%;text-align:center;
  padding:13px 20px;border-radius:10px;
  font-size:15px;font-weight:700;
  color:var(--primary);background:var(--primary-light);
  transition:var(--transition);letter-spacing:.2px;
}
.btn-buy:hover{
  background:linear-gradient(135deg,#165DFF 0%,#0E42C8 100%);
  color:#fff;box-shadow:0 6px 20px rgba(22,93,255,.35);
}
.pricing-card.recommended .btn-buy{
  background:linear-gradient(135deg,#165DFF 0%,#0E42C8 100%);
  color:#fff;box-shadow:0 6px 20px rgba(22,93,255,.35);
}
.pricing-card.recommended .btn-buy:hover{
  box-shadow:0 10px 28px rgba(22,93,255,.5);
  transform:translateY(-1px);
}

.pricing-footnote{
  text-align:center;margin-top:36px;
  font-size:13.5px;color:var(--gray-4);
  display:flex;align-items:center;justify-content:center;
  gap:8px;flex-wrap:wrap;line-height:1.7;
}
.pricing-footnote svg{
  width:15px;height:15px;
  color:var(--accent);flex-shrink:0;
}

/* ========== 4. 对比表 ========== */
.compare-wrap{
  margin-top:56px;background:#fff;
  border-radius:var(--radius-lg);
  border:1px solid var(--gray-2);overflow:hidden;
}
.compare-header{
  padding:22px 26px;
  border-bottom:1px solid var(--gray-2);
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
}
.compare-header h3{font-size:18px;font-weight:700;color:var(--dark)}
.compare-header p{font-size:13.5px;color:var(--gray-4)}
.compare-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* 关键：固定表格布局 + 统一列宽 + 全表居中 */
.compare-table{
  font-size:13.5px;
  min-width:820px;
  width:100%;
  table-layout:fixed;
  border-collapse:collapse;
}
.compare-table thead{background:var(--gray-1)}
.compare-table th{
  padding:14px 10px;
  text-align:center;
  vertical-align:middle;
  font-weight:700;
  color:var(--dark);
  border-bottom:1px solid var(--gray-2);
  transition:var(--transition);
  word-break:break-word;
}
.compare-table td{
  padding:14px 10px;
  color:var(--gray-5);
  border-bottom:1px solid var(--gray-1);
  text-align:center;
  vertical-align:middle;
  transition:var(--transition);
  word-break:break-word;
}
/* 首列左对齐，保持版本名易读 */
.compare-table th:first-child,
.compare-table td:first-child{
  text-align:left;
  padding-left:26px;
}
.compare-table td:first-child{
  font-weight:700;color:var(--dark);
}
.compare-table tbody tr:hover{background:#FAFBFF}
.compare-table tbody tr:last-child td{border-bottom:none}
.compare-table .price-col{color:var(--primary);font-weight:700}
.compare-table .hot-row{background:linear-gradient(90deg,#F8FAFF,#fff)}
.compare-table .hot-row td:first-child{color:var(--primary)}
.compare-table th.period-active,
.compare-table td.period-active{
  background:var(--primary-light);
  color:var(--primary);font-weight:700;
}
.compare-table .hot-row td.period-active{background:#D6E4FF}
.compare-note{
  padding:14px 26px;background:var(--gray-1);
  font-size:12.5px;color:var(--gray-4);
  border-top:1px solid var(--gray-2);
}

/* 列宽按比例分配：首列稍宽，价格列三等分 */
.compare-table th:nth-child(1){width:14%}   /* 版本 */
.compare-table th:nth-child(2){width:10%}   /* 带宽 */
.compare-table th:nth-child(3){width:8%}    /* 域名数 */
.compare-table th:nth-child(4){width:12%}   /* 协议支持 */
.compare-table th:nth-child(5){width:12%}   /* CC 防护 */
.compare-table th:nth-child(6){width:10%}   /* DDoS 保底 */
.compare-table th:nth-child(7),
.compare-table th:nth-child(8),
.compare-table th:nth-child(9){width:11.33%} /* 月付 / 季付 / 年付 */

/* ========== 5. SLA 保障条 ========== */
.sla-strip{
  background:#fff;border:1px solid var(--gray-2);
  border-radius:var(--radius-lg);
  padding:24px 28px;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
}
.sla-strip .sla-icon{
  width:52px;height:52px;border-radius:14px;flex-shrink:0;
  background:var(--accent-light);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
}
.sla-strip .sla-icon svg{width:26px;height:26px;}
.sla-strip .sla-text{flex:1;min-width:240px;}
.sla-strip .sla-text h4{
  font-size:16px;font-weight:700;color:var(--dark);
  margin-bottom:6px;
}
.sla-strip .sla-text p{font-size:13.5px;color:var(--gray-5);line-height:1.7;}

/* ========== 6. 技术架构条 ========== */
.tech-bar{
  background:linear-gradient(135deg,#0A0E27 0%,#141A3A 100%);
  padding:56px 0;color:#fff;
}
.tech-bar-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:32px;text-align:center;
}
.tech-item .num{
  font-size:clamp(28px,3.2vw,40px);font-weight:800;
  background:linear-gradient(135deg,#4EFFC0 0%,#165DFF 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  letter-spacing:-.02em;line-height:1.1;
}
.tech-item .label{font-size:14px;color:rgba(255,255,255,.65);margin-top:8px}

/* ========== 7. 物理机 vs 云服务器 对比 ========== */
.compare-vs{
  display:grid;grid-template-columns:1fr 1fr;
  gap:24px;max-width:960px;margin:0 auto;
}
.vs-card{
  background:#fff;border-radius:var(--radius-lg);
  padding:32px 28px;border:2px solid var(--gray-2);
  transition:var(--transition);
}
.vs-card.best{
  border-color:var(--accent);
  box-shadow:0 12px 36px rgba(0,196,140,.15);
}
.vs-card:not(.best):hover{border-color:var(--gray-3);}
.vs-header{
  display:flex;align-items:center;gap:12px;
  margin-bottom:20px;padding-bottom:20px;
  border-bottom:1px dashed var(--gray-2);
}
.vs-icon{
  width:48px;height:48px;border-radius:14px;
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
}
.vs-card.best .vs-icon{background:var(--accent-light);color:var(--accent);}
.vs-card:not(.best) .vs-icon{background:var(--primary-light);color:var(--primary);}
.vs-card:not(.best) .vs-icon.gray{background:var(--gray-1);color:var(--gray-4);}
.vs-icon svg{width:24px;height:24px;}
.vs-header-text h4{font-size:18px;font-weight:800;color:var(--dark);margin-bottom:2px;}
.vs-header-text p{font-size:12.5px;color:var(--gray-4);}
.vs-list{display:flex;flex-direction:column;gap:12px;}
.vs-item{
  display:flex;align-items:flex-start;gap:10px;
  font-size:14px;line-height:1.7;color:var(--gray-5);
}
.vs-item svg{width:16px;height:16px;flex-shrink:0;margin-top:4px;}
.vs-item.yes svg{color:var(--accent);}
.vs-item.no svg{color:var(--danger);}
.vs-item.neutral svg{color:var(--gray-3);}
.vs-item strong{color:var(--dark);font-weight:600;}

/* ========== 8. 硬件配置 ========== */
.hw-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.hw-card{
  background:#fff;border-radius:var(--radius-lg);
  padding:26px 22px;border:1px solid var(--gray-2);
  transition:var(--transition);
}
.hw-card:hover{
  border-color:var(--primary);box-shadow:var(--shadow-sm);
  transform:translateY(-3px);
}
.hw-icon{
  width:44px;height:44px;border-radius:12px;
  background:var(--primary-light);color:var(--primary);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
}
.hw-icon svg{width:22px;height:22px;}
.hw-card h4{font-size:15px;font-weight:700;color:var(--dark);margin-bottom:6px;}
.hw-card p{font-size:13.5px;color:var(--gray-5);line-height:1.65;}

/* ========== 9. 流程步骤 ========== */
.flow-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.flow-step{
  background:#fff;border-radius:var(--radius-lg);
  padding:28px 22px;border:1px solid var(--gray-2);
  position:relative;transition:var(--transition);
}
.flow-step:hover{
  border-color:var(--primary);box-shadow:var(--shadow);
  transform:translateY(-3px);
}
.flow-num{
  width:38px;height:38px;border-radius:12px;
  background:linear-gradient(135deg,#165DFF,#00C48C);
  color:#fff;font-size:17px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
  box-shadow:0 4px 12px rgba(22,93,255,.3);
}
.flow-step h4{font-size:16px;font-weight:700;color:var(--dark);margin-bottom:8px}
.flow-step p{font-size:13.5px;color:var(--gray-5);line-height:1.7}

/* ========== 10. 响应式 ========== */
@media (max-width:1100px){
  .pricing-grid{grid-template-columns:repeat(3,1fr)}
  .hw-grid{grid-template-columns:repeat(2,1fr)}
  .flow-grid{grid-template-columns:repeat(2,1fr)}
  .tech-bar-grid{grid-template-columns:repeat(2,1fr);gap:40px}
}
@media (max-width:860px){
  .pricing-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .compare-vs{grid-template-columns:1fr}
}
@media (max-width:600px){
  .cross-link{padding:18px 20px;flex-direction:column;align-items:flex-start}
  .pricing-grid{grid-template-columns:1fr;gap:14px}
  .pricing-card{padding:24px 20px}
  .price-amount{font-size:32px}
  .billing-toggle{margin-bottom:32px}
  .billing-toggle button{padding:9px 20px;font-size:14px}
  .compare-header{padding:18px 20px}
  .compare-table{font-size:13px;min-width:720px}
  .compare-table th,
  .compare-table td{padding:12px 10px}
  .compare-table th:first-child,
  .compare-table td:first-child{padding-left:20px}
  .tech-bar{padding:40px 0}
  .tech-bar-grid{grid-template-columns:repeat(2,1fr);gap:28px}
  .hw-grid{grid-template-columns:1fr;gap:14px}
  .flow-grid{grid-template-columns:1fr;gap:14px}
  .sla-strip{padding:20px;}
}