/* 业务大类容器 */
.tri-category-section { 
    padding: 100px 0; 
    background: #fbfcfd; /* 优雅的浅灰色背景 */
    clear: both; 
    overflow: hidden;
}

.tri-wrapper {
    position: relative;
    width: 100%;
    /* 宽度增加，使视觉上接近 Banner 图片总长度 */
    max-width: 1000px; 
    height: 520px; 
    margin: 0 auto;
}

/* 核心节点：取消全局透明度，确保清晰 */
.tri-node {
    position: absolute;
    width: 280px; /* 适当调大卡片 */
    z-index: 5;
    text-align: center;
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    /* 核心修正：取消初始半透明，确保文字清晰可见 */
    opacity: 1; 
}

/* 如果你还想要一个淡入淡出的感觉，我们把这个效果加在“悬停时加深对比”上，而不是“初始不可见” */
.tri-node:hover {
    transform: translateY(-15px);
}

.tri-node:hover .node-icon img {
    /* 悬停时图片加亮或旋转，作为交互反馈 */
    filter: brightness(1.2); 
    transform: rotateY(180deg);
}

/* 图标容器：上图下文结构 */
.node-icon { 
    width: 90px; 
    height: 90px; 
    margin: 0 auto 20px; 
    display: flex;
    align-items: center;
    justify-content: center;
}

.node-icon img { 
    max-width: 100%; 
    height: auto; 
    display: block;
    transition: 0.6s; /* 用于旋转动效 */
}

/* 文字样式调整：显著增加颜色对比度 */
.tri-node h3 { 
    font-size: 24px; 
    /* 核心修正：加深颜色，使用接近纯黑 */
    color: #333333; 
    margin-bottom: 12px; 
    font-weight: bold; 
    letter-spacing: 1px;
}

.tri-node p { 
    font-size: 15px; 
    /* 核心修正：加深描述文字颜色 */
    color: #666666; 
    line-height: 1.8; 
}

/* --- 定位修正：让三角形布局更紧凑 --- */
.node-software { top: 0; left: 50%; transform: translateX(-50%); }
.node-hardware { bottom: 20px; left: 2%; } /* 靠近边界 */
.node-service  { bottom: 20px; right: 2%; } /* 靠近边界 */

/* 特殊修正：顶角悬停防止偏移丢失 */
.node-software:hover { transform: translateX(-50%) translateY(-15px); }


/* 装饰性圆环修正 */
.center-circle {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 580px; 
    height: 580px;
    border: 1px dashed #dcdfe6; /* 颜色稍深的虚线 */
    border-radius: 50%;
    z-index: 1;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .tri-wrapper { height: auto !important; display: flex; flex-direction: column; gap: 40px; align-items: center; }
    .tri-node { position: static !important; transform: none !important; width: 90%; }
    .center-circle { display: none; }
}