/**
 * Figma设计稿还原 - 主样式文件
 * 所有样式类名使用 figma- 前缀
 */

/**
 * Figma设计稿还原 - CSS变量定义
 * 使用CSS变量统一管理设计系统中的颜色、间距等
 */

:root {
    /* 颜色变量 - 根据Figma设计稿更新 */
    --figma-color-primary: #007bff;
    --figma-color-primary-hover: #0056b3;
    --figma-color-primary-active: #004085;
    --figma-color-text: #333333;
    --figma-color-text-secondary: #666666;
    --figma-color-background: #ffffff;
    
    /* 间距变量 */
    --figma-spacing-xs: 4px;
    --figma-spacing-sm: 8px;
    --figma-spacing-md: 16px;
    --figma-spacing-lg: 24px;
    --figma-spacing-xl: 32px;
    
    /* 字体大小变量 */
    --figma-font-size-xs: 12px;
    --figma-font-size-sm: 14px;
    --figma-font-size-md: 16px;
    --figma-font-size-lg: 18px;
    --figma-font-size-xl: 24px;
    
    /* 圆角变量 */
    --figma-border-radius-sm: 4px;
    --figma-border-radius-md: 8px;
    --figma-border-radius-lg: 12px;
}

/* ===== 全局重置和基础样式 ===== */
html, body {
    overflow-x: hidden; /* 防止水平滚动条 */
    width: 100%;
    max-width: 100%;
}

.figma-body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
        sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #F4F5F6;
    overflow-x: hidden; /* 防止水平滚动条 */
    width: 100%;
    max-width: 100%;
}

.figma-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ===== CTA按钮样式 ===== */
.figma-cta-button {
    display: inline-block;
    padding: 12px 24px;
    background-color: #007bff;
    color: #ffffff;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.figma-cta-button:hover {
    background-color: #0056b3;
}

.figma-cta-button:active {
    background-color: #004085;
}

/* ===== 文本样式 ===== */
.figma-heading {
    font-size: var(--figma-font-size-xl);
    color: var(--figma-color-text);
    margin: var(--figma-spacing-lg) 0;
}

.figma-text {
    font-size: var(--figma-font-size-md);
    color: var(--figma-color-text);
    line-height: 1.6;
    margin: var(--figma-spacing-md) 0;
}

.figma-link {
    color: var(--figma-color-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.figma-link:hover {
    color: var(--figma-color-primary-hover);
    text-decoration: underline;
}

/* ===== 页脚样式 ===== */
.figma-footer {
    background-color: #f5f5f5;
    padding: var(--figma-spacing-lg);
    margin-top: var(--figma-spacing-xl);
    text-align: center;
}

.figma-footer__link {
    color: var(--figma-color-text-secondary);
    text-decoration: none;
    margin: 0 var(--figma-spacing-md);
    transition: color 0.3s ease;
}

.figma-footer__link:hover {
    color: var(--figma-color-primary);
}

/* ===== CTA按钮组 ===== */
.figma-cta-group {
    display: flex;
    gap: var(--figma-spacing-md);
    margin: var(--figma-spacing-lg) 0;
}

/* ===== 工具类 ===== */
.figma-hidden {
    display: none !important;
}

.figma-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/**
 * Figma设计稿还原 - 样式示例文件
 * 此文件展示如何按照项目规范编写CSS样式
 * 
 * 规范说明：
 * 1. 所有类名必须使用 figma- 前缀
 * 2. 使用BEM命名规范：figma-block__element--modifier
 * 3. 不允许直接对元素设置样式，必须使用class
 */

/* ===== 示例：头部导航 ===== */
.figma-header {
    background-color: var(--figma-color-background);
    padding: var(--figma-spacing-md);
    border-bottom: 1px solid #e0e0e0;
}

.figma-header__nav {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--figma-spacing-lg);
}

.figma-header__nav-item {
    margin: 0;
}

.figma-header__nav-link {
    color: var(--figma-color-text);
    text-decoration: none;
    padding: var(--figma-spacing-sm) var(--figma-spacing-md);
    transition: color 0.3s ease;
}

.figma-header__nav-link:hover {
    color: var(--figma-color-primary);
}

.figma-header__nav-link--active {
    color: var(--figma-color-primary);
    font-weight: bold;
}

/* ===== 示例：CTA按钮变体 ===== */
.figma-cta-button--primary {
    background-color: var(--figma-color-primary);
    color: #ffffff;
}

.figma-cta-button--secondary {
    background-color: transparent;
    color: var(--figma-color-primary);
    border: 2px solid var(--figma-color-primary);
}

.figma-cta-button--large {
    padding: var(--figma-spacing-md) var(--figma-spacing-xl);
    font-size: var(--figma-font-size-lg);
}

/**
 * Figma设计稿还原 - Hero Section样式
 * 严格按照Figma设计稿的尺寸、颜色、字体等属性还原
 */

/* ===== Hero Section 主容器 ===== */
.figma-hero {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 88px 60px 0px;
    width: 1920px;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* ===== Video Screen 视频屏幕区域 ===== */
.figma-hero__video-screen {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-self: stretch;
    gap: 10px;
    padding: 0px 200px 120px 120px;
    height: 820px;
    border-radius: 24px;
    overflow: hidden;
    box-sizing: border-box;
    background-color: #000000;
}

/* 视频背景容器 */
.figma-hero__video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: #000000;
}

/* 保底图片 - 视频第一帧，fit in进容器，等比缩放 */
.figma-hero__video-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    z-index: 1;
}

/* 视频元素 - fit in进容器，等比缩放 */
.figma-hero__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    z-index: 2;
}

/* 黑色蒙层 - #111111, 50%透明度, multiply混合模式 */
.figma-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #111111;
    opacity: 0.5;
    mix-blend-mode: multiply;
    z-index: 3;
}

/* ===== Text/Button 文本和按钮容器 ===== */
.figma-hero__content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 40px;
    z-index: 4;
}

/* ===== Title/Subtitle 标题和副标题容器 ===== */
.figma-hero__text-group {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 12px;
}

