/* 
整体页面的基本样式设置，包括字体、背景、颜色等。
采用现代无衬线字体，提升整体的科技感与可读性。
*/
body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  background: linear-gradient(135deg, #0D47A1, #37474F);
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
}

/* 
导航栏的样式，包括固定定位、背景色、悬停效果等。
通过box-shadow增加浮动感，确保导航栏在滚动时的视觉稳定性。
*/
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(37, 37, 37, 0.9);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 15px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  transition: background 0.3s ease;
}

.navbar a {
  color: #FFFFFF;
  text-decoration: none;
  font-size: 16px;
  padding: 10px 15px;
  transition: color 0.3s ease, transform 0.3s ease;
}

.navbar a:hover {
  color: #FF9100;
  transform: scale(1.05);
}

/* 
主要容器的布局，采用CSS Grid实现模块化布局，并设置响应式断点。
*/
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 40px;
  padding: 100px 60px 60px 60px; /* 顶部留出导航栏空间 */
}

/* 
每个模块的样式，包括背景色、内边距、圆角、阴影等。
增加层次感和立体效果，符合科技感设计需求。
*/
.module {
  background: rgba(38, 50, 56, 0.8);
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.module:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5);
}

/* 
标题样式，采用较大的字体和加粗，突出模块标题。
*/
h2, h3, h4 {
  color: #FFFFFF;
  margin-bottom: 20px;
}

h2 {
  font-size: 24px;
}

h3 {
  font-size: 20px;
}

h4 {
  font-size: 18px;
}

/* 
段落和文本的样式，调整字体大小和行间距，提升可读性。
*/
p {
  font-size: 16px;
  margin-bottom: 20px;
}

/* 
高亮和强调文本的样式，使用点缀色增强视觉效果。
*/
.highlight {
  color: #FF9800;
}

.accent {
  color: #00BCD4;
}

/* 
代码块的样式，采用背景色、内边距、圆角等，使其与正文区分开。
并且添加代码高亮效果。
*/
pre {
  background: #263238;
  padding: 20px;
  border-radius: 8px;
  overflow-x: auto;
}

code {
  color: #00BCD4;
  font-family: 'Courier New', Courier, monospace;
  font-size: 15px;
}

/* 
图片样式，设置圆角、阴影、悬停效果等，提升美观度。
*/
img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

img:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
}

/* 
响应式设计，确保在不同屏幕尺寸下的良好展示。
*/
@media (max-width: 1200px) {
  .container {
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  }
}

@media (max-width: 992px) {
  .container {
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  }
}

@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
  }

  .navbar a {
    margin: 5px 0;
  }

  .container {
    grid-template-columns: 1fr;
    padding: 100px 30px 30px 30px;
  }
}

/* 
按钮样式，采用点缀色，增加交互感，通过hover效果增强用户体验。
*/
.button {
  background: #FF9800;
  border: none;
  padding: 12px 24px;
  color: #FFFFFF;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
  font-size: 16px;
}

.button:hover {
  background: #E68900;
  transform: translateY(-2px);
}

/* 
添加微交互效果的类，例如卡片的悬停效果、图标的旋转等。
*/
.icon {
  width: 100px;
  height: 100px;
  background: #FF9800;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  transition: transform 0.3s ease;
}

.icon:hover {
  transform: rotate(45deg) scale(1.1);
}

/* 
淡入效果的类，应用于需要渐显的元素。
*/
.fade-in {
  opacity: 0;
  animation: fadeIn 2s forwards;
}

@keyframes fadeIn {
  to { opacity: 1; }
}

/* 
视差滚动效果的类，应用于具有固定背景的元素。
*/
.parallax {
  background-image: url('https://images.gptkong.com/demo/sample1.png');
  height: 500px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* 
玻璃效果的类，通过背后模糊和透明度，营造科技感的视觉效果。
*/
.glass-effect {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

/* 
发光效果的类，使用drop-shadow增强科技感。
*/
.glow {
  filter: drop-shadow(0 0 10px #00BCD4);
}

/* 
SVG动画的类，通过stroke-dasharray和stroke-dashoffset实现路径绘制动画。
*/
.svg-animate {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 5s forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* 
卡片组件的样式，结合线性渐变和多重盒阴影，增加立体感。
*/
.card {
  background: linear-gradient(145deg, #1E3C72, #2A5298);
  border-radius: 12px;
  box-shadow: 10px 10px 20px #1A262F, -10px -10px 20px #34568B;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: scale(1.05);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* 
固定导航栏在滚动时变化背景色的类。
*/
.navbar.scrolled {
  background: rgba(37, 37, 37, 1);
}

/* 
折叠区域的样式，初始隐藏，通过JavaScript控制展示。
*/
.collapsible {
  background-color: rgba(38, 50, 56, 0.8);
  color: #FFFFFF;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 18px;
  transition: background-color 0.3s ease;
}

.collapsible:hover {
  background-color: #FF9100;
}

.content {
  padding: 0 18px;
  display: none;
  background-color: rgba(38, 50, 56, 0.8);
  overflow: hidden;
}