/* Carousel Styles */
.carousel-container {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  background: transparent;
}

.carousel-wrapper {
  position: relative;
  width: 100%;
}

.carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.carousel-slide.active {
  position: relative;
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
}

.carousel-slide img {
  width: 100%;
  height: auto;
  display: block;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.3);
  color: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: background 0.3s;
  backdrop-filter: blur(4px);
}

.carousel-btn:hover {
  background: rgba(0, 0, 0, 0.6);
}

.carousel-btn.prev {
  left: 16px;
}

.carousel-btn.next {
  right: 16px;
}

.carousel-indicators {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s;
}

.carousel-dot.active {
  background: white;
  transform: scale(1.2);
}

.mission-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

/* Optimization for Product Page Carousel to fit on screen */
.mission-visual-card.carousel-container {
  /* Remove fixed height so container hugs the image */
  height: auto;
  max-height: none;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mission-visual-card.carousel-container .carousel-wrapper {
  /* Wrapper should adapt to content */
  height: auto;
  position: relative;
  width: 100%;
  display: grid; /* Use grid to stack slides */
  grid-template-areas: "stack";
}

/* Use grid stacking instead of absolute positioning to let the active slide determine height */
.mission-visual-card.carousel-container .carousel-slide {
  grid-area: stack;
  position: relative;
  width: 100%;
  height: auto;
  opacity: 0;
  z-index: 0;
  transition: opacity 0.5s ease-in-out;
  pointer-events: none;
  display: block; /* Ensure block display for image sizing */
}

.mission-visual-card.carousel-container .carousel-slide.active {
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
  position: relative; /* Keep it in flow */
}

/* Hide inactive slides from flow to prevent height jumping (optional, but opacity handles visual) */
/* .mission-visual-card.carousel-container .carousel-slide:not(.active) {
     We can keep them in grid flow but invisible, or use display none if transition isn't needed. 
     For crossfade, we need them to overlap. Grid area overlap works perfectly. 
     However, if images have DIFFERENT aspect ratios, the container will take the height of the TALLEST item in the grid stack if we aren't careful. 
     To make the frame hug the CURRENT image, we might need JS or a different approach. 
     But assuming images are similar size, grid overlap is best. 
     If we strictly want "box size = image size" means tight fit, no padding.
     
     Let's assume "box size = image size" means tight fit, no padding.
  */
/* } */

.mission-visual-card.carousel-container .carousel-slide img {
  width: 100%;
  height: auto; /* Let height be determined by width + aspect ratio */
  display: block;
  object-fit: contain;
  max-height: 70vh; /* Cap it so it doesn't overflow screen, but don't force it */
  border-radius: var(--radius-lg);
}

section[data-section="03"] {
  background: #f1f5f9;
}

/* --- Tablet Specific Refinements (768px - 1100px) --- */
@media (min-width: 768px) and (max-width: 1100px) {
  /* Mission Sections: Maintain side-by-side but reduce gap */
  .mission-container {
    gap: 32px;
    padding: 0 20px;
  }
  
  .mission-text-block {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  .mission-text-block h2 {
    font-size: 1.8rem;
  }
  
  .mission-text-block p {
    font-size: 0.95rem;
  }

  /* Hero Section: Stack on tablet but keep mockups side-by-side */
  .page-hero .hero-inner {
    grid-template-columns: 1fr !important;
    text-align: center;
    gap: 40px;
  }
  
  .hero-copy {
    margin: 0 auto;
    max-width: 650px;
  }
  
  .hero-copy p {
    margin-left: auto;
    margin-right: auto;
  }

  .phone-mockups-container {
    display: flex !important;
    justify-content: center !important;
    transform: scale(0.85);
    margin-top: -20px;
  }

  /* Second Section (02) specific: ensure mockup fits */
  section[data-section="02"] .phone-mockup {
    width: 200px !important;
    height: 420px !important;
  }

  /* Third Section (03) specific: ensure mockup fits */
  section[data-section="03"] .phone-mockup {
    width: 200px !important;
    height: 420px !important;
  }

  /* Report Analysis: 2 columns instead of 1 or 3 */
  .report-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: auto !important;
    gap: 20px !important;
  }

  .report-card {
    padding: 20px !important;
  }

  .card-mid-row {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .card-visual-bar, .card-visual-pie, .card-visual-wave, .card-visual-pulse, .card-visual-stack, .card-visual-gauge {
    margin-top: 0 !important;
    align-self: flex-start !important;
  }
  
  .container.report-container {
    grid-template-columns: 1fr !important;
    padding: 0 32px !important;
    max-height: none !important;
    overflow: visible !important;
  }
  
  .report-header {
    text-align: center !important;
    border-right: none !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding-bottom: 24px !important;
    margin-bottom: 32px !important;
    padding-right: 0 !important;
  }
  
  .report-header h2 {
    font-size: 2.2rem !important;
  }

  /* Advanced Features: 2-col on wider tablets, 1-col on narrower */
  .features-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    padding: 0 20px !important;
  }
  
  .feature-card {
    flex-direction: column !important; /* 2列时改为上下结构 */
    height: auto !important;
    min-height: 450px !important;
  }

  .feature-info {
    padding: 24px !important;
    text-align: center !important;
  }
  
  .feature-info h3 { padding-left: 0 !important; }
  .feature-info h3::before { display: none !important; }
  .feature-info p { padding-left: 0 !important; }

  .feature-visual {
    height: 300px !important;
    border-left: none !important;
    border-top: 1px solid rgba(226, 232, 240, 0.5) !important;
  }

  /* Community Section: Adjust grid ratio */
  .community-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
  }
  
}