/* ===== Title 标题 ===== */
.figma-hero__title {
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600;
    font-size: 64px;
    line-height: 1.25em;
    text-transform: none;
    text-align: left;
    color: #FFFFFF;
    margin: 0;
    align-self: stretch;
    text-shadow: 0px 4px 40px rgba(0, 0, 0, 0.5);
}

/* ===== Subtitle 副标题 ===== */
.figma-hero__subtitle {
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5em;
    text-align: left;
    color: #FFFFFF;
    margin: 0;
    align-self: stretch;
    text-shadow: 0px 4px 40px rgba(0, 0, 0, 0.5);
}

/* ===== Button 按钮 ===== */
.figma-hero__button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 20px 48px;
    width: 356px;
    background-color: #FFE08A;
    border-radius: 12px;
    text-decoration: none;
    box-sizing: border-box;
    position: relative;
    transition: transform 0.3s ease;
}

/* 按钮hover效果：尺寸扩大4%，加20%透明度白色蒙层 */
.figma-hero__button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.figma-hero__button:hover {
    transform: scale(1.04);
}

.figma-hero__button:hover::before {
    opacity: 1;
}

.figma-hero__button-text {
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.25em;
    text-transform: none;
    text-align: center;
    color: #111111;
    margin: 0;
    white-space: nowrap;
    position: relative;
    z-index: 2;
}

.figma-hero__button-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

/* ===== Subtitle 高亮文字样式 ===== */
.figma-hero__subtitle-highlight {
    text-transform: uppercase;
    font-style: italic;
    font-weight: 700;
    color: #FFE08A;
}

/* ===== 响应式设计 ===== */

/* <1920px: 优化视频和图片fit方式，填满容器不出现黑色区域 */
@media (max-width: 1919px) {
    .figma-hero__video-poster,
    .figma-hero__video {
        object-fit: cover;
    }
}

/* >=1920px: 当前样式，限宽1920px，任何元素不会因为屏幕尺寸在这个区间内变化而产生变化 */
@media (min-width: 1920px) {
    .figma-hero {
        width: 1920px;
        max-width: 1920px;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* 1920px及以上使用contain保持fit in效果 */
    .figma-hero__video-poster,
    .figma-hero__video {
        object-fit: contain;
    }
}

/* 1440px-1919px 断点 */
@media (min-width: 1440px) and (max-width: 1919px) {
    .figma-hero {
        width: 100%;
        padding: 88px 80px 0;
        box-sizing: border-box;
    }
    
    .figma-hero__video-screen {
        margin-left: 0;
        margin-right: 0;
        padding: 0px 0px 60px 60px;
        height: auto;
        aspect-ratio: 1920 / 820;
    }
    
    .figma-hero__title {
        font-size: 48px;
    }
    
    .figma-hero__subtitle {
        font-size: 16px;
    }
    
    .figma-hero__content {
        margin-left: 0;
        margin-bottom: 0;
    }
    
    .figma-hero__button {
        width: 300px;
        min-height: 52px;
        height: 52px;
        padding: 0 48px;
    }
    
    .figma-hero__button-text {
        font-size: 16px;
    }
    
    .figma-hero__button-icon {
        width: 20px;
        height: 20px;
    }
}

/* 1024px-1439px 断点 */
@media (min-width: 1024px) and (max-width: 1439px) {
    .figma-hero {
        width: 100%;
        padding: 88px 32px 0;
        box-sizing: border-box;
    }
    
    .figma-hero__video-screen {
        margin-left: 0;
        margin-right: 0;
        padding: 0px 0px 32px 32px;
        height: auto;
        aspect-ratio: 1920 / 820;
    }
    
    .figma-hero__title {
        font-size: 36px;
    }
    
    .figma-hero__subtitle {
        font-size: 14px;
    }
    
    .figma-hero__content {
        margin-left: 0;
        margin-bottom: 0;
    }
    
    .figma-hero__button {
        width: 286px;
        min-height: 48px;
        height: 48px;
        padding: 0 48px;
    }
    
    .figma-hero__button-text {
        font-size: 14px;
    }
    
    .figma-hero__button-icon {
        width: 20px;
        height: 20px;
    }
}

/**
 * Figma设计稿还原 - Logo Bar滚动条样式
 */

/* ===== Logo Bar 外层容器 ===== */
.figma-logo-bar {
    margin-top: 4px;
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
}

/* ===== Logo Bar 主容器（1520px宽度，124px高度） ===== */
.figma-logo-bar__container {
    width: 1520px;
    height: 124px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== Logo Bar 滚动区域 ===== */
.figma-logo-bar__scroll-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* ===== Logo Bar 滚动容器 ===== */
.figma-logo-bar__wrapper {
    display: flex;
    align-items: center;
    gap: 60px;
    width: max-content;
    animation: figma-logo-bar-scroll 80s linear infinite;
    will-change: transform;
    /* 确保logo条在容器内水平居中，从中心位置开始滚动 */
    position: relative;
}

/* ===== Logo Bar 图片 ===== */
.figma-logo-bar__image {
    height: 124px;
    width: auto;
    flex-shrink: 0;
    display: block;
    object-fit: contain;
}

/* ===== 左侧渐变蒙层 ===== */
.figma-logo-bar__mask-left {
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    height: 100%;
    background: linear-gradient(to right, rgba(244, 245, 246, 1) 0%, rgba(244, 245, 246, 0) 100%);
    z-index: 10;
    pointer-events: none;
}

/* ===== 右侧渐变蒙层 ===== */
.figma-logo-bar__mask-right {
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
    height: 100%;
    background: linear-gradient(to left, rgba(244, 245, 246, 1) 0%, rgba(244, 245, 246, 0) 100%);
    z-index: 10;
    pointer-events: none;
}

/* ===== 滚动动画（从右往左） ===== */
/* 动画实现无缝循环：wrapper包含8个图片（4组），每组2个图片，间距60px */
/* 总宽度 = 8W + 7*60px = 8W + 420px */
/* 移动50% = 4W + 210px，正好让第三组接上第一组的位置，形成无缝循环 */
/* 当第一组移出视野时，第二组接上，第三组在后面等待，第四组在更后面 */
@keyframes figma-logo-bar-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        /* 移动50%让第三组图片到达第一组图片的起始位置，实现无缝循环 */
        /* 这样当第一组移出视野时，第二组正好接上，第三组在后面等待，第四组在更后面 */
        transform: translateX(-50%);
    }
}

