/* Global Design System - Light Futurism */
/* Scoped to .baihua-home-scope to prevent global leaks */
.baihua-home-scope {
  /* Colors */
  --color-bg-body: #f5f7fa; /* Light Greyish Blue */
  --color-bg-card: #ffffff;
  --color-bg-glass: rgba(255, 255, 255, 0.7);
  --color-text-primary: #1a202c;
  --color-text-secondary: #4a5568;
  --color-accent-primary: #00d2ff; /* Cyber Cyan */
  --color-accent-secondary: #3a7bd5; /* Tech Blue */
  --color-border: #e2e8f0;
  --color-shadow: rgba(0, 0, 0, 0.05);
  --color-shadow-hover: rgba(58, 123, 213, 0.2);

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 64px;

  /* Typography */
  --font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-size-xxl: 36px;

  /* Effects */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --shadow-card: 0 4px 6px -1px var(--color-shadow), 0 2px 4px -1px var(--color-shadow);
  --shadow-card-hover: 0 10px 15px -3px var(--color-shadow-hover), 0 4px 6px -2px var(--color-shadow-hover);
  --backdrop-blur: blur(10px);
  --transition-base: all 0.3s ease;

  /* Base Reset for Scope */
  font-family: var(--font-family-base);
  background-color: var(--color-bg-body);
  color: var(--color-text-primary);
  line-height: 1.6;
  overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Reset & Base within Scope */
.baihua-home-scope * {
  box-sizing: border-box;
}

/* Specific Element Resets inside scope */
.baihua-home-scope h1, 
.baihua-home-scope h2, 
.baihua-home-scope h3, 
.baihua-home-scope p, 
.baihua-home-scope ul {
    margin: 0;
    padding: 0;
}

.baihua-home-scope a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition-base);
}

.baihua-home-scope ul {
  list-style: none;
}

.baihua-home-scope img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Utility Containers */
.baihua-home-scope .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.baihua-home-scope .section {
  padding: var(--spacing-xxl) 0;
  content-visibility: auto;
  contain-intrinsic-size: 800px 1000px;
}

.baihua-home-scope .grid-2-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

/* Desktop layout needed for specific IA requirement */
@media (min-width: 768px) {
  .baihua-home-scope .grid-2-cols {
    grid-template-columns: 1fr 280px; /* Content (Left, 1fr) vs Links (Right, Fixed 280px) */
  }
  
  .baihua-home-scope .grid-2-cols.news-grid {
    grid-template-columns: 1fr 1fr; /* News section is 50/50 */
  }
}

/* Components */

/* Card Style */
.baihua-home-scope .card {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-card);
  transition: var(--transition-base);
  border: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}

.baihua-home-scope .card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-accent-primary);
}

/* Glassmorphism Effect */
.baihua-home-scope .glass {
  background: var(--color-bg-glass);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Section Titles */
.baihua-home-scope .section-title {
  font-size: var(--font-size-xxl);
  font-weight: 700;
  margin-bottom: var(--spacing-xl);
  position: relative;
  display: inline-block;
  background: linear-gradient(
    135deg,
    var(--color-text-primary) 0%,
    var(--color-text-secondary) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.baihua-home-scope .section-title::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 60px;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--color-accent-primary),
    var(--color-accent-secondary)
  );
  border-radius: var(--radius-sm);
}

/* Buttons */
.baihua-home-scope .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-base);
}

.baihua-home-scope .btn-primary {
  background: linear-gradient(
    135deg,
    var(--color-accent-secondary) 0%,
    var(--color-accent-primary) 100%
  );
  color: white;
  box-shadow: 0 4px 6px rgba(58, 123, 213, 0.3);
}

.baihua-home-scope .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(58, 123, 213, 0.4);
}

/* Animations */
@keyframes baihuaFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.baihua-home-scope .animate-fade-in {
  animation: baihuaFadeIn 0.8s ease-out forwards;
}

.baihua-home-scope .delay-100 {
  animation-delay: 0.1s;
}
.baihua-home-scope .delay-200 {
  animation-delay: 0.2s;
}
.baihua-home-scope .delay-300 {
  animation-delay: 0.3s;
}

