/* ==========================================================================
   红鹰工作手机 · 设计系统
   风格基线：腾讯企点 qidian.qq.com 同源视觉
   主蓝 #0067ED / 蓝紫渐变 265deg(#5fa9ff→#2970fc→#ce65f7)
   卡片渐变 98.29deg(#4a70ff→#66bfff) / 文字 #222 / 副文 #999
   ========================================================================== */

/* ---------- 1. 变量 ---------- */
:root {
  --hy-primary: #0067ed;
  --hy-primary-dark: #0056c7;
  --hy-primary-light: #197dff;
  --hy-primary-sky: #5fa9ff;
  --hy-primary-50: #eaf2fe;
  --hy-primary-100: #d6e6fd;
  --hy-primary-200: #b9d4fb;
  --hy-blue-v: #2970fc;
  --hy-purple: #ce65f7;
  --hy-grad-qd: linear-gradient(265deg, #6cb5ff 0%, #2e72ff 40%, #7a3cf2 74%, #cf4cf0 100%);
  --hy-grad-card: linear-gradient(135deg, #2e6bff 0%, #00b0ff 100%);
  --hy-grad-text: linear-gradient(95deg, #2e72ff 0%, #0067ed 42%, #b44ef0 100%);

  --hy-text: #222;
  --hy-text-2: #999;
  --hy-text-3: #a9abb2;
  --hy-text-inverse: #ffffff;

  --hy-border: #e5eaf2;
  --hy-border-soft: #f0f3f8;
  --hy-bg: #ffffff;
  --hy-bg-soft: #f7fafb;
  --hy-bg-deep: #0f1a2e;

  --hy-gold: #d1a941;
  --hy-gold-soft: #fff1ce;
  --hy-cyan: #4ee2d9;
  --hy-danger: #e24747;
  --hy-success: #12a150;

  --hy-radius-sm: 8px;
  --hy-radius: 12px;
  --hy-radius-lg: 16px;
  --hy-radius-xl: 24px;

  --hy-shadow-sm: 0 2px 8px rgba(30, 48, 74, 0.04);
  --hy-shadow: 0 8px 24px rgba(30, 48, 74, 0.07);
  --hy-shadow-lg: 0 16px 48px rgba(0, 103, 237, 0.12);

  --hy-container: 1200px;
  --hy-header-h: 72px;

  --hy-font: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* 关键：滚动条槽位常驻，弹窗/抽屉开关时页面不抖动 */
  scrollbar-gutter: stable;
}

/* 细滚动条，减少占位感 */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: #f2f5fa; }
::-webkit-scrollbar-thumb { background: #c3cfdf; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #a7b7cc; }

body {
  margin: 0;
  font-family: var(--hy-font);
  font-size: 15px;
  line-height: 1.7;
  color: var(--hy-text);
  background: var(--hy-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; line-height: 1.35; color: var(--hy-text); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; transition: color .25s ease; }
img { max-width: 100%; display: block; border: 0; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
input, textarea, select { font-family: inherit; font-size: inherit; outline: none; }

/* ---------- 3. 布局 ---------- */
.hy-container {
  width: 100%;
  max-width: var(--hy-container);
  margin: 0 auto;
  padding: 0 24px;
}

.hy-section { padding: 88px 0; }
.hy-section--soft { background: var(--hy-bg-soft); }
.hy-section--tight { padding: 56px 0; }

.hy-section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
.hy-section-head.is-left { text-align: left; margin-left: 0; }

.hy-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--hy-primary);
  background: var(--hy-primary-50);
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.hy-h1 { font-size: 52px; line-height: 1.2; letter-spacing: -0.02em; }
.hy-h2 { font-size: 38px; line-height: 1.28; letter-spacing: -0.01em; }
.hy-h3 { font-size: 24px; }
.hy-h4 { font-size: 18px; }

.hy-lead {
  font-size: 17px;
  color: var(--hy-text-2);
  line-height: 1.75;
  margin-top: 18px;
}

.hy-muted { color: var(--hy-text-2); }
.hy-small { font-size: 13px; }

/* ---------- 4. 按钮（企点式：实色蓝 / 小圆角 / hover 加深） ---------- */
.hy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 34px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  transition: all .2s ease;
}
.hy-btn--primary {
  background: var(--hy-primary);
  color: #fff;
}
.hy-btn--primary:hover {
  background: var(--hy-primary-dark);
  box-shadow: 0 8px 22px rgba(0, 103, 237, .28);
}
.hy-btn--ghost {
  border: 1px solid var(--hy-primary);
  color: var(--hy-primary);
  background: #fff;
}
.hy-btn--ghost:hover {
  background: var(--hy-primary-50);
  border-color: var(--hy-primary-dark);
  color: var(--hy-primary-dark);
}
.hy-btn--light {
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
}
.hy-btn--light:hover { background: rgba(255, 255, 255, .22); }
.hy-btn--white {
  background: #fff;
  color: var(--hy-primary);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .14);
}
.hy-btn--white:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 0, 0, .2); }
.hy-btn--outline-w {
  border: 1px solid rgba(255, 255, 255, .8);
  color: #fff;
  background: transparent;
}
.hy-btn--outline-w:hover { background: rgba(255, 255, 255, .12); }
.hy-btn--sm { height: 40px; padding: 0 20px; font-size: 14px; }
.hy-btn--block { width: 100%; }

.hy-arrow { width: 16px; height: 16px; transition: transform .28s ease; }
.hy-btn:hover .hy-arrow { transform: translateX(4px); }

/* ---------- 5. 顶部导航 ---------- */
.hy-header {
  position: sticky;
  top: 0;
  z-index: 900;
  height: var(--hy-header-h);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--hy-border-soft);
  transition: box-shadow .3s ease;
}
.hy-header.is-scrolled { box-shadow: 0 4px 20px rgba(30, 48, 74, .07); }

.hy-header__inner {
  height: var(--hy-header-h);
  display: flex;
  align-items: center;
  gap: 40px;
}

.hy-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.hy-logo__img {
  height: 42px;
  width: auto;
  display: block;
}
.hy-logo__mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--hy-grad-card);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0, 103, 237, .28);
}
.hy-logo__mark img { display: block; }
.hy-logo__text small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--hy-text-2);
  letter-spacing: .04em;
  margin-top: -2px;
}

.hy-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }

.hy-nav__item { position: relative; }
.hy-nav__link {
  display: flex;
  align-items: center;
  gap: 5px;
  height: var(--hy-header-h);
  padding: 0 16px;
  font-size: 15px;
  color: var(--hy-text);
  position: relative;
}
.hy-nav__link::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--hy-primary);
  transform: scaleX(0);
  transition: transform .28s ease;
}
.hy-nav__item:hover .hy-nav__link,
.hy-nav__link.active { color: var(--hy-primary); }
.hy-nav__item:hover .hy-nav__link::after,
.hy-nav__link.active::after { transform: scaleX(1); }

.hy-nav__caret {
  width: 9px; height: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: .5;
  transition: transform .28s ease;
}
.hy-nav__item:hover .hy-nav__caret { transform: rotate(225deg) translateY(-2px); }

/* 下拉菜单 */
.hy-dropdown {
  position: absolute;
  top: calc(var(--hy-header-h) - 8px);
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 260px;
  background: #fff;
  border: 1px solid var(--hy-border);
  border-radius: var(--hy-radius-lg);
  box-shadow: 0 16px 40px rgba(30, 48, 74, .12);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transition: all .26s ease;
}
.hy-nav__item:hover .hy-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.hy-dropdown__link {
  display: block;
  padding: 11px 14px;
  border-radius: var(--hy-radius-sm);
  font-size: 14px;
  color: var(--hy-text);
  transition: all .2s ease;
}
.hy-dropdown__link small {
  display: block;
  font-size: 12px;
  color: var(--hy-text-3);
  margin-top: 2px;
}
.hy-dropdown__link:hover {
  background: var(--hy-primary-50);
  color: var(--hy-primary);
}

.hy-header__cta { margin-left: 12px; display: flex; align-items: center; gap: 10px; }
.hy-header__phone {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  font-weight: 600;
  color: var(--hy-primary);
}

/* 移动端菜单按钮 */
.hy-burger {
  display: none;
  width: 42px; height: 42px;
  border-radius: var(--hy-radius-sm);
  border: 1px solid var(--hy-border);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  margin-left: auto;
}
.hy-burger span {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--hy-text);
  border-radius: 2px;
  transition: all .3s ease;
}

