:root {
  color-scheme: dark;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif;
  background: #000;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
}

body {
  min-height: 100vh;
  background: #000;
}

.page-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.banner {
  container-type: inline-size;
  isolation: isolate;
  position: relative;
  width: min(100vw, 1816px);
  aspect-ratio: 1816 / 866;
  overflow: hidden;
  border-radius: 3.3cqw;
  background:
    radial-gradient(ellipse at 57% 48%, rgba(7, 49, 144, 0.25) 0%, transparent 32%),
    radial-gradient(ellipse at 74% 12%, rgba(7, 58, 128, 0.2) 0%, transparent 34%),
    linear-gradient(105deg, #020510 0%, #020818 39%, #03122a 66%, #02101c 100%);
  box-shadow: inset 0 0 0 1px rgba(70, 164, 255, 0.025);
}

.banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(1, 3, 11, 0.2), transparent 56%, rgba(0, 10, 18, 0.05)),
    radial-gradient(ellipse at 50% 44%, transparent 42%, rgba(0, 2, 10, 0.65) 106%);
}

.ambient,
.light-wall,
.floor,
.horizon {
  position: absolute;
  pointer-events: none;
}

.ambient {
  z-index: 0;
  border-radius: 50%;
  filter: blur(4.4cqw);
}

.ambient-blue {
  left: 50.5%;
  top: 23%;
  width: 33%;
  height: 55%;
  background: rgba(0, 75, 255, 0.38);
}

.ambient-cyan {
  right: 1%;
  top: 16%;
  width: 27%;
  height: 64%;
  background: rgba(30, 238, 218, 0.22);
}

.light-wall {
  z-index: 0;
  right: 5.1%;
  top: 17.2%;
  width: 42.7%;
  height: 64.5%;
  transform: perspective(70cqw) rotateY(-2deg) rotateZ(-0.7deg);
  transform-origin: right center;
  border-radius: 10% 10% 4% 11%;
  background:
    linear-gradient(118deg, rgba(0, 68, 245, 0.88) 0%, rgba(0, 120, 246, 0.74) 39%, rgba(50, 232, 207, 0.67) 100%);
  filter: blur(1.6cqw);
  box-shadow:
    -3.2cqw 0 7cqw rgba(0, 89, 255, 0.35),
    1cqw 0 5cqw rgba(35, 241, 216, 0.32);
  opacity: 0.76;
}

.light-wall::after {
  content: "";
  position: absolute;
  inset: 7% 4% 4% 11%;
  border-radius: 9%;
  background: linear-gradient(105deg, rgba(8, 88, 255, 0.2), rgba(101, 255, 229, 0.26));
  filter: blur(2.2cqw);
}

.horizon {
  z-index: 0;
  left: 42%;
  right: 0;
  top: 72.5%;
  height: 1.35%;
  background: linear-gradient(90deg, transparent, rgba(0, 103, 255, 0.48) 31%, rgba(70, 255, 224, 0.54) 83%, transparent);
  filter: blur(0.85cqw);
}

.floor {
  z-index: 0;
  left: 0;
  right: -2%;
  bottom: 0;
  height: 27.3%;
  background:
    radial-gradient(ellipse 7% 120% at 56% 0%, rgba(0, 84, 255, 0.74), transparent 72%),
    radial-gradient(ellipse 8% 125% at 80% 0%, rgba(32, 244, 221, 0.72), transparent 74%),
    radial-gradient(ellipse 20% 92% at 60% 0%, rgba(0, 84, 217, 0.48), transparent 76%),
    radial-gradient(ellipse 22% 100% at 85% 0%, rgba(21, 169, 170, 0.49), transparent 79%),
    linear-gradient(90deg, transparent 0%, transparent 38%, rgba(9, 64, 126, 0.28) 48%, rgba(12, 86, 133, 0.34) 70%, rgba(7, 72, 101, 0.31) 100%);
  filter: blur(0.34cqw);
  opacity: 0.82;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.06) 0%, #000 12%, #000 100%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.06) 0%, #000 12%, #000 100%);
}

.floor::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(96deg, transparent 0 4.8%, rgba(143, 233, 255, 0.055) 5%, transparent 5.2% 10%),
    linear-gradient(rgba(120, 234, 255, 0.12), transparent 38%);
  mix-blend-mode: screen;
}

