/* ==========================================================================
   启昊塑胶 · 首页（front-page.php）
   风格：macOS 27 / Liquid Glass —— 品牌蓝为主，色母粒全色谱点缀
   玻璃三档：实心 #fbfcfe → 半透明 color-mix → backdrop-filter blur(24px)
   ========================================================================== */

.qh-home {
  --qh-brand: #0a63e8;
  --qh-brand-deep: #0649b8;
  --qh-brand-soft: #eaf1fe;
  --qh-ink: #14161a;
  --qh-text: #3d414a;
  --qh-muted: #63666e;
  --qh-hairline: rgba(16, 24, 40, .09);
  --qh-hairline-soft: rgba(16, 24, 40, .06);
  --qh-glass-1: rgba(255, 255, 255, .92);
  --qh-glass-2: rgba(255, 255, 255, .72);
  --qh-glass-3: rgba(255, 255, 255, .55);
  --qh-sh-1: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 12px rgba(16, 24, 40, .05);
  --qh-sh-2: 0 2px 6px rgba(16, 24, 40, .05), 0 12px 32px rgba(16, 24, 40, .08);
  --qh-sh-3: 0 6px 14px rgba(16, 24, 40, .07), 0 26px 60px rgba(16, 24, 40, .13);
  --qh-r-xs: 8px;
  --qh-r-sm: 12px;
  --qh-r-md: 16px;
  --qh-r-lg: 22px;
  --qh-r-xl: 28px;
  --qh-r-2xl: 34px;
  --qh-ease: cubic-bezier(.16, .84, .44, 1);

  position: relative;
  overflow: hidden;
  font-family: var(--qihao-font, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif);
  color: var(--qh-text);
  background: linear-gradient(180deg, #f7f9fd 0%, #fbfcfe 30%, #ffffff 100%);
}

.qh-home *,
.qh-home *::before,
.qh-home *::after { box-sizing: border-box; }
.qh-home h1, .qh-home h2, .qh-home h3 { color: var(--qh-ink); margin: 0; letter-spacing: -.022em; }
.qh-home p { margin: 0; }
.qh-home a { text-decoration: none; }
.qh-home ul, .qh-home ol { margin: 0; padding: 0; list-style: none; }

.qh-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; }

/* ---------- 玻璃基类（带降级） ---------- */
.qh-home .qh-glass {
  background: linear-gradient(180deg, var(--qh-glass-1) 0%, var(--qh-glass-2) 100%);
  border: 1px solid rgba(255, 255, 255, .78);
  box-shadow: var(--qh-sh-2);
}
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .qh-home .qh-glass {
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
  }
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .qh-home .qh-glass { background: #fff; }
}

/* ---------- 彩色光斑 ---------- */
.qh-aura { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.qh-au { position: absolute; border-radius: 50%; opacity: .5; }
.qh-au-1 { width: 620px; height: 620px; top: -220px; left: -180px; background: radial-gradient(circle, rgba(26, 110, 224, .34), transparent 68%); }
.qh-au-2 { width: 560px; height: 560px; top: 240px; right: -200px; background: radial-gradient(circle, rgba(124, 77, 188, .28), transparent 68%); }
.qh-au-3 { width: 640px; height: 640px; top: 1500px; left: -240px; background: radial-gradient(circle, rgba(14, 165, 183, .24), transparent 68%); }
.qh-au-4 { width: 520px; height: 520px; top: 2500px; right: -180px; background: radial-gradient(circle, rgba(217, 70, 168, .2), transparent 68%); }
.qh-au-5 { width: 580px; height: 580px; top: 3400px; left: 26%; background: radial-gradient(circle, rgba(240, 165, 43, .2), transparent 68%); }

/* ==========================================================================
   HERO
   ========================================================================== */
.qh-hero {
  position: relative;
  z-index: 1;
  padding: 76px 0 88px;
}
.qh-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(10, 99, 232, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 99, 232, .07) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 78% at 50% 0%, #000 0%, transparent 72%);
  mask-image: radial-gradient(120% 78% at 50% 0%, #000 0%, transparent 72%);
  pointer-events: none;
}
.qh-hero-wrap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: 56px;
  align-items: center;
}

