/* Figma Make - CSS Styles */

/* --- 基本重置和全局样式 --- */
body, html {
    margin: 0; /* 移除默认边距 */
    padding: 0; /* 移除默认内边距 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* 设置现代、跨平台的字体栈 */
    line-height: 1.6; /* 设置舒适的行高 */
    /* 新的明亮渐变背景 */
    background: linear-gradient(120deg, #f0f9ff 10%, #ffdde1 50%, #fdfadc 90%); /* 淡蓝 -> 淡粉 -> 淡黄 */
    color: #333; /* 设置主要的文字颜色 */
    scroll-behavior: smooth; /* 平滑滚动效果 */
    position: relative; /* 用于伪元素定位上下文 */
    overflow-x: hidden; /* 防止伪元素导致水平滚动条 */
}

/* 添加更明显、艳丽的装饰性背景花纹 */
body::before, body::after {
    content: '';
    position: fixed; /* 固定定位，不随滚动条滚动 */
    z-index: -1; /* 确保在内容下方 */
    pointer-events: none; /* 确保伪元素不干扰鼠标事件 */
    opacity: 0.65; /* 提高不透明度，使其更明显 */
}

/* 花纹1: 艳丽的粉色/橙色椭圆 */
body::before {
    width: 350px;
    height: 200px;
    background: linear-gradient(45deg, #ff7e5f, #feb47b); /* 鲜艳的橙红色到橙黄色渐变 */
    border-radius: 50%; /* 椭圆形状 */
    top: 5%;
    right: -100px; /* 部分在屏幕右侧外 */
    transform: rotate(-30deg); /* 旋转增加动感 */
    box-shadow: 0 0 30px rgba(255, 126, 95, 0.5); /* 添加同色系光晕效果 */
}

/* 花纹2: 明亮的青色/蓝色不规则形状 */
body::after {
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, #00f2fe, #4facfe); /* 明亮的青色到蓝色渐变 */
    /* 使用border-radius创建不规则的"水滴"或"花瓣"形状 */
    border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%;
    bottom: 5%;
    left: -90px; /* 部分在屏幕左侧外 */
    transform: rotate(20deg);
    box-shadow: 0 0 35px rgba(0, 242, 254, 0.4); /* 添加同色系光晕效果 */
}

* {
    box-sizing: border-box; /* 让元素的宽度和高度计算包含内边距和边框 */
}

/* --- 容器和通用布局 --- */
.container {
    width: 90%; /* 设置容器宽度为90% */
    max-width: 1200px; /* 最大宽度为1200px，防止在大屏幕上过宽 */
    margin: 0 auto; /* 左右外边距自动，实现水平居中 */
    padding: 20px 0; /* 上下内边距20px，左右0 */
}

section {
    padding: 50px 0; /* 调整区块上下内边距 */
    border-bottom: 1px solid #e0e6ed; /* 调整分隔线颜色 */
}

section:last-of-type {
    border-bottom: none; /* 最后一个部分不需要底部分隔线 */
}

img {
    max-width: 100%; /* 图片最大宽度为其容器的100% */
    height: auto; /* 高度自动，保持图片比例 */
    display: block; /* 将图片设为块级元素，方便控制边距 */
    border-radius: 8px; /* 给图片添加圆角 */
    /* box-shadow: 0 4px 8px rgba(0,0,0,0.1); */ /* 移除全局图片阴影，在卡片上单独设置 */
}

/* --- 标题样式 --- */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0; /* 移除标题的上边距 */
    margin-bottom: 20px; /* 设置标题的下边距 */
    font-weight: 600; /* 设置字体粗细 */
    color: #2c3e50; /* 设置标题颜色，比正文深一些 */
    line-height: 1.3; /* 调整标题行高 */
}

h1 {
    font-size: 2.6em; /* H1 字体大小 */
    text-align: center; /* H1 居中显示 */
    color: #007bff; /* H1 使用品牌主色 */
}

h2 {
    font-size: 2em; /* H2 字体大小 */
    margin-bottom: 30px; /* H2 下边距稍大 */
    text-align: center; /* H2 居中显示 */
    color: #17a2b8; /* H2 使用品牌辅色1 */
}

/* 全局H3样式保持，特定模块H3颜色会覆盖 */
h3 {
    font-size: 1.4em; /* H3 字体大小 */
    color: #28a745; /* H3 使用品牌辅色2 (默认) */
    margin-bottom: 10px; /* 调整H3下边距 */
}

/* --- 导航栏和语言切换器 --- */
header {
    background-color: #ffffff; /* 头部背景白色 */
    padding: 15px 0; /* 头部上下内边距 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* 头部轻微底部阴影 */
    position: sticky; /* 粘性定位，使其在滚动时固定在顶部 */
    top: 0;
    z-index: 1000; /* 确保在其他内容之上 */
}

header .container {
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: space-between; /* 子元素两端对齐 */
    align-items: center; /* 子元素垂直居中 */
    padding-top: 0;
    padding-bottom: 0;
}

.logo {
    font-size: 1.8em; /* Logo 字体大小 */
    font-weight: bold; /* Logo 字体加粗 */
    color: #007bff; /* Logo 颜色使用品牌主色 */
    text-decoration: none; /* 移除链接下划线 */
}

#language-switcher button {
    background-color: #e9ecef; /* 按钮背景色 */
    color: #495057; /* 按钮文字颜色 */
    border: 1px solid #ced4da; /* 按钮边框 */
    padding: 8px 15px; /* 按钮内边距 */
    margin-left: 8px; /* 按钮左外边距 */
    border-radius: 5px; /* 按钮圆角 */
    cursor: pointer; /* 鼠标悬停时显示手型光标 */
    transition: background-color 0.3s ease, color 0.3s ease; /* 过渡效果 */
}

