:root {
  /* Default (White) Theme */
  --bg-color: #fafbfc;
  --text-color: #222;
  --navbar-bg: #fff;
  --navbar-text: #333;
  --navbar-shadow: 0 2px 8px rgba(0,0,0,0.03);
  --hero-bg: #f6f8fa;
  --section-white-bg: #fff;
  --section-gray-bg: #f6f8fa;
  --card-bg: #fff;
  --card-shadow: 0 2px 8px rgba(26,188,156,0.06);
  --border-color: #e0e0e0;
  --primary-color: #1abc9c;
  --secondary-color: #e8f8f5;
  --footer-bg: #222;
  --footer-text: #fff;
  --footer-link: #1abc9c;
  --footer-copy: #aaa;
  --base-font-size: 16px;
  --spacing-unit: 1rem;
  --container-padding: 5vw;
  --border-radius-sm: 0.375rem;
  --border-radius-md: 0.75rem;
  --border-radius-lg: 1.25rem;
}

body.dark-theme {
  /* Dark Theme */
  --bg-color: #1e1e1e;
  --text-color: #eee;
  --navbar-bg: #2d2d2d;
  --navbar-text: #eee;
  --navbar-shadow: 0 2px 8px rgba(0,0,0,0.2);
  --hero-bg: #282828;
  --section-white-bg: #2d2d2d;
  --section-gray-bg: #282828;
  --card-bg: #3a3a3a;
  --card-shadow: 0 2px 8px rgba(0,0,0,0.3);
  --border-color: #555;
  --primary-color: #38d9a9;
  --secondary-color: #225a4e;
  --footer-bg: #1e1e1e;
  --footer-text: #eee;
  --footer-link: #38d9a9;
  --footer-copy: #888;
}

body {
  margin: 0;
  background-color: white;
  font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
  /* background: var(--bg-color); */
  color: var(--text-color);
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem var(--container-padding) 0.75rem var(--container-padding);
  background: var(--navbar-bg);
  box-shadow: var(--navbar-shadow);
}
.navbar-logo-section {
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
}
.navbar-logo {
  font-weight: bold;
  font-size: 1.5rem;
  color: var(--navbar-text);
  line-height: 1.2;
}
.logo-sub {
  font-size: 0.875rem;
  color: var(--footer-copy); /* Using footer copy color for sub-logo in both themes */
}
.navbar-menu a {
  margin: 0 16px;
  color: var(--navbar-text);
  text-decoration: none;
  font-size: 15px;
}
.navbar-btns {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
}
.btn-outline {
  border: 1.5px solid var(--primary-color);
  background: var(--navbar-bg);
  color: var(--primary-color);
  border-radius: var(--border-radius-sm);
  padding: 0.375rem 1.125rem;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background .2s;
}
.btn-outline:hover {
  background: var(--secondary-color);
}
.btn-primary {
  background: var(--primary-color);
  color: var(--navbar-bg);
  border: none;
  border-radius: var(--border-radius-sm);
  padding: 0.375rem 1.125rem;
  font-size: 0.9375rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(26,188,156,0.08);
  transition: background .2s;
}
.btn-primary:hover {
  background: #16a085; /* Keeping a fixed hover color for contrast */
}

.theme-toggle-slider {
  width: 56px; /* Adjusted width based on typical toggle switch */
  height: 30px; /* Adjusted height */
  background-color: var(--border-color); /* Track color based on theme */
  border-radius: 15px; /* Fully rounded ends */
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative; /* Needed for absolute positioning of handle */
  transition: background-color 0.3s ease;
  padding: 3px;
  box-sizing: border-box;
}

.slider-handle {
  width: 24px; /* Handle size */
  height: 24px; /* Handle size */
  background-color: var(--card-bg); /* Handle color */
  border-radius: 50%; /* Round handle */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, background-color 0.3s ease; /* Add transition for sliding and color */
  box-shadow: 0 1px 3px rgba(0,0,0,0.2); /* Optional shadow */
  transform: translateX(0); /* Default position (light theme) */
}

.theme-toggle-slider.dark-theme .slider-handle,
body.dark-theme .theme-toggle-slider .slider-handle {
  transform: translateX(26px); /* Move handle to the right (dark theme), adjust value based on width/padding */
  background-color: #16a085; /* Lighter color in dark mode */
}

.theme-icon {
  font-size: 16px; /* Icon size inside handle */
  transition: opacity 0.3s ease;
}

.light-icon,
.dark-icon {
    /* Basic color, will be hidden/shown */
    color: var(--text-color); /* Icon color */
}

/* Show/hide icons based on theme */
.theme-toggle-slider.dark-theme .light-icon,
body.dark-theme .theme-toggle-slider .light-icon {
  display: none; /* Hide light icon in dark theme */
}

.theme-toggle-slider:not(.dark-theme) .dark-icon,
body:not(.dark-theme) .theme-toggle-slider .dark-icon {
   display: none; /* Hide dark icon in light theme */
}

.theme-toggle-slider.dark-theme .dark-icon,
body.dark-theme .theme-toggle-slider .dark-icon {
   display: block; /* Show dark icon in dark theme */
}