.qh-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--qh-brand);
}
.qh-eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(10, 99, 232, .16);
}
.qh-eyebrow-light { color: rgba(255, 255, 255, .82); }
.qh-eyebrow-light .qh-eyebrow-dot { box-shadow: 0 0 0 4px rgba(255, 255, 255, .2); }

.qh-hero-title {
  font-size: clamp(38px, 5.4vw, 62px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.035em;
  margin: 0 0 20px;
}
.qh-hero-title em {
  display: block;
  font-style: normal;
  background: linear-gradient(96deg, #0a63e8 0%, #4a5fd8 42%, #7c4dbc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.qh-hero-lead {
  max-width: 560px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--qh-muted);
}
.qh-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 32px 0 0; }

.qh-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 50px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 15.5px;
  font-weight: 620;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .25s var(--qh-ease), box-shadow .25s var(--qh-ease),
              background .25s var(--qh-ease), border-color .25s var(--qh-ease);
}
.qh-btn-ico { width: 18px; height: 18px; transition: transform .28s var(--qh-ease); }
.qh-btn:hover .qh-btn-ico { transform: translateX(4px); }
.qh-btn-primary {
  color: #fff;
  background: linear-gradient(180deg, #1d74ec 0%, #0a63e8 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 8px 22px rgba(10, 99, 232, .32);
}
.qh-btn-primary:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 14px 30px rgba(10, 99, 232, .38); }
.qh-btn-ghost {
  color: var(--qh-ink);
  background: var(--qh-glass-1);
  border-color: var(--qh-hairline);
  box-shadow: var(--qh-sh-1);
}
.qh-btn-ghost:hover { transform: translateY(-2px); border-color: rgba(10, 99, 232, .35); color: var(--qh-brand); box-shadow: var(--qh-sh-2); }
.qh-btn-sm { height: 42px; padding: 0 20px; font-size: 14.5px; }
.qh-btn-light { color: var(--qh-brand-deep); background: #fff; box-shadow: 0 8px 22px rgba(4, 20, 55, .22); }
.qh-btn-light:hover { transform: translateY(-2px); }
.qh-btn-outline { color: #fff; border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .1); }
.qh-btn-outline:hover { background: rgba(255, 255, 255, .2); transform: translateY(-2px); }

.qh-hero-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 40px 0 0;
  padding: 20px 4px 4px;
  border-top: 1px solid var(--qh-hairline-soft);
}
.qh-hero-facts li { display: flex; flex-direction: column; gap: 3px; }
.qh-hero-facts b {
  font-size: 30px;
  font-weight: 750;
  letter-spacing: -.03em;
  color: var(--qh-ink);
  font-variant-numeric: tabular-nums;
}
.qh-hero-facts span { font-size: 12.8px; color: var(--qh-muted); }

/* ---------- HERO 视觉装置 ---------- */
.qh-hero-art { position: relative; }
.qh-art {
  position: relative;
  border-radius: var(--qh-r-2xl);
  padding: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .62) 100%);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), var(--qh-sh-3);
}
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .qh-art {
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
  }
}
.qh-art-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 6px 14px;
}
.qh-art-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.qh-art-label {
  margin-left: auto;
  font: 600 11.5px/1 var(--qihao-font-mono, ui-monospace, monospace);
  letter-spacing: .04em;
  color: var(--qh-muted);
}

.qh-art-stage { position: relative; height: 300px; }
.qh-disc {
  position: absolute;
  left: 50%; top: 50%;
  width: 200px; height: 200px;
  margin: -100px 0 0 -100px;
  border-radius: 50%;
  background: conic-gradient(from 200deg,
    #1a6ee0 0deg, #5f6fd8 45deg, #7c4dbc 90deg, #d946a8 140deg,
    #e8543f 180deg, #f0a52b 225deg, #2e9e60 270deg, #0ea5b7 315deg, #1a6ee0 360deg);
  box-shadow: 0 12px 34px rgba(16, 24, 40, .18), inset 0 0 0 1px rgba(255, 255, 255, .35);
  animation: qhSpin 46s linear infinite;
}
.qh-disc-ring {
  position: absolute; inset: 15px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .42);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);
}
.qh-disc-core {
  position: absolute; inset: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #ffffff 0%, #f4f7fb 52%, #e7ecf4 100%);
  box-shadow: inset 0 -10px 22px rgba(16, 24, 40, .1), 0 8px 20px rgba(16, 24, 40, .12);
}
.qh-disc-shine {
  position: absolute; inset: 46px;
  border-radius: 50%;
  background: linear-gradient(148deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, 0) 46%);
}
@keyframes qhSpin { to { transform: rotate(360deg); } }

