/* ============================================================================

   TUNEN �INDUSTRIAL EDITORIAL DESIGN SYSTEM v7.0

   工业ç¼-è¾'美学：ç'žå£«å¹³é¢è®¾è®¡é‡è§é‡åž‹å·¥ä¸?

   精确æŽ'版、克制色彩、ç»"构åŒ-不对称、大胆留ç™?

   ============================================================================ */



:root {

  /* ===== å­-ä½"系统 ===== */

  --font-display: 'DM Sans', 'Noto Sans SC', system-ui, sans-serif;

  --font-body: system-ui, -apple-system, 'Segoe UI', 'Roboto', sans-serif;

  --font-mono: 'JetBrains Mono', 'Cascadia Code', 'Consolas', monospace;

  /* å­-ä½"别名（统一设计令牌ï¼?*/

  --font-sans: var(--font-body);



  /* ===== 色彩系统（工业ç¼-è¾'美学） ===== */

  /* 基础色板 - 带è"æŸ"色的深灰阶 */

  --ink: oklch(15% 0.015 240);        /* 主背æ™?*/

  --titanium: oklch(20% 0.018 240);   /* 次级背景 */

  --steel: oklch(25% 0.020 240);      /* 表面è‰?*/

  --carbon: oklch(30% 0.022 240);     /* 高亮表面 */



  /* 统一背景令牌 */

  --bg-primary: #0a0e17;              /* 主背æ™?- 极深è"é»' */

  --bg-secondary: #111827;            /* 次背æ™?- section-alt */

  --bg-tertiary: #1a1f2e;             /* 第三背景 - 卡片ç"?*/



  /* å"ç‰Œè‰?- 统一为工业è" */

  --electric-blue: #0F74BB;           /* 主å"ç‰Œè" */

  --electric-light: #48a8e6;          /* 高亮è"?*/

  --copper: #f77f00;                  /* é"œæ©™ - ç"¨äºŽå¼ºè°ƒ */

  --copper-light: #fcbf49;            /* 浅é"œæ©?*/



  /* 统一å"ç‰Œä»¤ç‰Œ */

  --color-accent: var(--electric-blue);

  --color-accent-light: var(--electric-light);

  --color-gold: #c9a84c;              /* é‡'色 - 证书/资质 */

  --color-green: #3DCD58;             /* æ-½è€å¾·ç»?*/



  /* 功能è‰?*/

  --success: #9BC529;

  --alert: #9d0208;



  /* ===== 表面色层çº?===== */

  --surface-dim: rgba(0, 0, 0, 0.3);

  --surface-bright: rgba(255, 255, 255, 0.05);

  --surface-raised: rgba(20, 31, 53, 0.6);

  --surface-glass: rgba(255, 255, 255, 0.02);

  --surface-overlay: rgba(8, 15, 26, 0.85);



  /* ===== æ-‡å­-层级 ===== */

  --text-primary: #e8edf4;

  --text-secondary: #4A5568;

  --text-tertiary: #636e7b;

  --text-muted: #4a5568;



  /* ===== 统一å­-ä½"大小层级 ===== */

  --text-xs: clamp(0.75rem, 0.85vw, 0.8rem);    /* min 12px */    /* 标签/注释 */

  --text-sm: clamp(0.875rem, 1vw, 0.95rem);     /* min 14px */     /* 辅助æ-‡å­- */

  --text-base: clamp(0.95rem, 1.2vw, 1.05rem);  /* min 15.2px */  /* æ­£æ-‡ */

  --text-lg: clamp(1.05rem, 1.4vw, 1.2rem);     /* min 16.8px */     /* 强调正æ-‡ */

  --text-xl: clamp(1.2rem, 1.8vw, 1.5rem);     /* min 19.2px */     /* 小标é¢?*/

  --text-2xl: clamp(1.4rem, 2.2vw, 1.8rem);    /* min 22.4px */    /* 中标é¢?*/

  --text-3xl: clamp(1.7rem, 3vw, 2.4rem);      /* min 27.2px */      /* 大标é¢?*/

  --text-4xl: clamp(2rem, 4.5vw, 3rem);         /* min 32px */    /* hero主标é¢?*/



  /* ===== 边框系统 ===== */

  --border-default: rgba(72, 202, 228, 0.08);

  --border-active: rgba(72, 202, 228, 0.25);

  --border-subtle: rgba(72,168,230,0.08);

  --border-strong: rgba(72,168,230,0.25);



  /* ===== é-´è·ç³»ç»Ÿï¼ˆåŸºäº?pxï¼?===== */

  --sp-1: clamp(2px, 0.26vw, 4px);

  --sp-2: clamp(4px, 0.52vw, 8px);

  --sp-3: clamp(6px, 0.78vw, 12px);

  --sp-4: clamp(8px, 1.04vw, 16px);

  --sp-5: clamp(10px, 1.3vw, 20px);

  --sp-6: clamp(12px, 1.56vw, 24px);

  --sp-8: clamp(16px, 2.08vw, 32px);

  --sp-10: clamp(20px, 2.6vw, 40px);

  --sp-12: clamp(24px, 3.12vw, 48px);

  --sp-16: clamp(32px, 4.16vw, 64px);

  --sp-20: clamp(40px, 5.2vw, 80px);

  --sp-24: clamp(48px, 6.25vw, 96px);



  /* ===== 圆è§'系统 ===== */

  --r-sm: 6px;

  --r-md: 8px;

  --r-lg: 12px;

  --r-xl: 16px;



  /* ===== 阴影系统 ===== */

  --elevation-1: 

    0 1px 2px rgba(0, 0, 0, 0.3),

    0 2px 4px rgba(0, 0, 0, 0.2);

  --elevation-2: 

    0 4px 8px rgba(0, 0, 0, 0.25),

    0 8px 16px rgba(0, 0, 0, 0.2),

    0 0 0 1px rgba(15, 116, 187, 0.1);

  --elevation-glow: 

    0 0 20px rgba(15, 116, 187, 0.1),

    0 0 40px rgba(15, 116, 187, 0.05);



  /* 统一阴影令牌 */

  --shadow-sm: 0 2px 8px rgba(0,0,0,0.2);

  --shadow-md: 0 4px 16px rgba(0,0,0,0.3);

  --shadow-lg: 0 8px 32px rgba(0,0,0,0.4);



  /* ===== 动ç"»æ›²çº¿ï¼ˆæŒ‡æ•°ç¼"出） ===== */

  --transition: 0.35s cubic-bezier(0.16, 1, 0.3, 1);

  --transition-slow: 0.5s cubic-bezier(0.16, 1, 0.3, 1);

  --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);

}



/* ============================================================================

   全局重置与基础样式

   ============================================================================ */

*, *::before, *::after {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



html {

  scroll-behavior: smooth;

  -webkit-text-size-adjust: 100%;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}



body {

  background: var(--ink);

  color: var(--text-primary);

  font-family: var(--font-body);

  font-size: clamp(14px, 1vw, 16px); /* ä»?5px增大åˆ?6px */

  line-height: 1.72; /* 更宽松的阅读节奏 */

  overflow-x: hidden;

  min-height: 100vh;

}



/* 移除全局ç½'格背景（æ"¹ä¸ºæŒ‰éœ€ä½¿ç"¨ï¼?*/

/* body::before 已删é™?*/



/* ============================================================================

   æŽ'版系统

   ============================================================================ */

h1, h2, h3, h4, h5, h6 {

  font-family: var(--font-display);

  font-weight: 750; /* ä»?00降低åˆ?50，更优雅 */

  line-height: 1.2;

  letter-spacing: -0.02em;

  margin-bottom: var(--sp-4);

}



/* 统一所有标题层çº?*/

h1 { font-size: var(--text-4xl); font-weight: 800; line-height: 1.15; }

h2 { font-size: var(--text-3xl); font-weight: 700; line-height: 1.2; }

h3 { font-size: var(--text-2xl); font-weight: 600; line-height: 1.3; }

h4 { font-size: var(--text-xl); font-weight: 600; line-height: 1.4; }



/* 统一段落 */

p {

  margin-bottom: var(--sp-4);

  max-width: 65ch; /* 优åŒ-阅读宽度 */

  color: #e8edf4;

  line-height: 1.8;

}



a {

  color: var(--color-accent-light);

  text-decoration: none;

  transition: color var(--transition-fast);

}



a:hover {

  color: var(--color-accent);

}



/* ============================================================================

   导航æ ?

   ============================================================================ */

.navbar {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  z-index: 1000;

  display: flex;

  align-items: center;

  justify-content: space-between;

  height: 68px;

  padding: 0 48px;

  background: rgba(10,18,30,0.85);

  backdrop-filter: blur(16px) saturate(180%);

  -webkit-backdrop-filter: blur(16px) saturate(180%);

  border: none;

  border-bottom: 1px solid rgba(59,130,246,0.1);

  border-radius: 0;

  box-shadow: none;

  transition: all 0.3s ease;

}



.navbar.scrolled {

  background: rgba(10,18,30,0.95);

  border-bottom: 1px solid rgba(59,130,246,0.2);

  box-shadow: 0 2px 24px rgba(0,0,0,0.3);

}



.nav-logo {

  font-size: 1.1rem;

  font-weight: 800;

  letter-spacing: 2px;

  text-decoration: none;

  color: var(--text-primary);

  display: flex;

  align-items: center;

  gap: var(--sp-3);

}



.nav-logo .logo-mark {

  width: 32px;

  height: 32px;

  border: 2px solid var(--electric-blue);

  border-radius: var(--r-sm);

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

}



.nav-logo .logo-mark::after {

  content: '';

  width: 12px;

  height: 12px;

  background: var(--electric-blue);

  border-radius: 2px;

}



.nav-links {

  display: flex;

  list-style: none;

  gap: var(--sp-2);

}



.nav-links li {

  display: flex;

  align-items: center;

}



.nav-links a {

  color: var(--text-secondary);

  text-decoration: none;

  padding: var(--sp-3) var(--sp-4);

  border-radius: var(--r-md);

  font-size: 0.9rem;

  font-weight: 500;

  letter-spacing: 0.5px; /* 增加å­-é-´è·?*/

  position: relative;

  transition: all var(--transition);

}



.nav-links a:hover {

  color: var(--text-primary);

  background: var(--surface-glass);

}



.dropdown-trigger:hover {

  color: var(--text-primary);

  background: var(--surface-glass);

}



/* === 下拉菜单 === */

.nav-dropdown {

  position: relative;

}



.dropdown-trigger {

  display: flex;

  align-items: center;

  gap: 4px;

  color: var(--text-secondary);

  text-decoration: none;

  padding: var(--sp-3) var(--sp-4);

  border-radius: var(--r-md);

  font-size: 0.9rem;

  font-weight: 500;

  letter-spacing: 0.5px;

  position: relative;

  transition: all var(--transition);

}



.dropdown-arrow {

  font-size: 0.6em;

  margin-left: 2px;

  transition: transform 0.25s ease;

  display: inline-block;

}



.nav-dropdown:hover .dropdown-arrow {

  transform: rotate(180deg);

}



.dropdown-menu {

  position: absolute;

  top: 100%;

  left: 50%;

  transform: translateX(-50%) translateY(8px);

  opacity: 0;

  visibility: hidden;

  transition: all 0.25s ease;

  list-style: none;

  padding: 6px 0;

  margin: 0;

  min-width: 140px;

  background: rgba(15,23,42,0.95);

  backdrop-filter: blur(16px);

  -webkit-backdrop-filter: blur(16px);

  border: 1px solid rgba(255,255,255,0.08);

  border-radius: 8px;

  box-shadow: 0 8px 32px rgba(0,0,0,0.4);

  z-index: 1000;

  pointer-events: none;

}



.nav-dropdown:hover .dropdown-menu {

  opacity: 1;

  visibility: visible;

  transform: translateX(-50%) translateY(0);

  pointer-events: auto;

}



.dropdown-menu li a {

  display: block;

  padding: 8px 20px;

  font-size: 0.85rem;

  color: rgba(255,255,255,0.6);

  white-space: nowrap;

  border-radius: 0;

  transition: all 0.2s ease;

}



.dropdown-menu li a:hover {

  color: #fff;

  background: rgba(59,130,246,0.15);

  padding-left: 24px;

}



.dropdown-menu li a.active {

  color: var(--electric-blue);

}



.nav-links a:hover::after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 50%;

  transform: translateX(-50%);

  width: 20px;

  height: 2px;

  background: var(--electric-blue);

  border-radius: 1px;

}