/* ---------- 6. Hero / Banner ---------- */
.hy-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1000px 500px at 82% -10%, rgba(206, 101, 247, .13), transparent 60%),
    radial-gradient(1100px 560px at 66% 0%, rgba(41, 112, 252, .14), transparent 62%),
    radial-gradient(900px 460px at 4% 106%, rgba(95, 169, 255, .12), transparent 58%),
    linear-gradient(180deg, #fbfcff 0%, #ffffff 100%);
  color: var(--hy-text);
  border-bottom: 1px solid var(--hy-border-soft);
}
.hy-hero::before {
  content: "";
  position: absolute;
  width: 820px; height: 820px;
  right: -240px; top: -360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(41, 112, 252, .16), transparent 62%);
  pointer-events: none;
}
.hy-hero::after {
  content: "";
  position: absolute;
  width: 620px; height: 620px;
  left: -260px; bottom: -340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(206, 101, 247, .1), transparent 64%);
  pointer-events: none;
}

.hy-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 64px;
  padding: 96px 0 104px;
}

.hy-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--hy-primary-100);
  color: var(--hy-primary);
  box-shadow: 0 2px 10px rgba(0, 103, 237, .08);
  margin-bottom: 22px;
}
.hy-hero__eyebrow i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--hy-cyan);
  box-shadow: 0 0 0 4px rgba(78, 226, 217, .2);
}

.hy-hero__title {
  font-size: 56px;
  line-height: 1.18;
  letter-spacing: -.025em;
  color: var(--hy-text);
  font-weight: 700;
}
.hy-hero__title em {
  font-style: normal;
  background: var(--hy-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hy-hero__desc {
  margin-top: 22px;
  font-size: 17px;
  line-height: 1.85;
  color: var(--hy-text-2);
  max-width: 540px;
}

.hy-hero__actions { margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; }

/* Hero 信任徽标条（替代编造数字） */
.hy-hero__trust {
  margin-top: 42px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.hy-hero__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid var(--hy-primary-100);
  font-size: 13px;
  font-weight: 500;
  color: var(--hy-text);
  box-shadow: 0 2px 10px rgba(30, 60, 120, .05);
  white-space: nowrap;
}
.hy-hero__trust-item svg {
  width: 16px;
  height: 16px;
  color: var(--hy-primary);
  flex-shrink: 0;
}

/* Banner 指示点 */
.hy-hero__dots {
  display: flex;
  gap: 9px;
  margin-top: 30px;
}
.hy-hero__visual { position: relative; }
.hy-hero__phone {
  position: relative;
  width: 300px;
  margin: 0 auto;
  border-radius: 38px;
  padding: 12px;
  background: linear-gradient(160deg, #ffffff, #eef3fc);
  border: 1px solid #dfe8f6;
  box-shadow: 0 34px 80px rgba(16, 58, 122, .18), 0 8px 24px rgba(16, 58, 122, .08);
}
.hy-hero__screen {
  border-radius: 34px;
  background: #0a1526;
  overflow: hidden;
  padding: 30px 18px 22px;
  min-height: 452px;
}
.hy-hero__screen-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.hy-hero__avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--hy-primary-light), var(--hy-cyan));
}
.hy-hero__screen-head b { font-size: 13px; color: #fff; font-weight: 500; }
.hy-hero__screen-head span { font-size: 11px; color: rgba(255, 255, 255, .45); display: block; }

.hy-chat { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.hy-chat__row { display: flex; }
.hy-chat__row.is-right { justify-content: flex-end; }
.hy-chat__bubble {
  max-width: 78%;
  padding: 9px 13px;
  font-size: 12px;
  line-height: 1.6;
  border-radius: 12px;
  background: rgba(255, 255, 255, .09);
  color: rgba(255, 255, 255, .88);
}
.hy-chat__row.is-right .hy-chat__bubble {
  background: var(--hy-grad-card);
  color: #fff;
}
.hy-chat__alert {
  margin-top: 6px;
  display: flex;
  gap: 9px;
  padding: 11px 12px;
  border-radius: 10px;
  background: rgba(226, 71, 71, .14);
  border: 1px solid rgba(226, 71, 71, .34);
  font-size: 11.5px;
  line-height: 1.6;
  color: #ffc9c9;
}
.hy-chat__alert b { color: #ff8f8f; display: block; font-size: 11px; margin-bottom: 2px; }

.hy-hero__badge {
  position: absolute;
  background: rgba(255, 255, 255, .96);
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
  font-size: 12px;
  color: var(--hy-text);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.hy-hero__badge b { color: var(--hy-primary); font-size: 13px; }
.hy-hero__badge--1 { top: 40px; left: -46px; animation: hyFloat 5s ease-in-out infinite; }
.hy-hero__badge--2 { bottom: 66px; right: -54px; animation: hyFloat 5s ease-in-out infinite .8s; }
.hy-hero__badge i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--hy-success);
  box-shadow: 0 0 0 3px rgba(18, 161, 80, .18);
}

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

/* Banner 指示点 */
.hy-hero__dots button {
  width: 26px;
  height: 3px;
  border-radius: 3px;
  background: #d5dfee;
  transition: all .3s ease;
  padding: 0;
}
.hy-hero__dots button.active {
  width: 42px;
  background: #fff;
}

/* ---------- 7. 页面头部（内页） ---------- */
.hy-pagehead {
  position: relative;
  padding: 64px 0 58px;
  background:
    radial-gradient(900px 420px at 82% -20%, rgba(0, 103, 237, .09), transparent 64%),
    linear-gradient(180deg, #f6f9ff 0%, #ffffff 100%);
  color: var(--hy-text);
  border-bottom: 1px solid var(--hy-border-soft);
  overflow: hidden;
}
.hy-pagehead::before {
  content: "";
  position: absolute;
  width: 600px; height: 600px;
  right: -180px; top: -300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(78, 226, 217, .14), transparent 66%);
}
.hy-pagehead__inner { position: relative; z-index: 2; }
.hy-pagehead h1 {
  font-size: 40px;
  color: var(--hy-text);
  letter-spacing: -.02em;
}
.hy-pagehead p {
  margin-top: 14px;
  font-size: 16px;
  color: var(--hy-text-2);
  max-width: 720px;
  line-height: 1.8;
}

.hy-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--hy-text-3);
  margin-bottom: 18px;
}
.hy-crumb a { color: var(--hy-text-3); }
.hy-crumb a:hover { color: var(--hy-primary); }
.hy-crumb span.sep { opacity: .45; }

/* ---------- 8. 卡片通用 ---------- */
.hy-grid { display: grid; gap: 24px; }
.hy-grid--2 { grid-template-columns: repeat(2, 1fr); }
.hy-grid--3 { grid-template-columns: repeat(3, 1fr); }
.hy-grid--4 { grid-template-columns: repeat(4, 1fr); }

.hy-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--hy-border);
  border-radius: var(--hy-radius-lg);
  padding: 32px 28px;
  transition: all .32s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
}
.hy-card:hover {
  transform: translateY(-5px);
  border-color: var(--hy-primary-100);
  box-shadow: var(--hy-shadow-lg);
}
.hy-card__icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, var(--hy-primary-50), #fff);
  border: 1px solid var(--hy-primary-100);
  color: var(--hy-primary);
  margin-bottom: 20px;
}
.hy-card__icon svg { width: 24px; height: 24px; }
.hy-card h3 { font-size: 19px; margin-bottom: 10px; }
.hy-card p { font-size: 14px; color: var(--hy-text-2); line-height: 1.75; }
.hy-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--hy-primary);
}
.hy-card__link svg { width: 14px; height: 14px; transition: transform .28s ease; }
.hy-card:hover .hy-card__link svg { transform: translateX(4px); }

.hy-card--flush { padding: 0; }
.hy-card--flush .hy-card__body { padding: 26px 24px 30px; }

.hy-card__cover {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(140deg, #eef4fd, #dfeafc);
  border-radius: var(--hy-radius-lg) var(--hy-radius-lg) 0 0;
}
.hy-card__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.hy-card:hover .hy-card__cover img { transform: scale(1.04); }

/* ---------- 9. 产品卡片 ---------- */
.hy-prod {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--hy-border);
  border-radius: var(--hy-radius-lg);
  padding: 34px 30px 30px;
  overflow: hidden;
  transition: all .32s cubic-bezier(.4, 0, .2, 1);
}
.hy-prod::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--hy-primary-light), var(--hy-cyan));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .36s ease;
}
.hy-prod:hover {
  transform: translateY(-6px);
  border-color: var(--hy-primary-100);
  box-shadow: var(--hy-shadow-lg);
}
.hy-prod:hover::before { transform: scaleX(1); }

