/* ============================================================
   众泰云 · 首屏视觉装置 v2（第四十九批）
   ------------------------------------------------------------
   用户反馈两条，逐条对症：
     A.「颜色太暗」→ 底色从 #06060A（近纯黑）提到 #0C1017（带蓝的炭灰），
        并加"极光"式大面积彩色光晕；卡面透明度 .03 → .055
     B.「更惊艳 + 符合项目属性」→ 项目属性是「204 位职业智能体」＝一支 AI 军团。
        视觉上让每个智能体带职业色、成编队、有数据流汇入工作台（见 zt-agents.js）

   注意：注释里不得出现任何闭合标签。
   ============================================================ */

/* ---------- A. 提亮：底色带色、光晕可见 ---------- */
/* 说明：这里临时覆盖契约的暗色底。若确认保留，应回写到 theme-contract.css 的暗色块，
   使其重新成为单一事实源。 */
:root, :root[data-theme="dark"]{
  --c-bg:#0C1017;
  --c-bg-2:#10151F;
  --c-bg-3:#161C28;
  --wc-aurora-1:rgba(232,163,61,.22);
  --wc-aurora-2:rgba(64,120,220,.20);
  --wc-aurora-3:rgba(150,80,220,.14);
}
html body{background:#0C1017}

/* 首屏背景：四层极光 + 网格，让"暗"变成"有光的空间" */
html body .hero::before{
  background:
    radial-gradient(78% 56% at 50% 88%, rgba(232,163,61,.30) 0%, rgba(232,163,61,.09) 44%, transparent 74%),
    radial-gradient(60% 46% at 16% -6%, rgba(64,120,220,.26) 0%, transparent 64%),
    radial-gradient(54% 44% at 88% 2%, rgba(150,80,220,.20) 0%, transparent 62%),
    radial-gradient(46% 36% at 50% 6%, rgba(232,163,61,.14) 0%, transparent 66%) !important;
}
/* 首屏内再叠一层"极光带"，斜向扫过，制造纵深 */
html body .hero .wrap.hero-in::after{
  content:"";position:absolute;left:-20%;right:-20%;top:-10%;height:70%;z-index:-1;pointer-events:none;
  background:
    linear-gradient(104deg, transparent 22%, rgba(232,163,61,.10) 40%, rgba(64,120,220,.10) 55%, transparent 76%);
  filter:blur(46px);
  transform:rotate(-7deg);
}

/* 第二节起：整体底也提亮到同一个色系，避免"上面亮下面黑"的断层 */
html body .sec,html body .stats,html body footer{background:transparent}

/* 卡面比原来更亮一档，暗底上能看出层次 */
html body .kk-card{background:rgba(255,255,255,.055) !important}
html body .kk-card:hover{background:rgba(255,255,255,.075) !important}

/* ---------- 星图画布：必须是绝对定位，否则会顶开首屏内容 ----------
   事故记录：v2 重写本文件时漏掉这条规则，canvas 变成块级元素占满 1381px，
   把 H1 / 副标题 / 按钮 / 产品界面全部顶到首屏之外（截图可证）。 */
html body .hero .zt-agents{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  width:100%;height:100%;display:block;
  -webkit-mask-image:radial-gradient(90% 78% at 50% 42%,#000 0%,transparent 84%);
  mask-image:radial-gradient(90% 78% at 50% 42%,#000 0%,transparent 84%);
}

/* ---------- B. 军团：职业色 token ---------- */
:root{
  --agent-law:#5B8DEF;      /* 法务 */
  --agent-tax:#A78BFA;      /* 税务 */
  --agent-copy:#E8A33D;     /* 文案 */
  --agent-code:#34D399;     /* 编程 */
  --agent-seo:#F472B6;      /* SEO */
  --agent-cs:#38BDF8;       /* 客服 */
  --agent-design:#FB923C;   /* 设计 */
}

/* ---------- 尺度与立体（沿用 v1，微调） ---------- */
html body .hero h1{
  font-size:clamp(40px,6.2vw,100px) !important;
  line-height:1.07 !important;letter-spacing:-.034em !important;
}
/* 标题加一层极轻的品牌色外发光，让字"浮"起来 */
html body .hero h1{
  text-shadow:0 0 60px rgba(232,163,61,.16), 0 2px 30px rgba(0,0,0,.5);
}
html body .hero h1 .accent{
  background:linear-gradient(100deg,#FFE9C2 0%,#F0C583 34%,#E8A33D 64%,#C77E1F 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 34px rgba(232,163,61,.45));
}
html body .hero-shot{
  max-width:min(1340px,97vw) !important;
  margin-top:clamp(30px,4.6vh,56px) !important;
  perspective:1500px !important;perspective-origin:50% 0% !important;
}
html body .hero-shot img{
  transform:rotateX(19deg) scale(1.02) !important;
  transform-origin:50% 0% !important;
  border-radius:16px !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:
    0 -1px 0 rgba(255,255,255,.20) inset,
    0 0 0 1px rgba(0,0,0,.55),
    0 60px 140px -30px rgba(0,0,0,.9),
    0 0 110px -6px rgba(232,163,61,.34) !important;
}
html body .hero-shot::after{height:230px !important}
html body .hero-shot::before{
  background:radial-gradient(closest-side, rgba(232,163,61,.62), rgba(232,163,61,.22) 46%, transparent 74%) !important;
  filter:blur(76px) !important;
}

/* ---------- 军团状态条：把"204 位"变成可见的编队 ---------- */
html body .hero .zt-legion{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;
  margin-top:22px;font-size:12.5px;letter-spacing:.02em;
  font-family:var(--font-mono-zt,ui-monospace,monospace);
}
html body .hero .zt-legion .row{display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.72)}
html body .hero .zt-legion .dot{width:6px;height:6px;border-radius:50%;display:inline-block}
html body .hero .zt-legion .dot.law{background:var(--agent-law);box-shadow:0 0 8px var(--agent-law)}
html body .hero .zt-legion .dot.tax{background:var(--agent-tax);box-shadow:0 0 8px var(--agent-tax)}
html body .hero .zt-legion .dot.copy{background:var(--agent-copy);box-shadow:0 0 8px var(--agent-copy)}
html body .hero .zt-legion .dot.code{background:var(--agent-code);box-shadow:0 0 8px var(--agent-code)}
html body .hero .zt-legion .dot.seo{background:var(--agent-seo);box-shadow:0 0 8px var(--agent-seo)}
html body .hero .zt-legion b{color:#fff;font-weight:600}

html body .hero .btn{height:54px !important;padding:0 32px !important;font-size:16px !important}

@media (max-width:760px){
  html body .hero h1{font-size:clamp(34px,8.6vw,50px) !important;letter-spacing:-.026em !important}
  html body .hero-shot img{transform:rotateX(11deg) !important;border-radius:12px !important}
  html body .hero-shot::before{filter:blur(48px) !important;width:88% !important}
  html body .hero .zt-legion{font-size:11.5px;gap:7px}
}
@media (prefers-reduced-motion: reduce){
  html body .hero .zt-legion{display:none}
}