/* =========================================================================
 * DJCloud · UCloud Global 风格皮肤 (ucloud-skin.css)
 * 视觉还原参考: https://ucloud-global.com/zh
 * 说明: 仅覆盖视觉层(CSS)，不改动任何 HTML 模板标签与 $data 调用关系
 * 主色: 品牌蓝 #3860F4 / #5A76E0 渐变; 强调橙保留为 CTA 辅助色
 * ========================================================================= */

/* ---------- 1. 设计变量 ---------- */
:root {
  --uc-primary: #3860F4;          /* 品牌主蓝 */
  --uc-primary-2: #5A76E0;        /* 主蓝渐变尾色 */
  --uc-primary-deep: #2A315F;     /* 深蓝(深色块/表头) */
  --uc-blue-glow: rgba(8,176,253,.8);
  --uc-blue-glow-2: rgba(11,153,254,.8);
  --uc-orange-glow: rgba(253,98,84,.8);
  --uc-orange-glow-2: rgba(255,169,148,.8);

  --uc-bg-gray: #F6F8FD;          /* 浅灰蓝页面底 */
  --uc-bg-gray-2: #EBF0FC;        /* 浅蓝灰卡片底 */
  --uc-line: #E1E6F0;             /* 分割线 */
  --uc-line-2: #ECEFF6;
  --uc-title: #152039;            /* 标题文字 */
  --uc-text: rgba(21,32,57,.72);  /* 正文 */
  --uc-text-sub: rgba(21,32,57,.50);

  --uc-radius-sm: 8px;
  --uc-radius: 12px;
  --uc-radius-lg: 18px;
  --uc-shadow-card: 0 12px 16px -8px rgba(57,71,178,.24);
  --uc-shadow-soft: 0 5px 18px rgba(213,221,241,.6);
  --uc-container: 1200px;
}

/* ---------- 2. 字体 (Outfit Google Fonts CDN + 中文系统字体) ---------- */
/* 使用 Google Fonts CDN (稳定可用) 替代 UCloud 动态哈希路径 */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');
body {
  font-family: 'Outfit', 'PingFang SC', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--uc-title);
  background-color: #fff;
  font-size: 14px;
}
h1, h2, h3, h4, h5 { color: var(--uc-title); font-weight: 600; }
a { color: var(--uc-text); }
a:hover { color: var(--uc-primary) !important; text-decoration: none !important; }

/* ---------- 3. 容器与区块 ---------- */
.section-content {
  max-width: var(--uc-container);
  padding: 80px 20px;
  margin: 0 auto;
}
.section-title { text-align: center; }
.section-title h2 { font-size: 36px; line-height: 54px; font-weight: 600; }
.section-title .section-desc {
  margin-top: 16px;
  font-size: 16px;
  color: var(--uc-text);
}