.hy-prod__index {
  font-size: 13px;
  font-weight: 600;
  color: var(--hy-primary);
  opacity: .55;
  letter-spacing: .08em;
  margin-bottom: 14px;
}
.hy-prod__icon {
  width: 54px; height: 54px;
  border-radius: 15px;
  background: linear-gradient(140deg, var(--hy-primary), var(--hy-primary-light));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-bottom: 22px;
  box-shadow: 0 8px 20px rgba(0, 103, 237, .26);
}
.hy-prod__icon svg { width: 26px; height: 26px; }
.hy-prod h3 { font-size: 20px; margin-bottom: 8px; }
.hy-prod__sub { font-size: 13px; color: var(--hy-primary); margin-bottom: 12px; }
.hy-prod p { font-size: 14px; color: var(--hy-text-2); line-height: 1.75; flex: 1; }
.hy-prod__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--hy-text);
}
.hy-prod:hover .hy-prod__more { color: var(--hy-primary); }

/* ---------- 10. 数据条 ---------- */
.hy-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hy-border);
  border-radius: var(--hy-radius-lg);
  overflow: hidden;
  border: 1px solid var(--hy-border);
}
.hy-stats__item {
  background: #fff;
  padding: 34px 26px;
  text-align: center;
}
.hy-stats__num {
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -.02em;
  background: var(--hy-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hy-stats__num small { font-size: 18px; }
.hy-stats__label {
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--hy-text-2);
}

/* ---------- 11. 解决方案 ---------- */
.hy-sol {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 30px;
  background: #fff;
  border: 1px solid var(--hy-border);
  border-radius: var(--hy-radius-lg);
  transition: all .3s ease;
}
.hy-sol:hover {
  border-color: var(--hy-primary-100);
  box-shadow: var(--hy-shadow);
  transform: translateY(-3px);
}
.hy-sol__icon {
  flex-shrink: 0;
  width: 50px; height: 50px;
  border-radius: 13px;
  background: var(--hy-primary-50);
  color: var(--hy-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hy-sol__icon svg { width: 24px; height: 24px; }
.hy-sol h3 { font-size: 18px; margin-bottom: 6px; }
.hy-sol p { font-size: 14px; color: var(--hy-text-2); line-height: 1.7; }

/* ---------- 12. 案例卡 ---------- */
.hy-case {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--hy-border);
  border-radius: var(--hy-radius-lg);
  overflow: hidden;
  transition: all .32s ease;
}
.hy-case:hover {
  transform: translateY(-5px);
  box-shadow: var(--hy-shadow-lg);
  border-color: var(--hy-primary-100);
}
.hy-case__top {
  padding: 30px 28px 22px;
  background: linear-gradient(160deg, #f7fafd, #eef4fd);
  position: relative;
}
.hy-case__tag {
  display: inline-block;
  font-size: 12px;
  padding: 4px 11px;
  border-radius: 999px;
  background: #fff;
  color: var(--hy-primary);
  border: 1px solid var(--hy-primary-100);
  margin-bottom: 14px;
}
.hy-case__top h3 { font-size: 18px; line-height: 1.5; }
.hy-case__body { padding: 24px 28px 28px; flex: 1; display: flex; flex-direction: column; }
.hy-case__body p { font-size: 14px; color: var(--hy-text-2); line-height: 1.75; flex: 1; }
.hy-case__results {
  display: flex;
  gap: 22px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px dashed var(--hy-border);
}
.hy-case__results div b {
  display: block;
  font-size: 22px;
  font-weight: 600;
  color: var(--hy-primary);
  letter-spacing: -.01em;
}
.hy-case__results div span { font-size: 12px; color: var(--hy-text-3); }

/* ---------- 13. 资讯 ---------- */
.hy-news-list { display: flex; flex-direction: column; gap: 18px; }

.hy-news-item {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 26px;
  padding: 22px;
  background: #fff;
  border: 1px solid var(--hy-border);
  border-radius: var(--hy-radius-lg);
  transition: all .3s ease;
}
.hy-news-item:hover {
  border-color: var(--hy-primary-100);
  box-shadow: var(--hy-shadow);
  transform: translateY(-2px);
}
.hy-news-item__thumb {
  aspect-ratio: 16 / 10;
  border-radius: var(--hy-radius);
  overflow: hidden;
  background: linear-gradient(140deg, #eef4fd, #dfeafc);
}
.hy-news-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.hy-news-item__body { display: flex; flex-direction: column; justify-content: center; }
.hy-news-item__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  color: var(--hy-text-3);
  margin-bottom: 10px;
}
.hy-news-item__cat {
  color: var(--hy-primary);
  background: var(--hy-primary-50);
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
}
.hy-news-item h3 {
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 8px;
  transition: color .25s ease;
}
.hy-news-item:hover h3 { color: var(--hy-primary); }
.hy-news-item p {
  font-size: 13.5px;
  color: var(--hy-text-2);
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 资讯详情 */
.hy-article {
  background: #fff;
  border: 1px solid var(--hy-border);
  border-radius: var(--hy-radius-lg);
  padding: 48px 56px 56px;
}
.hy-article__head { padding-bottom: 28px; border-bottom: 1px solid var(--hy-border-soft); margin-bottom: 32px; }
.hy-article__head h1 { font-size: 32px; line-height: 1.4; letter-spacing: -.01em; }
.hy-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 18px;
  font-size: 13px;
  color: var(--hy-text-3);
}
.hy-article__meta .cat { color: var(--hy-primary); }

.hy-content { font-size: 15.5px; line-height: 1.92; color: #2b3b52; }
.hy-content h3 {
  font-size: 20px;
  margin: 36px 0 14px;
  padding-left: 13px;
  border-left: 3px solid var(--hy-primary);
  line-height: 1.5;
}
.hy-content h3:first-child { margin-top: 0; }
.hy-content p { margin: 16px 0; }
.hy-content img { border-radius: var(--hy-radius); margin: 22px auto; }
.hy-content ul, .hy-content ol { margin: 16px 0; padding-left: 22px; list-style: revert; }
.hy-content li { margin: 8px 0; }
.hy-content strong { color: var(--hy-text); font-weight: 600; }

.hy-article__foot {
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--hy-border-soft);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 14px;
}
.hy-article__foot a { color: var(--hy-text-2); }
.hy-article__foot a:hover { color: var(--hy-primary); }

/* ---------- 14. 侧栏 ---------- */
.hy-layout-2col {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  align-items: start;
}
.hy-side {
  position: sticky;
  top: calc(var(--hy-header-h) + 24px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.hy-side__box {
  background: #fff;
  border: 1px solid var(--hy-border);
  border-radius: var(--hy-radius-lg);
  padding: 26px 24px;
}
.hy-side__title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hy-border-soft);
}
.hy-side__cats { display: flex; flex-direction: column; gap: 4px; }
.hy-side__cats a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: var(--hy-radius-sm);
  font-size: 14px;
  color: var(--hy-text-2);
  transition: all .2s ease;
}
.hy-side__cats a:hover, .hy-side__cats a.active {
  background: var(--hy-primary-50);
  color: var(--hy-primary);
}

.hy-side__hot { display: flex; flex-direction: column; gap: 14px; }
.hy-side__hot a { display: flex; gap: 12px; font-size: 13.5px; line-height: 1.6; color: var(--hy-text-2); }
.hy-side__hot a:hover { color: var(--hy-primary); }
.hy-side__hot em {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 6px;
  background: var(--hy-bg-soft);
  color: var(--hy-text-3);
  font-style: normal;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hy-side__hot a:nth-child(-n+3) em {
  background: var(--hy-primary);
  color: #fff;
}

/* ---------- 15. 筛选条 ---------- */
.hy-filter {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.hy-filter a {
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid var(--hy-border);
  font-size: 14px;
  color: var(--hy-text-2);
  background: #fff;
  transition: all .24s ease;
}
.hy-filter a:hover { border-color: var(--hy-primary-sky); color: var(--hy-primary); }
.hy-filter a.active {
  background: var(--hy-primary);
  border-color: var(--hy-primary);
  color: #fff;
  box-shadow: 0 6px 16px rgba(0, 103, 237, .24);
}

/* ---------- 16. 分页 ---------- */
.hy-pager {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}
.hy-pager ul { display: flex; gap: 8px; flex-wrap: wrap; }
.hy-pager li a, .hy-pager li span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--hy-border);
  border-radius: var(--hy-radius-sm);
  font-size: 14px;
  color: var(--hy-text-2);
  background: #fff;
  transition: all .22s ease;
}
.hy-pager li a:hover { border-color: var(--hy-primary); color: var(--hy-primary); }
.hy-pager li.active span {
  background: var(--hy-primary);
  border-color: var(--hy-primary);
  color: #fff;
}
.hy-pager li.disabled span { opacity: .42; }

/* 兼容 ThinkPHP 默认分页结构 */
.hy-pager .pagination { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.hy-pager .pagination li a,
.hy-pager .pagination li span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--hy-border);
  border-radius: var(--hy-radius-sm);
  font-size: 14px;
  color: var(--hy-text-2);
  background: #fff;
  transition: all .22s ease;
}
.hy-pager .pagination li a:hover { border-color: var(--hy-primary); color: var(--hy-primary); }
.hy-pager .pagination li.active span {
  background: var(--hy-primary);
  border-color: var(--hy-primary);
  color: #fff;
}
.hy-pager .pagination li.disabled span { opacity: .42; }

/* ---------- 17. 表单 ---------- */
.hy-form { display: grid; gap: 18px; }
.hy-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.hy-field label {
  display: block;
  font-size: 13.5px;
  color: var(--hy-text-2);
  margin-bottom: 7px;
}
.hy-field input,
.hy-field textarea,
.hy-field select {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid var(--hy-border);
  border-radius: var(--hy-radius-sm);
  font-size: 14.5px;
  color: var(--hy-text);
  background: #fff;
  transition: all .22s ease;
}
.hy-field input:focus,
.hy-field textarea:focus,
.hy-field select:focus {
  border-color: var(--hy-primary);
  box-shadow: 0 0 0 3px rgba(0, 103, 237, .1);
}
.hy-field textarea { resize: vertical; min-height: 110px; }
.hy-field input::placeholder,
.hy-field textarea::placeholder { color: var(--hy-text-3); }

.hy-form-msg { font-size: 13.5px; min-height: 20px; }
.hy-form-msg.is-ok { color: var(--hy-success); }
.hy-form-msg.is-err { color: var(--hy-danger); }

/* ---------- 18. CTA 区块 ---------- */
.hy-cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--hy-radius-xl);
  padding: 68px 60px;
  background: linear-gradient(135deg, #0a1f42 0%, #0b46a8 55%, #0067ed 100%);
  color: #fff;
  text-align: center;
}
.hy-cta::before {
  content: "";
  position: absolute;
  width: 520px; height: 520px;
  right: -160px; top: -260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(78, 226, 217, .24), transparent 64%);
}
.hy-cta__inner { position: relative; z-index: 2; }
.hy-cta h2 { font-size: 34px; color: #fff; letter-spacing: -.01em; }
.hy-cta p {
  margin: 16px auto 0;
  max-width: 620px;
  font-size: 16px;
  color: rgba(255, 255, 255, .74);
  line-height: 1.8;
}
.hy-cta__actions { margin-top: 34px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- 19. 页脚（企点式浅色页脚） ---------- */
.hy-footer {
  background: #fbfcff;
  border-top: 1px solid var(--hy-border-soft);
  color: #666;
  padding-top: 64px;
  font-size: 14px;
}
.hy-footer__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 52px;
}
.hy-footer__brand .hy-logo { color: var(--hy-text); }
.hy-footer__brand .hy-logo__text small { color: var(--hy-text-2); }
.hy-footer__brand p {
  margin-top: 18px;
  line-height: 1.8;
  color: #999;
  max-width: 320px;
  font-size: 13.5px;
}
.hy-footer__contact { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; }
.hy-footer__contact b { color: var(--hy-primary); font-size: 24px; font-weight: 600; letter-spacing: .01em; }
.hy-footer__contact span { color: #999; }

.hy-footer__col h4 {
  color: var(--hy-text);
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 20px;
}
.hy-footer__col a {
  display: block;
  padding: 6px 0;
  color: #666;
  font-size: 13.5px;
  transition: color .22s ease;
}
.hy-footer__col a:hover { color: var(--hy-primary); }

.hy-footer__bottom {
  border-top: 1px solid var(--hy-border);
  padding: 24px 0 30px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #999;
}
.hy-footer__bottom a:hover { color: var(--hy-primary); }

/* ---------- 20. 悬浮咨询 ---------- */
.hy-float {
  position: fixed;
  right: 24px;
  bottom: 92px;
  z-index: 800;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hy-float__btn {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--hy-border);
  box-shadow: 0 8px 24px rgba(30, 48, 74, .14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hy-primary);
  transition: all .28s ease;
}
.hy-float__btn:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0, 103, 237, .22); }
.hy-float__btn.is-main {
  background: var(--hy-grad-card);
  color: #fff;
  border-color: transparent;
}
.hy-float__btn svg { width: 22px; height: 22px; }

