<script setup>
import { ref, onMounted, nextTick } 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 animatedElements = ref([]);
const isVisible = ref(false);

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

// 观察器动画
onMounted(() => {
    nextTick(() => {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('animate-in');
                }
            });
        }, { threshold: 0.1 });

        document.querySelectorAll('.animate-on-scroll').forEach(el => {
            observer.observe(el);
        });
    });
});
</script>

<template>
  <div>
    <topBar class="define-topBar__components"></topBar>

    <!-- Hero Section with Parallax -->
    <div class="hero-section">
      <div class="hero-background">
        <div class="parallax-bg"></div>
        <div class="overlay-gradient"></div>
        <div class="animated-particles">
          <div class="particle" v-for="i in 20" :key="i"></div>
        </div>
        <div class="floating-shapes">
          <div class="shape shape-1"></div>
          <div class="shape shape-2"></div>
          <div class="shape shape-3"></div>
        </div>
      </div>
      
      <div class="hero-content animate-on-scroll">
        <div class="hero-text">
          <div class="hero-badge">
            <span class="badge-text">{{ t('about.hero.badge') }}</span>
          </div>
          <h1 class="hero-title">
            <span class="title-line">{{ t('about.page.title') }}</span>
            <span class="title-accent">{{ t('about.page.subtitle') }}</span>
          </h1>
          <p class="hero-description">{{ t('about.page.description') }}</p>
        </div>
        
        <div class="hero-stats">
          <div class="stat-item animate-on-scroll" data-delay="0.1">
            <div class="stat-circle">
              <svg viewBox="0 0 100 100">
                <circle cx="50" cy="50" r="45" class="stat-progress" stroke-dasharray="283" stroke-dashoffset="283"></circle>
              </svg>
              <div class="stat-number">15</div>
            </div>
            <div class="stat-label">{{ t('about.stats.experience') }}</div>
          </div>
          
          <div class="stat-item animate-on-scroll" data-delay="0.2">
            <div class="stat-circle">
              <svg viewBox="0 0 100 100">
                <circle cx="50" cy="50" r="45" class="stat-progress" stroke-dasharray="283" stroke-dashoffset="283"></circle>
              </svg>
              <div class="stat-number">600+</div>
            </div>
            <div class="stat-label">{{ t('about.stats.team') }}</div>
          </div>
          
          <div class="stat-item animate-on-scroll" data-delay="0.3">
            <div class="stat-circle">
              <svg viewBox="0 0 100 100">
                <circle cx="50" cy="50" r="45" class="stat-progress" stroke-dasharray="283" stroke-dashoffset="283"></circle>
              </svg>
              <div class="stat-number">50</div>
            </div>
            <div class="stat-label">{{ t('about.stats.countries') }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Smart Breadcrumb -->
    <div class="smart-breadcrumb">
      <div class="breadcrumb-container">
        <div class="breadcrumb-path">
          <a @click="goTab('home')" class="breadcrumb-item">
            <i class="iconfont icon-home"></i>
            <span>{{ t('about.breadcrumb.home') }}</span>
          </a>
          <div class="breadcrumb-separator">
            <i class="iconfont icon-arrow-right"></i>
          </div>
          <span class="breadcrumb-current">{{ t('about.breadcrumb.about') }}</span>
        </div>
        <div class="breadcrumb-progress">
          <div class="progress-bar"></div>
        </div>
      </div>
    </div>

    <main class="main-content">
      <!-- Company Introduction Section -->
      <section class="company-introduction">
        <div class="container">
          <div class="intro-layout">
            <div class="intro-content animate-on-scroll">
              <div class="intro-header">
                <div class="section-badge">
                  <i class="iconfont icon-building"></i>
                  <span>{{ t('about.intro.badge') }}</span>
                </div>
                <h2 class="intro-title">{{ t('about.intro.title') }}</h2>
                <div class="title-decoration">
                  <div class="decoration-line"></div>
                  <div class="decoration-dot"></div>
                </div>
              </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 class="intro-features">
                <div class="feature-item">
                  <i class="iconfont icon-check-circle"></i>
                  <span>{{ t('about.intro.feature1') }}</span>
                </div>
                <div class="feature-item">
                  <i class="iconfont icon-check-circle"></i>
                  <span>{{ t('about.intro.feature2') }}</span>
                </div>
                <div class="feature-item">
                  <i class="iconfont icon-check-circle"></i>
                  <span>{{ t('about.intro.feature3') }}</span>
                </div>
              </div>
            </div>
            
            <div class="intro-image animate-on-scroll">
              <div class="image-container">
                <div class="image-wrapper">
                  <img :src="cdnImageUrl('/static/about-us/company.png')" :alt="t('about.company.image')" class="company-photo" />
                  <div class="image-overlay">
                    <div class="overlay-content">
                      <i class="iconfont icon-play-circle"></i>
                      <span>{{ t('about.intro.watch') }}</span>
                    </div>
                  </div>
                </div>
                <div class="floating-card">
                  <i class="iconfont icon-award"></i>
                  <div class="card-content">
                    <h4>{{ t('about.intro.award.title') }}</h4>
                    <p>{{ t('about.intro.award.desc') }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- Company Achievements Section -->
      <section class="company-achievements">
        <div class="container">
          <div class="section-header animate-on-scroll">
            <div class="header-decoration">
              <div class="decoration-line"></div>
              <div class="decoration-dot"></div>
            </div>
            <h2 class="section-title-pro">
              <span class="title-label">ACHIEVEMENTS</span>
              <span class="title-main">{{ t('about.achievements.title') }}</span>
              <span class="title-subtitle">{{ t('about.achievements.subtitle') }}</span>
            </h2>
          </div>
          
          <div class="achievements-showcase">
            <div class="achievements-grid">
              <div class="achievement-card animate-on-scroll" data-delay="0.1">
                <div class="card-visual">
                  <div class="icon-circle">
                    <i class="iconfont icon-global"></i>
                  </div>
                  <div class="progress-ring">
                    <svg viewBox="0 0 100 100">
                      <circle cx="50" cy="50" r="45" class="progress-bg"></circle>
                      <circle cx="50" cy="50" r="45" class="progress-fill" stroke-dasharray="283" stroke-dashoffset="283"></circle>
                    </svg>
                  </div>
                </div>
                <div class="card-content">
                  <div class="achievement-number">50+</div>
                  <div class="achievement-label">{{ t('about.achievements.countries') }}</div>
                  <div class="achievement-desc">{{ t('about.achievements.countries.desc') }}</div>
                </div>
              </div>
              
              <div class="achievement-card featured animate-on-scroll" data-delay="0.2">
                <div class="featured-badge">
                  <i class="iconfont icon-star"></i>
                  <span>{{ t('about.achievements.featured') }}</span>
                </div>
                <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 class="vision-highlights">
                      <span class="highlight-tag">{{ t('about.achievements.vision.tag1') }}</span>
                      <span class="highlight-tag">{{ t('about.achievements.vision.tag2') }}</span>
                    </div>
                  </div>
                </div>
              </div>
              
              <div class="achievement-card animate-on-scroll" data-delay="0.3">
                <div class="card-visual">
                  <div class="icon-circle">
                    <i class="iconfont icon-team"></i>
                  </div>
                  <div class="progress-ring">
                    <svg viewBox="0 0 100 100">
                      <circle cx="50" cy="50" r="45" class="progress-bg"></circle>
                      <circle cx="50" cy="50" r="45" class="progress-fill" stroke-dasharray="283" stroke-dashoffset="283"></circle>
                    </svg>
                  </div>
                </div>
                <div class="card-content">
                  <div class="achievement-number">100+</div>
                  <div class="achievement-label">{{ t('about.achievements.team') }}</div>
                  <div class="achievement-desc">{{ t('about.achievements.team.desc') }}</div>
                </div>
              </div>
              
              <div class="achievement-card animate-on-scroll" data-delay="0.4">
                <div class="card-visual">
                  <div class="icon-circle">
                    <i class="iconfont icon-time"></i>
                  </div>
                  <div class="progress-ring">
                    <svg viewBox="0 0 100 100">
                      <circle cx="50" cy="50" r="45" class="progress-bg"></circle>
                      <circle cx="50" cy="50" r="45" class="progress-fill" stroke-dasharray="283" stroke-dashoffset="283"></circle>
                    </svg>
                  </div>
                </div>
                <div class="card-content">
                  <div class="achievement-number">15+</div>
                  <div class="achievement-label">{{ t('about.achievements.experience') }}</div>
                  <div class="achievement-desc">{{ t('about.achievements.experience.desc') }}</div>
                </div>
              </div>
            </div>
            
            <div class="achievements-summary animate-on-scroll" data-delay="0.5">
              <div class="summary-content">
                <div class="summary-icon">
                  <i class="iconfont icon-chart-line"></i>
                </div>
                <div class="summary-text">
                  <h4>{{ t('about.achievements.summary.title') }}</h4>
                  <p>{{ t('about.achievements.summary.desc') }}</p>
                </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;
  }
}

