.qa-about,
.qa-about *{
  box-sizing:border-box;
  font-family:"Montserrat-Light","Montserrat",Arial,sans-serif;
}

.qa-about{
  padding:52px 18px;
  background:#f6f6f8;
  color:#222;
}

.qa-about__in{
  max-width:1440px;
  margin:auto;
}

.qa-about h2{
  margin:0 0 34px;
  font-size:40px;
  font-weight:300;
}


/* =========================
   HERO
========================= */

.qa-about__hero{
  display:block;

  width:100%;
  aspect-ratio:4.7/1;

  object-fit:cover;

  border-radius:6px;

  transition:
    transform .48s cubic-bezier(.22,.61,.36,1),
    filter .35s ease;
}


/* =========================
   STORY
========================= */

.qa-about__story{
  display:grid;

  grid-template-columns:
    minmax(0,1fr) 290px;

  gap:70px;

  align-items:center;

  max-width:1180px;

  margin:58px auto;
}


.qa-about__copy h3{
  margin:0 0 22px;

  font-size:16px;

  font-weight:700;
}


.qa-about__copy p{
  margin:0 0 22px;

  color:#4f4f4f;

  font-size:15px;
  line-height:1.72;

  font-weight:300;
}


/* =========================
   LOGO
========================= */

.qa-about__logo{
  display:inline-block;

  margin:25px 0 18px;

  font-size:31px;

  font-weight:700;

  letter-spacing:-2px;

  transition:
    transform .36s cubic-bezier(.22,.61,.36,1);
}


.qa-about__logo span{
  color:#0864ff;

  letter-spacing:0;
}


/* =========================
   RIGHT SIDE IMAGES
========================= */

.qa-about__side{
  display:grid;

  gap:45px;
}


.qa-about__side img{
  display:block;

  width:100%;

  border-radius:5px;

  aspect-ratio:1.25/1;

  object-fit:cover;

  position:relative;

  z-index:1;

  transition:
    transform .4s cubic-bezier(.22,.61,.36,1),
    opacity .32s ease,
    filter .32s ease,
    box-shadow .32s ease;
}


/* =========================
   TEAM
========================= */

.qa-about__team{
  display:grid;

  grid-template-columns:
    1fr 330px;

  gap:65px;

  align-items:center;

  max-width:1180px;

  margin:auto;

  padding-top:18px;
}


.qa-about__team h3{
  margin:0 0 24px;

  font-size:16px;

  font-weight:700;
}


.qa-about__team p{
  color:#4f4f4f;

  font-size:15px;

  line-height:1.72;

  font-weight:300;
}


/* =========================
   AWARDS
========================= */

.qa-about__awards{
  display:block;

  width:100%;

  border-radius:5px;

  transition:
    transform .42s cubic-bezier(.22,.61,.36,1),
    box-shadow .32s ease,
    filter .32s ease;
}


/* =========================================
   DESKTOP HOVER EFFECTS
========================================= */

@media (min-width:801px) and (hover:hover) and (pointer:fine){


  /* Hero 轻微放大 */

  .qa-about__hero:hover{
    transform:scale(1.018);

    filter:brightness(1.02);
  }


  /* =========================
     右侧两张图片联动
  ========================= */

  .qa-about__side:hover img{
    transform:scale(.96);

    opacity:.58;

    filter:saturate(.82);
  }


  .qa-about__side img:hover{
    transform:
      translateY(-4px)
      scale(1.055);

    opacity:1;

    filter:none;

    z-index:5;

    box-shadow:
      0 14px 30px
      rgba(7,89,255,.10);
  }


  /* Logo 轻微位移 */

  .qa-about__logo:hover{
    transform:
      translateX(4px)
      scale(1.025);
  }


  /* Awards 图突出 */

  .qa-about__awards:hover{
    transform:
      translateY(-5px)
      scale(1.045);

    filter:brightness(1.02);

    box-shadow:
      0 16px 34px
      rgba(7,89,255,.11);
  }

}


/* =========================
   MOBILE
========================= */

@media(max-width:800px){

  .qa-about{
    padding:34px 14px;
  }


  .qa-about h2{
    font-size:30px;

    margin-bottom:22px;
  }


  .qa-about__hero{
    aspect-ratio:2.2/1;

    transform:none;

    filter:none;
  }


  .qa-about__story,
  .qa-about__team{
    grid-template-columns:1fr;

    gap:26px;

    margin:32px auto;
  }


  .qa-about__side{
    grid-template-columns:
      1fr 1fr;

    gap:10px;

    order:-1;
  }


  .qa-about__side img{
    transform:none;

    opacity:1;

    filter:none;
  }


  .qa-about__copy h3,
  .qa-about__team h3{
    font-size:16px;
  }


  .qa-about__copy p,
  .qa-about__team p{
    font-size:16px;

    line-height:1.62;
  }


  .qa-about__team{
    padding-top:10px;
  }


  .qa-about__awards{
    max-width:440px;

    margin:auto;

    transform:none;

    filter:none;
  }

}