.hy-backtop {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--hy-border);
  color: var(--hy-text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all .3s ease;
  z-index: 800;
}
.hy-backtop.show { opacity: 1; visibility: visible; }
.hy-backtop:hover { color: var(--hy-primary); border-color: var(--hy-primary); }

/* ---------- 21. 滚动渐入 ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.4, 0, .2, 1), transform .7s cubic-bezier(.4, 0, .2, 1);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- 22. 详情页专用 ---------- */
.hy-detail-hero {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 56px;
  align-items: center;
  padding: 20px 0 8px;
}
.hy-detail-hero h1 { font-size: 40px; line-height: 1.28; letter-spacing: -.02em; }
.hy-detail-hero .hy-lead { font-size: 16.5px; }

.hy-feature-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.hy-feature {
  display: flex;
  gap: 16px;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--hy-border);
  border-radius: var(--hy-radius);
  transition: all .28s ease;
}
.hy-feature:hover { border-color: var(--hy-primary-100); box-shadow: var(--hy-shadow-sm); }
.hy-feature__dot {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--hy-primary-50);
  color: var(--hy-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
}
.hy-feature h4 { font-size: 15.5px; margin-bottom: 5px; }
.hy-feature p { font-size: 13.5px; color: var(--hy-text-2); line-height: 1.7; }

.hy-pill-list { display: flex; flex-wrap: wrap; gap: 10px; }
.hy-pill {
  padding: 9px 18px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--hy-border);
  font-size: 14px;
  color: var(--hy-text-2);
}

.hy-pain-item {
  display: flex;
  gap: 14px;
  padding: 20px 22px;
  border-radius: var(--hy-radius);
  background: #fff;
  border: 1px solid var(--hy-border);
  border-left: 3px solid var(--hy-danger);
  font-size: 14.5px;
  color: var(--hy-text-2);
  line-height: 1.7;
}
.hy-plan-item {
  display: flex;
  gap: 14px;
  padding: 20px 22px;
  border-radius: var(--hy-radius);
  background: #fff;
  border: 1px solid var(--hy-border);
  border-left: 3px solid var(--hy-primary);
  font-size: 14.5px;
  color: var(--hy-text);
  line-height: 1.7;
}

