/* 自定义样式文件 */

/* 自定义Tailwind配置 */
:root {
    --brown-800: #5D4037;
    --brown-600: #8D6E63;
    --gray-800: #424242;
    --custom-dark: rgba(57, 26, 0, 1);
    --custom-dark-light: rgba(57, 26, 0, 0.8);
    --custom-dark-lighter: rgba(57, 26, 0, 0.6);
    --custom-dark-bg: rgba(57, 26, 0, 0.1);
}

/* 全局样式 */
* {
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
}

/* 移动端菜单样式 */
.mobile-menu-toggle {
    transition: all 0.3s ease;
}

.mobile-menu-toggle:hover {
    background-color: rgba(139, 110, 99, 0.1);
}

.mobile-menu {
    animation: slideDown 0.3s ease-out;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.mobile-menu.hidden {
    animation: slideUp 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* 移动端优化 */
@media (max-width: 768px) {
    /* 确保所有模块在手机端都有合适的间距 */
    section {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* 手机端字体大小调整 */
    h1 {
        font-size: 2rem;
        line-height: 1.2;
    }
    
    h2 {
        font-size: 1.75rem;
        line-height: 1.3;
    }
    
    h3 {
        font-size: 1.25rem;
        line-height: 1.4;
    }
    
    /* 手机端按钮样式 */
    button {
        min-height: 44px; /* iOS推荐的最小触摸目标大小 */
        padding: 0.75rem 1.5rem;
    }
    
    /* 手机端输入框样式 */
    input, textarea, select {
        min-height: 44px;
        font-size: 16px; /* 防止iOS缩放 */
    }
}

/* 轮播图增强动画 */
.hero-section {
    transition: background 0.8s ease-in-out;
}

.hero-title {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    animation: fadeInUp 1s ease-out;
}

.hero-subtitle {
    animation: fadeInUp 1s ease-out 0.3s both;
}

.hero-button {
    animation: fadeInUp 1s ease-out 0.6s both;
    transition: all 0.3s ease;
}

.hero-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* 动画关键帧 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 导航栏样式增强 */
.navbar {
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.navbar.scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

/* Logo动画 */
.logo {
    transition: transform 0.3s ease;
}

.logo:hover {
    transform: scale(1.05);
}

/* 导航链接样式 */
.nav-link {
    position: relative;
    transition: color 0.3s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: var(--brown-600);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* 搜索框样式增强 */
.search-input {
    transition: box-shadow 0.3s ease;
}

.search-input:focus {
    box-shadow: 0 0 0 3px rgba(141, 110, 99, 0.1);
}

/* 轮播图指示器增强 */
.carousel-indicator {
    transition: all 0.3s ease;
    cursor: pointer;
}

.carousel-indicator:hover {
    transform: scale(1.2);
}

.carousel-indicator.active {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

/* 轮播图箭头样式 */
.carousel-arrow {
    transition: all 0.3s ease;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-arrow:hover {
    background: rgba(0, 0, 0, 0.6);
    transform: scale(1.1);
}

/* 页脚样式增强 */
.footer-link {
    transition: all 0.3s ease;
    position: relative;
}

.footer-link:hover {
    transform: translateX(5px);
}

/* 社交媒体图标样式 */
.social-icon {
    transition: all 0.3s ease;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-icon:hover {
    background-color: var(--brown-600);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* 响应式调整 */
@media (max-width: 768px) {
    .hero-title {
        font-size: 3rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .carousel-arrow {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
        padding: 0 1rem;
    }
}

/* 加载动画 */
.loading {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* 平滑滚动 */
html {
    scroll-behavior: smooth;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: var(--brown-600);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--brown-800);
}

/* 关于我们模块样式 */
.about-section {
    position: relative;
}

.about-watermark {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

.about-card {
    position: relative;
    transition: all 0.3s ease;
}

.about-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, rgba(57, 26, 0, 0.8), rgba(57, 26, 0, 1), rgba(45, 20, 0, 1));
    border-radius: 10px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.about-card:hover::before {
    opacity: 0.1;
}

.about-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(16, 185, 129, 0.1);
}

.building-image {
    transition: all 0.3s ease;
}

.building-image:hover {
    transform: scale(1.02);
}

.stats-card {
    backdrop-filter: blur(10px);
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(57, 26, 0, 0.3);
    }
    50% {
        box-shadow: 0 0 30px rgba(57, 26, 0, 0.5);
    }
}

.lab-image {
    transition: all 0.3s ease;
}

.lab-image:hover {
    transform: scale(1.05) rotate(1deg);
}

.decorative-dots {
    animation: bounce-dots 3s ease-in-out infinite;
}

@keyframes bounce-dots {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-8px);
    }
}

/* 响应式调整 */
@media (max-width: 1024px) {
    .about-watermark {
        font-size: 12rem;
    }
}

@media (max-width: 768px) {
    .about-watermark {
        font-size: 8rem;
    }
    
    .about-card {
        margin-bottom: 2rem;
    }
    
    .lab-image {
        position: relative !important;
        bottom: auto !important;
        right: auto !important;
        margin-top: 1rem;
        width: 100% !important;
        height: 200px !important;
    }
}

/* 为什么选择XIRAN模块样式 */
.why-choose-section {
    position: relative;
}

.lab-main-image {
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.lab-main-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(16, 185, 129, 0.1));
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 16px;
    z-index: 1;
}

.lab-main-image:hover::before {
    opacity: 1;
}

.lab-main-image:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.microscope-image {
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.microscope-image:hover {
    transform: scale(1.05) rotate(2deg);
    box-shadow: 0 15px 30px rgba(59, 130, 246, 0.2);
}

/* 特点列表动画 */
.why-choose-section ul li {
    opacity: 0;
    transform: translateX(-20px);
    animation: slideInLeft 0.6s ease forwards;
}

.why-choose-section ul li:nth-child(1) { animation-delay: 0.1s; }
.why-choose-section ul li:nth-child(2) { animation-delay: 0.2s; }
.why-choose-section ul li:nth-child(3) { animation-delay: 0.3s; }
.why-choose-section ul li:nth-child(4) { animation-delay: 0.4s; }
.why-choose-section ul li:nth-child(5) { animation-delay: 0.5s; }

@keyframes slideInLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 统计数据卡片样式 */
.stats-card {
    transition: all 0.3s ease;
    padding: 1.5rem;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

.stats-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(59, 130, 246, 0.05));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stats-card:hover::before {
    opacity: 1;
}

.stats-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(16, 185, 129, 0.1);
}

/* 数字计数动画 */
.stats-number {
    display: inline-block;
    transition: all 0.3s ease;
}

.stats-card:hover .stats-number {
    transform: scale(1.1);
}

/* 圆点装饰动画 */
.why-choose-section .absolute.bg-green-500,
.why-choose-section .absolute.bg-blue-500 {
    animation: float-decorative 4s ease-in-out infinite;
}

.why-choose-section .absolute.bg-blue-500 {
    animation-delay: 2s;
}

@keyframes float-decorative {
    0%, 100% {
        transform: translateY(0px) scale(1);
    }
    50% {
        transform: translateY(-10px) scale(1.1);
    }
}

/* 列表项hover效果 */
.why-choose-section ul li {
    transition: all 0.3s ease;
    padding: 0.5rem;
    border-radius: 8px;
    cursor: default;
}

.why-choose-section ul li:hover {
    background-color: rgba(16, 185, 129, 0.05);
    transform: translateX(10px);
}

.why-choose-section ul li:hover .bg-green-500 {
    transform: scale(1.5);
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
}

/* 响应式调整 */
@media (max-width: 1024px) {
    .why-choose-section .grid {
        gap: 2rem;
    }
    
    .microscope-image {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        margin-top: 2rem;
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    .why-choose-section h2 {
        font-size: 2.5rem;
    }
    
    .stats-card {
        padding: 1rem;
    }
    
    .stats-card div:first-child {
        font-size: 2.5rem !important;
    }
    
    .lab-main-image {
        padding: 1rem;
    }
}

/* OUR PROMISE 模块样式 */
.promise-section {
    position: relative;
    min-height: 400px;
}

.promise-section > .relative {
    z-index: 2;
}

/* 文字阴影增强 */
.promise-section h2 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.promise-section p {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

/* Custom Services 模块样式 */
.services-section {
    position: relative;
}

/* 简化的服务卡片样式 - 确保文本可选择 */
.simple-service-card {
    position: relative;
    cursor: default;
}

.simple-service-card h3,
.simple-service-card p,
.simple-service-card span,
.simple-service-card li {
    cursor: text;
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

.simple-service-card i {
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* 简化的合作卡片样式 - 确保文本可选择 */
.simple-cooperation-card {
    position: relative;
    cursor: default;
}

.simple-cooperation-card h3,
.simple-cooperation-card p,
.simple-cooperation-card span {
    cursor: text;
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

.simple-cooperation-card img {
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(59, 130, 246, 0.05));
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* 移除悬停效果 */

/* 服务图标动画 */
.service-icon {
    position: relative;
    overflow: hidden;
}

.service-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}

/* 移除图标悬停效果 */

/* 服务卡片动画进入 */
.service-card {
    opacity: 0;
    transform: translateY(30px);
    animation: slideInUp 0.6s ease forwards;
}

.service-card:nth-child(1) { animation-delay: 0.1s; }
.service-card:nth-child(2) { animation-delay: 0.2s; }
.service-card:nth-child(3) { animation-delay: 0.3s; }
.service-card:nth-child(4) { animation-delay: 0.4s; }
.service-card:nth-child(5) { animation-delay: 0.5s; }
.service-card:nth-child(6) { animation-delay: 0.6s; }
.service-card:nth-child(7) { animation-delay: 0.7s; }
.service-card:nth-child(8) { animation-delay: 0.8s; }

@keyframes slideInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Read More 链接动画 */
.service-card a {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.service-card a::after {
    content: '→';
    position: absolute;
    right: -20px;
    opacity: 0;
    transition: all 0.3s ease;
}

/* 移除链接悬停效果 */

/* 卡片标题动画 */
.service-card h3 {
    transition: all 0.3s ease;
}

/* 移除标题悬停效果 */

/* 响应式调整 */
@media (max-width: 1024px) {
    .services-section .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .service-card {
        padding: 1.5rem;
    }
}

@media (max-width: 768px) {
    .services-section .grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .service-card {
        padding: 1.25rem;
    }
    
    .promise-section .grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
    
    .promise-section h2 {
        font-size: 2.5rem;
    }
}

/* 加载时暂停动画 */
.service-card {
    animation-play-state: paused;
}

.service-card.animate-in {
    animation-play-state: running;
}

/* Our Cooperation Model 模块样式 */
.cooperation-section {
    position: relative;
}

.cooperation-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transform: translateY(0);
    border: 1px solid transparent;
}

.cooperation-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(59, 130, 246, 0.05));
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 16px;
}

.cooperation-card:hover::before {
    opacity: 1;
}

.cooperation-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    border-color: rgba(16, 185, 129, 0.2);
}

/* 合作卡片图片容器 */
.cooperation-image-container {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.cooperation-image-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(16, 185, 129, 0.1), rgba(59, 130, 246, 0.1));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cooperation-card:hover .cooperation-image-container::after {
    opacity: 1;
}

/* 合作卡片进入动画 */
.cooperation-card {
    opacity: 0;
    transform: translateY(30px);
    animation: slideInUp 0.8s ease forwards;
}

.cooperation-card:nth-child(1) { animation-delay: 0.1s; }
.cooperation-card:nth-child(2) { animation-delay: 0.2s; }
.cooperation-card:nth-child(3) { animation-delay: 0.3s; }
.cooperation-card:nth-child(4) { animation-delay: 0.4s; }

/* 合作卡片标题动画 */
.cooperation-card h3 {
    transition: all 0.3s ease;
    position: relative;
}

.cooperation-card:hover h3 {
    color: rgba(57, 26, 0, 1);
    transform: translateY(-2px);
}

.cooperation-card h3::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(57, 26, 0, 0.8), rgba(57, 26, 0, 1));
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.cooperation-card:hover h3::after {
    width: 100%;
}

/* 合作模式标题样式 */
.cooperation-section h2 {
    position: relative;
}

.cooperation-section h2::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, rgba(57, 26, 0, 0.8), rgba(57, 26, 0, 1));
    border-radius: 2px;
    transform: translateX(-50%);
}

/* 响应式调整 */
@media (max-width: 1024px) {
    .cooperation-section .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .cooperation-section .grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .cooperation-card {
        padding: 1.25rem;
    }
    
    .cooperation-image-container {
        margin-bottom: 1rem;
    }
    
    .cooperation-section h2 {
        font-size: 2.5rem;
    }
}

/* 加载时暂停动画 */
.cooperation-card {
    animation-play-state: paused;
}

.cooperation-card.animate-in {
    animation-play-state: running;
}

/* HOW TO GET STARTED 模块样式 */
.get-started-section {
    position: relative;
}

.process-step {
    transition: all 0.3s ease;
}

.process-step:hover {
    transform: translateY(-5px);
}

.step-icon {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.step-icon i {
    z-index: 2;
    position: relative;
}

.step-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
    z-index: 1;
}

.step-icon:hover::before {
    width: 100%;
    height: 100%;
}

/* 箭头动画 */
.arrow-right {
    animation: pulse-arrow 2s ease-in-out infinite;
}

@keyframes pulse-arrow {
    0%, 100% {
        transform: translateX(0);
        opacity: 0.7;
    }
    50% {
        transform: translateX(5px);
        opacity: 1;
    }
}

/* 流程步骤进入动画 */
.process-step {
    opacity: 0;
    transform: translateY(30px);
    animation: slideInUp 0.6s ease forwards;
}

.process-step:nth-child(odd) { animation-delay: 0.1s; }
.process-step:nth-child(even) { animation-delay: 0.2s; }

/* CONTACT US 模块样式 */
.contact-section {
    position: relative;
}

.contact-form {
    transition: all 0.3s ease;
}

.contact-form:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

/* 表单输入框样式 */
.contact-form input,
.contact-form textarea {
    transition: all 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.1);
}

/* FAQ样式 */
.faq-item {
    transition: all 0.3s ease;
    overflow: hidden;
}

.faq-item:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.faq-question {
    transition: all 0.3s ease;
}

.faq-question:hover {
    background-color: rgba(16, 185, 129, 0.05);
}

.faq-icon {
    transition: transform 0.3s ease;
}

.faq-item.active .faq-icon {
    transform: rotate(90deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-item.active .faq-answer {
    max-height: 200px;
}

/* 联系表单动画 */
.contact-form-container {
    opacity: 0;
    transform: translateX(-30px);
    animation: slideInLeft 0.8s ease forwards;
}

.faq-container {
    opacity: 0;
    transform: translateX(30px);
    animation: slideInRight 0.8s ease 0.2s forwards;
}

@keyframes slideInRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* FAQ项目逐个显示 */
.faq-item {
    opacity: 0;
    transform: translateY(20px);
    animation: slideInUp 0.5s ease forwards;
}

.faq-item:nth-child(1) { animation-delay: 0.3s; }
.faq-item:nth-child(2) { animation-delay: 0.4s; }
.faq-item:nth-child(3) { animation-delay: 0.5s; }
.faq-item:nth-child(4) { animation-delay: 0.6s; }
.faq-item:nth-child(5) { animation-delay: 0.7s; }
.faq-item:nth-child(6) { animation-delay: 0.8s; }

/* 响应式调整 */
@media (max-width: 1024px) {
    .get-started-section .flex {
        flex-direction: column;
        space-y: 2rem;
    }
    
    .arrow-right {
        display: none;
    }
    
    .process-step {
        max-width: 300px;
    }
}

@media (max-width: 768px) {
    .get-started-section h2,
    .contact-section h2 {
        font-size: 2.5rem;
    }
    
    .contact-form {
        padding: 1.5rem;
    }
    
    .faq-question {
        padding: 1rem;
        font-size: 0.9rem;
    }
    
    .process-step h3 {
        font-size: 1rem;
    }
    
    .process-step p {
        font-size: 0.8rem;
    }
}

/* 加载时暂停动画 */
.process-step,
.contact-form-container,
.faq-container,
.faq-item {
    animation-play-state: paused;
}

.animate-in {
    animation-play-state: running;
}

/* Hot Product Categories 模块样式 */
.product-categories-section {
    position: relative;
}

/* 绿色网格图标动画 */
.grid.grid-cols-3 div {
    animation: pulse-grid 2s ease-in-out infinite;
}

.grid.grid-cols-3 div:nth-child(1) { animation-delay: 0s; }
.grid.grid-cols-3 div:nth-child(2) { animation-delay: 0.2s; }
.grid.grid-cols-3 div:nth-child(3) { animation-delay: 0.4s; }
.grid.grid-cols-3 div:nth-child(4) { animation-delay: 0.6s; }
.grid.grid-cols-3 div:nth-child(5) { animation-delay: 0.8s; }
.grid.grid-cols-3 div:nth-child(6) { animation-delay: 1s; }
.grid.grid-cols-3 div:nth-child(7) { animation-delay: 1.2s; }
.grid.grid-cols-3 div:nth-child(8) { animation-delay: 1.4s; }
.grid.grid-cols-3 div:nth-child(9) { animation-delay: 1.6s; }

@keyframes pulse-grid {
    0%, 100% {
        opacity: 0.8;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* 产品分类卡片样式 */
.category-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transform: translateY(0);
    border: 2px solid transparent;
}

.category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(245, 158, 11, 0.2), rgba(16, 185, 129, 0.2));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.category-card:hover::before {
    opacity: 1;
}

.category-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    border-color: rgba(245, 158, 11, 0.5);
}

/* 卡片标题和按钮动画 */
.category-card h3 {
    transition: all 0.3s ease;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.category-card:hover h3 {
    transform: translateY(-5px);
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9);
}

.category-card button {
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.category-card:hover button {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(245, 158, 11, 0.3);
}

/* 分类卡片进入动画 */
.category-card {
    opacity: 0;
    transform: translateY(30px);
    animation: slideInUp 0.6s ease forwards;
}

.category-card:nth-child(1) { animation-delay: 0.1s; }
.category-card:nth-child(2) { animation-delay: 0.2s; }
.category-card:nth-child(3) { animation-delay: 0.3s; }
.category-card:nth-child(4) { animation-delay: 0.4s; }
.category-card:nth-child(5) { animation-delay: 0.5s; }
.category-card:nth-child(6) { animation-delay: 0.6s; }
.category-card:nth-child(7) { animation-delay: 0.7s; }
.category-card:nth-child(8) { animation-delay: 0.8s; }
.category-card:nth-child(9) { animation-delay: 0.9s; }
.category-card:nth-child(10) { animation-delay: 1.0s; }

/* Download Catalog 按钮样式 */
.download-catalog-btn {
    position: relative;
    overflow: hidden;
}

.download-catalog-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.download-catalog-btn:hover::before {
    left: 100%;
}

.download-catalog-btn:active {
    transform: scale(0.98);
}

/* 卡片图片悬浮效果增强 */
.category-card img {
    transition: all 0.5s ease;
    filter: brightness(0.8);
}

.category-card:hover img {
    filter: brightness(1.1) contrast(1.1);
}

/* 渐变覆盖层动画 */
.category-card .absolute.bg-gradient-to-t {
    transition: all 0.3s ease;
}

.category-card:hover .absolute.bg-gradient-to-t {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3), transparent);
}

/* 响应式调整 */
@media (max-width: 1024px) {
    .product-categories-section .grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    .product-categories-section .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .category-card .absolute.bottom-0 {
        padding: 1rem;
    }
    
    .category-card h3 {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }
    
    .category-card button {
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
    }
    
    .product-categories-section h2 {
        font-size: 2rem;
        text-align: center;
    }
    
    .download-catalog-btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .category-card .absolute.bottom-0 {
        padding: 0.75rem;
    }
    
    .category-card h3 {
        font-size: 0.9rem;
    }
    
    .category-card button {
        padding: 0.4rem 0.8rem;
        font-size: 0.7rem;
    }
}

/* 分类卡片加载时暂停动画 */
.category-card {
    animation-play-state: paused;
}

.category-card.animate-in {
    animation-play-state: running;
}

/* CLIENT REVIEWS 模块样式 */
.client-reviews-section {
    position: relative;
}

/* 评价卡片样式 */
.review-card .bg-white {
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.review-card .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* 引号装饰动画 */
.review-card .fa-quote-left {
    transition: all 0.3s ease;
}

.review-card:hover .fa-quote-left {
    transform: scale(1.1);
    opacity: 0.3 !important;
}

/* 评价文字样式 */
.review-card p {
    transition: all 0.3s ease;
    position: relative;
}

.review-card:hover p {
    color: #374151;
}

/* 星星评分动画 */
.review-card .fa-star {
    transition: all 0.2s ease;
}

.review-card:hover .fa-star {
    transform: scale(1.1);
    animation: twinkle 1s ease-in-out infinite alternate;
}

@keyframes twinkle {
    0% { opacity: 0.8; }
    100% { opacity: 1; }
}

/* 客户姓名样式 */
.review-card h4 {
    transition: all 0.3s ease;
    position: relative;
}

.review-card h4::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #10B981, #34D399);
    transform: translateX(-50%);
    transition: width 0.3s ease;
}

.review-card:hover h4::after {
    width: 100%;
}

/* 导航按钮样式 */
.review-nav-btn {
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.review-nav-btn:hover {
    transform: translateY(-50%) scale(1.1);
    background: rgba(255, 255, 255, 0.95);
}

.review-nav-btn:active {
    transform: translateY(-50%) scale(0.95);
}

/* 指示点样式 */
.review-indicator {
    cursor: pointer;
    transition: all 0.3s ease;
}

.review-indicator:hover {
    transform: scale(1.2);
}

.review-indicator.active {
    background-color: rgba(57, 26, 0, 0.8) !important;
    transform: scale(1.3);
}

/* 轮播容器动画 */
.reviews-carousel {
    opacity: 0;
    transform: translateY(30px);
    animation: slideInUp 0.8s ease 0.3s forwards;
}

/* 评价卡片进入动画 */
.review-card {
    opacity: 0;
    transform: scale(0.9);
    animation: fadeInScale 0.6s ease forwards;
}

@keyframes fadeInScale {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 标题样式和动画 */
.client-reviews-section h2 {
    opacity: 1;
    transform: translateY(0);
    animation: fadeInDown 0.8s ease-out;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 响应式调整 */
@media (max-width: 768px) {
    .review-card .bg-white {
        padding: 1.5rem;
        margin: 0 1rem;
    }
    
    .review-card p {
        font-size: 1rem;
        line-height: 1.6;
    }
    
    .review-card h4 {
        font-size: 1.1rem;
    }
    
    .review-nav-btn {
        width: 2.5rem;
        height: 2.5rem;
        left: 0.5rem;
        right: 0.5rem;
    }
    
    .review-nav-btn.review-next {
        right: 0.5rem;
    }
    
    .fa-quote-left {
        font-size: 2rem !important;
    }
    
    .client-reviews-section h2 {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .review-card .bg-white {
        padding: 1rem;
        margin: 0 0.5rem;
    }
    
    .review-card p {
        font-size: 0.9rem;
        margin-bottom: 1.5rem;
    }
    
    .review-indicator {
        width: 0.625rem;
        height: 0.625rem;
    }
}

/* 轮播切换动画 */
.review-cards-container.transitioning {
    transition: transform 0.5s ease-in-out;
}

/* 加载时暂停动画 */
.reviews-carousel,
.review-card {
    animation-play-state: paused;
}

.animate-in .reviews-carousel,
.animate-in .review-card {
    animation-play-state: running;
}

/* 卡片内容淡入效果 */
.review-card .relative.z-10 {
    animation: contentFadeIn 0.8s ease 0.5s forwards;
    opacity: 0;
}

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

/* 星星逐个显示动画 */
.review-card .fa-star:nth-child(1) { animation-delay: 0.1s; }
.review-card .fa-star:nth-child(2) { animation-delay: 0.2s; }
.review-card .fa-star:nth-child(3) { animation-delay: 0.3s; }
.review-card .fa-star:nth-child(4) { animation-delay: 0.4s; }
.review-card .fa-star:nth-child(5) { animation-delay: 0.5s; }

/* News & Articles 模块样式 */
.news-articles-section {
    position: relative;
}

/* 标题动画 */
.news-articles-section h2 {
    opacity: 1;
    animation: fadeInDown 0.8s ease-out;
}

/* 新闻卡片样式 */
.news-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
}

.news-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

/* 新闻卡片图片区域 */
.news-card .aspect-\[4\/3\] {
    position: relative;
    overflow: hidden;
}

.news-card img {
    transition: all 0.5s ease;
    filter: brightness(0.9);
}

.news-card:hover img {
    filter: brightness(1.1) contrast(1.05);
}

/* 渐变覆盖层动画 */
.news-card .bg-gradient-to-t {
    transition: all 0.3s ease;
}

.news-card:hover .bg-gradient-to-t {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2), transparent);
}

/* No.标签样式 */
.news-card span {
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.news-card:hover span {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
}

/* 内容覆盖层动画 */
.news-card .absolute.bottom-0 div {
    transition: all 0.3s ease;
}

.news-card:hover .absolute.bottom-0 div {
    transform: translateY(0) !important;
}

/* 文章详情区域 */
.news-card .p-6.bg-white {
    transition: all 0.3s ease;
    position: relative;
}

.news-card:hover .p-6.bg-white {
    background: linear-gradient(135deg, #ffffff 0%, #f8fffe 100%);
}

/* 文章标题样式 */
.news-card h3 {
    transition: all 0.3s ease;
    position: relative;
}

.news-card h3::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #10B981, #34D399);
    transition: width 0.3s ease;
}

.news-card:hover h3::after {
    width: 100%;
}

/* Read More 按钮样式 */
.news-card button {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.news-card button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.news-card:hover button::before {
    left: 100%;
}

.news-card button:active {
    transform: scale(0.98);
}

/* 新闻卡片进入动画 */
.news-card {
    opacity: 0;
    transform: translateY(50px);
    animation: slideInUp 0.6s ease forwards;
}

.news-card:nth-child(1) { animation-delay: 0.2s; }
.news-card:nth-child(2) { animation-delay: 0.4s; }
.news-card:nth-child(3) { animation-delay: 0.6s; }

/* 文章摘要样式 */
.news-card p {
    transition: all 0.3s ease;
}

.news-card:hover p {
    color: #374151;
    line-height: 1.7;
}

/* 响应式调整 */
@media (max-width: 1024px) {
    .news-articles-section .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .news-articles-section .grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .news-card .p-6 {
        padding: 1.5rem;
    }
    
    .news-card h3 {
        font-size: 1.1rem;
        line-height: 1.4;
    }
    
    .news-card p {
        font-size: 0.9rem;
        line-height: 1.6;
    }
    
    .news-card button {
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
    }
    
    .news-articles-section h2 {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .news-card .p-6 {
        padding: 1rem;
    }
    
    .news-card .absolute.bottom-0 {
        padding: 1rem;
    }
    
    .news-card h3 {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }
    
    .news-card p {
        font-size: 0.85rem;
        margin-bottom: 1rem;
    }
    
    .news-card button {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }
}

/* 加载时暂停动画 */
.news-card {
    animation-play-state: paused;
}

.news-card.animate-in {
    animation-play-state: running;
}

/* Customize Your Own Brand CTA 模块样式 */
.customize-brand-section {
    position: relative;
    min-height: 400px;
}

/* 背景图片效果 */
.customize-brand-section img {
    transition: all 0.5s ease;
    filter: brightness(0.8) contrast(1.1);
}

.customize-brand-section:hover img {
    transform: scale(1.05);
    filter: brightness(0.9) contrast(1.2);
}

/* 标题动画 */
.customize-brand-section h2 {
    opacity: 0;
    transform: translateY(30px);
    animation: slideInUp 0.8s ease 0.3s forwards;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* 副标题动画 */
.customize-brand-section p {
    opacity: 0;
    transform: translateY(20px);
    animation: slideInUp 0.8s ease 0.5s forwards;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* CTA按钮样式 */
.cta-button {
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    animation: slideInScale 0.8s ease 0.7s forwards;
}

.cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.2), transparent);
    transition: left 0.6s ease;
}

.cta-button:hover::before {
    left: 100%;
}

.cta-button:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    transform: scale(1.05) translateY(-2px);
}

.cta-button:active {
    transform: scale(1.02) translateY(0);
}

/* 按钮内容动画 */
.cta-button span {
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.cta-button:hover span {
    color: rgba(57, 26, 0, 1);
}

.cta-button i {
    transition: all 0.3s ease;
}

.cta-button:hover i {
    transform: translateX(5px);
    color: rgba(57, 26, 0, 1);
}

/* 装饰元素动画 */
.customize-brand-section .absolute.blur-xl {
    animation: float 6s ease-in-out infinite;
}

.customize-brand-section .absolute.blur-2xl {
    animation: float 8s ease-in-out infinite reverse;
}

.customize-brand-section .absolute.blur-lg {
    animation: bounce 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.3;
    }
    50% {
        transform: translateY(-20px) rotate(180deg);
        opacity: 0.6;
    }
}

@keyframes slideInScale {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 覆盖层渐变动画 */
.customize-brand-section .bg-gradient-to-r {
    transition: all 0.5s ease;
}

.customize-brand-section:hover .bg-gradient-to-r {
    background: linear-gradient(to right, rgba(6, 78, 59, 0.85), rgba(4, 120, 87, 0.75), rgba(6, 78, 59, 0.85));
}

/* 内容容器动画 */
.customize-brand-section .relative.z-10 {
    opacity: 0;
    animation: fadeIn 1s ease 0.2s forwards;
}

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

/* 响应式调整 */
@media (max-width: 1024px) {
    .customize-brand-section {
        min-height: 350px;
        padding: 3rem 0;
    }
    
    .customize-brand-section h2 {
        font-size: 2.5rem;
        margin-bottom: 1.5rem;
    }
    
    .customize-brand-section p {
        font-size: 1.1rem;
    }
    
    .cta-button {
        padding: 1rem 2rem;
        font-size: 1.1rem;
    }
}

@media (max-width: 768px) {
    .customize-brand-section {
        min-height: 300px;
        padding: 2rem 0;
    }
    
    .customize-brand-section h2 {
        font-size: 2rem;
        text-align: center;
        margin-bottom: 1rem;
    }
    
    .customize-brand-section p {
        font-size: 1rem;
        text-align: center;
        margin-bottom: 2rem;
    }
    
    .cta-button {
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
        width: 100%;
        max-width: 300px;
    }
    
    .customize-brand-section .flex-col {
        space-y: 1.5rem;
    }
}

@media (max-width: 480px) {
    .customize-brand-section h2 {
        font-size: 1.75rem;
        line-height: 1.3;
    }
    
    .customize-brand-section p {
        font-size: 0.9rem;
        line-height: 1.6;
    }
    
    .cta-button {
        padding: 0.75rem 1.25rem;
        font-size: 0.9rem;
    }
    
    .customize-brand-section .absolute {
        display: none; /* 隐藏装饰元素在小屏幕上 */
    }
}

/* 鼠标悬停整个区域效果 */
.customize-brand-section:hover .cta-button {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    }
    50% {
        box-shadow: 0 15px 40px rgba(16, 185, 129, 0.3);
    }
}

/* Manufacturer 页面样式 */
.manufacturer-hero {
    position: relative;
    min-height: 600px;
}

.manufacturer-hero img {
    transition: all 0.5s ease;
}

.manufacturer-hero:hover img {
    transform: scale(1.05);
}

/* About Manufacturer 模块 */
.about-manufacturer h2 {
    opacity: 0;
    transform: translateY(30px);
    animation: slideInUp 0.8s ease 0.3s forwards;
}

.about-manufacturer .grid > div {
    opacity: 0;
    transform: translateY(30px);
    animation: slideInUp 0.8s ease forwards;
}

.about-manufacturer .grid > div:nth-child(1) { animation-delay: 0.5s; }
.about-manufacturer .grid > div:nth-child(2) { animation-delay: 0.7s; }

/* Manufacturing Capabilities 样式 */
.capability-card {
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(30px);
    animation: slideInUp 0.6s ease forwards;
}

.capability-card:nth-child(1) { animation-delay: 0.1s; }
.capability-card:nth-child(2) { animation-delay: 0.2s; }
.capability-card:nth-child(3) { animation-delay: 0.3s; }
.capability-card:nth-child(4) { animation-delay: 0.4s; }
.capability-card:nth-child(5) { animation-delay: 0.5s; }
.capability-card:nth-child(6) { animation-delay: 0.6s; }

.capability-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.capability-card i {
    transition: all 0.3s ease;
}

.capability-card:hover i {
    transform: scale(1.1);
}

/* CTA Section 样式 */
.manufacturer-cta {
    position: relative;
}

.manufacturer-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="1" fill="white" opacity="0.1"/><circle cx="10" cy="60" r="1" fill="white" opacity="0.1"/><circle cx="90" cy="40" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    pointer-events: none;
}

/* About Manufacturer 图片样式 */
.about-manufacturer img {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
}

/* 统计数据模块样式 */
.stats-section {
    position: relative;
}

.stats-card {
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(30px);
    animation: slideInUp 0.6s ease forwards;
}

.stats-card:nth-child(1) { animation-delay: 0.1s; }
.stats-card:nth-child(2) { animation-delay: 0.2s; }
.stats-card:nth-child(3) { animation-delay: 0.3s; }
.stats-card:nth-child(4) { animation-delay: 0.4s; }
.stats-card:nth-child(5) { animation-delay: 0.5s; }

.stats-card:hover {
    transform: translateY(-5px);
}

.stats-card .counter {
    transition: all 0.3s ease;
}

.stats-card:hover .counter {
    color: rgba(57, 26, 0, 1);
}

/* 统计数据数字动画 */
@keyframes countUp {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.stats-card.counting .counter {
    animation: countUp 0.6s ease;
}

/* 定制服务模块样式 */
.customize-services h2 {
    opacity: 0;
    transform: translateY(30px);
    animation: slideInUp 0.8s ease 0.3s forwards;
}

.customize-card {
    opacity: 0;
    transform: translateY(30px);
    animation: slideInUp 0.6s ease forwards;
    height: 100%; /* 确保卡片容器占满高度 */
    transition: all 0.3s ease;
}

.customize-card:nth-child(1) { animation-delay: 0.2s; }
.customize-card:nth-child(2) { animation-delay: 0.4s; }
.customize-card:nth-child(3) { animation-delay: 0.6s; }

/* 卡片悬停时的浅棕色背景效果 */
.customize-card:hover .bg-white {
    background: linear-gradient(135deg, #fdf2f8 0%, #fef7ed 50%, #f9fafb 100%);
    box-shadow: 0 10px 25px rgba(139, 69, 19, 0.15), 0 5px 15px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
    transition: all 0.4s ease;
}

.customize-card .bg-white {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    height: 100%; /* 卡片内容区域占满高度 */
    display: flex;
    flex-direction: column; /* 垂直布局 */
}

/* 删除悬停效果 - 光晕效果 */
/*
.customize-card .bg-white::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
    z-index: 1;
}

.customize-card:hover .bg-white::before {
    left: 100%;
}
*/

/* 删除悬停效果 - 图片效果 */
/*
.customize-card img {
    transition: all 0.5s ease;
}

.customize-card:hover img {
    filter: brightness(1.1) saturate(1.2);
}
*/

/* 删除悬停效果 - 标题效果 */
/*
.customize-card h3 {
    transition: all 0.3s ease;
}

.customize-card:hover h3 {
    color: rgba(57, 26, 0, 1);
    transform: translateY(-2px);
}
*/

.customize-card .p-6 {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.customize-card h3 {
    flex-shrink: 0; /* 标题不压缩 */
    transition: all 0.3s ease;
}

/* 新的浅棕色标题悬停效果 */
.customize-card:hover h3 {
    color: #8b4513;
    transform: translateY(-2px);
}

/* 删除悬停效果 - 段落效果 */
/*
.customize-card p {
    transition: all 0.3s ease;
    flex: 1;
    display: flex;
    align-items: center;
}

.customize-card:hover p {
    color: #374151;
}
*/

.customize-card p {
    flex: 1;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

/* 新的浅棕色段落悬停效果 */
.customize-card:hover p {
    color: #6b5b47;
}

.customize-card .text-center:last-child {
    flex-shrink: 0; /* 按钮区域不压缩 */
    margin-top: auto; /* 按钮区域推到底部 */
}

/* 删除悬停效果 - 按钮效果 */
/*
.customize-card button {
    position: relative;
    overflow: hidden;
}

.customize-card button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
}

.customize-card button:hover::before {
    width: 300px;
    height: 300px;
}

.customize-card button:active {
    transform: scale(0.98);
}
*/

/* 新的浅棕色按钮悬停效果 - 不改变颜色 */
.customize-card button {
    transition: all 0.3s ease;
}

.customize-card:hover button,
.customize-card:hover button.bg-green-600 {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(139, 69, 19, 0.3);
}

/* 网格布局高度统一 */
.customize-services .grid {
    align-items: stretch; /* 确保网格项目拉伸到相同高度 */
}

/* 删除悬停效果 - 卡片组合效果 */
/*
.customize-services:hover .customize-card:not(:hover) {
    opacity: 0.7;
    transform: scale(0.98);
}
*/

/* 合作说明横幅样式 - 静态版本 */
.collaboration-banner {
    position: relative;
    min-height: 200px;
}

.collaboration-banner .w-20 {
    /* 移除动画，保持静态 */
}

.collaboration-banner p {
    /* 移除动画，保持静态 */
}

/* 定制化妆品步骤样式 */
.custom-steps h2 {
    opacity: 0;
    transform: translateY(30px);
    animation: slideInUp 0.8s ease 0.3s forwards;
}

.custom-steps .fas {
    animation: bounceIn 0.8s ease 0.1s both;
}

.step-card {
    opacity: 0;
    transform: translateY(30px);
    animation: slideInUp 0.6s ease forwards;
    position: relative;
    overflow: hidden;
}

/* 交错动画延迟 */
.step-card:nth-child(1) { animation-delay: 0.1s; }
.step-card:nth-child(2) { animation-delay: 0.2s; }
.step-card:nth-child(3) { animation-delay: 0.3s; }
.step-card:nth-child(4) { animation-delay: 0.4s; }
.step-card:nth-child(5) { animation-delay: 0.5s; }
.step-card:nth-child(6) { animation-delay: 0.6s; }
.step-card:nth-child(7) { animation-delay: 0.7s; }
.step-card:nth-child(8) { animation-delay: 0.8s; }
.step-card:nth-child(9) { animation-delay: 0.9s; }

/* 步骤卡片样式 */
.step-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, rgba(57, 26, 0, 0.8), rgba(57, 26, 0, 0.6), rgba(57, 26, 0, 0.4), rgba(57, 26, 0, 0.8));
    background-size: 400% 400%;
    border-radius: 0.5rem;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s ease;
    animation: gradientShift 3s ease infinite;
}

.step-card:hover::before {
    opacity: 1;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 步骤编号hover效果 */
.step-card .text-6xl {
    transition: all 0.3s ease;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.step-card:hover .text-6xl {
    text-shadow: 0 4px 8px rgba(57, 26, 0, 0.3);
    transform: scale(1.1) rotate(-5deg);
}

/* 标题hover效果 */
.step-card h3 {
    transition: all 0.3s ease;
}

.step-card:hover h3 {
    color: rgba(57, 26, 0, 1);
    transform: translateY(-2px);
}

/* 文本hover效果 */
.step-card p {
    transition: all 0.3s ease;
}

.step-card:hover p {
    color: #374151;
    transform: translateY(-1px);
}

/* 灰色卡片特殊效果 */
.step-card.bg-gray-200:hover {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
}

/* 白色卡片特殊效果 */
.step-card.bg-white:hover {
    background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
}

/* CTA按钮增强效果 */
.custom-steps button {
    position: relative;
    overflow: hidden;
    background: linear-gradient(45deg, #059669, #10b981);
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
}

.custom-steps button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
}

.custom-steps button:hover::before {
    width: 300px;
    height: 300px;
}

.custom-steps button:active {
    transform: scale(0.98);
}

/* 弹跳动画 */
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(-180deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.1) rotate(-90deg);
    }
    70% {
        transform: scale(0.9) rotate(-45deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* 卡片组合交互效果 */
.custom-steps:hover .step-card:not(:hover) {
    opacity: 0.7;
    transform: scale(0.98);
}

/* 响应式调整 */
@media (max-width: 768px) {
    .manufacturer-hero {
        min-height: 400px;
        padding: 3rem 0;
    }
    
    .manufacturer-hero h1 {
        font-size: 2.5rem;
    }
    
    .manufacturer-hero p {
        font-size: 1.1rem;
    }
    
    .about-manufacturer h2 {
        font-size: 2rem;
    }
    
    .capability-card {
        padding: 1.5rem;
    }
    
    .capability-card h3 {
        font-size: 1.1rem;
    }
    
    /* 统计卡片移动端调整 */
    .stats-card {
        padding: 1rem;
    }
    
    .stats-card .text-3xl {
        font-size: 1.5rem;
    }
    
    .stats-card .w-12 {
        width: 2.5rem;
        height: 2.5rem;
    }
    
    .stats-card i {
        font-size: 1rem;
    }
    
    /* 定制服务移动端调整 */
    .customize-services h2 {
        font-size: 2rem;
        line-height: 1.2;
    }
    
    .customize-card .p-6 {
        padding: 1rem;
        /* 移动端保持flex布局 */
    }
    
    .customize-card h3 {
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
    }
    
    .customize-card p {
        font-size: 0.9rem;
        margin-bottom: 1rem;
        /* 移动端移除flex居中，使用默认布局 */
        display: block;
        align-items: normal;
    }
    
    .customize-card button {
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
    }
    
    /* 移动端禁用卡片组合效果 - 已删除悬停效果 */
    /*
    .customize-services:hover .customize-card:not(:hover) {
        opacity: 1;
        transform: none;
    }
    */
    
    /* 合作横幅移动端调整 */
    .collaboration-banner {
        min-height: 150px;
        padding: 2rem 0;
    }
    
    .collaboration-banner .w-20 {
        width: 4rem;
        height: 4rem;
    }
    
    .collaboration-banner i {
        font-size: 1.5rem;
    }
    
    .collaboration-banner p {
        font-size: 1rem;
        line-height: 1.5;
    }
    
    .collaboration-banner .flex {
        gap: 1rem;
    }
    
    /* 合作横幅移动端 - 静态样式 */
    .collaboration-banner .absolute {
        display: none;
    }
    
    /* 定制步骤移动端调整 */
    .custom-steps h2 {
        font-size: 2rem;
        line-height: 1.2;
    }
    
    .custom-steps .fas {
        font-size: 2rem;
    }
    
    .step-card {
        padding: 1.5rem;
    }
    
    .step-card .text-6xl {
        font-size: 3rem;
    }
    
    .step-card h3 {
        font-size: 1.25rem;
        margin-bottom: 0.75rem;
    }
    
    .step-card p {
        font-size: 0.9rem;
        line-height: 1.5;
    }
    
    .custom-steps button {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }
    
    /* 移动端禁用复杂交互 */
    .custom-steps:hover .step-card:not(:hover) {
        opacity: 1;
        transform: none;
    }
    
    /* 产品分类移动端调整 */
    .product-categories {
        min-height: 400px;
        padding: 3rem 0;
    }
    
    .product-categories h2 {
        font-size: 2rem;
        line-height: 1.2;
    }
    
    .product-categories p {
        font-size: 1rem;
        line-height: 1.5;
    }
    
    .category-btn button {
        padding: 1rem 0.75rem;
        font-size: 0.8rem;
    }
    
    .category-btn i {
        font-size: 1rem;
        margin-bottom: 0.25rem;
    }
    
    .product-categories .mt-12 button {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }
    
    /* 移动端禁用一些复杂效果 */
    .product-categories:hover .category-btn:not(:hover) button {
        opacity: 1;
        transform: none;
    }
    
    .category-btn:hover button {
        transform: translateY(-2px) scale(1.02);
    }
    
    .product-categories:hover img {
        transform: scale(1.02);
    }
    
    /* 移动端隐藏浮动装饰 */
    .floating-1, .floating-2, .floating-3 {
        display: none;
    }
    
    /* 定制横幅移动端调整 */
    .customize-banner {
        min-height: 300px;
        padding: 3rem 0;
    }
    
    .customize-banner h2 {
        font-size: 2rem;
        line-height: 1.2;
    }
    
    .customize-banner p {
        font-size: 1rem;
        line-height: 1.5;
        margin-bottom: 1.5rem;
    }
    
    .customize-talk-btn, .customize-consult-btn {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }
    
    /* 移动端隐藏定制横幅装饰 */
    .customize-float-1, .customize-float-2, .customize-float-3 {
        display: none;
    }
    
    /* 配方搜索移动端调整 */
    .formula-search {
        padding: 3rem 0;
    }
    
    .formula-search h2 {
        font-size: 2rem;
        line-height: 1.2;
        margin-bottom: 1.5rem;
    }
    
    .formula-search-input {
        padding: 0.75rem 1rem;
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }
    
    .formula-search-btn {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
        width: 100%;
    }
    
    .search-tag {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
        margin: 0.25rem;
    }
    
    /* 移动端搜索框堆叠 */
    .formula-search .flex {
        flex-direction: column;
    }
}

/* 晃动动画 */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
    20%, 40%, 60%, 80% { transform: translateX(2px); }
}

/* Laboratory 页面样式 */
.laboratory-hero {
    position: relative;
    background-attachment: fixed;
    height: 480px;
    min-height: 480px;
}

.laboratory-hero img {
    transition: all 0.5s ease;
}

.laboratory-hero:hover img {
    transform: scale(1.02);
    opacity: 0.5;
}

.laboratory-hero h1 {
    opacity: 0;
    transform: translateY(50px);
    animation: slideInUp 1s ease 0.5s forwards;
}

.laboratory-hero h2 {
    opacity: 0;
    transform: translateY(30px);
    animation: slideInUp 0.8s ease 0.7s forwards;
}

.laboratory-hero p {
    opacity: 0;
    transform: translateY(20px);
    animation: slideInUp 0.8s ease 0.9s forwards;
}

.laboratory-hero .flex {
    opacity: 0;
    transform: translateY(20px);
    animation: slideInUp 0.8s ease 1.1s forwards;
}

.laboratory-hero .scroll-indicator {
    opacity: 0;
    animation: slideInUp 0.8s ease 1.3s forwards;
}

/* 实验室按钮样式 */
.lab-cta-btn {
    position: relative;
    overflow: hidden;
    background: linear-gradient(45deg, #059669, #10b981);
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite 1.5s;
}

.lab-cta-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
}

.lab-cta-btn:hover::before {
    width: 300px;
    height: 300px;
}

.lab-contact-btn {
    transition: all 0.3s ease;
}

.lab-contact-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(255, 255, 255, 0.2);
}

/* About Laboratory 模块 */
.about-laboratory h2 {
    opacity: 0;
    transform: translateY(30px);
    animation: slideInUp 0.8s ease 0.3s forwards;
}

.about-laboratory .grid > div {
    opacity: 0;
    transform: translateY(30px);
    animation: slideInUp 0.8s ease forwards;
}

.about-laboratory .grid > div:nth-child(1) { animation-delay: 0.5s; }
.about-laboratory .grid > div:nth-child(2) { animation-delay: 0.7s; }

/* 视频播放按钮 */
.video-overlay {
    transition: all 0.3s ease;
}

.video-overlay:hover .fas {
    transform: scale(1.1);
}

.video-overlay .w-20 {
    transition: all 0.3s ease;
}

.video-overlay:hover .w-20 {
    transform: scale(1.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Laboratory Services 样式 */
.laboratory-services h2 {
    opacity: 0;
    transform: translateY(30px);
    animation: slideInUp 0.8s ease 0.3s forwards;
}

.service-card {
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(30px);
    animation: slideInUp 0.6s ease forwards;
}

.service-card:nth-child(1) { animation-delay: 0.5s; }
.service-card:nth-child(2) { animation-delay: 0.6s; }
.service-card:nth-child(3) { animation-delay: 0.7s; }
.service-card:nth-child(4) { animation-delay: 0.8s; }

/* 移除实验室页面的服务卡片悬停效果 */

/* 实验室团队展示样式 */
.lab-teams {
    position: relative;
}

.lab-team-card {
    opacity: 0;
    transform: translateY(30px);
    animation: slideInUp 0.8s ease forwards;
}

.lab-team-card:nth-child(1) { animation-delay: 0.3s; }
.lab-team-card:nth-child(2) { animation-delay: 0.5s; }

.lab-team-card img {
    transition: all 0.5s ease;
}

.lab-team-card:hover img {
    filter: brightness(1.1) saturate(1.1);
}

.lab-team-card h3 {
    transition: all 0.3s ease;
}

.lab-team-card:hover h3 {
    color: rgba(57, 26, 0, 1);
    transform: translateY(-2px);
}

/* 图片容器效果 */
.lab-team-card .aspect-\[4\/3\] {
    position: relative;
    transition: all 0.3s ease;
}

.lab-team-card:hover .aspect-\[4\/3\] {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.lab-team-card .aspect-\[4\/3\]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(16, 185, 129, 0.1) 50%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.lab-team-card:hover .aspect-\[4\/3\]::before {
    opacity: 1;
}

/* 私标化妆品横幅样式 */
.private-label-banner {
    position: relative;
    min-height: 400px;
}

.private-label-banner img {
    transition: all 0.5s ease;
}

.private-label-banner:hover img {
    transform: scale(1.02);
    opacity: 0.6;
}

.private-label-banner h2 {
    opacity: 0;
    transform: translateY(30px);
    animation: slideInUp 0.8s ease 0.3s forwards;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.private-label-banner button {
    opacity: 0;
    transform: translateY(20px);
    animation: slideInUp 0.8s ease 0.5s forwards;
}

/* 私标CTA按钮样式 */
.private-label-cta {
    position: relative;
    overflow: hidden;
    background: linear-gradient(45deg, #059669, #10b981);
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite 1s;
}

.private-label-cta::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
}

.private-label-cta:hover::before {
    width: 300px;
    height: 300px;
}

/* 天然成分装饰动画 */
.ingredient-float {
    animation: ingredientFloat 4s ease-in-out infinite;
}

.ingredient-float:nth-child(3) { animation-delay: 0s; }
.ingredient-float:nth-child(4) { animation-delay: 0.8s; }
.ingredient-float:nth-child(5) { animation-delay: 1.6s; }
.ingredient-float:nth-child(6) { animation-delay: 2.4s; }
.ingredient-float:nth-child(7) { animation-delay: 3.2s; }
.ingredient-float:nth-child(8) { animation-delay: 4s; }

@keyframes ingredientFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg) scale(1);
        opacity: 0.6;
    }
    25% {
        transform: translateY(-10px) rotate(90deg) scale(1.1);
        opacity: 0.8;
    }
    50% {
        transform: translateY(-20px) rotate(180deg) scale(1);
        opacity: 1;
    }
    75% {
        transform: translateY(-10px) rotate(270deg) scale(1.1);
        opacity: 0.8;
    }
}

/* 横幅hover整体效果 */
.private-label-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 5;
}

.private-label-banner:hover::before {
    opacity: 1;
}

/* 为什么选择我们模块样式 */
.why-choose-lab {
    position: relative;
}

.why-choose-lab h2 {
    opacity: 0;
    transform: translateY(30px);
    animation: slideInUp 0.8s ease 0.3s forwards;
}

.why-choose-lab > div > div:first-child p {
    opacity: 0;
    transform: translateY(20px);
    animation: slideInUp 0.8s ease 0.5s forwards;
}

/* 图片容器样式 */
.lab-image-container {
    opacity: 0;
    transform: translateX(-30px);
    animation: slideInLeft 0.8s ease 0.7s forwards;
}

.lab-image-container .aspect-\[4\/3\] {
    position: relative;
    transition: all 0.3s ease;
}

.lab-image-container:hover .aspect-\[4\/3\] {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.lab-image-container img {
    transition: all 0.5s ease;
}

.lab-image-container:hover img {
    filter: brightness(1.1) saturate(1.2);
}

/* 特点列表样式 */
.features-list {
    opacity: 0;
    transform: translateX(30px);
    animation: slideInRight 0.8s ease 0.9s forwards;
}

.feature-item {
    opacity: 0;
    transform: translateY(20px);
    animation: slideInUp 0.6s ease forwards;
    transition: all 0.3s ease;
}

.feature-item:nth-child(1) { animation-delay: 1.1s; }
.feature-item:nth-child(2) { animation-delay: 1.3s; }
.feature-item:nth-child(3) { animation-delay: 1.5s; }
.feature-item:nth-child(4) { animation-delay: 1.7s; }
.feature-item:nth-child(5) { animation-delay: 1.9s; }
.feature-item:nth-child(6) { animation-delay: 2.1s; }

.feature-item:hover {
    transform: translateX(10px);
    background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.05), transparent);
    padding: 1rem;
    margin: -1rem;
    border-radius: 8px;
}

/* 特点图标样式 */
.feature-icon {
    transition: all 0.3s ease;
}

.feature-item:hover .feature-icon {
    background: linear-gradient(135deg, #10b981, #059669);
    transform: scale(1.2) rotate(360deg);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.feature-item:hover .feature-icon i {
    color: white;
}

/* Start Project按钮样式 */
.start-project-btn {
    position: relative;
    overflow: hidden;
    background: linear-gradient(45deg, #059669, #10b981);
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite 2.3s;
}

.start-project-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: translateY(-50%);
    transition: left 0.5s ease;
}

.start-project-btn:hover::before {
    left: 100%;
}

/* 左右滑入动画 */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* WhatsApp按钮 */
.whatsapp-btn {
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Laboratory CTA样式 */
.laboratory-cta {
    position: relative;
}

.laboratory-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="labpattern" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23labpattern)"/></svg>');
    pointer-events: none;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .laboratory-hero {
        height: 400px;
        min-height: 400px;
        background-attachment: scroll;
    }
    
    .laboratory-hero h1 {
        font-size: 2.5rem;
        line-height: 1.2;
    }
    
    .laboratory-hero h2 {
        font-size: 1.5rem;
        line-height: 1.3;
    }
    
    .laboratory-hero p {
        font-size: 1rem;
        line-height: 1.5;
    }
    
    .about-laboratory h2 {
        font-size: 2rem;
    }
    
    .service-card {
        padding: 1.5rem;
    }
    
    .service-card h3 {
        font-size: 1.1rem;
    }
    
    .service-card p {
        font-size: 0.9rem;
    }
    
    /* 实验室团队移动端调整 */
    .lab-team-card h3 {
        font-size: 1.1rem;
        line-height: 1.3;
    }
    
    .lab-team-card .aspect-\[4\/3\] {
        margin-bottom: 1rem;
    }
    
    /* 私标横幅移动端调整 */
    .private-label-banner {
        min-height: 300px;
        padding: 3rem 0;
    }
    
    .private-label-banner h2 {
        font-size: 2rem;
        line-height: 1.2;
        margin-bottom: 1.5rem;
    }
    
    .private-label-cta {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }
    
    /* 移动端隐藏天然成分装饰 */
    .ingredient-float {
        display: none;
    }
    
    /* Why Choose Lab移动端调整 */
    .why-choose-lab h2 {
        font-size: 2.2rem;
        line-height: 1.2;
        margin-bottom: 1.5rem;
    }
    
    .why-choose-lab .text-center p {
        font-size: 1rem;
        margin-bottom: 2rem;
    }
    
    .why-choose-lab .grid {
        gap: 2rem;
    }
    
    .feature-item {
        padding: 0.5rem 0;
    }
    
    .feature-item p {
        font-size: 0.95rem;
        line-height: 1.5;
    }
    
    .start-project-btn {
        width: 100%;
        padding: 1rem 2rem;
        font-size: 1rem;
    }
    
    /* 证书模块移动端调整 */
    .certificates h2 {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }
    
    .certificates-carousel {
        margin: 0 -1rem;
    }
    
    .certificate-slide {
        padding: 0 1rem;
    }
    
    .certificate-card .aspect-\[3\/4\] div {
        padding: 1.5rem;
    }
    
    .certificate-card h4 {
        font-size: 1.2rem;
    }
    
    .certificate-card h5 {
        font-size: 1rem;
    }
    
    .certificate-card .text-sm {
        font-size: 0.8rem;
    }
    
    .certificate-card .p-6 {
        padding: 1rem;
    }
    
    .certificate-card h3 {
        font-size: 1.1rem;
    }
    
    /* 移动端隐藏轮播控制按钮 */
    .carousel-prev,
    .carousel-next {
        display: none;
    }
}

/* 产品分类模块样式 */
.product-categories {
    position: relative;
    min-height: 600px;
}

.product-categories img {
    transition: all 0.5s ease;
}

.product-categories:hover img {
    transform: scale(1.05);
    opacity: 0.3;
}

.product-categories h2 {
    opacity: 0;
    transform: translateY(30px);
    animation: slideInUp 0.8s ease 0.3s forwards;
}

.product-categories p {
    opacity: 0;
    transform: translateY(20px);
    animation: slideInUp 0.8s ease 0.5s forwards;
}

/* 装饰线和脉冲点 */
.pulse-dot {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* 分类按钮样式 */
.category-btn {
    opacity: 0;
    transform: translateY(30px);
    animation: slideInUp 0.6s ease forwards;
}

.category-btn:nth-child(1) { animation-delay: 0.7s; }
.category-btn:nth-child(2) { animation-delay: 0.8s; }
.category-btn:nth-child(3) { animation-delay: 0.9s; }
.category-btn:nth-child(4) { animation-delay: 1.0s; }
.category-btn:nth-child(5) { animation-delay: 1.1s; }
.category-btn:nth-child(6) { animation-delay: 1.2s; }
.category-btn:nth-child(7) { animation-delay: 1.3s; }
.category-btn:nth-child(8) { animation-delay: 1.4s; }

.category-btn button {
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.category-btn button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.category-btn button:hover::before {
    left: 100%;
}

/* 图标特殊效果 */
.category-btn i {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.category-btn button:hover i {
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
}

/* CTA按钮样式 */
.product-categories .mt-12 button {
    opacity: 0;
    transform: translateY(30px);
    animation: slideInUp 0.8s ease 1.5s forwards;
    position: relative;
    overflow: hidden;
    background: linear-gradient(45deg, #059669, #10b981);
    background-size: 200% 200%;
    animation: slideInUp 0.8s ease 1.5s forwards, gradientShift 3s ease infinite 2.3s;
}

.product-categories .mt-12 button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
}

.product-categories .mt-12 button:hover::before {
    width: 300px;
    height: 300px;
}

/* 浮动装饰元素 */
.floating-1 {
    animation: float 4s ease-in-out infinite;
}

.floating-2 {
    animation: float 5s ease-in-out infinite reverse;
}

.floating-3 {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.3;
    }
    25% {
        transform: translateY(-10px) rotate(90deg);
        opacity: 0.5;
    }
    50% {
        transform: translateY(-20px) rotate(180deg);
        opacity: 0.7;
    }
    75% {
        transform: translateY(-10px) rotate(270deg);
        opacity: 0.5;
    }
}

/* 按钮组合交互效果 */
.product-categories:hover .category-btn:not(:hover) button {
    opacity: 0.6;
    transform: scale(0.95);
}

.category-btn:hover button {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

/* 视差背景效果 */
.product-categories::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 70%, rgba(16, 185, 129, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 70% 30%, rgba(5, 150, 105, 0.1) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 5;
}

.product-categories:hover::before {
    opacity: 1;
}

/* 定制服务横幅样式 */
.customize-banner {
    position: relative;
    min-height: 400px;
}

.customize-banner img {
    transition: all 0.5s ease;
}

.customize-banner:hover img {
    transform: scale(1.05);
    opacity: 0.5;
}

.customize-banner h2 {
    opacity: 0;
    transform: translateY(30px);
    animation: slideInUp 0.8s ease 0.3s forwards;
}

.customize-banner p {
    opacity: 0;
    transform: translateY(20px);
    animation: slideInUp 0.8s ease 0.5s forwards;
}

.customize-banner .flex {
    opacity: 0;
    transform: translateY(20px);
    animation: slideInUp 0.8s ease 0.7s forwards;
}

/* 定制横幅按钮样式 */
.customize-talk-btn {
    position: relative;
    overflow: hidden;
}

.customize-talk-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.2), transparent);
    transition: left 0.5s ease;
}

.customize-talk-btn:hover::before {
    left: 100%;
}

.customize-consult-btn {
    position: relative;
    transition: all 0.3s ease;
}

.customize-consult-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

/* 定制横幅浮动元素 */
.customize-float-1 {
    animation: customizeFloat1 5s ease-in-out infinite;
}

.customize-float-2 {
    animation: customizeFloat2 6s ease-in-out infinite reverse;
}

.customize-float-3 {
    animation: customizeFloat3 4s ease-in-out infinite;
}

@keyframes customizeFloat1 {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.3;
    }
    50% {
        transform: translateY(-15px) scale(1.1);
        opacity: 0.6;
    }
}

@keyframes customizeFloat2 {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.4;
    }
    50% {
        transform: translateY(-20px) rotate(180deg);
        opacity: 0.7;
    }
}

@keyframes customizeFloat3 {
    0%, 100% {
        transform: translateX(0) scale(1);
        opacity: 0.2;
    }
    50% {
        transform: translateX(10px) scale(1.2);
        opacity: 0.5;
    }
}

/* 配方搜索模块样式 */
.formula-search h2 {
    opacity: 0;
    transform: translateY(30px);
    animation: slideInUp 0.8s ease 0.3s forwards;
}

.formula-search .max-w-2xl {
    opacity: 0;
    transform: translateY(20px);
    animation: slideInUp 0.8s ease 0.5s forwards;
}

/* 搜索输入框样式 */
.formula-search-input {
    transition: all 0.3s ease;
}

.formula-search-input:focus {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.2);
}

.formula-search-input::placeholder {
    color: #9ca3af;
    transition: color 0.3s ease;
}

.formula-search-input:focus::placeholder {
    color: rgba(57, 26, 0, 0.8);
}

/* 搜索按钮样式 */
.formula-search-btn {
    position: relative;
    overflow: hidden;
    background: linear-gradient(45deg, #374151, #1f2937);
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
}

.formula-search-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
}

.formula-search-btn:hover::before {
    width: 300px;
    height: 300px;
}

/* 搜索标签样式 */
.search-tag {
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(10px);
    animation: slideInUp 0.4s ease forwards;
}

.search-tag:nth-child(1) { animation-delay: 0.8s; }
.search-tag:nth-child(2) { animation-delay: 0.9s; }
.search-tag:nth-child(3) { animation-delay: 1.0s; }
.search-tag:nth-child(4) { animation-delay: 1.1s; }
.search-tag:nth-child(5) { animation-delay: 1.2s; }
.search-tag:nth-child(6) { animation-delay: 1.3s; }

.search-tag:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(16, 185, 129, 0.2);
}

/* 证书展示模块样式 */
.certificates {
    position: relative;
}

.certificates h2 {
    opacity: 0;
    transform: translateY(30px);
    animation: slideInUp 0.8s ease 0.3s forwards;
}

/* 证书轮播样式 */
.certificates-carousel {
    max-width: 1200px;
    margin: 0 auto;
}

.certificate-slide {
    transition: all 0.3s ease;
}

.certificate-card {
    transition: all 0.3s ease;
    height: 100%;
    opacity: 0;
    transform: translateY(30px);
    animation: slideInUp 0.8s ease forwards;
    position: relative;
}

.certificate-slide:nth-child(1) .certificate-card { animation-delay: 0.5s; }
.certificate-slide:nth-child(2) .certificate-card { animation-delay: 0.7s; }
.certificate-slide:nth-child(3) .certificate-card { animation-delay: 0.9s; }
.certificate-slide:nth-child(4) .certificate-card { animation-delay: 1.1s; }
.certificate-slide:nth-child(5) .certificate-card { animation-delay: 1.3s; }
.certificate-slide:nth-child(6) .certificate-card { animation-delay: 1.5s; }

.certificate-card:hover {
    transform: translateY(-10px) scale(1.02);
}

/* 证书内容样式 */
.certificate-card .aspect-\[3\/4\] {
    position: relative;
    overflow: hidden;
}

.certificate-card .aspect-\[3\/4\]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 5;
}

.certificate-card:hover .aspect-\[3\/4\]::before {
    opacity: 1;
}

/* 轮播控制按钮样式 */
.carousel-prev,
.carousel-next {
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

.carousel-prev:hover,
.carousel-next:hover {
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.carousel-prev:active,
.carousel-next:active {
    transform: translateY(-50%) scale(0.95);
}

/* 轮播指示器样式 */
.carousel-indicators .indicator {
    cursor: pointer;
    transition: all 0.3s ease;
}

.carousel-indicators .indicator:hover {
    transform: scale(1.3);
}

.carousel-indicators .indicator.active {
    background: rgba(57, 26, 0, 0.8);
    transform: scale(1.2);
}

/* 证书内容动画 */
.certificate-card i {
    transition: all 0.3s ease;
}

.certificate-card:hover i {
    transform: scale(1.2) rotate(5deg);
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* 证书边框效果 */
.certificate-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, #10b981, #059669, #10b981);
    opacity: 0;
    z-index: -1;
    border-radius: 8px;
    transition: opacity 0.3s ease;
    transform: scale(1.02);
}

.certificate-card:hover::before {
    opacity: 0.1;
}

/* FAQ Section 样式修复 */
.faq-section .contact-form-container,
.faq-section .faq-list,
.faq-section .faq-item {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

/* FAQ模块确保可见性 */
.faq-section {
    opacity: 1;
    visibility: visible;
}

/* FAQ简化样式 - 移除复杂动画 */
.faq-content.hidden {
    display: none;
}

.faq-content:not(.hidden) {
    display: block;
}

/* FAQ图标旋转 */
.faq-toggle .fa-chevron-down {
    transition: transform 0.3s ease;
}

.faq-item.active .faq-toggle .fa-chevron-down {
    transform: rotate(180deg);
}

/* FAQ基础交互样式 */
.faq-toggle {
    cursor: pointer;
}

.faq-toggle:hover {
    background-color: rgba(209, 213, 219, 0.5);
}

.faq-item.active {
    background-color: #f3f4f6;
}

/* 导航下拉菜单样式 */
.dropdown-menu {
    transform: translateY(-10px);
    transition: all 0.3s ease;
    pointer-events: none;
}

.group:hover .dropdown-menu {
    transform: translateY(0);
    pointer-events: auto;
}

/* 下拉菜单背景色定义 */
.bg-brown-50 {
    background-color: #efebe9;
}

/* 导航组hover效果 */
.group:hover > a i {
    transform: rotate(180deg);
}

.group > a i {
    transition: transform 0.2s ease;
}

/* 下拉菜单阴影增强 */
.group:hover .dropdown-menu {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Products 页面样式 */
.product-card {
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    border-color: rgba(16, 185, 129, 0.2);
}

.product-card img {
    transition: all 0.3s ease;
}

.product-card button {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.product-card button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}

.product-card:hover button::before {
    width: 200px;
    height: 200px;
}

/* 产品分类侧边栏样式 */
.product-categories-sidebar a {
    transition: all 0.3s ease;
    position: relative;
}

.product-categories-sidebar a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: linear-gradient(90deg, #10b981, transparent);
    transition: width 0.3s ease;
    border-radius: 0 4px 4px 0;
}

.product-categories-sidebar a:hover::before {
    width: 4px;
}

/* 文字截断样式 */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 产品网格动画 */
.product-card {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease forwards;
}

.product-card:nth-child(4n+1) { animation-delay: 0.1s; }
.product-card:nth-child(4n+2) { animation-delay: 0.2s; }
.product-card:nth-child(4n+3) { animation-delay: 0.3s; }
.product-card:nth-child(4n+4) { animation-delay: 0.4s; }

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 分页样式 */
.pagination button {
    transition: all 0.3s ease;
}

.pagination button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 产品网格布局 - 每行4个商品 */
.product-grid-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: flex-start;
}

/* 产品卡片尺寸 */
.product-card {
    width: 260px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.product-card .relative {
    width: 260px;
    height: 260px;
    flex-shrink: 0;
}

/* 响应式调整 */
@media (max-width: 1200px) {
    .product-grid-container {
        gap: 1.5rem;
    }
}

@media (max-width: 1024px) {
    .product-grid-container {
        gap: 1rem;
        justify-content: space-between;
    }
}

@media (max-width: 768px) {
    .product-grid-container {
        gap: 0.75rem;
        justify-content: space-between;
    }
    
    .product-categories-sidebar {
        margin-bottom: 2rem;
    }
}

@media (max-width: 580px) {
    .product-grid-container {
        gap: 1rem;
        justify-content: center;
    }
    
    .product-card {
        width: 260px;
    }
}

@media (max-width: 300px) {
    .product-card {
        width: 100%;
        max-width: 260px;
    }
    
    .product-card .relative {
        width: 100%;
        max-width: 260px;
    }
}

/* 商品详情页面样式 */
.product-detail-image {
    transition: all 0.3s ease;
}

.thumbnail-image {
    transition: all 0.2s ease;
    cursor: pointer;
}

.thumbnail-image:hover {
    opacity: 0.8;
}

/* WhatsApp浮动按钮动画 */
@keyframes whatsapp-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.whatsapp-float {
    animation: whatsapp-pulse 2s infinite;
}

/* 产品详情页面网格优化 */
@media (max-width: 1024px) {
    .product-detail-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* 缩略图响应式 */
@media (max-width: 768px) {
    .thumbnail-container {
        justify-content: center;
        gap: 0.5rem;
    }
    
    .thumbnail-image {
        width: calc(18% - 4px) !important;
        min-width: 60px;
    }
}

/* 新闻页面样式 */
.news-card {
    transition: all 0.3s ease !important;
    min-height: 400px !important;
    display: flex !important;
    flex-direction: column !important;
    background-color: white !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
    overflow: hidden !important;
}

.news-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.15) !important;
}

.news-card img {
    transition: transform 0.3s ease !important;
    width: 100% !important;
    height: 12rem !important;
    object-fit: cover !important;
}

.news-card:hover img {
    transform: scale(1.05) !important;
}

/* 新闻网格确保显示 */
.news-grid {
    display: grid !important;
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 2rem !important;
}

@media (min-width: 768px) {
    .news-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (min-width: 1024px) {
    .news-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* 联系我们页面样式 */
.contact-form {
    transition: all 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: rgba(57, 26, 0, 0.8) !important;
    box-shadow: 0 0 0 3px rgba(57, 26, 0, 0.1) !important;
}

.contact-form button {
    transition: all 0.3s ease;
}

.contact-form button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(5, 150, 105, 0.3);
}

.contact-info-item {
    transition: all 0.3s ease;
}

.contact-info-item:hover {
    transform: translateX(5px);
}

.contact-info-item:hover .contact-icon {
    background-color: rgba(57, 26, 0, 0.8) !important;
    color: white !important;
}

/* 一站式服务页面样式 */
.service-card {
    transition: all 0.3s ease;
}

/* 移除一站式服务页面的悬停效果 */

/* 流程步骤动画 */
.process-step {
    transition: all 0.3s ease;
}

.process-step:hover {
    transform: scale(1.05);
}

/* CTA按钮特效 */
.cta-button {
    position: relative;
    overflow: hidden;
}

.cta-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}

.cta-button:hover::before {
    width: 300%;
    height: 300%;
}

/* 新闻详情页面样式 */
.prose {
    color: #374151;
    line-height: 1.75;
}

.prose h2 {
    color: #111827;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.prose p {
    margin-bottom: 1.5rem;
}

.prose ul {
    margin-bottom: 1.5rem;
}

.prose blockquote {
    font-style: italic;
    border-left: 4px solid rgba(57, 26, 0, 0.8);
    padding-left: 1.5rem;
    margin: 2rem 0;
    background-color: #f9fafb;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
}

@media (max-width: 480px) {
    .thumbnail-image {
        width: calc(16% - 4px) !important;
        min-width: 50px;
    }
}

/* 选项卡样式 */
.tab-button {
    transition: all 0.2s ease;
    position: relative;
}

.tab-button:hover {
    color: rgba(57, 26, 0, 1);
}

.tab-button.active {
    color: rgba(57, 26, 0, 1);
    border-color: rgba(57, 26, 0, 1);
}

.tab-content {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 产品详情表格样式 */
.tab-content table td {
    padding: 0.75rem 0;
}

.tab-content table tr:hover {
    background-color: #f9fafb;
}

/* 轮播图容器样式 */
.carousel-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* 轮播图样式 */
.carousel-slide {
    transition: opacity 0.6s ease-in-out;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

/* 默认显示第一张图片 */
#carousel-1:checked ~ .carousel-container .slide-1 {
    opacity: 1;
    z-index: 2;
}

#carousel-2:checked ~ .carousel-container .slide-2 {
    opacity: 1;
    z-index: 2;
}

#carousel-3:checked ~ .carousel-container .slide-3 {
    opacity: 1;
    z-index: 2;
}

/* 轮播指示器样式 */
.carousel-indicator {
    transition: all 0.3s ease;
    cursor: pointer;
}

.carousel-indicator:hover {
    opacity: 0.8 !important;
    transform: scale(1.2);
}

/* 当对应的radio被选中时，指示器变为激活状态 */
#carousel-1:checked ~ .carousel-indicators label:nth-child(1),
#carousel-2:checked ~ .carousel-indicators label:nth-child(2),
#carousel-3:checked ~ .carousel-indicators label:nth-child(3) {
    opacity: 1 !important;
    background-color: rgba(57, 26, 0, 0.8);
    transform: scale(1.2);
}

/* 轮播箭头样式 - 静态版本 */
.carousel-arrow {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* 默认隐藏所有箭头 */
.carousel-nav-left .carousel-arrow,
.carousel-nav-right .carousel-arrow {
    display: none;
}

/* 根据当前选中的radio显示对应的箭头 */
#carousel-1:checked ~ .carousel-nav-left .carousel-1-prev,
#carousel-1:checked ~ .carousel-nav-right .carousel-1-next {
    display: flex;
}

#carousel-2:checked ~ .carousel-nav-left .carousel-2-prev,
#carousel-2:checked ~ .carousel-nav-right .carousel-2-next {
    display: flex;
}

#carousel-3:checked ~ .carousel-nav-left .carousel-3-prev,
#carousel-3:checked ~ .carousel-nav-right .carousel-3-next {
    display: flex;
}