#language-switcher button:hover {
    background-color: #007bff; /* 鼠标悬停时按钮背景色变为品牌主色 */
    color: #fff; /* 鼠标悬停时按钮文字颜色变为白色 */
}

#language-switcher button.active {
    background-color: #0056b3; /* 激活状态按钮背景色 (品牌主色加深) */
    color: #fff; /* 激活状态按钮文字颜色白色 */
    border-color: #004085;
}

/* --- Hero (介绍) 部分 --- */
#hero {
    text-align: center; /* 文字居中 */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* 清新明亮的渐变背景 */
    color: #fff; /* 文字颜色白色 */
    padding: 70px 0; /* 上下内边距 */
}

#hero h1 {
    color: #fff; /* Hero 部分的 H1 颜色覆盖全局 H1 颜色 */
    margin-bottom: 20px;
}

#hero p {
    font-size: 1.15em; /* Hero 部分段落字体大小 */
    margin-bottom: 30px;
    max-width: 700px; /* 段落最大宽度 */
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
}

#hero img {
    margin-top: 30px; /* 图片上外边距 */
    max-width: 60%; /* 图片最大宽度，使其不过大 */
    border: 4px solid #fff; /* 图片白色边框 */
    border-radius: 10px; /* Hero 图片圆角 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

/* --- "How to Use" 和 "What User Use" 部分通用模块样式 --- */
.features-grid, .use-cases-grid {
    display: grid; /* 使用 Grid 布局 */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 响应式列布局，每列最小宽度300px，更适合卡片 */
    gap: 30px; /* 网格项之间的间距 */
    margin-top: 40px;
}

/* 模块通用基础样式 (卡片) */
.feature-item, .use-case-item {
    background-color: #ffffff; /* 模块背景白色 */
    padding: 0; /* 移除内边距，图片将填满顶部 */
    border-radius: 10px; /* 卡片圆角 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* 卡片阴影 */
    transition: transform 0.4s ease, box-shadow 0.3s ease; /* 调整过渡效果，增加 transform 时间 */
    overflow: hidden; /* 确保图片圆角和卡片圆角一致 */
    display: flex; /* 使用flex确保内部元素可以有特定行为 */
    flex-direction: column; /* 内部元素垂直堆叠 */
    /* transform-origin: center center; */ /* 确保旋转中心正确 */
}

/* 为模块添加不规则布局效果 */
.feature-item:nth-child(odd) {
    transform: rotate(-1.5deg) translateY(-3px);
}

.feature-item:nth-child(even) {
    transform: rotate(1deg) translateY(2px);
}

.feature-item:nth-child(3n) {
    transform: rotate(0.5deg) translateY(-2px) translateX(-2px); /* 稍微复杂一点的变化 */
}

.use-case-item:nth-child(odd) {
    transform: rotate(1.2deg) translateY(-2px);
}

.use-case-item:nth-child(even) {
    transform: rotate(-1deg) translateY(3px) translateX(2px);
}

/* 卡片内容区域的通用内边距 */
.feature-item > div:not(img), .use-case-item > div:not(img) { /* 针对包裹文本的div (如果存在) 或者直接的文本元素 */
    padding: 20px 25px 25px; /* 卡片文字内容的内边距 */
}

/* "How to Use" (feature-item) 模块特定样式 */
.feature-item img {
    width: 100%; /* 图片宽度占满其容器 */
    height: 200px; /* 固定图片高度 */
    object-fit: cover; /* 图片裁剪以适应容器 */
    border-radius: 0; /* 图片没有单独圆角，依赖父容器的overflow:hidden和圆角 */
    margin-bottom: 0; /* 移除图片和文字间的直接下边距，由padding控制 */
}