.hy-toc {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hy-toc a {
  padding: 9px 13px;
  border-radius: var(--hy-radius-sm);
  font-size: 14px;
  color: var(--hy-text-2);
  border-left: 2px solid transparent;
}
.hy-toc a:hover { background: var(--hy-bg-soft); color: var(--hy-primary); }
.hy-toc a.active {
  color: var(--hy-primary);
  background: var(--hy-primary-50);
  border-left-color: var(--hy-primary);
}

/* ---------- 23. 404 ---------- */
.hy-404 {
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px;
}
.hy-404__code {
  font-size: 128px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  background: linear-gradient(135deg, var(--hy-primary), var(--hy-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hy-404 h1 { font-size: 26px; margin: 18px 0 10px; }
.hy-404 p { color: var(--hy-text-2); margin-bottom: 32px; }

/* ---------- 24. 响应式 ---------- */
@media (max-width: 1080px) {
  .hy-hero__inner { grid-template-columns: 1fr; gap: 48px; padding: 72px 0 80px; }
  .hy-hero__visual { order: -1; max-width: 380px; margin: 0 auto; }
  .hy-hero__title { font-size: 42px; }
  .hy-detail-hero { grid-template-columns: 1fr; gap: 32px; }
  .hy-layout-2col { grid-template-columns: 1fr; }
  .hy-side { position: static; }
  .hy-footer__top { grid-template-columns: 1fr 1fr; gap: 36px; }
  .hy-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  :root { --hy-header-h: 62px; }
  .hy-nav { display: none; }
  .hy-burger { display: flex; }
  .hy-header__cta .hy-header__phone { display: none; }

  .hy-section { padding: 60px 0; }
  .hy-h1, .hy-hero__title { font-size: 34px; }
  .hy-h2 { font-size: 27px; }
  .hy-pagehead { padding: 52px 0 46px; }
  .hy-pagehead h1 { font-size: 29px; }

  .hy-grid--2, .hy-grid--3 { grid-template-columns: 1fr; }
  .hy-stats { grid-template-columns: repeat(2, 1fr); }
  .hy-news-item { grid-template-columns: 1fr; gap: 16px; }
  .hy-news-item__thumb { aspect-ratio: 16 / 8; }
  .hy-article { padding: 28px 22px 34px; }
  .hy-article__head h1 { font-size: 23px; }
  .hy-content { font-size: 15px; }
  .hy-form__row { grid-template-columns: 1fr; }
  .hy-feature-list { grid-template-columns: 1fr; }
  .hy-cta { padding: 46px 26px; }
  .hy-cta h2 { font-size: 25px; }
  .hy-footer__top { grid-template-columns: 1fr; gap: 30px; padding-bottom: 36px; }
  .hy-hero__badge--1 { left: -8px; }
  .hy-hero__badge--2 { right: -8px; }
  .hy-float { right: 14px; bottom: 76px; }
  .hy-backtop { right: 14px; }
  .hy-case__results { gap: 14px; }
}

@media (max-width: 560px) {
  .hy-container { padding: 0 18px; }
  .hy-hero__title { font-size: 29px; }
  .hy-hero__metrics { gap: 26px; }
  .hy-hero__metric b { font-size: 24px; }
  .hy-stats__num { font-size: 28px; }
  .hy-prod { padding: 26px 22px 24px; }
  .hy-card { padding: 26px 22px; }
  .hy-sol { flex-direction: column; gap: 14px; padding: 24px 22px; }
  .hy-btn { width: 100%; }
  .hy-hero__actions .hy-btn { width: auto; }
}

/* ---------- 25. 移动端抽屉 ---------- */
.hy-drawer {
  position: fixed;
  inset: 0;
  z-index: 950;
  visibility: hidden;
  opacity: 0;
  transition: all .3s ease;
}
.hy-drawer.open { visibility: visible; opacity: 1; }
.hy-drawer__mask {
  position: absolute;
  inset: 0;
  background: rgba(15, 26, 46, .5);
  backdrop-filter: blur(2px);
}
.hy-drawer__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(86vw, 340px);
  background: #fff;
  padding: 24px 22px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
}
.hy-drawer.open .hy-drawer__panel { transform: none; }
.hy-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--hy-border-soft);
}
.hy-drawer__close {
  width: 34px; height: 34px;
  border-radius: 8px;
  border: 1px solid var(--hy-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--hy-text-2);
}
.hy-drawer__group { margin-bottom: 6px; }
.hy-drawer__group h4 {
  font-size: 12px;
  color: var(--hy-text-3);
  font-weight: 400;
  letter-spacing: .06em;
  margin: 16px 0 8px;
}
.hy-drawer__link {
  display: block;
  padding: 11px 10px;
  border-radius: 8px;
  font-size: 15px;
  color: var(--hy-text);
}
.hy-drawer__link:active { background: var(--hy-primary-50); color: var(--hy-primary); }

/* ==========================================================================
   26. 全站咨询弹窗
   ========================================================================== */

/* 悬浮按钮脉冲光圈 */
.hy-float__btn { position: relative; }
.hy-float__pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--hy-primary);
  opacity: .5;
  z-index: -1;
  animation: hyPulse 2.6s ease-out infinite;
}
@keyframes hyPulse {
  0%   { transform: scale(1);   opacity: .45; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* 遮罩层 */
.hy-consult {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  visibility: hidden;
  opacity: 0;
  transition: opacity .28s ease, visibility .28s ease;
}
.hy-consult.is-open {
  visibility: visible;
  opacity: 1;
}
.hy-consult__mask {
  position: absolute;
  inset: 0;
  background: rgba(15, 26, 46, .58);
  backdrop-filter: blur(3px);
}

/* 面板 */
.hy-consult__panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #fff;
  border-radius: var(--hy-radius-xl);
  box-shadow: 0 30px 80px rgba(15, 26, 46, .34);
  transform: translateY(18px) scale(.98);
  transition: transform .32s cubic-bezier(.34, 1.4, .64, 1);
}
.hy-consult.is-open .hy-consult__panel {
  transform: none;
}

.hy-consult__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hy-text-3);
  background: rgba(255, 255, 255, .8);
  transition: all .22s ease;
}
.hy-consult__close:hover {
  background: var(--hy-bg-soft);
  color: var(--hy-text);
}

/* 头部 */
.hy-consult__head {
  position: relative;
  padding: 30px 32px 22px;
  background: linear-gradient(150deg, #0d2144 0%, #10386f 60%, #0a56b8 100%);
  border-radius: var(--hy-radius-xl) var(--hy-radius-xl) 0 0;
  overflow: hidden;
}
.hy-consult__head::before {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  right: -110px;
  top: -170px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(78, 226, 217, .26), transparent 66%);
}
.hy-consult__badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: rgba(255, 255, 255, .82);
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .2);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.hy-consult__badge i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ee2d9;
  box-shadow: 0 0 0 3px rgba(78, 226, 217, .25);
}
.hy-consult__head h3 {
  position: relative;
  font-size: 22px;
  color: #fff;
  letter-spacing: -.01em;
  margin-bottom: 8px;
}
.hy-consult__head p {
  position: relative;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .68);
  max-width: 400px;
}

/* 表单 */
.hy-consult__form-wrap {
  padding-bottom: 4px;
}
.hy-consult__form {
  padding: 24px 32px 30px;
  display: grid;
  gap: 16px;
}
.hy-consult__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.hy-consult__field label {
  display: block;
  font-size: 13px;
  color: var(--hy-text-2);
  margin-bottom: 6px;
}
.hy-consult__field label em {
  font-style: normal;
  color: var(--hy-danger);
}
.hy-consult__field input[type="text"],
.hy-consult__field input[type="tel"],
.hy-consult__field textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--hy-border);
  border-radius: var(--hy-radius-sm);
  font-size: 14.5px;
  color: var(--hy-text);
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.hy-consult__field input:focus,
.hy-consult__field textarea:focus {
  border-color: var(--hy-primary);
  box-shadow: 0 0 0 3px rgba(0, 103, 237, .1);
}
.hy-consult__field input::placeholder,
.hy-consult__field textarea::placeholder {
  color: var(--hy-text-3);
}
.hy-consult__field textarea {
  resize: vertical;
  min-height: 78px;
  line-height: 1.65;
}

/* 快捷 chips */
.hy-consult__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hy-chip {
  padding: 7px 15px;
  border: 1px solid var(--hy-border);
  border-radius: 999px;
  font-size: 13px;
  color: var(--hy-text-2);
  background: #fff;
  transition: all .2s ease;
}
.hy-chip:hover {
  border-color: var(--hy-primary-sky);
  color: var(--hy-primary);
}
.hy-chip.is-active {
  background: var(--hy-primary-50);
  border-color: var(--hy-primary);
  color: var(--hy-primary);
  font-weight: 500;
}

/* 提交按钮 */
.hy-consult__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  border-radius: 999px;
  background: var(--hy-grad-card);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  box-shadow: 0 8px 20px rgba(0, 103, 237, .26);
  transition: all .26s ease;
}
.hy-consult__submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 103, 237, .34);
}
.hy-consult__submit[disabled] {
  opacity: .66;
  cursor: not-allowed;
  transform: none;
}

.hy-consult__msg {
  font-size: 13px;
  min-height: 18px;
  margin-top: -6px;
}
.hy-consult__tip {
  font-size: 12px;
  color: var(--hy-text-3);
  text-align: center;
  line-height: 1.7;
}
.hy-consult__tip a {
  color: var(--hy-primary);
  font-weight: 500;
}

