<script setup>
import { ref, onBeforeMount } from 'vue'
import topBar from "@/components/top/title-bar.vue"
import footBar from "@/components/bottom/foot-bar.vue";
import { useRouter } from '#imports';
import { useI18n } from "#imports";
import { usePageTitle } from "@/composables/usePageTitle.js";
import { useImagePath } from "@/composables/useImagePath.js";

const router = useRouter();
const { t } = useI18n();
const { cdnImageUrl } = useImagePath();

// 设置页面标题
usePageTitle("page.about-us");

const goTab = (path) => {
    router.push({ name: path });
}
</script>

<template>
  <div>
    <topBar class="define-topBar__components"></topBar>
    
    <!-- Modern Banner -->
    <div class="modern-banner">
             <div class="banner-background">
                   <div class="background-image"></div>
         <div class="overlay-gradient"></div>
         <div class="tech-grid"></div>
         <div class="floating-elements">
           <div class="floating-dot"></div>
           <div class="floating-dot"></div>
           <div class="floating-dot"></div>
         </div>
       </div>
      <div class="banner-content">
        <div class="banner-text">
          <h1 class="banner-title">
            <span class="title-main">{{ t('about.page.title') }}</span>
            <span class="title-highlight">{{ t('about.page.subtitle') }}</span>
          </h1>
          <p class="banner-desc">{{ t('about.page.description') }}</p>
        </div>
        <div class="banner-stats">
          <div class="stat-card">
            <div class="stat-number">15</div>
            <div class="stat-text">{{ t('about.stats.experience') }}</div>
          </div>
          <div class="stat-card">
            <div class="stat-number">100</div>
            <div class="stat-text">{{ t('about.stats.team') }}</div>
          </div>
          <div class="stat-card">
            <div class="stat-number">50</div>
            <div class="stat-text">{{ t('about.stats.countries') }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Elegant Breadcrumb -->
    <div class="elegant-breadcrumb">
      <div class="breadcrumb-container">
        <a @click="goTab('home')" class="breadcrumb-item">
          <i class="breadcrumb-icon"></i>
          <span>{{ t('about.breadcrumb.home') }}</span>
        </a>
        <span class="breadcrumb-divider">·</span>
        <span class="breadcrumb-current">{{ t('about.breadcrumb.about') }}</span>
      </div>
    </div>

    <main class="main-content">
      <!-- Company Introduction Section -->
      <section class="company-introduction">
        <div class="container">
          <div class="intro-layout">
            <div class="intro-content">
              <div class="intro-header">
                <div class="blue-accent-line"></div>
                <h2 class="intro-title">{{ t('about.intro.title') }}</h2>
              </div>
              
              <div class="intro-text">
                <p class="intro-paragraph">
                  {{ t('about.intro.p1') }}
                </p>
                
                <p class="intro-paragraph">
                  {{ t('about.intro.p2') }}
                </p>
              </div>
            </div>
            
            <div class="intro-image">
              <div class="ceo-container">
                <img :src="cdnImageUrl('/static/about-us/company.png')" :alt="t('about.company.image')" class="ceo-photo" />
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- Company Achievements Section -->
      <section class="company-achievements">
        <div class="container">
          <div class="achievements-grid">
            <div class="achievement-card">
              <div class="card-icon">
                <i class="iconfont icon-global"></i>
              </div>
              <div class="card-content">
                <div class="achievement-number">50+</div>
                <div class="achievement-label">{{ t('about.achievements.countries') }}</div>
              </div>
            </div>
            
            <div class="achievement-card featured">
              <div class="featured-content">
                <div class="featured-icon">
                  <i class="iconfont icon-trophy"></i>
                </div>
                <div class="featured-text">
                  <h3>{{ t('about.achievements.vision.title') }}</h3>
                  <p>{{ t('about.achievements.vision.desc') }}</p>
                </div>
              </div>
            </div>
            
            <div class="achievement-card">
              <div class="card-icon">
                <i class="iconfont icon-team"></i>
              </div>
              <div class="card-content">
                <div class="achievement-number">100+</div>
                <div class="achievement-label">{{ t('about.achievements.team') }}</div>
              </div>
            </div>
            
            <div class="achievement-card">
              <div class="card-icon">
                <i class="iconfont icon-time"></i>
              </div>
              <div class="card-content">
                <div class="achievement-number">15+</div>
                <div class="achievement-label">{{ t('about.achievements.experience') }}</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- Technology Excellence Section -->
      <section class="tech-excellence">
        <div class="container">
          <div class="section-header">
            <div class="header-decoration">
              <div class="decoration-line"></div>
              <div class="decoration-dot"></div>
            </div>
            <h2 class="section-title-pro">
              <span class="title-label">TECHNOLOGY</span>
              <span class="title-main">{{ t('about.tech.title') }}</span>
              <span class="title-subtitle">{{ t('about.tech.subtitle') }}</span>
            </h2>
          </div>

          <div class="tech-content-grid">
            <div class="tech-visual">
              <div class="image-container">
                <img :src="cdnImageUrl('/static/about-us/introduction.png')" :alt="t('about.tech.image')" />
                <div class="tech-badges">
                  <div class="badge-item">
                    <i class="iconfont icon-experiment"></i>
                    <span class="badge-text">R&D</span>
                  </div>
                  <div class="badge-item">
                    <i class="iconfont icon-factory"></i>
                    <span class="badge-text">{{ t('about.tech.badge.manufacturing') }}</span>
                  </div>
                  <div class="badge-item">
                    <i class="iconfont icon-global"></i>
                    <span class="badge-text">{{ t('about.tech.badge.global') }}</span>
                  </div>
                </div>
              </div>
            </div>
            
            <div class="tech-info">
              <div class="tech-highlights">
                <div class="highlight-card">
                  <div class="card-number">01</div>
                  <div class="card-content">
                    <h3 class="card-title">{{ t('about.tech.team.title') }}</h3>
                    <p class="card-desc">{{ t('about.tech.team.desc') }}</p>
                    <div class="card-features">
                      <span class="feature-tag">{{ t('about.tech.tag.ai-algorithm') }}</span>
                      <span class="feature-tag">{{ t('about.tech.tag.image-processing') }}</span>
                      <span class="feature-tag">{{ t('about.tech.tag.hardware-design') }}</span>
                    </div>
                  </div>
                </div>

                <div class="highlight-card">
                  <div class="card-number">02</div>
                  <div class="card-content">
                    <h3 class="card-title">{{ t('about.tech.manufacturing.title') }}</h3>
                    <p class="card-desc">{{ t('about.tech.manufacturing.desc') }}</p>
                    <div class="card-features">
                      <span class="feature-tag">{{ t('about.tech.tag.iso-certification') }}</span>
                      <span class="feature-tag">{{ t('about.tech.tag.precision-manufacturing') }}</span>
                      <span class="feature-tag">{{ t('about.tech.tag.quality-control') }}</span>
                    </div>
                  </div>
                </div>

                <div class="highlight-card">
                  <div class="card-number">03</div>
                  <div class="card-content">
                    <h3 class="card-title">{{ t('about.tech.service.title') }}</h3>
                    <p class="card-desc">{{ t('about.tech.service.desc') }}</p>
                    <div class="card-features">
                      <span class="feature-tag">{{ t('about.tech.tag.technical-support') }}</span>
                      <span class="feature-tag">{{ t('about.tech.tag.custom-solution') }}</span>
                      <span class="feature-tag">{{ t('about.tech.tag.after-sales') }}</span>
                    </div>
                  </div>
                </div>
              </div>

              <div class="tech-summary">
                <div class="summary-content">
                  <h4 class="summary-title">{{ t('about.tech.advantage.title') }}</h4>
                  <p class="summary-text">
                    {{ t('about.tech.advantage.desc') }}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- Exhibition & Honors Section -->
      <section class="exhibition-honors">
        <div class="container">
          <div class="section-header">
            <div class="header-decoration">
              <div class="decoration-line"></div>
              <div class="decoration-dot"></div>
            </div>
            <h2 class="section-title-pro">
              <span class="title-label">SHOWCASE</span>
              <span class="title-main">{{ t('about.exhibition.title') }}</span>
              <span class="title-subtitle">{{ t('about.exhibition.subtitle') }}</span>
            </h2>
          </div>
          
          <div class="exhibition-content">
            <!-- 展会图片网格 -->
            <div class="exhibition-grid">
              <div class="exhibition-item">
                <div class="exhibition-card">
                  <img :src="cdnImageUrl('/static/about-us/exhibition/01.jpg')" :alt="t('about.exhibition.security-expo')" />
                  <div class="card-info">
                    <i class="iconfont icon-building info-icon"></i>
                    <h4>{{ t('about.exhibition.security-expo') }}</h4>
                    <p>Security Expo</p>
                  </div>
                </div>
              </div>
              <div class="exhibition-item">
                <div class="exhibition-card">
                  <img :src="cdnImageUrl('/static/about-us/exhibition/02.webp')" :alt="t('about.exhibition.tech-conference')" />
                  <div class="card-info">
                    <i class="iconfont icon-handshake info-icon"></i>
                    <h4>{{ t('about.exhibition.tech-conference') }}</h4>
                    <p>Tech Conference</p>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 企业荣誉 -->
            <div class="honors-section">
              <div class="honors-header">
                <i class="iconfont icon-trophy header-icon"></i>
                <h3>{{ t('about.exhibition.certifications') }}</h3>
                <p>CERTIFICATIONS</p>
              </div>
              <div class="honors-compact-grid">
                <div class="honor-card">
                  <i class="iconfont icon-certificate honor-icon"></i>
                  <div class="honor-content">
                    <h4>{{ t('about.exhibition.iso9001') }}</h4>
                    <span>{{ t('about.exhibition.iso9001.desc') }}</span>
                  </div>
                </div>
                <div class="honor-card">
                  <i class="iconfont icon-innovation honor-icon"></i>
                  <div class="honor-content">
                    <h4>{{ t('about.exhibition.high-tech') }}</h4>
                    <span>{{ t('about.exhibition.high-tech.desc') }}</span>
                  </div>
                </div>
                <div class="honor-card">
                  <i class="iconfont icon-award honor-icon"></i>
                  <div class="honor-content">
                    <h4>{{ t('about.exhibition.excellent-supplier') }}</h4>
                    <span>{{ t('about.exhibition.excellent-supplier.desc') }}</span>
                  </div>
                </div>
                <div class="honor-card">
                  <i class="iconfont icon-international honor-icon"></i>
                  <div class="honor-content">
                    <h4>{{ t('about.exhibition.ce-fcc') }}</h4>
                    <span>{{ t('about.exhibition.ce-fcc.desc') }}</span>
                  </div>
                </div>
                <div class="honor-card">
                  <i class="iconfont icon-security honor-icon"></i>
                  <div class="honor-content">
                    <h4>{{ t('about.exhibition.security-cert') }}</h4>
                    <span>{{ t('about.exhibition.security-cert.desc') }}</span>
                  </div>
                </div>
                <div class="honor-card">
                  <i class="iconfont icon-quality honor-icon"></i>
                  <div class="honor-content">
                    <h4>{{ t('about.exhibition.quality-assurance') }}</h4>
                    <span>{{ t('about.exhibition.quality-assurance.desc') }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- Production Process Section -->
      <section class="production-process">
        <div class="container">
          <div class="section-header">
            <div class="header-decoration">
              <div class="decoration-line"></div>
              <div class="decoration-dot"></div>
            </div>
            <h2 class="section-title-pro">
              <span class="title-label">MANUFACTURING</span>
              <span class="title-main">{{ t('about.production.title') }}</span>
              <span class="title-subtitle">{{ t('about.production.subtitle') }}</span>
            </h2>
          </div>
          
          <div class="production-content">
            <!-- 工艺流程 -->
            <div class="process-flow">
              <div class="flow-item">
                <i class="iconfont icon-assembly flow-icon"></i>
                <h4>{{ t('about.production.assembly') }}</h4>
                <p>{{ t('about.production.assembly.desc') }}</p>
              </div>
              <div class="flow-arrow">→</div>
              <div class="flow-item">
                <i class="iconfont icon-testing flow-icon"></i>
                <h4>{{ t('about.production.testing') }}</h4>
                <p>{{ t('about.production.testing.desc') }}</p>
              </div>
              <div class="flow-arrow">→</div>
              <div class="flow-item">
                <i class="iconfont icon-settings flow-icon"></i>
                <h4>{{ t('about.production.debugging') }}</h4>
                <p>{{ t('about.production.debugging.desc') }}</p>
              </div>
              <div class="flow-arrow">→</div>
              <div class="flow-item">
                <i class="iconfont icon-package flow-icon"></i>
                <h4>{{ t('about.production.packaging') }}</h4>
                <p>{{ t('about.production.packaging.desc') }}</p>
              </div>
            </div>
            
            <!-- 生产车间图片 -->
            <div class="workshop-compact-grid">
              <div class="workshop-card">
                <img :src="cdnImageUrl('/static/about-us/workshop/01.jpg')" :alt="t('about.production.assembly')" />
                <div class="card-badge">
                  <i class="iconfont icon-assembly"></i>
                  <span>{{ t('about.production.assembly') }}</span>
                </div>
              </div>
              <div class="workshop-card">
                <img :src="cdnImageUrl('/static/about-us/workshop/02.jpg')" :alt="t('about.production.testing')" />
                <div class="card-badge">
                  <i class="iconfont icon-testing"></i>
                  <span>{{ t('about.production.testing') }}</span>
                </div>
              </div>
              <div class="workshop-card">
                <img :src="cdnImageUrl('/static/about-us/workshop/03.jpg')" :alt="t('about.production.debugging')" />
                <div class="card-badge">
                  <i class="iconfont icon-settings"></i>
                  <span>{{ t('about.production.debugging') }}</span>
                </div>
              </div>
              <div class="workshop-card">
                <img :src="cdnImageUrl('/static/about-us/workshop/04.jpg')" :alt="t('about.production.packaging')" />
                <div class="card-badge">
                  <i class="iconfont icon-package"></i>
                  <span>{{ t('about.production.packaging') }}</span>
                </div>
              </div>
              <div class="workshop-card">
                <img :src="cdnImageUrl('/static/about-us/workshop/05.jpg')" :alt="t('about.production.quality-control')" />
                <div class="card-badge">
                  <i class="iconfont icon-quality-control"></i>
                  <span>{{ t('about.production.quality-control') }}</span>
                </div>
              </div>
            </div>
            
            <!-- 生产能力数据 -->
            <div class="production-stats">
              <div class="stats-header">
                <i class="iconfont icon-chart header-icon"></i>
                <h3>{{ t('about.production.capacity') }}</h3>
                <p>PRODUCTION CAPACITY</p>
              </div>
              <div class="stats-grid">
                <div class="stat-card">
                  <i class="iconfont icon-factory stat-icon"></i>
                  <div class="stat-data">
                    <div class="stat-number">50,000+</div>
                    <div class="stat-label">{{ t('about.production.monthly-capacity') }}</div>
                  </div>
                </div>
                <div class="stat-card">
                  <i class="iconfont icon-time stat-icon"></i>
                  <div class="stat-data">
                    <div class="stat-number">24/7</div>
                    <div class="stat-label">{{ t('about.production.guarantee') }}</div>
                  </div>
                </div>
                <div class="stat-card">
                  <i class="iconfont icon-quality stat-icon"></i>
                  <div class="stat-data">
                    <div class="stat-number">99.8%</div>
                    <div class="stat-label">{{ t('about.production.pass-rate') }}</div>
                  </div>
                </div>
                <div class="stat-card">
                  <i class="iconfont icon-production-line stat-icon"></i>
                  <div class="stat-data">
                    <div class="stat-number">15</div>
                    <div class="stat-label">{{ t('about.production.lines') }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
    
    <foot-bar></foot-bar>
  </div>
</template>

<style lang="scss" scoped>
/* 专业安防行业配色方案 - 使用局部变量 */
$primary-color: #4f8cef;
$primary-dark: #3b6dc7;
$primary-light: #6fa3f2;
$secondary-color: #2c3e50;
$accent-color: #34495e;
$background-color: #fafbfc;
$surface-color: #ffffff;
$text-primary: #1a202c;
$text-secondary: #4a5568;
$text-muted: #718096;
$border-color: #e2e8f0;
$shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
$shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
$shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
$shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
$gradient-primary: linear-gradient(135deg, #4f8cef 0%, #6fa3f2 100%);
$gradient-dark: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);

/* 字体系统 */
$font-light: MiSans-Light;
$font-normal: MiSans-Normal;
$font-regular: MiSans-Regular;
$font-medium: MiSans-Medium;
$font-semibold: MiSans-SemiBold;
$font-bold: MiSans-Bold;

/* 重置与基础样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: $font-regular;
  line-height: 1.6;
  color: $text-primary;
  background-color: $background-color;
}



/* 容器 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  
  // 4K 和超大屏幕
  @media (min-width: 2560px) {
    max-width: 1800px;
    padding: 0 80px;
  }

  @media (min-width: 1920px) and (max-width: 2559px) {
    max-width: 1500px;
    padding: 0 60px;
  }

  @media (min-width: 1440px) and (max-width: 1919px) {
    max-width: 1300px;
    padding: 0 40px;
  }

  @media (max-width: 1024px) {
    padding: 0 30px;
  }
  
  @media (max-width: 768px) {
    padding: 0 20px;
  }

  @media (max-width: 480px) {
    padding: 0 16px;
  }

  @media (max-width: 375px) {
    padding: 0 12px;
  }
}

/* Modern Banner 样式 */
.modern-banner {
  background: #1a1a2e;
  position: relative;
  padding: 100px 0 80px;
  overflow: hidden;
  min-height: 400px;

  // 4K 和超大屏幕
  @media (min-width: 2560px) {
    padding: 160px 0 120px;
    min-height: 600px;
  }

  @media (min-width: 1920px) and (max-width: 2559px) {
    padding: 140px 0 100px;
    min-height: 520px;
  }

  @media (min-width: 1440px) and (max-width: 1919px) {
    padding: 120px 0 90px;
    min-height: 460px;
  }

  @media (max-width: 1024px) {
    padding: 80px 0 60px;
    min-height: 350px;
  }

  @media (max-width: 768px) {
    padding: 60px 0 40px;
    min-height: 300px;
  }

  @media (max-width: 480px) {
    padding: 50px 0 30px;
    min-height: 280px;
  }

  @media (max-width: 375px) {
    padding: 40px 0 25px;
    min-height: 250px;
  }
  
  .banner-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
    .background-image {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, #1a1a2e 0%, #2c3e50 100%);
      background-image: url('https://images.unsplash.com/photo-1550751827-4bd374c3f58b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2072&q=80');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      opacity: 0.5;
      filter: brightness(0.9) contrast(1.2);
    }
    
    .overlay-gradient {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(79, 140, 239, 0.8) 100%);
      z-index: 1;
    }
    
    .tech-grid {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: 
        linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px);
      background-size: 50px 50px;
      animation: gridMove 20s linear infinite;
      z-index: 2;
    }
    
    .floating-elements {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 3;
      
      .floating-dot {
        position: absolute;
        width: 8px;
        height: 8px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        animation: float 6s ease-in-out infinite;
        
        &:nth-child(1) {
          top: 20%;
          left: 10%;
          animation-delay: 0s;
        }
        
        &:nth-child(2) {
          top: 60%;
          right: 20%;
          animation-delay: 2s;
        }
        
        &:nth-child(3) {
          bottom: 30%;
          left: 70%;
          animation-delay: 4s;
        }
      }
    }
  }
  
  .banner-content {
    position: relative;
    z-index: 10;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    
    @media (max-width: 968px) {
      flex-direction: column;
      text-align: center;
      gap: 40px;
    }
  }
  
  .banner-text {
    flex: 1;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    
    .banner-title {
      margin-bottom: 20px;
      
             .title-main {
         display: block;
         font-size: 40px;
         font-weight: 700;
         font-family: $font-bold;
         line-height: 1.1;
         margin-bottom: 8px;
         letter-spacing: -1px;
        
        // 4K 和超大屏幕
        @media (min-width: 2560px) {
          font-size: 64px;
          margin-bottom: 16px;
          letter-spacing: -2px;
        }

        @media (min-width: 1920px) and (max-width: 2559px) {
          font-size: 56px;
          margin-bottom: 12px;
          letter-spacing: -1.5px;
        }

        @media (min-width: 1440px) and (max-width: 1919px) {
          font-size: 48px;
          margin-bottom: 10px;
        }

        @media (max-width: 1024px) {
          font-size: 36px;
          margin-bottom: 8px;
        }
        
        @media (max-width: 768px) {
          font-size: 32px;
          margin-bottom: 6px;
          letter-spacing: -0.5px;
        }

        @media (max-width: 480px) {
          font-size: 28px;
          margin-bottom: 6px;
        }

        @media (max-width: 375px) {
          font-size: 24px;
          margin-bottom: 4px;
          letter-spacing: 0;
        }
      }
      
             .title-highlight {
         display: block;
         font-size: 16px;
         font-weight: 500;
         font-family: $font-medium;
         opacity: 0.9;
         letter-spacing: 3px;
         text-transform: uppercase;
        
        @media (max-width: 768px) {
          font-size: 14px;
        }
      }
    }
    
         .banner-desc {
       font-size: 18px;
       line-height: 1.6;
       opacity: 0.95;
       font-weight: 400;
       font-family: $font-light;
      
      @media (max-width: 768px) {
        font-size: 16px;
      }
    }
  }
  
  .banner-stats {
    display: flex;
    gap: 20px;
    
    @media (max-width: 968px) {
      justify-content: center;
    }
    
    @media (max-width: 480px) {
      flex-direction: column;
      align-items: center;
    }
    
    .stat-card {
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 12px;
      padding: 20px 16px;
      text-align: center;
      color: white;
      min-width: 100px;
      transition: all 0.3s ease;
      
      &:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: translateY(-4px);
      }
      
             .stat-number {
         font-size: 24px;
         font-weight: 700;
         font-family: $font-bold;
         line-height: 1;
         margin-bottom: 4px;
       }
      
             .stat-text {
         font-size: 12px;
         opacity: 0.9;
         font-weight: 500;
         font-family: $font-medium;
       }
    }
  }
}

