@use '../variables' as *;

// ========================================
// Home 首页样式
// 注意：项目 html { font-size: 100px }，即 1rem = 100px
// 所有文字元素必须显式设置 line-height，否则浏览器默认 normal（约 1.2em）
// 在 rem 体系下会导致行高异常
// ========================================
.home-page {
  width: 100%;
  overflow-x: hidden;
  background: #fff;
  color: #111;
  font-family: system-ui, -apple-system, sans-serif;
  // 全局基础行高重置，防止 1rem=100px 导致子元素继承异常行高
  line-height: 1.5;
  font-size: 0.14rem;

  // ==================== 顶部导航栏 ====================
  .home-nav {
    position: sticky;
    top: 0;
    z-index: 50;

    // 导航内容容器 — 居中 12rem 宽
    &__inner {
      width: 12.40rem;
      margin: 0 auto;
      height: 0.72rem;
      padding: 0.2rem;
      box-sizing: border-box;
      border-radius: 0.24rem;
      display: flex;
      align-items: center;
      justify-content: space-between;

      &--scorlled {
        position: fixed;
        top: 0.2rem;
        left: 50%;
        transform: translateX(-50%);
        z-index: 100;
        background: #FFFFFF;
        box-shadow: 0 0 0 .5px rgba(0, 0, 0, .04), 0 0 32px 0 rgba(10, 20, 21, .06);
      }
    }

    // Logo 区域
    &__logo {
      display: flex;
      align-items: center;
    }

    // Logo 文字
    &__logo-text {
      font-size: 0.22rem;
      font-weight: 700;
      line-height: 0.34rem;
      color: $accent;
      letter-spacing: -0.01rem;
    }

    // Logo 图片
    &__logo-img {
      width: 1.32rem;
      height: 0.34rem;
      display: block;
    }

    // 导航右侧 CTA 按钮
    &__btn {
      padding: 0.1rem 0.32rem;
      border-radius: 0.16rem;
      background: #111;
      color: #fff;
      font-size: 0.14rem;
      line-height: 0.2rem;
      font-weight: 600;
      border: none;
      cursor: pointer;
      transition: background 0.2s;
      &:hover { }
    }
  }

  // ==================== Hero 主视觉区 ====================
  .home-hero {
    background: #fff;
    position: relative;
    overflow: hidden;
    font-size: 0.14rem;
    background: radial-gradient(34.95% 29.57% at 60.26041666666667% 0%, rgba(206, 240, 242, 1) 0%, rgba(255, 255, 255, 1) 100%);
    // 背景色块 — 顶部
    &__orb {
      position: absolute;
      border-radius: 3.5rem;
      filter: blur(1.2rem);
      pointer-events: none;
      z-index: 0;
      background: rgba(82, 202, 209, 0.3);

      &--top {
        left: 40%;
        transform: translateX(-30%) rotate(3deg);
        top: -4.9rem;
        width: 13.6rem;
        height: 6rem;
        border-radius: 50%;
        filter: blur(0.5rem);
        background: rgba(82, 202, 209, 0.24);
        opacity: 0;
      }

      // 背景色块 — 底部
      &--bottom {
        left: 40%;
        transform: translateX(-50%);
        bottom: -1.6rem;
        width: 4rem;
        height: 2rem;
      }
    }

    // Hero 内容容器 — 左右两栏布局
    &__inner {
      position: relative;
      z-index: 1;
      width: 12rem;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.2rem 0 1.2rem;
      gap: 0.5rem;
    }

    // 左侧文字区
    &__left {
      flex-shrink: 0;
      //width: 5.8rem;
    }

    // 主标题
    &__title {
      font-size: 0.48rem;
      font-weight: 600;
      line-height: 0.61rem;
      letter-spacing: 0.03rem;
      color: #111;
      margin: 0;
      >span{
        width: 1.51rem;
      }
    }

    // 副标题描述
    &__desc {
      font-size: 0.16rem;
      line-height: 0.2rem;
      color: #9ca3af;
      margin-top: 0.1rem;
    }

    // 免费体验按钮
    &__cta {
      margin-top: 0.69rem;
      width: 1.84rem;
      height: 0.52rem;
      border-radius: 0.16rem;
      background: $accent;
      color: #fff;
      font-size: 0.15rem;
      font-weight: 600;
      border: none;
      cursor: pointer;
      box-shadow: 0 25px 50px -12px rgba(82, 202, 209, 0.2);
      transition: background 0.2s;
    }

    // 右侧卡片区
    &__right {
      flex-shrink: 0;
      //box-shadow: 0px 0px 15.45px  rgba(82, 202, 209, 0.1);
      border-radius: 0.16rem;
      background: #FCFEFE;
    }

    &__right-top{
      height: 0.5rem;
      background: #fff;
      border-radius: 0.16rem;
      display: flex;
      align-items: center;
      gap: 0.06rem;
      padding-left: 0.3rem;
      >div{
        height: 0.08rem;
        width: 0.08rem;
        border-radius: 50%;
        background: #52CAD1;
      }
    }

    // 视频播放器 — 16:9 比例，圆角，无控件
    &__video {
      width: 5.16rem;
      height: 2.90rem;
      //aspect-ratio: 16 / 9;
      border-radius: 0.16rem;
      object-fit: cover;
      display: block;
    }

    // 模拟匹配卡片容器
    &__card {
      width: 6.5rem;
      border-radius: 0.4rem;
      background: #f8fffe;
      box-shadow: 0 0 20px rgba(82, 202, 209, 0.1);
      overflow: hidden;
    }

    // 窗口装饰圆点
    &__card-dots {
      display: flex;
      gap: 0.08rem;
      padding: 0.27rem 0.4rem;
      .dot {
        width: 0.1rem;
        height: 0.1rem;
        border-radius: 50%;
        &--red { background: #f87171; }
        &--yellow { background: #fbbf24; }
        &--green { background: #34d399; }
      }
    }

    // 卡片内容区
    &__card-body {
      padding: 0.3rem 0.4rem 0.4rem;
      background: linear-gradient(135deg, rgba(82, 202, 209, 0.03), rgba(82, 202, 209, 0.08));
    }

    // 用户信息行
    &__card-user {
      display: flex;
      align-items: center;
      gap: 0.16rem;
      margin-bottom: 0.24rem;
    }

    // 用户头像
    &__card-avatar {
      width: 0.64rem;
      height: 0.64rem;
      border-radius: 50%;
      background: linear-gradient(135deg, $accent, #a7f3d0);
    }

    // 用户名称
    &__card-info {
      h4 {
        font-size: 0.2rem;
        line-height: 0.28rem;
        font-weight: 400;
        margin: 0;
      }
    }

    // 技能标签
    &__card-tags {
      display: flex;
      gap: 0.08rem;
      margin-top: 0.04rem;
      .tag {
        font-size: 0.1rem;
        line-height: 0.15rem;
        background: rgba(82, 202, 209, 0.15);
        color: $accent;
        padding: 0.02rem 0.08rem;
        border-radius: 0.04rem;
      }
    }

    // 匹配度徽章
    &__card-match {
      margin-left: auto;
      background: $accent;
      color: #fff;
      padding: 0.12rem 0.16rem;
      border-radius: 9999px;
      font-size: 0.14rem;
      line-height: 0.2rem;
      font-weight: 600;
    }

    // 骨架线条 — 纵向排列用 block 即可，无需 flex-direction: column
    &__card-lines {
      .line-full {
        height: 0.08rem;
        background: #e5e7eb;
        border-radius: 9999px;
      }
      .line-3q {
        height: 0.08rem;
        width: 75%;
        background: #e5e7eb;
        border-radius: 9999px;
        margin-top: 0.12rem;
      }
    }

    // 匹配结果提示条
    &__card-result {
      margin-top: 0.32rem;
      background: $accent;
      color: #fff;
      text-align: center;
      padding: 0.16rem;
      border-radius: 0.16rem;
      font-size: 0.16rem;
      line-height: 0.24rem;
      font-weight: 600;
    }
  }

  // ==================== 数据统计区 ====================
  .home-stats {
    padding: 1rem 0;
    background: #fff;

    // 统计区内容容器
    &__inner {
      width: 12rem;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    // 标题区
    &__header {
      h2 {
        font-size: 0.48rem;
        font-weight: 600;
        letter-spacing: -0.015rem;
        line-height: 0.63rem;
      }
    }

    // 标题下方装饰线
    &__divider {
      width: 0.8rem;
      height: 0.06rem;
      border-radius: 9999px;
      background: #52CAD1;
      margin-top: 0.53rem;
    }

    // 三个统计卡片横向排列
    &__cards {
      display: flex;
      gap: 0.24rem;
    }
  }

  // 单个统计卡片
  .stat-card {
    background: #fff;
    border-radius: 0.16rem;
    width: 1.9rem;
    height: 1.9rem;
    text-align: center;
    padding-top:0.38rem;
    box-shadow: 0 0.06rem 0.2rem rgba(0, 0, 0, 0.05);

    // 大数字
    &__num {
      font-size: 0.38rem;
      font-weight: 900;
      color: #2A8186;
      line-height: 0.63rem;
    }

    // 描述文字
    &__label {
      font-size: 0.13rem;
      line-height: 0.22rem;
      color: #8D9399;
      margin-top: 0.12rem;
      letter-spacing: 0.0035rem;
    }
  }

  // ==================== 岗位展示区 ====================
  .home-jobs-showcase {
    padding: 0.85rem 0 0.7rem 0;
    position: relative;
    overflow: hidden;
    background: #fff;

    // 背景色块 — 定位实现
    &__orb {
      position: absolute;
      pointer-events: none;
      z-index: 0;

      // 顶部小块 — 类似 hero 底部色块
      &--top {
        left: 50%;
        transform: translateX(-50%);
        top: -3rem;
        width: 5rem;
        height: 2.5rem;
        border-radius: 3.5rem;
        background: rgba(82, 202, 209, 0.3);
        filter: blur(1.2rem);
      }

      // 底部全宽 — 从底部向上渐变透明
      &--bottom {
        left: 0;
        bottom: 0;
        width: 100%;
        height: 7rem;
        background: linear-gradient(to top, rgba(82, 202, 209, 0.08), transparent);
      }
    }

    // 内容容器
    &__inner {
      position: relative;
      z-index: 1;
      width: 12rem;
      margin: 0 auto;
      text-align: center;

      h2 {
        font-size: 0.48rem;
        font-weight: 600;
        line-height: 0.576rem;
      }
    }

    // 副标题
    &__sub {
      font-size: 0.15rem;
      line-height: 0.28rem;
      color: #999;
      margin-top: 0.19rem;
    }

    // 玻璃态展示盒子
    &__box {
      margin-top: 0.87rem;
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid rgba(255, 255, 255, 0.9);
      box-shadow: 0 10px 40px rgba(82, 202, 209, 0.12);
      backdrop-filter: blur(100px);
      border-radius: 0.1rem;
      padding: 0.64rem 0;
    }

    // 岗位数量统计 — 横向排列
    &__stats {
      display: flex;
      justify-content: center;
      gap: 2rem;
      margin-bottom: 0.6rem;
    }

    // 岗位滚动卡片容器 — 无缝轮播
    &__scroll {
      overflow: hidden;

      .ticker-track {
        display: flex;
        gap: 0.30rem;
        width: max-content;
        animation: ticker-scroll 20s linear infinite;
      }
    }
  }

  // 岗位数量统计项
  .showcase-stat {
    text-align: center;
    &__num {
      font-size: 0.40rem;
      line-height: 0.6rem;
      font-weight: 900;
      color: #2A8186;
      .accent { color: #2A8186; }
    }
    &__label {
      font-size: 0.14rem;
      line-height: 0.28rem;
      color: #8D9399;
      margin-top: 0.08rem;
    }
  }

  // 单个岗位滚动卡片
  .job-ticker {
    flex-shrink: 0;
    background: #12383A;
    backdrop-filter: blur(36px);
    border-radius: 0.12rem;
    padding: 0.2rem 0.24rem;
    min-width: 2.6rem;
    text-align: left;

    // 公司名 + 时间
    &__company {
      display: block;
      font-size: 0.16rem;
      line-height: 0.2rem;
      font-weight: 600;
      color: $accent;
    }

    // 岗位名称
    &__title {
      display: block;
      font-size: 0.16rem;
      line-height: 0.24rem;
      color: #fff;
      margin-top: 0.04rem;
    }
  }

  // ==================== 功能介绍区（通用样式） ====================
  .home-feature {
    padding: 1rem 0;

    // 内容容器 — 左右两栏
    &__inner {
      width: 12rem;
      margin: 0 auto;
      display: flex;
      align-items: center;
      gap: 0.8rem;
    }

    // 文字描述区
    &__text {
      flex: 1;
      min-width: 0;

      h2 {
        font-size: 0.34rem;
        font-weight: 600;
        line-height: 0.43rem;
        letter-spacing: 0.02rem;
        color: #111;
        margin: 0;
      }

      p {
        font-size: 0.14rem;
        line-height: 0.2rem;
        color: #999;
        margin-top: 0.16rem;
      }
    }

    // 深色圆角按钮（带图标）
    &__btn {
      margin-top: 0.73rem;
      display: inline-flex;
      align-items: center;
      gap: 0.12rem;
      padding: 0 0.22rem;
      border-radius: 0.12rem;
      background: $accent;
      color: #fff;
      font-size: 0.12rem;
      height: 0.42rem;
      line-height: 0.42rem;
      font-weight: 600;
      border: none;
      cursor: pointer;
      transition: background 0.2s;
      &:hover {
        //background: $btn-dark-hover;
        //background: $btn-dark;
      }
      svg {
        flex-shrink: 0;
        color: #fff;
        font-size: 0.12rem;
      }
    }

    // 视觉展示区（右侧/左侧）
    &__visual {
      flex: 1;
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(136.66deg, #E8F8F9 0%, #FBFDF7 100%);
      border-radius: 0.16rem;
      padding: 0.48rem;
      min-height: 3.87rem;
    }

    // 反向布局 — 图在左文在右
    &--reverse {
      .home-feature__inner {
        flex-direction: row-reverse;
      }
    }
  }

  // 无缝轮播关键帧 — 滚动半程（第一组内容宽度）
  @keyframes ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  // ---- 功能1：匹配卡片 ----
  .feature-match-card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(60px);
    border-radius: 0.32rem;
    padding: 0.4rem;
    width: 100%;
    max-width: 5rem;

    // 用户信息行
    &__header {
      display: flex;
      align-items: center;
      gap: 0.16rem;
      margin-bottom: 0.24rem;
    }

    // 头像
    &__avatar {
      width: 0.64rem;
      height: 0.64rem;
      border-radius: 50%;
      //background: linear-gradient(135deg, $accent, #a7f3d0);
      flex-shrink: 0;
    }

    // 用户名
    &__info {
      h4 {
        font-size: 0.2rem;
        line-height: 0.28rem;
        font-weight: 400;
        margin: 0;
      }
    }

    // 技能标签
    &__tags {
      display: flex;
      gap: 0.08rem;
      margin-top: 0.04rem;
      span {
        font-size: 0.1rem;
        line-height: 0.15rem;
        background: rgba(82, 202, 209, 0.2);
        color: $accent;
        padding: 0.02rem 0.08rem;
        border-radius: 0.04rem;
      }
    }

    // 匹配度分数
    &__score {
      margin-left: auto;
      background: $accent;
      color: #fff;
      padding: 0.12rem 0.11rem;
      border-radius: 9999px;
      font-size: 0.14rem;
      line-height: 0.2rem;
    }

    // 骨架进度条 — block 自然纵排，无需 flex-direction: column
    &__bars {
      .bar {
        height: 0.08rem;
        border-radius: 9999px;
        background: #F3F4F6;
        &--full { width: 100%; }
        &--3q { width: 75%; margin-top: 0.1rem; }
      }
    }

    // 匹配结果
    &__result {
      margin-top: 0.32rem;
      background: $accent;
      color: #fff;
      text-align: center;
      padding: 0.15rem;
      border-radius: 0.16rem;
      font-size: 0.16rem;
      line-height: 0.24rem;
    }
  }

  // ---- 功能2：自动投递卡片 ----
  .feature-apply-card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(60px);
    border-radius: 0.32rem;
    padding: 0.32rem;
    width: 100%;
    max-width: 5.6rem;
    //transform: rotate(-2deg);

    // 顶部状态栏
    &__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #f3f4f6;
      padding-bottom: 0.16rem;
      margin-bottom: 0.24rem;
    }

    // 状态文字
    &__status {
      font-size: 0.14rem;
      line-height: 0.2rem;
      color: #9ca3af;
    }

    // 窗口装饰圆点
    &__dots {
      display: flex;
      gap: 0.04rem;
      .dot {
        width: 0.08rem;
        height: 0.08rem;
        border-radius: 50%;
        &--red { background: #f87171; }
        &--yellow { background: #fbbf24; }
        &--green { background: #34d399; }
      }
    }

    // 投递列表 — 子项是 block 级，自然纵排
    &__list {
      .apply-item + .apply-item {
        margin-top: 0.16rem;
      }
    }
  }

  // 单个投递项
  .apply-item {
    display: flex;
    align-items: center;
    gap: 0.16rem;
    background: rgba(255, 255, 255, 0.5);
    padding: 0.16rem;
    border-radius: 0.16rem;
    border: 1px solid rgba(255, 255, 255, 1);

    // 图标
    &__icon {
      width: 0.4rem;
      height: 0.4rem;
      background: $accent;
      border-radius: 0.12rem;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 0.18rem;
      line-height: 1;
      flex-shrink: 0;

      // 脉冲动画
      &--pulse {
        animation: pulse 2s infinite;
      }
    }

    // 投递标题
    &__title {
      font-size: 0.14rem;
      line-height: 0.2rem;
      color: #111;
      margin: 0;
    }

    // 投递副标题
    &__sub {
      font-size: 0.12rem;
      line-height: 0.16rem;
      color: #9ca3af;
      margin: 0.02rem 0 0;
    }
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
  }

  // ---- 功能3：简历文档模拟卡片 ----
  .feature-resume-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    // 简历文档
    &__doc--border {
      background: #F9FDFD;
      padding: 0.2rem;
      border-radius: 0.25rem;
      border: 0.62px solid #FFFFFF;
      box-shadow: 0 0.15rem 0.31rem -0.074rem rgba(0, 0, 0, 0.3);
    }
    &__doc {
      width: 2rem;
      aspect-ratio: 3/4;
      background: #fff;
      border: 1.2px dashed #e5e7eb;
      border-radius: 0.16rem;
      padding: 0.16rem;

    }

    // ATS 优化徽章
    &__badge {
      position: absolute;
      bottom: -0.1rem;
      left: -0.12rem;
      background: #111111;
      color: #fff;
      padding: 0.16rem 0.2rem;
      border-radius: 0.15rem;
      display: flex;
      align-items: center;
      gap: 0.08rem;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

      span {
        font-size: 0.09rem;
        line-height: 0.09rem;
        letter-spacing: 0.01rem;
      }
    }
  }

  // 简历文档头部
  .doc-header {
    display: flex;
    gap: 0.12rem;
    align-items: center;
    margin-bottom: 0.2rem;
  }

  // 简历头像占位
  .doc-avatar {
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 0.05rem;
    background: #f3f4f6;
    flex-shrink: 0;
  }

  // 简历文字行占位 — block 自然纵排
  .doc-lines {
    flex: 1;
  }

  .doc-line {
    height: 0.05rem;
    background: #e5e7eb;
    border-radius: 0.02rem;
    &--half { width: 50%; }
    &--third { width: 33%; margin-top: 0.05rem;background: #F3F4F6 }
  }

  // 简历内容条占位 — block 自然纵排
  .doc-bar {
    height: 0.075rem;
    border-radius: 0.025rem;
    &--1 { width: 100%; background: rgba(82, 202, 209, 0.3); }
    &--2 { width: 100%; background: rgba(82, 202, 209, 0.2); margin-top: 0.1rem; }
    &--3 { width: 83%; background: rgba(82, 202, 209, 0.1); margin-top: 0.1rem; }
  }

  // ---- 功能4：内推人脉网格 ----
  .referral-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.16rem;
    width: 100%;
    max-width: 3.5rem;
  }

  // 单个内推卡片
  .referral-card {
    background: rgba(255, 255, 255, 0.9);
    border: 0.8px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.03);
    backdrop-filter: blur(56px);
    border-radius: 0.32rem;
    padding: 0.2rem;
    font-size: 0.14rem;

    // 奇数列偏移效果
    &--offset {
      transform: translateY(0.25rem);
    }

    // 公司首字母图标
    &__icon {
      width: 0.32rem;
      height: 0.32rem;
      border-radius: 0.12rem;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 0.13rem;
      line-height: 1;
      font-weight: 900;
      margin-bottom: 0.12rem;
    }

    // 公司名
    &__company {
      font-size: 0.1rem;
      line-height: 0.125rem;
      color: #9ca3af;
      margin: 0;
    }

    // 岗位名
    &__role {
      font-size: 0.11rem;
      line-height: 0.156rem;
      font-weight: 500;
      color: #111;
      margin: 0.03rem 0 0;
    }

    // 内推码标签
    &__code {
      display: inline-block;
      margin-top: 0.12rem;
      font-size: 0.08rem;
      line-height: 0.117rem;
      background: rgba(82, 202, 209, 0.1);
      color: $accent;
      padding: 0.015rem 0.06rem;
      border-radius: 9999px;
    }
  }

  // ---- 功能5：AI 对话模拟 ----
  .feature-ai-chat {
    width: 100%;
    max-width: 5rem;
    // 气泡纵向排列 — 子元素是 block 级 div，自然纵排
    .ai-bubble + .ai-bubble {
      margin-top: 0.22rem;
    }
  }

  // 对话气泡
  .ai-bubble {
    padding: 0.22rem;
    font-size: 0.13rem;
    line-height: 0.21rem;
    max-width: 80%;

    // 机器人气泡
    &--bot {
      background: rgba(255, 255, 255, 0.9);
      border: 0.9px solid rgba(255, 255, 255, 0.5);
      box-shadow: 0 18px 46px rgba(0, 0, 0, 0.03);
      backdrop-filter: blur(66px);
      border-radius: 0.16rem;
      border-top-left-radius: 0;
      color: #111;
    }

    // 用户气泡
    &--user {
      background: $accent;
      color: #fff;
      border-radius: 0.16rem;
      border-top-right-radius: 0;
      margin-left: auto;
      box-shadow: 0 4px 14px rgba(82, 202, 209, 0.2);
    }

    // 气泡内标题
    &__title {
      font-weight: 600;
      margin: 0 0 0.12rem;
      line-height: 0.18rem;
    }

    // 面试标签网格
    &__tags {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.1rem;

      span {
        background: rgba(255, 255, 255, 0.5);
        border: 0.9px solid rgba(255, 255, 255, 0.4);
        border-radius: 0.16rem;
        padding: 0.1rem 0.12rem;
        font-size: 0.11rem;
        line-height: 0.147rem;
        color: #111;
      }
    }
  }

  // ==================== 用户评价区 ====================
  .home-testimonials {
    position: relative;

    // 底层背景色块 — 左上角
    &__orb {
      position: absolute;
      border-radius: 3.5rem;
      filter: blur(1.2rem);
      pointer-events: none;
      z-index: 0;

      &--left {
        left: -0.11rem;
        top: 0.6rem;
        width: 5.95rem;
        height: 5.95rem;
        background: #52CAD1;
      }

      // 底层背景色块 — 右下角
      &--right {
        right: -0.5rem;
        bottom: 0.5rem;
        width: 6rem;
        height: 6rem;
        background: #6DE5B6;
      }
    }

    // 内容层白色容器 — 半透明白底透出色块
    &__container {
      position: relative;
      z-index: 1;
      background: rgba(255, 255, 255, 0.8);
      border-radius: 1rem;
      backdrop-filter: blur(100px);
      padding: 1.0rem  0.05rem;
      box-shadow: inset 0 0 0.9rem rgba(255, 255, 255, 0.5);
    }

    // 标题区
    &__header {
      text-align: center;
      margin-bottom: 0.8rem;

      h2 {
        font-size: 0.38rem;
        line-height: 0.48rem;
        font-weight: 600;
        letter-spacing: -0.012rem;
        color: #111;
      }

      p {
        font-size: 0.15rem;
        line-height: 0.24rem;
        color: #9ca3af;
        letter-spacing: 0.0rem;
        text-transform: uppercase;
        margin-top: 0.14rem;
      }
    }

    // 评价卡片横向排列
    &__cards {
      display: flex;
      gap: 0.24rem;
      width: 12rem;
      margin: 0 auto;
      justify-content: space-between;
      margin-bottom: 0.48rem;
    }

    // 创始人引言深色卡片
    &__founder {
      width: 12rem;
      background: #111;
      border-radius: 0.16rem;
      padding: 0.36rem 0.40rem;
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
      margin: 0 auto;
    }

    // 创始人装饰圆环 SVG
    &__founder-decor {
      position: absolute;
      right: -0.6rem;
      bottom: -4.6rem;
      transform: translateY(-50%);
      width: 4.55rem;
      height: 4.55rem;
      pointer-events: none;
    }

    // 创始人内容区
    &__founder-content {
      display: flex;
      align-items: center;
      gap: 0.48rem;
      position: relative;
      z-index: 1;
      width: 100%;
    }

    // 创始人头像
    &__founder-img {
      width: 1.28rem;
      height: 1.28rem;
      border-radius: 0.24rem;
      object-fit: cover;
      flex-shrink: 0;
    }

    // 创始人文字区
    &__founder-text {
      flex: 1;

      blockquote {
        font-size: 0.20rem;
        line-height: 0.34rem;
        color: #fff;
        margin: 0;
      }

      cite {
        display: block;
        margin-top: 0.24rem;
        font-style: normal;
        line-height: 0.28rem;

        .cite-name {
          font-size: 0.2rem;
          color: $accent;
          font-weight: 500;
        }

        .cite-role {
          font-size: 0.14rem;
          color: #999;
          margin-left: 0.16rem;
        }
      }
    }

    // 分页小圆点
    &__dots {
      display: flex;
      justify-content: center;
      gap: 0.1rem;
      margin-top: 0.4rem;
    }

    &__dot {
      width: 0.12rem;
      height: 0.12rem;
      border-radius: 50%;
      background: #111;
      opacity: 0.3;
      cursor: pointer;
      transition: opacity 0.3s;

      &--active {
        opacity: 1;
      }
    }
  }

  // 单个评价卡片
  .testimonial-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    max-width: 3.71rem;
    background: #fff;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
    border-radius: 0.16rem;
    padding: 0.3rem;
    position: relative;

    // 引号装饰
    &__quote {
      position: absolute;
      right: 0.3rem;
      bottom: 0.3rem;
      opacity: 0.3;
    }

    // 评价文字
    &__text {
      font-size: 0.16rem;
      line-height: 0.26rem;
      color: #4b5563;
      margin: 0;
    }

    // 作者信息行
    &__author {
      display: flex;
      align-items: center;
      gap: 0.16rem;
      margin-top: 0.16rem;
    }

    // 作者头像
    &__avatar {
      width: 0.48rem;
      height: 0.48rem;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
    }

    // 作者信息容器
    &__info {
      min-width: 0;
    }

    // 作者姓名
    &__name {
      font-size: 0.16rem;
      line-height: 0.24rem;
      font-weight: 600;
      color: #111;
      margin: 0;
    }

    // 学校
    &__school {
      font-size: 0.12rem;
      line-height: 0.16rem;
      color: #9ca3af;
      margin: 0;
    }
  }

  // ==================== 岗位搜索入口 ====================
  .home-job-search {
    padding-bottom: 0.8rem;

    // 内容容器
    &__inner {
      width: 12rem;
      margin: 0 auto;

      h3 {
        font-size: 0.3rem;
        line-height: 0.36rem;
        font-weight: 600;
        text-align: center;
        margin-bottom: 0.6rem;
      }
    }

    // 筛选条件横向排列
    &__filters {
      display: flex;
      gap: 0.60rem;
      justify-content: center;
      align-items: center;
    }
  }

  // 筛选下拉框
  .filter-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 2.35rem;
    height: 0.48rem;
    border-radius: 0.24rem;
    border: 1px solid #e5e7eb;
    padding: 0 0.2rem;
    cursor: pointer;

    span {
      font-size: 0.16rem;
      line-height: 0.24rem;
      color: rgba(0, 0, 0, 0.45);
    }

    svg { color: #9ca3af; }
  }

  // 搜索按钮
  .filter-btn {
    width: 1.84rem;
    height: 0.56rem;
    padding: 0 0.4rem;
    border-radius: 0.16rem;
    background: #111;
    color: #fff;
    font-size: 0.16rem;
    line-height: 0.26rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
    &:hover {  }
  }

  // ==================== 常见问题（FAQ） ====================
  .home-faq {
    padding: 1rem 0;

    // 内容容器
    &__inner {
      width: 12rem;
      margin: 0 auto;
    }

    // 标题区
    &__header {
      text-align: center;
      margin-bottom: 0.6rem;

      h2 {
        font-size: 0.48rem;
        line-height: 0.48rem;
        font-weight: 600;
      }

      p {
        font-size: 0.16rem;
        line-height: 0.24rem;
        color: #9ca3af;
        margin-top: 0.1rem;
      }
    }

    // FAQ 列表 — 子项是 block 级 div，自然纵排，用 margin 间距
    &__list {
      max-width: 8.96rem;
      margin: 0 auto;

      .faq-item + .faq-item {
        margin-top: 0.16rem;
      }
    }
  }

  // 单个 FAQ 项
  .faq-item {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    border-radius: 0.24rem;
    cursor: pointer;
    transition: all 0.3s;
    overflow: hidden;

    // 问题行
    &__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.3rem 0.24rem;
    }

    // 问题文字
    &__question {
      font-size: 0.2rem;
      line-height: 0.3rem;
      font-weight: 500;
      color: #111;
    }

    // 展开/收起图标按钮
    &__icon {
      width: 0.4rem;
      height: 0.4rem;
      background: #f3f4f6;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: #111;
      transition: all 0.3s;
    }

    // 答案内容
    &__answer {
      padding: 0 0.24rem 0.3rem;

      p {
        font-size: 0.16rem;
        line-height: 0.3rem;
        color: #4b5563;
      }
    }

    // "还有其他问题"展开后的反馈表单
    &__feedback {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.24rem;
    }

    // 文本输入框
    &__textarea {
      width: 100%;
      min-height: 1.2rem;
      padding: 0.2rem;
      border-radius: 0.16rem;
      border: none;
      background: #f5f5f5;
      font-size: 0.14rem;
      line-height: 0.22rem;
      color: #111;
      resize: none;
      outline: none;
      font-family: inherit;

      &::placeholder {
        color: #bbb;
      }
    }

    // 提交按钮
    &__submit {
      padding: 0.14rem 0.6rem;
      border-radius: 9999px;
      background: #111;
      color: #fff;
      font-size: 0.16rem;
      line-height: 0.22rem;
      font-weight: 500;
      border: none;
      cursor: pointer;
      transition: background 0.2s;
    }

    // 悬停态
    &:hover {
      .faq-item__icon {
        background: #f3f4f6;
        color: #1f2937;
      }
    }

    // 展开态
    &--open {
      .faq-item__icon {
        background: #f3f4f6;
        color: #1f2937;
      }
    }
  }

  // ==================== 底部 CTA 行动号召 ====================
  .home-cta {
    padding: 0 0 1.0rem;
    width: 100%;

    // CTA 内容区
    &__inner {
      background: linear-gradient(223.56deg, #52CAD1 0%, #53D9C8 100%);
      border-radius: 0;
      padding: 1.0rem 0;
      text-align: center;
      position: relative;
      overflow: hidden;
      line-height: 1;

      h2 {
        font-size: 0.52rem;
        font-weight: 600;
        color: #fff;
        line-height: 0.65rem;
        position: relative;
        z-index: 1;
      }
    }

    // CTA 按钮
    &__btn {
      margin-top: 0.4rem;
      padding: 0.18rem 0.64rem;
      border-radius: 0.16rem;
      background: #111;
      color: #fff;
      font-size: 0.2rem;
      line-height: 0.28rem;
      font-weight: 600;
      border: none;
      cursor: pointer;
      position: relative;
      z-index: 1;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
      transition: background 0.2s;
      &:hover { background: #111; }
    }
  }

  // ==================== 页脚 ====================
  .home-footer {
    background: #111;
    border-top: 1px solid #f3f4f6;
    padding: 0.8rem 0 0.4rem;
    line-height: 1;

    // 页脚内容 — 四列横向排列
    &__inner {
      width: 12rem;
      margin: 0 auto;
      display: flex;
      gap: 1.2rem;
    }

    // 单列
    &__col {
      &:first-child {
        min-width: 2.6rem;
      }

      // 列标题
      h5 {
        font-size: 0.16rem;
        line-height: 0.24rem;
        font-weight: 500;
        color: #fff;
        margin: 0 0 0.32rem;
      }

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

      // 链接列表 — ul > li 自然纵排，无需 flex-direction: column
      ul {
        list-style: none;
        padding: 0;
        margin: 0;

        li {
          font-size: 0.16rem;
          line-height: 0.24rem;
          color: #999;
          cursor: pointer;
          &:hover { color: $accent; }
        }

        li + li {
          margin-top: 0.16rem;
        }
      }
    }

    // Logo
    &__logo {
      margin-bottom: 0.16rem;
      font-size: 0.14rem;
    }

    // Logo 图片
    &__logo-img {
      width: 1.43rem;
      height: 0.355rem;
      display: block;
    }

    // Logo 文字（保留备用）
    &__logo-text {
      font-size: 0.22rem;
      line-height: 0.34rem;
      font-weight: 700;
      color: $accent;
    }

    // 品牌标语
    &__slogan {
      font-size: 0.16rem;
      line-height: 0.24rem;
      color: #9ca3af;
    }

    // 版权信息
    &__bottom {
      width: 12rem;
      margin: 0.6rem auto 0;
      text-align: center;
      padding-top: 0.4rem;
      display: flex;
      justify-content: center;
      gap: 0.2rem;


      p {
        font-size: 0.12rem;
        color: #9ca3af;
      }
      a{
        font-size: 0.12rem;
        text-decoration: none;
        color: #9ca3af;
      }
    }
  }
} // end .home-page