/* 成功态 / 微信态 */
.hy-consult__success,
.hy-consult__wechat {
  padding: 54px 34px 40px;
  text-align: center;
}
.hy-consult__success-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: #e8f7ef;
  color: var(--hy-success);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hy-consult__success-icon svg {
  width: 30px;
  height: 30px;
}
.hy-consult__success h3,
.hy-consult__wechat h3 {
  font-size: 21px;
  margin-bottom: 10px;
}
.hy-consult__success p,
.hy-consult__wechat p {
  font-size: 13.5px;
  color: var(--hy-text-2);
  line-height: 1.8;
}
.hy-consult__success p a {
  color: var(--hy-primary);
  font-weight: 500;
}
.hy-consult__done {
  margin-top: 26px;
  padding: 11px 34px;
  border-radius: 999px;
  background: var(--hy-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  transition: background .2s ease;
}
.hy-consult__done:hover {
  background: var(--hy-primary-dark);
}

.hy-consult__qr {
  margin: 24px auto 14px;
  width: 200px;
  height: 200px;
  padding: 10px;
  border: 1px solid var(--hy-border);
  border-radius: var(--hy-radius);
  background: #fff;
}
.hy-consult__qr img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hy-consult__qr-tip {
  font-size: 12px;
  color: var(--hy-text-3);
}

/* 响应式 */
@media (max-width: 560px) {
  .hy-consult {
    padding: 0;
    align-items: flex-end;
  }
  .hy-consult__panel {
    max-width: 100%;
    max-height: 92vh;
    border-radius: var(--hy-radius-xl) var(--hy-radius-xl) 0 0;
    transform: translateY(100%);
  }
  .hy-consult.is-open .hy-consult__panel {
    transform: none;
  }
  .hy-consult__head {
    padding: 26px 20px 20px;
    border-radius: var(--hy-radius-xl) var(--hy-radius-xl) 0 0;
  }
  .hy-consult__head h3 { font-size: 19px; }
  .hy-consult__form { padding: 20px 20px 26px; gap: 14px; }
  .hy-consult__row { grid-template-columns: 1fr; gap: 14px; }
  .hy-consult__success,
  .hy-consult__wechat { padding: 44px 22px 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .hy-float__pulse { animation: none; opacity: 0; }
  .hy-consult,
  .hy-consult__panel { transition: none; }
}

/* ==========================================================================
   27. 功能总览页
   ========================================================================== */

.hy-featgroup {
  background: #fff;
  border: 1px solid var(--hy-border);
  border-radius: var(--hy-radius-lg);
  padding: 34px 36px 30px;
  margin-bottom: 22px;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.hy-featgroup:hover {
  border-color: var(--hy-primary-100);
  box-shadow: var(--hy-shadow);
}

.hy-featgroup__head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--hy-border-soft);
  margin-bottom: 24px;
}

.hy-featgroup__no {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--hy-primary-50), var(--hy-primary-100));
  border: 1px solid var(--hy-primary-100);
  color: var(--hy-primary);
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -0.02em;
}

.hy-featgroup__title-wrap h2 {
  font-size: 21px;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

.hy-featgroup__title-wrap p {
  font-size: 13.5px;
  color: var(--hy-text-2);
  line-height: 1.7;
  max-width: 720px;
}

.hy-featgroup__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 36px;
}

.hy-featitem {
  display: flex;
  gap: 11px;
  padding: 11px 0;
  border-bottom: 1px dashed transparent;
  transition: background-color .2s ease;
}

.hy-featitem__check {
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--hy-primary-50);
  color: var(--hy-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hy-featitem__body {
  min-width: 0;
}

.hy-featitem__body b {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--hy-text);
  margin-bottom: 3px;
  line-height: 1.5;
}

.hy-featitem__body span {
  display: block;
  font-size: 13px;
  color: var(--hy-text-2);
  line-height: 1.65;
}

@media (max-width: 900px) {
  .hy-featgroup__list { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 640px) {
  .hy-featgroup { padding: 24px 20px 20px; }
  .hy-featgroup__head { gap: 13px; padding-bottom: 18px; margin-bottom: 18px; }
  .hy-featgroup__no { width: 40px; height: 40px; font-size: 13.5px; border-radius: 10px; }
  .hy-featgroup__title-wrap h2 { font-size: 18px; }
  .hy-featgroup__title-wrap p { font-size: 13px; }
  .hy-featitem { padding: 9px 0; }
  .hy-featitem__body b { font-size: 14px; }
}

/* 下拉「查看全部」链接 */
.hy-dropdown__all {
  display: block;
  padding: 11px 18px 12px;
  margin-top: 4px;
  border-top: 1px solid var(--hy-border-soft);
  font-size: 12.5px;
  color: var(--hy-primary);
  font-weight: 500;
  transition: background-color .2s ease;
}
.hy-dropdown__all:hover {
  background: var(--hy-primary-50);
}

/* ==========================================================================
   28. 浅色 Hero 适配 + 导航收紧
   ========================================================================== */

/* Hero 内次按钮：浅底描边深字（不影响深色 CTA 区的 .hy-btn--light） */
.hy-hero .hy-btn--light {
  background: #fff;
  border: 1px solid var(--hy-border);
  color: var(--hy-text-2);
  box-shadow: 0 2px 10px rgba(16, 58, 122, .05);
}
.hy-hero .hy-btn--light:hover {
  background: #fff;
  border-color: var(--hy-primary-200);
  color: var(--hy-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(16, 58, 122, .1);
}

/* 浮动角标在浅色底上补边框 */
.hy-hero__badge {
  border: 1px solid #e6edf9;
  background: rgba(255, 255, 255, .98);
}

/* 手机屏幕保持深色，与浅色 Hero 形成对比 */
.hy-hero__screen {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}

/* 指示点激活态 */
.hy-hero__dots button.active {
  background: var(--hy-primary);
}

/* ---------- 导航收紧，防止 6 项溢出 ---------- */
.hy-header__inner {
  gap: 24px;
}
.hy-nav__link {
  padding: 0 13px;
  font-size: 14.5px;
}
.hy-nav__link::after {
  left: 13px;
  right: 13px;
}

/* 1280px 以下隐藏头部电话，把空间让给导航 */
@media (max-width: 1280px) {
  .hy-header__phone { display: none; }
}

/* 1100px 以下进一步压缩 */
@media (max-width: 1100px) {
  .hy-nav__link { padding: 0 10px; font-size: 14px; }
  .hy-header__inner { gap: 16px; }
}

/* ---------- 首页数据条：浮起卡片 ---------- */
.hy-stats-float {
  padding: 0 0 8px;
  position: relative;
  z-index: 3;
  margin-top: -58px;
}
.hy-stats-float .hy-stats {
  box-shadow: 0 18px 50px rgba(16, 58, 122, .10), 0 2px 8px rgba(16, 58, 122, .04);
  background: #eef3fb;
}
.hy-stats-float .hy-stats__item {
  padding: 32px 24px;
  transition: background-color .25s ease;
}
.hy-stats-float .hy-stats__item:hover {
  background: #f8fbff;
}
@media (max-width: 900px) {
  .hy-stats-float { margin-top: -36px; }
  .hy-stats-float .hy-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   29. Hero 手机 mockup 精修（状态栏 / 刘海 / 输入框）
   ========================================================================== */

.hy-hero__phone {
  border-radius: 44px;
  padding: 10px;
}

/* 刘海 */
.hy-phone__notch {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 88px;
  height: 20px;
  border-radius: 0 0 14px 14px;
  background: #0a1526;
  z-index: 5;
}

/* 状态栏 */
.hy-phone__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 12px;
  font-size: 11px;
  color: rgba(255, 255, 255, .85);
}
.hy-phone__status b {
  font-weight: 600;
  letter-spacing: .01em;
}
.hy-phone__signal {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 10px;
}
.hy-phone__signal i {
  width: 2.5px;
  border-radius: 1px;
  background: rgba(255, 255, 255, .8);
}
.hy-phone__signal i:nth-child(1) { height: 4px; }
.hy-phone__signal i:nth-child(2) { height: 6px; }
.hy-phone__signal i:nth-child(3) { height: 8px; }
.hy-phone__signal i:nth-child(4) { height: 10px; }
.hy-phone__signal i.is-off { background: rgba(255, 255, 255, .28); }
.hy-phone__signal em {
  width: 17px;
  height: 9px;
  margin-left: 5px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 2.5px;
  position: relative;
}
.hy-phone__signal em::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  right: 5px;
  border-radius: 1px;
  background: rgba(255, 255, 255, .8);
}

/* 输入框 */
.hy-phone__input {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 4px 2px;
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.hy-phone__input span {
  flex: 1;
  height: 30px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  font-size: 11.5px;
  color: rgba(255, 255, 255, .38);
}
.hy-phone__send {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--hy-grad-card);
  position: relative;
  flex-shrink: 0;
}
.hy-phone__send::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  transform: translate(-42%, -50%);
  border: 5px solid transparent;
  border-left-color: #fff;
  border-right: 0;
}

/* 屏幕高度自适应新内容 */
.hy-hero__screen {
  display: flex;
  flex-direction: column;
  min-height: 452px;
}
.hy-chat { flex: 1; }

/* ==========================================================================
   30. 客服二维码卡片（联系页）
   ========================================================================== */