/* Elegant Breadcrumb 样式 */
 .elegant-breadcrumb {
   background: $surface-color;
   border-bottom: 1px solid $border-color;
   padding: 16px 0;
  
  .breadcrumb-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    
    @media (max-width: 768px) {
      padding: 0 16px;
    }
  }
  
     .breadcrumb-item {
     color: $text-secondary;
     text-decoration: none;
     display: flex;
     align-items: center;
     gap: 6px;
     padding: 6px 12px;
     border-radius: 6px;
     transition: all 0.2s ease;
     font-weight: 500;
     font-family: $font-medium;
    
         &:hover {
       background: rgba(79, 140, 239, 0.1);
       color: $primary-color;
     }
    
    .breadcrumb-icon {
      width: 16px;
      height: 16px;
      background: url('/static/common/home.png') center/contain no-repeat;
    }
  }
  
     .breadcrumb-divider {
     color: $text-muted;
     font-weight: 300;
     margin: 0 4px;
   }
  
     .breadcrumb-current {
     color: $primary-color;
     font-weight: 600;
     font-family: $font-semibold;
     padding: 6px 12px;
     background: rgba(79, 140, 239, 0.1);
     border-radius: 6px;
   }
}

 /* 主内容区 */
 .main-content {
   background: $background-color;
 }