.nav-links a.active {

  color: var(--electric-blue);

  background: rgba(15, 116, 187, 0.08);

}



.nav-links a.active::after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 50%;

  transform: translateX(-50%);

  width: 20px;

  height: 2px;

  background: var(--electric-blue);

  border-radius: 1px;

}



.nav-dropdown:hover .dropdown-arrow {

  transform: rotate(180deg);

}



/* ============================================================================

   Hero 区域

   ============================================================================ */

.hero {

  position: relative;

  z-index: 1;

  min-height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  padding: 140px var(--sp-6) var(--sp-20);

  overflow: hidden;

}



/* Ken Burns 背景å±?- 更慢更沉ç¨?*/

.hero-bg-slideshow {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 0;

}



.hero-bg-slide {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-size: cover;

  background-position: center;

  opacity: 0;

  animation: kenburns 120s infinite; /* ä»?0s延长åˆ?20s */

}



@keyframes kenburns {

  0% { opacity: 0; transform: scale(1); }

  2% { opacity: 1; }

  22% { opacity: 1; transform: scale(1.1) translateX(1%) translateY(0.5%); }

  48% { opacity: 1; transform: scale(1.12) translateX(2%) translateY(1%); }

  98% { opacity: 0; transform: scale(1.12) translateX(2%) translateY(1%); }

  100% { opacity: 0; transform: scale(1.12) translateX(2%) translateY(1%); }

}



/* ç½'格叠加å±?- 更若隐若çŽ?*/

.hero::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-image: 

    linear-gradient(rgba(15, 116, 187, 0.12) 0.5px, transparent 0.5px),

    linear-gradient(90deg, rgba(15, 116, 187, 0.12) 0.5px, transparent 0.5px);

  background-size: 80px 80px;

  z-index: 1;

  pointer-events: none;

  opacity: 0.25; /* 降低透明åº?*/

}



.hero-content {

  position: relative;

  z-index: 2;

  max-width: 900px;

}



.hero-tag {

  display: inline-flex;

  align-items: center;

  gap: var(--sp-3);

  padding: var(--sp-2) var(--sp-5);

  border: 1px solid var(--border-active);

  border-radius: 100px;

  color: var(--electric-blue);

  font-size: 0.78rem;

  letter-spacing: 3px;

  font-weight: 600;

  margin-bottom: var(--sp-8);

}



.hero-tag::before {

  content: '';

  width: 6px;

  height: 6px;

  background: var(--electric-blue);

  border-radius: 50%;

  box-shadow: 0 0 8px var(--electric-blue);

}



.hero-title {

  font-size: clamp(3.2rem, 5vw, 4.5rem); /* 下限ä»?.8rem提高åˆ?.2rem */

  font-weight: 800;

  letter-spacing: -0.04em; /* 增加å­-é-´è·?*/

  line-height: 1.1;

  margin-bottom: var(--sp-6);

  background: linear-gradient(135deg, #fff 0%, var(--text-secondary) 100%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}



.hero-subtitle-brand {

  font-size: 1.2rem;

  font-weight: 350;

  color: var(--text-secondary);

  margin-bottom: var(--sp-3);

  max-width: 600px;

  margin-left: auto;

  margin-right: auto;

  line-height: 1.6;

}



.hero-sub {

  font-size: 1.08rem;

  color: var(--text-secondary);

  max-width: 560px;

  margin: 0 auto var(--sp-8);

  line-height: 1.75;

}



.hero-stats {

  display: flex;

  justify-content: center;

  gap: var(--sp-8);

  margin-bottom: var(--sp-12);

  flex-wrap: wrap;

}



.hero-stat {

  display: flex;

  flex-direction: column;

  align-items: center;

}



.hero-stat-number {

  font-family: var(--font-mono);

  font-size: 2.8rem;

  font-weight: 800;

  color: var(--electric-blue); /* 统一为å"ç‰Œè" */

  margin-bottom: var(--sp-1);

  text-shadow: 0 0 20px rgba(15, 116, 187, 0.3); /* 单一微光 */

}



.hero-stat-unit {

  font-size: 1rem;

  color: var(--text-tertiary);

  margin-left: 2px;

}



.hero-stat-label {

  font-size: 0.85rem;

  color: var(--text-secondary);

  letter-spacing: 1px;

}



.hero-stat-divider {

  width: 1px;

  height: 40px;

  background: var(--border-default);

}



.hero-cta {

  display: flex;

  gap: var(--sp-4);

  justify-content: center;

  margin-top: var(--sp-8);

}



/* ============================================================================

   Section 系统

   ============================================================================ */

.section {

  padding: var(--sp-20) var(--sp-12);

  position: relative;

}



#company.section,

#company.reveal-section {

  padding-left: 0 !important;

  padding-right: 0 !important;

}



.section-label {

  display: inline-flex;

  align-items: center;

  gap: var(--sp-3);

  font-size: 0.72rem;

  font-weight: 700;

  letter-spacing: 4px;

  color: var(--electric-blue);

  text-transform: uppercase;

  margin-bottom: var(--sp-4);

}



.section-label::before {

  content: '';

  width: 24px;

  height: 1px;

  background: var(--electric-blue);

  opacity: 0.6;

}



.section-title {

  font-size: clamp(2.4rem, 4vw, 3.2rem);

  font-weight: 750; /* ä»?00降低åˆ?50 */

  text-align: center;

  margin-bottom: var(--sp-6);

  line-height: 1.2;

}



.section-sub {

  font-size: 1.1rem;

  color: var(--text-secondary);

  text-align: center;

  max-width: 700px;

  margin: 0 auto var(--sp-12);

  line-height: 1.6;

}



.divider {

  width: 80px;

  height: 3px;

  background: linear-gradient(90deg, var(--electric-blue), var(--copper)); /* è"â†'é"œæ©™æ¸å˜ */

  margin: 0 auto var(--sp-8);

  border-radius: 2px;

}



/* ============================================================================

   业务板å-卡片

   ============================================================================ */

.cap-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

  gap: var(--sp-8);

  max-width: 1200px;

  margin: 0 auto;

}



.cap-card {

  background: rgba(255, 255, 255, 0.015); /* 更通é€?*/

  border-radius: var(--r-lg);

  padding: var(--sp-8);

  position: relative;

  transition: all var(--transition);

  box-shadow: var(--elevation-1); /* ç"¨é˜´å½±æ›¿ä»£è¾¹æ¡?*/

  border: none; /* 移除边框 */

}



.cap-card:hover {

  transform: translateY(-2px); /* ä»?4px减å°'åˆ?2px */

  box-shadow: var(--elevation-2);

}



.card-index {

  position: absolute;

  top: var(--sp-6);

  right: var(--sp-6);

  font-family: var(--font-mono);

  font-size: 3rem;

  font-weight: 900;

  color: rgba(255, 255, 255, 0.15); /* 半透明白色 */

  opacity: 0.5;

  line-height: 1;

}



.cap-card-image {

  width: 100%;

  height: 200px;

  border-radius: var(--r-md);

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: var(--sp-6);

  transition: var(--transition);

  overflow: hidden;

  background: linear-gradient(135deg,

    var(--electric-blue) 0%,

    var(--electric-light) 100%

  );

  opacity: 0.9;

}



.cap-card:hover .cap-card-image {

  transform: scale(1.03);

  box-shadow: 0 8px 30px rgba(15, 116, 187, 0.25);

}



.cap-card-icon {

  font-size: 3.5rem;

  opacity: 0.6;

  transition: var(--transition);

}



.cap-card:hover .cap-card-icon {

  opacity: 0.9;

  transform: scale(1.1);

}



.cap-card h3 {

  font-size: 1.4rem;

  margin-bottom: var(--sp-2);

  color: var(--text-primary);

}



.tagline {

  font-size: 0.9rem;

  color: var(--electric-blue);

  font-weight: 600;

  margin-bottom: var(--sp-4);

  letter-spacing: 0.5px;

}



.cap-card p {

  color: var(--text-secondary);

  font-size: 0.95rem;

  line-height: 1.6;

  margin-bottom: 0;

}



/* ============================================================================

   数据统计åŒ?

   ============================================================================ */

.stats-row {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  gap: var(--sp-8);

  max-width: 1000px;

  margin: var(--sp-12) auto 0;

}



.stat-item {

  background: rgba(255, 255, 255, 0.02);

  border-radius: var(--r-lg);

  padding: var(--sp-8);

  text-align: center;

  position: relative;

  transition: all var(--transition);

  box-shadow: var(--elevation-1); /* ç"¨é˜´å½±æ›¿ä»£è¾¹æ¡?*/

}



.stat-item:hover {

  transform: translateY(-2px); /* ä»?4px减å°'åˆ?2px */

  box-shadow: var(--elevation-2);

}



.stat-value {

  display: flex;

  align-items: baseline;

  justify-content: center;

  gap: var(--sp-1);

  margin-bottom: var(--sp-2);

}



.count-up {

  font-family: var(--font-mono);

  font-size: 3rem;

  font-weight: 800; /* 加ç²- */

  color: #fff; /* 纯白è‰?*/

  line-height: 1;

}



.stat-unit {

  font-size: 1.2rem;

  color: var(--text-tertiary);

  font-weight: 500;

}



.stat-label {

  font-size: 0.9rem;

  color: var(--text-secondary);

  letter-spacing: 1px;

}



/* 趋势箭头çº?*/

.timeline-arrow {

  margin: var(--sp-12) auto var(--sp-6);

  max-width: 900px;

  text-align: center;

}



.timeline-track {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: space-between;

  height: 80px;

  padding: 0 40px;

}



.timeline-track::before {

  content: '';

  position: absolute;

  top: 50%;

  left: 40px;

  right: 40px;

  height: 2px; /* 加ç²-åˆ?px */

  background: linear-gradient(90deg,

    rgba(15, 116, 187, 0.3),

    rgba(15, 116, 187, 0.8) 30%,

    var(--electric-blue) 60%,

    rgba(15, 116, 187, 0.8) 100%

  );

  transform: translateY(-50%);

}



.timeline-track::after {

  content: '';

  position: absolute;

  right: 28px;

  top: 50%;

  transform: translateY(-50%);

  width: 0;

  height: 0;

  border-left: 16px solid var(--electric-blue);

  border-top: 10px solid transparent;

  border-bottom: 10px solid transparent;

}



