/* Homepage section-02 direction entrances: transparent elliptical controls. */
.capability-lead-tags{gap:12px}
.lead-usecase,
.lead-usecase:nth-child(2),
.lead-usecase:nth-child(3){
  min-height:56px;
  padding:8px 18px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:999px;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
}
.lead-usecase:hover,
.lead-usecase:focus-visible{
  transform:translateY(-4px);
  border-color:#fff;
  background:transparent;
  box-shadow:0 14px 34px rgba(0,0,0,.24),inset 0 0 0 1px rgba(255,255,255,.16);
}
.lead-usecase i{border-radius:50%}
.lead-usecase:before{left:22px;right:22px;bottom:10px}

/* About hero: one large Xingyan wordmark replaces the three direction images. */
.about-hero-logo{
  position:relative;
  height:min(68vh,680px);
  display:grid;
  place-items:center;
  isolation:isolate;
}
.about-hero-logo:before{
  content:"";
  position:absolute;
  z-index:-2;
  width:min(38vw,650px);
  aspect-ratio:1;
  border:1px solid rgba(255,85,0,.34);
  border-radius:50%;
}
.about-hero-logo:after{
  content:"";
  position:absolute;
  z-index:-1;
  width:min(29vw,500px);
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,22,203,.38),rgba(0,22,203,.09) 42%,transparent 70%);
  filter:blur(18px);
}
.about-hero-logo-mark{width:clamp(250px,22vw,390px);aspect-ratio:1;display:grid;place-items:center;overflow:hidden}
.about-hero-logo-mark img{display:block;width:230%;max-width:none;height:auto;mix-blend-mode:screen;transform:none;filter:drop-shadow(0 28px 64px rgba(0,0,0,.44))}
@media(max-width:900px){
  .lead-usecase,.lead-usecase:nth-child(2),.lead-usecase:nth-child(3){min-height:58px;padding:8px 10px;border-radius:999px;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:1fr;align-items:center}
  .lead-usecase span,.lead-usecase b,.lead-usecase i{grid-column:auto;grid-row:auto;align-self:center}
  .lead-usecase b{font-size:11px;line-height:1.25}
  .about-hero-logo{height:52vh;min-height:400px}
  .about-hero-logo:before{width:min(72vw,560px)}
  .about-hero-logo:after{width:min(58vw,450px)}
}
@media(max-width:640px){
  .color-wipe{height:calc(100% + 2px);bottom:calc(-100% - 2px)}
  .capability-lead-tags{gap:6px}
  .lead-usecase,.lead-usecase:nth-child(2),.lead-usecase:nth-child(3){min-height:56px;padding:7px 8px;gap:5px}
  .lead-usecase span{font-size:7px}
  .lead-usecase b{font-size:10px;line-height:1.22}
  .lead-usecase i{width:21px;height:21px;font-size:11px}
  .lead-usecase:before{left:16px;right:16px;bottom:7px}
  .about-hero{gap:26px}
  .about-hero-logo{order:-1;height:132px;min-height:0;aspect-ratio:auto;margin-bottom:0}
  .about-hero-logo:before,.about-hero-logo:after{display:none}
  .about-hero-logo-mark img{width:112px;filter:drop-shadow(0 15px 30px rgba(0,0,0,.35))}
}

/* All portrait screens, including tablets: overscan the transition image and keep the logo above the copy. */
@media(orientation:portrait){
  .color-wipe{height:120%;bottom:-125%}
  .lead-usecase,.lead-usecase:nth-child(2),.lead-usecase:nth-child(3){height:52px;min-height:52px;max-height:52px;padding:6px 8px;display:flex;align-items:center;gap:5px}
  .lead-usecase span,.lead-usecase i{flex:0 0 auto}
  .lead-usecase b{min-width:0;flex:1;display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal}
  .about-hero{min-height:auto;grid-template-columns:1fr;gap:18px;padding-top:96px;padding-bottom:64px}
  .about-hero-logo{order:-1;height:clamp(112px,15vh,150px);min-height:0;aspect-ratio:auto;margin:0}
  .about-orbit{display:none}
  .about-hero-logo:before{display:none}
  .about-hero-logo:after{display:block;width:clamp(180px,38vw,260px);background:radial-gradient(circle,rgba(0,22,203,.36),rgba(255,85,0,.11) 38%,transparent 70%);filter:blur(16px)}
  .about-hero-logo-mark{width:clamp(104px,16vw,148px)}
  .about-hero-logo-mark img{width:230%;max-width:none;mix-blend-mode:screen;transform:none;filter:drop-shadow(0 14px 28px rgba(0,0,0,.28))}
  .related-grid .related-case-card:nth-child(n+3){display:none}
}