.qh-pellet {
  position: absolute;
  width: 30px; height: 17px;
  border-radius: 999px;
  background: linear-gradient(160deg, #ffffff 0%, var(--c) 42%, color-mix(in srgb, var(--c) 72%, #0b1220) 100%);
  box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, .8), 0 7px 14px rgba(16, 24, 40, .16);
  z-index: 2;
  animation: qhFloat 7s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.qh-pellet.p1 { --c: #1a6ee0; top: 6%;  left: 9%;  transform: rotate(-18deg); --d: .1s; }
.qh-pellet.p2 { --c: #7c4dbc; top: 15%; right: 8%; transform: rotate(24deg) scale(.9); --d: .9s; }
.qh-pellet.p3 { --c: #0ea5b7; top: 56%; left: 4%;  transform: rotate(-8deg) scale(.94); --d: 1.7s; }
.qh-pellet.p4 { --c: #e8543f; bottom: 8%; right: 14%; transform: rotate(16deg); --d: .5s; }
.qh-pellet.p5 { --c: #f0a52b; bottom: 24%; left: 18%; transform: rotate(-30deg) scale(.86); --d: 2.2s; }
.qh-pellet.p6 { --c: #2e9e60; top: 42%; right: 3%; transform: rotate(12deg) scale(.92); --d: 1.3s; }
.qh-pellet.p7 { --c: #d946a8; bottom: 14%; left: 42%; transform: rotate(-12deg); --d: 2.8s; }
.qh-pellet.p8 { --c: #4062d8; top: 3%;  left: 48%; transform: rotate(30deg) scale(.8); --d: .6s; }
@keyframes qhFloat {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -12px; }
}

.qh-art-foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 14px; }
.qh-art-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 11px;
  border-radius: var(--qh-r-sm);
  background: rgba(255, 255, 255, .82);
  border: 1px solid var(--qh-hairline-soft);
  transition: transform .25s var(--qh-ease), box-shadow .25s var(--qh-ease);
}
.qh-art-chip:hover { transform: translateY(-2px); box-shadow: var(--qh-sh-1); }
.qh-chip-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.qh-chip-name { font-size: 12.5px; font-weight: 600; color: var(--qh-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qh-chip-num { margin-left: auto; font: 650 12px/1 var(--qihao-font-mono, ui-monospace, monospace); color: var(--qh-muted); }

.qh-art-badge {
  position: absolute;
  left: -14px; bottom: 186px;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-radius: var(--qh-r-lg);
  background: rgba(255, 255, 255, .93);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: var(--qh-sh-2);
  color: var(--qh-brand);
  z-index: 3;
}
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .qh-art-badge { -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%); }
}
.qh-badge-ico { width: 22px; height: 22px; flex: 0 0 auto; }
.qh-art-badge span { display: flex; flex-direction: column; }
.qh-art-badge strong { font-size: 13.5px; font-weight: 680; color: var(--qh-ink); }
.qh-art-badge em { font-style: normal; font-size: 11.8px; color: var(--qh-muted); }

/* ==========================================================================
   信任条
   ========================================================================== */
.qh-strip { position: relative; z-index: 1; padding: 0 0 8px; }
.qh-strip-card {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
  border-radius: var(--qh-r-xl);
  background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .68));
  border: 1px solid rgba(255, 255, 255, .78);
  box-shadow: var(--qh-sh-2);
}
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .qh-strip-card { -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); }
}
.qh-strip-item { display: flex; align-items: center; gap: 12px; min-width: 0; }
.qh-strip-ico {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border-radius: 13px;
  display: grid; place-items: center;
  color: var(--qh-brand);
  background: linear-gradient(160deg, rgba(255, 255, 255, .95), var(--qh-brand-soft));
  border: 1px solid rgba(10, 99, 232, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}
.qh-strip-ico .qh-ico { width: 21px; height: 21px; }
.qh-strip-txt { display: flex; flex-direction: column; min-width: 0; }
.qh-strip-txt strong { font-size: 14.5px; font-weight: 650; color: var(--qh-ink); }
.qh-strip-txt em { font-style: normal; font-size: 12.6px; color: var(--qh-muted); line-height: 1.5; }
.qh-strip-sep { width: 1px; height: 34px; background: var(--qh-hairline); }

/* ==========================================================================
   通用分区
   ========================================================================== */
.qh-section { position: relative; z-index: 1; padding: 92px 0; }
.qh-section-soft {
  background: rgba(255, 255, 255, .5);
  border-top: 1px solid rgba(255, 255, 255, .7);
  border-bottom: 1px solid rgba(255, 255, 255, .7);
}
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .qh-section-soft { -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); }
}

.qh-sechead { max-width: 780px; margin: 0 auto 54px; text-align: center; }
.qh-sechead h2 { font-size: clamp(26px, 3.3vw, 40px); line-height: 1.24; margin: 12px 0 14px; font-weight: 750; }
.qh-sechead-sub { font-size: 16.5px; line-height: 1.7; color: var(--qh-muted); }
.qh-sechead-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; max-width: none; text-align: left;
}
.qh-sechead-row p.qh-eyebrow { margin-bottom: 10px; }