/* Specific Modules */

/* Hero Carousel */
.baihua-home-scope .hero-carousel {
  position: relative;
  width: 100%;
  height: 600px; /* Taller for impact */
  overflow: hidden;
  background-color: #000;
  cursor: grab; /* Indicating swipe support */
}

.baihua-home-scope .hero-carousel:active {
  cursor: grabbing;
}

.baihua-home-scope .carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.baihua-home-scope .carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  display: flex; /* Centering content if needed */
  align-items: center;
  justify-content: center;
}

.baihua-home-scope .carousel-slide.active {
  opacity: 1;
  z-index: 10;
}

.baihua-home-scope .carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* Video styling for carousel */
.baihua-home-scope .carousel-slide video.carousel-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.baihua-home-scope .banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.1) 50%,
    rgba(0, 0, 0, 0.6) 100%
  );
  pointer-events: none;
  z-index: 5;
}

/* Banner Content */
.baihua-home-scope .banner-content {
  position: relative;
  z-index: 20;
  color: white;
  text-align: left;
  max-width: 1200px;
  width: 100%;
  padding: 0 var(--spacing-md);
  margin-top: 100px; 
}

.baihua-home-scope .banner-content h1 {
  font-size: 3rem;
  font-weight: 800;
  text-shadow: 0 4px 10px rgba(0,0,0,0.5);
  margin-bottom: var(--spacing-sm);
  background: linear-gradient(90deg, #fff, #bde6ff);
  -webkit-background-clip: text;
  /* -webkit-text-fill-color: transparent; */
}

.baihua-home-scope .banner-content p {
  font-size: 1.5rem;
  font-weight: 300;
  text-shadow: 0 2px 5px rgba(0,0,0,0.5);
  max-width: 600px;
}

/* Animations for Slide Content */
.baihua-home-scope .animate-slide-up {
  opacity: 0;
  transform: translateY(30px);
  animation: baihuaSlideUpFade 0.8s ease-out forwards;
}

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

/* Carousel Controls */
.baihua-home-scope .carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 2rem;
  padding: 10px 15px;
  cursor: pointer;
  z-index: 30;
  transition: all 0.3s;
  border-radius: 50%;
}

.baihua-home-scope .carousel-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.baihua-home-scope .prev-btn { left: 20px; }
.baihua-home-scope .next-btn { right: 20px; }

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

.baihua-home-scope .indicator {
  width: 40px;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 2px;
}

.baihua-home-scope .indicator.active {
  background: var(--color-accent-primary);
  width: 60px;
}

/* Floating Dialog Box (Company Intro) */
.baihua-home-scope .floating-dialog-box {
  position: absolute;
  bottom: -20px;
  right: -20px;
  background: white;
  padding: 15px 20px;
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  gap: 15px;
  max-width: 260px;
  animation: baihuaFloatDialog 4s ease-in-out infinite;
  border-left: 4px solid var(--color-accent-primary);
  z-index: 10;
}

.baihua-home-scope .dialog-icon {
  font-size: 2rem;
  background: #e0f7ff;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.baihua-home-scope .dialog-content strong {
  display: block;
  font-size: 1rem;
  color: var(--color-text-primary);
}

.baihua-home-scope .dialog-content p {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin: 0;
}

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

/* Certifications Section */
.baihua-home-scope .certifications-section {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  padding: var(--spacing-xl) 0;
  border-bottom: 1px solid var(--color-border);
}

.baihua-home-scope .certifications-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xl);
  flex-wrap: wrap;
}

.baihua-home-scope .cert-intro {
  flex-shrink: 0;
}

.baihua-home-scope .cert-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.2;
}

.baihua-home-scope .cert-subtitle {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin: 4px 0 0 0;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
}

.baihua-home-scope .cert-badges {
  display: flex;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
  align-items: center;
  flex: 1;
  justify-content: flex-end;
}