.theme-toggle-slider:not(.dark-theme) .light-icon,
body:not(.dark-theme) .theme-toggle-slider .light-icon {
   display: block; /* Show light icon in light theme */
}

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3rem var(--container-padding) 2rem var(--container-padding);
  background: none;
}
.hero-content {
  max-width: 520px;
}
.hero-content h1 {
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
}
.hero-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.hero-list li {
  margin-bottom: 0.5rem;
  font-size: 1rem;
  position: relative;
  padding-left: 1.25rem;
}
.hero-list li:before {
  content: '✔';
  color: #1abc9c;
  position: absolute;
  left: 0;
}
.hero-visual {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  min-width: 0;
}
.visual-demo {
  width: 32.75rem;
  height: 18.375rem;
  display: flex;
  background: none;
  position: relative;
  transform-origin: center;
}
.visual-sidebar {
  width: 3.75rem;
  min-width: 3.75rem;
  max-width: 3.75rem;
  height: 16.875rem;
  background: #fff;
  border-radius: 0.875rem;
  box-shadow: 0 0.25rem 1.5rem 0 rgba(26,188,156,0.10), 0 0.09375rem 0.5rem 0 rgba(0,0,0,0.04);
  padding: 0.75rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-right: 1.5rem;
  border: none;
  position: relative;
  z-index: 3;
}
.sidebar-title {
  color: #bdbdbd;
  font-size: 8px;
  margin-bottom: 8px;
  text-align: center;
}
.sidebar-btn, .sidebar-placeholder {
  width: 48px;
  margin-left: auto;
  margin-right: auto;
}
.sidebar-btn {
  height: 28px;
  margin-bottom: 8px;
  border: 1.5px solid #e0e0e0;
  background: #fff;
  color: #222;
  border-radius: 6px;
  font-size: 10px;
  cursor: pointer;
  transition: border .2s, color .2s;
}
.sidebar-btn.active, .sidebar-btn:hover {
  border: 1.5px solid #1abc9c;
  color: #1abc9c;
  background: #f6fffa;
}
.sidebar-placeholder {
  height: 16px;
  background: #f2f2f2;
  border-radius: 4px;
  margin-bottom: 8px;
}
.visual-main {
  flex: 1;
  height: 100%;
  position: relative;
  border: none;
  border-radius: 0.625rem;
  background: #fff;
  box-sizing: border-box;
  box-shadow: 0 0.5rem 2rem 0 rgba(26,188,156,0.07), 0 0.09375rem 0.5rem 0 rgba(0,0,0,0.04);
  padding: 0.625rem 0.625rem 0.625rem 2.25rem;
  overflow: visible;
  z-index: 2;
}
.main-topbar {
  display: flex;
  gap: 0.375rem;
  margin-bottom: 0.375rem;
}
.main-topbar-item {
  background: #e8f8f5;
  border-radius: 0.375rem;
  height: 1.125rem;
  width: 7.5rem;
}
.main-topbar-item--wide {
  width: 16.25rem;
}
.main-ads {
  display: flex;
  gap: 0.375rem;
  margin-bottom: 0.375rem;
}
.ad-item {
  background: var(--section-gray-bg);
  border-radius: 0.375rem;
  width: 3rem;
  height: 2.375rem;
  color: var(--footer-copy);
  font-size: 0.8125rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-publish-btn {
  position: absolute;
  right: -3.75rem;
  top: 5.625rem;
  background: #38d9a9;
  color: #fff;
  border: none;
  border-radius: 0.375rem;
  padding: 0.25rem 1.125rem;
  font-size: 0.875rem;
  font-weight: bold;
  box-shadow: 0 0.125rem 0.5rem rgba(26,188,156,0.10);
  cursor: pointer;
  transition: background .2s;
  z-index: 4;
}
.main-publish-btn:hover {
  background: #1abc9c;
}
.main-row {
  background: var(--secondary-color);
  border-radius: 0.375rem;
  height: 1rem;
  margin-bottom: 0.375rem;
}
.main-row--short {
  width: 11.25rem;
}
.main-content {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: 0.375rem;
}
.main-content-card {
  background: var(--secondary-color);
  border-radius: 0.5rem;
  height: 4.875rem;
  margin-bottom: 0.25rem;
}
.main-content-card + .main-content-card {
  margin-top: 0;
}
.main-data-card {
  background: var(--card-bg);
  border-radius: 10px;
  border: none;
  width: 180px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: absolute;
  right: 18px;
  top: 110px;
  z-index: 3;
  padding: 0 10px;
  box-shadow: var(--card-shadow);
}
.data-chart {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: conic-gradient(var(--primary-color) 0 90deg, var(--secondary-color) 90deg 360deg);
  margin-right: 4px;
}
.data-bar {
  width: 16px; /* 缩小宽度 */
  height: 16px; /* 缩小高度 */
  background: conic-gradient(var(--primary-color) 0 90deg, var(--secondary-color) 90deg 360deg);
  border-radius: 50%;
  margin-right: 8px;
  position: relative;
}
.data-bar::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  background: var(--card-bg);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.data-bar:before {
  display: none; /* 移除原来的横线 */
}
.data-percent {
  display: flex;
  align-items: center;
  color: var(--primary-color);
  font-size: 15px;
  font-weight: bold;
}
.data-percent-box {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: var(--secondary-color);
  border-radius: 4px;
  margin-right: 4px;
  border: 1.5px solid var(--primary-color);
}
.main-data-card--halfout {
  position: absolute;
  right: -90px;
  top: 170px;
  transform: translateY(0);
  background: var(--card-bg);
  border-radius: 10px;
  border: none;
  width: 180px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 3;
  padding: 0 10px;
  box-shadow: var(--card-shadow);
  clip-path: inset(-10px 0px -10px 50px);
}

.core-features {
  padding: 48px 8vw 32px 8vw;
  background: var(--section-white-bg);
  text-align: center;
}
.core-features h2 {
  margin-bottom: 24px;
  font-size: 1.5rem;
}
.section-desc {
  color: var(--footer-copy);
  font-size: 15px;
  margin-bottom: 32px;
}
.features-list {
  display: flex;
  justify-content: center;
  gap: 32px;
}
.feature-card {
  min-width: 220px;
  max-width: 220px;
  flex: 0 0 auto;
  background: var(--section-gray-bg); /* Card background */
  border-radius: var(--border-radius-md);
  box-shadow: var(--card-shadow);
  padding: 2rem 1.5rem;
  text-align: center;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.feature-card:hover {
  box-shadow: 0 4px 16px rgba(26,188,156,0.13);
}
.feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.feature-card h3 {
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
  color: var(--text-color); /* Heading color */
}
.feature-card p {
  color: var(--footer-copy); /* Paragraph color */
  font-size: 0.9375rem;
}

.fast-build {
  padding: 48px 8vw 32px 8vw;
  background: none;
  text-align: center;
}
.fast-build h2 {
  margin-bottom: 24px;
  font-size: 1.5rem;
}
.build-panels {
  display: flex;
  justify-content: center;
  gap: 48px;
  margin-bottom: 18px;
}
.build-panel {
  width: 520px;
  min-width: 520px;
  max-width: 520px;
  height: 370px;
  border: 2px solid var(--primary-color); /* Border color */
  border-radius: 18px;
  background: linear-gradient(180deg, var(--card-bg) 80%, var(--secondary-color) 100%);
  box-shadow: 0 4px 24px 0 rgba(26,188,156,0.07);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
}
.build-card {
  width: calc(100% - 48px);
  max-width: 472px;
  min-width: 472px;
  height: 260px;
  margin: 24px auto 0 auto;
  background: var(--card-bg);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  padding: 32px 24px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.build-card-header {
  width: 100%;
  margin-bottom: 32px;
}
.header-line {
  height: 12px;
  width: 38%;
  background: var(--border-color); /* Placeholder line color */
  border-radius: 6px;
  margin-bottom: 10px;
}
.header-line--wide {
  width: 80%;
  height: 12px;
  background: var(--border-color);
  border-radius: 6px;
  margin-bottom: 0;
}
.build-card-content {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 28px;
  width: 100%;
  margin-top: 18px;
}
.build-card-content--platforms .platform-item {
  width: 110px;
  height: 120px;
  background: #f8fafd;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  box-shadow: 0 1px 4px rgba(26,188,156,0.04);
  padding-bottom: 12px;
}
.platform-icon {
  margin-top: 18px;
  margin-bottom: 8px;
}
.platform-label {
  font-size: 15px;
  color: #222;
  text-align: center;
  line-height: 1.3;
}
.platform-label-sub {
  font-size: 12px;
  color: #888;
}
.platform-icon {
  width: 56px;
  height: 36px;
  background: linear-gradient(180deg, #e8f8f5 60%, #d0eaff 100%);
  border-radius: 6px;
  border: 1.5px solid #b2f2e5;
  box-sizing: border-box;
}
.platform-icon--android, .platform-icon--ios {
  width: 28px;
  height: 56px;
  background: linear-gradient(180deg, #e8f8f5 60%, #d0eaff 100%);
  border-radius: 8px;
}
.build-card-content--modules .module-btn {
  width: 110px;
  height: 48px;
  background: #f2f3f5;
  border-radius: 8px;
  font-size: 16px;
  color: #444;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 8px;
  box-shadow: 0 1px 4px rgba(26,188,156,0.04);
  cursor: pointer;
  border: none;
  transition: background .2s;
}
.build-panel-title {
  margin: 18px 0 18px 0;
  font-size: 20px;
  color: #1abc9c;
  font-weight: bold;
  text-align: center;
}
.panel-mockup {
  background: #e8f8f5;
  border-radius: 10px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1abc9c;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}
.panel-desc {
  color: #666;
  font-size: 14px;
}
.build-icons {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 10px;
  color: #1abc9c;
  font-size: 16px;
}

.data-analysis {
  padding: 64px 0 64px 0;
  background: var(--section-white-bg);
  text-align: center;
}
.analysis-bg {
  width: 900px;
  height: 500px;
  margin: 0 auto;
  border-radius: 32px;
  box-shadow: 0 2px 16px 0 rgba(26,188,156,0.06);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image:
    linear-gradient(to right, var(--secondary-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--secondary-color) 1px, transparent 1px);
  background-size: 200px 120px;
  background-position: 0 0;
}
.analysis-card {
  width: 480px;
  height: 320px;
  background: var(--card-bg);
  border-radius: 18px;
  box-shadow: var(--card-shadow);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 36px 32px 24px 32px;
}
.analysis-label {
  position: absolute;
  display: flex;
  align-items: center;
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  border-radius: 24px;
  font-size: 18px;
  color: var(--primary-color);
  font-weight: bold;
  padding: 6px 22px 6px 16px;
  z-index: 3;
  white-space: nowrap;
}
.analysis-label--top {
  left: 50%;
  top: -32px;
  transform: translateX(-50%);
}
.analysis-label--left {
  left: -90px;
  top: 110px;
  padding: 6px 16px 6px 12px;
}
.analysis-label--bottom {
  left: 60%;
  bottom: -32px;
  padding: 6px 22px 6px 16px;
}
.label-icon {
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--secondary-color);
  color: var(--primary-color);
  font-size: 18px;
  margin-right: 8px;
  text-align: center;
  line-height: 28px;
}
.analysis-card-header {
  width: 100%;
  margin-bottom: 24px;
}
.analysis-card-header .header-line {
  height: 10px;
  width: 38%;
  background: var(--border-color);
  border-radius: 6px;
  margin-bottom: 8px;
}
.analysis-card-header .header-line--wide {
  width: 80%;
  height: 10px;
  background: var(--border-color);
  border-radius: 6px;
  margin-bottom: 0;
}
.analysis-card-content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: end;
  justify-items: center;
  width: 100%;
  margin-bottom: 0;
  padding: 0 24px;
  box-sizing: border-box;
  min-height: 100px;
}
.analysis-chart--pie {
  flex: none;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: conic-gradient(var(--primary-color) 0 25%, var(--secondary-color) 0 100%);
  position: relative;
  margin: 0 auto;
  min-width: 80px;
  min-height: 80px;
  max-width: 80px;
  max-height: 80px;
}
.analysis-chart--pie::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  background: var(--card-bg);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: none;
}
.analysis-chart--bar {
  flex: none;
  width: 80px;
  height: 48px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  background: none;
  min-width: 80px;
  min-height: 48px;
  max-width: 80px;
  max-height: 48px;
}
.analysis-bar-rect {
  border-radius: 6px 6px 0 0;
  display: inline-block;
  background: var(--secondary-color);
}
.analysis-bar-rect--1 {
  width: 14px;
  height: 18px;
  opacity: 0.5;
}
.analysis-bar-rect--2 {
  width: 16px;
  height: 38px;
  background: var(--primary-color);
  opacity: 1;
}
.analysis-bar-rect--3 {
  width: 14px;
  height: 26px;
  opacity: 0.3;
}
.analysis-chart--list {
  flex: none;
  width: 100px;
  height: 32px;
  min-width: 100px;
  min-height: 32px;
  max-width: 100px;
  max-height: 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
}
.analysis-list-row {
  height: 8px;
  border-radius: 6px;
  background: var(--secondary-color);
  margin-bottom: 0;
  width: 100%;
  position: relative;
  opacity: 0.6;
}
.analysis-list-row--active {
  background: var(--primary-color);
  width: 70%;
  opacity: 1;
}
.analysis-card-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: start;
  justify-items: center;
  
  width: 100%;
  margin-top: 40px;
  padding: 0 24px;
  box-sizing: border-box;
  column-gap: 40px;
}
.analysis-percent {
  width: 100%;
  max-width: 60px;
  display: flex;
  align-items: center;
  color: var(--footer-copy); /* Using footer copy for lighter text */
  font-size: 18px;
  font-weight: bold;
  background: none;
  border-radius: 8px;
  padding: 6px 18px;
  box-shadow: none;
  justify-content: center;
  margin: 0;
  border: 1px solid var(--secondary-color);
}
.analysis-percent:first-child {
  margin-left: 0;
}
.analysis-percent:last-child {
  margin-right: 0;
}
.percent-box {
  display: inline-block;
  width: 16px; /* Adjust size */
  height: 16px; /* Adjust size */
  background: var(--card-bg); /* White background */
  border-radius: 4px; /* Rounded corners */
  margin-right: 8px; /* Space between box and text */
  border: 1.5px solid var(--secondary-color); /* Border color */
}
.analysis-list {
  position: absolute;
  right: 48px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 22px;
  z-index: 4;
  font-size: 18px;
  color: var(--text-color);
  text-align: left;
  list-style: none;
  padding: 0;
}
.analysis-list .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--primary-color);
  border-radius: 50%;
  margin-right: 12px;
}