/* 自定义配色 - 将绿色替换为深棕色 rgba(57, 26, 0) */
.bg-green-100 { background-color: rgba(57, 26, 0, 0.1) !important; }
.bg-green-200 { background-color: rgba(57, 26, 0, 0.2) !important; }
.bg-green-300 { background-color: rgba(57, 26, 0, 0.3) !important; }
.bg-green-400 { background-color: rgba(57, 26, 0, 0.4) !important; }
.bg-green-500 { background-color: rgba(57, 26, 0, 0.6) !important; }
.bg-green-600 { background-color: rgba(57, 26, 0, 0.8) !important; }
.bg-green-700 { background-color: rgba(57, 26, 0, 1) !important; }
.bg-green-800 { background-color: rgba(45, 20, 0, 1) !important; }

.text-green-100 { color: rgba(57, 26, 0, 0.1) !important; }
.text-green-200 { color: rgba(57, 26, 0, 0.2) !important; }
.text-green-300 { color: rgba(57, 26, 0, 0.3) !important; }
.text-green-400 { color: rgba(57, 26, 0, 0.4) !important; }
.text-green-500 { color: rgba(57, 26, 0, 0.8) !important; }
.text-green-600 { color: rgba(57, 26, 0, 1) !important; }
.text-green-700 { color: rgba(45, 20, 0, 1) !important; }
.text-green-800 { color: rgba(35, 15, 0, 1) !important; }