/* 通用区块头部样式 */
.section-header {
  text-align: center;
  margin-bottom: 60px;
  position: relative;
  
  .header-decoration {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    
         .decoration-line {
       width: 60px;
       height: 2px;
       background: $gradient-primary;
       border-radius: 1px;
     }
    
         .decoration-dot {
       width: 8px;
       height: 8px;
       background: $primary-color;
       border-radius: 50%;
       margin: 0 12px;
     }
  }
}

/* 专业标题样式 */
.section-title-pro {
     .title-label {
     display: block;
     font-size: 12px;
     font-weight: 600;
     font-family: $font-semibold;
     letter-spacing: 2px;
     color: $primary-color;
     text-transform: uppercase;
     margin-bottom: 8px;
   }
  
     .title-main {
     display: block;
     font-size: 36px;
     font-weight: 700;
     font-family: $font-bold;
     color: $text-primary;
     margin-bottom: 12px;
     letter-spacing: -0.5px;
    
    @media (max-width: 768px) {
      font-size: 28px;
    }
  }
  
     .title-subtitle {
     display: block;
     font-size: 16px;
     color: $text-secondary;
     line-height: 1.5;
     max-width: 600px;
     margin: 0 auto;
     font-family: $font-light;
    
    @media (max-width: 768px) {
      font-size: 14px;
    }
  }
}



