/* ===== ECOSYSTEM Static Site - Main Stylesheet ===== */
/* HTML 4.0 + Progressive Enhancement | Pure CSS + Vanilla JS */

/* ===== CSS Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: 'Noto Sans SC', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  /* background: #0a0a1a; */
  color: #e0e0e0;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; outline:none;}
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; }
input, textarea { font-family: inherit; }

/* ===== CSS Variables ===== */
:root {
  --primary: #00e5ff;
  --secondary: #7b61ff;
  --accent: #ff61dc;
  --dark: #0a0a1a;
  --dark-light: #12122a;
  --card-bg: #0f0f19a6;
  --card-border: rgba(255,255,255,.08);
  --text: #e0e0e0;
  --text-muted: rgba(255,255,255,0.6);
  --text-dim: rgba(255,255,255,0.4);
  --text-primary: #F0F0F5;
  --text-secondary: #8A8A9A;
  --text-tertiary: #55556A;
  --gradient-primary: linear-gradient(135deg, #00E5FF, #7B61FF, #FF61DC);
  --gradient-accent: linear-gradient(135deg, #7b61ff, #ff61dc);
  --gradient-card: linear-gradient(135deg, #00E5FF, #7B61FF);
  --accent-gradient: linear-gradient(135deg, #00E5FF, #7B61FF, #FF61DC);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --shadow: 0 4px 24px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 48px rgba(0,0,0,0.4);
  --transition: all 0.3s ease;
  --container-max: 1280px;
  --container-padding: 2.5rem;
  --font-display: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", monospace;
  --font-en: "Inter", "SF Pro Display", "Helvetica Neue", sans-serif;
  --bg-void: #050508;
}

.clearfix:after {content:"\20"; display:block; height:0; clear:both; visibility:hidden; }
.clearfix{display:inline-block; }
.clearfix{display:block;}
.clearbox{border-top:transparent 0px solid;clear:both;font-size:0;margin-top:0px;visibility:hidden; overflow:hidden;height:0;}

/* ===== Layout ===== */
body{ background: url(../images/body-bg.jpg) center no-repeat fixed; background-size: cover;}
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}
.section {
  padding: 3.5rem 0;
  position: relative;
}
.section-header {
  text-align: center;
  margin-bottom: 4rem;
}
.section-label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* color: var(--primary); */
  margin-bottom: 1rem;
  display: block;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.section-label span{background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;}
.section-title {
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
  line-height: 1.2;
}
.section-subtitle {
  font-size: 1rem;
  color: var(--text-muted);
  max-width: 600px;
  margin: 0 auto;
}

/* ===== Background Effects ===== */
/* .bg-stars {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: 
    radial-gradient(ellipse at 20% 80%, rgba(123,97,255,0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(0,229,255,0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(255,97,220,0.05) 0%, transparent 70%),
    #0a0a1a;
  z-index: -2;
}
.bg-stars::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: 
    radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.3), transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.2), transparent),
    radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.3), transparent),
    radial-gradient(2px 2px at 160px 120px, rgba(255,255,255,0.2), transparent),
    radial-gradient(1px 1px at 230px 80px, rgba(255,255,255,0.3), transparent),
    radial-gradient(2px 2px at 300px 150px, rgba(255,255,255,0.15), transparent);
  background-size: 350px 200px;
  animation: twinkle 8s ease-in-out infinite alternate;
} */
@keyframes twinkle {
  0% { opacity: 0.5; }
  100% { opacity: 1; }
}

/* ===== Header / Navigation ===== */
.header {
  position: fixed;
  top: 1.5rem; left: 0; right: 0;
  z-index: 1000;
  background: transparent;
  transition: var(--transition); animation-duration: .3s;
}
.header.scrolled {
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.logo img { height: 3.5rem; width: auto; }
.logo-text {
  display: flex;
  flex-direction: column;
}
.logo-text .en {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
  line-height: 1;
}
.logo-text .cn {
  font-size: 0.625rem;
  color: var(--text-muted);
  line-height: 1.2;
}
.nav { display: flex; align-items: center; gap: 0.5rem; }
.nav-item {
  position: relative;
  padding: 0.5rem .75rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  transition: var(--transition);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.nav-item::before{ content: ''; height: 2px; background: -webkit-linear-gradient(to right, #00E5FF,#7B61FF); background: linear-gradient(to right, #00E5FF,#7B61FF); position: absolute; left: .75rem; right: .75rem; bottom: 0; display: none;}
.nav-item:hover, .nav-item.active {
  color: #fff;
}
.nav-item.active::before{ display: block;}
.nav-item.has-dropdown span::after {
  content: '▼';
  font-size: 0.5rem;
  margin-left: 0.25rem;
  opacity: 0.5;
}
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: rgba(18,18,42,0.98);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 0.5rem;
  display: none;
  transition: var(--transition);
  backdrop-filter: blur(20px);
}
.nav-item:hover .dropdown {
  display: block;
}
.dropdown a {
  display: block;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.dropdown a:hover {
  color: #fff;
  background: rgba(255,255,255,0.05);
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.header-actions button{ height: 40px; transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s; --tw-text-opacity: 1;
    color: rgb(138 138 154 / var(--tw-text-opacity, 1)); padding: .625rem; border: 1px solid #ffffff1a; border-radius: 9999px; cursor: pointer;}
.header-actions button:hover{ --tw-text-opacity: 1;
    color: rgb(0 229 255 / var(--tw-text-opacity, 1)); border-color: #00e5ff4d;}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 100px;
  transition: var(--transition);
  min-height: 40px;
  white-space: nowrap;
}
.btn-primary {
  background: var(--gradient-primary);
  color: #fff;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0,229,255,0.3);
}
.btn-secondary {
    background: transparent;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 100px;
    padding: 14px 32px;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 15px;
    transition: all .3s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px
}

.btn-secondary:hover {
    background: #ffffff14;
    border-color: #ffffff59
}
.btn-outline {
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
}
.btn-outline:hover {
  border-color: var(--primary);
  background: rgba(0,229,255,0.1);
}
.btn-sm { padding: .625rem 1.25rem; font-size: 0.8125rem; }
.btn-lg { padding: 0.875rem 2rem; font-size: 1rem; }

/* Mobile Menu Toggle */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0.5rem;
  z-index: 1001;
}
.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  transition: var(--transition);
}
.menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ===== Hero Section - 3-Frame Carousel ===== */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding-top: 72px;
}
.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  pointer-events: none;
}
.hero-slide.active {
  opacity: 1;
  pointer-events: auto;
}
.hero-slide-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10,10,26,0.3) 0%, rgba(10,10,26,0.7) 70%, #0a0a1a 100%);
}
.hero-contents {
  position: relative;
  z-index: 10;
  width: 100%;
  min-height: 0;
}
.hero-content {
  visibility: hidden;
  position: absolute;
  max-width: 640px;
  width: 100%;
  padding: 0 2rem;
  transition: opacity 0.6s ease, visibility 0.6s ease;
  pointer-events: none;
}
.hero-content.active {
  opacity: 1;
  visibility: visible;
  position: relative;
  pointer-events: auto;
}
.hero-label {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--primary);
  margin-bottom: 1.5rem;
  display: block;
}
.hero-title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 1.5rem;
}
.hero-subtitle {
  font-size: 1.25rem;
  color: rgba(255,255,255,0.8);
  margin-bottom: 1.5rem;
}
.hero-desc {
  font-size: 1rem;
  color: var(--text-muted);
  margin-bottom: 2.5rem;
  line-height: 1.8;
}
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Hero Slider Dots */
.hero-dots {
  position: absolute;
  left: 2rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  z-index: 2;
}
.hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition);
}
.hero-dot.active {
  background: var(--primary);
  border-color: rgba(0,229,255,0.3);
  box-shadow: 0 0 10px rgba(0,229,255,0.5);
}

/* Particle Canvas */
#particle-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* Scroll Indicator */
.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-dim);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  z-index: 2;
}
.scroll-indicator .mouse {
  width: 24px;
  height: 36px;
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 12px;
  position: relative;
}
.scroll-indicator .mouse::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background: var(--primary);
  border-radius: 50%;
  animation: scrollWheel 2s infinite;
}
@keyframes scrollWheel {
  0% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(12px); }
}