.border-green-100 { border-color: rgba(57, 26, 0, 0.1) !important; }
.border-green-200 { border-color: rgba(57, 26, 0, 0.2) !important; }
.border-green-300 { border-color: rgba(57, 26, 0, 0.3) !important; }
.border-green-400 { border-color: rgba(57, 26, 0, 0.4) !important; }
.border-green-500 { border-color: rgba(57, 26, 0, 0.6) !important; }
.border-green-600 { border-color: rgba(57, 26, 0, 0.8) !important; }
.border-green-700 { border-color: rgba(57, 26, 0, 1) !important; }

.hover\:bg-green-100:hover { background-color: rgba(57, 26, 0, 0.1) !important; }
.hover\:bg-green-200:hover { background-color: rgba(57, 26, 0, 0.2) !important; }
.hover\:bg-green-300:hover { background-color: rgba(57, 26, 0, 0.3) !important; }
.hover\:bg-green-400:hover { background-color: rgba(57, 26, 0, 0.4) !important; }
.hover\:bg-green-500:hover { background-color: rgba(57, 26, 0, 0.6) !important; }
.hover\:bg-green-600:hover { background-color: rgba(57, 26, 0, 0.8) !important; }
.hover\:bg-green-700:hover { background-color: rgba(57, 26, 0, 1) !important; }

