/* style.css */

/* --- 基本重置和全局样式 --- */

/*
  描述：应用基本的盒子模型和移除默认边距/填充。
  目的：确保跨浏览器的一致性，为自定义样式提供干净的基础。
*/
*,
*::before,
*::after {
    box-sizing: border-box; /* 盒子模型：边框和内边距包含在元素的宽度和高度内 */
    margin: 0; /* 移除默认外边距 */
    padding: 0; /* 移除默认内边距 */
}

/*
  描述：设置 HTML 根元素的基本字体大小和行高。
  目的：为 REM 单位提供基础，并改善文本可读性。
*/
html {
    font-size: 100%; /* 默认为 16px，允许用户浏览器设置覆盖 */
    line-height: 1.5; /* 设置合适的行间距 */
    scroll-behavior: smooth; /* 平滑滚动效果 */
}

/*
  描述：设置 body 的基本样式。
  目的：定义默认字体、背景颜色和文本颜色，为整个页面奠定视觉基调。
*/
body {
    font-family: sans-serif; /* 默认使用无衬线字体，后续可替换为更具体的字体 */
    color: #333; /* 默认文本颜色 - 深灰色，易于阅读 */
    background-color: #f0f8ff; /* 默认背景颜色 - 爱丽丝蓝，一种柔和的浅蓝色，符合温暖明亮风格的起点 */
    overflow-x: hidden; /* 防止水平滚动条 */
}

/* --- 顶部横幅样式 --- */
/*
  描述：设置顶部横幅样式。
  目的：创建显眼的，包含主要关键词的页面顶部横幅。
*/
.top-banner {
    background: linear-gradient(45deg, #ff9a9e, #fad0c4); /* 温暖渐变背景 */
    color: #333;
    text-align: center;
    padding: 15px 20px;
    font-size: 1.1rem;
    position: relative;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-bottom: 10px;
    transform: skew(0deg, -1deg); /* 微小的变形，增加不规则感 */
    z-index: 999;
}

.top-banner p {
    margin: 0;
    transform: skew(0deg, 1deg); /* 抵消容器的变形，使文字保持正常 */
}

.top-banner strong {
    color: #d35400; /* 强调词使用深橙色 */
    font-size: 1.2em;
}

/* --- 帮助类 --- */
/*
  描述：用于创建不规则布局的辅助类。
  目的：通过 Flexbox 控制子项的对齐方式，实现视觉上的不规则和动感。
*/
.irregular-container {
    display: flex; /* 使用 Flexbox 布局 */
    flex-wrap: wrap; /* 允许子项换行 */
    gap: 20px; /* 子项之间的间隙 */
}

.irregular-item {
    flex-grow: 1; /* 允许子项根据需要增长 */
    min-width: 280px; /* 子项的最小宽度，有助于响应式 */
    /* 可以在具体 section 中添加更多不规则样式，如旋转、偏移等 */
}

/* --- 导航栏/语言切换器样式 --- */
/*
  描述：设置导航栏的样式。
  目的：使其固定在页面顶部，提供清晰的语言切换选项。
*/
#language-switcher {
    background-color: rgba(255, 255, 255, 0.9); /* 半透明白色背景 */
    padding: 10px 20px;
    text-align: center; /* 按钮居中 */
    position: fixed; /* 固定在视口顶部 */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /*确保在其他内容之上*/
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 轻微的底部阴影增加层次感 */
}

#language-switcher button {
    background-color: #ffd700; /* 金色背景，温暖明亮 */
    color: #333;
    border: 1px solid #f0e68c; /* 淡卡其色边框 */
    padding: 8px 15px;
    margin: 5px;
    cursor: pointer;
    border-radius: 5px; /* 圆角 */
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease; /* 平滑过渡效果 */
}

#language-switcher button:hover,
#language-switcher button.active {
    background-color: #ffc107; /* 鼠标悬停/激活时更深的金色 */
    transform: translateY(-2px); /* 轻微上移效果 */
}