/* ==========================================================================
   三大产品线
   ========================================================================== */
.qh-lines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.qh-line {
  position: relative;
  display: flex; flex-direction: column;
  border-radius: var(--qh-r-xl);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .93), rgba(255, 255, 255, .7));
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: var(--qh-sh-2);
  transition: transform .38s var(--qh-ease), box-shadow .38s var(--qh-ease);
}
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .qh-line { -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); }
}
.qh-line:hover { transform: translateY(-6px); box-shadow: var(--qh-sh-3); }

.qh-line-art {
  position: relative;
  height: 172px;
  overflow: hidden;
  background: linear-gradient(165deg, color-mix(in srgb, var(--accent) 13%, #ffffff) 0%, #ffffff 78%);
  border-bottom: 1px solid var(--qh-hairline-soft);
}
.qh-line-glow {
  position: absolute;
  width: 240px; height: 240px;
  left: -60px; top: -110px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 40%, transparent) 0%, transparent 68%);
}
.qh-line-shape { position: absolute; inset: 26px; border-radius: 18px; }
.is-filler .qh-line-shape {
  background-image: repeating-linear-gradient(115deg,
    color-mix(in srgb, var(--accent) 22%, transparent) 0 9px,
    transparent 9px 21px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent);
}
.is-color .qh-line-shape {
  inset: 56px 26px;
  border-radius: 14px;
  background: linear-gradient(90deg, #14181f 0%, #e8543f 16%, #f0a52b 30%, #2e9e60 44%, #0ea5b7 58%, #1a6ee0 74%, #7c4dbc 88%, #f4f6fa 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 20px rgba(16, 24, 40, .1);
}
.is-additive .qh-line-shape {
  background-image:
    repeating-radial-gradient(circle at 50% 50%,
      color-mix(in srgb, var(--accent) 34%, transparent) 0 1.5px,
      transparent 1.5px 17px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent);
}
.qh-line-badge {
  position: absolute;
  right: 18px; top: 18px;
  display: flex; align-items: baseline; gap: 4px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: var(--qh-sh-1);
  color: var(--accent);
}
.qh-line-badge { font: 700 18px/1 var(--qihao-font-mono, ui-monospace, monospace); }
.qh-line-badge em { font: 600 11.5px/1 inherit; font-style: normal; color: var(--qh-muted); }

.qh-line-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1 1 auto; }
.qh-line-body h3 { font-size: 20.5px; font-weight: 700; }
.qh-line-desc { margin: 10px 0 0; font-size: 14.2px; line-height: 1.7; color: var(--qh-muted); }
.qh-line-pts { display: flex; flex-direction: column; gap: 7px; margin: 16px 0 0; }
.qh-line-pts li { display: flex; align-items: center; gap: 8px; font-size: 13.6px; font-weight: 550; color: var(--qh-text); }
.qh-pt-ico { width: 17px; height: 17px; color: var(--accent); flex: 0 0 auto; }
.qh-line-subs { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0 0; }
.qh-pill {
  display: inline-flex; align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12.6px; font-weight: 550;
  color: var(--qh-text);
  background: rgba(255, 255, 255, .8);
  border: 1px solid var(--qh-hairline-soft);
  transition: background .22s var(--qh-ease), color .22s var(--qh-ease), border-color .22s var(--qh-ease);
}
.qh-pill:hover { background: color-mix(in srgb, var(--accent) 12%, #ffffff); border-color: color-mix(in srgb, var(--accent) 30%, transparent); color: color-mix(in srgb, var(--accent) 78%, #14161a); }
.qh-line-more {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 20px 0 0; padding-top: 16px;
  border-top: 1px solid var(--qh-hairline-soft);
  font-size: 14px; font-weight: 620;
  color: var(--accent);
}
.qh-more-ico { width: 17px; height: 17px; transition: transform .28s var(--qh-ease); }
.qh-line-more:hover .qh-more-ico { transform: translateX(4px); }

/* ==========================================================================
   热门牌号
   ========================================================================== */
.qh-grades { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.qh-grade {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border-radius: var(--qh-r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, .93), rgba(255, 255, 255, .72));
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: var(--qh-sh-1);
  transition: transform .3s var(--qh-ease), box-shadow .3s var(--qh-ease), border-color .3s var(--qh-ease);
}
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .qh-grade { -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); }
}
.qh-grade:hover { transform: translateY(-4px); box-shadow: var(--qh-sh-2); border-color: color-mix(in srgb, var(--accent) 32%, transparent); }
.qh-grade-swatch {
  position: relative;
  flex: 0 0 auto;
  width: 62px; height: 62px;
  border-radius: var(--qh-r-md);
  overflow: hidden;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--accent) 26%, #ffffff) 0%,
    color-mix(in srgb, var(--accent) 62%, #ffffff) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 5px 12px color-mix(in srgb, var(--accent) 24%, transparent);
  display: grid; place-items: center;
}
.qh-grade-grain {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 26% 30%, rgba(255, 255, 255, .8) 0 2.4px, transparent 3px),
    radial-gradient(circle at 70% 62%, rgba(255, 255, 255, .62) 0 2px, transparent 2.6px),
    radial-gradient(circle at 45% 78%, rgba(255, 255, 255, .5) 0 1.6px, transparent 2.2px);
  opacity: .8;
}
.qh-grade-code {
  position: relative;
  font: 700 12px/1.1 var(--qihao-font-mono, ui-monospace, monospace);
  color: #fff;
  text-shadow: 0 1px 3px rgba(6, 20, 48, .45);
  letter-spacing: .01em;
  max-width: 56px;
  text-align: center;
  word-break: break-all;
}
.qh-grade-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.qh-grade-name {
  font-size: 14px; font-weight: 620; color: var(--qh-ink); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.qh-grade-cat { font-size: 12px; color: var(--qh-muted); }
.qh-grade-go { flex: 0 0 auto; color: var(--accent); opacity: .55; transition: opacity .28s var(--qh-ease), transform .28s var(--qh-ease); }
.qh-go-ico { width: 17px; height: 17px; }
.qh-grade:hover .qh-grade-go { opacity: 1; transform: translateX(3px); }

/* ==========================================================================
   应用场景
   ========================================================================== */
.qh-apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.qh-app {
  padding: 26px 24px 24px;
  border-radius: var(--qh-r-xl);
  background: linear-gradient(180deg, rgba(255, 255, 255, .93), rgba(255, 255, 255, .7));
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: var(--qh-sh-1);
  transition: transform .34s var(--qh-ease), box-shadow .34s var(--qh-ease);
}
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .qh-app { -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); }
}
.qh-app:hover { transform: translateY(-5px); box-shadow: var(--qh-sh-2); }
.qh-app-ico {
  display: grid; place-items: center;
  width: 50px; height: 50px;
  border-radius: 15px;
  color: var(--qh-brand);
  background: linear-gradient(160deg, #ffffff, var(--qh-brand-soft));
  border: 1px solid rgba(10, 99, 232, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 4px 12px rgba(10, 99, 232, .1);
  margin-bottom: 16px;
}
.qh-app-ico .qh-ico { width: 24px; height: 24px; }
.qh-app h3 { font-size: 18.5px; font-weight: 680; }
.qh-app p { margin: 9px 0 0; font-size: 13.8px; line-height: 1.7; color: var(--qh-muted); }
.qh-app-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.qh-tag {
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  color: #0a4fc0;
  background: rgba(10, 99, 232, .09);
  border: 1px solid rgba(10, 99, 232, .12);
}

/* ==========================================================================
   服务流程
   ========================================================================== */
.qh-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; position: relative; }
.qh-step { position: relative; padding: 4px 6px 0; }
.qh-step::after {
  content: "";
  position: absolute;
  top: 46px; right: -14px;
  width: 28px; height: 2px;
  background: linear-gradient(90deg, rgba(10, 99, 232, .38), rgba(10, 99, 232, 0));
}
.qh-step:last-child::after { display: none; }
.qh-step-num { font: 700 12.5px/1 var(--qihao-font-mono, ui-monospace, monospace); letter-spacing: .12em; color: var(--qh-brand); }
.qh-step-ico {
  display: grid; place-items: center;
  width: 58px; height: 58px;
  margin: 14px 0 16px;
  border-radius: 18px;
  color: var(--qh-brand);
  background: linear-gradient(165deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .78));
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 6px 18px rgba(16, 24, 40, .08);
}
.qh-step-ico .qh-ico { width: 26px; height: 26px; }
.qh-step h3 { font-size: 17.5px; font-weight: 680; }
.qh-step p { margin: 8px 0 0; font-size: 13.6px; line-height: 1.7; color: var(--qh-muted); }