.hover\:text-green-100:hover { color: rgba(57, 26, 0, 0.1) !important; }
.hover\:text-green-200:hover { color: rgba(57, 26, 0, 0.2) !important; }
.hover\:text-green-300:hover { color: rgba(57, 26, 0, 0.3) !important; }
.hover\:text-green-400:hover { color: rgba(57, 26, 0, 0.4) !important; }
.hover\:text-green-500:hover { color: rgba(57, 26, 0, 0.8) !important; }
.hover\:text-green-600:hover { color: rgba(57, 26, 0, 1) !important; }
.hover\:text-green-700:hover { color: rgba(45, 20, 0, 1) !important; }

.focus\:ring-green-500:focus { --tw-ring-color: rgba(57, 26, 0, 0.6) !important; }
.focus\:border-green-500:focus { border-color: rgba(57, 26, 0, 0.6) !important; }

.group-hover\:bg-green-500:hover { background-color: rgba(57, 26, 0, 0.6) !important; }
.group-hover\:text-green-600:hover { color: rgba(57, 26, 0, 0.8) !important; }

/* 替换CSS中硬编码的绿色十六进制值 */
/* 将所有 #10b981, #059669, #047857, #34d399, #6ee7b7, #16a34a 等绿色值替换为深棕色 */

/* 覆盖所有绿色十六进制值 */
* {
    /* 替换所有可能的绿色值 */
}

