/* ==========================================================================
   数智星云 · 视觉系统「深空橙 / Deep Space Amber」
   对齐参考设计稿（海外遥感数据平台 + 控制台）：
     - 中性近黑底 #0b0b0d，面板仅比底色亮一档
     - 单一琥珀橙主色 #f0a03c，只用于强调（CTA / 激活态 / 关键数字）
     - 细描边 1px rgba(255,255,255,.085)，无重阴影，圆角 6/8px
     - 小字号大写字距标签（kicker）+ 大字号紧行距标题
     - 全宽 1px 分隔线切分区块，留白优先
   面向海外市场：中文正文 + 英文标签。
   ========================================================================== */

/* ---------------------------------------------------------------- 字体 */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- 令牌 */
.theme-x {
  /* 中性近黑阶梯 */
  --navy-950: #070708; --navy-900: #0b0b0d; --navy-800: #101114;
  --navy-700: #141519; --navy-600: #1a1c21; --navy-500: #23262c;

  /* 品牌橙（沿用 --blue-* 变量名，全站组件只引用变量） */
  --blue-700: #d4822b; --blue-600: #f0a03c; --blue-500: #e8932f;
  --blue-400: #f7b45f; --blue-300: #fbce94; --blue-200: #fde3c4;

  --bg: #0b0b0d;
  --surface: #101114;
  --surface-2: #141519;
  --surface-3: #191b1f;
  --surface-dark: #070708;

  /* 色阶按 #0b0b0d 底反推：最暗一档 ink-400 也要 ≥4.5:1，否则小字读不动 */
  --ink-900: #f4f5f6; --ink-800: #e2e4e7; --ink-700: #c3c7cd;
  --ink-600: #9ea3ab; --ink-500: #868b93; --ink-400: #7c8189;
  --ink-300: #63676e;

  --line: rgba(255, 255, 255, .085);
  --line-2: rgba(255, 255, 255, .05);
  --line-strong: rgba(255, 255, 255, .14);
  --line-dark: rgba(255, 255, 255, .085);
  --line-dark-2: rgba(255, 255, 255, .05);
  --ice-25: #0e0f12; --ice-50: #0b0b0d;
  --ice-100: rgba(240, 160, 60, .10);
  --ice-200: rgba(240, 160, 60, .20);
  --ice-300: rgba(240, 160, 60, .32);

  --ok: #5fd08a; --warn: #e8b04a; --danger: #f2706c; --info: #f0a03c;
  --ok-bg: rgba(95, 208, 138, .12);
  --warn-bg: rgba(232, 176, 74, .12);
  --danger-bg: rgba(242, 112, 108, .13);
  --info-bg: rgba(240, 160, 60, .11);

  --risk-low: #5fd08a; --risk-mid: #e8b04a; --risk-high: #f2706c;

  --hero-bg: #08080a; --hero-veil: 8, 8, 10;
  --hero-title: #eceef0; --hero-text: #e3e5e8; --hero-text-dim: #9ea3aa;
  --metric-bg: rgba(11, 11, 13, .82);
  --metric-text: #f4f5f6; --metric-label: #81868e;

  --footer-bg: #08080a; --code-bg: #0d0e11; --map-bg: #0d0e11;

  /* 圆角：6px 控件 / 8px 卡片 —— 参考稿的克制圆角 */
  --r-sm: 4px; --r: 6px; --r-lg: 8px; --r-xl: 12px;
  --shadow-1: 0 1px 0 rgba(255, 255, 255, .02);
  --shadow-2: 0 12px 30px rgba(0, 0, 0, .5);
  --shadow-3: 0 24px 54px rgba(0, 0, 0, .62);

  --head-weight: 600; --head-tracking: -.02em;
  --tb-bg: #0b0b0d; --tb-line: rgba(255, 255, 255, .085);

  --badge-ok-fg: #7fdaa1; --badge-warn-fg: #f0b15c;
  --badge-danger-fg: #f79a9a; --badge-blue-fg: #f0b15c;
  --notice-ok-fg: #7fdaa1; --notice-warn-fg: #f0b15c;
  --notice-danger-fg: #f79a9a; --notice-info-fg: #f0b15c;

  /* 强调色渐变：参考稿按钮为左浅右深的橙色渐变 */
  --accent-grad: linear-gradient(90deg, #f6b34f 0%, #e8932f 100%);
  --accent-ink: #17110a;

  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, 'PingFang SC', 'Hiragino Sans GB',
               'Microsoft YaHei', sans-serif;

  --maxw: 1680px;
  --gut: clamp(20px, 5.7vw, 96px);
}

/* ------------------------------------------------------------ 排版体系 */
.theme-x body,
body.theme-x {
  background: var(--bg); color: var(--ink-800);
  font-family: var(--font-body);
  font-size: 14px; line-height: 1.62;
}

.theme-x h1, .theme-x h2, .theme-x h3, .theme-x h4,
.theme-x .sec-title, .theme-x .brand-name, .theme-x .metric .mv,
.theme-x .stat .sv, .theme-x .card-hd h3 {
  font-family: var(--font-display);
  font-weight: var(--head-weight);
  letter-spacing: var(--head-tracking);
  color: var(--ink-900);
}

/* 大写字距标签：参考稿最显性的层级手段 */
.theme-x .eyebrow {
  font-family: var(--font-display);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--blue-600);
}