/* ---------- 4. 按钮 (主蓝渐变 + 径向光晕动效) ---------- */
.btn {
  border-radius: var(--uc-radius-sm);
  position: relative;
  overflow: hidden;
  transition: all .3s ease;
  font-weight: 500;
}
/* 原橙主按钮 -> 改为 UCloud 主蓝 */
.btn-normal {
  color: #fff;
  background: linear-gradient(90deg, var(--uc-primary) 0%, var(--uc-primary-2) 100%);
  border: none;
}
.btn-normal:hover {
  color: #fff;
  background: linear-gradient(90deg, #2f54ea 0%, #4f6ad8 100%);
  box-shadow: var(--uc-shadow-card);
}
.btn-normal:active { background: #2f54ea; }
.btn-normal-light {
  color: var(--uc-title);
  background: #fff;
  border: 1px solid var(--uc-line);
}
.btn-normal-light:hover {
  border-color: var(--uc-primary);
  color: var(--uc-primary);
}

/* 光晕动效 (鼠标跟随) */
.btn-glow { position: relative; overflow: hidden; }
.btn-glow .uc-glow {
  position: absolute;
  width: 150px; height: 150px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background-image: radial-gradient(circle closest-side, var(--uc-blue-glow), var(--uc-blue-glow-2));
  filter: blur(15px);
  opacity: 0;
  visibility: hidden;
  transition: all .3s ease, left 0s, top 0s;
  z-index: 1; pointer-events: none;
}
.btn-glow:hover .uc-glow { opacity: .9; visibility: visible; }
.btn-glow > * { position: relative; z-index: 2; }

/* ---------- 5. 导航 (UCloud 精确复刻: 70px 毛玻璃 + 底部细线) ---------- */
/* 外层吸顶容器: 毛玻璃, 无阴影(用底部细线) */
.nav-shadow {
  position: sticky;
  top: 0;
  z-index: 888;
  width: 100%;
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--uc-line, #E1E6F0);
  box-sizing: border-box;
  overflow: hidden;
  transition: background .3s ease;
}
.nav-shadow:hover { background: #fff; }

/* 顶部栏: 高 70px, 左中右三段布局 */
.nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 70px;
  padding: 0 16px;
  box-sizing: border-box;
}
@media (min-width: 1200px) { .nav-header { padding: 0 88px; } }

/* 左: Logo (152x32) + 右侧竖分割线 */
.nav-logo {
  flex-shrink: 0;
  position: relative;
  padding-right: 28px;
  height: 32px;
  display: flex;
  align-items: center;
}
.nav-logo::after {
  content: '';
  position: absolute;
  right: 0;
  top: 8px;
  width: 1px;
  height: 16px;
  background: var(--uc-line, #E1E6F0);
}
.nav-logo a { display: flex; align-items: center; overflow: hidden; }
.nav-logo img { width: 152px; height: 32px; }

/* 中: 菜单 flex-1 居中 */
.nav-menu {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  overflow: hidden;
}
.nav-menu .nav-item {
  display: flex;
  align-items: center;
  height: 70px;
  padding: 0 20px;
  color: var(--uc-title, #152039);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color .2s ease;
}
.nav-menu .nav-item:hover {
  color: var(--uc-primary, #3860F4);
  border-bottom-color: transparent;
}

/* 右: 控制台入口 + 登录/注册光晕按钮 */
.nav-right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.nav-right .control {
  margin: 0 20px;
  color: var(--uc-title, #152039);
  font-size: 14px;
  cursor: pointer;
  transition: color .2s ease;
}
.nav-right .control:hover { color: var(--uc-primary, #3860F4); }
.nav-right .no-login { display: flex; align-items: center; gap: 12px; }

/* 蓝色光晕主按钮 (UCloud btn-halo-blue) */
.btn-halo-blue {
  position: relative;
  overflow: hidden;
  padding: 8px 20px;
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(90deg, var(--uc-primary, #3860F4) 0%, var(--uc-primary-2, #5A76E0) 100%);
  border: 1px solid rgba(100,136,252,0);
  transition: all .3s ease;
}
.btn-halo-blue:hover {
  color: #fff;
  box-shadow: var(--uc-shadow-card, 0 12px 16px -8px rgba(57,71,178,.24));
  background: linear-gradient(90deg, #2f54ea 0%, #4f6ad8 100%);
}

/* 描边按钮 (UCloud btn-glass) */
.btn-halo-outline {
  padding: 8px 20px;
  border-radius: 8px;
  color: var(--uc-title, #152039);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--uc-line, #E1E6F0);
  transition: all .3s ease;
}
.btn-halo-outline:hover {
  color: var(--uc-primary, #3860F4);
  border-color: var(--uc-primary, #3860F4);
}

/* 登录后头像 */
.nav-right .login-in {
  cursor: pointer;
  position: relative;
  height: 70px;
  display: flex;
  align-items: center;
  padding: 0 16px;
}
.nav-right .login-in .head-img {
  width: 32px;
  height: 32px;
  background: var(--uc-primary, #3860F4);
  border-radius: 50%;
  color: #fff;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 下拉菜单面板 (UCloud 白底 + 柔和阴影) */
.nav-cont {
  position: absolute;
  top: 70px;
  left: 0;
  right: 0;
  width: 100%;
  background: #fff;
  box-shadow: 0 5px 18px rgba(213,221,241,.6);
  border-top: 1px solid var(--uc-line, #E1E6F0);
  z-index: 1000;
  transition: height .3s ease;
  height: 0;
  overflow: hidden;
}
.nav-cont .section-content { padding: 0; max-width: var(--uc-container, 1200px); }
.nav-cont .nav-cont-menu { display: none; }
.nav-cont .nav-cont-empty { display: none !important; }
.nav-content {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 40px 20px;
  box-sizing: border-box;
}
.nav-item-box {
  min-width: 280px;
  height: 96px;
  padding: 20px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--uc-line, #E1E6F0);
  display: flex;
  cursor: pointer;
  transition: all .3s ease;
}
.nav-item-box:hover {
  border-color: var(--uc-primary, #3860F4);
  box-shadow: var(--uc-shadow-card, 0 12px 16px -8px rgba(57,71,178,.24));
}
.nav-item-box:hover .title { color: var(--uc-primary, #3860F4); }
.nav-item-box img { width: 48px; height: 48px; }
.nav-item-box .item-box-title {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  margin-left: 16px;
  font-size: 16px;
}
.nav-item-box .item-box-title .title { color: var(--uc-title, #152039); font-weight: 600; }
.nav-item-box .item-box-title .desc { font-size: 14px; color: var(--uc-text-sub, rgba(21,32,57,.5)); }

/* ---------- 6. 卡片体系 (圆角 + 悬浮上浮) ---------- */
.service-box, .resolve-box, .practice-box, .base-content,
.footer-nav-box, .news-cont, .cert-item {
  border-radius: var(--uc-radius);
  background: #fff;
  border: 1px solid var(--uc-line);
  transition: all .3s ease;
}
.service-box:hover, .resolve-box:hover, .practice-box:hover {
  transform: translateY(-6px);
  border-color: var(--uc-primary);
  box-shadow: var(--uc-shadow-card);
}
.service-title, .resolve-box h4 { color: var(--uc-title); font-weight: 600; }
.service-tag {
  display: inline-block;
  padding: 4px 12px;
  margin: 4px 6px 0 0;
  font-size: 12px;
  color: var(--uc-primary);
  background: var(--uc-bg-gray-2);
  border-radius: 20px;
}
.service-price, .font-theme { color: var(--uc-primary) !important; }
.resolve-link { color: var(--uc-primary); }

/* ---------- 7. Banner (渐变光晕背景) ---------- */
.banner-cont .swiper-slide {
  height: 520px;
  background: linear-gradient(135deg, #EEF3FF 0%, #F6F8FD 60%, #FFFFFF 100%);
}
.banner .section-content h1 { font-size: 44px; line-height: 1.3; font-weight: 700; }
.banner-desc { color: var(--uc-text); }
.banner .banner-s {
  border-radius: var(--uc-radius-lg);
  box-shadow: var(--uc-shadow-card);
  background: #fff;
  overflow: hidden;
}
.banner-s .banner-list .banner-item { padding: 30px 40px; transition: background .3s; }
.banner-s .banner-list .banner-item:hover { background: var(--uc-bg-gray); }
.banner-s .banner-list .banner-item:hover h5 { color: var(--uc-primary); }
.banner-list .banner-item .banner-tag {
  color: var(--uc-primary);
  border: 1px solid var(--uc-primary);
  border-radius: 20px;
}
.banner-cont .swiper-pagination-bullet-active { background: var(--uc-primary); }

/* ---------- 8. 数据基建区块 (深色) ---------- */
.section-base { background: var(--uc-primary-deep); color: #fff; }
.section-base .section-title h2, .section-base .title-desc { color: #fff; }
.section-base h2 { color: #fff; font-size: 40px; font-weight: 700; }

/* ---------- 9. 页脚 (UCloud 浅色风 -> 保留我方深色但换主蓝点缀) ---------- */
.footer { background: #1E2130; }
.footer .link-hover:hover, .footer .footer-link a:hover { color: var(--uc-primary) !important; }
.footer-nav-box .footer-nav-head { border-bottom: 1px solid #2D3544; }
.register-advert {
  background: linear-gradient(90deg, var(--uc-primary) 0%, var(--uc-primary-2) 100%);
}

/* ---------- 10. 侧边工具 (圆角 + 主蓝) ---------- */
.aside-tools .tools-list {
  border-radius: var(--uc-radius) 0 0 var(--uc-radius);
  box-shadow: var(--uc-shadow-soft);
}
.aside-tools .tools-list .tools-item .tools-box-s { border-radius: var(--uc-radius); }
.aside-tools .tools-list .tools-item .tools-box .button:hover { border-color: var(--uc-primary); color: var(--uc-primary); }

/* ---------- 11. 滚动渐显动画 ---------- */
@keyframes ucFadeUp { 0% { opacity: 0; transform: translate3d(0,3rem,0); } 100% { opacity: 1; transform: none; } }
.uc-reveal { opacity: 0; }
.uc-reveal.uc-in { animation: ucFadeUp .4s cubic-bezier(.7,0,.1,1) forwards; }

/* ---------- 12. 产品页 banner (主蓝渐变) ---------- */
.server-banner, .product-banner {
  background: linear-gradient(135deg, #3860F4 0%, #5A76E0 100%) !important;
  color: #fff;
}
.server-banner .server-banner-desc { color: rgba(255,255,255,.9); }
.product-banner h1, .server-banner h1 { color: #fff; }

/* tab 选中态 -> 主蓝 */
.jr-tabs .title.swiper-slide-thumb-active,
.jr-tabs .title:hover { color: var(--uc-primary); border-bottom-color: var(--uc-primary); }

/* 搜索框主蓝 */
.input-search input { border-color: var(--uc-primary); }
.input-search .search-btn { background: var(--uc-primary); }

/* 分页主蓝 */
.jr-page .pagination .page-number.active { border-color: var(--uc-primary); background: var(--uc-primary); }
.jr-page .pagination>li a:hover { background: var(--uc-primary); }