/* ===== 响应式设计 ===== */

/* 1440px-1919px 断点 */
@media (min-width: 1440px) and (max-width: 1919px) {
    .figma-logo-bar__container {
        width: 1200px;
        height: 92px;
    }
    
    .figma-logo-bar__image {
        height: 88px;
    }
}

/* 1024px-1439px 断点 */
@media (min-width: 1024px) and (max-width: 1439px) {
    .figma-logo-bar__container {
        width: 1024px;
        height: 92px;
    }
    
    .figma-logo-bar__image {
        height: 88px;
    }
}

/**
 * Figma设计稿还原 - Feature Section样式
 * 严格按照Figma设计稿的尺寸、颜色、字体等属性还原
 */

/* ===== Feature Section 主容器 ===== */
.figma-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 80px 200px;
    width: 1920px;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* ===== Feature Content 内容容器 ===== */
.figma-feature__content {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 48px;
}

/* ===== Tag/Title 标签和标题容器 ===== */
.figma-feature__header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    width: fit-content;
}

/* ===== Tag 标签 ===== */
.figma-feature__tag {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 2px 12px;
    width: fit-content;
    background-color: #FFFFFF;
    border-radius: 4px;
}

.figma-feature__tag-text {
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.5em;
    text-transform: none;
    text-align: left;
    color: #111111;
    margin: 0;
}

/* ===== Section Title 章节标题 ===== */
.figma-feature__title {
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600;
    font-size: 48px;
    line-height: 1.25em;
    text-align: left;
    color: #111111;
    margin: 0;
    width: 800px;
}

/* ===== Feature Cards 卡片容器 ===== */
.figma-feature__cards {
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    align-items: stretch;
    align-self: stretch;
    gap: 12px;
}

/* ===== Feature Card 单个卡片 ===== */
.figma-feature__card {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 20px;
    padding: 48px 32px;
    background-color: #FFFFFF;
    border: 1px solid rgba(17, 17, 17, 0.1);
    border-radius: 16px;
    position: relative;
    transition: transform 0.3s ease;
    transform-style: preserve-3d;
    transform-origin: center center;
    text-decoration: none; /* 移除链接下划线 */
    color: inherit; /* 继承文字颜色 */
    cursor: pointer; /* 显示手型光标 */
}

/* Card hover效果：以卡片中轴线为中心翻转6度 */
.figma-feature__card:hover {
    transform: perspective(1000px) rotateY(6deg);
}

.figma-feature__card:hover .figma-feature-card__button-text {
    color: #3a66ff;
}

.figma-feature__card:hover .figma-feature-card__button-icon-bg {
    background-color: #3a66ff;
}

.figma-feature__card:hover .figma-feature-card__button-line {
    filter: brightness(0) saturate(100%) invert(27%) sepia(95%) saturate(2476%) hue-rotate(218deg) brightness(99%) contrast(101%);
    opacity: 1; /* hover时虚线透明度变成100% */
}

/* 确保卡片内容在投影上方 */
.figma-feature-card__content {
    position: relative;
    z-index: 1;
}

/* ===== Card Content 卡片内容 ===== */
.figma-feature-card__content {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 40px;
    position: relative;
    z-index: 1;
}

/* ===== Text/Image 文本和图片容器 ===== */
.figma-feature-card__text-image {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 24px;
}

/* ===== Title/Tag/Image 标题标签图片容器 ===== */
.figma-feature-card__header {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 32px;
}

/* ===== Title/Tag 标题和标签 ===== */
.figma-feature-card__title-tag {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 16px;
}

/* ===== Card Tag 卡片标签 ===== */
.figma-feature-card__tag {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 2px 12px;
    width: fit-content;
    background-color: #F4F5F6;
    border: 1px solid rgba(17, 17, 17, 0.2);
    border-radius: 4px;
}

.figma-feature-card__tag-text {
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.5em;
    text-transform: none;
    text-align: left;
    color: #111111;
    margin: 0;
}

/* ===== Card Title 卡片标题 ===== */
.figma-feature-card__title {
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 1.25em;
    text-align: left;
    color: #111111;
    margin: 0;
    align-self: stretch;
}

/* ===== Card Image 卡片图片 ===== */
.figma-feature-card__image {
    width: 100%;
    border-radius: 4px;
    object-fit: contain;
    object-position: center;
}

/* ===== Subtitle/Feature Points 副标题和功能点 ===== */
.figma-feature-card__points {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 12px;
}

/* ===== Card Subtitle 卡片副标题 ===== */
.figma-feature-card__subtitle {
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5em;
    text-transform: none;
    text-align: left;
    color: #111111;
    margin: 0;
    align-self: stretch;
}

/* ===== Feature Point 功能点 ===== */
.figma-feature-card__point {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: fit-content;
}

.figma-feature-card__point-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    opacity: 0.6;
}

.figma-feature-card__point-text {
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5em;
    text-align: left;
    color: #111111;
    margin: 0;
    opacity: 0.6;
}

/* ===== Button 按钮 ===== */
.figma-feature-card__button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    gap: 4px;
    text-decoration: none;
    color: inherit;
    pointer-events: none; /* 防止button阻止卡片链接的点击 */
}

.figma-feature-card__button-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    gap: 10px;
    padding: 12px 0px;
    position: relative;
}

.figma-feature-card__button-text {
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.25em;
    text-align: left;
    color: #111111;
    margin: 0;
    transition: color 0.3s ease;
}

.figma-feature-card__button-icon-wrapper {
    position: relative;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    /* icon居右对齐，与image右侧间距一致 */
    margin-left: auto;
}

