/* Chinese homepage-only visual polish extracted from the local shared stylesheet. */
:root {
  --ink-soft: #5c6a7e;
  --shadow-soft: 0 18px 48px rgba(9, 36, 77, 0.14);
}

html {
  background-image: linear-gradient(180deg, rgba(8, 28, 48, 0.08) 0, rgba(8, 28, 48, 0) 180px);
}

body {
  background:
    radial-gradient(circle at 14% -12%, rgba(69, 191, 255, .12) 0%, transparent 44%),
    radial-gradient(circle at 88% 2%, rgba(119, 96, 255, .10) 0%, transparent 46%),
    linear-gradient(180deg, #f8fbff 0%, #eef3fa 45%, #f3f7fc 100%);
  font-family: "Inter", "Source Sans 3", "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
  background-attachment: fixed;
  position: relative;
  overflow-x: hidden;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(117, 208, 255, .9);
  outline-offset: 2px;
}

.section {
  position: relative;
}

.section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(126, 211, 252, .4), transparent);
  opacity: .32;
}

.site-header.scrolled::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  height: 1px;
  width: min(1220px, calc(100vw - 36px));
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(126, 211, 252, .7), transparent);
  opacity: .8;
}

.button {
  letter-spacing: .01em;
}

.button span {
  transition: transform .25s;
}

.button:hover span {
  transform: translateX(4px);
}

.button-primary {
  box-shadow: 0 14px 36px rgba(65, 110, 255, .34);
}

.button-primary:hover {
  box-shadow: 0 18px 42px rgba(65, 110, 255, .48);
}

.button-light {
  border: 1px solid #d4def2;
  color: #0e1b2d;
  background: linear-gradient(115deg, #fefefe, #eef5ff);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32);
}

.button-light:hover {
  background: linear-gradient(115deg, #ffffff, #d8e5ff);
}

.overview {
  position: relative;
}

.overview::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 780px;
  height: 780px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(96, 200, 255, .16), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.body-explorer {
  background: linear-gradient(140deg, rgba(255, 255, 255, .86), rgba(252, 255, 255, .74));
  backdrop-filter: blur(4px);
}

.product-card,
.concept-card,
.application-card,
.data-flow article {
  position: relative;
  overflow: hidden;
  background-clip: padding-box;
}

.product-card::before,
.concept-card::before,
.application-card::before,
.data-flow article::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(130deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .06));
  opacity: 0;
  transition: opacity .35s ease;
}

.product-card:hover::before,
.concept-card:hover::before,
.application-card:hover::before,
.data-flow article:hover::before {
  opacity: .72;
}

.product-card:hover,
.concept-card:hover,
.application-card:hover,
.data-flow article:hover {
  box-shadow: var(--shadow-soft);
}

.product-content,
.concept-content,
.concept-image img,
.application-card {
  transition: transform .35s ease;
}

.product-card:hover .product-content,
.concept-card:hover .concept-content,
.application-card:hover .application-content {
  transform: translateY(-4px);
}

.application-card small {
  margin-top: 0;
}

.about-values > div {
  padding: 16px 0;
  border-top: 1px solid rgba(220, 227, 235, .7);
}

.qh-brand-stage {
  animation: qhStageFloat 9s ease-in-out infinite;
}

.qh-brand-canvas {
  animation: qhCanvasShift 10s ease-in-out infinite;
}

.qh-orbit-a {
  animation: polishOrbitSpin 22s linear infinite;
}

.qh-orbit-b {
  animation: polishOrbitSpinReverse 26s linear infinite;
}

.qh-stage-grid {
  animation: polishGridPulse 16s ease-in-out infinite;
}

.qh-signal-tag {
  transition: transform .3s, border-color .3s, box-shadow .3s;
}

.qh-signal-tag:hover {
  transform: translateY(-4px) scale(1.02);
}

@keyframes polishOrbitSpin {
  from { transform: rotate(-12deg); }
  to { transform: rotate(348deg); }
}

@keyframes polishOrbitSpinReverse {
  from { transform: rotate(18deg); }
  to { transform: rotate(-342deg); }
}

@keyframes qhStageFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

@keyframes qhCanvasShift {
  0%, 100% { transform: translateX(0) rotate(0.001deg); }
  50% { transform: translateX(8px) rotate(-0.6deg); }
}

@keyframes polishGridPulse {
  0%, 100% { opacity: .22; }
  50% { opacity: .32; }
}