.copy-block {
  position: absolute;
  z-index: 5;
  left: 6.62%;
  top: 19.5%;
  width: 48%;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.74cqw;
  height: 3.34cqw;
  padding: 0 1.9cqw 0 1.08cqw;
  border: 1px solid rgba(40, 234, 199, 0.6);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.93);
  font-size: 1.18cqw;
  font-weight: 400;
  line-height: 1;
  box-shadow: inset 0 0 1.2cqw rgba(0, 37, 57, 0.3);
}

.sparkle {
  position: relative;
  width: 1.35cqw;
  height: 1.35cqw;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 0.5cqw rgba(65, 255, 226, 0.54));
}

.sparkle::before,
.sparkle::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #6cffe6;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

.sparkle::after {
  inset: 23%;
  transform: rotate(45deg);
  opacity: 0.75;
}

h1 {
  margin: 2.05cqw 0 0.92cqw;
  color: #f7f9fd;
  font-size: 3.47cqw;
  font-weight: 800;
  line-height: 1.55;
  letter-spacing: 0;
  text-shadow: 0 0.15cqw 0.4cqw rgba(0, 0, 0, 0.4);
}

.title-line {
  display: block;
  white-space: nowrap;
  transform: scaleX(1.15);
  transform-origin: left center;
}

.title-product {
  margin-top: -0.38cqw;
  transform: scaleX(1.06);
}

.gpt-text {
  color: #29a8ff;
}

.ampersand {
  display: inline-block;
  margin: 0 0.62cqw 0 0.44cqw;
  color: #f7f9fd;
}

.claude-text {
  margin-right: 0.32cqw;
  color: #ff9a78;
}

.description {
  margin: 0;
  color: rgba(239, 243, 251, 0.8);
  font-size: 1.4cqw;
  font-weight: 400;
  line-height: 1.68;
  letter-spacing: 0;
  text-shadow: 0 0.1cqw 0.2cqw rgba(0, 0, 0, 0.45);
}

.cta {
  display: grid;
  place-items: center;
  width: 16.35cqw;
  height: 4.73cqw;
  margin-top: 2.55cqw;
  border: 1px solid rgba(220, 255, 255, 0.95);
  border-radius: 999px;
  color: #001018;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 42%),
    linear-gradient(107deg, #2c9dfd 1%, #22c4e8 44%, #5bf1c6 100%);
  box-shadow:
    0 0 0.5cqw rgba(109, 233, 255, 0.5),
    0 0 1.8cqw rgba(46, 214, 223, 0.46),
    inset 0 0.18cqw 0.32cqw rgba(255, 255, 255, 0.48),
    inset 0 -0.18cqw 0.3cqw rgba(9, 85, 131, 0.24);
  font-size: 1.73cqw;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: filter 180ms ease, transform 180ms ease;
}

.cta:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.cta:focus-visible {
  outline: 0.18cqw solid #fff;
  outline-offset: 0.28cqw;
}

.visual-stage {
  position: absolute;
  z-index: 3;
  inset: 0;
}

.person {
  position: absolute;
  z-index: 3;
  left: 55.35%;
  top: 43%;
  width: 5.7%;
  height: auto;
  filter: saturate(0.9) contrast(1.08) drop-shadow(0 0 0.7cqw rgba(0, 13, 37, 0.75));
}

.person-reflection {
  position: absolute;
  z-index: 1;
  left: 56.35%;
  top: 81.6%;
  width: 4.5%;
  height: 16%;
  transform: perspective(20cqw) rotateX(54deg) skewX(-4deg);
  transform-origin: center top;
  background: linear-gradient(180deg, rgba(0, 7, 18, 0.6), transparent 87%);
  clip-path: polygon(29% 0, 72% 0, 100% 100%, 8% 100%);
  filter: blur(0.62cqw);
  opacity: 0.46;
}

.service-card {
  position: absolute;
  z-index: 4;
  top: 31.1%;
  width: 12.65%;
  height: 38.3%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(154, 250, 255, 0.9);
  border-radius: 1.55cqw;
  background: linear-gradient(155deg, rgba(37, 156, 255, 0.18), rgba(39, 213, 215, 0.08));
  box-shadow:
    0 1.3cqw 3.5cqw rgba(0, 8, 30, 0.26),
    inset 0 0 2.4cqw rgba(71, 222, 255, 0.12),
    inset 0 0 0 1px rgba(234, 255, 255, 0.1);
  backdrop-filter: blur(0.72cqw) saturate(1.25);
  -webkit-backdrop-filter: blur(0.72cqw) saturate(1.25);
}

.chatgpt-card {
  left: 62.35%;
  transform: perspective(70cqw) rotateY(-1.5deg) rotateZ(-0.45deg);
}

.claude-card {
  top: 28.25%;
  left: 76.8%;
  width: 13.4%;
  height: 41.8%;
  transform: perspective(70cqw) rotateY(-3deg) rotateZ(0.6deg);
  background: linear-gradient(148deg, rgba(28, 185, 219, 0.12), rgba(51, 229, 192, 0.14));
}

.card-sheen {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 52% 30%, rgba(255, 255, 255, 0.15), transparent 26%),
    linear-gradient(112deg, rgba(255, 255, 255, 0.1), transparent 34% 70%, rgba(77, 255, 230, 0.08));
  pointer-events: none;
}