.figma-feature-card__button-icon {
    width: 24px;
    height: 24px;
    display: block;
}

/* Hover时改变icon的底色（黑色部分）为蓝色，但保持白色箭头不变 */
/* 使用mask来分离背景和箭头 */
.figma-feature-card__button-icon-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #111111;
    border-radius: 50%;
    border: 1px solid rgba(17, 17, 17, 0.2);
    transition: background-color 0.3s ease, border-color 0.3s ease;
    z-index: 1;
}

.figma-feature-card__button-icon {
    position: relative;
    z-index: 2;
    mix-blend-mode: screen;
}

.figma-feature__card:hover .figma-feature-card__button-icon-bg {
    background-color: #3a66ff;
    border-color: rgba(58, 102, 255, 0.2);
}

.figma-feature-card__button-line {
    width: 100%;
    height: 1px;
    transition: filter 0.3s ease, opacity 0.3s ease;
    object-fit: contain;
    opacity: 0.2; /* 默认透明度20% */
}

/* ===== 响应式设计 ===== */

/* >=1920px: 限宽1920px，不随屏幕宽度变化而变化 */
@media (min-width: 1920px) {
    .figma-feature {
        width: 1920px;
        max-width: 1920px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* 1440px-1919px 断点 */
@media (min-width: 1440px) and (max-width: 1919px) {
    .figma-feature {
        width: 100%;
        padding: 80px 120px;
        box-sizing: border-box;
    }
    
    .figma-feature__title {
        font-size: 40px;
    }
    
    .figma-feature-card__text-image {
        gap: 24px;
    }
    
    .figma-feature__card {
        padding: 48px 24px;
    }
    
    .figma-feature-card__title {
        font-size: 24px;
    }
    
    .figma-feature-card__tag-text {
        font-size: 16px;
    }
    
    .figma-feature-card__button-text {
        font-size: 16px;
    }
    
    .figma-feature-card__button-content {
        gap: 0;
    }
    
    .figma-feature-card__header {
        gap: 28px;
    }
    
    .figma-feature-card__content {
        gap: 32px;
    }
}

/* 1024px-1439px 断点 */
@media (min-width: 1024px) and (max-width: 1439px) {
    .figma-feature {
        width: 100%;
        padding: 80px 32px;
        box-sizing: border-box;
    }
    
    .figma-feature__title {
        font-size: 28px;
    }
    
    .figma-feature-card__text-image {
        gap: 24px;
    }
    
    .figma-feature__card {
        padding: 32px 20px;
        gap: 32px;
    }
    
    .figma-feature-card__title {
        font-size: 20px;
    }
    
    .figma-feature-card__tag-text {
        font-size: 14px;
    }
    
    .figma-feature-card__button-text {
        font-size: 14px;
    }
    
    .figma-feature-card__button-content {
        gap: 0;
    }
    
    .figma-feature-card__header {
        gap: 20px;
    }
    
    .figma-feature-card__content {
        gap: 24px;
    }
}

/**
 * Figma设计稿还原 - Role Section样式
 * 严格按照Figma设计稿的尺寸、颜色、字体等属性还原
 */

/* ===== Role Section 主容器 ===== */
.figma-role {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 80px 200px 120px;
    width: 1920px;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* ===== Role Section Content 内容容器 ===== */
.figma-role__content {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 40px;
}

/* ===== Title/Tag 标签和标题容器 ===== */
.figma-role__header {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 800px;
}

/* ===== Tag 标签 ===== */
.figma-role__tag {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 2px 12px;
    width: fit-content;
    background-color: #FFFFFF;
    border-radius: 4px;
}

.figma-role__tag-text {
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.5em;
    text-transform: none;
    text-align: left;
    color: #111111;
    margin: 0;
}

/* ===== Section Title 章节标题 ===== */
.figma-role__title {
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600;
    font-size: 48px;
    line-height: 1.25em;
    text-align: left;
    color: #111111;
    margin: 0;
    align-self: stretch;
}

/* ===== Role Cards 卡片容器 ===== */
.figma-role__cards {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 32px;
}

/* ===== Card Row 卡片行 ===== */
.figma-role__card-row {
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    align-items: stretch;
    align-self: stretch;
    gap: 32px;
}

/* ===== Role Image 角色图片 ===== */
.figma-role__image {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: cover;
    transition: transform 0.3s ease; /* 添加过渡动画 */
}

.figma-role__image-wrapper {
    flex: 1;
    min-height: 0;
    overflow: hidden; /* 防止图片放大时溢出容器 */
    border-radius: 8px; /* 保持圆角 */
}

/* Hover时图片放大12% */
.figma-role__image-wrapper:hover .figma-role__image {
    transform: scale(1.12); /* 放大12% */
}

/* ===== Role Card 角色卡片 ===== */
.figma-role__card {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 80px;
    padding: 24px;
    background-color: #FFFFFF;
    border: 1px solid rgba(17, 17, 17, 0.1);
    border-radius: 8px;
    flex: 1;
    min-height: 0;
}

/* ===== Card Upper Content 卡片上部内容 ===== */
.figma-role-card__upper-content {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 12px;
}

/* ===== Title/Subtitle/Icon 标题副标题图标 ===== */
.figma-role-card__header {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 8px;
}

.figma-role-card__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.figma-role-card__title {
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 1.25em;
    text-align: left;
    color: #111111;
    margin: 0;
    align-self: stretch;
}

.figma-role-card__subtitle {
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.5em;
    text-align: left;
    color: #111111;
    margin: 0;
    opacity: 0.4;
    align-self: stretch;
}

/* ===== Card Line 卡片分割线 ===== */
.figma-role-card__line {
    width: 100%;
    height: 0;
    stroke: #111111;
    stroke-width: 1px;
    stroke-dasharray: 5 5;
    opacity: 0.2;
}

/* ===== Card Down Content 卡片下部内容 ===== */
.figma-role-card__down-content {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 12px;
}

.figma-role-card__down-title {
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.25em;
    text-align: left;
    color: #111111;
    margin: 0;
    align-self: stretch;
}

.figma-role-card__body-text {
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5em;
    text-align: left;
    color: #111111;
    margin: 0;
    opacity: 0.6;
    align-self: stretch;
}

/* ===== 响应式设计 ===== */

/* >=1920px: 限宽1920px，不随屏幕宽度变化而变化 */
@media (min-width: 1920px) {
    .figma-role {
        width: 1920px;
        max-width: 1920px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* 1440px-1919px 断点 */
@media (min-width: 1440px) and (max-width: 1919px) {
    .figma-role {
        width: 100%;
        padding: 80px 120px 120px;
        box-sizing: border-box;
    }
    
    .figma-role__title {
        font-size: 40px;
    }
}

/* 1024px-1439px 断点 */
@media (min-width: 1024px) and (max-width: 1439px) {
    .figma-role {
        width: 100%;
        padding: 80px 32px 120px;
        box-sizing: border-box;
    }
    
    .figma-role__title {
        font-size: 28px;
    }
    
    .figma-role-card__down-title {
        font-size: 16px;
    }
}

/* <1440px: card down content里的title字号缩小到16 */
@media (max-width: 1439px) {
    .figma-role-card__down-title {
        font-size: 16px;
    }
}

/**
 * Figma设计稿还原 - Data Section样式
 * 严格按照Figma设计稿的尺寸、颜色、字体等属性还原
 */

/* ===== Data Section 主容器 ===== */
.figma-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 80px 200px 120px;
    width: 1920px;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* ===== Data Content 内容容器 ===== */
.figma-data__content {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 48px;
}

/* ===== Header (Title/Tag/Button) 容器 ===== */
.figma-data__header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    align-self: stretch;
    gap: 380px;
}

/* ===== Title/Tag 容器 ===== */
.figma-data__title-tag {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 800px;
}

/* ===== Tag 标签 ===== */
.figma-data__tag {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 2px 12px;
    width: fit-content;
    background-color: #FFFFFF;
    border-radius: 4px;
}

.figma-data__tag-text {
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.5em;
    text-transform: none;
    text-align: left;
    color: #111111;
    margin: 0;
}

/* ===== Section Title 章节标题 ===== */
.figma-data__title {
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600;
    font-size: 48px;
    line-height: 1.25em;
    text-align: left;
    color: #111111;
    margin: 0;
    align-self: stretch;
}

/* ===== Button 按钮 ===== */
.figma-data__button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 18px 48px;
    width: 220px;
    height: 56px;
    background-color: #111111;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
    transition: background-color 0.3s ease;
    flex-shrink: 0;
}

.figma-data__button:hover {
    background-color: #3a66ff;
}

.figma-data__button-text {
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.25em;
    text-transform: none;
    text-align: center;
    color: #FFFFFF;
    margin: 0;
    white-space: nowrap;
}

.figma-data__button-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: block;
}

/* ===== Data Cards 卡片容器 ===== */
.figma-data__cards {
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    align-items: stretch;
    align-self: stretch;
    gap: 20px;
}

/* ===== Data Card 单个卡片 ===== */
.figma-data__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    gap: 32px;
    padding: 40px 0px;
    background-color: #FFFFFF;
    border: 1px solid rgba(17, 17, 17, 0.1);
    border-radius: 16px;
    box-sizing: border-box;
    flex: 1; /* 确保卡片宽度一致，均分容器宽度 */
    min-width: 0; /* 防止flex item溢出 */
    transition: transform 0.3s ease;
    justify-content: space-between;
}

/* Hover时卡片上移12px */
.figma-data__card:hover {
    transform: translateY(-12px);
}

/* Card 2, 3, 4 使用不同的gap */
.figma-data__card:nth-child(2),
.figma-data__card:nth-child(3),
.figma-data__card:nth-child(4) {
    gap: 36px;
}

/* ===== Data Info 数据信息容器 ===== */
.figma-data-card__info {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 8px;
    padding: 0px 32px;
    box-sizing: border-box;
}

/* Card 3 使用不同的gap */
.figma-data__card:nth-child(3) .figma-data-card__info {
    gap: 4px;
}

/* ===== Data Card Title 数据标题 ===== */
.figma-data-card__title {
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
    font-size: 48px;
    line-height: 1.25em;
    text-transform: uppercase;
    text-align: left;
    color: #111111;
    margin: 0;
    align-self: stretch;
}

.figma-data-card__number {
    display: inline-block;
}

.figma-data-card__suffix {
    display: inline-block;
}

/* ===== Data Card Subtitle 数据副标题 ===== */
.figma-data-card__subtitle {
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5em;
    text-align: left;
    color: #111111;
    opacity: 0.8;
    margin: 0;
    align-self: stretch;
}

/* ===== Data Card Image 数据图片 ===== */
/* 图片实际尺寸1095x567（2倍图），宽高比约为1.93:1 */
/* 设计稿中高度188.94px，需要保持宽高比等比缩放 */
/* 所有屏幕宽度下都保持宽高比不变，等比缩放 */
.figma-data-card__image {
    width: 100%;
    height: auto;
    aspect-ratio: 1095 / 567; /* 基于实际图片尺寸计算宽高比，保持等比缩放 */
    object-fit: cover;
    display: block;
}

/* ===== 响应式设计 ===== */

/* >=1920px: 限宽1920px，不随屏幕宽度变化而变化 */
@media (min-width: 1920px) {
    .figma-data {
        width: 1920px;
        max-width: 1920px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* 1440px-1919px 断点 */
@media (min-width: 1440px) and (max-width: 1919px) {
    .figma-data {
        width: 100%;
        padding: 80px 120px 120px;
        box-sizing: border-box;
    }
    
    .figma-data__title {
        font-size: 40px;
    }
    
    .figma-data-card__title {
        font-size: 40px;
    }
    
    /* Button保持原样，不修改 */
}

/* 1024px-1439px 断点 */
@media (min-width: 1024px) and (max-width: 1439px) {
    .figma-data {
        width: 100%;
        padding: 80px 32px 120px;
        box-sizing: border-box;
    }
    
    .figma-data__header {
        gap: 40px;
    }
    
    .figma-data__title-tag {
        width: auto;
        flex: 1;
    }
    
    .figma-data__title {
        font-size: 28px;
    }
    
    .figma-data-card__title {
        font-size: 36px;
    }
    
    .figma-data-card__subtitle {
        font-size: 14px;
    }
}

/* <1440px 断点：button样式统一修改 */
@media (max-width: 1439px) {
    .figma-data__button {
        width: 200px;
        height: 48px;
        padding: 14px 40px;
    }
    
    .figma-data__button-text {
        font-size: 14px;
    }
}

/**
 * Figma设计稿还原 - Gallery Section样式
 * 严格按照Figma设计稿的尺寸、颜色、字体等属性还原
 */

/* ===== Gallery Section 主容器 ===== */
.figma-gallery {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    padding: 120px 0px 180px;
    width: 1920px;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    background-color: #111111;
    background-image: url('http://qhstatic-us-s3.coohom.com/image/png/1766045640077/gallery-bg-36a0cf.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden; /* 隐藏超出屏幕的部分，防止页面宽度变宽 */
}

/* 背景图透明度40%的覆盖层 */
.figma-gallery::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6); /* 60%黑色覆盖层，使背景图看起来40%透明度 */
    z-index: 0;
    pointer-events: none;
}

/* ===== Gallery Content 内容容器 ===== */
.figma-gallery__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    width: 100%;
    position: relative;
    z-index: 1;
    max-width: 1920px;
    margin: 0 auto;
}

/* ===== Text Content 文本内容容器 ===== */
.figma-gallery__text-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 960px;
    max-width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

/* ===== Tag 标签 ===== */
.figma-gallery__tag {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 2px 12px;
    width: fit-content;
    background-color: #FFFFFF;
    border: 1px solid rgba(17, 17, 17, 0.2);
    border-radius: 4px;
}

.figma-gallery__tag-text {
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.5em;
    text-transform: none;
    text-align: left;
    color: #111111;
    margin: 0;
}

/* ===== Section Title 章节标题 ===== */
.figma-gallery__title {
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600;
    font-size: 48px;
    line-height: 1.25em;
    text-align: center;
    color: #FFFFFF;
    margin: 0;
    align-self: stretch;
}

/* ===== Gallery Wrapper 画廊包装器（通栏全屏） ===== */
.figma-gallery__gallery-wrapper {
    width: 100vw;
    position: relative;
    overflow: hidden; /* 隐藏超出屏幕的部分，防止页面宽度变宽 */
}

/* ===== Image Gallery 图片画廊容器 ===== */
.figma-gallery__gallery {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    width: max-content;
    animation: figma-gallery-scroll 60s linear infinite;
    will-change: transform;
    padding-left: 20px;
}

/* 暂停动画 */
.figma-gallery__gallery.paused {
    animation-play-state: paused;
}

/* ===== Image Card 图片卡片 ===== */
.figma-gallery__card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-shrink: 0;
}

