.hero {
  overflow: hidden;
}

.hero-main {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr);
  align-items: center;
  gap: clamp(30px, 5vw, 90px);
}

.hero-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.hero-logo-stage {
  position: relative;
  z-index: 1;
  width: min(37vw, 520px);
  height: min(47vw, 590px);
  justify-self: end;
  margin-right: -2vw;
}

.hero-company-name {
  position: absolute;
  left: 50%;
  bottom: 16.5%;
  z-index: 3;
  margin: 0;
  color: rgba(232, 241, 248, .68);
  font: 500 9px "Noto Sans SC", sans-serif;
  letter-spacing: .18em;
  white-space: nowrap;
  transform: translateX(-50%);
  text-shadow: 0 0 18px rgba(92, 169, 255, .34);
}

.logo-builder-v15 {
  --cube-size: clamp(158px, 18.5vw, 262px);
  --cube-half: calc(var(--cube-size) / 2);
  --ice-white: #f5fbff;
  --ice-blue: #7ec9ff;
  --ice-green: #c8ffcf;
  --glass-edge: rgba(224, 244, 255, .92);
  --glass-dark: rgba(7, 15, 24, .42);
  --pointer-x: -7deg;
  --pointer-y: 7deg;
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: white;
  outline: none;
  cursor: default;
  perspective: 1250px;
  isolation: isolate;
}

.logo-builder-v15:focus-visible::after {
  content: "";
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(174, 222, 255, .4);
  border-radius: 34px;
}

.logo-aura-v15 {
  position: absolute;
  width: 56%;
  height: 56%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 68% 72%, rgba(72, 157, 255, .62), transparent 33%),
    radial-gradient(circle at 27% 70%, rgba(162, 255, 193, .36), transparent 32%),
    rgba(130, 201, 255, .16);
  filter: blur(78px);
  opacity: .82;
  animation: auraBreatheV15 6.8s ease-in-out infinite;
}

.logo-ground-v15 {
  position: absolute;
  left: 50%;
  top: 69%;
  width: 56%;
  height: 15%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse, rgba(96, 167, 255, .32), transparent 58%),
    radial-gradient(ellipse at 30% 48%, rgba(183, 255, 200, .22), transparent 48%);
  filter: blur(18px);
  transform: translateX(-50%) rotateX(68deg);
  opacity: .74;
  transition: opacity .5s ease, transform .7s ease;
}

.logo-view-v15 {
  position: relative;
  width: var(--cube-size);
  height: var(--cube-size);
  display: block;
  transform-style: preserve-3d;
  transform:
    rotateX(calc(-16deg + var(--pointer-x)))
    rotateY(calc(27deg + var(--pointer-y)));
  transition: transform .8s cubic-bezier(.18, .72, .2, 1);
}

.logo-builder-v15.is-engaged .logo-view-v15 {
  transition-duration: .28s;
}

.logo-float-v15 {
  position: absolute;
  inset: 0;
  display: block;
  transform-style: preserve-3d;
  animation: restrainedFloatV15 7.5s ease-in-out infinite;
}

.xinyao-cube-v15,
.cube-vertices-v15 {
  position: absolute;
  inset: 0;
  display: block;
  transform-style: preserve-3d;
}

.cube-vertex-v15 {
  --vertex-position: translate3d(0, 0, 0);
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px;
  border-radius: 50%;
  background: var(--ice-white);
  box-shadow: 0 0 10px rgba(255, 255, 255, .95), 0 0 24px rgba(107, 192, 255, .9);
  opacity: .22;
  transform: var(--vertex-position);
  animation: vertexAssemblyV15 10s cubic-bezier(.2, .75, .2, 1) infinite alternate;
}

.vertex-1 { --vertex-position: translate3d(calc(-1 * var(--cube-half)), calc(-1 * var(--cube-half)), var(--cube-half)); }
.vertex-2 { --vertex-position: translate3d(var(--cube-half), calc(-1 * var(--cube-half)), var(--cube-half)); }
.vertex-3 { --vertex-position: translate3d(var(--cube-half), var(--cube-half), var(--cube-half)); }
.vertex-4 { --vertex-position: translate3d(calc(-1 * var(--cube-half)), var(--cube-half), var(--cube-half)); }
.vertex-5 { --vertex-position: translate3d(calc(-1 * var(--cube-half)), calc(-1 * var(--cube-half)), calc(-1 * var(--cube-half))); }
.vertex-6 { --vertex-position: translate3d(var(--cube-half), calc(-1 * var(--cube-half)), calc(-1 * var(--cube-half))); }
.vertex-7 { --vertex-position: translate3d(var(--cube-half), var(--cube-half), calc(-1 * var(--cube-half))); }
.vertex-8 { --vertex-position: translate3d(calc(-1 * var(--cube-half)), var(--cube-half), calc(-1 * var(--cube-half))); }

