/* 若木云 · 产品页现代化覆盖层
 * 覆盖 ecs.css / cloud.css / mindex.css 里的老配色和圆角。
 * 加载顺序:base 6 + 页面专属 + product-modern.css (最后加载,cascade 胜出)
 * 品牌色: #1677ff 主蓝  #f56a00 主橙  #1d2129 主文  #86909c 次文
 */

/* ─── Hero 按钮共用:解锁宽度,禁止换行,弹性布局 ─── */
.product-info-btn a.btn,
.product-info-btn a.btn.info-btn1,
.product-info-btn a.btn.info-btn2,
.product-info-btn a.btn.info-btn3 {
  width: auto;
  min-width: 140px;
  height: 44px;
  line-height: 1;
  padding: 0 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.3px;
  border-radius: 4px;
  margin-right: 12px;
  vertical-align: middle;
  box-sizing: border-box;
}

/* ─── Hero 主按钮:橙 → 主蓝 ─── */
.product-info-btn a.btn.info-btn1 {
  background: #1677ff;
  background-image: none;
  border: 1px solid #1677ff;
  color: #fff;
  box-shadow: 0 6px 18px -6px rgba(22, 119, 255, 0.45);
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.product-info-btn a.btn.info-btn1:hover {
  background: #0e66e8;
  border-color: #0e66e8;
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(22, 119, 255, 0.55);
  transform: translateY(-1px);
}

/* ─── Hero 次按钮:透明白边 → 玻璃白按钮 ─── */
.product-info-btn a.btn.info-btn2 {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.75);
  color: #fff !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.product-info-btn a.btn.info-btn2:hover {
  background: #fff;
  border-color: #fff;
  color: #1677ff !important;
}

/* ─── info-btn3:第三按钮 ─── */
a.info-btn3 {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #1d2129 !important;
  border-radius: 4px;
  padding: 0 24px;
  height: 40px;
  line-height: 38px;
  font-size: 14px;
  transition: border-color .18s ease, color .18s ease;
}
a.info-btn3:hover {
  border-color: #1677ff;
  color: #1677ff !important;
}

/* ─── 帮助链接淡化 ─── */
.info-help-link {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 13px;
  margin-left: 20px;
  transition: color .18s ease;
}
.info-help-link:hover {
  color: #fff !important;
}