.brand-icon {
  position: relative;
  z-index: 1;
  width: 6.45cqw;
  height: 6.45cqw;
  margin-top: 2.8cqw;
  display: grid;
  place-items: center;
}

.brand-icon img {
  display: block;
  width: 100%;
  height: 100%;
  filter: invert(1) brightness(2) drop-shadow(0 0 0.48cqw rgba(217, 255, 255, 0.82));
}

.icon-claude {
  width: 6.9cqw;
  height: 6.9cqw;
  margin-top: 3.8cqw;
}

.service-card h2 {
  position: relative;
  z-index: 1;
  margin: 1.42cqw 0 0;
  color: #f8fcff;
  font-size: 1.82cqw;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 0 0 0.72cqw rgba(179, 247, 255, 0.5);
}

.claude-card h2 {
  margin-top: 1.5cqw;
}

.plan-pill {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: 3.75cqw;
  height: 1.84cqw;
  margin-top: 1.38cqw;
  padding: 0 0.73cqw;
  border-radius: 999px;
  color: #001423;
  background: rgba(35, 174, 255, 0.84);
  box-shadow: 0 0 1cqw rgba(20, 169, 255, 0.28);
  font-size: 1.04cqw;
  font-weight: 700;
  line-height: 1;
}

.claude-card .plan-pill {
  background: rgba(50, 230, 205, 0.88);
  box-shadow: 0 0 1cqw rgba(38, 242, 207, 0.25);
}

@media (max-width: 700px) {
  .page-shell {
    align-items: start;
  }

  .banner {
    width: 100vw;
    min-height: 100svh;
    aspect-ratio: auto;
    border-radius: 0 0 6.5vw 6.5vw;
  }

  .copy-block {
    left: 7%;
    top: 7.5%;
    width: 86%;
  }

  .eyebrow {
    gap: 2.5vw;
    height: 11vw;
    padding: 0 4.5vw 0 3.7vw;
    font-size: 4vw;
  }

  .sparkle {
    width: 4.8vw;
    height: 4.8vw;
  }

  h1 {
    margin: 7vw 0 4vw;
    font-size: 8.5vw;
    line-height: 1.3;
  }

  .title-product {
    font-size: 7.3vw;
    white-space: nowrap;
  }

  .title-line,
  .title-product {
    transform: none;
  }

  .description {
    font-size: 3.8vw;
    line-height: 1.75;
  }

  .description br {
    display: none;
  }

  .cta {
    width: 44vw;
    height: 13vw;
    margin-top: 5.5vw;
    font-size: 4.7vw;
  }

  .light-wall {
    top: 58%;
    right: -8%;
    width: 96%;
    height: 39%;
  }

  .ambient-blue {
    left: -8%;
    top: 56%;
    width: 72%;
    height: 35%;
  }

  .ambient-cyan {
    right: -18%;
    top: 55%;
    width: 75%;
    height: 40%;
  }

  .floor,
  .horizon {
    top: auto;
    bottom: -1%;
    left: 0;
    width: 100%;
    height: 22%;
  }

  .service-card {
    top: 65%;
    width: 34%;
    height: 25%;
    border-radius: 4vw;
  }

  .chatgpt-card {
    left: 24%;
  }

  .claude-card {
    left: 61%;
  }

  .brand-icon {
    width: 14vw;
    height: 14vw;
    margin-top: 6vw;
  }

  .icon-claude {
    width: 17vw;
    height: 17vw;
    margin-top: 5vw;
  }

  .service-card h2 {
    margin-top: 3.5vw;
    font-size: 4.5vw;
  }

  .claude-card h2 {
    margin-top: 1.5vw;
  }

  .plan-pill {
    min-width: 10vw;
    height: 4.8vw;
    margin-top: 4vw;
    padding: 0 2vw;
    font-size: 2.8vw;
  }

  .person {
    left: 4%;
    top: 68%;
    width: 20%;
  }

  .person-reflection {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta {
    transition: none;
  }
}