.cube-face-v15 {
  --face-final: translateZ(var(--cube-half));
  --face-draft: translate3d(-45px, 20px, calc(var(--cube-half) + 84px)) rotateZ(-5deg);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  transform: var(--face-final);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  opacity: 1;
  animation: faceAssemblyV15 10s cubic-bezier(.2, .72, .18, 1) infinite alternate;
  transition: transform .44s cubic-bezier(.18, .85, .2, 1), opacity .3s ease;
}

.cube-face-front {
  --face-final: translateZ(var(--cube-half));
  --face-draft: translate3d(-52px, 24px, calc(var(--cube-half) + 86px)) rotateZ(-4deg);
}

.cube-face-back {
  --face-final: rotateY(180deg) translateZ(var(--cube-half));
  --face-draft: rotateY(180deg) translate3d(42px, -34px, calc(var(--cube-half) + 92px)) rotateZ(4deg);
}

.cube-face-right {
  --face-final: rotateY(90deg) translateZ(var(--cube-half));
  --face-draft: rotateY(90deg) translate3d(70px, -8px, calc(var(--cube-half) + 88px)) rotateZ(4deg);
}

.cube-face-left {
  --face-final: rotateY(-90deg) translateZ(var(--cube-half));
  --face-draft: rotateY(-90deg) translate3d(-68px, 10px, calc(var(--cube-half) + 76px)) rotateZ(-4deg);
}

.cube-face-top {
  --face-final: rotateX(90deg) translateZ(var(--cube-half));
  --face-draft: rotateX(90deg) translate3d(8px, -72px, calc(var(--cube-half) + 86px)) rotateZ(5deg);
}

.cube-face-bottom {
  --face-final: rotateX(-90deg) translateZ(var(--cube-half));
  --face-draft: rotateX(-90deg) translate3d(-8px, 70px, calc(var(--cube-half) + 82px)) rotateZ(-5deg);
}

.glass-material-v15,
.glass-frame-v15 {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}

.glass-material-v15 {
  background:
    linear-gradient(132deg, rgba(255, 255, 255, .21) 0%, rgba(255, 255, 255, .035) 32%, rgba(91, 164, 230, .11) 69%, rgba(180, 255, 204, .08) 100%),
    radial-gradient(circle at 18% 14%, rgba(255, 255, 255, .13), transparent 24%),
    var(--glass-dark);
  box-shadow: inset 0 0 44px rgba(170, 218, 255, .1), inset 0 -34px 65px rgba(12, 50, 91, .16);
  backdrop-filter: blur(14px) saturate(1.24);
  opacity: 1;
  animation: materialAssemblyV15 10s ease-in-out infinite alternate;
  transition: opacity .4s ease;
}

.cube-face-front .glass-material-v15 { background-color: rgba(12, 28, 42, .34); }
.cube-face-right .glass-material-v15 { background-color: rgba(6, 18, 33, .5); }
.cube-face-top .glass-material-v15 { background-color: rgba(27, 47, 66, .26); }
.cube-face-back .glass-material-v15,
.cube-face-left .glass-material-v15,
.cube-face-bottom .glass-material-v15 { background-color: rgba(4, 10, 18, .58); }

.glass-frame-v15 {
  border: 1px solid var(--glass-edge);
  box-shadow:
    inset 0 0 0 3px rgba(201, 233, 255, .055),
    inset 0 0 24px rgba(155, 211, 255, .13),
    0 0 7px rgba(203, 235, 255, .82),
    0 0 21px rgba(72, 153, 255, .28);
  opacity: .95;
  animation: frameAssemblyV15 10s ease-in-out infinite alternate;
  transition: opacity .28s ease, box-shadow .35s ease;
}

.glass-frame-v15::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(210, 240, 255, .2);
  box-shadow: inset 0 0 14px rgba(255, 255, 255, .06);
}

.camera-symbol-v15,
.x-symbol-v15,
.y-symbol-v15 {
  position: relative;
  display: block;
  transform-style: preserve-3d;
  transform: translateZ(9px);
  opacity: 1;
  animation: symbolAssemblyV15 10s cubic-bezier(.18, .72, .2, 1) infinite alternate;
  transition: opacity .32s ease, transform .4s cubic-bezier(.18, .85, .2, 1);
}

.camera-symbol-v15 {
  width: 72%;
  height: 58%;
}