.feature-item .content-wrapper { /* 新增包裹文本内容的 div */
    padding: 20px 25px 25px;
}

.feature-item h3 {
    text-align: left; /* 标题左对齐 */
    color: #343a40; /* 深色标题，符合示例图片 */
    font-size: 1.3em; /* 调整字体大小 */
    margin-top: 0; /* 移除标题上边距 */
    margin-bottom: 8px;
}

.feature-item p {
    text-align: left; /* 段落左对齐 */
    font-size: 0.95em;
    color: #555;
    margin-bottom: 15px; /* 段落和Learn more之间的间距 */
    line-height: 1.6;
}

.feature-item .learn-more {
    display: inline-block; /* 使其表现像块级元素，但只占据内容宽度 */
    text-align: left;
    color: #007bff; /* 蓝色链接 */
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9em;
}

.feature-item .learn-more:hover {
    text-decoration: underline;
}

/* "What User Use" (use-case-item) 模块特定样式 */
.use-case-item img {
    width: 100%; /* 图片宽度占满其容器 */
    height: 200px; /* 固定图片高度 */
    object-fit: cover;
    border-radius: 0;
    margin-bottom: 0;
}

.use-case-item .content-wrapper { /* 新增包裹文本内容的 div */
    padding: 20px 25px 25px;
    text-align: center; /* use-case模块文本居中 */
}

.use-case-item h3 {
    margin-top: 0;
    color: #343a40; /* 保持H3颜色一致性 */
    font-size: 1.3em;
}

.use-case-item p {
    font-size: 0.95em;
    color: #555;
    line-height: 1.6;
}

/* 通用悬停效果 */
.feature-item:hover, .use-case-item:hover {
    transform: translateY(-8px) scale(1.03); /* 悬停时放大并上移更多，覆盖之前的transform */
    box-shadow: 0 10px 25px rgba(0,0,0,0.15); /* 鼠标悬停时阴影加深 */
}

/* --- "User Examples" 部分 --- */
#user-examples .examples-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px; /* Increased gap slightly for more breathing room with transforms */
    margin-top: 40px;
}

#user-examples .example-image {
    /* Added for smooth transitions on transforms */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 8px; /* Ensure container has radius if image itself doesn't fill it */
    overflow: hidden; /* If image has different radius or for shadow containment */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Base shadow for each item */
}

/* Applying irregular transforms to gallery images */
#user-examples .example-image:nth-child(4n+1) {
    transform: rotate(-1.5deg) translateY(-4px);
}

#user-examples .example-image:nth-child(4n+2) {
    transform: rotate(1deg) translateY(3px) translateX(2px);
}

#user-examples .example-image:nth-child(4n+3) {
    transform: rotate(2deg) translateY(-2px) translateX(-3px);
}

#user-examples .example-image:nth-child(4n+4) {
    transform: rotate(-1deg) translateY(5px);
}

#user-examples .example-image img {
    width: 100%; /* 图片宽度100% */
    height: 250px; /* 固定图片高度 */
    object-fit: cover; /* 图片裁剪以适应容器 */
    border-radius: 8px; /* 示例图片保持圆角 - or remove if container handles it */
    /* box-shadow: 0 4px 8px rgba(0,0,0,0.1); */ /* Shadow moved to .example-image container */
    display: block; /* Remove any extra space below image */
    /* transition: transform 0.3s ease; */ /* Transition moved to .example-image container */
}

#user-examples .example-image:hover {
    transform: scale(1.05) rotate(0deg); /* On hover, scale up and straighten rotation */
    box-shadow: 0 8px 16px rgba(0,0,0,0.2); /* Enhance shadow on hover */
    z-index: 10; /* Bring hovered image to front if overlapping occurs */
}

/* ========= FAQ Section Styles ========= */
/* FAQ 部分整体区域样式 */
#faq {
    padding: 40px 20px; /* 内边距，上下 40px，左右 20px */
    text-align: center; /* 文本居中对齐 */
    background-color: rgba(255, 255, 255, 0.5); 
    /* 半透明白色背景，以便看到动态背景 */
    border-radius: 8px; /* 轻微的圆角 */
    margin-bottom: 30px; /* 与页脚的间距 */
}

/* FAQ 容器样式 */
.faq-container {
    display: flex; /* 使用 Flexbox 布局 */
    flex-direction: column; /* 子元素垂直排列 */
    gap: 20px; /* 问题之间的间距 */
    max-width: 800px; /* 最大宽度限制，保持内容可读性 */
    margin: 0 auto; /* 水平居中 */
    text-align: left; /* 问题和答案文本左对齐 */
}

