/* 
  本CSS样式表用于智慧网络风险管理与合规科技解决方案网页的设计。整体设计融合了未来感与高级质感，旨在营造一个色彩丰富、沉浸感强且高端响应式的网页环境。以下为主要样式和布局设计细节：

  1. 色彩搭配：
     - 主色调采用蓝色(#1e3c72至#2a5298)的线性渐变，营造科技感和专业性，占整体色彩的70%。
     - 辅色使用灰色和白色，增强层次感和内容的可读性，占25%。
     - 点缀色选用橙色(#ff6600)作为重要信息和交互元素的高亮，吸引用户注意，占5%。

  2. 布局设计：
     - 使用Flexbox和Grid布局技术，实现响应式设计，确保页面在320px到1920px宽度的设备上均有良好展示。
     - 导航栏固定在顶部，采用选项卡式布局，确保用户随时可以切换不同模块。
     - 内容区域采用网格系统，模块化展示不同内容，增加视觉层次和信息查找效率。
     - 适当留白，避免页面过于拥挤，提升视觉舒适度和阅读体验。

  3. 字体与排版：
     - 全站字体采用无衬线字体，例如Roboto和Montserrat，确保现代感与易读性。
     - 正文字体大小设置为16px，标题字体逐级递增，确保信息层次分明。
     - 使用text-shadow和box-shadow增加文字和元素的立体感，提升视觉层次。

  4. 交互效果：
     - 按钮和链接添加悬停效果，通过颜色变换和轻微放大增强用户反馈。
     - 使用CSS3的transition和transform属性，实现平滑的动画效果和微交互，如导航栏的下拉菜单和内容切换的淡入淡出效果。
     - 关键元素如按钮、卡片在悬停时有轻微的3D变换，增强互动体验。

  5. 图像与装饰元素：
     - 图片使用圆角、阴影和精致边框处理，提升整体美感。
     - 动态线条和科技感装饰元素点缀页面，增强未来感和高级质感。
     - 图表和数据可视化部分采用CSS3动画，帮助用户快速理解复杂信息。

  6. 响应式设计：
     - 利用媒体查询调整布局和字体大小，确保在不同设备上内容的可读性和美观性。
     - 移动端采用折叠式导航栏，节省空间并保持简洁。

  7. 其他细节：
     - 所有内部链接均添加rel="nofollow"属性，符合SEO优化要求。
     - 页面不使用纯白色背景，通过渐变和柔和的色彩过渡减少视觉疲劳。
     - 代码示例部分采用不同的背景色和字体样式，确保与正文内容区别开来，便于阅读和理解。

  通过上述设计原则和CSS3高级特性的应用，确保网页在视觉效果和用户体验上均达到高标准，传达出智慧网络在风险管理与合规科技领域的专业性和可信度。
*/

/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  line-height: 1.6;
  background: linear-gradient(135deg, #1e3c72, #2a5298);
  color: #333;
  padding-top: 80px; /* 为固定导航栏预留空间 */
}

/* 导航栏样式 */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: rgba(30, 60, 114, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px 0;
  z-index: 1000;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.navbar a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  margin: 0 15px;
  transition: color 0.3s ease;
}

.navbar a:hover {
  color: #ff6600;
}

/* 主要内容区域 */
.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 20px;
  padding: 20px;
}

.sidebar {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.sidebar img {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  margin-bottom: 20px;
  transition: transform 0.3s ease;
}

.sidebar img:hover {
  transform: scale(1.05);
}

.main-content {
  background-color: rgba(255, 255, 255, 0.85);
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.main-content h1 {
  font-size: 2.5em;
  color: #1e3c72;
  margin-bottom: 20px;
  text-align: center;
}

.main-content h2 {
  font-size: 2em;
  color: #2a5298;
  margin-top: 30px;
  margin-bottom: 10px;
}

.main-content p {
  font-size: 16px;
  margin-bottom: 20px;
  line-height: 1.8;
}

.main-content pre {
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 8px;
  overflow-x: auto;
  margin-bottom: 20px;
}

.main-content code {
  font-family: 'Courier New', Courier, monospace;
  color: #d63384;
}

/* 提示信息样式 */
.promo {
  background: #ff6600;
  color: #fff;
  padding: 10px 20px;
  text-align: center;
  font-size: 1.2em;
  border-radius: 5px;
  margin-bottom: 30px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* 图片装饰样式 */
.decorative-images {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 20px;
}

.decorative-images img {
  width: 100%;
  max-width: 320px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.decorative-images img:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}

/* 代码示例样式 */
.code-sample {
  background-color: #2a5298;
  color: #000;
  padding: 20px;
  border-radius: 8px;
  font-family: 'Courier New', Courier, monospace;
  overflow-x: auto;
  margin-bottom: 20px;
}

.code-sample code {
  display: block;
  white-space: pre;
}

/* 按钮样式 */
.button {
  background-color: #ff6600;
  color: #000;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.button:hover {
  background-color: #e65c00;
  transform: scale(1.05);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .container {
    grid-template-columns: 1fr 2fr;
  }
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }

  .navbar {
    flex-direction: column;
  }

  .navbar a {
    margin: 10px 0;
  }
}