/* ===== Image Card Image 卡片图片 ===== */
.figma-gallery-card__image {
    width: 464px;
    height: 309px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    object-fit: cover;
    display: block;
}

/* ===== Image Card Info 卡片信息 ===== */
.figma-gallery-card__info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ===== Image Card Title 卡片标题 ===== */
.figma-gallery-card__title {
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.25em;
    text-transform: none;
    text-align: left;
    color: #FFFFFF;
    margin: 0;
}

/* ===== Image Card Data 卡片数据信息 ===== */
.figma-gallery-card__data {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.figma-gallery-card__icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    opacity: 0.4;
    display: block;
}

.figma-gallery-card__data-text {
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5em;
    text-align: left;
    color: #FFFFFF;
    opacity: 0.4;
    margin: 0;
}

/* ===== 滚动动画（从左往右） ===== */
/* 移动50%实现无缝循环，因为gallery包含两套相同的卡片 */
@keyframes figma-gallery-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* ===== 响应式设计 ===== */

/* >=1920px: 宽度不限制，始终跟屏幕宽度保持一致 */
@media (min-width: 1920px) {
    .figma-gallery {
        width: 100vw;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        overflow: hidden; /* 隐藏超出屏幕的部分，防止页面宽度变宽 */
    }
    
    .figma-gallery__content {
        max-width: 1920px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* 1440px-1919px 断点 */
@media (min-width: 1440px) and (max-width: 1919px) {
    .figma-gallery {
        width: 100%;
        padding: 120px 120px 180px;
        box-sizing: border-box;
        overflow: hidden; /* 隐藏超出屏幕的部分，防止页面宽度变宽 */
    }
    
    .figma-gallery__title {
        font-size: 40px;
    }
}

/* 1024px-1439px 断点 */
@media (min-width: 1024px) and (max-width: 1439px) {
    .figma-gallery {
        width: 100%;
        padding: 120px 32px 180px;
        box-sizing: border-box;
        overflow: hidden; /* 隐藏超出屏幕的部分，防止页面宽度变宽 */
    }
    
    .figma-gallery__title {
        font-size: 28px;
    }
    
    /* 图片缩小20% */
    .figma-gallery-card__image {
        width: 371.2px; /* 464 * 0.8 */
        height: 247.2px; /* 309 * 0.8 */
    }
}

/* <1024px 断点 */
@media (max-width: 1023px) {
    .figma-gallery {
        width: 100%;
        padding: 80px 20px 120px;
        box-sizing: border-box;
        overflow: hidden; /* 隐藏超出屏幕的部分，防止页面宽度变宽 */
    }
    
    .figma-gallery__title {
        font-size: 24px;
    }
    
    /* 图片缩小20% */
    .figma-gallery-card__image {
        width: 371.2px; /* 464 * 0.8 */
        height: 247.2px; /* 309 * 0.8 */
    }
}

/* <1440px 统一处理图片缩小20% */
@media (max-width: 1439px) {
    .figma-gallery-card__image {
        width: 371.2px; /* 464 * 0.8 */
        height: 247.2px; /* 309 * 0.8 */
    }
}

/**
 * Figma设计稿还原 - Testimonial Section样式
 * 严格按照Figma设计稿的尺寸、颜色、字体等属性还原
 */

/* ===== Testimonial Section 主容器 ===== */
.figma-testimonial {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 100px 0px 120px;
    width: 1920px;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    background-color: #F4F5F6;
    background-image: 
        linear-gradient(0deg, rgba(244, 245, 246, 0) 0%, rgba(244, 245, 246, 1) 56%),
        url('http://qhstatic-us-s3.coohom.com/image/png/1766046081519/testimonial-bg-79294d.png');
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    position: relative;
}

/* ===== Testimonial Content 内容容器 ===== */
.figma-testimonial__content {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 48px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: 200px;
    padding-right: 200px;
    overflow: hidden; /* 防止卡片超出content */
}

/* ===== Title/Tag 标签和标题容器 ===== */
.figma-testimonial__header {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 800px;
}

/* ===== Tag 标签 ===== */
.figma-testimonial__tag {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 2px 12px;
    width: fit-content;
    background-color: #FFFFFF;
    border-radius: 4px;
}

.figma-testimonial__tag-text {
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.5em;
    text-transform: none;
    text-align: left;
    color: #111111;
    margin: 0;
}

/* ===== Section Title 章节标题 ===== */
.figma-testimonial__title {
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600;
    font-size: 48px;
    line-height: 1.25em;
    text-align: left;
    color: #111111;
    margin: 0;
    align-self: stretch;
}

/* ===== Review Cards 卡片容器 ===== */
.figma-testimonial__cards {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-self: stretch;
    /* gap值自动计算，根据section content宽度和卡片宽度自动分配 */
    min-width: 0; /* 防止flex容器溢出 */
    overflow: hidden; /* 防止卡片超出容器 */
}

/* ===== Review Card 单个卡片 ===== */
.figma-testimonial__card {
    display: flex;
    flex-direction: column;
    gap: 108px;
    padding: 32px;
    padding-top: 56px;
    padding-bottom: 12px;
    width: 386px;
    height: 625px;
    background-image: url('http://qhstatic-us-s3.coohom.com/image/png/1766046081375/testimonial-card1-bg.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 16px;
    box-sizing: border-box;
    flex-shrink: 0;
    min-width: 0; /* 防止flex item溢出 */
}

/* Card 2 使用不同的id-line布局 */
.figma-testimonial__card:nth-child(2) .figma-testimonial-card__id-line {
    gap: 20px;
    flex-direction: row;
    width: 174px;
}

/* Card 3 使用不同的id-line布局 */
.figma-testimonial__card:nth-child(3) .figma-testimonial-card__id-line {
    gap: 24px;
    flex-direction: row;
    width: 178px;
}

/* ===== Image/Review Text 图片和评价文本容器 ===== */
.figma-testimonial-card__image-text {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 28px;
}

/* ===== Review Card Image 用户头像 ===== */
.figma-testimonial-card__image {
    width: 96px;
    height: 96px;
    border-radius: 200px;
    border: 1px solid rgba(17, 17, 17, 0.2);
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}

/* ===== Icon/Text 图标和文本容器 ===== */
.figma-testimonial-card__icon-text {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 24px;
}

/* ===== Review Card Icon 引用图标 ===== */
.figma-testimonial-card__icon {
    width: 34px;
    height: 32px;
    flex-shrink: 0;
    display: block;
}

/* ===== Review Card Body Text 评价正文 ===== */
.figma-testimonial-card__body-text {
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.5em;
    text-align: left;
    color: #111111;
    margin: 0;
    align-self: stretch;
    opacity: 0.6; /* 默认透明度60% */
    transition: opacity 0.3s ease; /* 添加过渡动画 */
}

/* Hover时body text透明度变成100% */
.figma-testimonial__card:hover .figma-testimonial-card__body-text {
    opacity: 1; /* hover时透明度100% */
}

/* ===== ID/Line 用户信息和分隔线容器 ===== */
.figma-testimonial-card__id-line {
    display: flex;
    flex-direction: column;
    gap: 113px;
    width: 174px;
}

/* ===== Name/Job 姓名和职位容器 ===== */
.figma-testimonial-card__name-job {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ===== Name/Location 姓名和位置容器 ===== */
.figma-testimonial-card__name-location {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ===== Review Card Name 用户姓名 ===== */
.figma-testimonial-card__name {
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.5em;
    text-align: left;
    color: #111111;
    margin: 0;
    white-space: nowrap; /* 防止折行 */
}

/* ===== Job/Location 职位和位置容器 ===== */
.figma-testimonial-card__job-location {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    white-space: nowrap; /* 防止折行 */
    overflow: hidden; /* 防止溢出 */
}

/* ===== Review Card Job 职位 ===== */
.figma-testimonial-card__job {
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5em;
    text-align: left;
    color: #111111;
    opacity: 0.4;
    margin: 0;
    white-space: nowrap; /* 防止折行 */
    flex-shrink: 0;
}

/* ===== Review Card Line 分隔线 ===== */
.figma-testimonial-card__line {
    width: 1px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.2; /* 100%不透明 */
    display: block;
}

/* ===== Review Card Location 位置 ===== */
.figma-testimonial-card__location {
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5em;
    text-align: left;
    color: #111111;
    opacity: 0.4;
    margin: 0;
    white-space: nowrap; /* 防止折行 */
    flex-shrink: 0;
}

/* ===== 响应式设计 ===== */

/* >=1920px: section content限制宽度，背景图填充整个section */
@media (min-width: 1920px) {
    .figma-testimonial {
        width: 100vw;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        background-size: cover, cover;
        background-position: center, center;
        padding-left: 0;
        padding-right: 0;
    }
    
    .figma-testimonial__content {
        width: 1920px;
        max-width: 1920px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 200px;
        padding-right: 200px;
        box-sizing: border-box;
    }
    
    /* 卡片间距自动计算，根据content宽度和卡片宽度自动分配 */
    .figma-testimonial__cards {
        justify-content: space-between;
    }
    
    .figma-testimonial__card {
        width: 493px; /* >=1920px区间固定宽度493px */
    }
}

/* 1440px-1919px 断点 */
@media (min-width: 1440px) and (max-width: 1919px) {
    .figma-testimonial {
        width: 100%;
        padding: 100px 0px 120px;
        box-sizing: border-box;
    }
    
    .figma-testimonial__content {
        padding-left: 120px;
        padding-right: 120px;
        box-sizing: border-box;
        overflow: hidden; /* 防止卡片超出content */
        width: 100%;
    }
    
    .figma-testimonial__cards {
        overflow: hidden; /* 防止卡片超出容器 */
        width: 100%;
        min-width: 0;
    }
    
    .figma-testimonial__card {
        height: 528px;
        gap: 48px;
        /* 卡片宽度保持493px固定不变 */
    }
    
    .figma-testimonial__title {
        font-size: 40px;
    }
    
    .figma-testimonial-card__image {
        width: 80px;
        height: 80px;
    }
    
    .figma-testimonial-card__body-text {
        font-size: 18px;
    }
    
    .figma-testimonial-card__name {
        font-size: 16px;
    }
}

/* 1024px-1439px 断点 */
@media (min-width: 1024px) and (max-width: 1439px) {
    .figma-testimonial {
        width: 100%;
        padding: 100px 0px 120px;
        box-sizing: border-box;
    }
    
    .figma-testimonial__content {
        padding-left: 32px;
        padding-right: 32px;
        box-sizing: border-box;
        overflow: hidden; /* 防止卡片超出content */
        width: 100%;
    }
    
    .figma-testimonial__cards {
        overflow: hidden; /* 防止卡片超出容器 */
        width: 100%;
        min-width: 0;
    }
    
    .figma-testimonial__card {
        height: 400px;
        gap: 32px;
        width: 314px; /* 1024px-1439px区间固定宽度314px */
        padding: 24px; /* 1024px-1439px区间padding改为24px */
        padding-bottom: 70px; /* 1024px-1439px区间padding-bottom改为70px */
    }
    
    .figma-testimonial__title {
        font-size: 28px;
    }
    
    .figma-testimonial-card__image {
        width: 64px;
        height: 64px;
    }
    
    .figma-testimonial-card__image-text {
        gap: 16px;
    }
    
    .figma-testimonial-card__body-text {
        font-size: 16px;
    }
    
    .figma-testimonial-card__name {
        font-size: 16px;
    }
}

/**
 * Figma设计稿还原 - CTA Section样式
 * 严格按照Figma设计稿的尺寸、颜色、字体等属性还原
 */

/* ===== CTA Section 主容器 ===== */
.figma-cta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 120px 0px;
    width: 1920px;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    background-image: url('http://qhstatic-us-s3.coohom.com/image/png/1766046122018/cta-section-bg.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/* ===== Text Content 内容容器 ===== */
.figma-cta__text-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    gap: 48px;
}

/* ===== Headline 标题容器 ===== */
.figma-cta__headline {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    gap: 20px;
    padding: 0px 80px;
}

/* ===== Title 标题 ===== */
.figma-cta__title {
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600;
    font-size: 48px;
    line-height: 1.25em;
    text-align: center;
    color: #FFFFFF;
    margin: 0;
    align-self: stretch;
}

/* ===== Button/Notice 按钮和通知容器 ===== */
.figma-cta__button-notice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

/* ===== Buttons 按钮容器 ===== */
.figma-cta__buttons {
    display: flex;
    flex-direction: row;
    gap: 32px;
}

/* ===== Button 按钮基础样式 ===== */
.figma-cta__button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 18px 48px;
    width: 220px;
    height: 56px;
    border-radius: 12px;
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.25em;
    text-align: center;
    border: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}

/* ===== Primary Button 主按钮 ===== */
.figma-cta__button--primary {
    background-color: #FAD175;
    color: #111111;
}

/* Primary Button Hover效果：背景色加20%白色蒙层 */
.figma-cta__button--primary:hover {
    background-color: color-mix(in srgb, #FAD175 80%, white 20%);
}

/* ===== Secondary Button 次要按钮 ===== */
.figma-cta__button--secondary {
    background-color: #111111;
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.4);
    white-space: nowrap; /* 防止文案折行 */
}

/* Secondary Button Hover效果：边框和文字变成#FAD175，透明度100% */
.figma-cta__button--secondary:hover {
    border-color: #FAD175;
    color: #FAD175;
    opacity: 1;
}

/* ===== Notice 通知文本 ===== */
.figma-cta__notice {
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 2em;
    text-align: center;
    color: #FFFFFF;
    opacity: 0.6;
    margin: 0;
}

/* ===== Link 链接样式 ===== */
.figma-cta__link {
    color: #FFFFFF;
    text-decoration: underline;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.figma-cta__link:hover {
    opacity: 1;
}

/* ===== 响应式设计 ===== */

/* >=1920px: section宽度随屏幕变宽，背景图片按比例填充，content限制宽度 */
@media (min-width: 1920px) {
    .figma-cta {
        width: 100vw;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        background-size: cover; /* 保持图片比例，按比例填充 */
    }
    
    .figma-cta__text-content {
        width: 1920px;
        max-width: 1920px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* 1440px-1919px 断点 */
@media (min-width: 1440px) and (max-width: 1919px) {
    .figma-cta {
        width: 100%;
        padding: 120px 120px;
        box-sizing: border-box;
    }
    
    .figma-cta__title {
        font-size: 40px;
    }
}

/* 1024px-1439px 断点 */
@media (min-width: 1024px) and (max-width: 1439px) {
    .figma-cta {
        width: 100%;
        padding: 120px 32px;
        box-sizing: border-box;
    }
    
    .figma-cta__headline {
        padding: 0px 32px;
    }
    
    .figma-cta__title {
        font-size: 28px;
    }
    
    .figma-cta__buttons {
        flex-direction: column;
        gap: 16px;
    }
    
    .figma-cta__button {
        width: 100%;
        max-width: 300px;
    }
}