.timeline-node {

  position: relative;

  z-index: 1;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 8px;

}



.node-dot {

  width: 10px; /* 增大åˆ?0px */

  height: 10px;

  border-radius: 50%;

  background: var(--steel);

  border: 2px solid rgba(15, 116, 187, 0.4);

  transition: var(--transition);

  box-shadow: 0 0 0 0 rgba(15, 116, 187, 0); /* å¤-å'光基础 */

}



.node-start .node-dot,

.node-end .node-dot {

  width: 14px;

  height: 14px;

  background: var(--electric-blue);

  border-color: var(--electric-light);

  box-shadow: 

    0 0 12px rgba(15, 116, 187, 0.6),

    0 0 24px rgba(15, 116, 187, 0.3); /* å¤-å'å…?*/

  animation: nodePulse 2.5s cubic-bezier(0.16, 1, 0.3, 1) infinite;

}



@keyframes nodePulse {

  0%, 100% { 

    box-shadow: 

      0 0 12px rgba(15, 116, 187, 0.6),

      0 0 24px rgba(15, 116, 187, 0.3);

  }

  50% { 

    box-shadow: 

      0 0 20px rgba(15, 116, 187, 0.9),

      0 0 36px rgba(15, 116, 187, 0.5);

  }

}



.node-year {

  position: absolute;

  top: -26px;

  font-family: var(--font-mono);

  font-size: 0.75rem;

  font-weight: 700;

  color: var(--electric-blue);

  white-space: nowrap;

}



.timeline-label {

  margin-top: var(--sp-6);

  font-size: 0.85rem;

  color: var(--text-secondary);

  letter-spacing: 2px;

  font-weight: 500;

}



/* ============================================================================

   按é'®ç³»ç»Ÿ

   ============================================================================ */

.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: var(--sp-2);

  padding: var(--sp-3) var(--sp-6);  /* 12px 24px */

  border-radius: var(--r-md); /* ä»?0px减å°'åˆ?px */

  font-size: var(--text-sm);  /* 0.8rem */

  font-weight: 600;

  text-decoration: none;

  border: none;

  cursor: pointer;

  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); /* 指数ç¼"出 */

  position: relative;

  overflow: hidden;

}



.btn::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: linear-gradient(135deg, 

    rgba(255, 255, 255, 0.1) 0%,

    rgba(255, 255, 255, 0) 100%

  );

  opacity: 0;

  transition: opacity var(--transition);

}



.btn:hover::before {

  opacity: 1;

}



.btn-primary {

  background: linear-gradient(135deg, var(--electric-blue), var(--electric-light));

  color: white;

  box-shadow: 0 4px 20px rgba(15, 116, 187, 0.3);

}



.btn-primary:hover {

  transform: translateY(-2px);

  box-shadow: 0 8px 30px rgba(15, 116, 187, 0.4);

}



.btn-secondary {

  background: var(--surface-bright);

  color: var(--text-primary);

  border: 1px solid var(--border-default);

}



.btn-secondary:hover {

  background: var(--surface-raised);

  border-color: var(--border-active);

  transform: translateY(-2px);

}



/* ============================================================================

   动ç"»ç³»ç»Ÿ

   ============================================================================ */

.reveal-section {

  opacity: 0;

  transform: translateY(40px);

  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),

              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);

}



.reveal-section.visible {

  opacity: 1;

  transform: translateY(0);

}



.reveal-stagger > * {

  opacity: 0;

  transform: translateY(20px);

  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),

              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);

}



.reveal-stagger.visible > * {

  opacity: 1;

  transform: translateY(0);

}



.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0.1s; }

.reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.2s; }

.reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.3s; }

.reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.4s; }

.reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.5s; }

.reveal-stagger.visible > *:nth-child(6) { transition-delay: 0.6s; }



/* 删除 elastic/bounce 类动ç"?*/

/* 保留必要的ç¼"动动ç"?*/



/* ============================================================================

   页脚

   ============================================================================ */

.footer {

  background: var(--titanium);

  padding: var(--sp-12) var(--sp-12);

  text-align: center;

  border-top: 1px solid var(--border-default);

}



.footer-links {

  display: flex;

  justify-content: center;

  gap: var(--sp-6); /* 增加é-´è· */

  margin-bottom: var(--sp-8);

  flex-wrap: wrap;

}



.footer-links a {

  color: var(--text-secondary);

  font-size: 0.9rem;

  text-decoration: none;

  transition: color var(--transition-fast);

}



.footer-links a:hover {

  color: var(--electric-blue);

}



.footer-text {

  font-size: 0.82rem; /* 减小å­-号 */

  color: var(--text-tertiary);

  max-width: 600px;

  margin: 0 auto;

  line-height: 1.6;

}

.footer-qr {

  margin-bottom: var(--sp-6);

  display: flex;

  flex-direction: column;

  align-items: center;

}

.footer-qr a {

  display: inline-block;

  transition: transform 0.3s ease, box-shadow 0.3s ease;

}

.footer-qr a:hover {

  transform: scale(1.08);

  box-shadow: 0 4px 16px rgba(15,116,187,0.15);

}





/* ============================================================================

   UI增强 v8.0 â€?子页面美åŒ?

   ============================================================================ */



/* --- Page-Hero（子页面全高 bannerï¼?--- */

.page-hero {

  position: relative;

  min-height: 62vh;

  display: flex;

  align-items: center;

  padding: 120px var(--sp-16) 80px;

  overflow: hidden;

  background: 

    /* 对è§'线ç§'技纹理 */

    repeating-linear-gradient(

      45deg,

      transparent,

      transparent 2px,

      rgba(15,116,187,0.03) 2px,

      rgba(15,116,187,0.03) 4px

    ),

    /* 径å'å…?*/

    radial-gradient(ellipse 80% 60% at 30% 50%, rgba(15,80,150,0.22) 0%, transparent 100%),

    radial-gradient(ellipse 50% 80% at 80% 60%, rgba(10,50,100,0.15) 0%, transparent 100%),

    var(--ink);

}



.page-hero::after {

  content: '';

  position: absolute;

  right: -5%;

  top: 50%;

  transform: translateY(-50%);

  width: 400px;

  height: 400px;

  border: 1px solid rgba(72,168,230,0.06);

  border-radius: 50%;

  pointer-events: none;

}



.page-hero .hero-content {

  max-width: 800px;

  position: relative;

  z-index: 2;

}



.page-hero .hero-tag {

  font-family: var(--font-mono);

  font-size: var(--text-xs);

  font-weight: 600;

  letter-spacing: 3px;

  color: var(--electric-blue);

  text-transform: uppercase;

  margin-bottom: var(--sp-4);

  position: relative;

  padding-left: 48px;

}



.page-hero .hero-tag::before {

  content: '';

  position: absolute;

  left: 0;

  top: 50%;

  width: 36px;

  height: 1px;

  background: var(--electric-blue);

}



.page-hero .hero-title {

  color: #ffffff;

  font-size: var(--text-4xl);

  font-weight: 800;

  margin-bottom: var(--sp-4);

}



.page-hero .hero-sub {

  font-size: var(--text-lg);

  color: #e8edf4;

  max-width: 600px;

}



/* --- 区å-交替背景 --- */

.section:nth-child(even) {

  background: var(--surface-dim);

}



/* --- 区å-分éš"渐变çº?--- */

.section::before {

  content: '';

  position: absolute;

  top: 0;

  left: 50%;

  transform: translateX(-50%);

  width: 60%;

  max-width: 600px;

  height: 1px;

  background: linear-gradient(90deg,

    transparent 0%,

    rgba(15, 116, 187, 0.15) 50%,

    transparent 100%

  );

}



.section:first-of-type::before {

  display: none;

}



/* --- 卡片 hover 边框高亮 --- */

.cap-card:hover,

.stat-item:hover,

.tech-spec:hover,

.case-card:hover,

.wechat-card:hover {

  outline: 1px solid rgba(15, 116, 187, 0.3);

  outline-offset: -1px;

}



/* --- 卡片内é-´è·å¢žå¤?--- */

.cap-card {

  padding: var(--sp-10);

}



.cap-card-image {

  height: 220px; /* 增大 10% */

}



/* --- section-label è"è‰²çŸ­çº¿åŠ é•¿ --- */

.section-label::before {

  width: 32px;

}



/* --- section-title 微弱æ-‡å­-阴影 --- */

.section-title {

  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);

}



/* --- divider å'光端点 --- */

.divider {

  position: relative;

  box-shadow:

    -4px 0 8px rgba(15, 116, 187, 0.25),

    4px 0 8px rgba(247, 127, 0, 0.25);

}



/* --- 技术规格卡ç‰?--- */

.tech-spec {

  background: rgba(255, 255, 255, 0.02);

  border-radius: var(--r-lg);

  padding: var(--sp-8);

  position: relative;

  transition: all var(--transition);

  box-shadow: var(--elevation-1);

  border: none;

}



.tech-spec:hover {

  transform: translateY(-2px);

  box-shadow: var(--elevation-2);

  outline: 1px solid rgba(15, 116, 187, 0.3);

  outline-offset: -1px;

}



.tech-spec .spec-label {

  font-size: 0.68rem;

  font-weight: 700;

  letter-spacing: 3px;

  color: var(--electric-blue);

  margin-bottom: var(--sp-2);

}



.tech-spec h4 {

  font-size: 1.25rem;

  color: var(--text-primary);

  margin-bottom: var(--sp-2);

}



.tech-spec .spec-desc {

  font-size: 0.88rem;

  color: var(--text-secondary);

  line-height: 1.6;

}



/* --- 面包å±'导èˆ?--- */

.breadcrumb-bar {

  max-width: 1200px;

  margin: 0 auto;

  padding: var(--sp-4) var(--sp-8);

  font-size: 0.85rem;

}



.breadcrumb-bar a {

  color: var(--text-secondary);

  transition: color var(--transition-fast);

}



.breadcrumb-bar a:hover {

  color: var(--electric-blue);

}



.breadcrumb-sep {

  margin: 0 var(--sp-2);

  color: var(--text-tertiary);

}



.breadcrumb-current {

  color: var(--electric-blue);

  font-weight: 600;

}



/* --- 案例卡片增强 --- */

.case-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));

  gap: var(--sp-8);

  max-width: 1200px;

  margin: 0 auto;

}



.case-card {

  background: rgba(255, 255, 255, 0.015);

  border-radius: var(--r-lg);

  overflow: hidden;

  transition: all var(--transition);

  box-shadow: var(--elevation-1);

  border: none;

}



.case-card:hover {

  transform: translateY(-3px);

  box-shadow: var(--elevation-2);

  outline: 1px solid rgba(15, 116, 187, 0.25);

  outline-offset: -1px;

}



.case-card .case-header {

  padding: var(--sp-4) var(--sp-6) 0;

}



.case-industry-tag {

  display: inline-flex;

  padding: var(--sp-1) var(--sp-3);

  background: rgba(15, 116, 187, 0.1);

  color: var(--electric-blue);

  border-radius: var(--r-sm);

  font-size: 0.72rem;

  font-weight: 600;

  letter-spacing: 1px;

}



.case-card h3 {

  padding: 0 var(--sp-6);

  margin: var(--sp-3) 0 var(--sp-2);

  font-size: 1.2rem;

}



.case-desc {

  padding: 0 var(--sp-6) var(--sp-6);

  font-size: 0.9rem;

  color: var(--text-secondary);

  line-height: 1.7;

}