/* --- 主体内容和 Section 基础样式 --- */
/*
  描述：为主体内容区域添加上边距。
  目的：防止内容被固定导航栏遮挡。
*/
main {
    padding-top: 80px; /* 根据导航栏的实际高度调整，为导航栏留出空间 */
    width: 65%; /* 主内容区域宽度 */
    max-width: 1200px; /* 最大宽度限制，防止在很宽的屏幕上过于拉伸 */
    margin: 0 auto; /* 水平居中 */
}

/*
  描述：设置所有 section 的通用样式。
  目的：提供一致的内边距和下边距，区隔内容块，并为不规则布局打下基础。
*/
section {
    padding: 40px 20px; /* 上下内边距40px，左右20px */
    margin-bottom: 30px; /* section 之间的下边距 */
    /* 为了体现"五颜六色"，每个section可以有不同的背景色或边框 */
    /* 为了"不规则排版"，部分section的宽度、对齐方式可以有所不同 */
}

/* --- 快捷链接区域样式 --- */
.quick-links {
    background-color: #fff8e1; /* 温暖的米色背景 */
    padding: 25px;
    border-radius: 15px;
    margin: 30px 0;
    box-shadow: 0 8px 15px rgba(0,0,0,0.05);
    border-left: 5px solid #ffa726; /* 橙色左边框 */
    transform: rotate(-0.5deg); /* 微小的旋转，增加不规则感 */
}

.quick-links h4 {
    color: #e67e22;
    margin-bottom: 15px;
    font-size: 1.3rem;
}

.quick-links ul {
    list-style: none;
    margin-left: 15px;
}

.quick-links li {
    margin-bottom: 10px;
    position: relative;
}

.quick-links li:before {
    content: "→";
    color: #ffa726;
    position: absolute;
    left: -15px;
}

.quick-links a {
    color: #d35400;
    font-weight: 500;
    transition: color 0.2s ease;
}

.quick-links a:hover {
    color: #e67e22;
}

.quick-links p {
    margin-top: 15px;
    font-style: italic;
    color: #666;
}

/* --- 技术亮点块样式 --- */
.highlight-block {
    background-color: #e1f5fe; /* 淡蓝色背景 */
    padding: 25px;
    border-radius: 12px;
    margin: 30px 0;
    box-shadow: 0 6px 12px rgba(0,0,0,0.08);
    border-right: 5px solid #29b6f6; /* 蓝色右边框 */
    transform: rotate(0.5deg); /* 反向微小旋转 */
}

.highlight-block h4 {
    color: #0288d1;
    margin-bottom: 15px;
    font-size: 1.3rem;
    text-align: center;
}

.highlight-block ul {
    list-style: none;
}

