/* ============================================
   全局主样式 - 军事战术深色风格
   包含：全局重置、导航栏、页脚、按钮、通用卡片、响应式布局
   ============================================ */

/* ========== 全局样式重置 ========== */
/* 重置所有元素的内外边距和盒模型 */
* {
    /* 所有元素外边距清零 */
    margin: 0;
    /* 所有元素内边距清零 */
    padding: 0;
    /* 盒模型设置为边框盒 */
    box-sizing: border-box;
}

/* ========== 全局基础样式 ========== */
/* 设置HTML根元素基础样式 */
html {
    /* 字体大小基准 */
    font-size: 16px;
    /* 平滑滚动 */
    scroll-behavior: smooth;
    /* 禁止iOS字体大小自动调整 */
    -webkit-text-size-adjust: 100%;
}

/* 设置body基础样式 */
body {
    /* 设置全局字体族 */
    font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
    /* 设置背景主色：深灰黑 */
    background-color: #1a1a2e;
    /* 设置默认文字颜色为浅灰色 */
    color: #e0e0e0;
    /* 设置行高 */
    line-height: 1.6;
    /* 最小高度为视口高度 */
    min-height: 100vh;
    /* 横向溢出隐藏 */
    overflow-x: hidden;
}

/* 移除列表默认样式 */
ul,
ol {
    /* 去除列表标记 */
    list-style: none;
}

/* 移除链接默认下划线 */
a {
    /* 去除下划线 */
    text-decoration: none;
    /* 继承文字颜色 */
    color: inherit;
    /* 过渡动画 */
    transition: color 0.3s ease;
}

/* 链接悬停态颜色变化 */
a:hover {
    /* 悬停时变军绿色 */
    color: #4a7c59;
}

/* 设置图片响应式 */
img {
    /* 最大宽度不超过容器 */
    max-width: 100%;
    /* 高度自适应 */
    height: auto;
    /* 块级显示 */
    display: block;
}

/* 设置按钮基础样式 */
button {
    /* 继承字体 */
    font-family: inherit;
    /* 鼠标手型 */
    cursor: pointer;
    /* 无边框 */
    border: none;
    /* 透明背景 */
    background: none;
    /* 继承文字颜色 */
    color: inherit;
}

/* 设置表单元素字体继承 */
input,
textarea,
select {
    /* 继承字体族 */
    font-family: inherit;
    /* 继承字体大小 */
    font-size: inherit;
}

/* 滚动条样式 - Webkit内核浏览器 */
::-webkit-scrollbar {
    /* 滚动条宽度 */
    width: 8px;
    /* 滚动条高度 */
    height: 8px;
}

/* 滚动条轨道样式 */
::-webkit-scrollbar-track {
    /* 轨道背景色 */
    background: #16213e;
}

/* 滚动条滑块样式 */
::-webkit-scrollbar-thumb {
    /* 滑块背景色军绿色 */
    background: #4a7c59;
    /* 圆角 */
    border-radius: 4px;
}

/* 滚动条滑块悬停样式 */
::-webkit-scrollbar-thumb:hover {
    /* 悬停时变亮 */
    background: #5a9c6d;
}

/* ========== 通用工具类 ========== */
/* 容器类 - 限制最大宽度并居中 */
.container {
    /* 最大宽度 */
    max-width: 1400px;
    /* 水平居中 */
    margin: 0 auto;
    /* 左右内边距 */
    padding: 0 20px;
}

/* 文本居中类 */
.text-center {
    /* 文字居中 */
    text-align: center;
}

/* 清除浮动 */
.clearfix::after {
    /* 内容为空 */
    content: '';
    /* 表格显示 */
    display: table;
    /* 清除两侧浮动 */
    clear: both;
}

/* 隐藏元素 */
.hidden {
    /* 重要级隐藏 */
    display: none !important;
}