.baihua-home-scope .cert-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: var(--spacing-sm);
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  transition: var(--transition-base);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.baihua-home-scope .cert-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    rgba(58, 123, 213, 0.05) 0%, 
    rgba(0, 210, 255, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.baihua-home-scope .cert-badge:hover::before {
  opacity: 1;
}

.baihua-home-scope .cert-badge:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  border-color: var(--color-accent-primary);
}

.baihua-home-scope .cert-badge img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  transition: transform 0.3s ease;
  position: relative;
  z-index: 1;
}

.baihua-home-scope .cert-badge:hover img {
  transform: scale(1.1);
}

.baihua-home-scope .cert-name {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}

.baihua-home-scope .cert-badge:hover .cert-name {
  color: var(--color-accent-secondary);
}

/* Responsive adjustments for certifications */
@media (max-width: 768px) {
  .baihua-home-scope .certifications-wrapper {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .baihua-home-scope .cert-badges {
    justify-content: flex-start;
    width: 100%;
    gap: var(--spacing-md);
  }
  
  .baihua-home-scope .cert-badge {
    padding: var(--spacing-xs);
  }
  
  .baihua-home-scope .cert-badge img {
    width: 50px;
    height: 50px;
  }
  
  .baihua-home-scope .cert-title {
    font-size: 1.25rem;
  }
}


/* Links Sidebar */
.baihua-home-scope .links-list li {
  margin-bottom: var(--spacing-sm);
}

.baihua-home-scope .links-list a {
  display: block;
  padding: var(--spacing-sm) var(--spacing-md);
  background: white;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: var(--transition-base);
  font-weight: 500;
}

.baihua-home-scope .links-list a:hover {
  background: var(--color-accent-primary);
  color: white;
  padding-left: var(--spacing-lg); /* Slight indentation movement */
}

/* Product Grid */
/* Button Text Fix */
.baihua-home-scope .btn-primary, .baihua-home-scope .btn-primary:visited {
  color: #ffffff !important;
  text-decoration: none;
}

/* Product Grid Refinement: Force Single Row (4 items) */
/* Product Grid: Horizontal Scroll (Apple Style) */
.baihua-home-scope .product-grid {
  display: flex;
  overflow-x: auto;
  gap: 24px;
  padding: 10px 4px 30px 4px; /* Bottom padding for scrollbar space/shadows */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* Hide scrollbar for cleaner look, or keep custom */
  scrollbar-width: none; 
}

.baihua-home-scope .product-grid::-webkit-scrollbar {
  display: none;
}

@media (min-width: 1024px) {
  .baihua-home-scope .product-grid {
    /* On large screens, center if they fit, or keeping start if convenient */
    /* If we want 4 in a row exact on desktop without scroll if they fit: */
    /* But user asked for horizontal scroll "if extra". Let's stick to Flex for consistency */
    justify-content: flex-start; 
  }
}

/* Apple-style Product Card */
.baihua-home-scope .product-card {
  background: #fbfbfd;
  border-radius: 18px;
  padding: 30px 20px; /* Padding around content */
  box-shadow: none;
  border: none;
  
  /* Flex Layout for Uniformity */
  display: flex;
  flex-direction: column;
  align-items: center; /* Center content horizontally */
  
  /* Fixed Dimensions */
  flex: 0 0 300px; /* Fixed width for standard cards */
  height: 480px;   /* Fixed height to ensure uniformity */
  scroll-snap-align: center;
  
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
}

.baihua-home-scope .product-card:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* Soft shadow on hover */
  background: white; /* Slight lift */
}

/* Image Wrapper: Fixed Height and Top Position */
.baihua-home-scope .product-image-wrapper {
    width: 100%;
    height: 220px; /* Fixed height for image area */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px; /* Space between image and text */
    flex-shrink: 0; /* Prevent shrinking */
}

.baihua-home-scope .product-image-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.5s ease;
}

.baihua-home-scope .product-card:hover .product-image-wrapper img {
    transform: scale(1.08);
}

/* --- Company Intro Revamp --- */
.baihua-home-scope .intro-card-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 0; /* Let image bleed or control padding internally */
    overflow: hidden;
}

@media (min-width: 900px) {
    .baihua-home-scope .intro-card-layout {
        grid-template-columns: 1.2fr 1fr; /* Image wider */
        align-items: stretch;
    }
}