/* ===== Stats Bar ===== */
.stats-bar {
  
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  background: rgb(10 10 16 / var(--tw-bg-opacity, 1));
}
.stats-bar .container{display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;}
.stat-item {
  text-align: center;
  padding: 2.5rem 1rem;
  border-right: 1px solid rgba(255,255,255,0.05);
}
.stat-item:last-child { border-right: none; }
.stat-number {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 0.5rem;
	/* font-family: var(--font-mono); */
}
.stat-number.counting {
  animation: countPulse 0.3s ease;
}
@keyframes countPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
.stat-label {
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* ===== Cards ===== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.card:hover {
  /* border-color: rgba(0,229,255,0.2);
  transform: translateY(-4px); */
  /* box-shadow: var(--shadow-lg); */
  transform: translateY(-8px) !important;
  --tw-shadow: 0 8px 32px rgba(0, 229, 255, .1);
  --tw-shadow-colored: 0 8px 32px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);
}
.card-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: var(--gradient-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  font-size: 1.5rem; transition:all 0.3s ease;
}
.card:hover .card-icon{ transform: rotate(5deg) scale(1.05);}
.card:nth-of-type(1) .card-icon,.card:nth-of-type(3) .card-icon{ background: var(--gradient-card);}

.card-tag {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  color: var(--primary);
  background: rgba(0,229,255,0.1);
  border-radius: 100px;
  margin-bottom: 1rem;
  border: 1px solid rgba(0,229,255,0.2);
}
.card-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.75rem;
}
.card-s-title{ font-size: 0.75rem; color: rgb(0 229 255 / 1); margin-bottom: .75rem;}
.card-desc {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #fff;
  font-weight: 500;
  transition: var(--transition);
}
.card-link:hover { color: var(--primary); gap: 0.75rem; }

/* ===== Service Section ===== */
.service-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  padding: 4rem 0;
}
.service-card.reverse { direction: rtl; }
.service-card.reverse > * { direction: ltr; }
.service-image{ background: radial-gradient(circle, rgba(0, 229, 255, 0.05) 0%, transparent 70%);}
.service-image img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.service-image-border{ padding: .5rem; border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px;}
.service-number {
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 700;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 1rem;
  display: block;
}

/* ===== Case Carousel ===== */
.case-carousel {
  position: relative;
  overflow: hidden;
}
.case-carousel-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.case-carousel-slide {
  flex: 0 0 100%;
  min-width: 100%;
  padding: 0 0.5rem;
}
.case-carousel-slide-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.case-carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}
.case-carousel-dots {
  display: flex;
  gap: 0.5rem;
}
.case-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  border: none;
  cursor: pointer;
  transition: var(--transition);
  padding: 0;
  min-height: auto;
}
.case-carousel-dot.active {
  background: var(--primary);
  width: 24px;
  border-radius: 4px;
}
.case-carousel-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--card-border);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  font-size: 1.125rem;
  min-height: 44px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}
.case-carousel-arrow:hover {
  background: rgba(0,229,255,0.1);
  border-color: var(--primary);
}
.case-carousel-arrow.prev { left: -1rem; }
.case-carousel-arrow.next { right: -1rem; }

/* ===== Case Cards ===== */
.case-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.case-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(0,229,255,0.15);
}
.case-image { position: relative; overflow: hidden; flex-shrink: 0; }
.case-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.case-card:hover .case-image img { transform: scale(1.05); }
.case-content { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }
.case-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.case-tag {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  border-radius: 100px;
}
.case-tag.industry { color: var(--secondary); background: rgba(123,97,255,0.1); border: 1px solid rgba(123,97,255,0.2); }
.case-tag.service { color: var(--primary); background: rgba(0,229,255,0.1); border: 1px solid rgba(0,229,255,0.2); }
.case-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.75rem;
}
.case-desc {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 1rem;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== ESG Section ===== */
.esg-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.esg-image img { border: 1px solid #ffffff1a; border-radius: var(--radius-lg); }
.esg-image p{ font-size: 0.875rem; color: rgb(138 138 154 / 1); text-align: center; margin-top: 0.625rem;}

.esg-content .section-title{ font-size: 2.625rem;}
.esg-content p{ margin-top: 1rem; font-size: 1rem; color: rgb(138 138 154 / 1); line-height: 1.625; line-height:1.8;margin-bottom:2rem;}

.esg-pillars{ padding-top: .75rem; margin-top: 1rem;}
.esg-pillar{ align-items: center; margin-top: .75rem; position: relative; padding-left: 3.4375rem;}
.esg-pillar p{ margin-top: 0;}
.esg-pillar .justify-center{ display: flex; justify-content: center; align-items: center; background: rgba(0, 229, 255, 0.094); border-radius: var(--radius-lg); width: 2.5rem; height: 2.5rem; position: absolute; left: 0; top: 0;}
.esg-pillar .text-tit{ font-size: .875rem; color: rgb(240 240 245 / 1); line-height: 1.25rem;}
.esg-pillar .text-cont{ font-size: .75rem; color: rgb(138 138 154 / 1); line-height: 1rem;}










/* ===== FAQ Accordion ===== */
.faq-item {
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  margin-bottom: 1rem;
  overflow: hidden;
  background: var(--card-bg);
}
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 2rem;
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  transition: var(--transition);
  width: 100%;
  min-height: 48px;
  position: relative;
}
.faq-question:hover { background: rgba(255,255,255,0.02); }
.faq-question .icon {
  font-size: 1.25rem;
  color: var(--primary);
  transition: var(--transition);
  flex-shrink: 0;
  margin-left: 1rem;
	position: absolute; right: 2rem;
}
.faq-item.active .faq-question .icon { transform: rotate(45deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.faq-item.active .faq-answer { max-height: 500px; }
.faq-answer-inner {
  padding: 1rem 2rem;
  font-size: 0.9375rem;
  color: var(--text-muted);
  line-height: 1.8;
  border-top: 1px solid #ffffff0d;
}
.faq-answer-inner strong{ color: #fff;}

/* ===== Timeline ===== */
.timeline {
  position: relative;
  padding: 2rem 0;
  max-width: 880px;
  margin: 0 auto;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  margin-left: -1px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(rgb(0, 229, 255), rgb(123, 97, 255), rgb(255, 97, 220));
}

.timeline-item {
  display: flex;
  gap: 2rem;
  margin-bottom: 2.5rem;
  position: relative;
  padding-left: 64px;
  opacity: 0;
  transform: translateX(-30px);
  transition: all 0.6s ease;
}
.timeline-item.visible {
  opacity: 1;
  transform: translateX(0);
}
.timeline-dot {
  position: absolute;
  left: -9px;
  top: 1.5rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: linear-gradient(135deg, rgb(0, 229, 255), rgb(123, 97, 255));
  /* border: 3px solid var(--dark); */
  z-index: 2;
  box-shadow: rgba(255, 255, 255, 0.15) 0px 0px 0px 4px;
  transition: all 0.3s ease;
}
.timeline-content {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem 2rem;
  flex: 1;
  transition: all 0.3s ease;
  position: relative;
}
.timeline-content::before {
  content: '';
  position: absolute;
  left: -4rem;
  top: 1.9rem;;
  width: 2.5rem; height: 1px; background-color: #ffffff1a;
}
.timeline-content h3{ font-size: 1.25rem; margin-bottom: .5rem;}
.timeline-content p{ font-size: .875rem; color: rgb(138 138 154 / 1);}

.timeline-box{ padding-left: 50%;}
.timeline-box:nth-child(even){ padding-left: 0; padding-right: 50%;}
.timeline-box:nth-child(even) .timeline-item{ padding-left: 0; padding-right: 64px;}
.timeline-box:nth-child(even) .timeline-dot{ left: auto; right: -8px;}
.timeline-box:nth-child(even) .timeline-content::before{ left: auto; right: -4rem;}


.timeline-tag {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  border-radius: 100px;
  margin-bottom: 0.75rem;
}
.timeline-tag.milestone { color: var(--primary); background: rgba(0,229,255,0.1); }
.timeline-tag.cert { color: var(--secondary); background: rgba(123,97,255,0.1); }
.timeline-tag.honor { color: var(--accent); background: rgba(255,97,220,0.1); }
.timeline-year {
	display: block;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--primary);
  margin-top: 0.75rem;
}

/* ===== CTA Section ===== */
.cta-section {
  text-align: center;
  padding: 5rem 0;
  position: relative;
  background: rgb(5, 5, 8);
}
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(at 30% 40%, rgba(0, 229, 255, 0.1) 0%, transparent 50%), radial-gradient(at 70% 60%, rgba(123, 97, 255, 0.1) 0%, transparent 50%);
  pointer-events: none;
}
.cta-title {
  font-size: clamp(1.75rem, 4vw, 2rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
}
.cta-desc {
  font-size: 1rem;
  color: var(--text-muted);
  max-width: 900px;
  margin: 0 auto 2rem;
}
.cta-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ===== Footer ===== */
.footer {
  padding: 4rem 0 2rem;
  background: rgb(10 10 16);
  position: relative;
}
.footer::before{ content: ''; width: 100%; height: 1px; background: linear-gradient(90deg, rgb(0, 229, 255), rgb(123, 97, 255)); position: absolute; top: 0; left: 0;}
.footer-grid {
  display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}
.footer-brand .footer-logo{ height: 3rem; margin-bottom: 1.25rem;}
.footer-brand .footer-logo img{ display: block; height: 100%;}
.footer-brand .footer-desc {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-top: 1rem;
}
.footer-title {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 1.25rem;
}
.footer-links a {
  display: block;
  padding: 0.375rem 0;
  font-size: 0.875rem;
  color: var(--text-muted);
  transition: var(--transition);
}
.footer-links a:hover { color: var(--primary); }
.footer-contact p, .footer-contact a {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  padding: 0.375rem 0;
  line-height: 1.6;
}
.footer-contact .icon { color: #fff; flex-shrink: 0; margin-top: 0.125rem; }
.footer-qr { text-align: center; }
.footer-qr img { width: 100px; margin: 0 auto 0.5rem; border-radius: var(--radius-sm); }
.footer-qr p { font-size: 0.75rem; color: var(--text-dim); margin-bottom: 1.25rem;}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.05);
  padding-top: 2rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-dim);
}
.footer-bottom a { color: var(--text-dim); transition: var(--transition); }
.footer-bottom a:hover { color: var(--primary); }

/* ===== Page Header ===== */
.page-header { display: flex; justify-content: center; align-items: center; height: 60vh; min-height: 31.25rem;/*min-height: 500px;*/
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,229,255,0.1) 0%, transparent 60%);
}
.page-header .container{ position: relative; z-index: 5; 
	}
