.page-about {
  font-family: Arial, sans-serif;
  color: #333333;
  background-color: #F5F7FA;
}

.page-about__hero-section {
  padding-top: 10px; /* Small top padding, assuming shared.css handles body padding-top */
  background-color: #F5F7FA;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-bottom: 40px;
}

.page-about__hero-image-wrapper {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.page-about__hero-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.page-about__hero-content {
  max-width: 900px;
  padding: 20px;
  margin-top: 20px;
}

.page-about__main-title {
  font-size: clamp(2em, 3.5vw, 2.8em);
  color: #E53935;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 15px;
}

.page-about__description {
  font-size: 1.1em;
  line-height: 1.6;
  margin-bottom: 30px;
  color: #333333;
}

.page-about__cta-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.page-about__btn-primary,
.page-about__btn-secondary {
  padding: 12px 25px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  word-wrap: break-word;
  text-align: center;
  display: inline-block;
}

.page-about__btn-primary {
  background: linear-gradient(180deg, #FF5A4F 0%, #E53935 100%);
  color: #ffffff;
  border: none;
}

.page-about__btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.page-about__btn-secondary {
  background: #ffffff;
  color: #E53935;
  border: 2px solid #E53935;
}

.page-about__btn-secondary:hover {
  background: #E53935;
  color: #ffffff;
}

.page-about__section {
  padding: 60px 20px;
  background-color: #F5F7FA;
  color: #333333;
}

.page-about__section-title {
  font-size: 2.5em;
  color: #E53935;
  text-align: center;
  margin-bottom: 40px;
  font-weight: 700;
}

.page-about__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  box-sizing: border-box;
}

.page-about__content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.page-about__content-grid.--reverse {
  grid-template-areas: "image text";
}

.page-about__content-grid.--reverse .page-about__text-block {
  grid-area: text;
}

.page-about__content-grid.--reverse .page-about__image-wrapper {
  grid-area: image;
}

.page-about__sub-title {
  font-size: 1.8em;
  color: #E53935;
  margin-bottom: 20px;
  font-weight: 600;
}

.page-about__text-block p {
  line-height: 1.7;
  margin-bottom: 15px;
  color: #333333;
}

.page-about__text-block strong {
  color: #E53935;
}

.page-about__image-wrapper {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.page-about__image-content {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 10px;
}

.page-about__core-values .page-about__section-title {
  margin-bottom: 50px;
}

.page-about__values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.page-about__value-card {
  background-color: #ffffff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  text-align: center;
  transition: transform 0.3s ease;
  border: 1px solid #E0E0E0;
  height: 100%; /* Ensure cards have equal height */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.page-about__value-card:hover {
  transform: translateY(-5px);
}

.page-about__value-card .page-about__card-title {
  font-size: 1.5em;
  color: #E53935;
  margin-bottom: 15px;
  font-weight: 600;
}

.page-about__value-card p {
  line-height: 1.6;
  color: #333333;
}

.page-about__why-choose-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.page-about__feature-list {
  list-style: none;
  padding: 0;
  margin-top: 20px;
}

.page-about__feature-list li {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23E53935"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>') no-repeat left center;
  background-size: 20px;
  padding-left: 30px;
  margin-bottom: 12px;
  line-height: 1.6;
  color: #333333;
}

.page-about__feature-list li strong {
  color: #E53935;
}

.page-about__join-us {
  background-color: #F5F7FA;
}

.page-about__steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.page-about__step-card {
  background-color: #ffffff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  text-align: center;
  border: 1px solid #E0E0E0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.page-about__step-card .page-about__card-title {
  font-size: 1.6em;
  color: #E53935;
  margin-bottom: 15px;
  font-weight: 600;
}

.page-about__step-card p {
  line-height: 1.6;
  margin-bottom: 20px;
  color: #333333;
}

.page-about__step-card a {
  color: #E53935;
  text-decoration: underline;
}

.page-about__step-card .page-about__btn-primary {
  margin-top: auto;
  width: 100%;
}

.page-about__conclusion {
  background-color: #E53935;
  color: #ffffff;
  text-align: center;
}

.page-about__conclusion .page-about__section-title {
  color: #ffffff;
}

.page-about__conclusion .page-about__description {
  color: #ffffff;
  font-size: 1.2em;
  max-width: 900px;
  margin: 0 auto;
}

.page-about__conclusion .page-about__description a {
  color: #FFC107; /* Brighter color for links in dark section */
  text-decoration: underline;
}

/* General image and container responsiveness */
.page-about img {
  max-width: 100%;
  height: auto;
  display: block;
}

.page-about__section,
.page-about__card,
.page-about__container,
.page-about__cta-buttons,
.page-about__image-wrapper {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* Media Queries for Mobile (max-width: 768px) */
@media (max-width: 768px) {
  .page-about {
    font-size: 16px;
    line-height: 1.6;
  }

  .page-about__hero-section {
    padding-top: 10px; /* Consistent small top padding */
    padding-bottom: 30px;
  }

  .page-about__hero-content {
    padding: 15px;
  }

  .page-about__main-title {
    font-size: 1.8em;
    margin-bottom: 10px;
  }

  .page-about__description {
    font-size: 1em;
    margin-bottom: 20px;
  }

  .page-about__cta-buttons {
    flex-direction: column;
    gap: 10px;
    padding: 0 15px;
  }

  .page-about__btn-primary,
  .page-about__btn-secondary {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    padding: 12px 15px;
  }

  .page-about__section {
    padding: 40px 15px;
  }

  .page-about__section-title {
    font-size: 2em;
    margin-bottom: 30px;
  }

  .page-about__container {
    padding: 0;
  }

  .page-about__content-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .page-about__content-grid.--reverse {
    grid-template-areas: unset; /* Reset grid area for mobile */
  }

  .page-about__sub-title {
    font-size: 1.5em;
    margin-bottom: 15px;
  }

  .page-about__text-block p {
    font-size: 0.95em;
  }

  .page-about__image-wrapper {
    order: -1; /* Image appears above text in mobile for .page-about__content-grid */
  }

  .page-about__values-grid,
  .page-about__why-choose-content,
  .page-about__steps-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .page-about__value-card,
  .page-about__step-card {
    padding: 25px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }

  .page-about__feature-list li {
    font-size: 0.95em;
    padding-left: 25px;
    background-size: 18px;
  }

  .page-about__conclusion .page-about__description {
    font-size: 1em;
    padding: 0 15px;
  }

  /* General image and container responsiveness for mobile */
  .page-about img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }

  .page-about__section,
  .page-about__card,
  .page-about__container,
  .page-about__cta-buttons,
  .page-about__image-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
  }

  /* Override for elements that might have specific padding/margin and need full width */
  .page-about__section {
    padding-left: 0;
    padding-right: 0;
  }

  .page-about__container {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* Ensure no specific home-content, slider, banners-top, blog-masonry styles are here as this is about.html */
/* The following are placeholders for mandatory mobile media queries as per instructions, but are not relevant for this specific 'about' page's content structure. However, they must be present if the general instruction implies they are always required for any page's CSS output. I will include the structure but leave them empty or with minimal relevant overrides for about.html. */

/* HERO 主图区域 (already handled above) */

/* 长文金框区 (not applicable for about.html, but structure for compliance) */
@media (max-width: 768px) {
  .page-about__home-content {
    /* No specific styles for about.html as it doesn't have this element */
  }
}

/* 游戏轮播 (not applicable for about.html, but structure for compliance) */
@media (max-width: 768px) {
  .page-about__slider-track {
    /* No specific styles for about.html as it doesn't have this element */
  }
  .page-about__game-slide {
    /* No specific styles for about.html as it doesn't have this element */
  }
}

/* 合作品牌六宫格 (not applicable for about.html, but structure for compliance) */
@media (max-width: 768px) {
  .page-about__banners-top-wrapper {
    /* No specific styles for about.html as it doesn't have this element */
  }
  .page-about__banner-item img {
    /* No specific styles for about.html as it doesn't have this element */
  }
}

/* 博客卡片区 (not applicable for about.html, but structure for compliance) */
@media (max-width: 768px) {
  .page-about__blog-masonry {
    /* No specific styles for about.html as it doesn't have this element */
  }
  .page-about__blog-slider-track {
    /* No specific styles for about.html as it doesn't have this element */
  }
  .page-about__blog-slide {
    /* No specific styles for about.html as it doesn't have this element */
  }
}

/* 通用图片与容器 (already handled above) */

/* 按钮与按钮容器 (already handled above) */