/* --- 企业微信卡片 --- */

.wechat-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

  gap: var(--sp-8);

  max-width: 1000px;

  margin: 0 auto;

}



.wechat-card {

  background: rgba(255, 255, 255, 0.015);

  border-radius: var(--r-lg);

  overflow: hidden;

  transition: all var(--transition);

  box-shadow: var(--elevation-1);

  border: none;

}



.wechat-card:hover {

  transform: translateY(-3px);

  box-shadow: var(--elevation-2);

  outline: 1px solid rgba(15, 116, 187, 0.25);

  outline-offset: -1px;

}



.wechat-card .cover {

  height: 180px;

  background: linear-gradient(135deg, var(--titanium), var(--steel));

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

}



.wechat-card .card-body {

  padding: var(--sp-6);

}



.wechat-card h4 {

  font-size: 1.15rem;

  margin-bottom: var(--sp-2);

  color: var(--text-primary);

}



.wechat-card .date {

  font-size: 0.78rem;

  color: var(--text-tertiary);

  margin-bottom: var(--sp-3);

}



.wechat-card .summary {

  font-size: 0.9rem;

  color: var(--text-secondary);

  line-height: 1.6;

  margin-bottom: 0;

}



/* --- è"系表单 --- */

.contact-section {

  padding: var(--sp-20) var(--sp-6);

  position: relative;

}



.contact-form {

  background: var(--surface-raised);

  border-radius: var(--r-lg);

  padding: var(--sp-10);

  box-shadow: var(--elevation-1);

}



.form-row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: var(--sp-4);

}



.form-group {

  margin-bottom: var(--sp-5);

}



.form-group label {

  display: block;

  font-size: 0.85rem;

  font-weight: 600;

  color: var(--text-secondary);

  margin-bottom: var(--sp-2);

  letter-spacing: 0.5px;

}



.form-group input,

.form-group textarea {

  width: 100%;

  padding: var(--sp-4);

  background: var(--surface-dim);

  border: 1px solid var(--border-default);

  border-radius: var(--r-md);

  color: var(--text-primary);

  font-size: 0.95rem;

  font-family: var(--font-body);

  transition: border-color var(--transition-fast);

}



.form-group input:focus,

.form-group textarea:focus {

  outline: none;

  border-color: var(--electric-blue);

  box-shadow: 0 0 0 3px rgba(15, 116, 187, 0.1);

}



/* ============================================================================

   å"åº"式设è®?

   ============================================================================ */

@media (max-width: 1024px) {

  .hero-title {

    font-size: clamp(2.8rem, 4vw, 3.5rem);

  }

  

  .section-title {

    font-size: clamp(2rem, 3.5vw, 2.8rem);

  }

  

  .cap-grid {

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: var(--sp-6);

  }

  

  .stats-row {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (max-width: 768px) {

  .navbar {

    width: calc(100% - 32px);

    height: 56px;

    padding: 0 var(--sp-4);

  }

  

  .nav-links {

    display: none; /* 移动端隐è-å¯¼èˆªï¼Œå¯è€ƒè™'添加汉堡菜单 */

  }

  

  .hero {

    padding: 100px var(--sp-4) var(--sp-12);

  }

  

  .hero-title {

    font-size: clamp(2.4rem, 3vw, 3rem); /* 移动端下é™?.4rem */

  }

  

  .hero-stats {

    gap: var(--sp-4);

  }

  

  .hero-stat-number {

    font-size: 2.2rem;

  }

  

  .section {

    padding: var(--sp-12) var(--sp-4);

  }

  

  .cap-grid {

    grid-template-columns: 1fr; /* 移动端单åˆ?*/

    gap: var(--sp-6);

  }

  

  .stats-row {

    grid-template-columns: 1fr;

    gap: var(--sp-6);

  }

  

  .timeline-track {

    padding: 0 20px;

  }

  

  .timeline-track::before {

    left: 20px;

    right: 20px;

  }

}



@media (max-width: 480px) {

  .hero-title {

    font-size: 2.4rem;

  }

  

  .hero-subtitle-brand {

    font-size: 1rem;

  }

  

  .hero-stats {

    flex-direction: column;

    gap: var(--sp-6);

  }

  

  .hero-stat-divider {

    display: none;

  }

  

  .section-title {

    font-size: 2rem;

  }

  

  .footer-links {

    flex-direction: column;

    gap: var(--sp-3);

  }

}



/* ============================================================================

   通ç"¨ Section 增强ç±?v7.0

   ============================================================================ */



/* 偶数 section 交替背景 */

.section-alt {

  background: rgba(255,255,255,0.012);

  border-top: 1px solid rgba(72,168,230,0.06);

  border-bottom: 1px solid rgba(72,168,230,0.06);

}



/* 大数å­-装é¥?*/

.section-number {

  font-family: var(--font-display);

  font-size: 8rem;

  font-weight: 900;

  line-height: 0.8;

  color: rgba(72,168,230,0.04);

  position: absolute;

  top: -1rem;

  left: 0;

  pointer-events: none;

  user-select: none;

}



/* 图æ-‡åŒæ  */

.split-section {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: var(--sp-16);

  align-items: center;

}



.split-section.reverse { direction: rtl; }

.split-section.reverse > * { direction: ltr; }



/* ============================================================================

   三柱核心价å€?(culture.html)

   ============================================================================ */

.value-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); }

.value-pillar { padding: var(--sp-10); background: rgba(255,255,255,0.02); border: 1px solid rgba(72,168,230,0.08); border-radius: var(--r-md); text-align: center; }

.value-pillar .pillar-number { font-family: var(--font-display); font-size: 3rem; font-weight: 900; color: rgba(72,168,230,0.08); line-height: 1; }

.value-pillar .pillar-title { font-size: 1.3rem; font-weight: 700; margin: var(--sp-3) 0 var(--sp-1); }

.value-pillar .pillar-sub { font-size: 0.7rem; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 2px; }

.value-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--sp-4) 0; justify-content: center; }

.value-tag { font-size: 0.68rem; padding: 3px 10px; border: 1px solid rgba(72,168,230,0.2); border-radius: 20px; color: var(--text-secondary); }

.value-pillar .pillar-quote { font-size: 0.85rem; color: var(--electric-blue); font-style: italic; margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid rgba(72,168,230,0.08); }



/* ============================================================================

   证书卡片 (qualifications.html)

   ============================================================================ */

.certificate-card { padding: var(--sp-10); background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(15,116,187,0.04) 100%); border: 1px solid rgba(72,168,230,0.12); border-radius: var(--r-md); position: relative; overflow: hidden; }

.certificate-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(180deg, var(--electric-blue), rgba(72,168,230,0.2)); }

.certificate-card .cert-title { font-size: 1.2rem; font-weight: 700; }

.certificate-card .cert-number { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-tertiary); margin: var(--sp-2) 0; }

.certificate-card .cert-issuer { font-size: 0.75rem; color: var(--text-secondary); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid rgba(72,168,230,0.08); }

.certificate-card.cert-gold { border-color: rgba(212,175,55,0.2); }

.certificate-card.cert-gold::before { background: linear-gradient(180deg, #D4AF37, rgba(212,175,55,0.2)); }



/* ============================================================================

   认证横条 (qualifications.html)

   ============================================================================ */

.cert-strip { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid rgba(72,168,230,0.06); }

.cert-strip:last-child { border-bottom: none; }

.cert-strip .strip-name { font-weight: 600; font-size: 1rem; }

.cert-strip .strip-code { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-tertiary); }

.cert-strip .strip-badge { font-size: 0.6rem; padding: 2px 10px; border: 1px solid rgba(61,205,88,0.3); border-radius: 20px; color: #3DCD58; text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; }



/* ============================================================================

   能力æŸ?(about.html)

   ============================================================================ */

.strength-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); }

.strength-pillar { padding: var(--sp-8); position: relative; }

.strength-pillar .pillar-index { font-family: var(--font-display); font-size: 3.5rem; font-weight: 900; color: rgba(72,168,230,0.06); line-height: 1; margin-bottom: -1rem; }

.strength-pillar .pillar-title { font-size: 1.1rem; font-weight: 700; margin: var(--sp-2) 0 var(--sp-1); }

.strength-pillar .pillar-en { font-size: 0.65rem; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 2px; }

.strength-pillar .pillar-desc { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.7; margin-top: var(--sp-3); }



/* ============================================================================

   大数å­-指æ ?(about.html)

   ============================================================================ */

.big-metrics { display: flex; gap: var(--sp-8); margin-top: var(--sp-8); }

.big-metric { text-align: left; }

.big-metric .metric-value { font-family: var(--font-display); font-size: 3rem; font-weight: 900; line-height: 1; color: var(--electric-blue); }

.big-metric .metric-label { font-size: 0.7rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 2px; margin-top: var(--sp-1); }



/* ============================================================================

   右栏装饰åŒ?(about.html)

   ============================================================================ */

.decor-panel { position: relative; min-height: 400px; background: #0a1628; border-radius: var(--r-md); overflow: hidden; display: flex; align-items: center; justify-content: center; }

.decor-panel .decor-geo { position: absolute; width: 100%; height: 100%; opacity: 0.15; background:

  linear-gradient(30deg, transparent 49.5%, rgba(72,168,230,0.5) 49.5%, rgba(72,168,230,0.5) 50.5%, transparent 50.5%),

  linear-gradient(150deg, transparent 49.5%, rgba(72,168,230,0.3) 49.5%, rgba(72,168,230,0.3) 50.5%, transparent 50.5%),

  repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(72,168,230,0.08) 39px, rgba(72,168,230,0.08) 40px),

  repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(72,168,230,0.08) 39px, rgba(72,168,230,0.08) 40px);

}

.decor-panel .decor-number { font-family: var(--font-display); font-size: 8rem; font-weight: 900; color: rgba(72,168,230,0.12); position: relative; z-index: 1; }



/* ============================================================================

   服务流程可视åŒ?(culture.html)

   ============================================================================ */

.service-flow { display: flex; align-items: center; justify-content: center; gap: 0; margin-top: var(--sp-8); }

.service-flow .flow-step { text-align: center; flex: 1; max-width: 200px; }

.service-flow .flow-step .step-icon { width: 56px; height: 56px; border-radius: 50%; border: 2px solid rgba(72,168,230,0.2); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--sp-3); font-size: 1.4rem; font-weight: 700; color: var(--electric-blue); }

.service-flow .flow-step .step-title { font-weight: 700; font-size: 0.95rem; margin-bottom: var(--sp-1); }

.service-flow .flow-step .step-desc { font-size: 0.75rem; color: var(--text-tertiary); }

.service-flow .flow-arrow { font-size: 1.5rem; color: rgba(72,168,230,0.2); padding: 0 var(--sp-4); flex-shrink: 0; }



/* ============================================================================

   社会责任紧å‡'è¡?(culture.html)

   ============================================================================ */

.responsibility-rows { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }

.resp-row { display: flex; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-5); border: 1px solid rgba(72,168,230,0.06); border-radius: var(--r-sm); }

.resp-row .resp-icon { font-size: 1.6rem; color: var(--electric-blue); flex-shrink: 0; line-height: 1.2; }

.resp-row .resp-title { font-weight: 700; font-size: 0.9rem; margin-bottom: 2px; }

.resp-row .resp-desc { font-size: 0.7rem; color: var(--text-tertiary); line-height: 1.5; }