.feature-nav {
  padding: 80px 0 0 0;
  background: none;
  text-align: center;
}
.feature-nav h2 {
  margin-bottom: 24px;
  font-size: 1.5rem;
}
.nav-list {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 48px;
}
.nav-item {
  background: var(--card-bg);
  border-radius: 24px;
  box-shadow: var(--card-shadow);
  padding: 28px 18px 18px 18px;
  width: 120px;
  min-width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: box-shadow .2s;
}
.nav-item:hover {
  box-shadow: 0 4px 24px rgba(26,188,156,0.13);
}
.nav-icon {
  font-size: 32px;
  margin-bottom: 12px;
}
.nav-title {
  font-size: 15px;
  color: var(--text-color);
  font-weight: 500;
}
.nav-desc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 40px;
  justify-items: start;
  align-items: start;
  width: 480px;
  max-width: 90vw;
  margin: 0 auto;
  margin-bottom: 48px;
}
.nav-desc-item {
  font-size: 15px;
  text-align: left;
  justify-content: flex-start;
  position: relative;
  padding-left: 20px;
}

.nav-desc-item::before {
  content: '✔';
  color: var(--primary-color);
  position: absolute;
  left: 0;
  top: 0;
}

.nav-check {
  color: var(--primary-color);
  font-size: 22px;
  margin-right: 14px;
  font-weight: bold;
  line-height: 1;
}

