/* 
 * Seed-Coder Website Stylesheet
 * 主要样式表 | メインスタイルシート | 글로벌 스타일 시트 | Hoja de estilo principal
 */

/* 重置样式 | リセットスタイル | 리셋 스타일 | Estilos de reinicio */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 全局变量 | グローバル変数 | 글로벌 변수 | Variables globales */
:root {
  --primary-color: #5a50e9;  /* 更深的紫色 */
  --secondary-color: #3f3d56;  /* 保持不变的深色 */
  --accent-color: #00a98d;  /* 更深的绿松石色 */
  --text-color: #333333;  /* 深色文本，适合浅色背景 */
  --light-bg: #f9f9f9;
  --dark-bg: #1e1e2e;
  --white: #ffffff;
  --light-text: #f0f0f0;  /* 轻色文本颜色 - 用于深色卡片背景 */
  --medium-text: #555555;  /* 中等亮度文本颜色 - 适合浅色背景 */
  --dark-text: #222222;  /* 深色文本 - 用于标题 */
  --card-bg: rgba(90, 80, 233, 0.08);  /* 带紫色调的半透明卡片背景 */
  --transition: all 0.3s ease;
}

/* 网站基础样式 | サイトの基本スタイル | 사이트 기본 스타일 | Estilos básicos del sitio */
body {
  font-family: 'Roboto', 'Arial', sans-serif;
  line-height: 1.6;
  color: var(--text-color);
  background-color: var(--light-bg);
  overflow-x: hidden;
}

/* 容器布局 | コンテナレイアウト | 컨테이너 레이아웃 | Diseño de contenedor */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 粒子背景 | 粒子の背景 | 입자 배경 | Fondo de partículas */
#particles-js {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

/* 导航栏样式 | ナビゲーションバー | 네비게이션 바 | Barra de navegación */
.navbar {
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: var(--primary-color);  /* 更改为主色调 */
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  transition: var(--transition);
}

.navbar.scrolled {
  padding: 15px 0;
}

.logo {
  font-size: 24px;
  font-weight: 700;
  color: var(--white);
  text-decoration: none;
  text-shadow: 0 0 5px rgba(0,0,0,0.3);  /* 添加文字阴影增强可读性 */
}

.logo span {
  color: var(--primary-color);
}

/* 导航菜单 | ナビゲーションメニュー | 내비게이션 메뉴 | Menú de navegación */
.nav-menu {
  display: flex;
  list-style: none;
}

.nav-menu li {
  margin-left: 30px;
}

.nav-menu a {
  color: var(--light-text);  /* 使用新的轻色文本 */
  text-decoration: none;
  font-weight: 500;
  transition: var(--transition);
  text-shadow: 0 0 3px rgba(0,0,0,0.2);  /* 添加文字阴影 */
}

.nav-menu a:hover {
  color: var(--primary-color);
}

/* 语言切换 | 言語切り替え | 언어 전환 | Cambio de idioma */
.lang-switcher {
  display: flex;
  list-style: none;
  margin-left: 20px;
}

.lang-switcher li {
  margin-left: 10px;
}

.lang-switcher button {
  background: none;
  border: none;
  color: var(--light-text);  /* 使用新的轻色文本 */
  cursor: pointer;
  opacity: 0.8;
  transition: var(--transition);
}

.lang-switcher button:hover, 
.lang-switcher button.active {
  opacity: 1;
  color: var(--primary-color);
}

/* 英雄区域 | ヒーローエリア | 히어로 영역 | Área del héroe */
.hero {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: 80px;
}

.hero-content {
  max-width: 1000px;
}

.hero h1 {
  font-size: 48px;
  color: var(--primary-color);  /* 从白色改为主色 */
  margin-bottom: 20px;
  font-weight: 700;
  text-shadow: none;  /* 移除文字阴影 */
}

.hero p {
  font-size: 20px;
  color: var(--medium-text);  /* 使用中等深度文本色 */
  opacity: 1;
  margin-bottom: 30px;
  text-shadow: none;  /* 移除文字阴影 */
}

.hero-img {
  margin: 30px auto;
  max-width: 100%;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);  /* 增强阴影 */
}

/* 章节通用样式 | セクション共通スタイル | 섹션 공통 스타일 | Estilos comunes de sección */
.section {
  padding: 100px 0;
  position: relative;
}

.section-title {
  font-size: 36px;
  margin-bottom: 20px;
  color: var(--primary-color);  /* 从白色改为主色调 */
  text-align: center;
  text-shadow: none;  /* 移除文字阴影 */
}

.section-subtitle {
  font-size: 18px;
  color: var(--accent-color);
  text-align: center;
  margin-bottom: 60px;
}

/* 特性卡片 | 特徴カード | 특징 카드 | Tarjetas de características */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-bottom: 60px;
}

.feature-card {
  background: var(--card-bg);  /* 使用半透明卡片背景 */
  border-radius: 10px;
  padding: 30px;
  transition: var(--transition);
  border: 1px solid rgba(90, 80, 233, 0.15);
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  border-color: var(--primary-color);
}

.feature-card h3 {
  font-size: 24px;
  margin-bottom: 15px;
  color: var(--primary-color);  /* 使用主色 */
  text-shadow: none;  /* 移除文字阴影 */
}