/* Company Introduction 区块样式 */
 .company-introduction {
   padding: 80px 0;
   background: $surface-color;
   position: relative;

  // 4K 和超大屏幕
  @media (min-width: 2560px) {
    padding: 140px 0;
  }

  @media (min-width: 1920px) and (max-width: 2559px) {
    padding: 120px 0;
  }

  @media (min-width: 1440px) and (max-width: 1919px) {
    padding: 100px 0;
  }

  @media (max-width: 1024px) {
    padding: 70px 0;
  }

  @media (max-width: 768px) {
    padding: 60px 0;
  }

  @media (max-width: 480px) {
    padding: 50px 0;
  }

  @media (max-width: 375px) {
    padding: 40px 0;
  }
  
  .intro-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    
    @media (max-width: 968px) {
      grid-template-columns: 1fr;
      gap: 60px;
    }
  }
  
  .intro-content {
    .intro-header {
      margin-bottom: 32px;
      
      .blue-accent-line {
        width: 60px;
        height: 4px;
        background: linear-gradient(90deg, #4f8cef, #6fa3f2);
        border-radius: 2px;
        margin-bottom: 20px;
      }
      
             .intro-title {
         font-size: 36px;
         font-weight: 700;
         color: $text-primary;
         line-height: 1.2;
         margin: 0;
        
        @media (max-width: 768px) {
          font-size: 24px;
        }
      }
    }
    
    .intro-text {
             .intro-paragraph {
         font-size: 16px;
         line-height: 1.8;
         color: $text-secondary;
         margin-bottom: 24px;
         text-align: justify;
        
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
  
  .intro-image {
    display: flex;
    justify-content: center;
    align-items: center;
    
    .ceo-container {
      position: relative;
      max-width: 400px;
      width: 100%;
      
      .ceo-photo {
        width: 100%;
        height: auto;
        border-radius: 20px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
        
        &:hover {
          transform: translateY(-8px);
          box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
        }
      }
      
      &::before {
        content: '';
        position: absolute;
        top: -20px;
        right: -20px;
        width: 100px;
        height: 100px;
        background: linear-gradient(135deg, #4f8cef, #6fa3f2);
        border-radius: 50%;
        opacity: 0.1;
        z-index: -1;
      }
      
             &::after {
         content: '';
         position: absolute;
         bottom: -30px;
         left: -30px;
         width: 80px;
         height: 80px;
         background: linear-gradient(135deg, $primary-color, #6fa3f2);
         border-radius: 50%;
         opacity: 0.1;
         z-index: -1;
       }
    }
  }
}

/* Company Achievements 区块样式 */
.company-achievements {
  padding: 60px 0;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  
  .achievements-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 1fr;
    gap: 24px;
    
    @media (max-width: 968px) {
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }
    
    @media (max-width: 768px) {
      grid-template-columns: 1fr;
      gap: 16px;
    }
  }
  
     .achievement-card {
     background: $surface-color;
     border-radius: 16px;
     padding: 32px 24px;
     text-align: center;
     box-shadow: $shadow-md;
     transition: all 0.3s ease;
     border: 1px solid $border-color;
    
         &:hover {
       transform: translateY(-8px);
       box-shadow: $shadow-xl;
     }
    
         .card-icon {
       width: 60px;
       height: 60px;
       background: linear-gradient(135deg, $primary-color, #6fa3f2);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       margin: 0 auto 20px;
      
      i {
        font-size: 24px;
        color: white;
      }
    }
    
    .card-content {
             .achievement-number {
         font-size: 32px;
         font-weight: 700;
         color: $text-primary;
         margin-bottom: 8px;
         line-height: 1;
       }
       
       .achievement-label {
         font-size: 14px;
         color: $text-muted;
         font-weight: 500;
       }
    }
    
    &.featured {
      background: linear-gradient(135deg, #4f8cef, #6fa3f2);
      color: white;
      grid-column: span 1;
      
      @media (max-width: 968px) {
        grid-column: span 2;
      }
      
      @media (max-width: 768px) {
        grid-column: span 1;
      }
      
      .featured-content {
        display: flex;
        align-items: center;
        gap: 20px;
        text-align: left;
        
        @media (max-width: 480px) {
          flex-direction: column;
          text-align: center;
          gap: 16px;
        }
        
        .featured-icon {
          width: 60px;
          height: 60px;
          background: rgba(255, 255, 255, 0.2);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          
          i {
            font-size: 24px;
            color: white;
          }
        }
        
        .featured-text {
          flex: 1;
          
          h3 {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 8px;
            color: white;
          }
          
          p {
            font-size: 14px;
            line-height: 1.5;
            color: rgba(255, 255, 255, 0.9);
            margin: 0;
          }
        }
      }
    }
  }
}

/* Professional Brand 区块样式 */
 .professional-brand {
   padding: 60px 0;
   background: $surface-color;
   position: relative;
  
  .brand-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
    
    @media (max-width: 968px) {
      grid-template-columns: 1fr;
      gap: 50px;
    }
  }

.brand-info {
         .philosophy-card {
       background: $surface-color;
       border: 1px solid $border-color;
       border-radius: 16px;
       padding: 28px;
       margin-bottom: 24px;
       transition: all 0.3s ease;
       position: relative;
       overflow: hidden;
      
             &::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 4px;
         background: $gradient-primary;
       }
       
       &:hover {
         box-shadow: $shadow-lg;
         transform: translateY(-4px);
       }
      
      .card-header {
        display: flex;
        align-items: center;
        margin-bottom: 16px;
        
        .card-icon {
          width: 40px;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 16px;
          
                     .icon-circle {
             width: 12px;
             height: 12px;
             background: $primary-color;
             border-radius: 50%;
             position: relative;
             
             &::after {
               content: '';
               position: absolute;
               top: -4px;
               left: -4px;
               right: -4px;
               bottom: -4px;
               border: 2px solid $primary-color;
               border-radius: 50%;
               opacity: 0.3;
             }
           }
        }
        
                 .card-title {
           font-size: 20px;
           font-weight: 600;
           color: $text-primary;
           margin: 0;
         }
       }
       
       .card-text {
         font-size: 15px;
         line-height: 1.6;
         color: $text-secondary;
         margin: 0;
       }
    }
    
         .core-values {
       background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
       border-radius: 16px;
       padding: 28px;
       border: 1px solid $border-color;
       
       .values-title {
         font-size: 18px;
         font-weight: 600;
         color: $text-primary;
         margin-bottom: 20px;
         text-align: center;
       }
      
      .values-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        
                 .value-item {
           display: flex;
           align-items: center;
           gap: 12px;
           padding: 12px 16px;
           background: $surface-color;
           border-radius: 10px;
           transition: all 0.2s ease;
           
           &:hover {
             background: rgba(79, 140, 239, 0.05);
             transform: translateX(4px);
           }
           
           .value-icon {
             font-size: 18px;
             color: $primary-color;
           }
           
           .value-text {
             font-size: 14px;
             font-weight: 500;
             color: $text-primary;
           }
         }
      }
    }
  }
  
  .brand-visual {
         .image-container {
       position: relative;
       border-radius: 20px;
       overflow: hidden;
       background: $gradient-primary;
       padding: 4px;
      
      img {
        width: 100%;
        height: 400px;
        object-fit: cover;
        border-radius: 16px;
        transition: all 0.4s ease;
        
        &:hover {
          transform: scale(1.02);
        }
      }
      
      .image-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
        color: white;
        padding: 32px 24px 24px;
        transform: translateY(100%);
        transition: all 0.4s ease;
        
        .overlay-content {
          h4 {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 8px;
          }
          
          p {
            font-size: 14px;
            opacity: 0.9;
          }
        }
      }
      
      &:hover .image-overlay {
        transform: translateY(0);
      }
    }
  }
}

/* Technology Excellence 区块样式 */
 .tech-excellence {
   padding: 60px 0;
   background: $surface-color;
   position: relative;
  
  .tech-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
    
    @media (max-width: 968px) {
      grid-template-columns: 1fr;
      gap: 50px;
    }
  }
  
  .tech-visual {
    .image-container {
      position: relative;
      border-radius: 20px;
      overflow: hidden;
      
             img {
         width: 100%;
         height: 400px;
         object-fit: cover;
         border-radius: 20px;
         box-shadow: $shadow-lg;
         transition: all 0.4s ease;
         
         &:hover {
           transform: scale(1.02);
           box-shadow: $shadow-xl;
         }
       }
      
      .tech-badges {
        position: absolute;
        top: 20px;
        right: 20px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        
                 .badge-item {
           display: flex;
           align-items: center;
           gap: 8px;
           background: rgba(255, 255, 255, 0.95);
           backdrop-filter: blur(10px);
           padding: 8px 12px;
           border-radius: 20px;
           font-size: 12px;
           font-weight: 600;
           color: $primary-color;
           box-shadow: $shadow-sm;
           
           i {
             font-size: 14px;
             color: $primary-color;
           }
         }
      }
    }
  }
  
  .tech-info {
    .tech-highlights {
      margin-bottom: 32px;
      
             .highlight-card {
         display: flex;
         gap: 20px;
         padding: 24px;
         background: $surface-color;
         border: 1px solid $border-color;
         border-radius: 16px;
         margin-bottom: 20px;
         transition: all 0.3s ease;
         position: relative;
         overflow: hidden;
         
         &::before {
           content: '';
           position: absolute;
           left: 0;
           top: 0;
           bottom: 0;
           width: 4px;
           background: $gradient-primary;
         }
         
         &:hover {
           box-shadow: $shadow-lg;
           transform: translateY(-2px);
         }
        
                 .card-number {
           flex-shrink: 0;
           width: 48px;
           height: 48px;
           background: $gradient-primary;
           color: white;
           border-radius: 12px;
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 18px;
           font-weight: 700;
           box-shadow: $shadow-md;
         }
        
        .card-content {
          flex: 1;
          
                     .card-title {
             font-size: 18px;
             font-weight: 600;
             color: $text-primary;
             margin-bottom: 8px;
           }
           
           .card-desc {
             font-size: 14px;
             line-height: 1.5;
             color: $text-secondary;
             margin-bottom: 12px;
           }
           
           .card-features {
             display: flex;
             gap: 8px;
             flex-wrap: wrap;
             
             .feature-tag {
               background: rgba(79, 140, 239, 0.1);
               color: $primary-color;
               padding: 4px 8px;
               border-radius: 12px;
               font-size: 12px;
               font-weight: 500;
             }
           }
        }
      }
    }
    
         .tech-summary {
       .summary-content {
         background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
         padding: 24px;
         border-radius: 16px;
         border: 1px solid $border-color;
         
         .summary-title {
           font-size: 16px;
           font-weight: 600;
           color: $text-primary;
           margin-bottom: 12px;
           display: flex;
           align-items: center;
           gap: 8px;
           
           &::before {
             content: '';
             width: 4px;
             height: 16px;
             background: $primary-color;
             border-radius: 2px;
           }
         }
         
         .summary-text {
           font-size: 14px;
           line-height: 1.6;
           color: $text-secondary;
           margin: 0;
         }
       }
     }
  }
}

/* Exhibition & Honors 区块样式 */
 .exhibition-honors {
   padding: 60px 0;
   background: $surface-color;
   position: relative;
  
  .exhibition-content {
    display: grid;
    gap: 40px;
  }
  
  .exhibition-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    
    @media (max-width: 768px) {
      grid-template-columns: 1fr;
    }
  }
  
  .exhibition-item {
         .exhibition-card {
       position: relative;
       border-radius: 12px;
       overflow: hidden;
       background: $surface-color;
       border: 1px solid $border-color;
       transition: all 0.3s ease;
       
       &:hover {
         box-shadow: $shadow-lg;
         transform: translateY(-4px);
       }
      
      img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        transition: all 0.3s ease;
      }
      
      .card-info {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
        color: white;
        padding: 20px 16px 16px;
        
                 .info-icon {
           font-size: 20px;
           margin-bottom: 8px;
           color: $primary-color;
         }
        
        h4 {
          font-size: 16px;
          font-weight: 600;
          margin-bottom: 4px;
        }
        
        p {
          font-size: 12px;
          opacity: 0.9;
          text-transform: uppercase;
          letter-spacing: 1px;
        }
      }
      
      &:hover img {
        transform: scale(1.05);
      }
    }
  }
  
  .honors-section {
         .honors-header {
       text-align: center;
       margin-bottom: 32px;
       
       .header-icon {
         font-size: 32px;
         margin-bottom: 12px;
         color: $primary-color;
       }
       
       h3 {
         font-size: 24px;
         font-weight: 600;
         color: $text-primary;
         margin-bottom: 4px;
       }
       
       p {
         font-size: 12px;
         color: $text-muted;
         letter-spacing: 2px;
         text-transform: uppercase;
       }
     }
    
    .honors-compact-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 16px;
      
      @media (max-width: 768px) {
        grid-template-columns: repeat(2, 1fr);
      }
      
      @media (max-width: 480px) {
        grid-template-columns: 1fr;
      }
    }
    
         .honor-card {
       display: flex;
       align-items: center;
       gap: 12px;
       padding: 16px;
       background: $surface-color;
       border: 1px solid $border-color;
       border-radius: 12px;
       transition: all 0.3s ease;
       
       &:hover {
         box-shadow: $shadow-md;
         transform: translateY(-2px);
         border-color: $primary-color;
       }
       
       .honor-icon {
         font-size: 20px;
         flex-shrink: 0;
         color: $primary-color;
       }
       
       .honor-content {
         flex: 1;
         
         h4 {
           font-size: 14px;
           font-weight: 600;
           color: $text-primary;
           margin-bottom: 2px;
         }
         
         span {
           font-size: 12px;
           color: $text-muted;
         }
       }
     }
  }
}