.page-header-label {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 700;
  
  margin-bottom: 1rem;
  line-height: 1;
}
.page-header-label span{background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;}
.page-header-title {
  font-size: clamp(1.5rem, 4vw, 3.5rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
}
.page-header-subtitle {
  font-size: 1rem;
  color: rgb(138 138 154 / 1);
  max-width: 600px;
  margin: 0 auto;
}
.page-header-cont{ 
	font-size: 0.8125rem;
	line-height: 1.6;
	letter-spacing: 0.02em;
	color: var(--text-dim);
	font-family: var(--font-display);
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	position: relative;
}
.page-header-cont::before{ content: ''; width: 7.5rem; height: 2px; background: linear-gradient(90deg, rgb(0, 229, 255), rgb(123, 97, 255)); border-radius: 1px; position: absolute; top: 0; left: 50%; transform:translateX(-50%);}
.page-header-txt{ font-size: 1rem; color: rgb(138 138 154 / 1); margin-top: 1.5rem;}

/* ===== Feature List ===== */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2rem;
}
.feature-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: var(--text);
}
.feature-item .icon {
  width: 20px;
  height: 20px;
  color: var(--primary);
  flex-shrink: 0;
}

/* ===== Value Cards ===== */
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.value-card {
  text-align: center;
  padding: 2.5rem 1.5rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  transition: var(--transition);
}
.value-card:hover {
  border-color: rgba(0,229,255,0.2);
  transform: translateY(-4px);
}
.value-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}
.value-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.75rem;
}
.value-desc {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.7;
}

/* ===== Comparison Table ===== */
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--card-border);
}
.compare-header {
  padding: 1.25rem;
  font-weight: 600;
  text-align: center;
  background: rgba(255,255,255,0.05);
  color: #fff;
  border-bottom: 1px solid var(--card-border);
}
.compare-header.highlight {
  background: var(--gradient-primary);
}
.compare-cell {
  padding: 1rem 1.25rem;
  font-size: 0.875rem;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  color: var(--text-muted);
}
.compare-cell.check { color: var(--primary); font-size: 1.25rem; }
.compare-cell.cross { color: var(--text-dim); font-size: 1.25rem; }

/* ===== Partner Cards ===== */
.partner-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  padding: 1.5rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  transition: var(--transition);
}
.partner-card:hover { border-color: rgba(0,229,255,0.2); }
.partner-card h3{ color: #fff; margin-bottom: 0.5rem;}
.partner-card p{ color: var(--text-muted); font-size: 0.875rem; line-height: 1.5; margin-bottom: 0.75rem;}


.partner-logo {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-md);
  object-fit: cover;
}

/* ===== Honor Gallery ===== */
.honor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
}
.honor-item {
  text-align: center;
  padding: 2rem 1rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  transition: var(--transition);
}
.honor-item:hover { border-color: rgba(0,229,255,0.2); transform: translateY(-4px); }
.honor-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.honor-title { font-size: 0.9375rem; font-weight: 600; color: #fff; margin-bottom: 0.5rem; }
.honor-year { font-size: 0.75rem; color: var(--primary); }

/* ===== Job Cards ===== */
.job-card {
  padding: 1.5rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  margin-bottom: 1rem;
  transition: var(--transition);
}
.job-card:hover { border-color: rgba(0,229,255,0.2); }
.job-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.job-title { font-size: 1.125rem; font-weight: 600; color: #fff; }
.job-urgent {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  color: #ff4757;
  background: rgba(255,71,87,0.1);
  border-radius: 100px;
}
.job-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.job-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.job-tag {
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  color: var(--primary);
  background: rgba(0,229,255,0.1);
  border-radius: 100px;
}

/* ===== Benefit Grid ===== */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1rem;
}
.benefit-item {
  text-align: center;
  padding: 1.5rem 1rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  transition: var(--transition);
}
.benefit-item:hover { border-color: rgba(0,229,255,0.2); }
.benefit-icon { font-size: 1.5rem; margin-bottom: 0.5rem; }
.benefit-title { font-size: 0.8125rem; color: var(--text); }

/* ===== Contact Cards ===== */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
.contact-card {
  padding: 2rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  transition: var(--transition);
}
.contact-card:hover { border-color: rgba(0,229,255,0.2); }
.contact-type {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
  margin-bottom: 0.5rem; background: linear-gradient(135deg, rgba(0, 229, 255, 0.2), rgba(123, 97, 255, 0.2));
	color: rgb(0, 229, 255);
	border: 1px solid rgba(0, 229, 255, 0.3);padding: 0.25rem 0.75rem;    border-radius: 9999px;
}
.contact-title { font-size: 1.25rem; font-weight: 600; color: #fff; margin-top: .5rem; /* margin-bottom: 1rem; */ }
.contact-info p, .contact-info a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0;
  font-size: 0.9375rem;
  color: var(--text-muted);
}

/* ===== Result/Metric Cards ===== */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.metric-card {
  text-align: center;
  padding: 2rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
}
.metric-number {
  font-size: 2.5rem;
  font-weight: 700;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
}
.metric-label { font-size: 0.875rem; color: var(--text-muted); }

/* ===== Process Steps ===== */
.process-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1rem;
}
.process-step { display: flex; align-items: center; gap: .75rem; -webkit-backdrop-filter: blur(1.25rem) saturate(180%); backdrop-filter: blur(1.25rem) saturate(180%); background: #0f0f19a6; border: 1px solid rgba(255, 255, 255, .08); border-radius: 1rem;
  padding: .75rem 1.25rem;
  position: relative;
}