/* 单个 FAQ 项目样式 */
.faq-item {
    /* background-color: #ffffff;  */
    /* 白色背景 */
    padding: 20px; /* 内边距 */
    border-radius: 8px; 
    /* 圆角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    /* 轻微的阴影效果，增加立体感 */
    border-left: 5px solid var(--primary-color); /* 左侧用主题强调色装饰边框 */
}

/* FAQ 问题标题样式 */
.faq-question {
    font-size: 1.5em; /* 字体大小 */
    color: var(--secondary-color); /* 使用次要颜色 */
    margin-bottom: 10px; /* 与答案的间距 */
    font-weight: 600; /* 字体加粗 */
}

/* FAQ 答案段落样式 */
.faq-answer {
    font-size: 1em; /* 字体大小 */
    line-height: 1.6; /*行高，提高可读性 */
    color: var(--text-color); /* 使用主要文本颜色 */
}

/* 响应式调整：在较小屏幕上 */
@media (max-width: 768px) {
    #faq {
        padding: 30px 15px; /* 调整内边距 */
    }

    .faq-item {
        padding: 15px; /* 调整内边距 */
    }

    .faq-question {
        font-size: 1.3em; /* 调整字体大小 */
    }

    .faq-answer {
        font-size: 0.95em; /* 调整字体大小 */
    }
}

/* --- 页脚 (Footer) --- */
footer {
    background-color: #343a40; /* 页脚深色背景 */
    color: #f8f9fa; /* 页脚浅色文字 */
    padding: 40px 0; /* 页脚上下内边距 */
    text-align: center; /* 文字居中 */
}

footer p {
    margin-bottom: 10px; /* 段落间距 */
    font-size: 0.9em;
}

footer a {
    color: #00aaff; /* 页脚链接颜色，明亮蓝色 */
    text-decoration: none; /* 移除链接下划线 */
}

footer a:hover {
    text-decoration: underline; /* 鼠标悬停时显示下划线 */
}

.footer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-links {
    margin-bottom: 15px;
}

.footer-links p {
    margin: 5px 0;
}

.copyright-text {
    font-size: 0.9em;
}

/* --- 响应式设计 --- */
@media (max-width: 768px) { /* 当屏幕宽度小于等于768px时 (平板和手机) */
    h1 {
        font-size: 2.2em; /* 减小 H1 字体大小 */
    }

    h2 {
        font-size: 1.8em; /* 减小 H2 字体大小 */
    }

    h3 {
        font-size: 1.25em; /* 减小 H3 字体大小 */
    }

    header .container {
        flex-direction: column; /* 头部内容垂直排列 */
    }

    .logo {
        margin-bottom: 10px; /* Logo 下方增加间距 */
    }

    #language-switcher button {
        padding: 6px 10px; /* 减小按钮内边距 */
        font-size: 0.9em; /* 减小按钮字体大小 */
        margin: 3px;
    }

    #hero {
        padding: 50px 0;
    }

    #hero p {
        font-size: 1.05em;
    }
    #hero img {
        max-width: 80%;
    }

    .features-grid, .use-cases-grid {
        grid-template-columns: 1fr; /* 在小屏幕上，模块变为单列显示 */
        gap: 25px;
    }

    /* 在小屏幕上，feature-item 和 use-case-item 的文字内容可以居中显示，如果需要 */
    /* .feature-item .content-wrapper, .use-case-item .content-wrapper {
        text-align: center;
    }
    .feature-item h3, .feature-item p, .feature-item .learn-more {
        text-align: center;
    } */

    #user-examples .examples-gallery {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 用户示例图片在小屏幕上调整 */
    }
}

@media (max-width: 480px) { /* 当屏幕宽度小于等于480px时 (主要是手机) */
    body {
        font-size: 15px; /* 稍微减小基础字体大小 */
    }
    h1 {
        font-size: 1.9em;
    }
    h2 {
        font-size: 1.6em;
    }
    h3 {
        font-size: 1.15em;
    }
    .container {
        width: 95%; /* 在非常小的屏幕上，容器宽度可以更大一些 */
    }
    section {
        padding: 40px 0;
    }
    #language-switcher {
        display: flex;
        flex-wrap: wrap; /* 允许按钮换行 */
        justify-content: center; /* 按钮居中 */
    }
    .feature-item img, .use-case-item img {
        height: 180px; /* 在非常小的屏幕上进一步减小图片高度 */
    }
}

/* --- 多语言内容隐藏/显示 --- */
/* 默认情况下，脚本会处理显示，这里可以不用特别设置，但如果JS加载失败，可以考虑默认显示英文 */
/* [data-lang]:not([data-lang="en"]) {
    display: none;
} */

/* 中文注释已在每个规则块上方或重要属性旁提供 */