/* Hero Section 样式 */
.hero-section {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
  position: relative;
  padding: 120px 0 100px;
  overflow: hidden;
  min-height: 600px;

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

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

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

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

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

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

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

  .hero-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
    .parallax-bg {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 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.3;
      filter: brightness(0.8) contrast(1.3);
      transform: translateZ(0);
      will-change: transform;
    }
    
    .overlay-gradient {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.8) 50%, rgba(79, 140, 239, 0.6) 100%);
      z-index: 1;
    }
    
    .animated-particles {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      
      .particle {
        position: absolute;
        width: 4px;
        height: 4px;
        background: rgba(255, 255, 255, 0.6);
        border-radius: 50%;
        animation: particleFloat 8s ease-in-out infinite;
        
        &:nth-child(1) { top: 10%; left: 20%; animation-delay: 0s; }
        &:nth-child(2) { top: 30%; left: 80%; animation-delay: 1s; }
        &:nth-child(3) { top: 50%; left: 10%; animation-delay: 2s; }
        &:nth-child(4) { top: 70%; left: 90%; animation-delay: 3s; }
        &:nth-child(5) { top: 20%; left: 60%; animation-delay: 4s; }
        &:nth-child(6) { top: 80%; left: 30%; animation-delay: 5s; }
        &:nth-child(7) { top: 40%; left: 70%; animation-delay: 6s; }
        &:nth-child(8) { top: 90%; left: 50%; animation-delay: 7s; }
        &:nth-child(9) { top: 15%; left: 40%; animation-delay: 0.5s; }
        &:nth-child(10) { top: 65%; left: 85%; animation-delay: 1.5s; }
        &:nth-child(11) { top: 35%; left: 15%; animation-delay: 2.5s; }
        &:nth-child(12) { top: 75%; left: 65%; animation-delay: 3.5s; }
        &:nth-child(13) { top: 25%; left: 90%; animation-delay: 4.5s; }
        &:nth-child(14) { top: 85%; left: 20%; animation-delay: 5.5s; }
        &:nth-child(15) { top: 45%; left: 45%; animation-delay: 6.5s; }
        &:nth-child(16) { top: 95%; left: 75%; animation-delay: 7.5s; }
        &:nth-child(17) { top: 5%; left: 35%; animation-delay: 1s; }
        &:nth-child(18) { top: 55%; left: 95%; animation-delay: 2s; }
        &:nth-child(19) { top: 95%; left: 5%; animation-delay: 3s; }
        &:nth-child(20) { top: 75%; left: 55%; animation-delay: 4s; }
      }
    }
    
    .floating-shapes {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 3;
      
      .shape {
        position: absolute;
        opacity: 0.1;
        animation: shapeFloat 12s ease-in-out infinite;
        
        &.shape-1 {
          top: 20%;
          left: 10%;
          width: 60px;
          height: 60px;
          background: linear-gradient(45deg, #4f8cef, #6fa3f2);
          border-radius: 50%;
          animation-delay: 0s;
        }
        
        &.shape-2 {
          top: 60%;
          right: 15%;
          width: 40px;
          height: 40px;
          background: linear-gradient(45deg, #3b82f6, #60a5fa);
          border-radius: 8px;
          transform: rotate(45deg);
          animation-delay: 4s;
        }
        
        &.shape-3 {
          bottom: 30%;
          left: 70%;
          width: 50px;
          height: 50px;
          background: linear-gradient(45deg, #1d4ed8, #3b82f6);
          border-radius: 50%;
          animation-delay: 8s;
        }
      }
    }
  }

    .hero-content {
    position: relative;
    z-index: 10;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    
    @media (max-width: 968px) {
      grid-template-columns: 1fr;
      text-align: center;
      gap: 60px;
    }
  }

    .hero-text {
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    
    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 20px;
      padding: 8px 16px;
      margin-bottom: 24px;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 1px;
      text-transform: uppercase;
      animation: slideInUp 0.8s ease-out;
      
      .badge-text {
        color: rgba(255, 255, 255, 0.9);
      }
    }
    
    .hero-title {
      margin-bottom: 24px;
      
      .title-line {
        display: block;
        font-size: 48px;
        font-weight: 700;
        font-family: $font-bold;
        line-height: 1.1;
        margin-bottom: 12px;
        letter-spacing: -1px;
        background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        
        // 4K 和超大屏幕
        @media (min-width: 2560px) {
          font-size: 72px;
          margin-bottom: 20px;
          letter-spacing: -2px;
        }

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

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

        @media (max-width: 1024px) {
          font-size: 42px;
          margin-bottom: 12px;
        }
        
        @media (max-width: 768px) {
          font-size: 36px;
          margin-bottom: 10px;
          letter-spacing: -0.5px;
        }

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

        @media (max-width: 375px) {
          font-size: 28px;
          margin-bottom: 6px;
          letter-spacing: 0;
        }
      }
      
      .title-accent {
        display: block;
        font-size: 18px;
        font-weight: 500;
        font-family: $font-medium;
        opacity: 0.9;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #4f8cef;
        
        @media (max-width: 768px) {
          font-size: 16px;
        }
      }
    }
    
    .hero-description {
      font-size: 18px;
      line-height: 1.7;
      opacity: 0.95;
      font-weight: 400;
      font-family: $font-light;
      margin-bottom: 32px;
      
      @media (max-width: 768px) {
        font-size: 16px;
        margin-bottom: 24px;
      }
    }
  }

    .hero-stats {
    display: flex;
    flex-direction: column;
    gap: 24px;
    
    @media (max-width: 968px) {
      flex-direction: row;
      justify-content: center;
      gap: 20px;
    }
    
    @media (max-width: 480px) {
      flex-direction: column;
      align-items: center;
    }
    
    .stat-item {
      display: flex;
      align-items: center;
      gap: 16px;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 16px;
      padding: 20px;
      color: white;
      transition: all 0.3s ease;
      
      &:hover {
        background: rgba(255, 255, 255, 0.15);
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
      }
      
      .stat-circle {
        position: relative;
        width: 60px;
        height: 60px;
        flex-shrink: 0;
        
        svg {
          width: 100%;
          height: 100%;
          transform: rotate(-90deg);
          
          circle {
            fill: none;
            stroke-width: 4;
            stroke-linecap: round;
            
            &.stat-progress {
              stroke: #4f8cef;
              stroke-dasharray: 283;
              stroke-dashoffset: 283;
              animation: progressFill 2s ease-out forwards;
              animation-delay: 1s;
            }
          }
        }
        
        .stat-number {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 18px;
          font-weight: 700;
          font-family: $font-bold;
          color: white;
        }
      }
      
      .stat-label {
        font-size: 14px;
        font-weight: 500;
        font-family: $font-medium;
        opacity: 0.9;
        line-height: 1.3;
      }
    }
  }
}

