:root {
  --tencent-blue: #006eff;
  --tencent-light-blue: #389bff;
  --tencent-deep-blue: #004fcc;
  --blue-gradient: linear-gradient(135deg, #006eff 0%, #288cff 100%);
  --blue-light-gradient: linear-gradient(135deg, #f0f7ff 0%, #e6f2ff 100%);
  --tencent-bg: #f5f7fa;
  --tencent-dark: #1d2129;
  --tencent-gray: #707680;
  --tencent-light-gray: #999;
  --border: #e5e6eb;
  --border-light: #eff3fa;
  --primary:#006eff;
  /* 分层阴影系统，制造质感 */
  --shadow-sm: 0 2px 8px rgba(0,110,255,0.06);
  --shadow-md: 0 6px 18px rgba(0,110,255,0.1);
  --shadow-lg: 0 10px 30px rgba(0,110,255,0.15);
  --shadow-hover: 0 14px 36px rgba(0,110,255,0.2);
  --trans: all 0.3s cubic-bezier(0.2,0,0.2,1);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
}
* {margin:0;padding:0;box-sizing:border-box;font-family:"Microsoft YaHei",system-ui,sans-serif}
html {scroll-behavior:smooth}
body {color:var(--tencent-dark);background:#fff;line-height:1.65;background-image: radial-gradient(#f0f6ff 0%, transparent 70%);background-attachment: fixed;}
ul {list-style:none}
a {text-decoration:none;color:inherit}
button {border:none;outline:none;cursor:pointer;background:transparent}
.container {width:92%;max-width:1260px;margin:0 auto}
.section {padding:80px 0}
.bg-light {background:var(--tencent-bg);background-image: radial-gradient(#e8f1ff 0%, transparent 75%);}
.sec-title {text-align:center;margin-top:100px}
.sec-title h2 {font-size:32px;font-weight:700;margin-bottom:12px;background:var(--blue-gradient);-webkit-background-clip:text;color:transparent;display:inline-block}
.sec-title p {font-size:15px;color:var(--tencent-gray);max-width:680px;margin:0 auto}

/* 通用按钮 */
.btn {display:inline-flex;align-items:center;justify-content:center;padding:12px 28px;border-radius:var(--radius-sm);font-size:15px;font-weight:500;transition:var(--trans);position:relative;overflow:hidden}
.btn-lg {padding:14px 36px;font-size:16px}
.btn-primary {background:var(--blue-gradient);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover {background:var(--tencent-deep-blue);box-shadow:var(--shadow-hover);transform:translateY(-3px)}
.btn-outline {background:transparent;border:1px solid var(--tencent-blue);color:var(--tencent-blue)}
.btn-outline:hover {background:var(--tencent-blue);color:#fff;box-shadow:var(--shadow-sm)}

/* 悬浮上浮统一质感 */
.hover-scale {transition:var(--trans);position:relative}
.hover-scale:hover {transform:translateY(-8px) scale(1.015);box-shadow:var(--shadow-md)}

/* 导航头部 磨砂玻璃质感 */


/* 面包屑 */
.breadcrumb {padding:16px 0;background:var(--blue-light-gradient);margin-top:80px;font-size:14px;color:var(--tencent-gray);border-bottom:1px solid var(--border-light);margin-bottom:50px}
.breadcrumb a {color:var(--tencent-blue)}
.breadcrumb span {margin:0 8px;color:#ccc}

/* 顶部分类导航 立体质感升级 */
.sky-cart-menu {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 24px 28px;
  margin-bottom: 48px;
  box-shadow: var(--shadow-sm);
  position:relative;
  overflow:hidden;
}
.sky-cart-menu::before {
  content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at top left, rgba(0,110,255,0.04), transparent 60%);pointer-events:none;
}
.nav-main-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 0;
  position:relative;z-index:1;
}
.nav-main-item {
  padding: 11px 22px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: 15px;
  color: #5a6270;
  transition: var(--trans);
  white-space: nowrap;
  background:#fff;
}
.nav-main-item.active {
  background: var(--blue-gradient);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.nav-main-item:hover:not(.active) {
  border-color: #006eff;
  color: #006eff;
  background: #f7fbff;
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.btn-group{
    display:flex;
    gap:20px;
    justify-content:center;
    flex-wrap:wrap;
}
.btn-main{
    padding:16px 42px;
    background:var(--primary);
    color:#fff;
    border:none;
    border-radius:var(--radius);
    font-size:17px;
    font-weight:500;
    cursor:pointer;
    transition:0.28s;
}
.btn-main:hover{opacity:0.93;box-shadow:var(--shadow-hover);transform:translateY(-2px);}

/* 机房卡片核心质感重构 多层立体 */
.node-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap:32px;
}
.node-card {
  display: none;
  background:#fff;
  border:1px solid var(--border-light);
  border-radius:var(--radius-xl);
  overflow:hidden;
  transition:var(--trans);
  position:relative;
}
.node-card::before {
  content:"";position:absolute;inset:0;opacity:0;transition:0.3s;background:radial-gradient(circle at top, rgba(0,110,255,0.06), transparent 70%);pointer-events:none;
}
.node-card.show {
  display: block;
  animation: fadeIn 0.4s ease;
}
@keyframes fadeIn {
  from { opacity:0; transform: translateY(12px); }
  to { opacity:1; transform: translateY(0); }
}
.node-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: var(--shadow-hover);
  border-color:rgba(0,110,255,0.18);
}
.node-card:hover::before {opacity:1}
.node-card-header {
  padding:26px;
  background:var(--blue-light-gradient);
  display:flex;align-items:center;gap:14px;
  border-bottom:1px solid var(--border-light);
}
.node-card-header i {
  font-size:28px;color:var(--tencent-blue);filter: drop-shadow(0 2px 6px rgba(0,110,255,0.15))
}
.node-card-header h3 {
  font-size:20px;font-weight:600;margin:0;
}
.node-card-body {
  padding:26px;
}
.node-tag {
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;
}
.node-tag span {
  font-size:13px;padding:5px 11px;background:rgba(0,110,255,0.08);color:var(--tencent-blue);border-radius:var(--radius-sm);border:1px solid rgba(0,110,255,0.12);
}
.node-desc {
  color:var(--tencent-gray);font-size:15px;line-height:1.7;margin-bottom:20px;
}
.node-card-footer {
  padding:18px 26px;border-top:1px solid var(--border-light);
  background:#fcfdff;
}
.node-card-footer a {
  display:block;text-align:center;padding:11px;border:1px solid var(--tencent-blue);border-radius:var(--radius-sm);color:var(--tencent-blue);transition:var(--trans);font-weight:500;
}
.node-card-footer a:hover {
  background:var(--blue-gradient);color:#fff;box-shadow:var(--shadow-sm)
}

/* 六大优势区块 渐变卡片 */
.adv-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.adv-card {
  background:#fff;
  padding:34px 26px;
  border-radius:var(--radius-xl);
  border:1px solid var(--border-light);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.adv-card::after {
  content:"";position:absolute;top:-60px;right:-60px;width:120px;height:120px;background:radial-gradient(circle, rgba(0,110,255,0.06), transparent);border-radius:50%;
}
.adv-card i {
  font-size:34px;color:var(--tencent-blue);margin-bottom:18px;filter: drop-shadow(0 3px 8px rgba(0,110,255,0.12))
}
.adv-card h4 {font-size:18px;margin-bottom:10px}
.adv-card p {color:var(--tencent-gray);font-size:14px}

/* 适用场景 */
.scene-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.scene-card {
  background:#fff;padding:30px 20px;border-radius:var(--radius-xl);border:1px solid var(--border-light);text-align:center;
  position:relative;
}
.scene-card i {font-size:30px;color:var(--tencent-blue);margin-bottom:16px;transition:0.3s}
.scene-card:hover i {transform: scale(1.15);filter: drop-shadow(0 4px 10px rgba(0,110,255,0.18))}

/* 购买流程 */
.flow-wrap {display:flex;justify-content:center;gap:48px;flex-wrap:wrap;text-align:center}
.flow-item {max-width:230px}
.flow-num {
  width:40px;height:40px;margin:0 auto 14px;line-height:40px;border-radius:50%;
  background:var(--blue-gradient);color:#fff;font-weight:bold;
  box-shadow:var(--shadow-sm);
}
.flow-item h4 {margin-bottom:10px}
.flow-item p {color:var(--tencent-gray);font-size:14px}

/* FAQ 折叠面板质感 */
.faq-item {
  border:1px solid var(--border-light);border-radius:var(--radius-lg);margin-bottom:20px;background:#fff;
  overflow:hidden;box-shadow:var(--shadow-sm)
}
.faq-q {
  padding:24px 28px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-size:16px;
  background:linear-gradient(to right, #ffffff, #fcfdff);
  transition:0.2s;
}
.faq-q:hover {background:#f7fbff}
.faq-q i {transition:0.3s ease transform}
.faq-a {
  padding:0 28px;max-height:0;overflow:hidden;color:var(--tencent-gray);transition:var(--trans);font-size:15px;line-height:1.7;
}
.faq-a.show {padding:0 28px 24px;max-height:320px}
.faq-a.show + .faq-q i {transform: rotate(45deg)}

/* 底部咨询 大渐变光晕区块 */
.contact {
  background:var(--blue-gradient);
  color:#fff;padding:70px 0;
  position:relative;overflow:hidden;
}
.contact::before {
  content:"";position:absolute;top:-120px;right:-100px;width:300px;height:300px;background:rgba(255,255,255,0.1);border-radius:50%;filter:blur(40px);
}
.contact::after {
  content:"";position:absolute;bottom:-80px;left:-60px;width:240px;height:240px;background:rgba(255,255,255,0.08);border-radius:50%;filter:blur(30px);
}
.contact-wrap {display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1}
.contact-left h2 {font-size:32px;margin-bottom:16px}
.contact-left p {margin-bottom:12px;font-size:16px;opacity:0.92}
.contact-left p i {margin-right:10px;width:18px;text-align:center}
.contact-right .btn {background:#fff;color:var(--tencent-blue);font-weight:600}
.contact-right .btn:hover {background:#ffffff;box-shadow:0 12px 30px rgba(0,0,0,0.15);transform:translateY(-4px)}

/* 页脚 */
.footer {background:#1d2129;color:#fff;padding:70px 0 28px;position:relative}
.footer::before {content:"";position:absolute;top:0;left:0;width:100%;height:1px;background:linear-gradient(90deg, transparent, #006eff, transparent)}
.footer-wrap {display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:52px}
.f-col h3 {font-size:22px;margin-bottom:22px;background:linear-gradient(90deg,#fff,#a0ccff);-webkit-background-clip:text;color:transparent;display:inline-block}
.f-col h4 {font-size:16px;margin-bottom:20px;color:#e8f1ff}
.f-col p {color:#aaa;line-height:1.7;font-size:14px}
.f-col li {margin-bottom:14px}
.f-col a {color:#aaa;font-size:14px;transition:0.2s}
.f-col a:hover {color:#389bff;padding-left:4px}
.copyright {border-top:1px solid #333;margin-top:52px;padding-top:28px;text-align:center;color:#777;font-size:14px}

/* 响应式适配 */
@media(max-width:1200px){
  .node-grid,.adv-grid {grid-template-columns:repeat(2,1fr)}
  .scene-grid {grid-template-columns:repeat(2,1fr)}
}
@media(max-width:992px){
  .contact-wrap {flex-direction:column;gap:36px;text-align:center}
  .flow-wrap {gap:28px}
}
@media(max-width:768px){
  .nav-menu {display:none}
  .node-grid,.adv-grid,.scene-grid,.footer-wrap {grid-template-columns:1fr}
  .section {padding:60px 0}
  .breadcrumb {font-size:13px}
  .flow-wrap {flex-direction:column;align-items:center}
  .sky-cart-menu { padding:20px 16px; }
  .nav-main-item { padding:10px 16px;font-size:14px; }
}