.nav-check img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 14px;
}

.section-gray-card {
  background-color:#F9FBFC; /* Set background color */
  border-radius: 20px; /* Add 20px rounded corners */
  max-width: 1400px; /* Set max-width for the card */
  margin: 48px auto 0 auto; /* Center the card and add top margin */
  padding: 40px 0; /* Add vertical padding inside the card */
  box-shadow: none; /* Keep shadow none unless specified */
}

/* Ensure the inner sections within .section-gray-card are centered and have horizontal padding */
.section-gray-card section {
  margin: 0 auto; /* Center the content within the card */
  max-width: 900px; /* Ensure inner content respects max-width */
  padding: 0 40px; /* Add horizontal padding inside the section */
  background: none; /* Remove background from inner section */
  border-radius: 0; /* Remove border radius from inner section */
}
.feature-card .highlight  { 
  color : #16a085;
}

/* Adjust padding for inner section on smaller screens */
@media (max-width: 1400px) {
  .section-gray-card {
    margin-left: 16px; /* Add side margin on smaller screens */
    margin-right: 16px; /* Add side margin on smaller screens */
    max-width: calc(100vw - 32px); /* Adjust max-width */
    padding: 32px 0; /* Adjust vertical padding */
  }
   .section-gray-card section {
     padding: 0 16px; /* Adjust horizontal padding on smaller screens */
   }
}