/* Elegant Breadcrumb 样式 */
.smart-breadcrumb {
  background: $surface-color;
  border-bottom: 1px solid $border-color;
  padding: 20px 0;
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #4f8cef, #6fa3f2, #4f8cef);
    background-size: 200% 100%;
    animation: shimmer 3s ease-in-out infinite;
  }
  
  .breadcrumb-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    @media (max-width: 768px) {
      padding: 0 16px;
    }
  }
  
  .breadcrumb-path {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    
    .breadcrumb-item {
      color: $text-secondary;
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      border-radius: 8px;
      transition: all 0.3s ease;
      font-weight: 500;
      font-family: $font-medium;
      background: rgba(79, 140, 239, 0.05);
      border: 1px solid transparent;
      
      &:hover {
        background: rgba(79, 140, 239, 0.1);
        color: $primary-color;
        border-color: rgba(79, 140, 239, 0.2);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(79, 140, 239, 0.1);
      }
      
      i {
        font-size: 16px;
        color: $primary-color;
      }
    }
    
    .breadcrumb-separator {
      color: $text-muted;
      font-weight: 300;
      margin: 0 4px;
      
      i {
        font-size: 12px;
        color: $text-muted;
      }
    }
    
    .breadcrumb-current {
      color: $primary-color;
      font-weight: 600;
      font-family: $font-semibold;
      padding: 8px 16px;
      background: linear-gradient(135deg, rgba(79, 140, 239, 0.1), rgba(111, 163, 242, 0.1));
      border: 1px solid rgba(79, 140, 239, 0.2);
      border-radius: 8px;
      position: relative;
      
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(79, 140, 239, 0.1), rgba(111, 163, 242, 0.1));
        border-radius: 8px;
        opacity: 0;
        transition: opacity 0.3s ease;
      }
      
      &:hover::before {
        opacity: 1;
      }
    }
  }
  
  .breadcrumb-progress {
    width: 100px;
    height: 4px;
    background: rgba(79, 140, 239, 0.1);
    border-radius: 2px;
    overflow: hidden;
    
    .progress-bar {
      height: 100%;
      background: linear-gradient(90deg, #4f8cef, #6fa3f2);
      border-radius: 2px;
      width: 0;
      animation: progressFill 2s ease-out forwards;
      animation-delay: 0.5s;
    }
  }
}