.camera-body-v15,
.camera-lens-v15 {
  position: absolute;
  top: 27%;
  height: 45%;
  border: clamp(4px, .46vw, 7px) solid rgba(222, 239, 249, .9);
  background: rgba(9, 20, 30, .22);
  box-shadow: inset 0 0 14px rgba(139, 210, 255, .18), 0 0 8px rgba(206, 237, 255, .48), 0 0 22px rgba(102, 184, 255, .2);
  transform: translateZ(5px);
}

.camera-body-v15 {
  left: 8%;
  width: 50%;
  border-radius: 13%;
}

.camera-lens-v15 {
  left: 68%;
  width: 22%;
  border-radius: 18%;
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

.camera-body-v15::after,
.camera-lens-v15::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 2px solid rgba(76, 135, 184, .3);
  transform: translateZ(-7px) translate(3px, 4px);
}

.x-symbol-v15 {
  width: 88%;
  height: 88%;
}

.x-symbol-v15 b {
  position: absolute;
  left: 42%;
  top: -12%;
  width: 18%;
  height: 124%;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(185, 215, 237, .9), var(--ice-white) 38%, rgba(200, 226, 244, .78));
  border: 1px solid rgba(255, 255, 255, .74);
  box-shadow: inset -5px -4px 10px rgba(63, 118, 165, .24), 0 0 13px rgba(215, 242, 255, .58);
  transform-style: preserve-3d;
}

.x-symbol-v15 b::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(90, 148, 194, .3);
  transform: translateZ(-7px) translate(4px, 4px);
}

.x-symbol-v15 b:first-child { transform: rotate(45deg) translateZ(5px); }
.x-symbol-v15 b:last-child { transform: rotate(-45deg) translateZ(7px); }

.y-symbol-v15 {
  width: 86%;
  height: 96%;
  background: linear-gradient(90deg, rgba(179, 211, 235, .82), var(--ice-white) 43%, rgba(198, 224, 242, .76));
  border: 1px solid rgba(255, 255, 255, .68);
  clip-path: polygon(0 0, 25% 0, 50% 34%, 75% 0, 100% 0, 63% 52%, 63% 100%, 37% 100%, 37% 52%);
  filter: drop-shadow(0 0 6px rgba(224, 245, 255, .84)) drop-shadow(0 0 16px rgba(102, 180, 255, .3));
}

.y-symbol-v15 b {
  position: absolute;
  inset: 0;
  background: rgba(65, 124, 168, .28);
  clip-path: inherit;
  transform: translateZ(-8px) translate(5px, 4px);
}

.cube-volume-v15 {
  position: absolute;
  inset: 22%;
  border-radius: 18%;
  background:
    radial-gradient(circle at 65% 72%, rgba(76, 151, 255, .3), transparent 50%),
    radial-gradient(circle at 24% 70%, rgba(173, 255, 199, .18), transparent 46%);
  filter: blur(24px);
  transform: translateZ(0);
  opacity: .8;
  animation: volumeAssemblyV15 10s ease-in-out infinite alternate;
}

.cube-light-v15 {
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 18px white, 0 0 38px rgba(72, 155, 255, .82);
  opacity: .72;
}

.light-one-v15 { left: 12%; bottom: 5%; transform: translateZ(calc(var(--cube-half) + 3px)); }
.light-two-v15 { right: -2%; bottom: -2%; transform: translateZ(4px); background: var(--ice-blue); }

.build-progress-v15 {
  position: absolute;
  left: 50%;
  bottom: 10%;
  display: flex;
  gap: 15px;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .38);
  font: 7px "DM Mono", monospace;
  letter-spacing: .08em;
  white-space: nowrap;
}

.build-progress-v15 i { display: flex; gap: 4px; font-style: normal; }
.build-progress-v15 b { color: var(--ice-blue); font-weight: 650; }

.logo-hint-v15 {
  position: absolute;
  bottom: 3%;
  padding: 7px 10px;
  border: 1px solid rgba(205, 235, 255, .14);
  border-radius: 999px;
  color: rgba(225, 241, 250, .63);
  background: rgba(4, 11, 18, .34);
  backdrop-filter: blur(12px);
  font: 8px "DM Mono", monospace;
  letter-spacing: .08em;
  white-space: nowrap;
}

.logo-builder-v15.is-engaged .cube-face-v15 {
  animation: none;
  opacity: 1;
  transform: var(--face-final);
}

.logo-builder-v15.is-engaged .glass-material-v15,
.logo-builder-v15.is-engaged .glass-frame-v15,
.logo-builder-v15.is-engaged .camera-symbol-v15,
.logo-builder-v15.is-engaged .x-symbol-v15,
.logo-builder-v15.is-engaged .y-symbol-v15,
.logo-builder-v15.is-engaged .cube-volume-v15 {
  animation: none;
  opacity: 1;
}