.hy-qr-card {
  margin-top: 16px;
  padding: 28px 30px;
  display: flex;
  align-items: center;
  gap: 24px;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid var(--hy-primary-100);
}

.hy-qr-card__text {
  flex: 1;
  min-width: 0;
}

.hy-qr-card__text h3 {
  font-size: 18px;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.hy-qr-card__text p {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--hy-text-2);
}

.hy-qr-card__tip {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 12px;
  color: var(--hy-primary);
}
.hy-qr-card__tip svg {
  flex-shrink: 0;
  opacity: .8;
}

.hy-qr-card__img {
  flex-shrink: 0;
  width: 150px;
  height: 150px;
  padding: 8px;
  background: #fff;
  border-radius: var(--hy-radius);
  box-shadow: 0 6px 20px rgba(16, 58, 122, .1);
  border: 1px solid var(--hy-border-soft);
}
.hy-qr-card__img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: 6px;
}

@media (max-width: 560px) {
  .hy-qr-card {
    padding: 24px 20px;
    flex-direction: column;
    text-align: center;
    gap: 18px;
  }
  .hy-qr-card__tip { justify-content: center; }
  .hy-qr-card__img {
    width: 172px;
    height: 172px;
  }
}

/* ---------- 页脚二维码列 ---------- */
.hy-footer__top {
  grid-template-columns: 1.6fr 1fr 1fr 1fr auto;
}

.hy-footer__qr-box {
  width: 104px;
  height: 104px;
  padding: 6px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(30, 60, 120, .12);
  border: 1px solid var(--hy-border-soft);
}
.hy-footer__qr-box img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: 5px;
}

.hy-footer__qr-tip {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: #999;
  line-height: 1.6;
}

/* 中等屏：二维码列换到第二行右侧时保持整齐 */
@media (max-width: 1180px) {
  .hy-footer__top {
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 40px;
  }
}

@media (max-width: 900px) {
  .hy-footer__top {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
}

@media (max-width: 560px) {
  .hy-footer__top { grid-template-columns: 1fr; }
  .hy-footer__qr { display: flex; flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   31. 企点风格模块（对标 qidian.qq.com）
   tab 产品区 / 渐变行业卡 / 全链路特性 / 通栏渐变 CTA
   ========================================================================== */

/* ---------- 重点产品 Tab 区 ---------- */
.hy-qdtabs { margin-top: 8px; }
.hy-qdtabs__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}
.hy-qdtabs__tab {
  height: 44px;
  padding: 0 26px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--hy-border);
  color: #666;
  font-size: 14.5px;
  transition: all .25s ease;
}
.hy-qdtabs__tab:hover { color: var(--hy-primary); border-color: var(--hy-primary-100); }
.hy-qdtabs__tab.active {
  background: var(--hy-grad-card);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 20px rgba(74, 112, 255, .32);
}
.hy-qdtabs__more {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 44px;
  padding: 0 8px;
  font-size: 14px;
  color: var(--hy-primary);
}
.hy-qdtabs__more:hover { color: var(--hy-primary-dark); }

.hy-qdtabs__panels { margin-top: 28px; }

.hy-qdpanel {
  display: none;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 48px;
  padding: 52px 56px;
  border-radius: 20px;
  background: var(--hy-grad-qd);
  position: relative;
  overflow: hidden;
  color: #fff;
  min-height: 400px;
}
.hy-qdpanel::before {
  content: "";
  position: absolute;
  width: 420px; height: 420px;
  right: -120px; top: -180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .18), transparent 62%);
  pointer-events: none;
}
.hy-qdpanel.active { display: grid; animation: qdFade .45s ease both; }
@keyframes qdFade {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.hy-qdpanel__info { position: relative; z-index: 2; }
.hy-qdpanel__info h3 { font-size: 28px; color: #fff; letter-spacing: -.01em; }
.hy-qdpanel__desc {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(255, 255, 255, .88);
  max-width: 460px;
}
.hy-qdpanel__feats {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 20px;
  max-width: 500px;
}
.hy-qdpanel__feats li {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .92);
}
.hy-qdpanel__feats li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
}
.hy-qdpanel__feats li::after {
  content: "";
  position: absolute;
  left: 3.5px; top: 10px;
  width: 7px; height: 4px;
  border-left: 1.8px solid #fff;
  border-bottom: 1.8px solid #fff;
  transform: rotate(-45deg);
}
.hy-qdpanel__info .hy-btn { margin-top: 30px; height: 48px; padding: 0 28px; font-size: 15px; }

.hy-qdpanel__visual { display: flex; justify-content: center; }
.hy-qdpanel__card {
  width: 330px;
  background: rgba(255, 255, 255, .96);
  border-radius: 16px;
  padding: 30px 28px 26px;
  box-shadow: 0 24px 60px rgba(10, 30, 90, .28);
  color: var(--hy-text);
  animation: qdFloat 6s ease-in-out infinite;
}
@keyframes qdFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.hy-qdpanel__card-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--hy-primary);
  background: var(--hy-primary-50);
  border-radius: 999px;
  padding: 3px 12px;
  margin-bottom: 14px;
}
.hy-qdpanel__card b { display: block; font-size: 18px; margin-bottom: 18px; }
.hy-qdpanel__bars { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.hy-qdpanel__bars i {
  height: 8px;
  border-radius: 4px;
  background: var(--hy-primary-50);
  position: relative;
  overflow: hidden;
}
.hy-qdpanel__bars i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: var(--hy-grad-card);
}
.hy-qdpanel__kpis { display: flex; gap: 18px; }
.hy-qdpanel__kpis > div {
  flex: 1;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f4f8ff;
  text-align: center;
}
.hy-qdpanel__kpis b { display: block; font-size: 18px; color: var(--hy-primary); margin-bottom: 2px; }
.hy-qdpanel__kpis span { font-size: 12px; color: var(--hy-text-2); }

.hy-qdpanel__chip {
  position: absolute;
  left: 56px;
  bottom: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .3);
  backdrop-filter: blur(6px);
  font-size: 12.5px;
  color: #fff;
  white-space: nowrap;
}
.hy-qdpanel__chip i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #7dffc8;
  box-shadow: 0 0 0 4px rgba(125, 255, 200, .2);
}

/* ---------- 全链路特性横排 ---------- */
.hy-chain {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.hy-chain__item {
  display: flex;
  flex-direction: column;
  padding: 30px 22px 26px;
  background: #fff;
  border: 1px solid var(--hy-border);
  border-radius: 14px;
  transition: all .3s ease;
}
.hy-chain__item:hover {
  transform: translateY(-6px);
  border-color: var(--hy-primary-100);
  box-shadow: var(--hy-shadow-lg);
}
.hy-chain__icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--hy-grad-card);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  box-shadow: 0 8px 18px rgba(74, 112, 255, .28);
}
.hy-chain__icon svg { width: 22px; height: 22px; }
.hy-chain__item h3 { font-size: 16px; margin-bottom: 8px; }
.hy-chain__item p { font-size: 13px; color: var(--hy-text-2); line-height: 1.7; }