.feature-card p {
  color: var(--medium-text);  /* 使用中等深度文本色 */
  opacity: 1;  /* 恢复完全不透明 */
}

/* 模型卡片 | モデルカード | 모델 카드 | Tarjetas de modelo */
.models {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-bottom: 60px;
}

.model-card {
  background: var(--card-bg);  /* 使用半透明卡片背景 */
  border-radius: 10px;
  padding: 30px;
  transition: var(--transition);
  border: 1px solid rgba(90, 80, 233, 0.15);
}

.model-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  border-color: var(--accent-color);
}

.model-card h3 {
  font-size: 24px;
  margin-bottom: 15px;
  color: var(--primary-color);
  text-shadow: none;  /* 移除文字阴影 */
}

.model-card p {
  color: var(--medium-text);  /* 使用中等深度文本色 */
  opacity: 1;  /* 恢复完全不透明 */
}

/* 图像对比区域 | 画像比較エリア | 이미지 비교 영역 | Área de comparación de imágenes */
.comparison {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 60px;
}

.comparison-images {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  margin-top: 30px;
}

.comparison-image {
  max-width: 100%;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.4);  /* 增强阴影 */
}

/* 调整LLM Filters vs. Rule-based Filters模块中的图片尺寸 */
.comparison-image {
  max-width: 40%;  /* 将图片缩小到容器宽度的70% */
  transition: transform 0.3s ease;
}

.comparison-image:hover {
  transform: scale(1.1);  /* 鼠标悬停时略微放大，提高用户体验 */
}

/* 性能区域 | パフォーマンスエリア | 성능 영역 | Área de rendimiento */
.performance {
  text-align: center;
}

.performance-image {
  max-width: 100%;
  margin-top: 30px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.4);  /* 增强阴影 */
}

/* 调整Performance模块中的图片尺寸 */
.performance-image {
  max-width: 70%;  /* 将图片缩小到容器宽度的70% */
  transition: transform 0.3s ease;
}

.performance-image:hover {
  transform: scale(1.05);  /* 鼠标悬停时略微放大，提高用户体验 */
}

.tech-section {
  margin-bottom: 60px;
}

.tech-title {
  font-size: 28px;
  margin-bottom: 25px;
  color: var(--primary-color);  /* 从强调色改为主色 */
  text-align: center;
  text-shadow: none;  /* 移除文字阴影 */
}

.tech-content p, 
.comparison p, 
.performance p {
  color: var(--medium-text);  /* 使用中等深度文本色 */
  margin-bottom: 20px;
  line-height: 1.7;
}

/* 常见问题 | よくある質問 | 자주 묻는 질문 | Preguntas frecuentes */
.faq {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 20px;
}

.faq-question {
  font-size: 20px;
  margin-bottom: 10px;
  color: var(--primary-color);
  font-weight: 500;
  text-shadow: none;  /* 移除文字阴影 */
}

.faq-answer {
  color: var(--medium-text);  /* 使用中等深度文本色 */
  opacity: 1;  /* 恢复完全不透明 */
}

/* 使用部分样式 | 使用部分スタイル | 사용 부분 스타일 | Estilos de sección de uso */
.usage-section {
  margin-bottom: 60px;
}

.usage-content {
  color: var(--medium-text);  /* 使用中等深度文本色 */
}

.usage-content p {
  margin-bottom: 15px;
}

.usage-content ul {
  margin-left: 20px;
  margin-bottom: 15px;
}

.usage-content li {
  margin-bottom: 8px;
  color: var(--medium-text);  /* 使用中等深度文本色 */
}

/* 页脚 | フッター | 푸터 | Pie de página */
.footer {
  /* background-color: var(--primary-color);   */
  /* 修改为主色背景 */
  /* padding: 60px 0 30px; */
  text-align: center;
  position: relative;
}

.footer p {
  color: var(--dark-text);  /* 浅色文本，用于深色页脚 */
  /* margin-bottom: 10px; */
}

.footer a {
  color: var(--dark-text);
  text-decoration: none;
  transition: var(--transition);
}

.footer a:hover {
  color: var(--accent-color);
}

.footer-content {
  margin-bottom: 30px;
}

/* 响应式设计 | レスポンシブデザイン | 반응형 디자인 | Diseño responsivo */
@media (max-width: 768px) {
  .navbar {
    padding: 15px 0;
  }
  
  .nav-menu {
    position: fixed;
    top: -100%;
    left: 0;
    width: 100%;
    background-color: rgba(25, 25, 40, 0.98);  /* 略微调整背景色 */
    flex-direction: column;
    text-align: center;
    transition: var(--transition);
    box-shadow: 0 10px 10px rgba(0,0,0,0.3);
    padding: 20px 0;
  }
  
  .nav-menu.active {
    top: 60px;
  }
  
  .nav-menu li {
    margin: 15px 0;
  }
  
  .mobile-menu-toggle {
    display: block;
    font-size: 24px;
    color: var(--white);
    cursor: pointer;
  }
  
  .hero h1 {
    font-size: 36px;
  }
  
  .hero p {
    font-size: 18px;
  }
  
  .section-title {
    font-size: 30px;
  }
  
  .features,
  .models {
    grid-template-columns: 1fr;
  }
  
  .comparison-images {
    flex-direction: column;
  }
}

@media (min-width: 769px) {
  .mobile-menu-toggle {
    display: none;
  }
}