.logo-builder-v15.is-engaged .camera-symbol-v15,
.logo-builder-v15.is-engaged .x-symbol-v15,
.logo-builder-v15.is-engaged .y-symbol-v15 { transform: translateZ(9px); }

.logo-builder-v15.is-engaged .cube-vertex-v15 {
  animation: none;
  opacity: .18;
  transform: var(--vertex-position) scale(.72);
}

.logo-builder-v15.is-engaged .logo-ground-v15 {
  opacity: .92;
  transform: translateX(-50%) rotateX(68deg) scale(1.08);
}

@keyframes auraBreatheV15 {
  50% { transform: scale(1.13); filter: blur(92px); opacity: .62; }
}

@keyframes restrainedFloatV15 {
  0%, 100% { transform: translate3d(0, -4px, 0) rotateZ(-.35deg); }
  50% { transform: translate3d(0, 5px, 0) rotateZ(.35deg); }
}

@keyframes vertexAssemblyV15 {
  0% { opacity: 0; transform: var(--vertex-position) scale(0); }
  10%, 28% { opacity: 1; transform: var(--vertex-position) scale(1.16); }
  47% { opacity: .72; transform: var(--vertex-position) scale(.9); }
  72%, 100% { opacity: .18; transform: var(--vertex-position) scale(.72); }
}

@keyframes faceAssemblyV15 {
  0%, 18% { opacity: 0; transform: var(--face-final) scale(.76); }
  31% { opacity: .68; transform: var(--face-final) scale(1); }
  48% { opacity: .94; transform: var(--face-draft) scale(1); }
  72%, 100% { opacity: 1; transform: var(--face-final) scale(1); }
}

@keyframes frameAssemblyV15 {
  0%, 18% { opacity: 0; }
  31%, 48% { opacity: .92; }
  72%, 100% { opacity: 1; }
}

@keyframes materialAssemblyV15 {
  0%, 38% { opacity: 0; }
  56% { opacity: .52; }
  72%, 100% { opacity: 1; }
}

@keyframes symbolAssemblyV15 {
  0%, 52% { opacity: 0; transform: translateZ(2px) scale(.76); }
  72%, 100% { opacity: 1; transform: translateZ(9px) scale(1); }
}

@keyframes volumeAssemblyV15 {
  0%, 54% { opacity: 0; transform: scale(.4); }
  76%, 100% { opacity: .8; transform: scale(1); }
}

@media (max-width: 980px) and (min-width: 761px) {
  .hero-main { grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 18px; }
  .hero-logo-stage { width: 36vw; height: 48vw; margin-right: -3vw; }
  .logo-builder-v15 { --cube-size: clamp(150px, 21vw, 220px); }
  .build-progress-v15 { gap: 8px; }
}

@media (max-width: 760px) {
  .hero-main { position: relative; display: block; }
  .hero-copy { z-index: 3; }
  .hero-logo-stage {
    position: absolute;
    z-index: 1;
    top: -24vw;
    right: -19vw;
    width: 62vw;
    height: 70vw;
    margin: 0;
    pointer-events: none;
  }
  .hero-logo-stage .logo-builder-v15 { opacity: .56; }
  .hero-company-name {
    bottom: -20%;
    font-size: 7.5px;
    letter-spacing: .1em;
    opacity: .72;
  }
  .logo-builder-v15 { --cube-size: clamp(142px, 43vw, 210px); }
  .glass-material-v15 { backdrop-filter: blur(8px) saturate(1.12); }
  .logo-hint-v15,
  .build-progress-v15 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .logo-builder-v15 *,
  .logo-builder-v15 *::before,
  .logo-builder-v15 *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .logo-builder-v15 .cube-face-v15 { opacity: 1; transform: var(--face-final); }
  .logo-builder-v15 .glass-material-v15,
  .logo-builder-v15 .glass-frame-v15,
  .logo-builder-v15 .camera-symbol-v15,
  .logo-builder-v15 .x-symbol-v15,
  .logo-builder-v15 .y-symbol-v15,
  .logo-builder-v15 .cube-volume-v15 { opacity: 1; }
  .logo-builder-v15 .cube-vertex-v15 { opacity: .16; transform: var(--vertex-position) scale(.72); }
}

@media (update: slow) {
  .glass-material-v15 { backdrop-filter: none; }
  .cube-light-v15,
  .cube-volume-v15 { display: none; }
  .logo-aura-v15 { filter: blur(48px); }
}