/* 特定选择器的颜色替换 - 删除customize-card悬停效果 */
.service-card h3:hover,
.cooperation-card h3:hover,
.step-card h3:hover,
.feature-item:hover h3,
.lab-team-card h3:hover,
.news-card h3:hover {
    color: rgba(57, 26, 0, 1) !important;
}

/* 背景渐变替换 - 删除customize-card相关 */
.step-card::before,
.lab-cta-btn,
.private-label-cta,
.start-project-btn,
.cta-button,
.product-categories .mt-12 button {
    background: linear-gradient(45deg, rgba(57, 26, 0, 0.8), rgba(57, 26, 0, 1)) !important;
}

/* 阴影颜色替换 */
.stats-card:hover,
.cooperation-card:hover,
.feature-item:hover .feature-icon {
    box-shadow: 0 20px 40px rgba(57, 26, 0, 0.1) !important;
}

/* 边框颜色替换 */
.cooperation-card:hover,
.category-card:hover {
    border-color: rgba(57, 26, 0, 0.2) !important;
}

/* 额外的悬停效果覆盖 */
.hover\:text-green-300:hover { color: rgba(57, 26, 0, 0.3) !important; }
.hover\:text-green-800:hover { color: rgba(35, 15, 0, 1) !important; }

.group-hover\:bg-green-500:hover { background-color: rgba(57, 26, 0, 0.6) !important; }
.group-hover\:text-green-600:hover { color: rgba(57, 26, 0, 0.8) !important; }
.group-hover\:text-green-700:hover { color: rgba(45, 20, 0, 1) !important; }

