/* =========================================
   首页 PC：大分辨率 Banner 文案
   1920 设计稿字号为下限，更大屏按视口适度放大
   不改 1440 / H5 既有字号
   ========================================= */

@media (min-width: 1921px) {
  .banner__copy {
    max-width: min(78vw, 2000px);
  }

  .banner__desc {
    font-size: clamp(20px, 1.042vw, 26px);
    line-height: 1.5;
  }

  .banner__title {
    font-size: clamp(145px, 7.55vw, 192px);
  }
}

/* =========================================
   首页 H5（max-width: 768px）
   设计稿 Index_mobile 390×4338
   仅影响移动端，不改 PC 样式
   ========================================= */

@media (max-width: 768px) {
  /* ----------------------------------------
     Banner
     ---------------------------------------- */
  .banner {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    /* 按浏览器可视高度一屏铺满；svh 保证地址栏展开时标题/分页仍完整可见 */
    height: 100svh;
    height: var(--h5-vh, 100svh);
    min-height: 0;
    padding: 0 0.2rem calc(0.96rem + env(safe-area-inset-bottom));
    background: none;
  }

  /* 避免 header 占位参与 flex，把标题/描述顶出设计位置 */
  .banner > #header-placeholder {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0;
  }

  .banner__slide-img {
    box-shadow: none;
    filter: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .banner__peel,
  .banner__cta {
    display: none !important;
  }

  /* 不生成盒子，标题/描述仍作为 .banner 的 flex 子项，保持 H5 原顺序 */
  .banner__copy {
    display: contents;
  }

  .banner__title {
    position: relative;
    left: auto;
    top: auto;
    z-index: 2;
    order: 1;
    flex-shrink: 0;
    width: auto;
    max-width: 100%;
    margin: 0;
    font-size: 0.56rem;
    line-height: 1.15;
    font-weight: 700;
    color: var(--color-white);
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
  }

  /* 英文更长：略缩小字号，保持两行，避免折成三行后过高 */
  html[lang="en"] .banner__title {
    font-size: 0.48rem;
  }

  .banner__desc {
    position: relative;
    left: auto;
    top: auto;
    z-index: 2;
    order: 2;
    flex-shrink: 0;
    width: auto;
    max-width: 100%;
    margin: 0.2rem 0 0;
    font-size: 0.14rem;
    line-height: 0.22rem;
    color: var(--color-white);
    opacity: 0.8;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
  }

  .banner__desc br {
    display: none;
  }

  .banner__pagination {
    position: absolute;
    left: 50%;
    right: auto;
    top: auto;
    bottom: calc(0.24rem + env(safe-area-inset-bottom));
    transform: translateX(-50%) rotate(0deg);
    gap: 0.08rem;
    z-index: 2;
    flex-shrink: 0;
  }

  .banner__pagination-item {
    width: 0.08rem;
    height: 0.08rem;
    border-radius: 0.04rem;
    background: rgba(255, 255, 255, 0.4);
  }

  .banner__pagination-item--active {
    width: 0.4rem;
  }

  /* ----------------------------------------
     About（设计稿 387:8354，390×699）
     图 135×112 @ (20,48)；正文 28/36 自 83px 绕排；列表 16/22；按钮居中
     ---------------------------------------- */
  .about {
    gap: 0.48rem;
    padding: 0.48rem 0.2rem 0.48rem;
    background: var(--color-white);
  }

  .about__intro {
    min-height: 0;
  }

  .about__thumb {
    float: left;
    width: 1.35rem;
    height: 1.12rem;
    margin: 0 0.16rem 0 0;
    object-fit: cover;
    background: none;
    box-shadow: none;
    filter: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .about__text {
    font-family: var(--font-sans);
    font-size: 0.28rem;
    line-height: 0.36rem;
    font-weight: 500;
    padding-top: 0.83rem;
    text-align: justify;
    color: var(--color-black);
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
  }

  /* 英文单词较长，两端对齐会把词距撑开；改为左对齐 */
  html[lang="en"] .about__text {
    text-align: left;
  }

  .about__bottom {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.48rem;
  }

  .about__bottom .btn {
    align-self: center;
  }

  .about__capability {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.24rem;
    width: 100%;
  }

  .about__capability-label {
    font-size: 0.16rem;
    line-height: 0.18rem;
    white-space: normal;
  }

  .about__list {
    width: 100%;
    gap: 0.12rem;
  }

  .about__list-item {
    gap: 0.16rem;
  }

  .about__list-num {
    font-family: var(--font-inter);
    font-size: 0.14rem;
    line-height: 0.16rem;
    width: 0.18rem;
  }

  .about__list-text {
    font-family: var(--font-sans);
    font-size: 0.16rem;
    line-height: 0.22rem;
    white-space: normal;
  }

  .about .btn > span:first-child {
    padding: 0.08rem 0.32rem;
    font-size: 0.14rem;
  }

  /* ----------------------------------------
     Why（设计稿 387:8373，390×741）
     卡片 258×373；图 226×240 无遮罩/阴影；默认居中第二张
     ---------------------------------------- */
  .why {
    gap: 0.24rem;
    padding: 0.48rem 0 0.32rem;
    overflow: hidden;
  }

  .why__header {
    width: 100%;
    justify-content: center;
  }

  .why__label {
    font-size: 0.16rem;
    line-height: 0.18rem;
    white-space: normal;
    text-align: center;
    padding: 0 0.2rem;
  }

  .why__content {
    height: auto;
    min-height: 6.19rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
  }

  .why__bg-title {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 4.63rem;
    max-width: none;
    margin: 0;
    font-family: var(--font-inter-tight);
    font-weight: 900;
    font-size: 0.96rem;
    line-height: 0.96rem;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
    color: var(--color-black);
    z-index: 0;
  }

  .why__bg-title .media-h5 {
    display: block !important;
  }

  .why__stack {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    min-height: 3.73rem;
    height: 3.73rem;
    margin-top: 1.56rem;
    z-index: 1;
  }

  .why__card {
    position: absolute;
    left: 50%;
    top: 0;
    width: 2.58rem;
    gap: 0.16rem;
    padding: 0.16rem;
    overflow: hidden;
    background: var(--color-white);
    transform: translateX(-50%);
    transform-origin: center center;
    transition: transform 0.35s ease, opacity 0.35s ease;
    box-shadow: 0 0.1rem 0.24rem rgba(22, 22, 22, 0.1);
  }

  /*
   * 与 JS 默认对齐：视觉从左到右为 DOM 倒序，
   * 首屏展开并展示左侧第一张（why__card--4）。
   */
  .why__card--1 {
    transform: translateX(calc(-50% + 8.4rem)) rotate(-3deg);
    opacity: 0;
    z-index: 7;
  }

  .why__card--2 {
    transform: translateX(calc(-50% + 5.6rem)) rotate(-3deg);
    opacity: 0;
    z-index: 8;
  }

  .why__card--3 {
    transform: translateX(calc(-50% + 2.8rem)) rotate(-3deg);
    opacity: 1;
    z-index: 9;
  }

  .why__card--4,
  .why__card--4.why__card--front {
    transform: translateX(-50%) rotate(0deg);
    opacity: 1;
    z-index: 10;
  }

  .why__card-photo {
    width: 100%;
    height: 2.4rem;
    object-fit: cover;
    object-position: center;
    background: none;
    box-shadow: none;
    filter: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .why__card-title {
    font-size: 0.24rem;
    line-height: normal;
  }

  html[lang="en"] .why__card-title {
    white-space: nowrap;
  }

  .why__card-desc {
    font-size: 0.16rem;
    line-height: 0.24rem;
  }

  .why__nav {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.24rem;
    margin-top: 0.48rem;
  }

  .why__nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.42rem;
    height: 0.42rem;
    padding: 0;
    border: 2px solid var(--color-black);
    background: var(--color-white);
    position: relative;
    flex-shrink: 0;
    font-family: var(--font-inter);
    font-size: 0.2rem;
    line-height: 0.21rem;
    font-weight: 400;
    color: var(--color-black);
    cursor: pointer;
    appearance: none;
  }

  .why__nav-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }

  .why__nav-btn::before {
    content: none;
  }

  .why__nav-arrow {
    display: block;
    transform: rotate(180deg);
  }

  /* ----------------------------------------
     Service（设计稿 387:8387，手风琴）
     ---------------------------------------- */
  .service {
    gap: 0.32rem;
    padding: 0.32rem 0 0.48rem;
  }

  .service__header {
    justify-content: center;
    padding: 0 0.2rem;
  }

  .service__side {
    display: none;
  }

  .service__label {
    font-size: 0.16rem;
    line-height: 0.18rem;
    white-space: normal;
    text-align: center;
  }

  .service__list-wrap {
    min-height: 0;
    padding: 0 0.2rem;
  }

  .service__list {
    max-width: none;
  }

  .service__item {
    display: block;
    min-height: 0;
    overflow: visible;
    border-bottom: 1px solid var(--color-border);
    background: transparent !important;
  }

  .service__item--active {
    background: transparent !important;
  }

  .service__item--open {
    border-bottom-color: transparent;
  }

  .service__accordion {
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .service__item--open .service__accordion {
    padding: 0.32rem 0.16rem 0.24rem;
  }

  .service__accordion-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    opacity: 0;
    background: none;
    box-shadow: none;
    filter: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .service__item--open .service__accordion-bg {
    opacity: 1;
  }

  .service__accordion-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.12rem;
    width: 100%;
    min-height: 0.88rem;
    padding: 0 0.16rem;
    text-align: left;
    color: var(--color-black);
  }

  .service__item--open .service__accordion-header {
    min-height: 0;
    padding: 0;
    color: var(--color-white);
  }

  .service__accordion-num {
    flex-shrink: 0;
    width: 0.2rem;
    font-family: var(--font-inter-tight);
    font-size: 0.14rem;
    font-weight: 700;
    color: var(--color-grey-secondary);
  }

  .service__item--open .service__accordion-num {
    color: var(--color-white);
    opacity: 0.7;
  }

  .service__accordion-title {
    flex: 1;
    font-weight: 700;
    font-size: 0.18rem;
    line-height: 1.3;
    color: inherit;
    overflow-wrap: break-word;
    word-break: normal;
  }

  .service__accordion-icon {
    position: relative;
    flex-shrink: 0;
    width: 0.16rem;
    height: 0.16rem;
  }

  .service__accordion-icon::before,
  .service__accordion-icon::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    background: var(--color-black);
    transform: translate(-50%, -50%);
  }

  .service__accordion-icon::before {
    width: 0.12rem;
    height: 1.5px;
  }

  .service__accordion-icon::after {
    width: 1.5px;
    height: 0.12rem;
  }

  .service__item--open .service__accordion-icon {
    transform: rotate(45deg);
  }

  .service__item--open .service__accordion-icon::before,
  .service__item--open .service__accordion-icon::after {
    background: var(--color-white);
  }

  .service__accordion-panel {
    display: grid;
    grid-template-rows: 0fr;
    position: relative;
    z-index: 1;
    transition: grid-template-rows 0.32s ease;
  }

  .service__item--open .service__accordion-panel {
    grid-template-rows: 1fr;
  }

  .service__accordion-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
    min-height: 0;
    gap: 0.32rem;
    padding: 0;
    color: var(--color-white);
  }

  .service__item--open .service__accordion-content {
    padding: 0.24rem 0.24rem 0 0.32rem;
  }

  .service__accordion-desc {
    width: 100%;
    font-size: 0.14rem;
    line-height: 0.24rem;
    color: var(--color-white);
    overflow-wrap: break-word;
    word-break: normal;
  }

  .service .service__accordion-btn.btn--light > span:first-child {
    font-size: 0.14rem;
    font-weight: 500;
  }

  .service .service__accordion-btn .btn__arrow-swap {
    width: 0.32rem;
    height: 0.16rem;
    margin-left: -0.16rem;
  }

  .service .service__accordion-btn .contact-form__submit-arrow {
    width: 0.32rem;
    height: 0.16rem;
  }

  /* ----------------------------------------
     Career（设计稿 387:8395 + 截图）
     改为文档流：卡片随语言/展开变高，职位不被裁切；
     按钮、介绍跟在卡片后面，间距 32 / 40；
     背景 cover 铺满面板，不随内容拉伸变形
     ---------------------------------------- */
  .career {
    padding: 0.32rem 0.2rem;
  }

  .career__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    min-height: 7.62rem;
    max-height: none;
    padding: 0.32rem 0.2rem 0.16rem;
    overflow: visible;
    background: none;
  }

  .career__bg {
    position: absolute;
    inset: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    object-fit: cover;
    object-position: center top;
    background: none;
    box-shadow: none;
    filter: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .career__top {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    padding: 0;
    margin: 0 0 0.48rem;
    z-index: 2;
    flex-shrink: 0;
  }

  .career__tag {
    font-family: var(--font-inter-tight);
    font-size: 0.13rem;
    line-height: 0.16rem;
    font-weight: 500;
    color: var(--color-white);
  }

  .career__card {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    transform: none;
    z-index: 3;
    overflow: visible;
    flex-shrink: 0;
    padding-bottom: 0;
  }

  .career__card-title-wrap {
    padding: 0.32rem 0.2rem 0.24rem;
  }

  .career__card-title {
    font-size: 0.36rem;
    line-height: 0.43rem;
    white-space: normal;
    text-align: center;
  }

  .career__job-header {
    min-height: 0.7rem;
    padding: 0.24rem;
    gap: 0.1rem;
    transition: min-height 0.32s ease, padding 0.32s ease;
  }

  .career__job--open .career__job-header {
    min-height: 0;
    padding-bottom: 0;
  }

  .career__job-name {
    font-size: 0.18rem;
    line-height: 0.22rem;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
  }

  .career__job-arrow::before {
    transition: transform 0.32s ease;
  }

  .career__job-body {
    display: grid;
    grid-template-rows: 0fr;
    width: 100%;
    padding: 0 0.24rem 0 0.48rem;
    gap: 0;
    opacity: 0;
    overflow: hidden;
    transition: grid-template-rows 0.32s ease, opacity 0.24s ease, padding 0.32s ease;
  }

  .career__job--open .career__job-body {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    padding-top: 0.16rem;
    padding-bottom: 0.24rem;
  }

  .career__job-body-inner {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    gap: 0.12rem;
  }

  .career__job-desc {
    font-family: var(--font-sans);
    font-size: 0.16rem;
    line-height: 0.2rem;
    color: var(--color-black);
    opacity: 1;
    overflow-wrap: break-word;
    word-break: normal;
  }

  .career__job-reqs {
    font-family: var(--font-sans);
    font-size: 0.14rem;
    line-height: 0.2rem;
    padding-left: 0.18rem;
    overflow-wrap: break-word;
    word-break: normal;
  }

  .career__btn {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    transform: none;
    margin: 0.32rem 0 0;
    z-index: 3;
    flex-shrink: 0;
  }

  .career__btn > span:first-child {
    padding: 0.08rem 0.32rem;
    font-size: 0.14rem;
  }

  .career__intro--bottom {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    z-index: 2;
    width: 100%;
    max-width: none;
    margin: 0.4rem 0 0;
    font-family: var(--font-inter-tight);
    font-size: 0.13rem;
    line-height: 0.2rem;
    font-weight: 400;
    color: var(--color-white);
    text-align: left;
  }

  /* ----------------------------------------
     Contact
     ---------------------------------------- */
  .contact {
    padding: 0.32rem 0.2rem 0.32rem;
  }

  .contact__inner {
    gap: 0.32rem;
    width: 100%;
  }

  .contact__header {
    gap: 0.16rem;
    width: 100%;
  }

  .contact__title {
    font-size: 0.48rem;
    line-height: 0.6rem;
    white-space: normal;
  }

  .contact__desc {
    font-size: 0.15rem;
    line-height: 0.24rem;
    white-space: normal;
    max-width: 3.5rem;
    color: #7f7f7f;
  }

  .contact__actions {
    gap: 0.16rem;
    justify-content: center;
    flex-wrap: nowrap;
  }

  .contact__actions .btn > span:first-child {
    padding: 0.08rem 0.2rem;
    font-size: 0.14rem;
  }
}