/* ============================================================
   Hero 首屏 - 完整版（PC不动，仅移动端适配）
   ============================================================ */

   .hero {
    position: relative;
    margin-top: 0;
  }
  
  .hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 830px;
    overflow: visible;
    z-index: 0;
  }
  
  .hero__bg img {
    width: 100%;
    height: 830px;
    object-fit: cover;
    object-position: center top;
    display: block;
  }
  
  .hero__content {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }
  
  .hero__title {
    font-size: var(--font-size-hero);
    font-weight: var(--font-weight-hero);
    line-height: var(--line-height-hero);
    color: var(--color-text);
    margin-bottom: 20px;
  }
  
  .hero__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 493px;
  }
  
  .skill-tag {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding-inline: 16px;
    background-color: var(--color-tag-bg);
    border-radius: var(--radius-tag);
    font-size: var(--font-size-tag);
    line-height: var(--line-height-tag);
    white-space: nowrap;
    outline: 1px solid rgba(60, 138, 255, 0.5);
    outline-offset: 0;
  }
  
  .skill-tag__dot {
    font-weight: var(--font-weight-tag-dot);
    color: var(--color-orange);
    margin-right: 4px;
    font-size: 22px;
  }
  
  .skill-tag__text {
    font-weight: var(--font-weight-tag);
    color: var(--color-blue);
  }
  
  .skill-tag__text--alt {
    color: var(--color-blue-alt);
  }
  
  /* ============================================================
     大屏适配 (1280px及以下)
     ============================================================ */
  @media (max-width: 1280px) {
    :root {
      --font-size-hero: clamp(40px, 5vw, 72px);
      --line-height-hero: 1.4;
      --hero-bg-height: clamp(480px, 57.6vw, 830px);
    }
  }
  
  /* ============================================================
     iPad 适配 (1024px及以下)
     ============================================================ */
  @media (max-width: 1024px) {
    .hero__bg {
      height: 500px;
    }
  
    .hero__bg img {
      height: 500px;
    }
  
    .hero__title {
      font-size: 36px;
    }
  
    .hero__tags {
      max-width: 100%;
    }
  
    .skill-tag {
      height: 32px;
      padding-inline: 14px;
      font-size: 13px;
    }
  }
  
  /* ============================================================
     手机适配 (768px及以下)
     ============================================================ */
  @media (max-width: 768px) {
    .hero__bg {
      height: 380px;
    }
  
    .hero__bg img {
      height: 380px;
      object-position: center 30%;
    }
  
    .hero__content {
      padding: 40px 24px 30px;
      justify-content: center;
    }
  
    .hero__title {
      font-size: 26px;
      margin-bottom: 12px;
    }
  
    .hero__tags {
      gap: 6px;
    }
  
    .skill-tag {
      height: 28px;
      padding-inline: 10px;
      font-size: 11px;
      outline: 1px solid rgba(60, 138, 255, 0.4);
    }
  
    .skill-tag__dot {
      font-size: 16px;
      margin-right: 2px;
    }
  }
  
  /* ============================================================
     小屏手机适配 (375px及以下)
     ============================================================ */
  @media (max-width: 375px) {
    :root {
      --font-size-hero: 30px;
    }
  
    .hero__bg {
      height: 300px;
    }
  
    .hero__bg img {
      height: 300px;
      object-position: center 20%;
    }
  
    .hero__content {
      padding: 30px 16px 20px;
    }
  
    .hero__title {
      font-size: 22px;
      margin-bottom: 8px;
    }
  
    .skill-tag {
      height: 24px;
      padding-inline: 8px;
      font-size: 10px;
    }
  
    .skill-tag__dot {
      font-size: 14px;
    }
  }