/* ===== Challenge/Solution Cards ===== */
.cs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.cs-card {
  padding: 2rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
}
.cs-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.cs-item {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.cs-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: rgba(255,71,87,0.1);
  color: #ff4757;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cs-icon.solution {
  background: rgba(0,229,255,0.1);
  color: var(--primary);
}
.cs-item-title { font-size: 1rem; font-weight: 600; color: #fff; margin-bottom: 0.25rem; }
.cs-item-desc { font-size: 0.875rem; color: var(--text-muted); line-height: 1.6; }

/* ===== Platform Tags ===== */
.platform-tags { /* display: flex; flex-wrap: wrap; */ gap: 0.75rem; margin-top: 1rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));}
.platform-tag {
  /* display: flex;
  flex-direction: column; */
  align-items: center;
  text-align: center;
  /* gap: 0.375rem; */
  padding: 1rem 0.5rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  color: var(--text);
  min-width: 72px;
}
.platform-tag svg{ color: rgb(0 229 255 / 1);}
.platform-tag .icon { font-size: 1.25rem; }
.platform-tag:hover{ background-color: #00e5ff0d; border-color: #00e5ff4d;}

.partner-tags{ padding: 1.5rem; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg); transition: var(--transition);}
.partner-tags .logo-box ul{ margin: 0 -1.875rem; text-align: center; font-size: 0;}
.partner-tags .logo-box li{ display: inline-block; vertical-align: middle; margin: 0.625rem 1.875rem;}
.partner-tags .logo-box li img{ display: block; height: 4.0625rem; margin: 0 auto;}
.partner-tags .logo-box li .title{ font-size: 1rem; color: #fff; text-align: center;}



/* ===== Industry Grid ===== */
.industry-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.industry-card {
  display: grid;
  grid-template-columns: repeat(12,minmax(0,1fr));
  gap: 2rem;
  padding: 2rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  align-items: center;
}
.industry-image{ grid-column: span 5 / span 5; border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px; padding: .5rem; -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);}
.industry-image img { border-radius: var(--radius-md); }
.industry-inner{ grid-column: span 7 / span 7;}
.industry-card .card-title{ font-size: 2.625rem;}
.industry-card p{ color: rgb(138 138 154 / 1);}
.industry-card .card-link{ margin-top: 2rem;}


/* ===== Case Study Detail ===== */
.case-hero { padding: 8rem 0 4rem; min-height: 70dvh; text-align: center; position: relative; overflow: hidden; display: flex; align-items: center;}
.case-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,229,255,0.1) 0%, transparent 60%);
}
.case-hero .container{ position: relative; z-index: 5; max-width: 56.25rem;}
.case-meta { display: flex; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; justify-content: center;}
.case-meta-tag { padding: .25rem .75rem; font-size: 0.75rem; border-radius: 100px; background: #0f0f1966; backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border: 1px solid rgba(255, 255, 255, .06);}
.case-meta-tag.industry{ color: rgb(0 229 255 / 1);}
.case-hero-title { font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 700; color: #fff; margin-bottom: 1rem; text-align: center;}
.case-hero-desc { font-size: 1.0625rem; color: var(--text-muted); line-height: 1.8; }

.case-hero-subtitle {
  font-size: 1rem;
  color: rgb(138 138 154 / 1);
  margin: 0 auto;
  margin-top: 1.5rem;
}
.case-hero .cta-actions{ margin-top: 2.5rem;}

/* ===== Tabs ===== */
.tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 5rem;}
.tab {
  padding: .625rem 1.25rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-family: var(--font-display);
  letter-spacing: 0.01em;
  background: rgba(15, 15, 25, 0.65);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 100px;
  cursor: pointer;
}
.tab span{ font-size: 0.6875rem;}
.tab:hover, .tab.active {
  color: #fff !important;
}
.tab.active {
	background: linear-gradient(135deg, rgb(0, 229, 255), rgb(123, 97, 255));
	border-color: transparent;
}
.tab {
  transition: all 0.3s ease;
}
.tab:hover:not(.active) {
  color: rgba(255,255,255,0.8);
}

/* ===== Back to Top ===== */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
  z-index: 999;
  font-size: 1.25rem;
  box-shadow: 0 4px 16px rgba(0,229,255,0.3);
}
.back-to-top.visible { opacity: 1; visibility: visible; }
.back-to-top:hover { transform: translateY(-4px); }

/* ===== Kimi Agent Float ===== */
.kimi-float {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 998;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: rgba(18,18,42,0.95);
  border: 1px solid var(--card-border);
  border-radius: 100px;
  font-size: 0.8125rem;
  color: var(--text);
  transition: var(--transition);
  backdrop-filter: blur(10px);
}
.kimi-float:hover { border-color: var(--primary); }
.kimi-float img { width: 24px; height: 24px; }

/* ===== Enhanced Hover Effects ===== */
.card:not(.animate-in) { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.card:hover {
  border-color: rgba(0,229,255,0.15);
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0,229,255,0.08), var(--shadow-lg);
}
.nav-item {
  transition: all 0.3s ease;
}
.nav-item:hover {
  text-shadow: 0 0 10px rgba(0,229,255,0.5);
}
.btn {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-primary:hover {
  filter: brightness(1.15);
  transform: scale(1.02);
  box-shadow: 0 4px 24px #00e5ff40
}
.case-card {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.case-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0,229,255,0.08), var(--shadow-lg);
  border-color: rgba(0,229,255,0.15);
}
.footer-links a {
  transition: all 0.25s ease;
  position: relative;
}
/* .footer-links a::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--primary);
  transition: width 0.25s ease;
}
.footer-links a:hover::after {
  width: 100%;
} */
.stat-item {
  transition: all 0.3s ease;
}
.stat-item:hover {
  background: rgba(255,255,255,0.04);
}
.honor-item, .benefit-item, .value-card {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-item {
  transition: all 0.3s ease;
}
.faq-item:hover {
  border-color: rgba(0,229,255,0.1);
}


/* ===== Glow Effects ===== */
.glow-border {
  position: relative;
}
.glow-border::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: var(--gradient-primary);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
  filter: blur(8px);
}
.glow-border:hover::after {
  opacity: 0.3;
}

/* ===== Animations ===== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--dark); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }

/* ===== Selection ===== */
::selection {
  background: rgba(0,229,255,0.3);
  color: #fff;
}

