/* assets/css/sections/hero.css — 首页首屏：网格背景 + 7:5 双列 + 四级延迟入场 + 交付示意图面板。
   与基准项目同源：网格底、渐隐遮罩、.hero-copy > * 的 nth-child 入场编排都照搬；
   右侧面板换成"多平台 → 零九AI 中枢 → 接待结果"的拓扑图，不依赖任何位图资产。 */

.hero{
  position:relative; overflow:hidden;
  background:
    linear-gradient(to right,  rgba(23,50,79,.055) 1px, transparent 1px) 0 0/56px 56px,
    linear-gradient(to bottom, rgba(23,50,79,.055) 1px, transparent 1px) 0 0/56px 56px,
    var(--paper);
}
.hero::after{ /* 网格向下渐隐 */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, transparent 55%, var(--paper) 96%);
}
.hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:64px; align-items:center;
  padding-block:104px 112px;
}

/* ============ 文案列 ============ */
.hero-title{ font-size:52px; font-weight:900; line-height:1.28; }
.hero-keywords{
  display:block; margin-bottom:10px;
  font-family:var(--sans); font-size:15px; font-weight:700; line-height:1.4; color:var(--cinnabar);
}
.hero-lead{ margin-top:22px; max-width:34em; font-size:17px; color:var(--muted); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:16px; margin-top:32px; }
.hero-meta{ margin-top:24px; font-size:14px; color:var(--muted); }
.hero-meta a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line-dark); }
.hero-meta a:hover{ border-bottom-color:var(--ink); }

/* ============ 右侧面板：白底 + 细线，与基准的 .hero-panel 同一形态 ============ */
.hero-panel{
  background:var(--surface); border:1px solid var(--line);
  padding:22px 24px 18px;
}
.panel-title{
  font-family:var(--serif); font-weight:700; font-size:17px;
  padding-bottom:14px; border-bottom:1px solid var(--line);
}
.diagram{ width:100%; height:auto; margin-top:16px; }

/* 拓扑图：节点白底描边，中枢反白；连线为虚线流动 */
.diagram text{ font-family:var(--sans); }
.d-node rect{ fill:#fff; stroke:var(--line-dark); stroke-width:1; }
.d-node text{ fill:var(--ink); font-size:12.5px; }
.d-node--core rect{ fill:var(--ink); stroke:var(--ink); }
.d-node--core text{ fill:#fff; font-weight:500; font-size:13.5px; }
/* 副行小一号：按 13.5px 渲染时"知识库 · 意图识别"比中枢块（112 单位宽）还宽，
   左右留白被吃光。字号只能写在这里——SVG 的 font-size 属性会被上面的规则覆盖。 */
.d-node--core .d-core-sub{ font-size:10.5px; }
.d-link{ fill:none; stroke:var(--line-dark); stroke-width:1; }

@media (prefers-reduced-motion: no-preference){
  .d-link--flow{ stroke-dasharray:3 7; animation:dashFlow 1.6s linear infinite; }
  @keyframes dashFlow{ to{ stroke-dashoffset:-20; } }
}

/* ============ 面板底部状态行 ============ */
.panel-status{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.panel-status > div{
  display:flex; align-items:baseline; gap:12px;
  padding:5px 0; font-size:13.5px;
}
.ps-k{ flex:none; width:7.5em; color:var(--muted); }
.ps-v{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-weight:500; }
.uptime-num{ font-family:var(--serif); font-weight:700; font-size:17px; font-variant-numeric:lining-nums; }
.uptime-clock{ font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; }

/* ============ 首屏分级入场：往 .hero-copy 里加同级元素要同步补 nth-child ============ */
@media (prefers-reduced-motion: no-preference){
  .hero-copy > *, .hero-panel{
    opacity:0; transform:translateY(14px);
    transition:opacity .7s ease, transform .7s ease;
  }
  body.is-loaded .hero-copy > *:nth-child(1){ transition-delay:.05s; opacity:1; transform:none; }
  body.is-loaded .hero-copy > *:nth-child(2){ transition-delay:.15s; opacity:1; transform:none; }
  body.is-loaded .hero-copy > *:nth-child(3){ transition-delay:.25s; opacity:1; transform:none; }
  body.is-loaded .hero-copy > *:nth-child(4){ transition-delay:.35s; opacity:1; transform:none; }
  body.is-loaded .hero-panel{ transition-delay:.3s; opacity:1; transform:none; }
}