/* ---------- 行业渐变卡 ---------- */
.hy-gradcard {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 34px 32px 30px;
  border-radius: 16px;
  color: #fff;
  overflow: hidden;
  min-height: 218px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.hy-gradcard::after {
  content: "";
  position: absolute;
  width: 260px; height: 260px;
  right: -80px; bottom: -120px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  pointer-events: none;
}
.hy-gradcard--1 { background: linear-gradient(265deg, #6cb5ff 0%, #2e72ff 45%, #a44ef5 100%); }
.hy-gradcard--2 { background: linear-gradient(135deg, #0072ff 0%, #00b3ff 58%, #2fd8c8 100%); }
.hy-gradcard--3 { background: linear-gradient(135deg, #0b3ea8 0%, #0a84ff 55%, #00c2ff 100%); }
.hy-gradcard:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(41, 112, 252, .3);
}
.hy-gradcard__tag {
  align-self: flex-start;
  font-size: 12px;
  padding: 3px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .2);
  border: 1px solid rgba(255, 255, 255, .35);
  margin-bottom: 16px;
}
.hy-gradcard h3 { font-size: 22px; color: #fff; letter-spacing: -.01em; }
.hy-gradcard p {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.75;
  color: rgba(255, 255, 255, .85);
  flex: 1;
}
.hy-gradcard__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  position: relative;
  z-index: 2;
}
.hy-gradcard__more svg { transition: transform .28s ease; }
.hy-gradcard:hover .hy-gradcard__more svg { transform: translateX(4px); }

/* ---------- 通栏渐变 CTA ---------- */
.hy-cta-band {
  position: relative;
  overflow: hidden;
  padding: 76px 0;
  background: var(--hy-grad-qd);
  text-align: center;
  color: #fff;
}
.hy-cta-band::before,
.hy-cta-band::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.hy-cta-band::before {
  width: 480px; height: 480px;
  left: -160px; top: -260px;
  background: radial-gradient(circle, rgba(255, 255, 255, .18), transparent 62%);
}
.hy-cta-band::after {
  width: 420px; height: 420px;
  right: -140px; bottom: -240px;
  background: radial-gradient(circle, rgba(255, 255, 255, .14), transparent 62%);
}
.hy-cta-band__inner { position: relative; z-index: 2; }
.hy-cta-band h2 { font-size: 36px; color: #fff; letter-spacing: -.01em; }
.hy-cta-band p {
  margin: 18px auto 0;
  max-width: 640px;
  font-size: 16px;
  color: rgba(255, 255, 255, .85);
  line-height: 1.8;
}
.hy-cta-band__actions { margin-top: 36px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hy-cta-band .hy-btn--white { box-shadow: 0 10px 26px rgba(10, 30, 90, .25); }

/* ---------- 管理后台界面展示（产品 Tab 真实感截图） ---------- */
.hy-appui {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 28px 70px rgba(9, 28, 78, .32), 0 6px 18px rgba(9, 28, 78, .16);
}
.hy-appui__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #eef2f9;
  border-bottom: 1px solid #e2e8f3;
}
.hy-appui__bar i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #ff5f57;
}
.hy-appui__bar i:nth-child(2) { background: #febc2e; }
.hy-appui__bar i:nth-child(3) { background: #28c840; }
.hy-appui__bar span {
  margin-left: 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: #333;
}
.hy-appui__bar em {
  margin-left: auto;
  font-size: 10px;
  font-style: normal;
  color: #9aa7bd;
  background: #fff;
  border: 1px solid #e2e8f3;
  border-radius: 999px;
  padding: 2px 10px;
}
.hy-appui__body {
  display: grid;
  grid-template-columns: 66px 1fr;
  height: 342px;
}
.hy-appui__side {
  background: #1f2a44;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hy-appui__side a {
  margin: 0 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 10.5px;
  color: rgba(255, 255, 255, .55);
  text-align: center;
  white-space: nowrap;
  cursor: default;
}
.hy-appui__side a.active {
  background: var(--hy-primary);
  color: #fff;
  font-weight: 500;
}
.hy-appui__main {
  background: #f6f8fc;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
.hy-appui__search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #e4eaf4;
  border-radius: 8px;
  padding: 7px 10px;
}
.hy-appui__search span {
  flex: 1;
  font-size: 10.5px;
  color: #a5b0c4;
}
.hy-appui__search i {
  font-style: normal;
  font-size: 10px;
  color: var(--hy-primary);
  background: var(--hy-primary-50);
  border-radius: 5px;
  padding: 3px 8px;
}
.hy-appui__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.hy-appui__stats > div {
  position: relative;
  background: #fff;
  border: 1px solid #e4eaf4;
  border-radius: 8px;
  padding: 9px 10px;
}
.hy-appui__stats b {
  display: block;
  font-size: 17px;
  color: var(--hy-text);
  letter-spacing: -.01em;
}
.hy-appui__stats span {
  font-size: 10px;
  color: #8b97ab;
}
.hy-appui__stats i {
  position: absolute;
  right: 9px; top: 9px;
  font-style: normal;
  font-size: 9.5px;
  color: #12a150;
  font-weight: 600;
}
.hy-appui__stats > div.is-warn { border-color: #ffd591; background: #fffaf2; }
.hy-appui__stats > div.is-warn b { color: #d48806; }
.hy-appui__stats > div.is-high { border-color: #ffccc7; background: #fff6f5; }
.hy-appui__stats > div.is-high b { color: #e24747; }
.hy-appui__list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
  min-height: 0;
}
.hy-appui__row {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border: 1px solid #e4eaf4;
  border-radius: 8px;
  padding: 8px 10px;
}
.hy-appui__row > div { flex: 1; min-width: 0; }
.hy-appui__row b {
  display: block;
  font-size: 11.5px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hy-appui__row p {
  font-size: 10.5px;
  color: #8b97ab;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hy-appui__row em.is-warn {
  font-style: normal;
  color: #d48806;
  background: #fff1ce;
  border-radius: 3px;
  padding: 0 3px;
}
.hy-appui__ava {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 8px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hy-appui__dot {
  flex-shrink: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #c4cede;
}
.hy-appui__dot.is-warn { background: #faad14; box-shadow: 0 0 0 3px rgba(250, 173, 20, .16); }
.hy-appui__dot.is-high { background: #e24747; box-shadow: 0 0 0 3px rgba(226, 71, 71, .16); }
.hy-appui__tag {
  flex-shrink: 0;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f0f3f8;
  color: #8b97ab;
}
.hy-appui__tag.is-ok { background: #e6f7ef; color: #12a150; }
.hy-appui__tag.is-warn { background: #fff1ce; color: #d48806; }
.hy-appui__tag.is-high { background: #fde8e8; color: #e24747; }
.hy-appui__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #eef4ff;
  border: 1px solid #dce8fd;
  border-radius: 8px;
  padding: 8px 10px;
}
.hy-appui__foot b { font-size: 11px; color: var(--hy-primary); }
.hy-appui__foot span { font-size: 10px; color: #8b97ab; }
.hy-appui__thead,
.hy-appui__tr {
  display: grid;
  grid-template-columns: 1.1fr 1.3fr 1.1fr .8fr;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
}
.hy-appui__thead {
  background: #fff;
  border: 1px solid #e4eaf4;
  border-radius: 8px;
  font-size: 10px;
  color: #8b97ab;
}
.hy-appui__tr {
  background: #fff;
  border: 1px solid #e4eaf4;
  border-radius: 8px;
}
.hy-appui__tr b {
  font-size: 11.5px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hy-appui__tr span {
  font-size: 10.5px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  justify-self: start;
}
.hy-appui__tr .hy-appui__tag { justify-self: end; }
.hy-appui__mask {
  font-family: "SFMono-Regular", Consolas, monospace;
  color: #5a6a85;
  background: #f0f3f8;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 10px !important;
}
.hy-appui__score {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid #e4eaf4;
  border-radius: 8px;
  padding: 12px 14px;
}
.hy-appui__ring {
  flex-shrink: 0;
  width: 74px; height: 74px;
  border-radius: 50%;
  background: conic-gradient(var(--hy-primary) 0 94%, #e8eefb 94% 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
.hy-appui__ring::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: #fff;
}
.hy-appui__ring b,
.hy-appui__ring span { position: relative; z-index: 2; line-height: 1.15; }
.hy-appui__ring b { font-size: 19px; color: var(--hy-primary); }
.hy-appui__ring span { font-size: 9.5px; color: #8b97ab; }
.hy-appui__score-side { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hy-appui__score-side div {
  background: #f6f8fc;
  border-radius: 8px;
  padding: 10px;
  text-align: center;
}
.hy-appui__score-side b { display: block; font-size: 15px; color: var(--hy-text); }
.hy-appui__score-side span { font-size: 10px; color: #8b97ab; }
.hy-appui__funnel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  justify-content: center;
}
.hy-appui__funnel > div {
  height: 26px;
  border-radius: 6px;
  background: var(--hy-grad-card);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
}
.hy-appui__funnel > div:nth-child(2) { opacity: .85; }
.hy-appui__funnel > div:nth-child(3) { opacity: .7; }
.hy-appui__funnel > div:nth-child(4) { opacity: .58; }
.hy-appui__funnel span { font-size: 10px; opacity: .9; }
.hy-appui__funnel b { font-size: 11px; }

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
  .hy-chain { grid-template-columns: repeat(3, 1fr); }
  .hy-qdpanel {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 40px 36px;
    min-height: 0;
  }
  .hy-qdpanel__visual { order: -1; }
  .hy-qdpanel__card { width: 300px; }
}
@media (max-width: 640px) {
  .hy-chain { grid-template-columns: 1fr 1fr; }
  .hy-qdpanel__feats { grid-template-columns: 1fr; }
  .hy-qdtabs__nav { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; }
  .hy-qdtabs__tab { white-space: nowrap; }
  .hy-hero__title { font-size: 38px; }
  .hy-cta-band h2 { font-size: 27px; }
  .hy-qdpanel__chip { display: none; }
}