@media (max-width: 767px) {
  .mission-container {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  
  /* 第二屏移动端：确保上下排列，文字在上，图片在下 */
  section[data-section="02"] .mission-container {
    display: flex;
    flex-direction: column;
  }
  
  section[data-section="02"] .mission-text-block {
    order: 1;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center;
  }
  
  section[data-section="02"] .mission-visual-card {
    order: 2;
    margin-top: 0;
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  
  section[data-section="02"] .mission-visual-card .phone-mockup {
    display: block !important;
    width: 85% !important;
    max-width: 280px !important;
    height: auto !important;
    margin: 0 auto !important;
  }
  
  section[data-section="02"] .mission-visual-card .phone-screen {
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    align-items: flex-start !important;
    overflow: hidden !important;
  }
  
  section[data-section="02"] .carousel-wrapper,
  section[data-section="02"] .carousel-slide {
    height: auto !important;
  }

  /* 第二屏轮播按钮和指示器在移动端的样式优化 */
  section[data-section="02"] .carousel-container {
    position: relative;
    padding-bottom: 50px; /* 为指示器留出空间 */
  }
  
  section[data-section="02"] .carousel-btn {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    touch-action: manipulation; /* 优化触摸响应 */
  }
  
  section[data-section="02"] .carousel-btn:active {
    background: rgba(0, 0, 0, 0.8) !important;
    transform: translateY(-50%) scale(0.95);
  }
  
  section[data-section="02"] .carousel-btn.prev {
    left: 8px !important;
  }
  
  section[data-section="02"] .carousel-btn.next {
    right: 8px !important;
  }
  
  section[data-section="02"] .carousel-indicators {
    bottom: -35px !important;
    gap: 8px;
  }
  
  section[data-section="02"] .carousel-dot {
    width: 10px;
    height: 10px;
    touch-action: manipulation; /* 优化触摸响应 */
  }
  
  section[data-section="02"] .carousel-dot.active {
    width: 24px;
    border-radius: 5px;
    transform: scale(1);
  }
  
  /* 第三屏移动端：确保上下排列，图片在上，文字在下 */
  section[data-section="03"] .mission-container {
    display: flex;
    flex-direction: column;
  }
  
  section[data-section="03"] .mission-visual-card {
    order: 1;
    margin-bottom: 0;
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  
  section[data-section="03"] .mission-visual-card .phone-mockup {
    display: block !important;
    width: 85% !important;
    max-width: 280px !important;
    height: auto !important;
    margin: 0 auto !important;
  }
  
  section[data-section="03"] .mission-visual-card .phone-screen {
    display: flex !important;
    width: 100% !important;
    height: auto !important;
  }
  
  section[data-section="03"] .mission-visual-card .phone-screen img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain;
  }
  
  section[data-section="03"] .mission-text-block {
    order: 2;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center;
  }
}

/* --- Report Analysis Section - "The Hub" Dashboard Design --- */
.report-analysis-section {
  background: #f8fafc;
  position: relative;
  overflow: hidden;
  min-height: 100vh; /* 保持全屏高度，使用padding-top来排除导航栏 */
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 72px !important; /* 顶部留出导航栏高度，避免内容被遮挡 */
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  margin: 0 !important;
  box-sizing: border-box;
  scroll-snap-align: start;
}

/* Force stability: disable vertical movement from any global reveal animations */
.report-analysis-section.reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Background: High-End Tech Grid */
.report-bg-grid {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(15, 23, 42, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.02) 1px, transparent 1px);
  background-size: 50px 50px;
  z-index: 0;
}

.container.report-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  height: auto;
  max-height: calc(100vh - 72px - 40px); /* 排除导航栏高度和少量间距，允许内容在剩余空间内居中 */
  overflow-y: auto; /* 防止内容过长时溢出 */
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  align-items: center;
  padding: 0 40px;
  animation: dashboardFadeIn 1s ease-out forwards;
}