@media (max-width: 900px) {
  /* Keep existing rules for features carousel if needed */
   .section-gray-card section {
     padding: 0 16px; /* Ensure consistent padding on smaller screens */
   }
}

.team, .about {
  /* Keep existing styles for .team and .about sections when they are white */
  background: var(--section-white-bg); /* Set to white */
  border-radius: 24px;
  max-width: 1100px; /* Restore max-width for standalone white sections */
  margin: 48px auto 0 auto; /* Explicitly center standalone white sections */
  padding: 48px 8vw; /* Keep padding for standalone white sections */
}

/* Ensure .about section removes its background/padding/border when inside section-gray-card */
.section-gray-card .about {
    background: none; /* Remove background from .about when inside gray card */
    border-radius: 0; /* Remove border radius from .about when inside gray card */
    padding: 0; /* Remove padding from .about when inside gray card */
    margin: 0 auto; /* Center .about within gray card */
    max-width: 900px; /* Match inner content max-width */
}

/* Ensure other sections inside section-gray-card also remove their styles */
.section-gray-card .hero, 
.section-gray-card .fast-build, 
.section-gray-card .feature-nav {
    background: none; /* Remove background when inside gray card */
    border-radius: 0; /* Remove border radius when inside gray card */
    padding: 0; /* Remove padding when inside gray card, handled by section-gray-card section rule */
}

.team > div, .about > div {
  display: flex;
  align-items: center;
  gap: 48px;
  max-width: 900px;
  margin: 0 auto;
}

.about > div {
  flex-direction: row-reverse;
}
.team img, .about img {
  width: 340px;
  height: 220px;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.1);
}
.team h2, .about h2 {
  margin: 0 0 16px 0;
  font-size: 1.5rem;
  font-weight: 700;
}
.team-desc, .about-desc {
  font-size: 1.1rem;
  line-height: 2;
}
.team .highlight, .about .highlight {
  color: var(--primary-color) !important; /* Use important to ensure priority */
  font-weight: 700;
  font-size: 1.2em;
}

/* Keep the original combined rule as well, but the one above should take precedence */
.team .highlight, .about .highlight, .team span[style*='color:#00c389'], .about span[style*='color:#00c389'] {
  /* This rule will still apply other styles like font-weight and font-size if needed */
  /* color is now primarily controlled by the more specific rule above */
}

.about .about-desc {
  max-width: 420px;
}
.about .about-promise {
  color: var(--footer-copy);
  font-size: 0.98rem;
  margin-top: 12px;
}
@media (max-width: 900px) {
  .team > div, .about > div {
    flex-direction: column !important;
    gap: 24px;
    text-align: center;
  }
  .team img, .about img {
    width: 100%;
    height: 180px;
  }
}

.footer {
  background: #2d2d2d;
  padding: 48px 8vw;
  margin-top: 48px;
  text-align: left;
  border-top: none;
  color: #eee;
}

.footer-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.footer-contact {
  text-align: left;
  line-height: 1.8;
  font-size: 0.95rem;
  color: #eee;
  min-width: 280px;
}

.footer-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
}

.footer-hotline,
.footer-email,
.footer-address,
.footer-beian {
  margin-bottom: 0.5rem;
  color: #bfc6ce;
  font-size: 0.9375rem;
}

.footer-beian {
  margin-top: 0;
}

.footer-beian a {
  color: #bfc6ce;
  text-decoration: none;
  transition: color 0.2s;
}

.footer-beian a:hover {
  color: var(--primary-color);
}