/* ============================================================================

   æ-½è€å¾·åˆä½œåŒ?(qualifications.html)

   ============================================================================ */

.schneider-section .schneider-accent { color: #3DCD58; }

.schneider-section .certificate-card.cert-schneider { border-color: rgba(61,205,88,0.15); }

.schneider-section .certificate-card.cert-schneider::before { background: linear-gradient(180deg, #3DCD58, rgba(61,205,88,0.2)); }

.schneider-logo-placeholder { text-align: center; margin-top: var(--sp-8); padding: var(--sp-8); border: 1px dashed rgba(61,205,88,0.12); border-radius: var(--r-md); }

.schneider-logo-placeholder .logo-text { font-family: var(--font-display); font-size: 1.5rem; font-weight: 900; color: #3DCD58; letter-spacing: 2px; }

.schneider-logo-placeholder .logo-sub { font-size: 0.7rem; color: var(--text-tertiary); margin-top: var(--sp-2); }



/* ============================================================================

   简çº?CTA (about.html / culture.html / qualifications.html)

   ============================================================================ */

.cta-section { text-align: center; padding: var(--sp-16) var(--sp-8); border-top: 1px solid rgba(72,168,230,0.06); }

.cta-section .cta-title { font-size: 2rem; font-weight: 800; margin-bottom: var(--sp-3); }

.cta-section .cta-sub { color: var(--text-secondary); margin-bottom: var(--sp-6); }

.cta-section .cta-phone { font-family: var(--font-mono); font-size: 1.2rem; color: var(--electric-blue); margin-bottom: var(--sp-4); }



/* ============================================================================

   Hero 右侧大号淡åŒ-数å­-装饰

   ============================================================================ */

.page-hero .hero-watermark { position: absolute; right: 8%; top: 50%; transform: translateY(-50%); font-family: var(--font-display); font-size: 16rem; font-weight: 900; color: rgba(72,168,230,0.03); pointer-events: none; user-select: none; z-index: 0; line-height: 1; }



/* ============================================================================

   ç€'布流项目ç"»å»?(case_list.html)

   ============================================================================ */

.case-masonry {

  display: grid;

  grid-template-columns: repeat(5, 1fr);

  gap: var(--sp-6);

  align-items: start;

}



@media (max-width: 1200px) {

  .case-masonry {

    grid-template-columns: repeat(4, 1fr);

  }

}



@media (max-width: 768px) {

  .case-masonry {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (max-width: 480px) {

  .case-masonry {

    grid-template-columns: 1fr;

  }

}



.case-card {

  break-inside: avoid;

  background: rgba(255,255,255,0.02);

  border: 1px solid rgba(72,168,230,0.08);

  border-radius: var(--r-md);

  overflow: hidden;

  transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.case-card:hover {

  transform: translateY(-4px);

  box-shadow: 0 12px 32px rgba(0,0,0,0.15);

}



.case-card .case-image {

  height: 180px;

  background: linear-gradient(135deg, rgba(15,116,187,0.1), rgba(8,60,120,0.05));

  display: flex;

  align-items: center;

  justify-content: center;

}



.case-card .case-content {

  padding: var(--sp-6);

}



/* 知识分类导航 */

.knowledge-nav {

  display: flex;

  justify-content: center;

  gap: var(--sp-4);

  margin-bottom: var(--sp-8);

}



.knowledge-tab {

  padding: var(--sp-3) var(--sp-6);

  border: 1px solid rgba(72,168,230,0.2);

  border-radius: 30px;

  background: transparent;

  color: var(--text-secondary);

  cursor: pointer;

  transition: all 0.2s ease;

}



.knowledge-tab.active {

  background: var(--electric-blue);

  border-color: var(--electric-blue);

  color: white;

}



/* 合作模式卡片 */

.cooperation-modes {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: var(--sp-8);

}



.cooperation-mode {

  padding: var(--sp-8);

  background: rgba(255,255,255,0.02);

  border: 1px solid rgba(72,168,230,0.1);

  border-radius: var(--r-md);

  text-align: center;

}



.cooperation-mode .mode-icon {

  font-size: 2.5rem;

  margin-bottom: var(--sp-4);

  color: var(--electric-blue);

}



/* 技术优势点 */

.tech-advantages {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: var(--sp-6);

}



.tech-advantage {

  padding: var(--sp-5);

  border-left: 3px solid var(--electric-blue);

  background: rgba(15,116,187,0.03);

}



/* 项目筛选器 */

.case-filter {

  display: flex;

  justify-content: center;

  gap: var(--sp-3);

  margin-bottom: var(--sp-6);

}



.filter-tag {

  padding: var(--sp-2) var(--sp-5);

  border: 1px solid rgba(72,168,230,0.2);

  border-radius: 30px;

  background: transparent;

  color: var(--text-secondary);

  cursor: pointer;

  transition: all 0.2s ease;

  font-size: 0.85rem;

}



.filter-tag.active {

  background: var(--electric-blue);

  border-color: var(--electric-blue);

  color: white;

}



/* 精选ä¸"题æ-‡ç«?*/

.featured-articles {

  display: flex;

  flex-direction: column;

  gap: var(--sp-12);

}



.featured-article {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: var(--sp-12);

  align-items: center;

}



.featured-article.reverse {

  direction: rtl;

}



.featured-article.reverse > * {

  direction: ltr;

}



.article-image {

  height: 280px;

  background: linear-gradient(135deg, rgba(15,116,187,0.1), rgba(8,60,120,0.05));

  border-radius: var(--r-md);

  overflow: hidden;

  position: relative;

}



.article-meta {

  display: flex;

  gap: var(--sp-4);

  color: var(--text-tertiary);

  font-size: 0.8rem;

  margin: var(--sp-3) 0;

}



/* 订阅表单 */

.subscribe-form {

  max-width: 400px;

  margin: var(--sp-8) auto 0;

}



.subscribe-input {

  display: flex;

  gap: var(--sp-3);

  margin-top: var(--sp-4);

}



.subscribe-input input {

  flex: 1;

  padding: var(--sp-3) var(--sp-4);

  background: rgba(255,255,255,0.03);

  border: 1px solid rgba(72,168,230,0.15);

  border-radius: var(--r-sm);

  color: var(--text-primary);

  font-family: var(--font-body);

}



.subscribe-input input:focus {

  outline: none;

  border-color: var(--electric-blue);

}



/* 合作成果可视åŒ?*/

.cooperation-stats {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: var(--sp-6);

  text-align: center;

}



.stat-item .stat-value {

  font-family: var(--font-display);

  font-size: 2.5rem;

  font-weight: 900;

  color: var(--electric-blue);

  line-height: 1;

}



.stat-item .stat-label {

  font-size: 0.8rem;

  color: var(--text-secondary);

  margin-top: var(--sp-2);

}



/* 蜂巢筛选器 */

.honeycomb-filter {

  display: flex;

  justify-content: center;

  gap: var(--sp-3);

  margin-bottom: var(--sp-8);

}



.honeycomb-filter .filter-btn {

  padding: var(--sp-2) var(--sp-5);

  border: 1px solid rgba(72,168,230,0.2);

  border-radius: 30px;

  background: transparent;

  color: var(--text-secondary);

  cursor: pointer;

  transition: all 0.2s ease;

  font-size: 0.85rem;

}



.honeycomb-filter .filter-btn.active {

  background: var(--electric-blue);

  border-color: var(--electric-blue);

  color: white;

}



/* 项目流程可视åŒ?*/

.project-process {

  display: flex;

  flex-direction: column;

  gap: var(--sp-6);

  position: relative;

  padding-left: var(--sp-8);

}



.process-step {

  position: relative;

  padding-left: var(--sp-6);

  padding-bottom: var(--sp-8);

  border-left: 2px solid rgba(72,168,230,0.2);

}



.process-step:last-child {

  padding-bottom: 0;

  border-left: 2px solid transparent;

}



.process-step::before {

  content: '';

  position: absolute;

  left: -7px;

  top: 0;

  width: 12px;

  height: 12px;

  border-radius: 50%;

  background: var(--electric-blue);

}



.process-step .step-number {

  font-family: var(--font-mono);

  font-size: 0.7rem;

  color: var(--electric-blue);

  font-weight: 600;

  margin-bottom: var(--sp-1);

}



.process-step .step-title {

  font-weight: 700;

  font-size: 1.1rem;

  margin-bottom: var(--sp-2);

}



/* 全栈架构图增å¼?*/

.energy-architecture.enhanced {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: var(--sp-6);

  margin-top: var(--sp-8);

}



.energy-layer.enhanced {

  padding: var(--sp-6);

  background: rgba(255,255,255,0.02);

  border: 1px solid rgba(72,168,230,0.08);

  border-radius: var(--r-md);

  text-align: center;

}



.layer-icon-large {

  font-size: 2.5rem;

  margin-bottom: var(--sp-3);

  color: var(--electric-blue);

}



/* 部署路径æ-¶é-´è½?*/

.deployment-timeline {

  position: relative;

  padding-left: var(--sp-12);

  margin-top: var(--sp-8);

}



.timeline-step {

  position: relative;

  padding: var(--sp-5);

  margin-bottom: var(--sp-6);

  background: rgba(255,255,255,0.02);

  border: 1px solid rgba(72,168,230,0.08);

  border-radius: var(--r-md);

}



.timeline-step::before {

  content: '';

  position: absolute;

  left: -30px;

  top: 24px;

  width: 12px;

  height: 12px;

  border-radius: 50%;

  background: var(--electric-blue);

}



.timeline-step::after {

  content: '';

  position: absolute;

  left: -24px;

  top: 30px;

  width: 1px;

  height: calc(100% + var(--sp-6));

  background: rgba(72,168,230,0.2);

}



.timeline-step:last-child::after {

  display: none;

}



.timeline-step .step-phase {

  font-family: var(--font-mono);

  font-size: 0.7rem;

  color: var(--electric-blue);

  font-weight: 600;

  margin-bottom: var(--sp-1);

}



.timeline-step .step-duration {

  font-size: 0.75rem;

  color: var(--text-tertiary);

  margin-top: var(--sp-2);

  padding-top: var(--sp-2);

  border-top: 1px solid rgba(72,168,230,0.08);

}



/* ============================================================================

   统一组件样式（设计系统核心）

   ============================================================================ */



/* 通ç"¨section容器 */

.section { padding: var(--sp-20) var(--sp-12); }

.section-alt { background: var(--bg-secondary); }

.section-label {

  font-family: var(--font-mono);

  font-size: var(--text-xs);

  color: var(--color-accent-light);

  text-transform: uppercase;

  letter-spacing: 3px;

  margin-bottom: var(--sp-3);

}



/* 统一按é'® */

.btn {

  display: inline-flex; align-items: center; gap: var(--sp-2);

  padding: var(--sp-3) var(--sp-6);  /* 12px 24px */

  font-size: var(--text-sm);         /* 0.8rem */

  font-weight: 600;

  border-radius: var(--r-md);

  border: 1px solid transparent;

  cursor: pointer; transition: all 0.25s;

}

.btn-primary { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }

.btn-primary:hover { background: var(--color-accent-light); }

.btn-outline { background: transparent; color: var(--text-primary); border-color: var(--border-default); }

.btn-outline:hover { border-color: var(--color-accent-light); color: var(--color-accent-light); }



/* 统一标签/筛选按é'?*/

.tag, .filter-btn {

  display: inline-flex; align-items: center;

  padding: var(--sp-2) var(--sp-5);  /* 8px 20px */

  font-size: var(--text-sm);

  border: 1px solid var(--border-default);

  border-radius: 24px;

  color: var(--text-secondary);

  background: transparent;

  cursor: pointer;

  transition: all 0.2s;

}

.tag:hover, .filter-btn:hover { border-color: var(--color-accent-light); color: var(--text-primary); }

.tag.active, .filter-btn.active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }



/* 统一卡片 */

.card {

  background: var(--bg-tertiary);

  border: 1px solid var(--border-subtle);

  border-radius: var(--r-lg);

  padding: var(--sp-8);

  transition: all 0.3s;

}

.card:hover {

  border-color: var(--border-default);

  box-shadow: var(--shadow-md);

  transform: translateY(-2px);

}



/* 统一数å­-指标 */

.metric-number {

  font-family: var(--font-display);

  font-size: var(--text-3xl);

  font-weight: 800;

  color: var(--color-accent-light);

  line-height: 1;

}

.metric-label {

  font-size: var(--text-sm);

  color: var(--text-secondary);  /* #adbac7，对æ¯"度çº?:1，符合WCAG AA */

  margin-top: var(--sp-1);

}



/* 统一分割çº?*/

.divider { border: none; border-top: 1px solid var(--border-subtle); margin: var(--sp-10) 0; }



/* ============================================================================

   合作客户 Logo ç½'æ ¼ï¼?Ã-6ï¼?

   ============================================================================ */



.client-logo-grid {

  display: grid;

  grid-template-columns: repeat(6, 1fr);

  gap: var(--sp-4);

  max-width: 1200px;

  margin: var(--sp-10) auto 0;

}



.client-logo-card {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: var(--sp-3);

  padding: var(--sp-5);

  min-height: 120px;

  background: var(--bg-tertiary);

  border: 1px solid var(--border-subtle);

  border-radius: var(--r-md);

  opacity: 1;

  transform: scale(1);

  cursor: pointer;

  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),

              border-color 0.25s,

              box-shadow 0.25s;

}



.client-logo-card:hover {

  transform: translateY(-4px);

  border-color: var(--border-strong);

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);

}



.client-logo-card .logo-img {

  max-height: 70px;

  max-width: 90%;

  object-fit: contain;

}



.client-logo-card .logo-text {

  font-family: var(--font-display);

  font-size: var(--text-2xl);

  font-weight: 700;

  color: var(--text-primary);

  text-align: center;

  line-height: 1;

}



.client-logo-card .logo-tag {

  font-size: var(--text-xs);

  color: var(--text-secondary);

  text-align: center;

  line-height: 1.3;

  margin-top: auto;

}



/* å"åº"式æ-­ç‚?*/

@media (max-width: 1024px) {

  .client-logo-grid {

    grid-template-columns: repeat(4, 1fr);

  }

}



@media (max-width: 768px) {

  .client-logo-grid {

    grid-template-columns: repeat(3, 1fr);

    gap: var(--sp-3);

  }

  .client-logo-card {

    padding: var(--sp-4);

    min-height: 100px;

  }

  .client-logo-card .logo-img {

    max-height: 50px;

  }

  .client-logo-card .logo-text {

    font-size: var(--text-xl);

  }

}





/* ============================================================================

   合作成果卡片 (clients.html)

   ============================================================================ */

.achievement-cards {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: var(--sp-6);

  margin-top: var(--sp-8);

  margin-bottom: var(--sp-10);

}



.achievement-card {

  background: rgba(255,255,255,0.02);

  border: 1px solid rgba(72,168,230,0.10);

  border-radius: var(--r-md);

  padding: var(--sp-8);

  position: relative;

  overflow: hidden;

  transition: all 0.3s ease;

}



.achievement-card::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 3px;

  background: linear-gradient(90deg, var(--electric-blue), rgba(72,168,230,0.2));

}



.achievement-card:hover {

  transform: translateY(-4px);

  border-color: rgba(72,168,230,0.25);

  box-shadow: 0 12px 40px rgba(15,116,187,0.08);

}



.achievement-header {

  display: flex;

  align-items: center;

  gap: var(--sp-4);

  margin-bottom: var(--sp-5);

}



.achievement-icon {

  width: 56px;

  height: 56px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgba(72,168,230,0.06);

  border: 1px solid rgba(72,168,230,0.12);

  border-radius: var(--r-md);

  flex-shrink: 0;

}



.achievement-title {

  font-size: 1.15rem;

  font-weight: 700;

  margin: 0 0 var(--sp-1);

  color: var(--text-primary);

}



.achievement-badge {

  font-size: 0.65rem;

  color: var(--electric-blue);

  text-transform: uppercase;

  letter-spacing: 1.5px;

  font-family: var(--font-mono);

}



.achievement-desc {

  font-size: 0.85rem;

  color: var(--text-secondary);

  line-height: 1.75;

  margin-bottom: var(--sp-5);

}



.achievement-tags {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  padding-top: var(--sp-4);

  border-top: 1px solid rgba(72,168,230,0.08);

}



.achievement-tag {

  font-size: 0.68rem;

  padding: 3px 12px;

  border: 1px solid rgba(72,168,230,0.18);

  border-radius: 20px;

  color: var(--text-secondary);

  background: rgba(72,168,230,0.03);

}



/* 数字滚动动画 */

@keyframes countPulse {

  0%, 100% { opacity: 1; }

  50% { opacity: 0.7; }

}





@media (max-width: 480px) {

  .client-logo-grid {

    grid-template-columns: repeat(2, 1fr);

    gap: var(--sp-2);

  }

}



/* ========== 首页蜂巢毛玻璃墙 ========== */









.honeycomb-cell:nth-child(odd) { animation-delay: 0.1s; }

.honeycomb-cell:nth-child(3n) { animation-delay: 0.25s; }

.honeycomb-cell:nth-child(5n) { animation-delay: 0.4s; }



.honeycomb-cell:hover {

  transform: scale(1.1);

  z-index: 2;

}



@keyframes hex-fade-in {

  from { opacity: 0; transform: translateY(12px); }

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

}







.honeycomb-cell:hover .honeycomb-glass {

  background: rgba(255,255,255,0.12);

  border-color: rgba(255,255,255,0.25);

}



.honeycomb-glass img {

  max-width: 70%;

  max-height: 44px;

  object-fit: contain;

  filter: brightness(0.9);

  transition: filter 0.3s;

}



.honeycomb-cell:hover .honeycomb-glass img {

  filter: brightness(1.1);

}







.honeycomb-cell:hover .honeycomb-name {

  color: rgba(255,255,255,0.85);

}



@media (max-width: 768px) {

  .honeycomb-wall { gap: 6px; }

  .honeycomb-cell { width: 85px; height: 85px; }

  .honeycomb-glass { padding: 12px 6px; }

  .honeycomb-glass img { max-height: 32px; }

  .honeycomb-name { font-size: 9px; }

}



@media (max-width: 480px) {

  .honeycomb-cell { width: 72px; height: 72px; }

  .honeycomb-glass { padding: 10px 4px; }

  .honeycomb-glass img { max-height: 26px; }

}



/* === 合作客户 — 暗色卡片网格 === */

.logo-dark-grid {

  display: grid;

  grid-template-columns: repeat(6, 1fr);

  gap: 20px;

  max-width: 1200px;

  margin: 40px auto 0;

  padding: 0 20px;

}



.logo-dark-card {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 12px;

  padding: 24px 16px 18px;

  min-height: 140px;

  background: rgba(255,255,255,0.04);

  border: 1px solid rgba(255,255,255,0.06);

  border-radius: 12px;

  cursor: pointer;

  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

  position: relative;

  overflow: hidden;

}



.logo-dark-card::before {

  content: '';

  position: absolute;

  inset: 0;

  border-radius: 12px;

  padding: 1px;

  background: linear-gradient(135deg, rgba(255,210,120,0), rgba(255,210,120,0));

  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

  -webkit-mask-composite: xor;

  mask-composite: exclude;

  transition: background 0.4s;

  pointer-events: none;

}



.logo-dark-card:hover {

  transform: translateY(-8px);

  background: rgba(255,255,255,0.08);

  box-shadow:

    0 12px 40px rgba(255,210,120,0.08),

    0 4px 16px rgba(0,0,0,0.3);

}



.logo-dark-card:hover::before {

  background: linear-gradient(135deg, rgba(255,210,120,0.3), rgba(255,170,80,0.15));

}



.logo-dark-inner {

  width: 72px;

  height: 72px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 8px;

  overflow: hidden;

  flex-shrink: 0;

}



.logo-dark-inner img {

  max-width: 100%;

  max-height: 100%;

  object-fit: contain;

  filter: grayscale(100%) brightness(0.85) contrast(1.1);

  opacity: 0.7;

  transition: all 0.4s ease;

}



.logo-dark-card:hover .logo-dark-inner img {

  filter: grayscale(0%) brightness(1) contrast(1);

  opacity: 1;

}



.logo-dark-initial {

  font-size: 28px;

  font-weight: 700;

  color: rgba(255,210,120,0.35);

  font-family: 'Oswald', sans-serif;

  letter-spacing: 2px;

  transition: color 0.4s;

}



.logo-dark-card:hover .logo-dark-initial {

  color: rgba(255,210,120,0.8);

}



.logo-dark-name {

  font-size: 12px;

  color: rgba(255,255,255,0.35);

  text-align: center;

  letter-spacing: 1px;

  font-family: 'Noto Sans SC', sans-serif;

  transition: color 0.4s;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  max-width: 100%;

}



.logo-dark-card:hover .logo-dark-name {

  color: rgba(255,255,255,0.7);

}



@media (max-width: 1024px) {

  .logo-dark-grid {

    grid-template-columns: repeat(4, 1fr);

    gap: 16px;

  }

}

@media (max-width: 768px) {

  .logo-dark-grid {

    grid-template-columns: repeat(3, 1fr);

    gap: 12px;

  }

  .logo-dark-card {

    min-height: 110px;

    padding: 16px 12px 14px;

  }

  .logo-dark-inner {

    width: 56px;

    height: 56px;

  }

}

@media (max-width: 480px) {

  .logo-dark-grid {

    grid-template-columns: repeat(2, 1fr);

    gap: 10px;

    padding: 0 12px;

  }

  .logo-dark-card {

    min-height: 90px;

    padding: 14px 8px 12px;

  }

  .logo-dark-inner {

    width: 44px;

    height: 44px;

  }

  .logo-dark-name {

    font-size: 11px;

  }

}





/* ========== HERO方案B：背景全屏 + 居中内容 ========== */

.hero-split{position:relative;min-height:90vh;display:flex;align-items:center;justify-content:center;overflow:hidden}

.hero-slides-bg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0}

.hero-slide{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s ease-in-out}

.hero-slide.active{opacity:1}

.hero-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,rgba(10,14,23,0.85) 0%,rgba(10,14,23,0.6) 50%,rgba(10,14,23,0.85) 100%);z-index:1}