.highlight-block li {
    margin-bottom: 12px;
    padding: 8px 12px;
    background-color: rgba(255,255,255,0.7);
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.highlight-block li:nth-child(odd) {
    transform: translateX(-5px);
}

.highlight-block li:nth-child(even) {
    transform: translateX(5px);
}

/* --- 用户推荐样式 --- */
.testimonial {
    background-color: #f1f8e9; /* 淡绿色背景 */
    padding: 30px;
    border-radius: 15px;
    margin: 30px auto;
    max-width: 90%;
    position: relative;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.testimonial:before {
    content: "";
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 6rem;
    color: rgba(156, 204, 101, 0.2);
    font-family: serif;
    line-height: 1;
}

.testimonial blockquote {
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 15px;
    position: relative;
    z-index: 1;
}

.testimonial cite {
    display: block;
    text-align: right;
    font-weight: bold;
    color: #689f38;
}

/* --- 统计信息展示样式 --- */
.stats-display {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 20px;
    margin: 30px 0;
    background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.stat-item {
    text-align: center;
    padding: 15px;
    flex: 1;
    min-width: 200px;
    margin: 10px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}

.stat-item:hover {
    transform: translateY(-5px);
}

.stat-item h4 {
    font-size: 2.5rem;
    color: #3498db;
    margin-bottom: 10px;
}

.stat-item p {
    color: #666;
    font-size: 0.9rem;
}

/* --- 行业应用展示样式 --- */
.industry-applications {
    padding: 30px 20px;
    margin: 30px 0;
    background-color: #fff3e0; /* 淡橙色背景 */
    border-radius: 15px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.05);
}

.industry-applications h4 {
    text-align: center;
    color: #e67e22;
    margin-bottom: 25px;
    font-size: 1.5rem;
}

.industries {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.industry {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.industry:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

.industry:nth-child(1) {
    border-top: 4px solid #e74c3c; /* 红色 */
}

.industry:nth-child(2) {
    border-top: 4px solid #3498db; /* 蓝色 */
}

.industry:nth-child(3) {
    border-top: 4px solid #2ecc71; /* 绿色 */
}

.industry:nth-child(4) {
    border-top: 4px solid #f39c12; /* 橙色 */
}

.industry h5 {
    color: #333;
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.industry p {
    color: #666;
    font-size: 0.95rem;
}

/* --- 开始使用按钮部分样式 --- */
.cta-section {
    text-align: center;
    padding: 40px 20px;
    margin: 30px 0;
    background: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.cta-section h3 {
    color: #2c3e50;
    margin-bottom: 15px;
    font-size: 1.8rem;
}

.cta-section p {
    color: #34495e;
    max-width: 600px;
    margin: 0 auto 25px;
}

.cta-button {
    display: inline-block;
    padding: 15px 30px;
    background-color: #e67e22;
    color: white !important;
    font-weight: bold;
    font-size: 1.1rem;
    border-radius: 50px;
    box-shadow: 0 4px 10px rgba(230, 126, 34, 0.4);
    transition: all 0.3s ease;
    text-decoration: none !important;
}

.cta-button:hover {
    background-color: #d35400;
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(230, 126, 34, 0.5);
}

.cta-note {
    font-size: 0.9rem;
    color: #34495e;
    margin-top: 15px;
    font-style: italic;
}

/* --- 页脚资源链接样式 --- */
.footer-resources {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-bottom: 30px;
}

.resource-column {
    flex: 1;
    min-width: 200px;
    margin: 0 15px 20px;
    text-align: left;
}

.resource-column h4 {
    color: #ffd700;
    margin-bottom: 15px;
    font-size: 1.2rem;
    border-bottom: 1px solid #4a6278;
    padding-bottom: 8px;
}

.resource-column ul {
    list-style: none;
}

.resource-column li {
    margin-bottom: 10px;
}

.resource-column a {
    color: #ecf0f1;
    transition: color 0.2s ease;
}

.resource-column a:hover {
    color: #ffd700;
    text-decoration: none;
}

/* --- 标题样式 --- */
/*
  描述：设置 H1, H2, H3 标题的样式。
  目的：建立清晰的视觉层级，确保符合SEO要求。
*/
h1, h2, h3 {
    color: #e67e22; /* 标题颜色 - 胡萝卜橙，温暖且醒目 */
    margin-bottom: 20px; /* 标题和下方内容的间距 */
    font-weight: bold;
}

h1 {
    font-size: 2.5rem; /* H1 大字体 */
    text-align: center; /* 首页主标题通常居中 */
}

h2 {
    font-size: 2rem; /* H2 字体 */
}

h3 {
    font-size: 1.5rem; /* H3 字体 */
}

h4, h5 {
    color: #e67e22;
    margin-bottom: 15px;
}

h4 {
    font-size: 1.3rem;
}

h5 {
    font-size: 1.1rem;
}

/* --- 段落和链接样式 --- */
p {
    margin-bottom: 15px; /* 段落之间的间距 */
    line-height: 1.6; /* 改善长文本的可读性 */
}

a {
    color: #3498db; /* 链接颜色 - 彼得河蓝，清晰可辨 */
    text-decoration: none; /* 移除下划线，现代观感 */
}

a:hover {
    text-decoration: underline; /* 鼠标悬停时显示下划线，提供反馈 */
    color: #2980b9; /* 鼠标悬停时链接颜色变深 */
}

/* --- 视频样式 --- */
/*
  描述：设置视频元素的基本样式。
  目的：确保视频在其容器内正确显示，并具有视觉吸引力。
*/
video {
    max-width: 100%; /* 确保视频不会超出其容器 */
    height: auto; /* 保持视频的宽高比 */
    display: block; /* 移除下方可能的额外空白 */
    margin: 15px auto; /* 上下边距15px，并水平居中（如果父元素允许） */
    border-radius: 8px; /* 轻微圆角 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.15); /* 添加阴影以突出视频 */
}

/* --- 特定布局样式 --- */
/*
  描述：左文右图/视频的布局。
  目的：使用 Flexbox 实现响应式的两列布局。
*/
.layout-left-text-right-video,
.layout-left-video-right-text {
    display: flex; /* 使用 Flexbox 布局 */
    flex-wrap: wrap; /* 在小屏幕上允许换行 */
    align-items: center; /* 垂直居中对齐子项 */
    gap: 30px; /* 文本和视频之间的间隙 */
}

.layout-left-text-right-video > div,
.layout-left-video-right-text > div,
.layout-left-text-right-video > video,
.layout-left-video-right-text > video {
    flex: 1; /* 两列等宽 */
    min-width: 300px; /* 设置最小宽度以适应响应式换行 */
}

/* 针对左视频右文字，调整顺序 */
.layout-left-video-right-text video {
    order: -1; /* 在 flex 布局中，将视频放在前面 */
}


/* --- 用户示例视频画廊 --- */
/*
  描述：用户示例部分的视频画廊样式。
  目的：使用 Grid 布局展示多个视频，使其在不同屏幕尺寸下都能良好排列。
*/
.video-gallery {
    display: grid; /* 使用 Grid 布局 */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 响应式列：自动适应，最小300px，最大1fr */
    gap: 20px; /* 网格项之间的间隙 */
}

/* --- FAQ 部分 <details> 和 <summary> 样式 --- */
/*
  描述：为 FAQ 的 <details> 和 <summary> 元素添加样式。
  目的：改善其外观和用户体验。
*/
details {
    background-color: #fff; /* FAQ条目背景色 - 白色 */
    margin-bottom: 10px; /* 条目间距 */
    border: 1px solid #ddd; /* 边框 */
    border-radius: 5px; /* 圆角 */
    padding: 10px;
}

summary {
    font-weight: bold;
    cursor: pointer; /* 提示可点击 */
    color: #e67e22; /* 与标题颜色一致 */
    padding: 5px;
    position: relative; /* 为自定义箭头图标（如果需要）定位 */
}

summary::marker {
    /* 移除默认的三角标记，如果想自定义 */
    /* content: ''; */
}

/* summary:focus {
    outline: 2px solid #3498db; 
    outline-offset: 2px;
} */

/* --- 页脚样式 --- */
/*
  描述：设置页脚的样式。
  目的：清晰展示版权和联系信息。
*/
footer {
    background-color: #34495e; /* 页脚背景色 - 深蓝灰色 */
    color: #ecf0f1; /* 页脚文本颜色 - 浅灰色 */
    text-align: center; /* 文本居中 */
    padding: 30px 20px;
    margin-top: 40px; /* 与主体内容分隔 */
}

footer p {
    margin-bottom: 8px; /*段落间距*/
}

footer a {
    color: #f1c40f; /* 页脚链接颜色 - 明亮的黄色 */
}

footer a:hover {
    color: #f39c12; /* 鼠标悬停时颜色变化 - 更深的橙黄色 */
}

/* --- 响应式设计 --- */
/*
  描述：为不同屏幕尺寸设置的响应式样式。
  目的：确保网站在不同设备上都有良好的显示效果。
*/
@media (max-width: 992px) {
    main {
        width: 85%; /* 在中等屏幕上扩大主内容区域 */
    }
}

@media (max-width: 768px) {
    /* 小屏幕样式调整 */
    h1 {
        font-size: 2rem; /* 减小标题的字体大小 */
    }
    
    h2 {
        font-size: 1.75rem;
    }
    
    h3 {
        font-size: 1.5rem;
    }
    
    /* 调整布局，使其在小屏幕上更友好 */
    .layout-left-text-right-video,
    .layout-left-video-right-text {
        flex-direction: column;
        gap: 20px;
    }
    
    .layout-left-text-right-video > div,
    .layout-left-video-right-text > div,
    .layout-left-text-right-video > video,
    .layout-left-video-right-text > video {
        width: 100%; /* 在小屏幕上占满整行 */
    }
    
    #language-switcher button {
        padding: 6px 10px; /* 减小按钮的内边距 */
        font-size: 0.9rem; /* 减小按钮的字体大小 */
    }
    
    main {
        padding-top: 60px; /* 减小主内容的顶部内边距 */
        width: 95%; /* 在小屏幕上几乎占满整个宽度 */
    }

    .footer-resources {
        flex-direction: column;
    }

    .resource-column {
        margin-bottom: 25px;
    }

    .stat-item {
        min-width: 150px;
    }

    .industry-applications {
        padding: 20px 15px;
    }

    .industries {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

@media (max-width: 480px) {
    /* 超小屏幕的样式调整 */
    section {
        padding: 25px 15px; /* 减小内边距 */
        margin-bottom: 20px;
    }
    
    #language-switcher {
        padding: 8px 10px; /* 进一步减小导航栏的内边距 */
    }
    
    #language-switcher button {
        padding: 5px 8px;
        margin: 2px;
        font-size: 0.8rem;
    }
    
    h1 {
        font-size: 1.75rem; /* 进一步减小超小屏幕上的标题字体大小 */
    }
    
    main {
        padding-top: 50px;
        width: 100%; /* 在超小屏幕上占满宽度 */
    }

    .stat-item {
        margin: 5px;
        padding: 10px;
    }

    .top-banner {
        font-size: 0.9rem;
        padding: 10px 15px;
    }

    .quick-links, .highlight-block, .testimonial {
        padding: 20px 15px;
        margin: 20px 0;
    }

    .cta-button {
        padding: 12px 25px;
        font-size: 1rem;
    }
}

/* --- 各部分特定样式 --- */
/*
  描述：为网站各主要部分设置特定的样式。
  目的：创建五色温暖明亮且不规则的视觉效果。
*/
#introduction {
    background-color: #fff5e6; /* 淡橙色背景 - 温暖 */
    border-radius: 15px 15px 50px 15px; /* 不规则圆角 */
    box-shadow: 5px 5px 15px rgba(0,0,0,0.05); /* 阴影增加层次感 */
}

#ideas {
    background-color: #ffe6e6; /* 淡粉色背景 - 温暖 */
    border-radius: 15px 50px 15px 15px; /* 不规则圆角 */
    position: relative; /* 为伪元素定位 */
    box-shadow: 5px 5px 15px rgba(0,0,0,0.05);
}

#features {
    background-color: #e6f5ff; /* 淡蓝色背景 - 明亮 */
    border-radius: 50px 15px 15px 15px; /* 不规则圆角 */
    position: relative; /* 为伪元素定位 */
    box-shadow: 5px 5px 15px rgba(0,0,0,0.05);
    overflow: hidden; /* 确保伪元素不会溢出 */
}

/* 添加装饰性元素，增加不规则感 */
#features::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 120px;
    height: 120px;
    background-color: rgba(255, 217, 102, 0.4); /* 半透明黄色 */
    border-radius: 50%; /* 圆形 */
    z-index: 0; /* 置于内容之下 */
}

#features > div {
    position: relative; /* 确保内容在伪元素之上 */
    z-index: 1;
}

#model-training {
    background-color: #e6ffe6; /* 淡绿色背景 - 明亮 */
    border-radius: 15px 15px 15px 50px; /* 不规则圆角 */
    box-shadow: 5px 5px 15px rgba(0,0,0,0.05);
}

#user-examples {
    background-color: #f0e6ff; /* 淡紫色背景 - 明亮 */
    border-radius: 20px; /* 均匀圆角 */
    box-shadow: 5px 5px 15px rgba(0,0,0,0.05);
}

#usage-deep-dive {
    background-color: #fff9e6; /* 淡黄色背景 - 温暖 */
    border-radius: 15px;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.05);
    padding: 30px 25px;
}

#support {
    background-color: #f5f5f5; /* 浅灰色背景 - 中性 */
    border-radius: 15px;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden; /* 确保伪元素不会溢出 */
}

#support h2 {
    color: #3498db; /* 蓝色标题 - 与其他部分区分 */
    border-bottom: 2px dashed #e0e0e0; /* 虚线底部边框 */
    padding-bottom: 10px;
}

#support article {
    background-color: white; /* 白色背景 */
    padding: 20px;
    border-radius: 10px;
    margin-top: 20px;
}