.footer-qrcode {
  width: 120px;
  height: 120px;
  background: #fff;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: #999;
}
.footer-qrcode img {
  max-width: 100%;
  height: auto;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.footer-qrcode[data-zh]:after, .footer-qrcode[data-en]:after {
  content: attr(data-zh);
  display: block;
  margin-top: 8px;
  font-size: 0.9rem;
  color: #eee;
  text-align: center;
}

.footer-qrcode.english[data-en]:after {
    content: attr(data-en);
}
.footer-qrcode.english[data-zh]:after {
    content: none;
}
.footer-qrcode:not(.english)[data-en]:after {
     content: none;
}
.footer-qrcode:not(.english)[data-zh]:after {
    content: attr(data-zh);
}

/* Adjust QR code text positioning */
.footer-qrcode {
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 10px;
}

.footer-qrcode img {
  max-width: 100px;
  height: auto;
  margin-bottom: 8px;
}

.footer-copy {
  color: #999;
  font-size: 0.9rem;
  margin-top: 24px;
  text-align: center;
}

@media (max-width: 768px) {
  .footer {
    padding: 32px 4vw;
  }
  .footer-info {
    flex-direction: column;
    gap: 24px;
    align-items: center;
  }
  
  .footer-contact {
    text-align: center;
    min-width: auto;
  }
  
  .footer-title {
    margin-bottom: 12px;
  }
  
  .footer-hotline,
  .footer-email,
  .footer-address {
    margin-bottom: 6px;
  }
}

@media (max-width: 900px) {
  .hero, .core-features, .fast-build, .data-analysis, .feature-nav, .team, .about, .footer {
    padding-left: 4vw;
    padding-right: 4vw;
  }
  .features-list, .build-panels, .analysis-list, .nav-list, .nav-desc, .team-info, .about-info {
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }
  .visual-mockup, .analysis-mockup {
    width: 90vw;
    min-width: 180px;
    max-width: 340px;
  }
  .footer-info {
    flex-direction: column;
    gap: 16px;
  }
  .nav-list {
    flex-direction: column;
    gap: 24px;
  }
  .nav-desc-grid {
    grid-template-columns: 1fr;
    width: 98vw;
    gap: 18px 0;
  }
}

.features-carousel {
  position: relative;
  max-width: 1000px;
  margin: 0 auto 32px auto;
  overflow: hidden;
  padding: 0 20px;
}
.features-carousel .features-list {
  display: flex;
  gap: 20px;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
  padding-bottom: 20px;
}
.features-carousel .features-list::-webkit-scrollbar {
  display: none;
}
.feature-card {
  min-width: 220px;
  max-width: 220px;
  flex: 0 0 auto;
  background: var(--section-gray-bg);
  border-radius: 0;
  box-shadow: var(--card-shadow);
  padding: 32px 24px;
  text-align: center;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.feature-icon-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--secondary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.feature-icon-circle img {
  max-width: 40px;
  max-height: 40px;
  object-fit: contain;
}
.feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.feature-card h3 {
  font-size: 18px;
  margin-bottom: 8px;
  color: var(--text-color);
}
.feature-card p {
  color: var(--footer-copy);
  font-size: 14px;
  line-height: 1.6;
}
.carousel-btn {
  display: none;
}
@media (max-width: 900px) {
  .features-carousel, .features-carousel .features-list {
    max-width: 100vw;
    width: 100vw;
    gap: 16px;
    padding: 0 16px;
  }
  .feature-card {
    min-width: 70vw;
    max-width: 70vw;
    flex: 0 0 70vw;
    padding: 24px 16px;
  }
}

.navbar-avatar-container {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.navbar-avatar {
  display: block;
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
}

.sidebar-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.main-topbar-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ad-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.main-row-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.main-content-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.publish-btn-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  margin: 0 auto;
}
.data-chart-icon, .data-bar-icon, .data-percent-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.platform-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.label-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.analysis-list-dot {
  width: 10px;
  height: 10px;
  object-fit: contain;
  margin-right: 12px;
  vertical-align: middle;
}

.nav-item .nav-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-width: 40px;
  max-height: 40px;
}

.nav-check img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 14px;
}

.footer-qrcode img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Ensure background styles applied previously are overridden by variables */
.hero[style],
.core-features[style],
.fast-build[style],
.data-analysis[style],
.feature-nav[style],
.team[style],
.about[style] {
    background: none !important;
}

.language-toggle-slider {
  width: 50px;
  height: 26px;
  background-color: #1abc9c;
  border-radius: 13px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s ease;
  padding: 2px;
  box-sizing: border-box;
}

.language-toggle-slider .slider-handle {
  width: 22px;
  height: 22px;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  left: 2px;
  top: 2px;
  transition: transform 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  z-index: 1;
}

.language-toggle-slider .slider-track {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 13px;
  background-color: #1abc9c;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.language-toggle-slider.english {
  background-color: #1abc9c;
}

.language-toggle-slider.english .slider-handle {
  transform: translateX(24px);
  background-color: #fff;
}

.language-toggle-slider span {
  position: absolute;
  font-size: 10px;
  font-weight: bold;
  color: black;
  transition: opacity 0.3s ease;
}

.language-toggle-slider .lang-zh {
  left: 6px;
  opacity: 1;
}

.language-toggle-slider .lang-en {
  right: 6px;
  opacity: 0;
}