.baihua-home-scope .intro-image-area {
    position: relative;
    min-height: 400px;
}

.baihua-home-scope .intro-main-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Glass Stats Overlay */
.baihua-home-scope .intro-stats-overlay {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.85); /* Frost effect */
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    justify-content: space-around;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: 1px solid rgba(255,255,255,0.5);
}

.baihua-home-scope .stat-item {
    text-align: center;
}

.baihua-home-scope .stat-num {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--color-accent-secondary);
    line-height: 1.2;
}

.baihua-home-scope .stat-num small {
    font-size: 14px;
    font-weight: 500;
    margin-left: 2px;
}

.baihua-home-scope .stat-label {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
    display: block;
}

.baihua-home-scope .intro-text-area {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.baihua-home-scope .section-title {
    margin-bottom: 5px; /* Tight to subtitle */
}

.baihua-home-scope .intro-subtitle {
    font-size: 16px;
    color: var(--color-accent-secondary);
    font-weight: 600;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.baihua-home-scope .intro-body p {
    color: var(--color-text-secondary);
    line-height: 1.8;
    margin-bottom: 20px;
    font-size: 15px;
    text-align: justify;
}

.baihua-home-scope .intro-body strong {
    color: var(--color-text-primary);
    font-weight: 600;
}

/* Scenarios: Holographic / Tech Cards */
.baihua-home-scope .scenario-grid {
  display: flex; /* Horizontal Scroll / Flex */
  gap: var(--spacing-lg);
  overflow-x: auto;
  padding-bottom: 20px;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}

.baihua-home-scope .scenario-grid::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.baihua-home-scope .tech-scenario-card {
  min-width: 300px;
  height: 220px;
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: all 0.4s ease;
}

.baihua-home-scope .tech-scenario-card:hover {
  min-width: 350px; /* Expand on hover */
}

.baihua-home-scope .tech-scenario-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.baihua-home-scope .tech-scenario-card:hover img {
  transform: scale(1.1);
}

.baihua-home-scope .scenario-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
  padding: 20px;
  color: white;
  transform: translateY(20px);
  transition: transform 0.3s;
}

.baihua-home-scope .tech-scenario-card:hover .scenario-overlay {
  transform: translateY(0);
}

.baihua-home-scope .data-tag {
  display: inline-block;
  background: rgba(0, 210, 255, 0.3);
  backdrop-filter: blur(4px);
  border: 1px solid var(--color-accent-primary);
  padding: 2px 8px;
  font-size: 10px;
  color: #00d2ff;
  border-radius: 4px;
  margin-bottom: 5px;
  font-family: 'Courier New', monospace;
}

/* --- Contact Us Section --- */
.baihua-home-scope .contact-section {
    background-color: #1a1a1a;
    color: #ffffff;
    padding: 80px 0 60px;
    position: relative;
    /* Force Full Width (Breakout) */
    /* IMPORTANT: When scoped, breakout might need adjustments depending on parent overflow */
    /* Assuming standard flow, vw still works */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    left: 50%;
    right: 50%;
    transform: translateX(-50%);
}

.baihua-home-scope .contact-header {
    margin-bottom: 50px;
    border-left: 4px solid var(--color-accent-primary);
    padding-left: 20px;
}

.baihua-home-scope .contact-header h2 {
    font-size: 32px;
    margin: 0;
    font-weight: 700;
    color: white;
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.baihua-home-scope .en-title {
    font-size: 16px;
    font-weight: 400;
    color: rgba(255,255,255,0.4);
    letter-spacing: 1px;
}

.baihua-home-scope .brand-sub {
    font-size: 14px;
    color: rgba(255,255,255,0.6);
    margin-top: 5px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.baihua-home-scope .contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

@media (min-width: 768px) {
    .baihua-home-scope .contact-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .baihua-home-scope .contact-grid {
        grid-template-columns: 1.2fr 1fr 1fr;
    }
}

.baihua-home-scope .contact-group h3 {
    font-size: 18px;
    margin-bottom: 25px;
    color: var(--color-accent-secondary);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.baihua-home-scope .group-en {
    font-size: 12px;
    color: rgba(255,255,255,0.3);
    font-weight: 400;
    text-transform: uppercase;
}

.baihua-home-scope .contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.baihua-home-scope .contact-list li {
    display: flex;
    margin-bottom: 12px;
    line-height: 1.6;
    font-size: 14px;
}

.baihua-home-scope .contact-list .label {
    width: 90px;
    color: rgba(255,255,255,0.5);
    flex-shrink: 0;
}

.baihua-home-scope .contact-list .valueLabel {
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    transition: color 0.2s;
}

.baihua-home-scope .contact-list a.valueLabel:hover {
    color: var(--color-accent-primary);
}

/* =========================================
   Pad (Tablet) Responsiveness (Added)
   ========================================= */
@media (min-width: 769px) and (max-width: 1024px) {
    /* 1. Hero Carousel: Intermediate height */
    .baihua-home-scope .hero-carousel {
        height: 450px;
    }

    /* 2. Banner Content */
    .baihua-home-scope .banner-content h1 {
        font-size: 2.5rem; /* Smaller than desktop 3rem */
    }

    /* 3. Intro Section */
    /* Ensure the intro card layout is optimized.
       Between 769px and 899px, it falls back to 1 column (default) which is good.
       Above 900px it goes 2 columns.
       We just need to make sure the overlay isn't covering everything if height is small. */
    .baihua-home-scope .intro-stats-overlay {
        /* On tablets, we might want this to be relative if the image is short, 
           but usually absolute is fine if we have enough height. 
           Let's keep it absolute but ensure it's not too huge. */
        padding: 15px;
    }
    
    .baihua-home-scope .stat-num {
        font-size: 20px;
    }

    /* 4. Product Grid */
    .baihua-home-scope .product-card {
        flex: 0 0 280px; /* Slightly smaller cards than desktop 300px */
    }
}

/* =========================================
   Mobile Responsiveness (Added)
   ========================================= */
@media (max-width: 768px) {
    /* 1. Global Spacing Adjustments */
    .baihua-home-scope {
        --spacing-xxl: 32px; /* Reduce section spacing */
        --spacing-xl: 24px;
        --font-size-xxl: 24px; /* Reduce section title size */
    }

    .baihua-home-scope .section {
        padding: 30px 0;
    }

    /* 2. Hero Carousel Adjustments */
    .baihua-home-scope .hero-carousel {
        height: 350px; /* Reduce height from 600px */
    }

    .baihua-home-scope .banner-content {
        margin-top: 40px; /* Reduce top margin */
        padding: 0 20px;
        text-align: center; /* Center align for better mobile read */
    }

    .baihua-home-scope .banner-content h1 {
        font-size: 1.8rem; /* Reduce from 3rem */
        margin-bottom: 10px;
        line-height: 1.2;
    }

    .baihua-home-scope .banner-content p {
        font-size: 1rem; /* Reduce from 1.5rem */
        max-width: 100%;
        line-height: 1.4;
    }
    
    .baihua-home-scope .carousel-btn {
        padding: 8px 12px;
        font-size: 1.2rem;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .baihua-home-scope .prev-btn { left: 10px; }
    .baihua-home-scope .next-btn { right: 10px; }

    /* 3. Company Intro Adjustments */
    .baihua-home-scope .intro-card-layout {
        gap: 0; /* Remove gap, stack vertically */
        border-radius: var(--radius-md); /* Smaller radius */
        display: flex;
        flex-direction: column;
    }

    .baihua-home-scope .intro-image-area {
        min-height: auto;
        height: auto;
        display: flex;
        flex-direction: column;
    }

    .baihua-home-scope .intro-main-img {
        height: 250px; /* Fixed height for image only on mobile */
        width: 100%;
        object-fit: cover;
    }

    .baihua-home-scope .intro-stats-overlay {
        position: relative; /* Change from absolute to flow naturally */
        bottom: auto;
        left: auto;
        right: auto;
        margin: -30px 10px 0 10px; /* Adjust overlap */
        padding: 12px 8px;
        display: grid; /* Use Grid for better stability */
        grid-template-columns: repeat(2, 1fr); /* 2 columns for 4 items */
        gap: 10px;
        background: rgba(255, 255, 255, 0.98);
        z-index: 2;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    
    .baihua-home-scope .stat-item {
        text-align: center;
        padding: 5px;
        background: rgba(240, 244, 248, 0.5); /* Slight bg for contrast */
        border-radius: 4px;
    }
    
    .baihua-home-scope .stat-num {
        font-size: 16px; /* Slightly smaller */
        display: block;
        font-weight: 700;
        color: var(--color-primary);
    }
    
    .baihua-home-scope .stat-label {
        font-size: 11px;
        color: var(--text-secondary);
        white-space: nowrap; /* Prevent breaking */
    }

    .baihua-home-scope .intro-text-area {
        padding: 25px 15px 15px 15px; /* Adjust padding */
        height: auto !important;
        max-height: none !important;
    }
    
    .baihua-home-scope .intro-body {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    /* Force Vertical Stacking for Product and Scenario Grids */
    .baihua-home-scope .product-grid,
    .baihua-home-scope .scenario-grid {
        display: grid !important;
        grid-template-columns: 1fr !important; /* Single column */
        gap: 20px;
    }
    
    .baihua-home-scope .tech-scenario-card {
        width: 100%;
        min-width: 0; /* Reset min-width */
        margin-bottom: 10px;
    }

    .baihua-home-scope .intro-body p {
        font-size: 14px; /* Readable text size */
        line-height: 1.6;
        margin-bottom: 12px;
        text-align: justify; /* Better reading experience */
    }

    .baihua-home-scope .section-title {
        font-size: 1.5rem;
    }
    
    .baihua-home-scope .intro-subtitle {
        font-size: 0.9rem;
        margin-bottom: 15px;
        line-height: 1.4;
    }

    .baihua-home-scope .intro-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    
    .baihua-home-scope .intro-actions .btn,
    .baihua-home-scope .intro-actions .link-secondary {
        width: 100%;
        justify-content: center;
        display: flex;
    }

    /* 4. Product Grid Adjustments */
    .baihua-home-scope .product-card {
        flex: 0 0 260px; /* Slightly smaller width */
        height: auto; /* Allow auto height */
        min-height: 400px;
        padding: 20px 15px;
    }
    
    .baihua-home-scope .product-image-wrapper {
        height: 160px;
        margin-bottom: 15px;
    }
    
    .baihua-home-scope .product-info h3 {
        font-size: 1.1rem;
    }

    /* 5. Contact Section */
    .baihua-home-scope .contact-section {
        padding: 40px 0;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        left: 0;
        right: 0;
        transform: none;
    }
    
    .baihua-home-scope .contact-header h2 {
        font-size: 24px;
        flex-direction: column;
    }
}

/* =========================================
   Partner Marquee Styles (Merged)
   ========================================= */
.baihua-home-scope .style-marquee-container {
    overflow: hidden;
    position: relative;
    padding: 30px 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.baihua-home-scope .style-marquee-track {
    display: flex;
    gap: 40px;
    width: max-content;
    animation: baihuaMarqueeScrollLeft 40s linear infinite;
}

.baihua-home-scope .style-marquee-track:hover {
    animation-play-state: paused;
}

.baihua-home-scope .style-partner-item {
    width: 100px;
    height: 100px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #f0f4f8;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    padding: 15px;
}

.baihua-home-scope .style-partner-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.baihua-home-scope .style-partner-item:hover {
    transform: scale(1.1);
    box-shadow: 0 15px 30px rgba(0, 210, 255, 0.2);
    border-color: var(--color-accent-primary);
}

@keyframes baihuaMarqueeScrollLeft {
    from { transform: translateX(0); }
    to { transform: translateX(-33.33%); }
}

/* 
 * Archives/Article Content Image Styling 
 * Ensures images in the content area are responsive and consistent.
 */
#content.prose-content img {
    width: 100% !important;
    height: auto !important;
    display: block;
    margin: 20px auto;
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-card, 0 4px 6px rgba(0,0,0,0.1));
}