.kapi-demo-video {
  width: 100%;
  margin-top: 18px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #050505;
}

.kapi-demo-video__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #050505;
}

@media (max-width: 700px) {
  .kapi-demo-video {
    margin-top: 12px;
  }
}

.kapi-agent-intro {
  position: relative;
  isolation: isolate;
  width: 100%;
  margin-top: 18px;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  padding: clamp(30px, 4vw, 78px);
  background-color: #151419;
  background-image:
    url("assets/kapi/logo.svg"),
    url("assets/kapi/kapi-agent-background.svg");
  background-repeat: no-repeat, no-repeat;
  background-position: right 4.1% top 4.2%, center;
  background-size: 15% auto, 100% 100%;
}

.kapi-agent-intro::after {
  display: none;
}

.kapi-agent-intro__title {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #f7f7f7;
  font-family: Manrope, Arial, sans-serif;
  font-size: clamp(28px, 3.35vw, 66px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.035em;
}

.kapi-agent-intro__logo {
  position: absolute;
  z-index: 1;
  top: clamp(28px, 4vw, 76px);
  right: clamp(30px, 4vw, 78px);
  display: block;
  width: clamp(150px, 15vw, 300px);
  height: auto;
}

.kapi-agent-intro__copy {
  position: absolute;
  z-index: 1;
  left: clamp(28px, 3.4vw, 66px);
  top: 27.5%;
  width: min(51%, 986px);
  color: #f7f7f7;
  font-family: Manrope, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

.kapi-agent-intro__copy-image {
  display: block;
  width: 100%;
  height: auto;
}

.kapi-agent-intro__tools {
  --agent-tool-size: clamp(72px, 9vw, 122px);
  position: absolute;
  z-index: 1;
  top: 52.2%;
  right: 10.5%;
  width: 35%;
  height: 14%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.4vw, 48px);
}

.kapi-agent-intro__tools img {
  display: block;
  flex: 0 0 var(--agent-tool-size);
  width: var(--agent-tool-size);
  height: var(--agent-tool-size);
  max-width: none;
  object-fit: contain;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(22px) scale(.9);
  transition:
    opacity .62s ease,
    filter .72s ease,
    transform .72s cubic-bezier(.22, 1, .36, 1);
}

.kapi-agent-intro.is-visible .kapi-agent-intro__tools img {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

.kapi-agent-intro.is-visible .kapi-agent-intro__tools img:nth-child(1) {
  transition-delay: .12s;
  animation: kapi-agent-tool-float-a 4.8s ease-in-out 1s infinite;
}

.kapi-agent-intro.is-visible .kapi-agent-intro__tools img:nth-child(2) {
  transition-delay: .32s;
  animation: kapi-agent-tool-float-b 5.4s ease-in-out 1.25s infinite;
}

.kapi-agent-intro.is-visible .kapi-agent-intro__tools img:nth-child(3) {
  transition-delay: .52s;
  animation: kapi-agent-tool-float-a 5.1s ease-in-out 1.55s infinite reverse;
}

@media (min-width: 701px) {
  .kapi-agent-intro__tools img:nth-child(2) {
    --figma-tool-size: clamp(82px, 10.12vw, 137px);
    flex-basis: var(--figma-tool-size);
    width: var(--figma-tool-size);
    height: var(--figma-tool-size);
  }
}

@keyframes kapi-agent-tool-float-a {
  50% {
    translate: 0 -6px;
  }
}

@keyframes kapi-agent-tool-float-b {
  50% {
    translate: 0 5px;
  }
}

.kapi-agent-intro__copy p {
  margin: 0;
}

.kapi-agent-intro__headline {
  font-size: clamp(42px, 6.4vw, 126px);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.055em;
  white-space: nowrap;
}

.kapi-agent-intro__subhead {
  margin-top: clamp(14px, 1.5vw, 30px) !important;
  font-size: clamp(25px, 3.6vw, 72px);
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -.04em;
  white-space: nowrap;
}

.kapi-agent-intro__description {
  margin-top: clamp(34px, 5vw, 96px) !important;
  color: rgba(255, 255, 255, .9);
  font-size: clamp(13px, 1.45vw, 29px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -.025em;
}

.kapi-agent-intro__result {
  margin-top: clamp(24px, 3.2vw, 62px) !important;
  color: rgba(255, 255, 255, .9);
  font-size: clamp(13px, 1.45vw, 29px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -.02em;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .kapi-agent-intro {
    margin-top: 12px;
    padding: 24px 20px;
  }

  .kapi-agent-intro__title {
    font-size: clamp(22px, 6vw, 34px);
  }

  .kapi-agent-intro__logo {
    top: 22px;
    right: 20px;
    width: clamp(110px, 34vw, 160px);
  }

  .kapi-agent-intro__copy {
    left: 20px;
    top: 31%;
    width: calc(100% - 40px);
  }

  .kapi-agent-intro__tools {
    --agent-tool-size: clamp(42px, 11vw, 64px);
    top: 58.5%;
    right: 9%;
    width: 45%;
    height: 12%;
    gap: 10px;
  }

  .kapi-agent-intro__headline {
    font-size: clamp(25px, 7vw, 42px);
  }

  .kapi-agent-intro__subhead {
    font-size: clamp(17px, 4.8vw, 28px);
  }

  .kapi-agent-intro__description,
  .kapi-agent-intro__result {
    font-size: clamp(9px, 2.6vw, 14px);
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kapi-agent-intro__tools img,
  .kapi-agent-intro.is-visible .kapi-agent-intro__tools img {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
    animation: none;
  }
}