.language-toggle-slider.english .lang-zh {
  opacity: 0;
}

.language-toggle-slider.english .lang-en {
  opacity: 1;
}

.footer-contact {
  text-align: left;
  line-height: 1.8;
  font-size: 0.95rem;
  color: #666;
  min-width: 280px;
}

.footer-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: white;
  margin-bottom: 12px;
}

.footer-hotline,
.footer-email,
.footer-address {
  margin-bottom: 8px;
}

@media (max-width: 768px) {
  .footer-contact {
    text-align: center;
    min-width: auto;
  }
  
  .footer-title {
    margin-bottom: 16px;
  }
  
  .footer-hotline,
  .footer-email,
  .footer-address {
    margin-bottom: 12px;
  }
}

.about {
  /* Keep existing styles for .about section */
  background: #F9FBFC;
  border-radius: 24px;
  /* margin handled by parent .section-gray-card or directly */
  /* max-width handled by parent .section-gray-card or directly */
  padding: 48px 0;
  /* Horizontal centering and max-width now primarily handled by the outer container (.about or .section-gray-card) */
  max-width: 1100px;
  margin: 48px auto 0 auto;
}

/* 移动端适配 */
@media (max-width: 768px) {
  /* 基础缩放设置 */
  html {
    font-size: 14px;
  }

  /* 容器宽度调整 */
  .section-gray-card {
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  .section-gray-card section {
    max-width: 100%;
    padding: 0;
    margin: 0;
  }

  /* 修复第一个模块布局 */
  .hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 48px 8vw 32px 8vw;
    background: none;
    width: 100%;
    box-sizing: border-box;
  }

  .hero-content {
    max-width: 520px;
    flex: 0 0 auto;
  }

  .hero-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .visual-demo {
    width: 22.5rem;
    height: 12.625rem;
    display: flex;
    background: none;
    position: relative;
  }

  .visual-sidebar {
    width: 2.5rem;
    min-width: 2.5rem;
    max-width: 2.5rem;
    height: 11.375rem;
    margin-right: 1rem;
  }

  .main-publish-btn {
    position: absolute;
    right: -2.5rem;
    top: 4.0625rem;
  }

  /* 所有元素统一缩放 */
  .navbar,
  .navbar-logo,
  .navbar-avatar,
  .btn-outline,
  .btn-primary,
  .hero-content h1,
  .hero-list,
  .sidebar-btn,
  .main-publish-btn,
  .core-features,
  .features-carousel,
  .feature-card,
  .feature-icon,
  .fast-build,
  .build-panels,
  .build-panel,
  .build-card,
  .data-analysis,
  .analysis-bg,
  .analysis-card,
  .feature-nav,
  .nav-list,
  .nav-item,
  .nav-icon,
  .team,
  .team img,
  .about,
  .about img,
  .footer,
  .footer-contact,
  .footer-qrcode,
  .footer-qrcode img,
  /* 新增模块内部元素 */
  .visual-demo *,
  .visual-sidebar *,
  .main-topbar *,
  .main-ads *,
  .main-content *,
  .main-data-card *,
  .build-card *,
  .build-panel *,
  .analysis-card *,
  .analysis-bg *,
  .feature-card *,
  .nav-item *,
  .team > div *,
  .about > div *,
  .footer-info * {
    transform: scale(0.9);
    transform-origin: top center;
  }

  /* 保持其他布局结构 */
  .features-carousel {
    width: 100%;
    overflow: hidden;
  }

  .features-list {
    display: flex;
    flex-direction: row;
    gap: 20px;
    padding: 0 20px;
  }

  .build-panels {
    display: flex;
    flex-direction: row;
    gap: 48px;
    justify-content: center;
  }

  .nav-list {
    display: flex;
    flex-direction: row;
    gap: 32px;
    justify-content: center;
  }

  .nav-desc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 40px;
  }

  .team > div,
  .about > div {
    display: flex;
    flex-direction: row;
    gap: 48px;
  }

  .footer-info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 48px;
  }

  /* 调整内边距，保持比例 */
  .navbar,
  .core-features,
  .fast-build,
  .data-analysis,
  .feature-nav,
  .team,
  .about,
  .footer {
    padding: 2rem 1rem;
  }

  /* 调整字体大小，保持比例 */
  .navbar-logo {
    font-size: 1.7rem;
  }

  .logo-sub {
    font-size: 0.9rem;
  }

  .btn-outline,
  .btn-primary {
    font-size: 0.9rem;
  }

  .hero-content h1 {
    font-size: 1.5rem;
  }

  .hero-list li {
    font-size: 0.9rem;
  }

  .feature-card h3 {
    font-size: 1.1rem;
  }

  .feature-card p {
    font-size: 0.9rem;
  }

  /* 调整图标和图案大小，保持比例 */
  .feature-icon-circle {
    width: 54px;
    height: 54px;
  }

  .feature-icon-circle img {
    max-width: 36px;
    max-height: 36px;
  }

  .nav-icon img {
    max-width: 36px;
    max-height: 36px;
  }

  /* 调整按钮大小，保持比例 */
  .sidebar-btn {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
  }

  .main-publish-btn {
    font-size: 0.625rem;
    padding: 0.1875rem 0.875rem;
  }

  /* 调整第一个模块右边图案中的字体大小 */
  .sidebar-title {
    font-size: 0.375rem;
  }
  
  .sidebar-btn {
    font-size: 0.4375rem;
    height: 1.3125rem;
  }
  
  .main-topbar-item {
    height: 0.875rem;
  }
  
  .ad-item {
    font-size: 0.625rem;
    height: 1.75rem;
  }
  
  .main-row {
    height: 0.75rem;
  }
  
  .main-content-card {
    height: 3.625rem;
  }
  
  .main-publish-btn {
    font-size: 0.625rem;
    padding: 0.1875rem 0.875rem;
  }
}