/* ─── 套餐购买按钮:胶囊 → 4px 直角,填充蓝 ─── */
.pkg-buy-button {
  margin-top: 32px;
}
.pkg-buy-button a {
  display: inline-block;
  width: auto;
  min-width: 180px;
  height: 44px;
  line-height: 42px;
  padding: 0 32px;
  background: #1677ff;
  background-image: none;
  border: 1px solid #1677ff;
  border-radius: 4px;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.3px;
  box-shadow: 0 6px 16px -6px rgba(22, 119, 255, 0.4);
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.pkg-buy-button a:hover {
  background: #0e66e8;
  background-image: none;
  border-color: #0e66e8;
  color: #fff;
  box-shadow: 0 10px 22px -8px rgba(22, 119, 255, 0.55);
  transform: translateY(-1px);
}

/* ─── 套餐价格:橙红 → 品牌橙,加大字号 ─── */
.pkg-price {
  color: #f56a00;
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.5px;
  line-height: 1;
}
.pkg-price-row {
  color: #4e5969;
  font-size: 13px;
}

/* ─── 套餐卡片:圆角 6px + 更深阴影 + hover 抬升 ─── */
.pkg-inner {
  background: #fff;
  border-radius: 6px;
  border: 1px solid #eef0f3;
  box-shadow: 0 4px 20px -8px rgba(15, 40, 85, 0.10);
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease, border-color .22s ease;
}
.server-pkg-item:hover .pkg-inner {
  transform: translateY(-4px);
  border-color: rgba(22, 119, 255, 0.25);
  box-shadow: 0 16px 40px -14px rgba(15, 40, 85, 0.18);
}
.server-pkg-item.pkg-item--active .pkg-inner {
  border: 1px solid #1677ff;
  box-shadow: 0 12px 32px -12px rgba(22, 119, 255, 0.35);
}

.server-pkg-title {
  font-size: 20px;
  font-weight: 600;
  color: #1d2129;
  letter-spacing: -0.2px;
}
.server-pkg-brief {
  font-size: 13px;
  color: #86909c;
  margin-top: 6px;
  line-height: 1.5;
}
.pkg-config-main {
  font-size: 22px;
  font-weight: 600;
  color: #1d2129;
  letter-spacing: -0.3px;
}
.pkg-config-unit {
  font-size: 13px;
  color: #86909c;
  margin-left: 3px;
  font-weight: 400;
}
.pkg-config-sub {
  font-size: 12px;
  color: #86909c;
  margin-top: 4px;
}

/* ─── 模块标题:统一放大到 40px ─── */
.module-title,
.line-introduce-module .module-title,
.product-function .module-title {
  font-size: 40px;
  font-weight: 600;
  color: #1d2129;
  letter-spacing: -0.5px;
  line-height: 1.2;
  text-align: center;
  padding-top: 72px;
  margin-bottom: 48px;
}
.module-title span {
  color: #1677ff;
  font-weight: 600;
}

/* ─── 特点卡片(virtue):去过时圆点边框 ─── */
.virtue-title {
  font-size: 22px;
  font-weight: 600;
  color: #1d2129;
  letter-spacing: -0.2px;
  line-height: 1.35;
}
.virtue-sub-title {
  font-size: 14px;
  color: #4e5969;
  line-height: 1.7;
  margin-top: 12px;
  display: block;
}

/* ─── 通用板块 padding 放大,呼吸感 ─── */
.server-module,
.line-introduce-module,
.product-function {
  padding-bottom: 96px;
}

/* ─── 顶部 hero 信息容器:字号层次拉开 ─── */
.product-info-title {
  font-size: 44px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.5px;
  line-height: 1.2;
  margin-bottom: 20px;
}
.product-info-detail {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.75;
  max-width: 720px;
}

/* ════════════════════════════════════════════════════════════
   六个独立按钮家族的品牌化覆盖（bt / domain / free / contact / support / cps）
   原样式来自各页面专属 CSS（绿色胶囊、电光蓝 #0008ff、#015bfe 等杂色），
   统一为品牌蓝 #1677ff + 4px 直角。权重用 2-3 类 + 标签压过原定义。
   ════════════════════════════════════════════════════════════ */

/* ─── /bt.html：宝塔页 hero 双按钮（原绿色 22px 胶囊）─── */
.linux-banner .banner-btn a.install-btn,
.linux-banner .banner-btn a.demo-btn {
  width: auto;
  min-width: 160px;
  padding: 0 32px;
  border-radius: 4px;
  font-size: 16px;
  transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.linux-banner .banner-btn a.install-btn {
  background: #1677ff;
  border-color: #1677ff;
  color: #fff;
  box-shadow: 0 6px 16px -6px rgba(22, 119, 255, 0.4);
}
.linux-banner .banner-btn a.install-btn:hover {
  background: #0e66e8;
  border-color: #0e66e8;
  color: #fff;
}
.linux-banner .banner-btn a.demo-btn {
  background: rgba(255, 255, 255, 0.9);
  border-color: #1677ff;
  color: #1677ff;
}
.linux-banner .banner-btn a.demo-btn:hover {
  background: #1677ff;
  color: #fff;
}
.linux-banner .banner-btn a.demo-btn::before {
  border-left-color: currentColor;
}

/* ─── /domain.html：首屏「查域名」按钮（样式来自远程 OSS CSS）─── */
.domain-post_search .search a.button,
.domain-post_box .search a.button {
  background: #1677ff;
  border-radius: 0 4px 4px 0;
  font-weight: 500;
  letter-spacing: 2px;
  transition: background .18s ease;
}
.domain-post_search .search a.button:hover,
.domain-post_box .search a.button:hover {
  background: #0e66e8;
}

/* ─── /free.html：活动按钮家族（原电光蓝 #0008ff）─── */
a.act-btn,
button.act-btn,
.act-btn {
  border-color: #1677ff;
  color: #1677ff;
  border-radius: 4px;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
a.act-btn:hover,
button.act-btn:hover,
.act-btn:hover {
  background-color: #1677ff;
  border-color: #1677ff;
  color: #fff;
}
/* 主 CTA：默认即填充 */
a.act-btn.act-btn-primary,
button.act-btn.act-btn-primary {
  background-color: #1677ff;
  border-color: #1677ff;
  color: #fff;
  box-shadow: 0 6px 16px -6px rgba(22, 119, 255, 0.4);
}
a.act-btn.act-btn-primary:hover,
button.act-btn.act-btn-primary:hover {
  background-color: #0e66e8;
  border-color: #0e66e8;
  color: #fff;
}
/* 支付橙保留品牌橙 */
a.act-btn.act-btn-pay,
button.act-btn.act-btn-pay {
  background-color: #f56a00;
  border-color: #f56a00;
  color: #fff;
}

/* ─── /contact.html：por-btn 家族（原电光蓝 #0008ff / 深灰描边）─── */
a.por-btn.por-btn-primary,
.por-btn.por-btn-primary {
  background-color: #1677ff;
  border-color: #1677ff;
  color: #fff;
  border-radius: 4px;
  transition: background .18s ease, border-color .18s ease;
}
a.por-btn.por-btn-primary:hover,
.por-btn.por-btn-primary:hover {
  background-color: #0e66e8;
  border-color: #0e66e8;
  color: #fff;
}
a.por-btn.por-btn-light,
.por-btn.por-btn-light {
  border-radius: 4px;
}
a.por-btn.por-btn-light:hover,
.por-btn.por-btn-light:hover {
  border-color: #1677ff;
  color: #1677ff;
}

/* ─── /support.html：security-btns 双按钮（原 #ff8a00 / #0066ff）─── */
.security-btns a.btn1 {
  background: #f56a00;
  border-radius: 4px;
  transition: background .18s ease, filter .18s ease;
}
.security-btns a.btn1:hover {
  background: #f56a00;
  filter: brightness(1.06);
}
.security-btns a.btn2 {
  background: #1677ff;
  border-radius: 4px;
  transition: background .18s ease;
}
.security-btns a.btn2:hover {
  background: #0e66e8;
}

/* ─── /cps.html + /agent.html：zdy 系按钮（原 #015bfe）─── */
.zdy-banner a.btn,
.zdy-banner .btn {
  border-color: #1677ff;
  color: #1677ff;
  border-radius: 4px;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.zdy-banner a.btn:hover,
.zdy-banner .btn:hover {
  background: #1677ff;
  border-color: #1677ff;
  color: #fff;
}
.zdy-agent a.btn,
.zdy-agent .btn {
  background: #1677ff;
  border-radius: 4px;
  box-shadow: 0 6px 16px -6px rgba(22, 119, 255, 0.4);
  transition: background .18s ease;
}
.zdy-agent a.btn:hover,
.zdy-agent .btn:hover {
  background: #0e66e8;
  color: #fff;
}

/* ─── 移动端收缩 ─── */
@media (max-width: 768px) {
  .info-btn1,
  .info-btn2,
  .pkg-buy-button a {
    height: 40px;
    line-height: 38px;
    padding: 0 22px;
    font-size: 14px;
  }
  .product-info-title { font-size: 28px; }
  .product-info-detail { font-size: 14px; }
  .module-title,
  .line-introduce-module .module-title,
  .product-function .module-title {
    font-size: 26px;
    padding-top: 48px;
    margin-bottom: 32px;
  }
  .server-module,
  .line-introduce-module,
  .product-function { padding-bottom: 56px; }
  .pkg-price { font-size: 32px; }
  .pkg-config-main { font-size: 18px; }
  .virtue-title { font-size: 18px; }
  .virtue-sub-title { font-size: 13px; }
}