@use '../variables' as *;

// ========================================
// 首页-关于我们Tab样式
// ========================================
.home-about {
  font-size: 0.14rem;
  width: 100%;

  // ==================== Hero 区域 ====================
  &__hero {
    position: relative;
    padding: 0.6rem 0 0.8rem;
    overflow: hidden;
  }

  // 底部居中渐变浅色色块
  &__hero-orb {
    position: absolute;
    bottom: -2.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 8rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(82, 202, 209, 0.15);
    filter: blur(1rem);
    pointer-events: none;
  }



  &__hero-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 12rem;
    margin: 0 auto;
  }

  &__hero-kicker {
    font-size: 0.20rem;
    line-height: 0.27rem;
    font-weight: 450;
    color: $accent;
    margin-bottom: 0.24rem;
  }

  &__hero-title {
    font-size: 0.54rem;
    line-height: 0.72rem;
    font-weight: 630;
    color: #111111;
    margin-top: 0.24rem;
    margin-bottom: 0.24rem;
  }

  &__hero-subtitle {
    font-size: 0.20rem;
    line-height: 0.27rem;
    font-weight: 330;
    color: #64748B;
    margin-bottom: 0.40rem;
  }

  &__hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.84rem;
    height: 0.56rem;
    background: $accent;
    border-radius: 0.16rem;
    border: none;
    font-size: 0.16rem;
    line-height: 0.21rem;
    font-weight: 520;
    color: #FFFFFF;
    cursor: pointer;
    transition: background 0.2s;

    &:hover {
      background: $accent-hover;
    }
  }

  // ==================== 通用 kicker ====================
  &__kicker {
    display: block;
    font-size: 0.14rem;
    line-height: 0.19rem;
    font-weight: 520;
    color: $accent;
    margin-bottom: 0.12rem;
  }

  // ==================== 通用标题 ====================
  &__section-title {
    font-size: 0.48rem;
    line-height: 0.64rem;
    font-weight: 520;
    color: #111111;
    text-align: center;
  }

  &__section-subtitle {
    font-size: 0.20rem;
    line-height: 0.27rem;
    font-weight: 330;
    color: #64748B;
    text-align: center;
    margin-top: 0.16rem;
  }

  // ==================== 产品介绍 ====================
  &__intro {
    padding: 0.80rem 0;
    background: $bg-white;
  }

  &__intro-inner {
    max-width: 12rem;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 0.70rem;
  }

  &__intro-img {
    flex-shrink: 0;
    width: 5.06rem;
    height: 3.68rem;
    background: #F5FAFA;
    border-radius: 0.22rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__intro-img-placeholder {
    width: 100%;
    height: 100%;
  }

  &__intro-text {
    flex: 1;
  }

  &__intro-desc {
    font-size: 0.16rem;
    line-height: 0.24rem;
    font-weight: 380;
    color: #64748B;
    margin-top: 0.16rem;
  }

  // ==================== 功能亮点 ====================
  &__features {
    position: relative;
    padding: 0.80rem 0;
    overflow: hidden;
  }

  &__features-header {
    text-align: center;
    margin-bottom: 0.60rem;
  }

  &__features-grid {
    max-width: 12rem;
    margin: 0 auto;
    display: flex;
    gap: 0.16rem;
    justify-content: center;
  }

  &__feature-card {
    width: 2.68rem;
    height: 2.97rem;
    background: $bg-white;
    box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.06);
    border-radius: 0.16rem;
    padding: 0.24rem 0.24rem;
    box-sizing: border-box;
  }

  &__feature-icon {
    width: 0.58rem;
    height: 0.58rem;
    background: #F4FBFB;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.16rem;
  }

  &__feature-title {
    font-size: 0.18rem;
    line-height: 0.24rem;
    font-weight: 520;
    color: #111111;
    margin-bottom: 0.08rem;
  }

  &__feature-desc {
    font-size: 0.14rem;
    line-height: 0.24rem;
    font-weight: 330;
    color: $text-middle;
  }

  // ==================== 为什么创立 ====================
  &__why {
    padding: 0.80rem 0;
    max-width: 12rem;
    margin: 0 auto;
  }

  &__why-header {
    text-align: center;
    margin-bottom: 0.60rem;
  }

  &__why-content {
    background: $bg-white;
    box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.06);
    border-radius: 0.32rem;
    padding: 0.40rem;
    overflow: hidden;
  }

  &__why-block {
    display: flex;
    align-items: flex-start;
    gap: 0.40rem;
    margin-bottom: 0.40rem;

    &:last-child {
      margin-bottom: 0;
    }

    &--reverse {
    }
  }

  &__why-text {
    flex: 1;

    h3 {
      font-size: 0.24rem;
      line-height: 0.32rem;
      font-weight: 520;
      color: #111111;
      margin-bottom: 0.16rem;
    }

    p {
      font-size: 0.16rem;
      line-height: 0.30rem;
      font-weight: 330;
      color: $text-middle;
      margin-bottom: 0.12rem;
    }
  }

  &__why-sign {
    font-size: 0.16rem;
    line-height: 0.30rem;
    font-weight: 330;
    color: $text-middle;
    text-align: right;
  }

  &__why-img {
    flex-shrink: 0;
    width: 5.44rem;
    height: 2.59rem;
    background: #F5FAFA;
    border-radius: 0.16rem;
  }

  // ==================== 万千毕业生信赖 ====================
  &__trust {
    padding: 0.80rem 0;
    max-width: 12rem;
    margin: 0 auto;
  }

  &__trust-header {
    text-align: center;
    margin-bottom: 0.60rem;
  }

  &__trust-dark-card {
    background: #111111;
    border-radius: 0.16rem;
    padding: 0.28rem 0.40rem;
    margin-bottom: 0.24rem;
    position: relative;
    overflow: hidden;
  }

  &__trust-dark-text {
    max-width: 75%;

    p {
      font-size: 0.16rem;
      line-height: 0.30rem;
      font-weight: 330;
      color: #FFFFFF;
      margin-bottom: 0.10rem;

      &:first-child {
        font-weight: 520;
        margin-bottom: 0.16rem;
      }
    }
  }

  &__trust-dark-logo {
    position: absolute;
    right: 0.40rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.64rem;
    height: 1.64rem;
    opacity: 0.1;
    background: $bg-white;
    border-radius: 50%;
  }

  &__trust-cards {
    display: flex;
    gap: 0.24rem;
    margin-bottom: 0.24rem;
  }

  &__trust-card {
    flex: 1;
    background: $bg-white;
    box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.05);
    border-radius: 0.16rem;
    padding: 0.24rem 0.28rem;

    h4 {
      font-size: 0.18rem;
      line-height: 0.24rem;
      font-weight: 520;
      color: #111111;
      margin-bottom: 0.16rem;
    }

    p {
      font-size: 0.14rem;
      line-height: 0.24rem;
      font-weight: 330;
      color: $text-middle;
    }
  }

  &__trust-summary {
    font-size: 0.24rem;
    line-height: 0.32rem;
    font-weight: 520;
    color: $text-dark;
    text-align: center;
    margin-top: 0.40rem;
  }

  // ==================== 价值观 ====================
  &__values {
    padding: 0.80rem 0;
    max-width: 12rem;
    margin: 0 auto;
  }

  &__values-header {
    text-align: center;
    margin-bottom: 0.60rem;
  }

  &__values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.24rem;
  }

  &__value-card {
    background: #F9FAFB;
    border-radius: 0.24rem;
    padding: 0.32rem;
  }

  &__value-icon {
    margin-bottom: 0.16rem;
  }

  &__value-title {
    font-size: 0.24rem;
    line-height: 0.32rem;
    font-weight: 630;
    color: #111111;
    margin-bottom: 0.08rem;
  }

  &__value-desc {
    font-size: 0.18rem;
    line-height: 0.24rem;
    font-weight: 330;
    color: $text-middle;
  }

  // ==================== 联系我们 ====================
  &__contact {
    padding: 0.80rem 0;
    max-width: 12rem;
    margin: 0 auto;
  }

  &__contact-header {
    text-align: center;
    margin-bottom: 0.60rem;
  }

  &__contact-grid {
    display: flex;
    gap: 0.24rem;
    justify-content: center;
  }

  &__contact-card {
    flex: 1;
    max-width: 3.77rem;
    background: $bg-white;
    box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.06);
    border-radius: 0.16rem;
    padding: 0.24rem;
    display: flex;
    align-items: flex-start;
    gap: 0.16rem;
  }

  &__contact-icon {
    flex-shrink: 0;
    width: 0.58rem;
    height: 0.58rem;
    background: #F4FBFB;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__contact-info {
    h4 {
      font-size: 0.18rem;
      line-height: 0.24rem;
      font-weight: 520;
      color: #111111;
      margin-bottom: 0.04rem;
    }

    p {
      font-size: 0.14rem;
      line-height: 0.24rem;
      font-weight: 330;
      color: $text-middle;
      margin-bottom: 0.08rem;
    }
  }

  &__contact-link {
    font-size: 0.14rem;
    line-height: 0.24rem;
    font-weight: 520;
    color: $accent;
    text-decoration: none;

    &:hover {
      color: $accent-hover;
    }
  }
}