.swiper-container{ position: relative; overflow: hidden;}
.swiper-pagination-bullet{ width: 0.75rem; height: 0.75rem; background: #ffffff4d; animation-duration: .3s; opacity: 1;}
.swiper-pagination-bullet-active{ background: -webkit-linear-gradient(to bottom right, #00E5FF,#7B61FF); background: linear-gradient(to bottom right, #00E5FF, #7B61FF);}


.home-banner{ height: 85vh; position: relative;}
.home-banner .swiper-container{ height: 100%;}
.home-banner .swiper-slide{ position: relative; background-color: #000; overflow: hidden;}
.home-banner .swiper-slide .hero-slide-bg{ transform: scale(1.1); transition:all 3s ease;}
.home-banner .swiper-slide::before{ content: ''; width: 100%; height: 100%; background: linear-gradient(to right, rgba(5, 5, 8, 0.88) 0%, rgba(5, 5, 8, 0.6) 50%, rgba(5, 5, 8, 0.3) 100%); position: absolute; left: 0; top: 0; z-index: 2;}
.home-banner .swiper-slide .banner-inner{ width: 100%; position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); z-index: 5; padding-left: 4rem; padding-right: 4rem;}
.home-banner .swiper-slide .banner-cont{ max-width: 640px;}
.home-banner .swiper-slide-active .hero-slide-bg{ transform: scale(1);}
.home-banner .swiper-pagination{ right: auto; left: 2rem;}
.home-banner .swiper-pagination-bullet{ margin: 12px 0 !important;}
.home-banner .swiper-pagination-bullet-active{ transform: scale(1.25);}

.case-carousel-swiper{ position: relative;}
.case-carousel-swiper .swiper-container{ margin: 0 -0.75rem;}
.case-carousel-swiper .swiper-slide{ float: left; width: 33.333%; padding: 0 0.75rem;}
.case-carousel-swiper .swiper-slide .block-box{ background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg); overflow: hidden; transition:all 0.3s ease;}
.case-carousel-swiper .swiper-slide .block-box:hover .case-image img { transform: scale(1.05); }
.case-carousel-swiper .swiper-arrow{ width: 40px; height: 40px; line-height: 40px; border-radius: 50%; background: #0f0f19a6; border: 1px solid rgba(255,255,255,.08); transition: var(--transition); font-size: 1.5rem; color: #fff; text-align: center; position: absolute; top: 25%; z-index: 5; cursor: pointer;-webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);}
.case-carousel-swiper .swiper-arrow:hover{ color: #00e5ff4d; border-color: #00e5ff4d;}
.case-carousel-swiper .swiper-arrow-prev{ left: -1.25rem;}
.case-carousel-swiper .swiper-arrow-next{ right: -1.25rem;}
.case-carousel-swiper .swiper-pagination{ position: initial; margin-top: 2rem;}
.case-carousel-swiper .swiper-pagination-bullet{ width: 0.5rem; height: 0.5rem;}
.case-carousel-swiper .swiper-pagination-bullet-active{ width: 1.5rem; border-radius: 0.5rem;}

.cases-section::before{ content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 20%, rgba(0,229,255,.08) 0%, transparent 50%), radial-gradient(ellipse at 70% 80%, rgba(123,97,255,.08) 0%, transparent 50%); pointer-events: none; z-index: 0;}

.cases-top-box{ margin-bottom: 3rem; text-align: center;}
.cases-top-box .cta-cont{
	font-size: 0.8125rem;
	line-height: 1.6;
	letter-spacing: 0.02em;
	color: var(--text-dim);
	font-family: var(--font-display);
	margin-top: 1rem;
	padding-top: 1rem;
	position: relative;
}
.cases-top-box .cta-cont::before{ content: ''; width: 7.5rem; height: 2px; background: linear-gradient(90deg, rgb(0, 229, 255), rgb(123, 97, 255)); border-radius: 1px; position: absolute; top: 0; left: 50%; transform:translateX(-50%);}

.cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.cases-grid .case-image .icon-items{ padding: .125rem .5rem; background: linear-gradient(135deg, rgb(0, 229, 255), rgb(123, 97, 255)); border-radius: 9999px; font-size: 0.625rem; font-weight: 600; color: rgb(255, 255, 255); letter-spacing: 0.02em; position: absolute; top: .75rem; right: .75rem;}
.cases-grid .case-image img{ height: 140px;}
.cases-grid .case-title{ margin-bottom: .25rem; flex: 1 1 0%;}
.cases-grid .p-industry{ font-size: 0.75rem; line-height: 1.6; color: var(--text-primary); font-family: var(--font-display); letter-spacing: 0.02em; margin-bottom: 1rem;}

.service-info p{ color: rgb(138 138 154 / 1); margin-top: 1.25rem;}
.service-info .text-sm{ font-size: .875rem; color: rgb(85 85 106 / 1);}
.service-info .value-grid{ gap: .75rem; grid-template-columns: repeat(5, 1fr); padding-top: .5rem; margin-top: 1.25rem;}
.service-info .value-card{ padding: .375rem 1rem;}
.service-info .value-card .value-title{ font-size: .75rem; line-height: 1rem; margin-bottom: 0;}
.service-info .value-card:hover{ border-color: transparent; transform: translateY(0);}

.value-card-philosophy .value-title{ color:var(--primary);font-size:0.875rem;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:0.75rem;}
.value-card-philosophy h3{ font-size:1.25rem;color:#fff;margin-bottom:1rem;}

.current-report{ padding: 1.25rem; -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); background: #0f0f19a6;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--radius-lg);}
.current-report .items-start{ display: flex; flex-direction: row; gap: 1.25rem; align-items: flex-start;}
.current-report .items-start .report-cover{ display: flex; width: 12.5rem; height: 17.5rem; background: linear-gradient(135deg, rgba(0, 229, 255, 0.2), rgba(0, 229, 160, 0.2)); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-lg); justify-content: center; align-items: center; overflow: hidden;}
.current-report .items-start .report-cover .text-center{ text-align: center;}
.current-report .items-start .report-cover .text-center .font-en{ font-size: 1.5rem; font-weight: bold; line-height: 2rem; font-family: Inter, SF Pro Display, Helvetica Neue, sans-serif; background: linear-gradient(135deg, rgb(0, 229, 255), rgb(0, 229, 160)) text; -webkit-text-fill-color: transparent;}
.current-report .items-start .report-cover .text-center .text-xs{ letter-spacing: .025em; color: rgb(138 138 154 / 1); font-size: .75rem; line-height: 1rem; margin-top: .5rem;}
.current-report .items-start .cont-inner{ flex: 1 1 0%;}
.current-report .items-start .cont-inner .type-box{ background: rgba(0, 229, 160, 0.12); color: rgb(0, 229, 160); border: 1px solid rgba(0, 229, 160, 0.2); font-size: .75rem; line-height: 1rem; padding: .25rem .75rem; border-radius: 9999px;}
.current-report .items-start .cont-inner .tit{ font-size: 1.5rem; line-height: 2rem; color: rgb(240 240 245 / 1); font-weight: bold; margin-top: .75rem;}
.current-report .items-start .cont-inner .txt{ color: rgb(138 138 154 / 1); font-size: 1rem; line-height: 1.625; margin-top: .75rem;}
.current-report .items-start .cont-inner .label{ color: rgb(138 138 154 / 1); font-size: .75rem; line-height: 1rem; display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: .75rem;}
.current-report .items-start .cont-inner .label .flex{ display: flex; gap: .5rem; align-items: center;}
.current-report .items-start .cont-inner .label .flex svg{ color: rgb(0 229 255 / 1);}
.current-report .items-start .cont-inner .btn-box{ display: flex; flex-wrap: wrap; gap: .75rem; padding-top: .5rem; margin-top: .75rem;}
.current-report .items-start .cont-inner .btn-box a{ display: inline-flex; flex-wrap: wrap; gap: .5rem; font-size: .875rem; line-height: 1.25rem; padding: .75rem 1.5rem;
border-radius: 100px;
    color: #fff;
    font-weight: 600;
    transition: all .3s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;}
.over-years .container{ display: grid; gap: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr));}
.over-years .current-report .items-start .report-cover{ width: 5rem; height: 6.875rem;}
.over-years .current-report .items-start .cont-inner .tit{ font-size: 1rem; line-height: 1.5rem; margin-top: .5rem;}
.over-years .current-report .items-start .cont-inner .txt{ font-size: .875rem; line-height: 1.25rem; margin-top: .25rem;}
.over-years .current-report .items-start .cont-inner .btn-box button{ font-size: .75rem; padding: .5rem 1rem;}
.over-years .current-report:nth-of-type(1) .items-start .report-cover{ background: linear-gradient(135deg, rgba(0, 229, 255, 0.15), rgba(123, 97, 255, 0.15)); border: 1px solid rgba(255, 255, 255, 0.08);}
.over-years .current-report:nth-of-type(1) .items-start .report-cover .text-center .font-en{ background: linear-gradient(135deg, rgb(0, 229, 255), rgb(123, 97, 255)) text; -webkit-text-fill-color: transparent;}
.over-years .current-report:nth-of-type(2) .items-start .report-cover{ background: linear-gradient(135deg, rgba(123, 97, 255, 0.15), rgba(255, 97, 220, 0.15)); border: 1px solid rgba(255, 255, 255, 0.08);}
.over-years .current-report:nth-of-type(2) .items-start .report-cover .text-center .font-en{ background: linear-gradient(135deg, rgb(123, 97, 255), rgb(255, 97, 220)) text; -webkit-text-fill-color: transparent;}
.over-years .current-report:nth-of-type(2) .items-start .cont-inner .type-box{ background: rgba(123, 97, 255, 0.1); color: rgb(123, 97, 255); border: 1px solid rgba(123, 97, 255, 0.15);}
.over-years .current-report:nth-of-type(2) .items-start .cont-inner .label .flex svg{ color: rgb(123, 97, 255);}


.honors-inner .tabs-box{ margin-bottom: 2rem;}
.honors-inner .tabs-box ul{ display: flex; display: -webkit-flex; gap: .25rem;}
.honors-inner .tabs-box li{ flex: 1; text-align: center; font-size: .875rem; line-height: 1.25rem; padding: 0.5rem 0.75rem; border: 1px solid transparent; border-radius: 1.25rem; cursor: pointer;}
.honors-inner .tabs-box li svg,.honors-inner .tabs-box li span{ display: inline-block; vertical-align: middle;}
.honors-inner .tabs-box li svg{ width: 1rem; height: 1rem; margin-right: 0.3125rem;}
.honors-inner .tabs-box li:hover{ border-color: rgba(255,255,255,0.15);}
.honors-inner .tabs-box li.active{ color: rgb(255 184 0 / 1); background-color: #ffb8001a; border-color: #ffb80066;}
.honors-inner .tabs-container .box{ display: none;}
.honors-inner .tabs-container .tabs-content{ padding: 2rem; background-color: #0f0f19a6; -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255, 255, 255, .08); border-radius: 1rem; display: flex; flex-direction: row; align-items: flex-start; gap: 2rem;}
.honors-inner .tabs-container .tabs-content .inner-box{ flex: 1 1 0%;}
.honors-inner .tabs-container .tabs-content .inner-box .top-title-box{ padding-left: 3.125rem; margin-bottom: .5rem; position: relative; margin-bottom: 1rem;}
.honors-inner .tabs-container .tabs-content .inner-box .top-title-box .icon{ width: 2.5rem; height: 2.5rem; background: rgba(255, 184, 0, 0.15); border-radius: 1rem; position: absolute; left: 0; top: 50%; transform:translateY(-50%);}
.honors-inner .tabs-container .tabs-content .inner-box .top-title-box .icon svg{ width: 1.25rem; height: 1.25rem; position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%);}
.honors-inner .tabs-container .tabs-content .inner-box .top-title-box .title h3{ font-size: 1.5rem; line-height: 2rem;}
.honors-inner .tabs-container .tabs-content .inner-box .top-title-box .title a{ color: rgb(0 229 255 / 1); font-size: .75rem; line-height: 1rem;}
.honors-inner .tabs-container .tabs-content .inner-box p{ color: rgb(138 138 154 / 1);}
.honors-inner .tabs-container .tabs-content .inner-box .list-box{ margin-top: 1rem; padding-top: 0.5rem;}
.honors-inner .tabs-container .tabs-content .inner-box .list-box .list-item{ padding: 1rem; background: rgba(255, 184, 0, 0.06); border: 1px solid rgba(255, 184, 0, 0.12); border-radius: 1rem; display: flex; gap: .75rem; font-size: .875rem; margin-bottom: 0.75rem; cursor: pointer;}
.honors-inner .tabs-container .tabs-content .inner-box .list-box .list-item svg{ width: 1.125rem; height: 1.125rem;}
.honors-inner .tabs-container .tabs-content .inner-box .list-box .list-item p{ color: rgb(240 240 245 / 1);}

.honors-inner .tabs-container .tabs-content .slogan-box{ width: 20rem; height: 17.5rem; background: linear-gradient(135deg, rgba(255, 184, 0, 0.12), rgba(255, 97, 220, 0.08)); border: 1px solid rgba(255, 255, 255, 0.08); padding: 1.5rem; border-radius: 1rem; display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center;}
.honors-inner .tabs-container .tabs-content .slogan-box .icon{ display: flex; width: 5rem; height: 5rem; background: linear-gradient(135deg, rgba(255, 184, 0, 0.2), rgba(255, 97, 220, 0.15)); border-radius: 100%; justify-content: center; align-items: center; margin-bottom: 1rem;}
.honors-inner .tabs-container .tabs-content .slogan-box .cont-box{ font-size: .75rem; color: rgb(138 138 154 / 1);}
.honors-inner .tabs-container .tabs-content .slogan-box .cont-box .title{ font-size: 1.125rem; font-weight: 600; line-height: 1.75rem; color: rgb(240 240 245 / 1);}


.honors-inner .tabs-container .tabs-content2 .inner-box .list-box .list-item{ padding: 1rem; background: rgba(0, 229, 160, 0.06); border: 1px solid rgba(0, 229, 160, 0.12); border-radius: 1rem; display: flex; gap: .75rem; font-size: .875rem; margin-bottom: 0.75rem; position: relative;}
.honors-inner .tabs-container .tabs-content2 .inner-box .list-box .list-item span{ color: rgb(240 240 245 / 1);}
.honors-inner .tabs-container .tabs-content2 .inner-box .list-box .list-item .ml-auto{ position: absolute; top: 50%; transform:translateY(-50%); right: 1rem;}
.honors-inner .tabs-container .tabs-content2 .inner-box .list-box a.list-item:hover span{ color: rgb(0, 229, 160);}
.honors-inner .tabs-container .tabs-content2 .inner-box .list-box a.list-item:hover .ml-auto{ color: rgb(0, 229, 160);}
.honors-inner .tabs-container .tabs-content2 .slogan-box{ background: linear-gradient(135deg, rgba(0, 229, 160, 0.12), rgba(0, 229, 255, 0.08)); border: 1px solid rgba(255, 255, 255, 0.08);}
.honors-inner .tabs-container .tabs-content2 .slogan-box .icon{ background: linear-gradient(135deg, rgba(0, 229, 160, 0.2), rgba(0, 229, 255, 0.15));}

.contact-tit{ padding-left: 4rem; position: relative; margin-bottom: 1.5rem;}
.contact-tit .icon{ width: 3rem; height: 3rem; border-radius: 0.75rem; background: linear-gradient(135deg, rgba(0, 229, 255, 0.15), rgba(123, 97, 255, 0.15)); position: absolute; left: 0; top: 0;}
.contact-tit .icon svg{ width: 1.5rem; height: 1.5rem; color: rgb(0 229 255 / 1); position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%);}
.contact-btn{ margin-top: 1.5rem;}
.contact-btn a{ padding: 12px 24px; font-size: 14px; border-radius: 100px;
    padding: 14px 32px;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    transition: all .3s ease;
    cursor: pointer;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px}
	
	
.faq-tit{ color:#fff;font-size:1.25rem;margin:2rem 0 1rem;}
.tabs-faq .tab:hover{ background: linear-gradient(135deg, rgb(0, 229, 255), rgb(123, 97, 255)); border-color: transparent;}

.page-header .cta-actions{ margin-top: 2.5rem;}

.service-geo{ background: #0f0f19a6; -webkit-backdrop-filter: blur(1.25rem) saturate(180%); backdrop-filter: blur(1.25rem) saturate(180%); border: 1px solid rgba(255, 255, 255, .08); border-radius: 1rem; padding: 2.5rem;}
.geo-card-icon{ color: rgb(0 229 255 / 1); margin-bottom: 1rem;}

.geo-compare-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem;}
.geo-glass-panel{ padding: 2rem; -webkit-backdrop-filter: blur(1.25rem) saturate(180%); backdrop-filter: blur(1.25rem) saturate(180%); background: #0f0f19a6; border: 1px solid rgba(255, 255, 255, .08); border-radius: 1rem;}
.geo-glass-panel h3{ font-size: 1.125rem; color: rgb(0 229 255 / 1); font-weight: 600; margin-bottom: 1rem;}
.geo-glass-panel li{ font-size: 0.875rem; color: rgb(138 138 154 / 1); gap: .5rem; display: flex; align-items: flex-start; margin: 0.75rem 0;}
.geo-glass-panel li span{ width: .375rem; height: .375rem; background-color: rgb(138 138 154 / 1); border-radius: 100%; margin-top: .375rem; flex-shrink: 0;}
.geo-glass-panel li svg{ color: rgb(0 229 255 / 1); margin-top: .125rem;}

.geo-value-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem;}
.geo-value-grid .value-icon{ font-size: 0; color: rgb(0 229 255 / 1);}
.geo-value-grid .value-title{ font-size: 1rem;}

.geo-card-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem;}
.geo-card-grid .card-title{ font-size: 1.0625rem;}
.geo-card-grid .card-desc{ margin-bottom: 0;}

.geo-process-grid{ display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem;}
.geo-process-step{ display: flex; align-items: center; gap: 1rem;}
.geo-process-item{ display: flex; align-items: center; padding: 0.75rem 1.25rem; -webkit-backdrop-filter: blur(1.25rem) saturate(180%); backdrop-filter: blur(1.25rem) saturate(180%); background: #0f0f19a6; border: 1px solid rgba(255, 255, 255, .08); border-radius: 1rem; gap: .75rem; font-size: 0.875rem;}
.geo-process-item .num{ color: rgb(0 229 255 / 1);}
.geo-process-step svg{ color: rgb(85 85 106 / 1);}

.media-card-grid .card-title{ margin-bottom: .25rem;}

.media-industries-grid{ grid-template-columns: repeat(4, minmax(0, 1fr));}

.media-advantages-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem;}
.media-advantages-item{ display: flex; align-items: flex-start; gap: 1rem; padding: 1.5rem; -webkit-backdrop-filter: blur(1.25rem) saturate(180%); backdrop-filter: blur(1.25rem) saturate(180%); background: #0f0f19a6; border: 1px solid rgba(255, 255, 255, .08); border-radius: 1rem; font-size: 0.8125rem; color: rgb(138 138 154 / 1);}
.media-advantages-item:hover{ border-color: #00e5ff4d;}
.media-advantages-item svg{ color: rgb(0 229 255 / 1); flex-shrink: 0; margin-top: .125rem;}
.media-advantages-item .cont-box h3{ font-size: 0.9375rem; color: rgb(240 240 245 / 1);}

.ai-transform-card-grid .card{ text-align: center;}

.case-card-item .case-image{ display: none;}

.project-overview{ padding: 2.5rem; -webkit-backdrop-filter: blur(1.25rem) saturate(180%); backdrop-filter: blur(1.25rem) saturate(180%); background: #0f0f19a6; border: 1px solid rgba(255, 255, 255, .08); border-radius: 1rem; font-size: 0.9375rem; line-height: 1.75; color: rgb(138 138 154 / 1);}
.project-overview .top-title-box{ display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem;}
.project-overview .top-title-box svg{ color: rgb(0 229 255 / 1);}
.project-overview .top-title-box h2{ font-size: 2rem; color: rgb(240 240 245 / 1); font-weight: 600;}
.challenges-icon{ width:48px;height:48px;border-radius:12px;background:rgba(255,71,87,0.1);color:#ff4757;display:flex;align-items:center;justify-content:center;margin-bottom:1rem;font-size:1.25rem;font-weight:700;}
.challenges-icon2{ width:48px;height:48px;border-radius:12px;background:rgba(0,229,255,0.1);color:var(--primary);display:flex;align-items:center;justify-content:center;margin-bottom:1rem;font-size:1.25rem;}
.results-icon{ text-align: center; color: rgb(0 229 255 / 1); margin-bottom: 1rem;}
.results-num{ font-size: clamp(36px, 4vw, 48px); line-height: 1.2; font-weight: 700; margin-bottom: .5rem; background: var(--accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}

.honors-inner .tabs-box{ margin-bottom: 2rem;}
.honors-inner .tabs-box ul{ display: flex; display: -webkit-flex; gap: .25rem;}
.honors-inner .tabs-box li{ flex: 1; text-align: center; font-size: .875rem; line-height: 1.25rem; padding: 0.5rem 0.75rem; border: 1px solid transparent; border-radius: 1.25rem; cursor: pointer;}
.honors-inner .tabs-box li svg,.honors-inner .tabs-box li span{ display: inline-block; vertical-align: middle;}
.honors-inner .tabs-box li svg{ width: 1rem; height: 1rem; margin-right: 0.3125rem;}
.honors-inner .tabs-box li:hover{ border-color: rgba(255,255,255,0.15);}
.honors-inner .tabs-box li.active{ color: rgb(255 184 0 / 1); background-color: #ffb8001a; border-color: #ffb80066;}
.honors-inner .tabs-container .box{ display: none;}
.honors-inner .tabs-container .tabs-content{ padding: 2rem; background-color: #0f0f19a6; -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255, 255, 255, .08); border-radius: 1rem; display: flex; flex-direction: row; align-items: flex-start; gap: 2rem;}

.news-container{ margin-bottom: 3.5rem;}
.news-container .tabs-box{ max-width: 37.5rem; margin: 0 auto 2rem auto;}
.news-container .tabs-box ul{ text-align: center; margin: 0 -.25rem;}
.news-container .tabs-box li{ display: inline-block; margin: 0 .25rem; text-align: center; font-size: .875rem; line-height: 1.25rem; padding: 0.5rem 0.75rem; border: 1px solid rgba(255,255,255,0.15); border-radius: 1.25rem; cursor: pointer;}
.news-container .tabs-box li:hover{ border-color: rgba(255,255,255,0.15);}
.news-container .tabs-box li.active{ background: linear-gradient(135deg, rgb(0, 229, 255), rgb(123, 97, 255)); border-color: transparent; color: #fff;}
.news-container .tabs-container .box{ display: none;}

.news-list ul{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;}
.news-list li{ display: flex; flex-direction: column; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg); overflow: hidden; padding: 1.25rem; font-size: 0.875rem;}
.news-list li .title{ margin-bottom: 0.25rem; font-size: 1.125rem; font-weight: bold; height: 3em; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.news-list li a:hover .title{ color: var(--primary);}
.news-list li .cont{ margin-bottom: 0.5rem; height: 4.5em; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;}
.news-list li .source{ position: relative; padding-left: 1.5625rem; margin-bottom: 0.25rem;}
.news-list li .source::before{ content: ''; width: 1rem; height: 1rem; background: url(../images/icon-source.png) center no-repeat; background-size: cover; position: absolute; left: 0; top: 50%; transform:translateY(-50%);}
.news-list li .time{ position: relative; padding-left: 1.5625rem; margin-bottom: 0.25rem;}
.news-list li .time::before{ content: ''; width: 1rem; height: 1rem; background: url(../images/icon-time.png) center no-repeat; background-size: cover; position: absolute; left: 0; top: 50%; transform:translateY(-50%);}

.header-actions .icon-weixin{ position: relative;}
.header-actions .icon-weixin .icon{ cursor: pointer; width: 2.5rem; padding: 0.5rem; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 9999px;}
.header-actions .icon-weixin .icon img{ display: block; width: 30px;}
.header-actions .icon-weixin .qr-code-box{ width:13.25rem; height:6.625rem; position:absolute; top:3.25rem; left:50%; margin-left: -6.625rem; display:none;}
.header-actions .icon-weixin .qr-code-box .pic{ float: left; width: 6.625rem; background-color:#fff;}
.header-actions .icon-weixin .qr-code-box .pic img{ display:block; width:100%;}
.header-actions .icon-weixin .qr-code-box:before{ content:''; width: 0; height: 0; border-right: 0.4375rem solid transparent; border-left: 0.4375rem solid transparent; border-bottom: 0.625rem solid #fff; position:absolute; top: -0.625rem; left:50%; margin-left:-0.4375rem;}
.header-actions .icon-weixin:hover .icon{ border-color: #fff;}
.header-actions .icon-weixin:hover .qr-code-box{ display: block;}

.footer-quick-links{ padding-left: 35%;}

/* 图片弹框 */
.pic-layer{ width: 100%; height: 100%; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 99999; display: none;}
.pic-layer .opacity{ width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #000; opacity: 0.7;}
.pic-layer .layer-inner{ height: 65%; position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); z-index: 9;}
.pic-layer .layer-close{ width: 1.875rem; height: 1.875rem; background: url(../images/layer-close.png) center no-repeat; background-size: 1.875rem; position: absolute; top: -2.8125rem; right: 0; cursor: pointer;}
.pic-layer .layer-content{ border-radius: 8px; height: 100%; overflow: hidden;}
.pic-layer .layer-content img{ display: block; height: 100%;}




/* ===== Responsive Design ===== */
/* Large screen: >= 1441px */
@media (max-width: 1441px) {
  .header-actions .icon-weixin .qr-code-box{ left: auto; margin-left: 0; right: 0;}
  .header-actions .icon-weixin .qr-code-box:before{ left: auto; margin-left: 0; right: 0.825rem;}
  
}
/* Tablet: 481px - 768px */
@media (max-width: 768px) {
  :root { --container-padding: 1rem; }
  .section { padding: 4rem 0; }
  .menu-toggle { display: flex; }
  .nav {
    position: fixed;
    top: 72px; left: 0; right: 0;
    background: rgba(10,10,26,0.98);
    flex-direction: column;
    padding: 1rem;
    gap: 0;
	display: none;
    transform: translateY(-10px);
    transition: var(--transition);
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }
  .nav.active {
    display: block;
    transform: translateY(0);
  }
  .nav-item {
    padding: 0.875rem 1rem;
	display: block;
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,0.03);
  }
  .dropdown {
    position: relative;
    transform: none;
    background: transparent;
    border: none;
    padding: 0 0 0 1rem;
    min-width: auto;
    display: none;
  }
  .nav-item.active .dropdown { display: block; }
  .dropdown a { padding: 0.625rem 1rem; }
  .header-actions { display: none; }
  .hero { min-height: 80vh; padding-top: 72px; }
  .hero-dots { display: none; }
  .hero-actions { /* justify-content: center; */ }
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .stat-item:nth-child(2) { border-right: none; }
  .stat-item:nth-child(1),
  .stat-item:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,0.05); }
  .service-card { grid-template-columns: 1fr; gap: 2rem; }
  .service-card.reverse { direction: ltr; }
  .esg-section { grid-template-columns: 1fr; gap: 2rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .timeline::before { left: 1rem; }
  .timeline-item { grid-template-columns: 1fr; gap: 1rem; padding-left: 2.5rem; }
  .timeline-item:nth-child(even) { direction: ltr; }
  .timeline-dot { left: 1rem; }
  .value-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .cs-grid { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: 1fr; }
  .compare-grid { overflow-x: auto; }
  .industry-grid { grid-template-columns: 1fr; }
  .industry-card { grid-template-columns: 1fr; }
  .process-step::after { display: none; }
  .hero-content { text-align: center; margin: 0 auto; }
  .page-header { padding: 8rem 0 3rem; height: 60vh;}
  .kimi-float { bottom: 5rem; }
  
}

/* Mobile: <= 480px */
@media (max-width: 480px) {
  html { font-size: 14px; }
  .header{ top: 0;}
  .section { padding: 3rem 0; }
  .section-title{ font-size: 1.75rem;}
  .section-header { margin-bottom: 2.5rem; }
  .hero { min-height: 70vh; }
  .hero-label{ margin-bottom: 1rem;}
  .hero-title { font-size: 2.5rem; margin-bottom: 1rem;}
  .hero-subtitle { font-size: 1.25rem; margin-bottom: 1rem;}
  .hero-dots { display: none; }
  .stats-bar .container{ grid-template-columns: repeat(2, 1fr); }
  .stat-number { font-size: 2.25rem; }
  .card-grid { grid-template-columns: 1fr; }
  .btn { padding: 0.875rem 2rem; min-height: 48px; }
  .footer-qr{ text-align: left;}
  .footer-qr img{ margin: 0 0 0.5rem;}
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-brand { /* text-align: center; */ }
  .tabs { margin-bottom: 3rem; display: block; overflow-y: hidden; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; scrollbar-width: none;}
  .tab { padding: .625rem 1.25rem; font-size: 0.875rem; display: inline-block;}
  .tab span{ font-size: 0.6875rem;}
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .benefit-grid { grid-template-columns: repeat(2, 1fr); }
  .timeline-item { padding-left: 50px; }
  .timeline::before { left: 16px; }
  .timeline-dot { left: 8px; width: 14px; height: 14px; }
  .card { padding: 1.5rem; }
  .case-carousel-slide { grid-template-columns: 1fr; }
  .case-carousel-arrow { display: none; }
  
  
  
  .home-banner .swiper-pagination{ left: 1.25rem;}
  .home-banner .swiper-slide .banner-inner{ padding-left: 3rem; padding-right: 3rem;}
  
  .case-carousel-swiper .swiper-arrow{ display: none;}
  .cases-grid{ grid-template-columns: repeat(2, minmax(0, 1fr));}
  .cases-grid .case-image .icon-items{ font-size: 0.6875rem;}
  
  .service-info .tabs{ display: flex;}
  .service-info .value-grid{ grid-template-columns: repeat(3, 1fr);}
  
  .industry-card{ display: block;}
  .industry-card .card-title{ font-size: 1.5rem;}
  
  .timeline-box{ padding-left: 0;}
  .timeline-box:nth-child(even){ padding-right: 0; padding-left: 0;}
  .timeline-box:nth-child(even) .timeline-item{ padding-left: 50px; padding-right: 0;}
  .timeline-box:nth-child(even) .timeline-dot{ left: 8px; right: auto;}
  .timeline-content::before{ display: none;}
  
  .current-report .items-start{ display: inline-grid;}
  .current-report .items-start .report-cover{ width: 100%;}
  .current-report .items-start .cont-inner .tit{ font-size: 1.25rem;}
  .over-years .container{ grid-template-columns: repeat(1, minmax(0, 1fr));}
  .over-years .current-report .items-start{ display: flex;}
  .over-years .current-report .items-start .report-cover{ width: 5rem;}
  
  .honors-inner .tabs-box ul{ display: block;}
  .honors-inner .tabs-box li{ float: left; width: 33.333%;}
  .honors-inner .tabs-container .tabs-content{ padding: 1.5rem; display: block;}
  .honors-inner .tabs-container .tabs-content .inner-box{ flex: none;}
  .honors-inner .tabs-container .tabs-content .inner-box .list-box .list-item svg{ width: 1.125rem; height: 1.125rem; flex-shrink: 0;}
  .honors-inner .tabs-container .tabs-content .slogan-box{ width: 100%; height: 15rem;}
  
  .cta-section{ padding: 4rem 0;}
  
  .geo-compare-grid{ grid-template-columns: repeat(1, minmax(0, 1fr));}
  
  .geo-value-grid{ grid-template-columns: repeat(1, 1fr);}
  
  .geo-card-grid{ grid-template-columns: repeat(1, minmax(0, 1fr));}
  
  .geo-process-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));}
  .geo-process-step{ display: block;}
  .geo-process-step svg{ display: none;}
  
  .media-advantages-grid{ grid-template-columns: repeat(1, minmax(0, 1fr));}
  
  .esg-content .section-title{ font-size: 1.75rem;}
  
	.platform-tags .logo-box ul{ margin: 0 -1.25rem;}
	.platform-tags .logo-box li{ margin: 0.625rem 1.25rem;}
	.platform-tags .logo-box li img{ height: 3.75rem;}
	
	
	.footer-grid{ margin-bottom: 2rem;}
	.footer-quick-links{ padding-left: 0;}
	.footer-qr p{ margin-bottom: 0;}
	.footer-qr-block{ display: inline-block; width: 100px; text-align: center; margin-right: 10%;}
	
	
	
	
	
}

/* Carousel responsive */
@media (max-width: 768px) {
  .case-carousel-slide-inner { grid-template-columns: 1fr; }
  .case-carousel-arrow { display: none; }
}

/* Large screen: >= 1281px */
@media (min-width: 1281px) {
  :root { --container-max: 1280px; }
  .hero-title { font-size: 4.5rem;}
  
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* Print styles */
@media print {
  .header, .footer, .back-to-top, .kimi-float, .hero-dots, .scroll-indicator { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .case-card { break-inside: avoid; }
}