/* 标签 + 右侧渐隐细线（参考稿首屏标题上方那根横线） */
.eyebrow-rule { display: flex; align-items: center; gap: 18px; }
.eyebrow-rule::after {
  content: ""; height: 1px; flex: 1; max-width: 236px;
  background: linear-gradient(90deg, rgba(240, 160, 60, .55), rgba(240, 160, 60, 0));
}

/* 区块节奏：留白优先，整宽细线切分 */
.theme-x .section { padding: 84px 0; }
.theme-x .section-sm { padding: 52px 0; }
.theme-x .sec-title { font-size: 38px; line-height: 1.16; }
.theme-x .sec-desc { font-size: 16px; line-height: 1.72; color: var(--ink-600); }
.theme-x .hero h1 { font-size: 54px; line-height: 1.08; letter-spacing: -.03em; }
.theme-x .hero-lead { font-size: 16.5px; line-height: 1.7; color: var(--hero-text-dim); }
.theme-x .brand-name { font-size: 15.5px; letter-spacing: -.015em; }
.theme-x .brand-sub { font-size: 10px; letter-spacing: .05em; }

.theme-x .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.theme-x .wrap-narrow { max-width: 1080px; }

/* -------------------------------------------------------------- 按钮 */
.theme-x .btn { border-radius: var(--r); font-weight: 560; letter-spacing: -.005em; }
.theme-x .btn-primary {
  background: var(--accent-grad); color: var(--accent-ink);
  border-color: transparent; font-weight: 640;
}
.theme-x .btn-primary:hover { background: var(--blue-400); color: var(--accent-ink); }
.theme-x .btn-outline {
  background: transparent; border-color: rgba(240, 160, 60, .55);
  color: var(--blue-600); font-weight: 600;
}
.theme-x .btn-outline:hover { background: rgba(240, 160, 60, .12); border-color: var(--blue-600); }
.theme-x .btn-ghost { background: transparent; border-color: var(--line); color: var(--ink-700); }
.theme-x .btn-ghost:hover { border-color: var(--line-strong); color: var(--ink-900); background: rgba(255, 255, 255, .04); }
.theme-x .btn-light { background: #f4f5f6; color: #0b0b0d; }
.theme-x .btn-light:hover { background: #fff; }
.theme-x .btn-lg { padding: 13px 22px; font-size: 14.5px; border-radius: var(--r); }
.theme-x .btn-sm { padding: 7px 14px; font-size: 12.5px; }

/* -------------------------------------------------------------- 卡片 */
.theme-x .card {
  background: var(--surface); border-color: var(--line); box-shadow: none;
}
.theme-x .card-hd { border-bottom-color: var(--line-2); }
.theme-x .card-hd .sub { color: var(--ink-500); }
.theme-x .card-ft { background: var(--surface-2); }
.theme-x .pcard { background: var(--surface); border-color: var(--line); box-shadow: none; }
.theme-x .pcard:hover { border-color: rgba(240, 160, 60, .40); transform: none; box-shadow: none; }
.theme-x .pcard-img { background: var(--surface-3); }
.theme-x .pcard-img .kind { background: rgba(8, 8, 10, .80); color: #d3d7dd; }

/* --------------------------------------------------- 顶栏 / 下拉面板 */
.theme-x .topbar { background: rgba(11, 11, 13, .92); backdrop-filter: blur(12px); }
.theme-x .nav > a, .theme-x .nav .navbtn { font-weight: 500; }
.theme-x .nav > a.active, .theme-x .nav .navitem.active > .navbtn { color: var(--blue-600); }
.theme-x .navpanel {
  background: #101114; border-color: var(--line);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .66);
}

/* -------------------------------------------------------------- 表单 */
.theme-x .ap-input, .theme-x .input, .theme-x select.input {
  background: var(--surface-2); border-color: var(--line); color: var(--ink-800);
}
.theme-x .ap-input:focus, .theme-x .input:focus {
  border-color: var(--blue-600);
  box-shadow: 0 0 0 3px rgba(240, 160, 60, .14);
}
.theme-x .ap-seg label { border-color: var(--line); background: var(--surface-2); color: var(--ink-700); }
.theme-x .ap-seg label.on { border-color: var(--blue-600); background: rgba(240, 160, 60, .10); color: var(--blue-600); }
.theme-x .ap-brand::after {
  background: linear-gradient(160deg, rgba(7, 7, 8, .94) 0%, rgba(7, 7, 8, .62) 55%, rgba(7, 7, 8, .97) 100%);
}
.theme-x .ap-brand { background: var(--navy-900); }
.theme-x .ap-list .li .ic { color: var(--blue-600); }
.theme-x .ap-list .li .d { color: var(--ink-500); }
.theme-x .ap-steps .s i { background: var(--surface-3); color: var(--ink-500); }
.theme-x .ap-steps .s.on i { background: var(--blue-600); color: var(--accent-ink); }
.theme-x .ap-steps .s.on { color: var(--blue-600); }
.theme-x .ap-card .sub { color: var(--ink-500); }

/* -------------------------------------------------------------- 表格 */
.theme-x .tbl th { background: rgba(255, 255, 255, .022); color: var(--ink-500); border-bottom-color: var(--line); }
.theme-x .tbl td { border-bottom-color: var(--line-2); }
.theme-x .tbl tbody tr:hover { background: rgba(255, 255, 255, .028); }
.theme-x .tbl tbody tr.is-highlight { background: rgba(240, 160, 60, .06); }
.theme-x .tbl tbody tr.is-highlight:hover { background: rgba(240, 160, 60, .10); }
.theme-x .tbl .code { color: var(--ink-500); }

/* ------------------------------------------------------------ 其它块 */
.theme-x .seg { background: rgba(255, 255, 255, .05); }
.theme-x .seg button { color: var(--ink-600); }
.theme-x .seg button.active { background: rgba(240, 160, 60, .16); color: var(--blue-600); box-shadow: none; }
.theme-x .notice-plain { background: rgba(255, 255, 255, .032); border-color: var(--line); color: var(--ink-600); }
.theme-x .disclaimer {
  background: rgba(232, 176, 74, .09); border-color: rgba(232, 176, 74, .26); color: #e6c489;
}
.theme-x .footer { background: var(--footer-bg); border-top: 1px solid var(--line); }
.theme-x .f-brand .brand-name { font-family: var(--font-display); }
.theme-x .demobar { background: rgba(8, 8, 10, .92); }
.theme-x .mark-demo { background: rgba(8, 8, 10, .84); color: #c2c8d0; }
.theme-x .step { background: var(--surface); border-color: var(--line); }
.theme-x .step:hover { border-color: rgba(240, 160, 60, .38); background: var(--surface-2); }
.theme-x .step .sn { background: var(--surface-3); color: var(--blue-600); }
.theme-x .step.key .sn { background: var(--blue-600); color: var(--accent-ink); }
.theme-x .step.is-todo { background: rgba(255, 255, 255, .018); }
.theme-x .step.is-todo:hover { background: rgba(255, 255, 255, .018); border-color: var(--line); }
.theme-x .faq { background: var(--surface); border-color: var(--line); }
.theme-x .faq summary { color: var(--ink-800); }
.theme-x .faq details[open] summary { color: var(--blue-600); }
.theme-x .faq .fb { color: var(--ink-600); }
.theme-x .drawer { background: var(--surface); box-shadow: -16px 0 48px rgba(0, 0, 0, .5); }
.theme-x .drawer-hd { border-bottom-color: var(--line); }
.theme-x .drawer-ft { background: var(--surface-2); border-top-color: var(--line); }
.theme-x .x-btn:hover { background: rgba(255, 255, 255, .06); color: var(--ink-900); }
.theme-x .reason { background: var(--surface-2); border-color: var(--line-2); }
.theme-x .reason .rt b { color: var(--ink-900); }
.theme-x .sidenav .sn-title { color: var(--ink-400); }
.theme-x .sidenav a { color: var(--ink-700); }
.theme-x .sidenav a:hover { background: rgba(255, 255, 255, .05); color: var(--blue-600); }
.theme-x .sidenav a.active { background: rgba(240, 160, 60, .11); color: var(--blue-600); }
.theme-x .sidenav a .cnt { background: rgba(255, 255, 255, .06); color: var(--ink-500); }
.theme-x .sidenav .ep-m { background: rgba(255, 255, 255, .06); color: var(--ink-500); }
.theme-x .sidenav a.active .ep-m { background: var(--blue-600); color: var(--accent-ink); }
.theme-x .est-out { background: var(--surface-2); border-color: var(--line); }
.theme-x .est-out .big { color: var(--blue-600); }
.theme-x .est .field label b { color: var(--blue-600); }
.theme-x .facts dt { color: var(--ink-500); }
.theme-x .facts dd { color: var(--ink-800); }
.theme-x .kv .v2 { color: var(--ink-900); }
.theme-x .chart .grid-l { stroke: rgba(255, 255, 255, .07); }
.theme-x .chart .ax { fill: var(--ink-400); }
.theme-x .chart .ln-2 { stroke: var(--blue-600); }
.theme-x .stackbar { border-color: var(--line); }
.theme-x .splitrow input[type=range] { background: rgba(255, 255, 255, .12); }
.theme-x .splitrow input[type=range]::-webkit-slider-thumb {
  background: var(--blue-600); border-color: #0b0b0d; box-shadow: none;
}
.theme-x .splitrow .amt { color: var(--blue-600); }
.theme-x .specitem { background: var(--surface); }
.theme-x .specitem .sv { color: var(--ink-900); }
.theme-x .recency thead th { background: var(--surface-2); color: var(--ink-500); }
.theme-x .recency th, .theme-x .recency td { border-bottom-color: var(--line-2); }
.theme-x .recency .no { color: var(--ink-300); }
/* 地图容器高度由各页显式指定（原 aspect-ratio 在宽屏下会撑到 690px 占满整屏） */
.theme-x .mapwrap { border-color: var(--line); }
/* 图层与底图整体压暗，并在四周压一层暗角，避免大块饱和绿压过整页 */
.theme-x .mapwrap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background:
    linear-gradient(180deg, rgba(8, 8, 10, .18) 0%, rgba(8, 8, 10, .30) 100%),
    radial-gradient(125% 95% at 50% 45%,
              rgba(8, 8, 10, 0) 30%, rgba(8, 8, 10, .60) 100%);
}
.theme-x .parcel { stroke: rgba(255, 255, 255, .18); }
.theme-x .mapwrap svg.overlay { filter: saturate(.62) brightness(.72) contrast(1.05); }
/* 图例色块跟着地图一起压，否则图例比地图亮、对不上 */
.theme-x .legend-swatch { filter: saturate(.62) brightness(.72); }
.theme-x .mapwrap .mapnote, .theme-x .maptool .badge-dark {
  background: rgba(8, 8, 10, .82); color: #c2c8d0;
}
.theme-x .mapwrap img.basemap { filter: saturate(.40) brightness(.46) contrast(1.10); }
.theme-x .codeblk { color: #c6cbd3; border-color: var(--line); }
.theme-x .codeblk .k { color: var(--blue-400); }
.theme-x .codeblk .s { color: #8ecf9f; }
.theme-x .codeblk .n { color: #e8c07d; }
.theme-x .codeblk .cm { color: #8b9099; }
.theme-x .codeblk .hl { background: rgba(240, 160, 60, .18); color: #fbe0bb; }
.theme-x .tl-dot { background: var(--surface); border-color: var(--line); color: var(--ink-500); }
.theme-x .tl-node::before { background: var(--line); }
.theme-x .tl-node.done .tl-dot { background: var(--blue-600); border-color: var(--blue-600); color: var(--accent-ink); }
.theme-x .tl-node.done::before { background: var(--blue-600); }
.theme-x .tl-node.now .tl-dot { background: var(--surface); border-color: var(--risk-mid); color: var(--risk-mid); }
.theme-x .appcard { background: var(--surface); border-color: var(--line); }
.theme-x .appcard .ah { border-bottom-color: var(--line-2); }
.theme-x .appcard .ah .ai { background: rgba(240, 160, 60, .12); color: var(--blue-600); }
.theme-x .appcard .ah .meta { color: var(--ink-500); }
.theme-x .appcard .ly { background: var(--surface-2); border-color: var(--line-2); }
.theme-x .appcard .ly .v { color: var(--ink-900); }
.theme-x .keyrow { border-bottom-color: var(--line-2); }
.theme-x .keyrow .kn { color: var(--ink-700); }
.theme-x .cside .card { background: var(--surface); }
.theme-x .cside .me { border-bottom-color: var(--line-2); }
.theme-x .cside nav a { color: var(--ink-700); }
.theme-x .cside nav a:hover { background: rgba(255, 255, 255, .05); color: var(--blue-600); }
.theme-x .cside nav a.active { background: rgba(240, 160, 60, .11); color: var(--blue-600); }
.theme-x .cside nav .grp { color: var(--ink-400); }
.theme-x .gate { border-color: var(--line); background: var(--surface); }
.theme-x .gate .gi { background: rgba(240, 160, 60, .12); color: var(--blue-600); }
.theme-x .todo { border-bottom-color: var(--line-2); }
.theme-x .todo .ti { color: #e8b04a; }
.theme-x .todo .ti.ok { color: #7fdaa1; }
.theme-x .todo .ti.info { color: var(--blue-600); }
.theme-x .pillar { background: var(--surface-3); border-color: var(--line); }
.theme-x .pcard.is-locked { background: rgba(255, 255, 255, .018); }
.theme-x .pcard.is-locked .pcard-img img { opacity: .72; filter: saturate(.68) brightness(.94); }
.theme-x .pcard.is-locked h4 { color: var(--ink-700); }
.theme-x .pcard.is-locked h4 { color: var(--ink-600); }
.theme-x .btn[disabled], .theme-x .btn.is-disabled {
  background: rgba(255, 255, 255, .04); color: var(--ink-400); border-color: var(--line);
}
.theme-x .ribbon { background: rgba(240, 160, 60, .94); color: var(--accent-ink); }
.theme-x .ribbon.reco { background: rgba(232, 176, 74, .95); color: var(--accent-ink); }
.theme-x ::-webkit-scrollbar { width: 10px; height: 10px; }
.theme-x ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .13); border-radius: 100px; border: 2px solid var(--bg); }
.theme-x ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .22); }
.theme-x ::-webkit-scrollbar-track { background: var(--bg); }

/* ==========================================================================
   深色适配：清理基础样式里为浅色主题写死的地方
   ========================================================================== */

/* 徽标 */
.theme-x .badge-blue  { background: rgba(240,160,60,.10); border-color: rgba(240,160,60,.30);  color: #f0b15c; }
.theme-x .badge-ok    { background: rgba(95,208,138,.11); border-color: rgba(95,208,138,.30);  color: #7fdaa1; }
.theme-x .badge-warn  { background: rgba(232,176,74,.11); border-color: rgba(232,176,74,.30);  color: #f0b15c; }
.theme-x .badge-danger{ background: rgba(242,112,108,.12); border-color: rgba(242,112,108,.30); color: #f79a9a; }
.theme-x .badge-gray  { background: rgba(255,255,255,.05); border-color: var(--line); color: var(--ink-600); }
.theme-x .badge-dark  { background: rgba(255,255,255,.09); color: #cfd4da; border-color: var(--line); }

/* 提示条 */
.theme-x .notice-warn  { background: rgba(232,176,74,.09); border-color: rgba(232,176,74,.26); color: #e6c489; }
.theme-x .notice-info  { background: rgba(240,160,60,.09); border-color: rgba(240,160,60,.24); color: #ecc191; }
.theme-x .notice-ok    { background: rgba(95,208,138,.09); border-color: rgba(95,208,138,.24); color: #9fd9b6; }
.theme-x .notice-danger{ background: rgba(242,112,108,.10); border-color: rgba(242,112,108,.26); color: #f2a9a6; }

/* 风险等级胶囊 */
.theme-x .riskpill.high   { background: rgba(242,112,108,.14); color: #f79a9a; }
.theme-x .riskpill.medium { background: rgba(232,176,74,.14);  color: #f0b15c; }
.theme-x .riskpill.low    { background: rgba(95,208,138,.13);  color: #7fdaa1; }

/* 待办与说明卡的状态文字 */
.theme-x .todo .ti { color: #f0b15c; }
.theme-x .snote.good b { color: #7fdaa1; }
.theme-x .snote.warn b { color: #f0b15c; }
.theme-x .trend-up { color: #7fdaa1; } .theme-x .trend-down { color: #f79a9a; }

/* 分段 / 标签页 */
.theme-x .tabs { border-bottom-color: var(--line); }
.theme-x .tabs button { color: var(--ink-500); }
.theme-x .tabs button:hover { color: var(--ink-800); }
.theme-x .tabs button.active { color: var(--blue-600); border-bottom-color: var(--blue-600); }

/* 工作台「地球视图」卡右侧的图层预览：压暗，避免亮色地图压过整页 */
.ev-preview {
  position: relative; min-height: 190px; align-self: stretch;
  background: url("img/sat-risk.jpg") center/cover;
  filter: saturate(.78) brightness(.84) contrast(1.04);
}
.ev-preview::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,8,10,.08) 0%, rgba(8,8,10,.46) 100%);
}

/* 营销页首屏配图统一压暗降饱和：
   corp 用 .hero-bg 背景层，其余详情/方案页用的是 <img class="fit">，两处都要覆盖，
   否则亮图会直接打断近黑底。 */
.theme-x .hero-bg { opacity: .42; filter: saturate(.72) brightness(.64) contrast(1.06); }
.theme-x .fit { filter: saturate(.42) brightness(.50) contrast(1.10); }
.theme-x .pillar-bg { filter: saturate(.76) brightness(.82); }

/* ==========================================================================
   首页 / 营销页组件（对齐参考稿一）
   ========================================================================== */

/* ------------------------------------------------------------------ 首屏 */
.hero2 {
  position: relative; overflow: hidden; background: var(--hero-bg);
  border-bottom: 1px solid var(--line); min-height: 436px;
}
.hero2 .h2-art { position: absolute; inset: 0 0 0 34%; }
.hero2 .h2-art img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%;
  opacity: .74;
}
.hero2 .h2-art::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, #08080a 0%, rgba(8,8,10,.94) 18%, rgba(8,8,10,.46) 56%, rgba(8,8,10,.14) 100%),
    linear-gradient(180deg, rgba(8,8,10,.72) 0%, rgba(8,8,10,.06) 46%, rgba(8,8,10,.70) 100%);
}
.hero2 .h2-orbit { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero2 .h2-inner {
  position: relative; padding-top: 62px; padding-bottom: 66px;
  min-height: 436px; display: flex; flex-direction: column; justify-content: center;
}
.hero2 h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 4.6vw, 66px); line-height: 1.06;
  letter-spacing: -.035em; font-weight: 600;
  color: var(--hero-title); margin-top: 26px; max-width: 15em;
}
.hero2 h1 .h1-2 { color: #c4c8cd; }
.hero2 .h2-lead {
  margin-top: 24px; font-size: 16.5px; line-height: 1.68;
  color: var(--hero-text-dim); max-width: 30em;
}
.hero2 .h2-cta { margin-top: 34px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ------------------------------------------------------------ 能力条 */
.featstrip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--line); background: var(--bg);
}
.featstrip .feat {
  display: flex; gap: 15px; align-items: flex-start;
  padding: 24px 26px; border-left: 1px solid var(--line);
}
.featstrip .feat:first-child { border-left: 0; padding-left: 0; }
.featstrip .fi { color: #c9ced5; flex: none; margin-top: 1px; }
.featstrip b {
  display: block; font-size: 14.5px; font-weight: 600;
  color: var(--ink-900); letter-spacing: -.01em;
}
.featstrip span { display: block; font-size: 12.5px; color: var(--ink-500); margin-top: 3px; }

/* --------------------------------------------------- 三卡 + 数字栏 */
.band { padding: 42px 0; border-bottom: 1px solid var(--line); }
.band-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 232px;
  gap: 16px; align-items: stretch;
}

.xcard {
  display: flex; flex-direction: column; gap: 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 22px 24px 20px;
  transition: border-color .18s;
}
.xcard:hover { border-color: var(--line-strong); }
.xcard .x-top { display: flex; gap: 18px; align-items: flex-start; flex: 1; }
.xcard .x-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.xcard .x-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: 11px; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-700);
}
.xcard .x-eyebrow::before {
  content: ""; width: 3px; height: 13px; border-radius: 1px;
  background: var(--blue-600); flex: none;
}
.xcard h3 {
  font-family: var(--font-display); font-size: 20px; line-height: 1.28;
  letter-spacing: -.018em; font-weight: 600; color: var(--ink-900);
  margin-top: 15px;
}
.xcard p { font-size: 13px; line-height: 1.7; color: var(--ink-600); margin-top: 12px; }
.xcard .x-link {
  margin-top: auto; padding-top: 20px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--blue-600);
}
.xcard .x-link:hover { color: var(--blue-400); }
.xcard .x-link .ic { transition: transform .18s; }
.xcard .x-link:hover .ic { transform: translateX(3px); }
.xcard .x-art {
  width: 176px; height: 176px; flex: none; border-radius: var(--r);
  overflow: hidden; background: var(--surface-3);
}
.xcard .x-art img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.74) contrast(1.06) brightness(.88);
}
.xcard .x-art-sm { width: 168px; height: 152px; }

/* 卡片内的图标清单（参考稿 USE CASES 卡） */
.xlist {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px;
  width: 172px; flex: none; align-content: start;
}
.xlist .xl {
  display: flex; align-items: center; gap: 8px; padding: 12px 0;
  font-size: 11.5px; color: var(--ink-700); border-top: 1px solid var(--line-2);
  white-space: nowrap;
}
.xlist .xl:nth-child(1), .xlist .xl:nth-child(2) { border-top: 0; }
.xlist .xl .ic { color: var(--ink-500); flex: none; }

/* 数字栏 */
.statcol { display: flex; flex-direction: column; border-left: 1px solid var(--line); padding-left: 26px; }
.statcol::before {
  content: ""; width: 38px; height: 2px; background: var(--blue-600);
  border-radius: 1px; margin-bottom: 20px; flex: none;
}
.statro { padding: 0 0 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line-2); }
.statro:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.statro .sv {
  font-family: var(--font-display); font-size: 30px; font-weight: 600;
  letter-spacing: -.028em; color: var(--ink-900); line-height: 1.1;
}
.statro .sl { font-size: 12.5px; color: var(--ink-500); margin-top: 6px; }

/* ------------------------------------------------------------ 轮播指示 */
.tagbar {
  display: flex; align-items: center; gap: 26px;
  padding: 20px 0; border-bottom: 1px solid var(--line);
}
.tagbar .dots { display: flex; align-items: center; gap: 8px; }
.tagbar .dot-i { width: 5px; height: 5px; border-radius: 100px; background: rgba(255, 255, 255, .22); }
.tagbar .dot-i.on { width: 16px; background: var(--blue-600); }
.tagbar .sp { flex: 1; }
.tagbar .prog { width: 62px; height: 2px; border-radius: 1px; background: var(--blue-600); }
.tagbar .prog-r { width: 62px; height: 2px; border-radius: 1px; background: rgba(255, 255, 255, .14); }

/* ------------------------------------------------------- 小节标题行 */
.shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.shead .more { font-size: 13px; font-weight: 600; color: var(--blue-600); display: inline-flex; align-items: center; gap: 7px; }
.shead .more:hover { color: var(--blue-400); }

/* 简洁清单行（产品线） */
.linerow { border-top: 1px solid var(--line); padding: 20px 0; display: flex; gap: 18px; align-items: baseline; }
.linerow .li-i { color: var(--blue-600); flex: none; }
.linerow b { font-size: 15.5px; color: var(--ink-900); font-weight: 600; flex: none; min-width: 132px; }
.linerow span { font-size: 13px; color: var(--ink-600); }

/* ------------------------------------------------------------ CTA 带 */
.ctaband {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); padding: 34px 36px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.ctaband h2 { font-family: var(--font-display); font-size: 27px; letter-spacing: -.022em; }
.ctaband p { font-size: 13.5px; color: var(--ink-600); margin-top: 8px; }

@media (max-width: 1360px) {
  .band-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .statcol { grid-column: 1 / -1; border-left: 0; padding-left: 0; padding-top: 8px; }
  .statcol { flex-direction: row; gap: 26px; }
  .statcol::before { display: none; }
  .statro { border-bottom: 0; border-right: 1px solid var(--line-2); padding: 0 26px 0 0; margin: 0; }
  .statro:last-child { border-right: 0; padding-right: 0; }
}
@media (max-width: 1024px) {
  .band-grid { grid-template-columns: 1fr; }
  .featstrip { grid-template-columns: repeat(2, 1fr); }
  .featstrip .feat:nth-child(3) { border-left: 0; }
  .featstrip .feat { border-top: 1px solid var(--line); }
  .featstrip .feat:nth-child(-n+2) { border-top: 0; }
}
@media (max-width: 720px) {
  .featstrip { grid-template-columns: 1fr; }
  .featstrip .feat { border-left: 0; }
  .featstrip .feat:nth-child(2) { border-top: 1px solid var(--line); }
  .xcard .x-art, .xcard .xlist { display: none; }
  .hero2 .h2-art { inset: 0; opacity: .42; }
}