/* Production Process 区块样式 */
 .production-process {
   padding: 60px 0;
   background: $surface-color;
   position: relative;
  
  .production-content {
    display: grid;
    gap: 40px;
  }
  
  .process-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 32px;
    
    @media (max-width: 768px) {
      flex-direction: column;
      gap: 20px;
    }
    
         .flow-item {
       text-align: center;
       padding: 20px 16px;
       background: $surface-color;
       border: 1px solid $border-color;
       border-radius: 12px;
       min-width: 140px;
       transition: all 0.3s ease;
       
       &:hover {
         box-shadow: $shadow-md;
         transform: translateY(-4px);
         border-color: $primary-color;
       }
       
       .flow-icon {
         font-size: 24px;
         margin-bottom: 8px;
         color: $primary-color;
       }
       
       h4 {
         font-size: 14px;
         font-weight: 600;
         color: $text-primary;
         margin-bottom: 4px;
       }
       
       p {
         font-size: 12px;
         color: $text-muted;
         line-height: 1.3;
       }
     }
    
         .flow-arrow {
       font-size: 20px;
       color: $primary-color;
       font-weight: bold;
      
      @media (max-width: 768px) {
        transform: rotate(90deg);
      }
    }
  }
  
  .workshop-compact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
    
    @media (max-width: 768px) {
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }
    
    @media (max-width: 480px) {
      grid-template-columns: 1fr;
    }
  }
  
     .workshop-card {
     position: relative;
     border-radius: 12px;
     overflow: hidden;
     background: $surface-color;
     border: 1px solid $border-color;
     transition: all 0.3s ease;
     
     &:hover {
       box-shadow: $shadow-lg;
       transform: translateY(-4px);
     }
    
    img {
      width: 100%;
      height: 150px;
      object-fit: cover;
      transition: all 0.3s ease;
    }
    
         .card-badge {
       position: absolute;
       bottom: 8px;
       left: 8px;
       background: rgba(255, 255, 255, 0.95);
       backdrop-filter: blur(10px);
       padding: 6px 12px;
       border-radius: 20px;
       display: flex;
       align-items: center;
       gap: 6px;
       font-size: 12px;
       font-weight: 500;
       color: $text-primary;
       box-shadow: $shadow-sm;
       
       i {
         font-size: 14px;
         color: $primary-color;
       }
     }
    
    &:hover img {
      transform: scale(1.05);
    }
  }
  
  .production-stats {
         .stats-header {
       text-align: center;
       margin-bottom: 32px;
       
       .header-icon {
         font-size: 32px;
         margin-bottom: 12px;
         color: $primary-color;
       }
       
       h3 {
         font-size: 24px;
         font-weight: 600;
         color: $text-primary;
         margin-bottom: 4px;
       }
       
       p {
         font-size: 12px;
         color: $text-muted;
         letter-spacing: 2px;
         text-transform: uppercase;
       }
     }
    
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 16px;
      
      @media (max-width: 768px) {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    
         .stat-card {
       display: flex;
       align-items: center;
       gap: 12px;
       padding: 20px 16px;
       background: $surface-color;
       border: 1px solid $border-color;
       border-radius: 12px;
       transition: all 0.3s ease;
       
       &:hover {
         box-shadow: $shadow-md;
         transform: translateY(-2px);
         border-color: $primary-color;
       }
       
       .stat-icon {
         font-size: 24px;
         flex-shrink: 0;
         color: $primary-color;
       }
       
       .stat-data {
         flex: 1;
         
         .stat-number {
           font-size: 20px;
           font-weight: 700;
           color: $text-primary;
           margin-bottom: 2px;
           line-height: 1;
         }
         
         .stat-label {
           font-size: 12px;
           color: $text-muted;
           line-height: 1.2;
         }
       }
     }
  }
}