/* ==========================================================================
   核心能力
   ========================================================================== */
.qh-caps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
  padding: 26px;
  border-radius: var(--qh-r-2xl);
  background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .64));
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: var(--qh-sh-2);
}
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .qh-caps { -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); }
}
.qh-cap { display: flex; gap: 14px; padding: 6px; }
.qh-cap-ico {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 14px;
  color: var(--qh-brand);
  background: linear-gradient(160deg, #ffffff, var(--qh-brand-soft));
  border: 1px solid rgba(10, 99, 232, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}
.qh-cap-ico .qh-ico { width: 21px; height: 21px; }
.qh-cap h3 { font-size: 16px; font-weight: 650; }
.qh-cap p { margin: 6px 0 0; font-size: 13.4px; line-height: 1.65; color: var(--qh-muted); }

/* ==========================================================================
   CTA
   ========================================================================== */
.qh-cta-sec { padding-bottom: 96px; }
.qh-cta-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  border-radius: var(--qh-r-2xl);
  overflow: hidden;
  background: linear-gradient(135deg, #0a63e8 0%, #0b53c4 48%, #123a8f 100%);
  box-shadow: 0 26px 64px rgba(10, 99, 232, .3), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.qh-cta-card::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(760px 320px at 12% 8%, rgba(255, 255, 255, .2), transparent 62%),
    radial-gradient(560px 300px at 92% 96%, rgba(124, 77, 188, .34), transparent 62%);
  pointer-events: none;
}
.qh-cta-copy { position: relative; padding: 52px 48px; color: #fff; }
.qh-cta-copy h2 { color: #fff; font-size: clamp(24px, 2.8vw, 34px); line-height: 1.3; margin: 10px 0 14px; font-weight: 750; }
.qh-cta-sub { font-size: 15.5px; line-height: 1.75; color: rgba(255, 255, 255, .84); max-width: 470px; }
.qh-cta-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.qh-cta-contact {
  position: relative;
  padding: 44px 40px;
  background: rgba(255, 255, 255, .1);
  border-left: 1px solid rgba(255, 255, 255, .18);
}
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .qh-cta-contact { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}
.qh-contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.qh-contact-item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px;
  border-radius: var(--qh-r-md);
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  transition: background .25s var(--qh-ease), transform .25s var(--qh-ease);
}
.qh-contact-item:hover { background: rgba(255, 255, 255, .2); transform: translateY(-2px); }
.qh-ci-ico { flex: 0 0 auto; color: rgba(255, 255, 255, .9); }
.qh-ci-ico .qh-ico { width: 20px; height: 20px; }
.qh-contact-item span { display: flex; flex-direction: column; min-width: 0; }
.qh-contact-item em { font-style: normal; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .68); }
.qh-contact-item strong { font-size: 14.5px; font-weight: 620; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qh-contact-item.qh-contact-mail strong,
.qh-contact-item.qh-contact-addr strong {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.4;
}
.qh-contact-item.qh-contact-mail strong { font-size: 13.5px; word-break: break-all; }
.qh-contact-addr strong { white-space: normal; }
.qh-contact-qr {
  grid-column: span 2;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  border-radius: var(--qh-r-lg);
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 8px 22px rgba(4, 20, 55, .2);
}
.qh-contact-qr img { width: 78px; height: 78px; border-radius: 10px; flex: 0 0 auto; display: block; }
.qh-contact-qr span { font-size: 13px; font-weight: 620; color: var(--qh-ink); line-height: 1.5; }

/* ==========================================================================
   入场动画
   ========================================================================== */
.qh-anim .qh-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s var(--qh-ease) var(--d, 0ms), transform .8s var(--qh-ease) var(--d, 0ms);
}
.qh-anim .qh-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .qh-anim .qh-reveal { opacity: 1; transform: none; transition: none; }
  .qh-disc { animation: none; }
  .qh-pellet { animation: none; }
}

/* ==========================================================================
   响应式
   ========================================================================== */
@media (max-width: 1080px) {
  .qh-hero { padding: 56px 0 64px; }
  .qh-hero-wrap { grid-template-columns: 1fr; gap: 44px; }
  .qh-hero-lead { max-width: none; }
  .qh-lines { grid-template-columns: 1fr; }
  .qh-grades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qh-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qh-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qh-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 22px; }
  .qh-step::after { display: none; }
  .qh-strip-card { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 22px; }
  .qh-strip-sep { display: none; }
  .qh-section { padding: 72px 0; }
  .qh-cta-card { grid-template-columns: 1fr; }
  .qh-cta-contact { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .18); }
}

@media (max-width: 720px) {
  .qh-wrap { padding: 0 16px; }
  .qh-section { padding: 56px 0; }
  .qh-sechead { margin-bottom: 36px; }
  .qh-sechead-row { flex-direction: column; align-items: flex-start; }
  .qh-hero-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .qh-hero-facts b { font-size: 26px; }
  .qh-hero-actions .qh-btn { width: 100%; justify-content: center; }
  .qh-art-stage { height: 250px; }
  .qh-disc { width: 160px; height: 160px; margin: -80px 0 0 -80px; }
  .qh-art-badge { position: static; width: max-content; margin: 16px 4px 0; }
  .qh-art-foot { grid-template-columns: 1fr; }
  .qh-grades { grid-template-columns: 1fr; }
  .qh-apps { grid-template-columns: 1fr; }
  .qh-caps { grid-template-columns: 1fr; padding: 18px; }
  .qh-strip-card { grid-template-columns: 1fr; padding: 18px; }
  .qh-cta-copy { padding: 34px 24px; }
  .qh-cta-contact { padding: 26px 20px 32px; }
  .qh-contact-grid { grid-template-columns: 1fr; }
  .qh-contact-qr { grid-column: span 1; }
  .qh-btn-sm { width: auto; }
}