.group-hover\:from-green-500:hover { --tw-gradient-from: rgba(57, 26, 0, 0.6) !important; }
.group-hover\:to-green-600:hover { --tw-gradient-to: rgba(57, 26, 0, 0.8) !important; }

/* WhatsApp按钮特殊处理 */
.whatsapp-float.bg-green-500 { background-color: rgba(57, 26, 0, 0.6) !important; }
.whatsapp-float.hover\:bg-green-600:hover { background-color: rgba(57, 26, 0, 0.8) !important; }

/* 产品卡片悬停效果 */
.group-hover\:text-green-600 { color: rgba(57, 26, 0, 0.8) !important; }
.hover\:bg-green-600:hover { background-color: rgba(57, 26, 0, 0.8) !important; }

/* 标签悬停效果 */
.hover\:bg-green-100:hover { background-color: rgba(57, 26, 0, 0.1) !important; }
.hover\:text-green-700:hover { color: rgba(45, 20, 0, 1) !important; }

/* 通用绿色覆盖规则 - 覆盖所有可能遗漏的绿色样式 */
*[class*="green"] {
    /* 这个规则会被更具体的规则覆盖，但作为后备 */
}

/* 特定的硬编码绿色值覆盖 */
.review-indicator.active { background-color: rgba(57, 26, 0, 0.8) !important; }
.carousel-indicators .indicator.active { background: rgba(57, 26, 0, 0.8) !important; }