/* 响应式优化已在各个组件中处理 */

/* 现代化动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@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);
  }
}

@keyframes gridMove {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(50px, 50px);
  }
}

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

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

/* 应用动画 */
.section-header {
  animation: fadeInUp 0.8s ease-out;
}

.philosophy-card {
  animation: slideInLeft 0.6s ease-out;
  
  &:nth-child(2) {
    animation-delay: 0.2s;
  }
}

.core-values {
  animation: slideInLeft 0.6s ease-out 0.4s both;
}

.brand-visual {
  animation: slideInRight 0.8s ease-out 0.2s both;
}

.tech-visual {
  animation: slideInLeft 0.8s ease-out 0.2s both;
}

.tech-info {
  animation: slideInRight 0.8s ease-out 0.4s both;
}

.highlight-card {
  animation: fadeInUp 0.6s ease-out;
  
  &:nth-child(1) { animation-delay: 0.1s; }
  &:nth-child(2) { animation-delay: 0.2s; }
  &:nth-child(3) { animation-delay: 0.3s; }
}

.photo-item,
.workshop-item {
  animation: fadeInUp 0.6s ease-out;
  
  &:nth-child(1) { animation-delay: 0.1s; }
  &:nth-child(2) { animation-delay: 0.2s; }
  &:nth-child(3) { animation-delay: 0.3s; }
  &:nth-child(4) { animation-delay: 0.4s; }
  &:nth-child(5) { animation-delay: 0.5s; }
}

/* 现代化滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: $background-color;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: $gradient-primary;
  border-radius: 4px;
  transition: all 0.3s ease;
  
  &:hover {
    background: $gradient-dark;
  }
}

/* 全局优化 */
.main-content {
  section {
    position: relative;
    
         &::before {
       content: '';
       position: absolute;
       top: 0;
       left: 50%;
       transform: translateX(-50%);
       width: 60px;
       height: 1px;
       background: $gradient-primary;
       opacity: 0.3;
     }
  }
}

/* 响应式优化已在各个组件中处理 */
</style>