/* 小屏幕手机适配 */
@media (max-width: 480px) {
  html {
    font-size: 12px;
  }

  /* 容器宽度调整 */
  .section-gray-card {
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  .section-gray-card section {
    max-width: 100%;
    padding: 0;
    margin: 0;
  }

  /* 修复第一个模块布局 */
  .hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32px 4vw 24px 4vw;
    background: none;
    width: 100%;
    box-sizing: border-box;
  }

  .hero-content {
    max-width: 520px;
    flex: 0 0 auto;
  }

  .hero-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .visual-demo {
    width: 17.5rem;
    height: 9.8125rem;
    display: flex;
    background: none;
    position: relative;
  }

  .visual-sidebar {
    width: 2rem;
    min-width: 2rem;
    max-width: 2rem;
    height: 8.875rem;
    margin-right: 0.75rem;
  }

  .main-publish-btn {
    position: absolute;
    right: -2rem;
    top: 3.125rem;
  }

  /* 所有元素进一步缩小 */
  .navbar,
  .navbar-logo,
  .navbar-avatar,
  .btn-outline,
  .btn-primary,
  .hero-content h1,
  .hero-list,
  .sidebar-btn,
  .main-publish-btn,
  .core-features,
  .features-carousel,
  .feature-card,
  .feature-icon,
  .fast-build,
  .build-panels,
  .build-panel,
  .build-card,
  .data-analysis,
  .analysis-bg,
  .analysis-card,
  .feature-nav,
  .nav-list,
  .nav-item,
  .nav-icon,
  .team,
  .team img,
  .about,
  .about img,
  .footer,
  .footer-contact,
  .footer-qrcode,
  .footer-qrcode img,
  /* 新增模块内部元素 */
  .visual-demo *,
  .visual-sidebar *,
  .main-topbar *,
  .main-ads *,
  .main-content *,
  .main-data-card *,
  .build-card *,
  .build-panel *,
  .analysis-card *,
  .analysis-bg *,
  .feature-card *,
  .nav-item *,
  .team > div *,
  .about > div *,
  .footer-info * {
    transform: scale(0.8);
    transform-origin: top center;
  }

  /* 保持其他布局结构 */
  .features-carousel {
    width: 100%;
    overflow: hidden;
  }

  .features-list {
    display: flex;
    flex-direction: row;
    gap: 16px;
    padding: 0 16px;
  }

  .build-panels {
    display: flex;
    flex-direction: row;
    gap: 32px;
    justify-content: center;
  }

  .nav-list {
    display: flex;
    flex-direction: row;
    gap: 24px;
    justify-content: center;
  }

  .nav-desc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 32px;
  }

  .team > div,
  .about > div {
    display: flex;
    flex-direction: row;
    gap: 32px;
  }

  .footer-info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 32px;
  }

  /* 调整内边距，保持比例 */
  .navbar,
  .core-features,
  .fast-build,
  .data-analysis,
  .feature-nav,
  .team,
  .about,
  .footer {
    padding: 1.5rem 0.8rem;
  }

  /* 调整字体大小，保持比例 */
  .navbar-logo {
    font-size: 1.5rem;
  }

  .logo-sub {
    font-size: 0.8rem;
  }

  .btn-outline,
  .btn-primary {
    font-size: 0.8rem;
  }

  .hero-content h1 {
    font-size: 1.3rem;
  }

  .hero-list li {
    font-size: 0.8rem;
  }

  .feature-card h3 {
    font-size: 1rem;
  }

  .feature-card p {
    font-size: 0.8rem;
  }

  /* 调整图标和图案大小，保持比例 */
  .feature-icon-circle {
    width: 48px;
    height: 48px;
  }

  .feature-icon-circle img {
    max-width: 32px;
    max-height: 32px;
  }

  .nav-icon img {
    max-width: 32px;
    max-height: 32px;
  }

  /* 调整按钮大小，保持比例 */
  .sidebar-btn {
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
  }

  .main-publish-btn {
    font-size: 0.5rem;
    padding: 0.125rem 0.6875rem;
  }

  /* 调整第一个模块右边图案中的字体大小 */
  .sidebar-title {
    font-size: 0.3125rem;
  }
  
  .sidebar-btn {
    font-size: 0.375rem;
    height: 1rem;
  }
  
  .main-topbar-item {
    height: 0.6875rem;
  }
  
  .ad-item {
    font-size: 0.5rem;
    height: 1.375rem;
  }
  
  .main-row {
    height: 0.625rem;
  }
  
  .main-content-card {
    height: 2.875rem;
  }
  
  .main-publish-btn {
    font-size: 0.5rem;
    padding: 0.125rem 0.6875rem;
  }
}