.hero-body{position:relative;z-index:2;max-width:1200px;width:100%;padding:0 40px;text-align:center}

.hero-text{max-width:800px;margin:0 auto}

.hero-badge{display:inline-block;font-size:0.82rem;letter-spacing:3px;color:rgba(59,130,246,0.9);border:1px solid rgba(59,130,246,0.3);padding:6px 20px;border-radius:20px;margin-bottom:32px;text-transform:uppercase;animation:pulseBorder 2s infinite}

@keyframes pulseBorder{0%,100%{border-color:rgba(59,130,246,0.3);box-shadow:0 0 8px rgba(59,130,246,0.2)}50%{border-color:rgba(59,130,246,0.6);box-shadow:0 0 16px rgba(59,130,246,0.3)}}

.hero-main-title{font-size:clamp(2.8rem,7vw,5.2rem);font-weight:800;line-height:1.15;margin-bottom:16px;color:#fff;font-family:'Noto Serif SC','Source Han Serif SC','Songti SC','SimSun',serif;text-shadow:0 2px 24px rgba(0,0,0,0.35);letter-spacing:0.04em}

.hero-company-name{font-size:clamp(1rem,1.4vw,1.3rem);font-weight:400;color:rgba(201,168,76,0.85);letter-spacing:0.15em;margin-bottom:24px;font-family:'Noto Sans SC','Microsoft YaHei',sans-serif}

.hero-sub{font-size:clamp(1rem,1.8vw,1.25rem);color:rgba(255,255,255,0.75);max-width:680px;margin:0 auto 40px;line-height:1.8}

.hero-cta-row{display:flex;gap:20px;justify-content:center;margin-bottom:56px}

.btn-primary{display:inline-block;padding:16px 40px;background:linear-gradient(135deg,#0F74BB,#2563EB);color:#fff;border-radius:8px;font-weight:600;font-size:1rem;text-decoration:none;transition:all 0.3s;box-shadow:0 4px 20px rgba(15,116,187,0.35)}

.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(15,116,187,0.5)}

.btn-outline{display:inline-block;padding:16px 40px;background:transparent;color:rgba(255,255,255,0.9);border:1.5px solid rgba(255,255,255,0.3);border-radius:8px;font-weight:500;font-size:1rem;text-decoration:none;transition:all 0.3s}

.btn-outline:hover{border-color:#0F74BB;color:#fff;background:rgba(15,116,187,0.1)}

.hero-mini-stats{display:flex;justify-content:center;gap:48px;flex-wrap:wrap}

.mini-stat{display:flex;align-items:baseline;gap:4px}

.mini-num{font-size:1.8rem;font-weight:700;color:#0F74BB}

.mini-label{font-size:0.9rem;color:rgba(255,255,255,0.6)}

.hero-slider-dots{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);display:flex;gap:12px;z-index:3}

.hero-dot{width:12px;height:12px;border-radius:50%;border:1.5px solid rgba(255,255,255,0.4);background:transparent;cursor:pointer;transition:all 0.3s;padding:0}

.hero-dot.active,.hero-dot:hover{background:#3B82F6;border-color:#3B82F6;box-shadow:0 0 10px rgba(59,130,246,0.6)}

.hero-badge{display:inline-block;font-size:0.8rem;letter-spacing:3px;color:rgba(59,130,246,0.8);border:1px solid rgba(59,130,246,0.3);padding:6px 16px;border-radius:4px;margin-bottom:24px;text-transform:uppercase}

.hero-main-title{font-size:clamp(2.8rem,7vw,5.2rem);font-weight:800;color:#fff;line-height:1.15;margin-bottom:16px;font-family:'Noto Serif SC','Source Han Serif SC','Songti SC','SimSun',serif;text-shadow:0 2px 24px rgba(0,0,0,0.35);letter-spacing:0.04em}

.hero-company-name{font-size:clamp(1rem,1.4vw,1.3rem);font-weight:400;color:rgba(201,168,76,0.85);letter-spacing:0.15em;margin-bottom:24px;font-family:'Noto Sans SC','Microsoft YaHei',sans-serif}

.hero-sub{font-size:clamp(1rem,1.5vw,1.25rem);color:rgba(255,255,255,0.75);line-height:1.8;margin-bottom:40px;max-width:680px}

.hero-cta-row{display:flex;gap:16px;margin-bottom:56px}

.btn-primary{display:inline-block;padding:16px 40px;background:linear-gradient(135deg,#0F74BB,#2563EB);color:#fff;border-radius:8px;font-weight:600;font-size:1rem;text-decoration:none;transition:all 0.3s}

.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(15,116,187,0.5)}

.btn-outline{display:inline-block;padding:16px 40px;background:transparent;color:rgba(255,255,255,0.85);border:1px solid rgba(255,255,255,0.25);border-radius:8px;font-weight:500;font-size:1rem;text-decoration:none;transition:all 0.3s}

.btn-outline:hover{border-color:#0F74BB;color:#fff;background:rgba(15,116,187,0.1)}

.hero-mini-stats{display:flex;gap:32px}

.mini-stat{display:flex;align-items:baseline;gap:4px}

.mini-num{font-size:1.6rem;font-weight:700;color:#0F74BB}

.mini-label{font-size:0.85rem;color:rgba(255,255,255,0.5)}

.trust-bar{background:rgba(255,255,255,0.03);border-top:1px solid rgba(255,255,255,0.06);border-bottom:1px solid rgba(255,255,255,0.06);padding:24px 0}

.trust-items{display:flex;justify-content:center;gap:48px;flex-wrap:wrap}

.trust-item{display:flex;align-items:center;gap:10px;font-size:0.9rem;color:rgba(255,255,255,0.7);white-space:nowrap}

.featured-cases{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

.featured-case-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:28px;transition:all 0.3s}

.featured-case-card:hover{background:rgba(255,255,255,0.08);transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,0.3)}

.case-header{display:flex;justify-content:space-between;margin-bottom:16px}

.case-tag{font-size:0.75rem;padding:4px 10px;border-radius:4px;background:rgba(59,130,246,0.15);color:#60A5FA}

.case-date{font-size:0.8rem;color:rgba(255,255,255,0.4)}

.case-title{font-size:1.15rem;color:#fff;margin-bottom:12px;font-weight:600}

.case-desc{font-size:0.88rem;color:rgba(255,255,255,0.6);line-height:1.6;margin-bottom:16px}

.case-footer{display:flex;justify-content:space-between;font-size:0.82rem;color:rgba(255,255,255,0.5)}

.case-value{color:#F59E0B;font-weight:600}

.section-cta{text-align:center;margin-top:36px}

.cta-final{text-align:center;padding:80px 0;background:linear-gradient(180deg,transparent,rgba(59,130,246,0.05))}

.cta-title{font-size:2rem;color:#fff;margin-bottom:16px}

.cta-sub{font-size:1rem;color:rgba(255,255,255,0.6);max-width:600px;margin:0 auto 32px;line-height:1.8}

/* ========== CAPABILITIES GRID ========== */

.capability-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}

.capability-card{position:relative;background:rgba(255,255,255,0.025);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:36px 28px 32px;transition:all 0.4s cubic-bezier(0.16,1,0.3,1);overflow:hidden;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

.capability-card::before{content:'';position:absolute;inset:0;border-radius:16px;background:radial-gradient(600px circle at var(--mouse-x,50%) var(--mouse-y,0%),rgba(59,130,246,0.06),transparent 60%);opacity:0;transition:opacity 0.4s;pointer-events:none}

.capability-card::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,rgba(59,130,246,0.6),transparent);opacity:0;transition:opacity 0.4s}

.capability-card:hover{background:rgba(59,130,246,0.05);border-color:rgba(59,130,246,0.25);transform:translateY(-6px);box-shadow:0 20px 50px rgba(0,0,0,0.35),0 0 40px rgba(59,130,246,0.06)}.capability-card:hover::before{opacity:1}.capability-card:hover::after{opacity:1}

.capability-icon-wrap{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:rgba(59,130,246,0.08);border:1px solid rgba(59,130,246,0.15);margin-bottom:20px;transition:all 0.4s}

.capability-card:hover .capability-icon-wrap{background:rgba(59,130,246,0.15);border-color:rgba(59,130,246,0.3);box-shadow:0 0 20px rgba(59,130,246,0.15)}

.capability-icon{font-size:2.4rem;line-height:1;display:block;transition:transform 0.4s}

.capability-card:hover .capability-icon{transform:scale(1.15)}

.capability-index{position:absolute;top:20px;right:24px;font-size:3.2rem;font-weight:800;color:rgba(255,255,255,0.035);line-height:1;pointer-events:none;user-select:none}

.capability-title{font-size:1.15rem;font-weight:700;color:#fff;margin-bottom:12px;line-height:1.4;letter-spacing:0.01em}

.capability-desc{font-size:0.9rem;color:rgba(255,255,255,0.58);line-height:1.75}

.capability-link{
  display:inline-block;
  margin-top:16px;
  font-size:0.85rem;
  font-weight:600;
  color:rgba(59,130,246,0.85);
  letter-spacing:0.03em;
  transition:color 0.3s,transform 0.3s;
}
.capability-card:hover .capability-link{
  color:rgba(59,130,246,1);
  transform:translateX(4px);
}



@media (max-width:1024px){.capability-grid{grid-template-columns:repeat(2,1fr)}}

@media (max-width:640px){.capability-grid{grid-template-columns:1fr}.capability-card{padding:24px 20px}}



@media (max-width:768px){.hero-split{flex-direction:column;min-height:auto;padding-top:180px}.hero-left{padding:60px 24px 40px}.hero-right{height:300px}.hero-img-overlay{background:linear-gradient(to bottom,#0a0a1a 0%,transparent 40%,transparent 60%,#0a0a1a 100%)}.hero-cta-row{flex-direction:column}.hero-mini-stats{gap:20px}.trust-items{gap:24px}.trust-item{font-size:0.8rem}.featured-cases{grid-template-columns:1fr}}

@media (max-width:480px){.hero-main-title{font-size:1.6rem}.hero-mini-stats{flex-direction:column;gap:8px}.trust-items{flex-direction:column;align-items:center;gap:12px}}



/* ============================================================================

   办公环境图片展播 (about.html) — 工业简约风格

   ============================================================================ */

.about-split { align-items: stretch; }

.about-text-col { padding-right: var(--sp-6); display: flex; flex-direction: column; justify-content: center; }



.office-gallery-wrap {

  display: flex;

  align-items: stretch;

  justify-content: center;

}



.office-gallery {

  position: relative;

  width: 100%;

  aspect-ratio: 16 / 9;

  background: #0a1628;

  border-radius: var(--r-md);

  overflow: hidden;

  border: 1px solid rgba(72,168,230,0.10);

}



.gallery-slide {

  position: absolute;

  top: 0; left: 0;

  width: 100%; height: 100%;

  opacity: 0;

  transition: opacity 0.8s ease;

}

.gallery-slide.active { opacity: 1; z-index: 1; }

.gallery-slide img {

  width: 100%; height: 100%;

  object-fit: cover;

}



.gallery-label {

  position: absolute;

  bottom: 16px; left: 20px;

  z-index: 2;

  font-family: var(--font-display);

  font-size: 0.65rem;

  text-transform: uppercase;

  letter-spacing: 3px;

  color: var(--electric-blue);

  background: rgba(10,22,40,0.85);

  padding: 4px 12px;

  border-left: 2px solid var(--electric-blue);

}



.gallery-dots {

  position: absolute;

  bottom: 16px; right: 20px;

  z-index: 2;

  display: flex;

  gap: 8px;

}

.gallery-dot {

  width: 8px; height: 8px;

  border-radius: 50%;

  background: rgba(255,255,255,0.25);

  cursor: pointer;

  transition: all 0.3s ease;

}

.gallery-dot.active { background: var(--electric-blue); width: 24px; border-radius: 4px; }



@media (max-width: 1024px) {

  .about-split { grid-template-columns: 1fr; }

  .about-text-col { padding-right: 0; }

  .office-gallery { aspect-ratio: 16 / 9; }

}





/* ============================================================

   ABOUT PAGE HORIZONTAL LAYOUT — 强制横版卧式矩形 (宽:高 ≈ 3:1)

   追加于 2026-05-28，使用最高特异性确保抵消所有上游规则

   ============================================================ */

#company .split-section.about-horizontal-wrapper,

.section .split-section.about-horizontal-wrapper,

.split-section.about-horizontal-wrapper,

.about-horizontal-wrapper {

  display: flex !important;

  flex-direction: row !important;

  flex-wrap: nowrap !important;

  grid-template-columns: none !important;

  gap: 0 !important;

  width: 90% !important;

  max-width: 1100px !important;

  height: 300px !important;

  min-height: 300px !important;

  max-height: 300px !important;

  margin: 40px auto !important;

  background: rgba(8, 20, 38, 0.85) !important;

  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(14px);

  border-radius: 12px !important;

  border: 1px solid rgba(72,168,230,0.18) !important;

  box-shadow: 0 8px 32px rgba(0,0,0,0.45) !important;

  overflow: hidden !important;

  align-items: stretch !important;

  justify-content: stretch !important;

}



.about-horizontal-wrapper > .about-panel {

  flex: 3 !important;

  display: flex !important;

  flex-direction: column !important;

  justify-content: flex-start !important;

  overflow-y: auto !important;

  overflow-x: hidden !important;

  padding: 24px 30px !important;

  background: transparent !important;

  border: none !important;

  border-right: 1px solid rgba(72,168,230,0.12) !important;

  border-radius: 0 !important;

  box-shadow: none !important;

  min-width: 0 !important;

  order: 1 !important;

}



.about-horizontal-wrapper > .about-panel-right {

  flex: 2 !important;

  padding: 0 !important;

  background: transparent !important;

  border: none !important;

  border-radius: 0 !important;

  box-shadow: none !important;

  overflow: hidden !important;

  min-width: 0 !important;

  order: 2 !important;

}



.about-horizontal-wrapper .office-gallery {

  width: 100% !important;

  height: 100% !important;

  aspect-ratio: auto !important;

}



.about-horizontal-wrapper .office-gallery .gallery-slide {

  width: 100% !important;

  height: 100% !important;

  position: absolute !important;

}



.about-horizontal-wrapper .office-gallery img {

  width: 100% !important;

  height: 100% !important;

  object-fit: contain !important;

  display: block !important;

}



.about-metrics-row {

  display: grid !important;

  grid-template-columns: repeat(3, 1fr) !important;

  gap: var(--sp-4) !important;

  margin-top: auto !important;

  padding-top: var(--sp-4) !important;

  flex-shrink: 0 !important;

}



@media (max-width: 768px) {

  .about-horizontal-wrapper {

    flex-direction: column !important;

    height: auto !important;

    min-height: auto !important;

    max-height: none !important;

    width: 95% !important;

    margin: 24px auto !important;

  }

  .about-horizontal-wrapper > .about-panel {

    flex: none !important;

    overflow-y: visible !important;

    padding: 20px !important;

    border-right: none !important;

    border-bottom: 1px solid rgba(72,168,230,0.12) !important;

    order: 1 !important;

  }

  .about-horizontal-wrapper > .about-panel-right {

    flex: none !important;

    height: 240px !important;

    order: 2 !important;

  }

}



/* ============================================================================

   INTRO HORIZONTAL PANEL v8.0 — 18:9 (2:1) 公司简介全新布局

   全新类名，彻底避开旧 .about-horizontal-wrapper/.split-section 选择器冲突

   ============================================================================ */



.intro-horizontal-panel {

  display: flex !important;

  flex-direction: row !important;

  flex-wrap: nowrap !important;

  width: 100% !important;

  max-width: 100% !important;

  margin: 16px auto !important;

  min-height: auto !important;

  background: rgba(8, 20, 38, 0.85) !important;

  backdrop-filter: blur(16px) saturate(160%) !important;

  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;

  border-radius: 14px !important;

  border: 1px solid rgba(72,168,230,0.18) !important;

  box-shadow: 0 4px 16px rgba(0,0,0,0.5), 0 0 0 1px rgba(72,168,230,0.08) !important;

  overflow: hidden !important;

  align-items: stretch !important;

  gap: 0 !important;

}



/* 覆盖任何可能的旧 grid 布局 */

.intro-horizontal-panel.split-section,

.split-section.intro-horizontal-panel,

.about-container .intro-horizontal-panel {

  display: flex !important;

  grid-template-columns: none !important;

}



/* 左栏：文字内容 */

.intro-panel-left {

  flex: 1 !important;

  display: flex !important;

  flex-direction: column !important;

  justify-content: flex-start !important;

  overflow-y: auto !important;

  overflow-x: hidden !important;

  padding: clamp(8px,1.5vw,24px) clamp(10px,2vw,32px) !important;

  background: rgba(8,20,38,0.82) !important;

  border: none !important;

  border-right: 1px solid rgba(72,168,230,0.12) !important;

  border-radius: 14px 0 0 14px !important;

  min-width: 0 !important;

  color: #e8edf4 !important;

}



/* 右栏：图片展播 */

.intro-panel-right {

  flex: 1 !important;

  padding: 0 !important;

  background: transparent !important;

  border: none !important;

  border-radius: 0 14px 14px 0 !important;

  overflow: hidden !important;

  min-width: 0 !important;

  position: relative !important;

}



/* 图片展播容器 */

.intro-gallery {

  position: absolute !important;

  top: 0 !important;

  left: 0 !important;

  right: 0 !important;

  bottom: 0 !important;

  overflow: hidden !important;

}



.intro-gallery-slide {

  position: absolute !important;

  top: 0;

  left: 0;

  width: 100% !important;

  height: 100% !important;

  opacity: 0;

  transition: opacity 0.7s ease;

  z-index: 0;

  background: rgba(4, 10, 20, 0.6);

}



.intro-gallery-slide.active {

  opacity: 1;

  z-index: 1;

  will-change: opacity;

}



.intro-gallery-slide img {

  width: 100% !important;

  height: 100% !important;

  object-fit: contain !important;

  display: block !important;

}



/* 展播标签 */

.intro-gallery-label {

  position: absolute;

  bottom: clamp(6px,1vw,14px);

  right: clamp(8px,1.2vw,18px);

  z-index: 5;

  font-size: clamp(0.55rem, 0.6vw, 0.72rem);

  padding: clamp(2px,0.3vw,4px) clamp(6px,0.8vw,12px);

  background: rgba(0,0,0,0.55);

  color: rgba(255,255,255,0.75);

  border-radius: 4px;

  letter-spacing: 1px;

  pointer-events: none;

}



/* 展播指示点 */

.intro-gallery-dots {

  position: absolute;

  bottom: clamp(6px,1vw,16px);

  left: 50%;

  transform: translateX(-50%);

  z-index: 5;

  display: flex;

  gap: clamp(4px,0.5vw,8px);

}



.intro-gallery-dot {

  width: clamp(5px,0.5vw,8px);

  height: clamp(5px,0.5vw,8px);

  border-radius: 50%;

  background: rgba(255,255,255,0.35);

  cursor: pointer;

  transition: all 0.3s ease;

}



.intro-gallery-dot.active {

  background: var(--electric-blue);

  box-shadow: 0 0 8px rgba(15,116,187,0.6);

}



/* 左右箭头 */

.intro-gallery-arrow {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  width: clamp(24px, 2.5vw, 36px);

  height: clamp(24px, 2.5vw, 36px);

  border-radius: 50%;

  border: none;

  background: rgba(0,0,0,0.45);

  color: #fff;

  font-size: clamp(12px, 1.5vw, 18px);

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 3;

  backdrop-filter: blur(4px);

  -webkit-backdrop-filter: blur(4px);

  transition: background 0.25s ease;

  outline: none;

}

.intro-gallery-arrow:hover,

.intro-gallery-arrow:focus-visible {

  background: rgba(15,116,187,0.65);

}

.intro-gallery-prev { left: clamp(6px,0.8vw,12px); }

.intro-gallery-next { right: clamp(6px,0.8vw,12px); }



@media (max-width: 768px) {

  .intro-gallery-arrow {

    width: clamp(22px, 3vw, 30px);

    height: clamp(22px, 3vw, 30px);

    font-size: clamp(10px, 2vw, 16px);

  }

  .intro-gallery-prev { left: clamp(4px,1vw,8px); }

  .intro-gallery-next { right: clamp(4px,1vw,8px); }

}



/* 底部指标行 */

.intro-metrics-row {

  display: grid !important;

  grid-template-columns: repeat(3, 1fr) !important;

  gap: var(--sp-2) !important;

  margin-top: auto !important;

  padding-top: var(--sp-4) !important;

  flex-shrink: 0 !important;

}



.intro-metrics-row .metric-label {

  font-size: clamp(0.55rem, 0.6vw, 0.7rem);

  letter-spacing: 0.5px;

}



/* 移动端适配 */

@media (max-width: 768px) {

  .intro-horizontal-panel {

    flex-direction: column !important;

    aspect-ratio: auto !important;

    height: auto !important;

    min-height: auto !important;

    width: 95% !important;

    margin: clamp(6px,1vw,16px) auto !important;

  }

  .intro-panel-left {

    flex: none !important;

    overflow-y: visible !important;

    padding: clamp(6px,1.2vw,16px) clamp(8px,1.5vw,20px) !important;

    border-right: none !important;

    border-bottom: 1px solid rgba(72,168,230,0.12) !important;

    border-radius: 14px 14px 0 0 !important;

  }

  .intro-panel-right {

    flex: none !important;

    width: 100% !important;

    aspect-ratio: 16 / 9 !important;

    height: auto !important;

    border-radius: 0 0 14px 14px !important;

  }

}


/* ============================================================
   ABOUT PAGE — 侧边锚点导航
   ============================================================ */
.about-anchor-nav {
  position: fixed;
  top: 50%;
  left: clamp(12px, 2vw, 24px);
  transform: translateY(-50%);
  z-index: 999;
  background: rgba(8, 20, 38, 0.88);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(72, 168, 230, 0.2);
  border-radius: 10px;
  padding: clamp(6px, 0.8vw, 10px) clamp(4px, 0.5vw, 8px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
.about-anchor-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(2px, 0.3vw, 6px);
}
.about-anchor-nav a {
  display: block;
  padding: clamp(4px, 0.5vw, 8px) clamp(8px, 1vw, 14px);
  color: rgba(232, 237, 244, 0.65);
  font-size: clamp(0.65rem, 0.7vw, 0.78rem);
  text-decoration: none;
  border-radius: 6px;
  white-space: nowrap;
  transition: all 0.25s ease;
  letter-spacing: 0.5px;
}
.about-anchor-nav a:hover,
.about-anchor-nav a.active {
  color: #fff;
  background: rgba(0, 188, 212, 0.18);
  border-left: 2px solid var(--accent, #00bcd4);
}
@media (max-width: 768px) {
  .about-anchor-nav {
    left: auto;
    right: 8px;
    top: 50%;
    padding: 4px 6px;
    border-radius: 8px;
  }
  .about-anchor-nav a {
    padding: 4px 8px;
    font-size: 0.6rem;
  }
}