/* ============================================================
   天晟科技 · 深空 AI 粒子层（参考 Anchor AI 模板构成）
   在 motion.css 之后加载，负责：
   · 深空渐变底
   · Hero 布局：左文案列 / 右粒子全息球 / 右上扫码卡
   · 粒子画布容器
   · 导航玻璃化微调
   产品区结构完全不动（后台管理保持兼容）
   ============================================================ */

:root {
  --ai-cyan: #6fd8ff;
  --ai-blue: var(--color-accent, #4db2ff);
  --ai-line: rgba(120, 180, 255, 0.16);
  --ai-glass: rgba(13, 22, 40, 0.66);
}

/* ---------- 深空底 ---------- */
body {
  background:
    radial-gradient(120% 80% at 72% -8%, rgba(38, 92, 190, 0.20), transparent 58%),
    radial-gradient(100% 70% at 6% 108%, rgba(88, 60, 190, 0.14), transparent 55%),
    var(--color-bg);
}

/* ---------- Hero：左文案 / 右粒子 ---------- */
.hero {
  position: relative;
  min-height: min(62vh, 560px);
  display: flex;
  align-items: center;
  padding: var(--space-5) 0 var(--space-6);
  overflow: hidden;
}

/* 粒子画布：铺满 hero，文字在其上 */
.ai-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.hero .wrap {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* 文案列限宽，给右侧粒子球留出舞台 */
.hero-badge,
.hero .kicker,
.hero .lead,
.hero-cta,
.hero-meta {
  max-width: min(560px, 100%);
}
/* 主标题单独放宽：保证「做出优质服务的产品。」单行放下，标题总共两行 */
.hero h1 {
  max-width: min(680px, 100%);
}

/* ---------- 右上扫码卡：fixed 悬浮，页面滚动时保持可见 ---------- */
.hero-qr {
  position: fixed;
  top: 84px; /* 避开顶部导航 */
  right: 24px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 10px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--color-surface) 78%, transparent);
  border: 1px solid var(--ai-line);
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
}
.hero-qr img {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  display: block;
}
.hero-qr .qr-t {
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-muted);
}
.hero-qr .qr-t b {
  display: block;
  font-size: 13px;
  color: var(--color-text);
  letter-spacing: 0.02em;
}
.hero-qr .qr-t i {
  font-style: normal;
  color: var(--ai-cyan);
}

/* ---------- 导航玻璃化 ---------- */
.site-header {
  background: color-mix(in srgb, var(--color-surface) 82%, transparent);
  backdrop-filter: blur(12px);
}

/* ---------- 小屏：粒子退到文案后方作氛围 ---------- */
@media (max-width: 900px) {
  .hero-qr { display: none; }
}
@media (max-width: 760px) {
  .hero { min-height: auto; padding: var(--space-6) 0 var(--space-7); }
  .ai-scene { opacity: 0.55; }
}

/* ---------- 减少动效：粒子引擎只画静态帧，这里不再叠加位移动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-qr { transition: none; }
}