@keyframes dashboardFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Vertical Header Layout */
.report-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  padding-right: 20px;
  border-right: 1px solid rgba(226, 232, 240, 0.8);
}

.report-header h2 {
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 24px;
  color: #0f172a;
  background: linear-gradient(135deg, #0f172a 0%, var(--brand-primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.report-header p {
  font-size: 1rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}

/* 3x2 Grid - But now more vertically spacious because header is on the side */
.report-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
  height: 100%;
}

.report-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 12px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  border: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
  overflow: hidden;
}

.report-card:hover {
  border-color: var(--brand-primary);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.08);
}

/* Card Header Row */
.report-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  padding-top: 10px; /* 顶部留出按钮位置 */
  z-index: 2;
}

.report-card-icon {
  width: 44px;
  height: 44px;
  background: #f8fafc;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-primary);
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.report-card-icon svg { width: 22px; height: 22px; }

.card-meta-tag {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--brand-primary);
  background: rgba(234, 88, 12, 0.08);
  padding: 4px 10px;
  border-radius: 100px;
  text-transform: uppercase;
}

/* Card Body */
.report-card-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.report-card-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #1e293b;
  margin: 0;
}

/* Side-by-Side Mid Row (Most Space Efficient) */
.card-mid-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 15px;
}

.micro-list {
  list-style: none;
  padding: 0; margin: 0;
  flex: 1;
}