/* 渐变背景覆盖 */
*[style*="#10b981"], *[style*="#059669"], *[style*="#34d399"], *[style*="#6ee7b7"] {
    background: linear-gradient(45deg, rgba(57, 26, 0, 0.8), rgba(57, 26, 0, 1)) !important;
}

/* 文字颜色覆盖 */
*[style*="color: #10b981"], *[style*="color: #059669"], *[style*="color: #16a34a"] {
    color: rgba(57, 26, 0, 1) !important;
}

/* 边框颜色覆盖 */
*[style*="border-color: #059669"], *[style*="border: 4px solid #059669"] {
    border-color: rgba(57, 26, 0, 0.8) !important;
}

/* JavaScript动态添加的绿色类覆盖 */
.bg-green-500.transition-all { background-color: rgba(57, 26, 0, 0.6) !important; }
.indicator-dot.bg-green-500 { background-color: rgba(57, 26, 0, 0.6) !important; }

/* JavaScript中动态设置的样式覆盖 */
*[style*="background-color: #10b981"], 
*[style*="background-color: #10B981"],
*[style*="backgroundColor: '#10b981'"],
*[style*="backgroundColor: '#10B981'"] {
    background-color: rgba(57, 26, 0, 0.8) !important;
}

*[style*="color: #10b981"],
*[style*="color: #10B981"] {
    color: rgba(57, 26, 0, 1) !important;
}

/* 通知系统绿色覆盖 */
.bg-green-500.text-white {
    background-color: rgba(57, 26, 0, 0.8) !important;
}

/* 模态框中的绿色元素覆盖 */
.bg-green-100.rounded-full {
    background-color: rgba(57, 26, 0, 0.1) !important;
}

.text-green-600 {
    color: rgba(57, 26, 0, 0.8) !important;
}

.bg-green-600.text-white {
    background-color: rgba(57, 26, 0, 0.8) !important;
}