/* 主内容区 */
.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: 40px;
      
      .section-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: linear-gradient(135deg, rgba(79, 140, 239, 0.1), rgba(111, 163, 242, 0.1));
        border: 1px solid rgba(79, 140, 239, 0.2);
        border-radius: 20px;
        padding: 8px 16px;
        margin-bottom: 20px;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: $primary-color;
        animation: slideInUp 0.8s ease-out;
        
        i {
          font-size: 14px;
        }
      }
      
      .intro-title {
        font-size: 42px;
        font-weight: 700;
        color: $text-primary;
        line-height: 1.2;
        margin: 0 0 16px 0;
        background: linear-gradient(135deg, $text-primary 0%, $primary-color 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        
        @media (max-width: 768px) {
          font-size: 28px;
        }
      }
      
      .title-decoration {
        display: flex;
        align-items: center;
        gap: 12px;
        
        .decoration-line {
          width: 60px;
          height: 3px;
          background: linear-gradient(90deg, #4f8cef, #6fa3f2);
          border-radius: 2px;
        }
        
        .decoration-dot {
          width: 8px;
          height: 8px;
          background: $primary-color;
          border-radius: 50%;
        }
      }
    }

        .intro-text {
      .intro-paragraph {
        font-size: 16px;
        line-height: 1.8;
        color: $text-secondary;
        margin-bottom: 24px;
        text-align: justify;
        
        &:last-child {
          margin-bottom: 32px;
        }
      }
    }
    
    .intro-features {
      display: flex;
      flex-direction: column;
      gap: 12px;
      
      .feature-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        background: rgba(79, 140, 239, 0.05);
        border: 1px solid rgba(79, 140, 239, 0.1);
        border-radius: 12px;
        transition: all 0.3s ease;
        
        &:hover {
          background: rgba(79, 140, 239, 0.1);
          border-color: rgba(79, 140, 239, 0.2);
          transform: translateX(8px);
          box-shadow: 0 4px 12px rgba(79, 140, 239, 0.1);
        }
        
        i {
          font-size: 18px;
          color: $primary-color;
          flex-shrink: 0;
        }
        
        span {
          font-size: 14px;
          font-weight: 500;
          color: $text-primary;
        }
      }
    }
  }

  .intro-image {
    display: flex;
    justify-content: center;
    align-items: center;
    
    .image-container {
      position: relative;
      max-width: 450px;
      width: 100%;
      
      .image-wrapper {
        position: relative;
        border-radius: 20px;
        overflow: hidden;
        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);
        }
        
        .company-photo {
          width: 100%;
          height: auto;
          border-radius: 20px;
          transition: all 0.3s ease;
        }
        
        .image-overlay {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
          display: flex;
          align-items: center;
          justify-content: center;
          opacity: 0;
          transition: all 0.3s ease;
          
          .overlay-content {
            display: flex;
            align-items: center;
            gap: 8px;
            color: white;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            
            i {
              font-size: 24px;
              color: #4f8cef;
            }
          }
        }
        
        &:hover .image-overlay {
          opacity: 1;
        }
        
        &:hover .company-photo {
          transform: scale(1.05);
        }
      }
      
      .floating-card {
        position: absolute;
        top: -20px;
        right: -20px;
        background: white;
        border-radius: 16px;
        padding: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        gap: 12px;
        max-width: 200px;
        animation: slideInRight 0.8s ease-out 0.5s both;
        
        i {
          font-size: 24px;
          color: #4f8cef;
          flex-shrink: 0;
        }
        
        .card-content {
          h4 {
            font-size: 14px;
            font-weight: 600;
            color: $text-primary;
            margin-bottom: 4px;
          }
          
          p {
            font-size: 12px;
            color: $text-secondary;
            line-height: 1.3;
            margin: 0;
          }
        }
      }
      
      &::before {
        content: '';
        position: absolute;
        top: -30px;
        right: -30px;
        width: 120px;
        height: 120px;
        background: linear-gradient(135deg, #4f8cef, #6fa3f2);
        border-radius: 50%;
        opacity: 0.1;
        z-index: -1;
        animation: float 6s ease-in-out infinite;
      }
      
      &::after {
        content: '';
        position: absolute;
        bottom: -40px;
        left: -40px;
        width: 100px;
        height: 100px;
        background: linear-gradient(135deg, $primary-color, #6fa3f2);
        border-radius: 50%;
        opacity: 0.1;
        z-index: -1;
        animation: float 6s ease-in-out infinite 2s;
      }
    }
  }
}