.micro-list li {
  font-size: 0.85rem;
  color: #475569;
  line-height: 1.5;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Visuals Scale */
[class^="card-visual-"] { flex-shrink: 0; margin-top: 5px; }

.card-visual-bar { height: 32px; width: 60px; display: flex; align-items: flex-end; gap: 3px; }
.card-visual-bar span { flex: 1; background: #e2e8f0; border-radius: 2px; }
.report-card:hover .card-visual-bar span { background: var(--brand-primary); }

.card-visual-pie { width: 36px; height: 36px; border: 3px solid #e2e8f0; border-top-color: var(--brand-primary); border-radius: 50%; transform: rotate(45deg); }
.card-visual-wave svg { width: 80px; height: 20px; stroke: #cbd5e1; fill: none; }
.report-card:hover .card-visual-wave svg { stroke: var(--brand-primary); }

.card-visual-pulse span { width: 6px; height: 6px; background: #ef4444; border-radius: 50%; display: block; animation: pulse-red 1.5s infinite; }
.card-visual-stack { display: flex; gap: 2px; align-items: flex-end; }
.card-visual-stack span { width: 12px; height: 18px; background: #cbd5e1; border-radius: 2px; }
.card-visual-stack span:last-child { height: 30px; background: var(--brand-primary); }

.card-visual-gauge { width: 40px; height: 20px; background: linear-gradient(90deg, #ef4444, #eab308, #22c55e); border-radius: 20px 20px 0 0; position: relative; }

/* Description Area */
.report-card-desc {
  border-top: 1px solid #f1f5f9;
  padding-top: 12px;
  margin-top: auto;
}

.report-card-desc p {
  font-size: 0.85rem;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Button Styling - Repositioned to Top-Left Corner */
.report-card-action {
  /* No longer takes space in flow */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

.btn-report {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: rgba(234, 88, 12, 0.08);
  color: var(--brand-primary);
  border-radius: 0 0 12px 0;
  font-size: 0.7rem;
  font-weight: 700;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  width: auto;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  border: none;
}

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

.report-card:hover .btn-report {
  background: var(--brand-primary);
  color: #ffffff;
  box-shadow: 2px 2px 10px rgba(234, 88, 12, 0.2);
}

.report-card:hover .btn-report::before {
  left: 100%;
}

.btn-report span {
  transition: transform 0.3s ease;
}

.report-card:hover .btn-report span {
  transform: translateX(2px);
}

/* Watermark Index (Top-Right) */
.report-card::after {
  content: counter(card-counter, decimal-leading-zero);
  counter-increment: card-counter;
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 1.2rem;
  font-weight: 900;
  color: #f1f5f9;
  z-index: 0;
}

.report-grid { counter-reset: card-counter; }

/* Responsive adjustments */
@media (max-width: 1200px) {
  .container.report-container {
    grid-template-columns: 1fr; /* Stack header on top for smaller screens */
    height: auto;
    overflow: visible;
  }
  .report-analysis-section { height: auto; min-height: auto; padding: 60px 0 !important; }
  .report-header { text-align: center; border-right: none; border-bottom: 1px solid #e2e8f0; padding-bottom: 20px; margin-bottom: 20px; }
}

@media (max-width: 767px) {
  .report-grid { 
    grid-template-columns: 1fr; 
    grid-template-rows: auto;
    gap: 16px;
    height: auto !important;
  }
  
  .container.report-container {
    padding: 0 20px;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }
  
  .report-analysis-section {
    height: auto !important;
    min-height: auto !important;
    padding: 60px 0 !important;
  }
}

/* --- News Poster Section (Section 04) - New Vertical Layout --- */
.news-poster-section {
  position: relative;
  min-height: 100vh;
  background: #0f172a;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
}

/* 文字内容区域 */
.news-top-content {
  position: relative;
  z-index: 20;
  width: 100%;
  max-width: 1200px;
  padding: 0 40px;
  display: flex;
  justify-content: center;
  pointer-events: none; /* 防止遮挡下方图片的悬浮效果 */
}

.news-top-content .poster-text-content {
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 32px 48px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  max-width: 800px;
  text-align: center;
  pointer-events: auto; /* 恢复文字区域自身的交互 */
}

.poster-headline {
  font-size: 2.4rem;
  font-weight: 800;
  margin-bottom: 16px;
  color: #fff;
}

.poster-divider {
  width: 60px;
  height: 4px;
  background: var(--brand-primary);
  margin: 0 auto 24px;
  border-radius: 2px;
}

.poster-body p {
  font-size: 1rem;
  line-height: 1.7;
  color: #cbd5e1;
  margin-bottom: 12px;
}

.poster-body p.highlight {
  color: #fff;
  font-weight: 600;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 16px;
  margin-top: 16px;
}

/* 图片散落容器 */
.news-images-container {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.news-bg-item {
  position: absolute;
  z-index: 1;
  background: #1e293b;
  border-radius: 12px;
  box-shadow: 0 15px 45px rgba(0,0,0,0.4);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  width: 20vw;
  max-width: 350px;
}

.news-bg-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.news-bg-item:hover {
  z-index: 30;
  transform: scale(1.25) rotate(0deg) !important;
  box-shadow: 0 30px 80px rgba(234, 88, 12, 0.4);
  border-color: var(--brand-primary);
  filter: brightness(1.1);
}

/* 初始散落位置 (PC) */
.item-left-1 { top: 10%; left: 5%; transform: rotate(-10deg); }
.item-left-2 { bottom: 15%; left: 8%; transform: rotate(5deg); }
.item-left-3 { top: 40%; left: 2%; transform: rotate(-5deg); }
.item-right-1 { top: 15%; right: 5%; transform: rotate(8deg); }
.item-right-2 { bottom: 10%; right: 10%; transform: rotate(-12deg); }
.item-right-3 { top: 50%; right: 3%; transform: rotate(4deg); }
.item-right-4 { bottom: 35%; right: 6%; transform: rotate(-3deg); }

/* --- PC端精细散落坐标 (左三右四) --- */
@media (min-width: 1101px) {
  .news-bg-item { width: 18vw; }
  
  /* 左边三张 (分布更错落) */
  .item-left-1 { top: 5%; left: 2%; transform: rotate(-6deg); }
  .item-left-2 { top: 45%; left: 8%; transform: rotate(5deg); z-index: 5; }
  .item-left-3 { top: 75%; left: 3%; transform: rotate(-8deg); }
  
  /* 右边四张 (分布更错落，确保四张都可见) */
  .item-right-1 { top: 2%; right: 2%; transform: rotate(8deg); }
  .item-right-2 { top: 28%; right: 12%; transform: rotate(-5deg); z-index: 5; }
  .item-right-3 { top: 52%; right: 3%; transform: rotate(4deg); }
  .item-right-4 { top: 78%; right: 10%; transform: rotate(-7deg); z-index: 5; }
}

/* 响应式适配 */
@media (min-width: 768px) and (max-width: 1100px) {
  .news-top-content { margin-bottom: 0; position: relative; z-index: 20; }
  .news-images-container { position: relative; height: 650px; margin-top: 20px; }
  .news-bg-item { width: 30vw; }
  
  /* 第一组：左上散落 */
  .item-left-1 { top: 2%; left: 4%; transform: rotate(-8deg); z-index: 2; }
  .item-left-2 { top: 10%; left: 18%; transform: rotate(6deg); z-index: 5; }
  
  /* 第二组：右上散落 */
  .item-right-1 { top: 0%; right: 4%; transform: rotate(7deg); z-index: 2; }
  .item-right-2 { top: 8%; right: 18%; transform: rotate(-5deg); z-index: 5; }
  
  /* 第三组：居中下方散落 */
  .item-left-3 { top: 48%; left: 10%; transform: rotate(-4deg); z-index: 6; }
  .item-right-3 { top: 56%; right: 12%; transform: rotate(5deg); z-index: 7; }
  
  .item-right-4 { display: none; }
}

@media (max-width: 767px) {
  .news-images-container { display: none; }
  .news-top-content { display: flex !important; margin-bottom: 30px; padding: 0 20px; }
  .news-top-content .poster-text-content { padding: 24px; border-radius: 16px; }
  .poster-headline { font-size: 1.8rem; }
  .poster-body p { font-size: 0.9rem; }
  
  .news-mobile-carousel { display: block !important; }
  .news-poster-section { padding: 60px 0; height: auto; min-height: auto; justify-content: flex-start; }
}

/* 移动端轮播样式 - 默认隐藏 (PC端) */
.news-mobile-carousel {
  display: none;
  position: relative;
  width: 90%;
  max-width: 400px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.news-carousel-wrapper {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-areas: "stack";
  background: #000;
}

.news-carousel-slide {
  grid-area: stack;
  position: relative;
  width: 100%;
  height: auto;
  opacity: 0;
  z-index: 0;
  transition: opacity 0.5s ease-in-out;
  pointer-events: none;
}

.news-carousel-slide.active {
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
}

.news-carousel-slide img {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: contain;
  display: block;
}

.news-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  transition: all 0.3s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  user-select: none;
  -webkit-user-select: none;
}

.news-carousel-btn:hover,
.news-carousel-btn:active {
  background: rgba(0, 0, 0, 0.7);
  transform: translateY(-50%) scale(1.1);
}

.news-carousel-btn.prev {
  left: 12px;
}

.news-carousel-btn.next {
  right: 12px;
}

.news-carousel-indicators {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

.news-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s;
}

.news-carousel-dot.active {
  background: white;
  transform: scale(1.3);
  width: 24px;
  border-radius: 4px;
}

@media (max-width: 640px) {
  .news-mobile-carousel {
    max-width: 100%;
    margin: 0;
  }
  
  .news-carousel-btn {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
  
  .news-carousel-btn.prev {
    left: 8px;
  }
  
  .news-carousel-btn.next {
    right: 8px;
  }
}

/* Mosaic Item Placements - 7 Items (3 Big, 4 Small) */
.news-mosaic-item:nth-child(1) {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.news-mosaic-item:nth-child(2) {
  grid-column: 3 / 5;
  grid-row: 1 / 3;
}

.news-mosaic-item:nth-child(3) {
  grid-column: 1 / 3;
  grid-row: 3 / 5;
}

.news-mosaic-item:nth-child(4) {
  grid-column: 3 / 4;
  grid-row: 3 / 4;
}

.news-mosaic-item:nth-child(5) {
  grid-column: 4 / 5;
  grid-row: 3 / 4;
}

.news-mosaic-item:nth-child(6) {
  grid-column: 3 / 4;
  grid-row: 4 / 5;
}

.news-mosaic-item:nth-child(7) {
  grid-column: 4 / 5;
  grid-row: 4 / 5;
}

@media (max-width: 1100px) {
  .news-mosaic-container {
    gap: 40px;
  }
}

@media (max-width: 767px) {
  .news-mosaic-container {
    grid-template-columns: 1fr;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
  }
  
  .news-mosaic-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: 12px;
  }

  /* Mobile Layout: 3 Big items span full width, 4 small items share rows */
  .news-mosaic-item:nth-child(1),
  .news-mosaic-item:nth-child(2),
  .news-mosaic-item:nth-child(3) {
    grid-column: 1 / -1;
    aspect-ratio: 16/9;
  }
  
  .news-mosaic-item:nth-child(4),
  .news-mosaic-item:nth-child(5),
  .news-mosaic-item:nth-child(6),
  .news-mosaic-item:nth-child(7) {
    grid-column: auto; /* Default 1 col span in 2-col grid */
    grid-row: auto;
    aspect-ratio: 1;
  }
  
  .news-mosaic-container .mission-text-block {
    padding: 0 !important;
    margin-bottom: 30px;
  }
}

/* --- Community Section (Premium Redesign) --- */

section[data-section="05"] {
  background: #fff;
  padding: 30px 0; /* Further reduced from 40px */
  overflow: hidden;
  position: relative;
}

/* Background Deco */
section[data-section="05"]::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(135deg, rgba(248, 250, 252, 0) 0%, #f1f5f9 100%);
  z-index: 0;
  clip-path: polygon(25% 0%, 100% 0, 100% 100%, 0% 100%);
}

.community-grid {
  display: grid;
  grid-template-columns: 38% 52%; /* Slightly more compact */
  gap: 8%; /* Reduced from 10% */
  align-items: center;
  position: relative;
  z-index: 2;
  max-width: 1100px; /* Constrain overall width */
  margin: 0 auto;
}

/* Text Side */
.comm-content {
  display: flex;
  flex-direction: column;
  gap: 10px; /* Further reduced gap from 12px */
}

.comm-badge {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem; /* Smaller badge */
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--brand-primary);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
}

.comm-badge::after {
  content: '';
  width: 20px; /* Reduced from 30px */
  height: 1px;
  background: var(--brand-primary);
  opacity: 0.4;
}

.comm-title {
  font-size: 1.5rem; /* Further reduced from 1.6rem */
  font-weight: 800;
  line-height: 1.2;
  color: #0f172a;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}

.comm-desc {
  font-size: 0.85rem; /* Reduced from 0.95rem */
  color: #64748b;
  line-height: 1.4;
  margin-bottom: 5px;
}

/* Feature List (Compact) */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 0px; 
  margin-top: 0px;
}

.f-item {
  display: block; /* Change from flex to block since icon is gone */
  padding: 6px 0; /* Further reduced from 8px */
  border-top: 1px solid #f1f5f9;
}

.f-item:last-child {
  border-bottom: 1px solid #f1f5f9;
}

.f-text h3 {
  font-size: 0.9rem; /* Reduced from 1rem */
  font-weight: 700;
  color: #334155;
  margin-bottom: 1px;
}

.f-text p {
  font-size: 0.75rem; /* Reduced from 0.85rem */
  color: #94a3b8;
  margin: 0;
}

.f-item:hover .f-text h3 {
  color: var(--brand-primary);
}

/* Visual Side */
.comm-visual {
  position: relative;
  height: auto;
  min-height: 280px; /* Further reduced from 300px */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 0; /* Further reduced */
}

.perspective-box {
  position: relative;
  width: 100%;
  height: auto;
  perspective: 1500px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Main Window Frame */
.app-window {
  position: relative;
  transform: rotateY(-12deg) rotateX(4deg);
  width: 85%;
  max-width: 350px; /* Further reduced from 380px */
  background: #fff;
  border-radius: 10px;
  box-shadow: 
    0 40px 80px -20px rgba(50, 50, 93, 0.15),
    0 20px 40px -30px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(0,0,0,0.03);
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
}

.app-window:hover {
  transform: rotateY(-5deg) rotateX(0deg);
  box-shadow: 0 50px 100px -20px rgba(50, 50, 93, 0.2);
}

.window-header {
  height: 18px; /* Further reduced from 20px */
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  padding: 0 8px;
  gap: 6px;
}

.dots span {
  width: 4px; /* Reduced */
  height: 4px;
  border-radius: 50%;
  background: #e2e8f0;
}

.bar {
  flex: 1;
  height: 3px;
  background: #f1f5f9;
  border-radius: 2px;
  max-width: 80px;
}

.window-body {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  background: #000;
}

.window-body img {
  width: 100%;
  height: auto;
  display: block;
}

/* Floating Card */
.app-card {
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 65%;
  max-width: 240px;
  background: #fff;
  border-radius: 10px;
  padding: 5px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
  transform: translateZ(60px);
  z-index: 2;
  animation: float-card 5s ease-in-out infinite;
}

.app-card img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

@keyframes float-card {
  0%, 100% { transform: translateY(0) translateZ(60px); }
  50% { transform: translateY(-12px) translateZ(60px); }
}

/* Responsive */
@media (max-width: 767px) {
  section[data-section="05"] {
    padding: 60px 0;
  }
  
  .community-grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 0 20px;
  }
  
  .comm-content {
    text-align: center;
    align-items: center;
    order: 1;
  }
  
  .comm-badge {
    justify-content: center;
  }
  
  .comm-title {
    font-size: 1.8rem;
  }
  
  /* 隐藏PC端的视觉展示 */
  .comm-visual {
    display: none !important;
  }
  
  /* 显示移动端轮播 */
  .comm-mobile-carousel {
    display: block !important;
    order: 2;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    margin-top: 0;
  }
}

/* 交流社区移动端轮播样式 */
.comm-mobile-carousel {
  display: none;
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.comm-carousel-wrapper {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-areas: "stack";
  background: #000;
}

.comm-carousel-slide {
  grid-area: stack;
  position: relative;
  width: 100%;
  height: auto;
  opacity: 0;
  z-index: 0;
  transition: opacity 0.5s ease-in-out;
  pointer-events: none;
}

.comm-carousel-slide.active {
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
}

.comm-carousel-slide img {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: contain;
  display: block;
}

.comm-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  transition: all 0.3s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  user-select: none;
  -webkit-user-select: none;
}

.comm-carousel-btn:hover,
.comm-carousel-btn:active {
  background: rgba(0, 0, 0, 0.7);
  transform: translateY(-50%) scale(1.1);
}

.comm-carousel-btn.prev {
  left: 12px;
}

.comm-carousel-btn.next {
  right: 12px;
}

.comm-carousel-indicators {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

.comm-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s;
}

.comm-carousel-dot.active {
  background: white;
  transform: scale(1.3);
  width: 24px;
  border-radius: 4px;
}

@media (max-width: 640px) {
  .comm-mobile-carousel {
    max-width: 100%;
    margin: 0;
  }
  
  .comm-carousel-btn {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
  
  .comm-carousel-btn.prev {
    left: 8px;
  }
  
  .comm-carousel-btn.next {
    right: 8px;
  }
}

/* Advanced Features Section (Section 06) */
.advanced-features-section {
  background: #f1f5f9;
  padding: 80px 0;
}

.advanced-features-section .section-header-centered h2 {
  font-size: 2rem;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1400px;
  margin: 0 auto;
}

.feature-card {
  display: flex;
  flex-direction: row; /* 水平排列：左文字右图片 */
  align-items: stretch;
  background: #ffffff;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.04);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  height: 60vh; /* 使用 vh 单位确保高度足够且在一屏内 */
  max-height: 550px; /* 设置最大高度限制，防止在超大屏幕上过高 */
  min-height: 450px; /* 设置最小高度，保证展示效果 */
}

.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.feature-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  padding: 0 12px; /* Reduced from 60px to solve spacing issue */
  background: #ffffff;
  position: relative;
  z-index: 2;
  min-width: 0;
}

.feature-visual {
  flex: 1.4; /* 稍微增加图片区域的宽度比例，让图片在横向布局中更舒展 */
  position: relative;
  height: 100%;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  overflow: hidden;
  border-left: 1px solid rgba(226, 232, 240, 0.5);
}

/* Mini Carousel Styles for Feature Cards */
.mini-carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.mini-carousel img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 95%; /* 保持比例缩放 */
  height: 95%;
  object-fit: contain; /* 关键：确保图片不变形且完整显示 */
  opacity: 0;
  transition: opacity 0.8s ease-in-out, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 1;
}

.mini-carousel img.active {
  opacity: 1;
  z-index: 2;
}

.feature-card:hover .mini-carousel img.active {
  transform: translate(-50%, -50%) scale(1.1);
}

.feature-info h3 {
  font-size: 1.75rem; /* Slightly smaller for elegance */
  margin-bottom: 20px;
  color: #0f172a;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  position: relative;
  padding-left: 20px; /* Space for left deco */
}

.feature-info h3::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 4px;
  height: 24px; /* Taller vertical line */
  background: var(--brand-primary);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.5); /* Subtle glow */
}

.feature-desc-wrapper {
  position: relative;
  padding-left: 0;
}

.feature-info p {
  font-size: 1rem;
  color: #475569; /* Slightly darker grey */
  line-height: 1.7;
  margin: 0;
  padding-left: 20px; /* Align with title text */
}

@media (max-width: 767px) {
  .advanced-features-section {
    padding: 60px 0;
  }
  
  .section-header-centered {
    margin-bottom: 40px;
    padding: 0 20px;
  }
  
  .features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 0 20px;
    max-width: none;
    overflow: visible;
  }
  
  .feature-card {
    width: 100%;
    min-width: auto;
    min-height: auto;
    height: auto;
    max-height: none;
    flex-direction: column; /* 垂直排列：上文字下图 */
    padding: 0;
  }
  
  .feature-info {
    order: 1;
    padding: 24px;
    text-align: center;
  }
  
  .feature-info h3 {
    font-size: 1.5rem;
    margin-bottom: 12px;
    padding-left: 0;
    text-align: center;
  }
  
  .feature-info h3::before {
    display: none; /* 移动端隐藏左侧装饰线 */
  }
  
  .feature-info p {
    padding-left: 0;
    text-align: center;
    font-size: 0.9rem;
  }
  
  .feature-visual {
    order: 2;
    flex: none;
    height: 550px;
    width: 100%;
    border-left: none;
    border-top: 1px solid rgba(226, 232, 240, 0.5);
    box-shadow: none;
    padding: 15px;
  }
  
  .mini-carousel {
    height: 100%;
  }
  
  .mini-carousel img {
    width: 100%;
    height: 100%;
  }
}

@media (max-width: 640px) {
  .advanced-features-section {
    padding: 40px 0;
  }
  
  .section-header-centered {
    margin-bottom: 32px;
    padding: 0 16px;
  }
  
  .section-header-centered h2 {
    font-size: 1.75rem;
  }
  
  .section-header-centered p {
    font-size: 0.9rem;
  }
  
  .features-grid {
    gap: 20px;
    padding: 0 16px;
  }
  
  .feature-info {
    padding: 20px;
  }
  
  .feature-info h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
  }
  
  .feature-info p {
    font-size: 0.85rem;
  }
  
  .feature-visual {
    height: 480px;
    padding: 10px;
  }
  
  .mini-carousel img {
    width: 100%;
    height: 100%;
  }
}

/* --- Hero Section Mobile Styles --- */
/* 移动端：隐藏PC端的三张并排图片，显示轮播 */
.hero-mobile-carousel {
  display: none;
}

@media (max-width: 767px) {
  /* 移动端：hero布局改为上文下图 */
  main > section[data-section="01"] .hero-inner {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  
  main > section[data-section="01"] .hero-copy {
    order: 1;
    text-align: center;
  }
  
  main > section[data-section="01"] .hero-visual-complex {
    order: 2;
    height: auto !important;
    max-height: none !important;
    margin-top: 0;
  }
  
  /* 隐藏PC端的三张并排图片 */
  main > section[data-section="01"] .phone-mockups-container {
    display: none !important;
  }
  
  /* 显示移动端轮播 */
  main > section[data-section="01"] .hero-mobile-carousel {
    display: block !important;
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  }
  
  .hero-carousel-wrapper {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-areas: "stack";
    background: #000;
  }
  
  .hero-carousel-slide {
    grid-area: stack;
    position: relative;
    width: 100%;
    height: auto;
    opacity: 0;
    z-index: 0;
    transition: opacity 0.5s ease-in-out;
    pointer-events: none;
  }
  
  .hero-carousel-slide.active {
    opacity: 1;
    z-index: 1;
    pointer-events: auto;
  }
  
  .hero-carousel-slide img {
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    object-fit: contain;
    display: block;
  }
  
  .hero-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    transition: all 0.3s;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    user-select: none;
    -webkit-user-select: none;
  }
  
  .hero-carousel-btn:hover,
  .hero-carousel-btn:active {
    background: rgba(0, 0, 0, 0.7);
    transform: translateY(-50%) scale(1.1);
  }
  
  .hero-carousel-btn.prev {
    left: 12px;
  }
  
  .hero-carousel-btn.next {
    right: 12px;
  }
  
  .hero-carousel-indicators {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
  }
  
  .hero-carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s;
  }
  
  .hero-carousel-dot.active {
    background: white;
    transform: scale(1.3);
    width: 24px;
    border-radius: 4px;
  }
}

@media (max-width: 640px) {
  main > section[data-section="01"] .hero-mobile-carousel {
    max-width: 100%;
    margin: 0;
  }
  
  .hero-carousel-btn {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
  
  .hero-carousel-btn.prev {
    left: 8px;
  }
  
  .hero-carousel-btn.next {
    right: 8px;
  }
}