.hover\:bg-green-700:hover {
    background-color: rgba(57, 26, 0, 1) !important;
}

/* 动态添加的类名覆盖 */
.bg-green-700 {
    background-color: rgba(57, 26, 0, 1) !important;
}

/* 特定深色背景元素的白色文字 */
.stats-card.bg-green-600,
.hero-button.bg-green-700,
.lab-cta-btn.bg-green-600,
.private-label-cta.bg-green-600,
.start-project-btn.bg-green-600,
.download-catalog-btn.bg-green-600,
.whatsapp-float.bg-green-500,
.whatsapp-btn.bg-green-500,
button.bg-green-500,
button.bg-green-600,
button.bg-green-700,
.laboratory-cta.bg-green-600 {
    color: white !important;
}

/* 确保按钮内的所有元素都是白色 */
.stats-card.bg-green-600 *,
.hero-button.bg-green-700 *,
.lab-cta-btn.bg-green-600 *,
.private-label-cta.bg-green-600 *,
.start-project-btn.bg-green-600 *,
.download-catalog-btn.bg-green-600 *,
.whatsapp-float.bg-green-500 *,
.whatsapp-btn.bg-green-500 *,
button.bg-green-500 *,
button.bg-green-600 *,
button.bg-green-700 *,
.laboratory-cta.bg-green-600 * {
    color: white !important;
}

/* 标签和徽章的白色文字 */
span.bg-green-500,
span.bg-green-600,
.bg-green-500.text-white,
.bg-green-600.text-white {
    color: white !important;
}

/* 浅色背景的深色文字 */
.bg-green-100, .bg-green-200, .bg-green-300 {
    color: rgba(57, 26, 0, 1) !important;
}

.bg-green-100 *, .bg-green-200 *, .bg-green-300 * {
    color: rgba(57, 26, 0, 1) !important;
}

/* 悬停状态从浅色变为深色时的文字颜色变化 */
.hover\:bg-green-500:hover,
.group-hover\:bg-green-500:hover,
.step-icon.hover\:bg-green-500:hover,
.bg-green-100.group-hover\:bg-green-500:hover {
    color: white !important;
}

.hover\:bg-green-500:hover *,
.group-hover\:bg-green-500:hover *,
.step-icon.hover\:bg-green-500:hover *,
.bg-green-100.group-hover\:bg-green-500:hover * {
    color: white !important;
}

/* 修复CUSTOM COSMETIC STEPS步骤卡片的悬停文字颜色 */
/* 当步骤卡片悬停时，由于::before伪元素显示深棕色背景，文字应该变为白色 */
.step-card:hover .text-green-600,
.step-card:hover .text-green-700,
.step-card:hover h3 {
    color: white !important;
}

.step-card:hover .text-gray-700,
.step-card:hover p {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* 步骤编号在悬停时也应该是白色 */
.step-card:hover .text-6xl {
    color: white !important;
}

/* 确保所有步骤卡片悬停时的文字都是白色 */
.step-card:hover * {
    color: white !important;
}

/* 图标在悬停时的颜色变化 */
.step-icon.hover\:text-white:hover,
.group-hover\:text-white:hover {
    color: white !important;
}

/* Products页面READ MORE按钮悬停时的文字颜色 */
.bg-gray-600.hover\:bg-green-600:hover,
button.bg-gray-600.hover\:bg-green-600:hover,
a.bg-gray-600.hover\:bg-green-600:hover {
    color: white !important;
}

.bg-gray-600.hover\:bg-green-600:hover *,
button.bg-gray-600.hover\:bg-green-600:hover *,
a.bg-gray-600.hover\:bg-green-600:hover * {
    color: white !important;
}

/* 确保所有产品卡片的READ MORE按钮文字颜色正确 */
.product-card .bg-gray-600.hover\:bg-green-600 {
    color: white !important;
}

.product-card .bg-gray-600.hover\:bg-green-600:hover {
    color: white !important;
}

/* News页面Read More按钮和标签 - 覆盖内联样式 */
a[style*="background-color: #059669"],
span[style*="background-color: #059669"] {
    background-color: rgba(57, 26, 0, 0.8) !important;
    color: white !important;
}

a[style*="background-color: #059669"]:hover,
span[style*="background-color: #059669"]:hover {
    background-color: rgba(57, 26, 0, 1) !important;
    color: white !important;
}

/* 覆盖所有可能的绿色内联样式 */
*[style*="background-color: #10b981"],
*[style*="background-color: #10B981"] {
    background-color: rgba(57, 26, 0, 0.8) !important;
    color: white !important;
}

*[style*="background-color: #10b981"]:hover,
*[style*="background-color: #10B981"]:hover {
    background-color: rgba(57, 26, 0, 1) !important;
    color: white !important;
}

/* 修复绿色边框 - Manufacturer页面CUSTOM COSMETIC STEPS */
.hover\:border-green-300:hover {
    border-color: rgba(57, 26, 0, 0.3) !important;
}

.hover\:border-green-500:hover {
    border-color: rgba(57, 26, 0, 0.6) !important;
}

.focus\:border-green-500:focus {
    border-color: rgba(57, 26, 0, 0.6) !important;
}

.focus\:ring-green-500:focus {
    --tw-ring-color: rgba(57, 26, 0, 0.6) !important;
}

/* 覆盖所有绿色边框类 */
.border-green-100 { border-color: rgba(57, 26, 0, 0.1) !important; }
.border-green-200 { border-color: rgba(57, 26, 0, 0.2) !important; }
.border-green-300 { border-color: rgba(57, 26, 0, 0.3) !important; }
.border-green-400 { border-color: rgba(57, 26, 0, 0.4) !important; }
.border-green-500 { border-color: rgba(57, 26, 0, 0.6) !important; }
.border-green-600 { border-color: rgba(57, 26, 0, 0.8) !important; }
.border-green-700 { border-color: rgba(57, 26, 0, 1) !important; }

/* 悬停状态的边框颜色 */
.hover\:border-green-100:hover { border-color: rgba(57, 26, 0, 0.1) !important; }
.hover\:border-green-200:hover { border-color: rgba(57, 26, 0, 0.2) !important; }
.hover\:border-green-400:hover { border-color: rgba(57, 26, 0, 0.4) !important; }
.hover\:border-green-600:hover { border-color: rgba(57, 26, 0, 0.8) !important; }
.hover\:border-green-700:hover { border-color: rgba(57, 26, 0, 1) !important; }

/* 焦点状态的边框和环形颜色 */
.focus\:ring-green-100:focus { --tw-ring-color: rgba(57, 26, 0, 0.1) !important; }
.focus\:ring-green-200:focus { --tw-ring-color: rgba(57, 26, 0, 0.2) !important; }
.focus\:ring-green-300:focus { --tw-ring-color: rgba(57, 26, 0, 0.3) !important; }
.focus\:ring-green-400:focus { --tw-ring-color: rgba(57, 26, 0, 0.4) !important; }
.focus\:ring-green-600:focus { --tw-ring-color: rgba(57, 26, 0, 0.8) !important; }
.focus\:ring-green-700:focus { --tw-ring-color: rgba(57, 26, 0, 1) !important; }

.focus\:border-green-100:focus { border-color: rgba(57, 26, 0, 0.1) !important; }
.focus\:border-green-200:focus { border-color: rgba(57, 26, 0, 0.2) !important; }
.focus\:border-green-300:focus { border-color: rgba(57, 26, 0, 0.3) !important; }
.focus\:border-green-400:focus { border-color: rgba(57, 26, 0, 0.4) !important; }
.focus\:border-green-600:focus { border-color: rgba(57, 26, 0, 0.8) !important; }
.focus\:border-green-700:focus { border-color: rgba(57, 26, 0, 1) !important; }

/* 特定元素的边框修复 */
/* Product detail页面的缩略图边框 */
.thumbnail-image.border-green-500,
button.border-green-500 {
    border-color: rgba(57, 26, 0, 0.6) !important;
}

/* Tab按钮的底部边框 */
.tab-button.border-green-600 {
    border-color: rgba(57, 26, 0, 0.8) !important;
}

/* News detail页面的引用边框 */
blockquote.border-green-600 {
    border-color: rgba(57, 26, 0, 0.8) !important;
}

/* 左边框样式 */
.border-l-4.border-green-600 {
    border-left-color: rgba(57, 26, 0, 0.8) !important;
}

/* 新闻文章中的Read More链接 */
.news-article a[href="news-detail.html"],
article a[href="news-detail.html"] {
    background-color: rgba(57, 26, 0, 0.8) !important;
    color: white !important;
}

.news-article a[href="news-detail.html"]:hover,
article a[href="news-detail.html"]:hover {
    background-color: rgba(57, 26, 0, 1) !important;
    color: white !important;
}

/* 深色背景文字颜色修正 - 确保深色背景上的文字是白色 */
.bg-green-500, .bg-green-600, .bg-green-700, .bg-green-800 {
    color: white !important;
}

.bg-green-500 *, .bg-green-600 *, .bg-green-700 *, .bg-green-800 * {
    color: white !important;
}

/* 悬停状态的深色背景也应该有白色文字 */
.hover\:bg-green-500:hover, .hover\:bg-green-600:hover, .hover\:bg-green-700:hover, .hover\:bg-green-800:hover {
    color: white !important;
}

.hover\:bg-green-500:hover *, .hover\:bg-green-600:hover *, .hover\:bg-green-700:hover *, .hover\:bg-green-800:hover * {
    color: white !important;
}

/* Group hover 状态 */
.group-hover\:bg-green-500:hover, .group-hover\:bg-green-600:hover, .group-hover\:bg-green-700:hover {
    color: white !important;
}

.group-hover\:bg-green-500:hover *, .group-hover\:bg-green-600:hover *, .group-hover\:bg-green-700:hover * {
    color: white !important;
}

/* 最终覆盖 - 替换所有剩余的硬编码绿色值 */
/* 这些规则会覆盖CSS文件中所有剩余的硬编码绿色值 */

/* 替换所有包含 #10b981 的样式 */
*[style*="#10b981"], *[class*="green"] {
    color: rgba(57, 26, 0, 1) !important;
}

/* 替换所有包含 #059669 的样式 */
*[style*="#059669"] {
    color: rgba(57, 26, 0, 1) !important;
    background-color: rgba(57, 26, 0, 0.8) !important;
    border-color: rgba(57, 26, 0, 0.8) !important;
}

/* 替换所有包含 #34d399 的样式 */
*[style*="#34d399"] {
    color: rgba(57, 26, 0, 0.6) !important;
    background-color: rgba(57, 26, 0, 0.6) !important;
}

/* 替换所有包含 #6ee7b7 的样式 */
*[style*="#6ee7b7"] {
    color: rgba(57, 26, 0, 0.4) !important;
    background-color: rgba(57, 26, 0, 0.4) !important;
}

/* 替换所有包含 #16a34a 的样式 */
*[style*="#16a34a"] {
    color: rgba(57, 26, 0, 0.8) !important;
}

/* 强制覆盖所有可能的绿色渐变背景 */
.step-card::before,
.customize-card .bg-white::before,
.lab-cta-btn,
.private-label-cta,
.start-project-btn,
.cta-button,
.product-categories .mt-12 button,
.custom-steps button,
.certificate-card::before {
    background: linear-gradient(45deg, rgba(57, 26, 0, 0.8), rgba(57, 26, 0, 1)) !important;
}

/* 覆盖特定的渐变样式 */
.review-card h4::after,
.news-card h3::after,
.cooperation-card h3::after {
    background: linear-gradient(90deg, rgba(57, 26, 0, 0.8), rgba(57, 26, 0, 1)) !important;
}

/* 覆盖特定的背景色 */
.feature-item:hover .feature-icon {
    background: linear-gradient(135deg, rgba(57, 26, 0, 0.8), rgba(57, 26, 0, 1)) !important;
}

/* 覆盖特定的边框样式 */
.cooperation-section h2::after {
    background: linear-gradient(90deg, rgba(57, 26, 0, 0.8), rgba(57, 26, 0, 1)) !important;
}