/* Company Achievements 区块样式 */
.company-achievements {
  padding: 80px 0;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
  position: relative;
  overflow: hidden;
  
  &::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="grid" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(79,140,239,0.03)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
    opacity: 0.5;
  }
  
  .achievements-showcase {
    position: relative;
    z-index: 2;
  }
  
  .achievements-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 40px;
    
    @media (max-width: 1200px) {
      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: 20px;
    padding: 32px 24px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(79, 140, 239, 0.1);
    position: relative;
    overflow: hidden;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, #4f8cef, #6fa3f2);
      transform: scaleX(0);
      transition: transform 0.3s ease;
    }
    
    &:hover {
      transform: translateY(-12px);
      box-shadow: 0 20px 40px rgba(79, 140, 239, 0.15);
      border-color: rgba(79, 140, 239, 0.2);
      
      &::before {
        transform: scaleX(1);
      }
      
      .card-visual .progress-fill {
        stroke-dashoffset: 0;
      }
    }
    
    .card-visual {
      position: relative;
      width: 80px;
      height: 80px;
      margin: 0 auto 24px;
      
      .icon-circle {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 60px;
        height: 60px;
        background: linear-gradient(135deg, #4f8cef, #6fa3f2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
        box-shadow: 0 4px 12px rgba(79, 140, 239, 0.3);
        
        i {
          font-size: 24px;
          color: white;
        }
      }
      
      .progress-ring {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        
        svg {
          width: 100%;
          height: 100%;
          transform: rotate(-90deg);
          
          circle {
            fill: none;
            stroke-width: 3;
            stroke-linecap: round;
            
            &.progress-bg {
              stroke: rgba(79, 140, 239, 0.1);
            }
            
            &.progress-fill {
              stroke: #4f8cef;
              stroke-dasharray: 283;
              stroke-dashoffset: 283;
              transition: stroke-dashoffset 1.5s ease-out;
              transition-delay: 0.5s;
            }
          }
        }
      }
    }
    
    .card-content {
      .achievement-number {
        font-size: 36px;
        font-weight: 700;
        color: $text-primary;
        margin-bottom: 8px;
        line-height: 1;
        background: linear-gradient(135deg, #4f8cef, #6fa3f2);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
      
      .achievement-label {
        font-size: 16px;
        color: $text-primary;
        font-weight: 600;
        margin-bottom: 8px;
      }
      
      .achievement-desc {
        font-size: 14px;
        color: $text-secondary;
        line-height: 1.4;
      }
    }
    
    &.featured {
      background: linear-gradient(135deg, #4f8cef 0%, #6fa3f2 50%, #3b82f6 100%);
      color: white;
      grid-column: span 1;
      position: relative;
      
      @media (max-width: 1200px) {
        grid-column: span 2;
      }
      
      @media (max-width: 768px) {
        grid-column: span 1;
      }
      
      &::after {
        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="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
        opacity: 0.3;
      }
      
      .featured-badge {
        position: absolute;
        top: 16px;
        right: 16px;
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
        border-radius: 20px;
        padding: 6px 12px;
        font-size: 12px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 4px;
        color: white;
        
        i {
          font-size: 12px;
          color: #ffd700;
        }
      }
      
      .featured-content {
        position: relative;
        z-index: 2;
        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: 80px;
          height: 80px;
          background: rgba(255, 255, 255, 0.2);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          backdrop-filter: blur(10px);
          border: 2px solid rgba(255, 255, 255, 0.3);
          
          i {
            font-size: 32px;
            color: white;
          }
        }
        
        .featured-text {
          flex: 1;
          
          h3 {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 12px;
            color: white;
            line-height: 1.2;
          }
          
          p {
            font-size: 16px;
            line-height: 1.6;
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 16px;
          }
          
          .vision-highlights {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            
            .highlight-tag {
              background: rgba(255, 255, 255, 0.2);
              backdrop-filter: blur(10px);
              border: 1px solid rgba(255, 255, 255, 0.3);
              border-radius: 20px;
              padding: 6px 12px;
              font-size: 12px;
              font-weight: 600;
              color: white;
            }
          }
        }
      }
    }
  }
  
  .achievements-summary {
    background: $surface-color;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(79, 140, 239, 0.1);
    
    .summary-content {
      display: flex;
      align-items: center;
      gap: 24px;
      
      @media (max-width: 768px) {
        flex-direction: column;
        text-align: center;
        gap: 16px;
      }
      
      .summary-icon {
        width: 60px;
        height: 60px;
        background: linear-gradient(135deg, #4f8cef, #6fa3f2);
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        
        i {
          font-size: 24px;
          color: white;
        }
      }
      
      .summary-text {
        flex: 1;
        
        h4 {
          font-size: 20px;
          font-weight: 600;
          color: $text-primary;
          margin-bottom: 8px;
        }
        
        p {
          font-size: 16px;
          line-height: 1.6;
          color: $text-secondary;
          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 particleFloat {
  0%, 100% {
    transform: translateY(0px) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-20px) scale(1.2);
    opacity: 1;
  }
}

@keyframes shapeFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-30px) rotate(180deg);
  }
}

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

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

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

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes rotateIn {
  from {
    opacity: 0;
    transform: rotate(-180deg) scale(0.3);
  }
  to {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}

@keyframes progressFill {
  from {
    stroke-dashoffset: 283;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* 滚动动画类 */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  
  &.animate-in {
    opacity: 1;
    transform: translateY(0);
  }
  
  &[data-delay="0.1"] { transition-delay: 0.1s; }
  &[data-delay="0.2"] { transition-delay: 0.2s; }
  &[data-delay="0.3"] { transition-delay: 0.3s; }
  &[data-delay="0.4"] { transition-delay: 0.4s; }
  &[data-delay="0.5"] { transition-delay: 0.5s; }
}

/* 应用动画 */
.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>
