/* Reset & Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Layout Utilities */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header */
.site-header {
  background-color: #fff;
  padding: 20px 0;
  /* 可选：固定头部 */
  /* position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 10px rgba(0,0,0,0.05); */
}

.site-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.logo img {
  height: 40px; /* Adjust based on logo */
}
.logo-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-left: 5px;
}
.logo-text span {
  display: block;
}
.logo-text span:first-child {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  line-height: 20px;
}
.logo-text span:last-child {
  font-size: 11px;
  line-height: 14px;
  color: #888;
}

.main-nav ul li a {
  color: #ff3333;
  font-weight: bold;
  font-size: 16px;
  border-bottom: 2px solid transparent;
  padding-bottom: 5px;
}

.main-nav ul li a:hover,
.main-nav ul li a.active {
  border-bottom-color: #ff3333;
}

/* Hero Section */
.hero-section {
  background: #fff; /* 或者是很淡的渐变 */
  overflow: hidden;
  height: 440px;
}

.hero-section .container {
  padding: 60px 0 0; /* 图片通常沉底，所以底部padding可能不需要 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  box-sizing: border-box;
  height: 100%;
  background-image: url("../images/home/icon_top_bg.png");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

.hero-content {
  flex: 1;
  min-width: 300px;
  padding-bottom: 40px;
}

.hero-content h1 {
  font-size: 48px;
  color: #333;
  margin-bottom: 20px;
  font-weight: bold;
}

.hero-content .subtitle {
  font-size: 24px;
  color: #666;
  line-height: 1.4;
}

.hero-image {
  flex: 1;
  min-width: 300px;
  display: none;
  justify-content: flex-end;
}

.hero-image img {
  max-height: 500px; /* 限制高度 */
}

/* Features Section */
.feature-section {
  padding: 80px 0 80px;
  position: relative;
}
/* .feature-section::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 25px;
  background: linear-gradient(180deg, #ffffff00 0%, #eee 100%);
  top: -25px;
  z-index: 10;
} */
/* .feature-section2 {
  top: -90px;
}

.feature-section3 {
  top: -180px;
  background-color: #fff;
  z-index: 10;
} */

.feature-section.bg-gray {
  background-color: #f9f9f9;
}

.feature-section .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* 针对 iOS 12 兼容性，不使用 gap，改用 margin */
.feature-image {
  flex: 1;
  min-width: 300px;
  display: flex;
  justify-content: center;
  padding: 20px;
}

.feature-text {
  flex: 1;
  min-width: 300px;
  padding: 20px;
}

.feature-text h2 {
  font-size: 32px;
  margin-bottom: 20px;
  color: #333;
}

.feature-text p {
  font-size: 16px;
  color: #666;
  line-height: 1.8;
}

/* Phone Mockup Styling */
.phone-mockup {
  /* 简单的阴影模拟手机 */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  max-width: 300px;
}

/* Footer */
.site-footer {
  background-color: #2c2c2c;
  color: #999;
  padding: 40px 0;
  font-size: 14px;
  text-align: center;
  position: relative;
}

.footer-info p {
  margin-bottom: 10px;
}

/* Animations */
.js-loaded .fade-in-element {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

.js-loaded .fade-in-element.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive Media Queries */
@media (max-width: 768px) {
  /* Header */
  .site-header {
    padding: 15px 0;
  }

  .logo img {
    height: 35px;
  }

  /* Hero */
  .hero-section {
    padding-top: 40px;
    text-align: center;
  }

  .hero-section .container {
    flex-direction: column;
    background-image: none;
  }

  .hero-content {
    padding-bottom: 30px;
    width: 100%;
  }

  .hero-content h1 {
    font-size: 36px;
  }

  .hero-content .subtitle {
    font-size: 18px;
  }

  .hero-image {
    justify-content: center;
    width: 100%;
    display: flex;
  }

  .hero-image img {
    max-height: 300px;
  }

  /* Features */
  .feature-section {
    padding: 50px 0 50px;
    text-align: center;
  }

  .feature-section .container {
    flex-direction: column;
  }

  /* 
       Mobile Order Reordering:
       Usually image first, then text? Or text first?
       In the design, PC is mixed.
       Let's ensure Image is always top or bottom consistently if desired.
       But standard mobile flow usually follows DOM order unless changed.
       
       For "reverse-mobile" container (Image Left, Text Right on PC):
       DOM: Image, Text.
       Mobile (Column): Image (top), Text (bottom). -> Good.
       
       For standard container (Text Left, Image Right on PC):
       DOM: Text, Image.
       Mobile (Column): Text (top), Image (bottom). -> Good.
       
       So default column layout works fine.
    */

  .feature-text {
    padding: 20px 0 40px; /* Add bottom spacing */
  }

  .feature-text h2 {
    font-size: 28px;
  }

  /* Adjust padding/margins for mobile */
  .container {
    padding: 0 15px;
  }
}