/* ========== 导航栏样式 ========== */
/* 导航栏主容器 - 透明悬浮 */
.navbar {
    /* 固定定位在顶部 */
    position: fixed;
    /* 距离顶部为0 */
    top: 0;
    /* 距离左侧为0 */
    left: 0;
    /* 宽度占满整个屏幕 */
    width: 100%;
    /* 内边距上下20px，左右40px */
    padding: 20px 40px;
    /* 设置层级最高 */
    z-index: 1000;
    /* 背景初始透明 */
    background: transparent;
    /* 过渡动画效果 */
    transition: all 0.3s ease;
}

/* 导航栏滚动后的样式 */
.navbar.scrolled {
    /* 滚动后背景变为深色半透明 */
    background: rgba(26, 26, 46, 0.95);
    /* 添加底部边框 */
    border-bottom: 2px solid #4a7c59;
    /* 减少内边距 */
    padding: 15px 40px;
    /* 添加阴影 */
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

/* 导航栏容器 */
.nav-container {
    /* 最大宽度限制 */
    max-width: 1400px;
    /* 水平居中 */
    margin: 0 auto;
    /* flex布局 */
    display: flex;
    /* 两端对齐 */
    justify-content: space-between;
    /* 垂直居中 */
    align-items: center;
}

/* Logo样式 */
.nav-logo {
    /* 字体大小 */
    font-size: 28px;
    /* 字体加粗 */
    font-weight: bold;
    /* 文字颜色军绿色 */
    color: #4a7c59;
    /* 去除下划线 */
    text-decoration: none;
    /* 字母间距 */
    letter-spacing: 3px;
    /* 相对定位 */
    position: relative;
}

/* Logo后面的装饰线 */
.nav-logo::after {
    /* 伪元素内容为空 */
    content: '';
    /* 绝对定位 */
    position: absolute;
    /* 距离底部-5px */
    bottom: -5px;
    /* 距离左侧为0 */
    left: 0;
    /* 宽度30px */
    width: 30px;
    /* 高度2px */
    height: 2px;
    /* 背景色橙黄色 */
    background: #e8a838;
    /* 过渡动画 */
    transition: width 0.3s ease;
}

/* 鼠标悬停Logo时的装饰线 */
.nav-logo:hover::after {
    /* 宽度变为100% */
    width: 100%;
}

/* 导航菜单 */
.nav-menu {
    /* flex布局 */
    display: flex;
    /* 去除列表样式 */
    list-style: none;
    /* 元素间距 */
    gap: 35px;
}

/* 导航菜单项链接 */
.nav-menu a {
    /* 文字颜色 */
    color: #e0e0e0;
    /* 去除下划线 */
    text-decoration: none;
    /* 字体大小 */
    font-size: 15px;
    /* 字体粗细 */
    font-weight: 500;
    /* 相对定位 */
    position: relative;
    /* 过渡动画 */
    transition: color 0.3s ease;
    /* 大写字母间距 */
    letter-spacing: 1px;
}

/* 导航链接悬停效果 */
.nav-menu a:hover {
    /* 悬停时文字变军绿色 */
    color: #4a7c59;
}

/* 导航链接底部装饰线 */
.nav-menu a::after {
    /* 伪元素内容为空 */
    content: '';
    /* 绝对定位 */
    position: absolute;
    /* 距离底部-8px */
    bottom: -8px;
    /* 距离左侧50% */
    left: 50%;
    /* 初始宽度为0 */
    width: 0;
    /* 高度2px */
    height: 2px;
    /* 背景色橙黄色 */
    background: #e8a838;
    /* 过渡动画 */
    transition: all 0.3s ease;
    /* 向左偏移50% */
    transform: translateX(-50%);
}

/* 导航链接悬停时底部线条展开 */
.nav-menu a:hover::after {
    /* 宽度变为100% */
    width: 100%;
}

/* 当前激活的导航链接 */
.nav-menu a.active {
    /* 激活状态文字变军绿色 */
    color: #4a7c59;
}

/* 激活状态底部线条 */
.nav-menu a.active::after {
    /* 宽度为100% */
    width: 100%;
}

/* 移动端菜单按钮 */
.nav-toggle {
    /* 默认隐藏 */
    display: none;
    /* flex布局 */
    flex-direction: column;
    /* 鼠标指针为手型 */
    cursor: pointer;
    /* 元素间距 */
    gap: 5px;
    /* 内边距 */
    padding: 5px;
}

/* 菜单按钮横线 */
.nav-toggle span {
    /* 块级元素 */
    display: block;
    /* 宽度25px */
    width: 25px;
    /* 高度2px */
    height: 2px;
    /* 背景色白色 */
    background: #e0e0e0;
    /* 过渡动画 */
    transition: all 0.3s ease;
}

/* 菜单按钮激活状态（X形） */
.nav-toggle.active span:nth-child(1) {
    /* 旋转45度 */
    transform: rotate(45deg) translate(5px, 5px);
}

/* 菜单按钮激活状态中间线隐藏 */
.nav-toggle.active span:nth-child(2) {
    /* 透明不可见 */
    opacity: 0;
}

/* 菜单按钮激活状态第三根线 */
.nav-toggle.active span:nth-child(3) {
    /* 旋转-45度 */
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ========== 区域标题通用样式 ========== */
/* 区域标题 */
.section-title {
    /* 文字居中 */
    text-align: center;
    /* 字体大小 */
    font-size: 36px;
    /* 字体加粗 */
    font-weight: bold;
    /* 文字颜色 */
    color: #ffffff;
    /* 下边距 */
    margin-bottom: 15px;
    /* 字母间距 */
    letter-spacing: 5px;
    /* 相对定位 */
    position: relative;
    /* 内边距底部20px */
    padding-bottom: 20px;
}

/* 区域标题底部装饰线 */
.section-title::after {
    /* 内容为空 */
    content: '';
    /* 绝对定位 */
    position: absolute;
    /* 距离底部为0 */
    bottom: 0;
    /* 距离左侧50% */
    left: 50%;
    /* 宽度60px */
    width: 60px;
    /* 高度3px */
    height: 3px;
    /* 背景色军绿色 */
    background: #4a7c59;
    /* 水平居中偏移 */
    transform: translateX(-50%);
}

/* 区域副标题 */
.section-subtitle {
    /* 文字居中 */
    text-align: center;
    /* 文字颜色 */
    color: #888;
    /* 字体大小 */
    font-size: 16px;
    /* 下边距 */
    margin-bottom: 50px;
    /* 字母间距 */
    letter-spacing: 2px;
}

/* ========== 按钮样式 ========== */
/* 基础按钮样式 */
.btn {
    /* 内边距 */
    padding: 14px 40px;
    /* 字体大小 */
    font-size: 15px;
    /* 字体粗细 */
    font-weight: bold;
    /* 文字转换大写 */
    text-transform: uppercase;
    /* 字母间距 */
    letter-spacing: 2px;
    /* 去除下划线 */
    text-decoration: none;
    /* 边框样式 */
    border: 2px solid;
    /* 鼠标手型 */
    cursor: pointer;
    /* 过渡动画 */
    transition: all 0.3s ease;
    /* 相对定位 */
    position: relative;
    /* 溢出隐藏 */
    overflow: hidden;
    /* 行内块级元素 */
    display: inline-block;
}

/* 主要按钮样式 */
.btn-primary {
    /* 背景色军绿色 */
    background: #4a7c59;
    /* 边框色军绿色 */
    border-color: #4a7c59;
    /* 文字颜色白色 */
    color: #ffffff;
}

/* 主要按钮悬停效果 */
.btn-primary:hover {
    /* 背景变深 */
    background: #3d6649;
    /* 边框变深 */
    border-color: #3d6649;
    /* 向上移动2px */
    transform: translateY(-2px);
    /* 添加阴影 */
    box-shadow: 0 5px 20px rgba(74, 124, 89, 0.4);
    /* 文字颜色保持白色 */
    color: #ffffff;
}

/* 次要按钮样式 */
.btn-outline {
    /* 背景透明 */
    background: transparent;
    /* 边框橙黄色 */
    border-color: #e8a838;
    /* 文字颜色橙黄色 */
    color: #e8a838;
}

/* 次要按钮悬停效果 */
.btn-outline:hover {
    /* 背景橙黄色 */
    background: #e8a838;
    /* 文字颜色深色 */
    color: #1a1a2e;
    /* 向上移动2px */
    transform: translateY(-2px);
    /* 添加阴影 */
    box-shadow: 0 5px 20px rgba(232, 168, 56, 0.4);
}

/* 小尺寸按钮 */
.btn-sm {
    /* 内边距 */
    padding: 10px 25px;
    /* 字体大小 */
    font-size: 13px;
}

/* 块级按钮 - 占满整行 */
.btn-block {
    /* 块级显示 */
    display: block;
    /* 宽度100% */
    width: 100%;
    /* 文字居中 */
    text-align: center;
}

/* ========== 页脚样式 ========== */
/* 页脚主容器 */
.footer {
    /* 背景色深色 */
    background: #0f0f1a;
    /* 顶部边框 */
    border-top: 2px solid #4a7c59;
    /* 内边距上下40px，左右20px */
    padding: 40px 20px 20px;
    /* 文字居中 */
    text-align: center;
    /* 上边距自动 */
    margin-top: auto;
}

/* 页脚内容容器 */
.footer-content {
    /* 最大宽度 */
    max-width: 1400px;
    /* 水平居中 */
    margin: 0 auto;
}

/* 页脚Logo */
.footer-logo {
    /* 字体大小 */
    font-size: 24px;
    /* 字体加粗 */
    font-weight: bold;
    /* 文字颜色军绿色 */
    color: #4a7c59;
    /* 字母间距 */
    letter-spacing: 5px;
    /* 下边距 */
    margin-bottom: 20px;
}

/* 页脚社交链接按钮区域 */
.footer-social {
    /* flex布局 */
    display: flex;
    /* 水平居中 */
    justify-content: center;
    /* 元素间距 */
    gap: 15px;
    /* 下边距 */
    margin-bottom: 25px;
}

/* 社交按钮基础样式 */
.social-btn {
    /* inline-flex布局 */
    display: inline-flex;
    /* 垂直居中 */
    align-items: center;
    /* 元素间距 */
    gap: 8px;
    /* 内边距 */
    padding: 8px 20px;
    /* 边框圆角 */
    border-radius: 4px;
    /* 文字大小 */
    font-size: 14px;
    /* 去除下划线 */
    text-decoration: none;
    /* 过渡动画 */
    transition: all 0.3s ease;
    /* 边框 */
    border: 1px solid;
    /* 字体粗细 */
    font-weight: 500;
}

/* QQ群按钮样式 */
.social-qq {
    /* 背景色 */
    background: rgba(18, 183, 245, 0.1);
    /* 边框颜色 */
    border-color: rgba(18, 183, 245, 0.4);
    /* 文字颜色 */
    color: #12b7f5;
}

/* QQ群按钮悬停 */
.social-qq:hover {
    /* 背景色加深 */
    background: rgba(18, 183, 245, 0.2);
    /* 边框颜色加深 */
    border-color: #12b7f5;
    /* 向上位移 */
    transform: translateY(-2px);
}

/* KOOK按钮样式 */
.social-kook {
    /* 背景色 */
    background: rgba(93, 105, 243, 0.1);
    /* 边框颜色 */
    border-color: rgba(93, 105, 243, 0.4);
    /* 文字颜色 */
    color: #5d69f3;
}

/* KOOK按钮悬停 */
.social-kook:hover {
    /* 背景色加深 */
    background: rgba(93, 105, 243, 0.2);
    /* 边框颜色加深 */
    border-color: #5d69f3;
    /* 向上位移 */
    transform: translateY(-2px);
}

/* 页脚链接组 */
.footer-links {
    /* flex布局 */
    display: flex;
    /* 水平居中 */
    justify-content: center;
    /* 自动换行 */
    flex-wrap: wrap;
    /* 元素间距 */
    gap: 30px;
    /* 下边距 */
    margin-bottom: 25px;
}

/* 页脚链接 */
.footer-links a {
    /* 文字颜色 */
    color: #888;
    /* 去除下划线 */
    text-decoration: none;
    /* 字体大小 */
    font-size: 14px;
    /* 过渡动画 */
    transition: color 0.3s ease;
}

/* 页脚链接悬停效果 */
.footer-links a:hover {
    /* 颜色变军绿色 */
    color: #4a7c59;
}

/* 页脚底部版权信息 */
.footer-bottom {
    /* 顶部边框 */
    border-top: 1px solid #1a1a2e;
    /* 顶部内边距 */
    padding-top: 20px;
    /* 字体大小 */
    font-size: 13px;
    /* 文字颜色 */
    color: #666;
    /* 行高 */
    line-height: 2;
}

/* 页脚备案链接 */
.footer-bottom a {
    /* 文字颜色 */
    color: #666;
    /* 去除下划线 */
    text-decoration: none;
    /* 过渡动画 */
    transition: color 0.3s ease;
}

/* 页脚备案链接悬停 */
.footer-bottom a:hover {
    /* 颜色变军绿色 */
    color: #4a7c59;
}

/* 服务提供商标注 */
.footer-provider {
    /* 字体大小 */
    font-size: 12px;
    /* 文字颜色更深 */
    color: #555;
    /* 上边距 */
    margin-top: 10px;
}

/* 服务提供商链接 */
.footer-provider a {
    /* 文字颜色 */
    color: #666;
    /* 去除下划线 */
    text-decoration: none;
    /* 过渡动画 */
    transition: color 0.3s ease;
    /* 边框底部 */
    border-bottom: 1px solid transparent;
}

/* 服务提供商链接悬停 */
.footer-provider a:hover {
    /* 文字颜色 - 军绿色 */
    color: #4a7c59;
    /* 底部边框 */
    border-bottom-color: #4a7c59;
}

/* ========== 动画定义 ========== */

/* 渐入上移动画 */
@keyframes fadeInUp {
    /* 起始状态 */
    from {
        /* 透明度0 */
        opacity: 0;
        /* 向下偏移30px */
        transform: translateY(30px);
    }
    /* 结束状态 */
    to {
        /* 透明度1 */
        opacity: 1;
        /* 位置归位 */
        transform: translateY(0);
    }
}

/* 渐入动画 */
@keyframes fadeIn {
    /* 起始状态 */
    from {
        /* 透明度0 */
        opacity: 0;
    }
    /* 结束状态 */
    to {
        /* 透明度1 */
        opacity: 1;
    }
}

/* 呼吸闪烁动画 */
@keyframes pulse {
    /* 0%状态 */
    0% {
        /* 完全不透明 */
        opacity: 1;
        /* 阴影 */
        box-shadow: 0 0 5px #4a7c59;
    }
    /* 50%状态 */
    50% {
        /* 半透明 */
        opacity: 0.5;
        /* 更大的阴影 */
        box-shadow: 0 0 15px #4a7c59;
    }
    /* 100%状态 */
    100% {
        /* 完全不透明 */
        opacity: 1;
        /* 阴影 */
        box-shadow: 0 0 5px #4a7c59;
    }
}

/* 上下跳动动画 */
@keyframes bounce {
    /* 0%状态 */
    0%, 20%, 50%, 80%, 100% {
        /* 位置不变 */
        transform: rotate(45deg) translateY(0);
    }
    /* 40%状态 */
    40% {
        /* 向上移动10px */
        transform: rotate(45deg) translateY(-10px);
    }
    /* 60%状态 */
    60% {
        /* 向上移动5px */
        transform: rotate(45deg) translateY(-5px);
    }
}

/* ========== 响应式适配 - 平板端 ========== */
@media (max-width: 992px) {
    /* 服务器网格变为单列 */
    .servers-grid {
        /* 单列布局 */
        grid-template-columns: 1fr;
    }

    /* 区域标题缩小 */
    .section-title {
        /* 字体大小 */
        font-size: 32px;
        /* 字母间距 */
        letter-spacing: 3px;
    }
}

/* ========== 响应式适配 - 移动端 ========== */
@media (max-width: 768px) {
    /* 导航栏内边距调整 */
    .navbar {
        /* 上下左右内边距 */
        padding: 15px 20px;
    }

    /* 滚动后导航栏内边距 */
    .navbar.scrolled {
        /* 上下左右内边距 */
        padding: 12px 20px;
    }

    /* 显示移动端菜单按钮 */
    .nav-toggle {
        /* 显示为flex */
        display: flex;
    }

    /* 导航菜单默认隐藏 */
    .nav-menu {
        /* 固定定位 */
        position: fixed;
        /* 距离顶部60px */
        top: 60px;
        /* 距离左侧为0 */
        left: 0;
        /* 宽度100% */
        width: 100%;
        /* 背景色深色 */
        background: rgba(26, 26, 46, 0.98);
        /* 改为纵向排列 */
        flex-direction: column;
        /* 元素居中 */
        align-items: center;
        /* 内边距 */
        padding: 30px 0;
        /* 元素间距 */
        gap: 25px;
        /* 默认隐藏 */
        display: none;
        /* 底部边框 */
        border-bottom: 2px solid #4a7c59;
    }

    /* 导航菜单激活状态（显示） */
    .nav-menu.active {
        /* 显示为flex */
        display: flex;
    }

    /* 区域标题缩小 */
    .section-title {
        /* 字体大小 */
        font-size: 28px;
        /* 字母间距 */
        letter-spacing: 3px;
    }

    /* 页脚链接间距减小 */
    .footer-links {
        /* 元素间距 */
        gap: 15px;
    }

    /* 按钮宽度充满 */
    .btn {
        /* 宽度100% */
        width: 100%;
        /* 文字居中 */
        text-align: center;
    }
}

/* ========== 内页通用样式 ========== */
/* 内页主容器 */
.page-container {
    /* 顶部内边距，避开导航栏 */
    padding-top: 100px;
    /* 底部内边距 */
    padding-bottom: 60px;
    /* 最小高度 */
    min-height: calc(100vh - 200px);
}

/* 内页内容区域 */
.page-content {
    /* 最大宽度 */
    max-width: 1200px;
    /* 水平居中 */
    margin: 0 auto;
    /* 左右内边距 */
    padding: 0 20px;
}

/* 内页头部横幅 */
.page-banner {
    /* 相对定位 */
    position: relative;
    /* 顶部内边距 */
    padding-top: 120px;
    /* 底部内边距 */
    padding-bottom: 60px;
    /* 文字居中 */
    text-align: center;
    /* 背景渐变 */
    background: linear-gradient(135deg, #1a1a2e 0%, #0f3460 100%);
    /* 底部边框 */
    border-bottom: 2px solid #4a7c59;
    /* 溢出隐藏 */
    overflow: hidden;
}

/* 内页横幅背景网格 */
.page-banner::before {
    /* 内容为空 */
    content: '';
    /* 绝对定位 */
    position: absolute;
    /* 距离顶部为0 */
    top: 0;
    /* 距离左侧为0 */
    left: 0;
    /* 宽度100% */
    width: 100%;
    /* 高度100% */
    height: 100%;
    /* 背景网格图案 */
    background-image: 
        linear-gradient(rgba(74, 124, 89, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(74, 124, 89, 0.05) 1px, transparent 1px);
    /* 背景尺寸 */
    background-size: 50px 50px;
}

/* 内页横幅标题 */
.page-banner-title {
    /* 相对定位 */
    position: relative;
    /* 字体大小 */
    font-size: 42px;
    /* 字体加粗 */
    font-weight: bold;
    /* 文字颜色白色 */
    color: #ffffff;
    /* 字母间距 */
    letter-spacing: 8px;
    /* 下边距 */
    margin-bottom: 15px;
    /* 层级 */
    z-index: 2;
}

/* 内页横幅副标题 */
.page-banner-subtitle {
    /* 相对定位 */
    position: relative;
    /* 文字颜色 */
    color: #888;
    /* 字体大小 */
    font-size: 16px;
    /* 字母间距 */
    letter-spacing: 3px;
    /* 层级 */
    z-index: 2;
}

/* 内容卡片 */
.content-card {
    /* 背景色 */
    background: #222236;
    /* 边框 */
    border: 1px solid #2a2a40;
    /* 内边距 */
    padding: 40px;
    /* 相对定位 */
    position: relative;
    /* 过渡动画 */
    transition: all 0.3s ease;
    /* 顶部装饰条 */
    border-top: 3px solid #4a7c59;
}

/* 内容卡片悬停效果 */
.content-card:hover {
    /* 边框变色 */
    border-color: #4a7c59;
    /* 添加阴影 */
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
}

/* 内容标题 */
.content-title {
    /* 字体大小 */
    font-size: 24px;
    /* 字体加粗 */
    font-weight: bold;
    /* 文字颜色白色 */
    color: #ffffff;
    /* 下边距 */
    margin-bottom: 20px;
    /* 底部内边距 */
    padding-bottom: 15px;
    /* 底部边框 */
    border-bottom: 1px solid #2a2a40;
    /* 字母间距 */
    letter-spacing: 2px;
}

/* 内容段落 */
.content-paragraph {
    /* 文字颜色 */
    color: #c0c0c0;
    /* 行高 */
    line-height: 2;
    /* 下边距 */
    margin-bottom: 20px;
    /* 字体大小 */
    font-size: 15px;
}

/* 内容列表 */
.content-list {
    /* 下边距 */
    margin-bottom: 20px;
}

/* 内容列表项 */
.content-list li {
    /* 相对定位 */
    position: relative;
    /* 左侧内边距 */
    padding-left: 25px;
    /* 行高 */
    line-height: 2;
    /* 文字颜色 */
    color: #c0c0c0;
    /* 字体大小 */
    font-size: 15px;
}

/* 内容列表项标记 */
.content-list li::before {
    /* 内容 */
    content: '▸';
    /* 绝对定位 */
    position: absolute;
    /* 距离左侧为0 */
    left: 0;
    /* 颜色军绿色 */
    color: #4a7c59;
    /* 字体粗细 */
    font-weight: bold;
}

/* 高亮文本 */
.highlight-text {
    /* 颜色橙黄色 */
    color: #e8a838;
    /* 字体粗细 */
    font-weight: bold;
}

/* 军绿色高亮文本 */
.accent-text {
    /* 颜色军绿色 */
    color: #4a7c59;
    /* 字体粗细 */
    font-weight: bold;
}

/* 分割线 */
.divider {
    /* 高度 */
    height: 1px;
    /* 背景色 */
    background: #2a2a40;
    /* 上下边距 */
    margin: 30px 0;
}

/* 网格布局 - 两列 */
.grid-2 {
    /* CSS网格布局 */
    display: grid;
    /* 两列等宽 */
    grid-template-columns: repeat(2, 1fr);
    /* 间距 */
    gap: 30px;
}

/* 网格布局 - 三列 */
.grid-3 {
    /* CSS网格布局 */
    display: grid;
    /* 三列等宽 */
    grid-template-columns: repeat(3, 1fr);
    /* 间距 */
    gap: 30px;
}

/* ========== 内页响应式适配 ========== */
@media (max-width: 992px) {
    /* 两列网格变单列 */
    .grid-2,
    .grid-3 {
        /* 单列布局 */
        grid-template-columns: 1fr;
    }

    /* 内页横幅标题缩小 */
    .page-banner-title {
        /* 字体大小 */
        font-size: 32px;
        /* 字母间距 */
        letter-spacing: 4px;
    }
}

@media (max-width: 768px) {
    /* 内容卡片内边距减小 */
    .content-card {
        /* 内边距 */
        padding: 25px;
    }

    /* 内页横幅标题缩小 */
    .page-banner-title {
        /* 字体大小 */
        font-size: 26px;
        /* 字母间距 */
        letter-spacing: 2px;
    }

    /* 内容标题缩小 */
    .content-title {
        /* 字体大小 */
        font-size: 20px;
    }

    /* 内页主容器顶部内边距调整 */
    .page-container {
        /* 顶部内边距 */
        padding-top: 80px;
    }
}