/* ==========================================================================
   GlobeABC · Site Stylesheet
   主体：上海浅忆云信息技术有限公司
   规范来源：《浅忆云品牌视觉手册 V1》
   色板 深靛 #0C2440 / 次靛 #1D4F82 / 强调金 #D9A441 / 青蓝 #6FA8BF
        砖红 #B23B2E / 纸 #F4F7FA / 页底 #EDF1F5 / 线 #DFE6EE
   排印 标题衬线（宋体系）承权威 · 正文无衬线 · 数据等宽
   圆角 4 / 8px（手册规范）
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计令牌
   -------------------------------------------------------------------------- */
:root{
  --ink:#0C2440;
  --ink2:#1D4F82;
  --blue:#1D4F82;
  --blue-lt:#5C7699;
  --gold:#D9A441;
  --gold-lt:#E8B854;
  --gold-dp:#A87A22;
  --cyan:#6FA8BF;
  --rust:#B23B2E;

  --paper:#F4F7FA;
  --paper-2:#EDF1F5;
  --card:#FFFFFF;
  --line:#DFE6EE;
  --line-2:#EFF4F9;

  --tx:#16202B;
  --tx-mid:#2A3846;
  --tx-soft:#6B7A8C;
  --tx-dim:#9AA8B6;

  --dk:#071726;
  --dk2:#0C2440;
  --dk-tx:#EAF1F8;
  --dk-mid:#A9BBD1;
  --dk-soft:#7E96B4;
  --dk-line:rgba(255,255,255,.13);

  --serif:"Songti SC","STSong","Source Han Serif SC","Noto Serif SC",SimSun,serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB",
         "Microsoft YaHei","Noto Sans SC","Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --r:4px;
  --r-lg:8px;
  --sh:12,36,64;

  --nav-h:72px;
  --wrap:1180px;
  --gut:24px;      /* 容器内边距；超宽屏档位会加大 */
}

/* --------------------------------------------------------------------------
   2. 基础
   -------------------------------------------------------------------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
  margin:0; background:var(--paper); color:var(--tx);
  font-family:var(--sans); font-size:16px; line-height:1.8;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{max-width:100%; display:block}
a{color:var(--blue); text-decoration:none; transition:color .18s ease}
a:hover{color:var(--ink)}
::selection{background:rgba(217,164,65,.3)}
:focus-visible{outline:2px solid var(--cyan); outline-offset:2px; border-radius:2px}

.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:24px}
.narrow{max-width:920px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* --------------------------------------------------------------------------
   3. 排版
   -------------------------------------------------------------------------- */
h1,h2,h3,h4,h5{color:var(--ink); margin:0; line-height:1.3}
h1,h2{font-family:var(--serif); font-weight:600; letter-spacing:.012em}
h1{font-size:clamp(32px,4.6vw,54px); line-height:1.26}
h2{font-size:clamp(24px,3vw,36px)}
h3{font-size:19px; font-weight:700; letter-spacing:.01em}
h4{font-size:16px; font-weight:700}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

.eyebrow{
  font-family:var(--mono); font-size:11.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold-dp);
  display:inline-flex; align-items:center; gap:10px; margin:0 0 18px;
}
.eyebrow::before{content:""; width:28px; height:1px; background:var(--gold)}
.lede{font-size:clamp(15.5px,1.5vw,17.5px); color:var(--tx-mid); max-width:64ch; line-height:1.9}
.muted{color:var(--tx-soft)}
.dim{color:var(--tx-dim)}
.gold{color:var(--gold)}
.accent{color:var(--ink2)}
.mono{font-family:var(--mono)}

/* 章节 */
section{padding-block:clamp(58px,7vw,100px)}
.sec-head{margin-bottom:clamp(32px,4vw,52px)}
.sec-head .lede{margin-top:15px}
.band{background:var(--paper-2); border-block:1px solid var(--line)}
.band-dark{background:linear-gradient(165deg,#071726 0%,#0C2440 58%,#123055 100%); color:#fff}
.band-dark h1,.band-dark h2,.band-dark h3,.band-dark h4{color:#fff}
.band-dark .lede{color:var(--dk-mid)}
.band-dark .eyebrow{color:var(--gold)}

/* --------------------------------------------------------------------------
   4. 按钮
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 24px; border-radius:var(--r); font-size:15px; font-weight:600;
  border:1px solid transparent; cursor:pointer; transition:.24s ease;
  white-space:nowrap; letter-spacing:.02em; font-family:var(--sans);
}
.btn-solid{background:var(--ink); color:#fff; border-color:var(--ink)}
.btn-solid:hover{background:var(--ink2); border-color:var(--ink2); transform:translateY(-2px);
  box-shadow:0 14px 28px -16px rgba(var(--sh),.75); color:#fff}
.btn-ghost{background:transparent; color:var(--ink); border-color:#C9D6E3}
.btn-ghost:hover{border-color:var(--ink); background:#fff}
.btn-gold{background:var(--gold); color:#231906; border-color:var(--gold)}
.btn-gold:hover{background:var(--gold-lt); border-color:var(--gold-lt); transform:translateY(-2px); color:#231906}
.btn-outline{background:transparent; color:#fff; border-color:rgba(255,255,255,.42)}
.btn-outline:hover{background:rgba(255,255,255,.1); border-color:#fff; color:#fff}
.btn-sm{padding:8px 16px; font-size:13.5px}
.btn-lg{padding:18px 40px; font-size:17px}
.btn .ar{transition:transform .24s ease}
.btn:hover .ar{transform:translateX(3px)}

/* --------------------------------------------------------------------------
   5. 导航
   -------------------------------------------------------------------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:90;
  border-bottom:1px solid transparent;
  transition:background .32s ease, border-color .32s ease;
}
.nav.solid{
  background:rgba(244,247,250,.88);
  backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom-color:var(--line);
}
.nav-in{display:flex; align-items:center; gap:20px; height:var(--nav-h); max-width:var(--wrap); margin:0 auto; padding-inline:24px}
.brand{display:flex; align-items:center; gap:11px; flex:none}
.brand img{width:32px; height:32px}
.brand-txt{display:flex; flex-direction:column; line-height:1.16}
.brand-txt b{font-size:16.5px; font-weight:700; color:var(--ink); letter-spacing:.01em}
.brand-txt span{font-size:10px; color:var(--tx-soft); letter-spacing:.16em; font-family:var(--mono)}

.nav-menu{display:flex; gap:7px; margin-left:auto; align-items:center}
.nav-menu > a{
  padding:9px 15px; border-radius:var(--r); font-size:14.5px; font-weight:500;
  color:var(--tx-mid); transition:.2s ease;
}
.nav-menu > a:hover{background:rgba(12,36,64,.05); color:var(--ink)}
.nav-menu > a.on{color:var(--ink); font-weight:600}
.nav-cta{margin-left:10px}

/* 深色头图上的透明导航 */
.nav.on-dark:not(.solid) .brand-txt b{color:#fff}
.nav.on-dark:not(.solid) .brand-txt span{color:var(--dk-soft)}
.nav.on-dark:not(.solid) .nav-menu > a{color:var(--dk-mid)}
.nav.on-dark:not(.solid) .nav-menu > a:hover{background:rgba(255,255,255,.1); color:#fff}
.nav.on-dark:not(.solid) .nav-menu > a.on{color:#fff}
.nav.on-dark:not(.solid) .nav-drop-btn.on{color:#fff}
/* 「定价」是下拉按钮，住在 .nav-drop 里，**不是 .nav-menu 的直接子元素** ——
   上面那批 `.nav-menu > a` 的深色态规则全都选不到它，于是深色头图上
   其它导航项是浅灰、只有「定价」还是默认的深靛 #2A3846，几乎看不见。
   这里补齐，让它和其它导航项完全同色。 */
.nav.on-dark:not(.solid) .nav-drop-btn{color:var(--dk-mid)}
.nav.on-dark:not(.solid) .nav-drop:hover .nav-drop-btn,
.nav.on-dark:not(.solid) .nav-drop:focus-within .nav-drop-btn{color:#fff}
.nav.on-dark:not(.solid) .nav-drop-menu a.on{color:#fff; background:rgba(255,255,255,.1)}
.nav.on-dark:not(.solid) .nav-cta.btn-solid{background:var(--gold); color:#231906; border-color:var(--gold)}
/* 浅色导航态：CTA 固定深靛底白字，避免与浅底糊在一起 */
.nav.solid .nav-cta.btn-solid,
.nav:not(.on-dark) .nav-cta.btn-solid{background:var(--ink); color:#fff; border-color:var(--ink)}
.nav.solid .nav-cta.btn-solid:hover,
.nav:not(.on-dark) .nav-cta.btn-solid:hover{background:var(--ink2); border-color:var(--ink2); color:#fff}

.nav-toggle{display:none; background:none; border:0; padding:10px; cursor:pointer; margin-left:auto}
.nav-toggle i{display:block; width:22px; height:2px; background:var(--ink); margin:5px 0; transition:.24s}
.nav:not(.solid) .nav-toggle i{background:#fff}
.nav.on-dark:not(.solid) .nav-toggle i{background:#fff}
@media(max-width:960px){
  .nav-menu{
    position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; align-items:stretch;
    background:rgba(244,247,250,.98); backdrop-filter:blur(16px); padding:14px 20px 22px; gap:2px;
    border-bottom:1px solid var(--line); display:none; max-height:calc(100vh - var(--nav-h)); overflow:auto;
  }
  .nav-menu.open{display:flex}
  .nav-menu > a{padding:12px 14px; font-size:16px; color:var(--tx-mid) !important}
  .nav-cta{margin:10px 0 0}
  .nav-toggle{display:block}
}

/* --------------------------------------------------------------------------
   6. 页脚
   -------------------------------------------------------------------------- */
.footer{border-top:1px solid var(--line); background:var(--paper); padding-block:52px 0; font-size:13.5px; color:var(--tx-soft)}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:28px; padding-bottom:14px}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}
.foot-grid h5{margin:0 0 14px; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); font-family:var(--mono); font-weight:600}
.foot-grid ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px}
.foot-grid a{color:var(--tx-mid)}
.foot-brand p{margin:0; max-width:36ch; color:var(--tx-mid); line-height:1.8}
.foot-tag{margin-top:14px; font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--tx-dim)}

/* --------------------------------------------------------------------------
   7. 组件
   -------------------------------------------------------------------------- */
/* 卡片 */
.grid-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
.grid-3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.grid-4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
@media(max-width:960px){.grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.grid-2,.grid-3,.grid-4{grid-template-columns:minmax(0,1fr)}}

.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:28px 26px 26px; position:relative; overflow:hidden; transition:.28s ease;
}
.card::before{content:""; position:absolute; left:0; top:0; height:2px; width:0;
  background:linear-gradient(90deg,var(--cyan),var(--gold)); transition:width .45s ease}
.card:hover{transform:translateY(-4px); box-shadow:0 26px 48px -32px rgba(var(--sh),.5); border-color:#CAD8E5}
.card:hover::before{width:100%}
.card-ico{width:44px; height:44px; border-radius:var(--r); display:grid; place-items:center;
  background:linear-gradient(145deg,rgba(29,79,130,.1),rgba(111,168,191,.16));
  border:1px solid var(--line); margin-bottom:18px}
.card-ico svg{width:22px; height:22px}
.card h3{margin-bottom:9px}
.card p{font-size:14.5px; color:var(--tx-mid)}
.card ul{margin:16px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px}
.card ul li{font-size:14px; color:var(--tx-mid); padding-left:18px; position:relative; line-height:1.65}
.card ul li::before{content:""; position:absolute; left:0; top:9px; width:5px; height:5px; border-radius:50%; background:var(--gold)}

/* 数据 */
.stats{display:flex; flex-wrap:wrap; gap:12px 40px}
.stat b{display:block; font-family:var(--mono); font-size:clamp(21px,2.3vw,27px); font-weight:600;
  color:var(--ink); line-height:1.15; font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.stat span{font-size:12.5px; color:var(--tx-soft)}
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
@media(max-width:760px){.stat-grid{grid-template-columns:repeat(2,1fr)}}
.band-dark .stat b{color:#fff}
.band-dark .stat span{color:var(--dk-soft)}

/* 表格 */
.tbl{width:100%; border-collapse:collapse; font-size:14.5px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.tbl th,.tbl td{border-bottom:1px solid var(--line-2); padding:14px 18px; text-align:left; vertical-align:top}
.tbl thead th{background:var(--paper-2); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tx-soft); font-family:var(--mono); font-weight:600}
.tbl td:first-child{font-weight:600; color:var(--ink)}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr:hover{background:#FAFCFE}
.tbl .no{color:var(--rust); font-weight:600}
.tbl .yes{color:#147A56; font-weight:600}
.tbl-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
@media(max-width:720px){.tbl th,.tbl td{padding:11px 12px; font-size:13.5px}}

/* 终端 / 代码窗 */
.win{background:#08182A; border:1px solid rgba(255,255,255,.09); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:0 34px 64px -44px rgba(7,23,38,.85), inset 0 1px 0 rgba(255,255,255,.06);
  display:flex; flex-direction:column; height:100%}
.win-bar{display:flex; align-items:center; gap:7px; flex:none; padding:11px 14px;
  background:rgba(255,255,255,.045); border-bottom:1px solid rgba(255,255,255,.07)}
.win-bar i{width:10px; height:10px; border-radius:50%; flex:none}
.win-title{margin-left:9px; font-family:var(--mono); font-size:11px; color:var(--dk-soft); letter-spacing:.07em}
.win-body{padding:16px 18px 18px; font-family:var(--mono); font-size:12px; line-height:2.05;
  color:var(--dk-mid); flex:1}
.win-body > div{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cm{color:#5C7590}
.kw{color:var(--gold)}
.st{color:var(--cyan)}
.ok2{color:#5FCF9B}
.nm{color:#E8B854}

.pbar{display:inline-block; width:92px; height:5px; border-radius:3px; background:rgba(255,255,255,.1);
  overflow:hidden; vertical-align:middle; margin:0 8px; position:relative; top:-1px}
.pbar i{display:block; height:100%; border-radius:3px; background:linear-gradient(90deg,var(--cyan),var(--gold))}

.logscroll{height:150px; overflow:hidden; position:relative}
.logscroll::after{content:""; position:absolute; inset:auto 0 0 0; height:52px; pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(8,24,42,.92))}
.loginner{padding:14px 18px; font-family:var(--mono); font-size:11.5px; line-height:1.95; color:var(--dk-soft);
  animation:logup 30s linear infinite}
@keyframes logup{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.loginner b{font-weight:600}
.lg-ok{color:#5FCF9B}
.lg-cache{color:var(--cyan)}
.lg-warn{color:var(--gold)}

/* 标签 */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{font-family:var(--mono); font-size:11.5px; color:var(--ink2); border:1px solid var(--line);
  border-radius:var(--r); padding:5px 11px; background:var(--card); letter-spacing:.03em}
.chip span{color:var(--tx-dim); margin-left:5px}

/* 时间线 */
.tl{border-left:1px solid var(--line); margin-left:8px; padding-left:30px; display:flex; flex-direction:column; gap:28px}
.tl-item{position:relative}
.tl-item::before{content:""; position:absolute; left:-36px; top:8px; width:9px; height:9px;
  border-radius:50%; background:var(--paper); border:2px solid var(--gold)}
.tl-y{font-family:var(--mono); font-size:12.5px; font-weight:600; color:var(--gold-dp); letter-spacing:.1em}
.tl-t{font-family:var(--serif); font-size:18px; font-weight:600; color:var(--ink); margin:4px 0 5px}
.tl-d{font-size:14px; color:var(--tx-mid); line-height:1.85}

/* 团队 */
.member{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px 24px; transition:.28s ease}
.member:hover{border-color:#CAD8E5; box-shadow:0 22px 44px -32px rgba(var(--sh),.45)}
.m-role{font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-dp)}
.m-name{font-family:var(--serif); font-size:23px; font-weight:600; color:var(--ink); margin:7px 0 4px}
.m-tag{font-size:13.5px; color:var(--ink2); font-weight:600; margin-bottom:14px}
.m-bio{font-size:14px; color:var(--tx-mid); line-height:1.8}
.m-line{margin-top:14px; padding-top:13px; border-top:1px solid var(--line-2);
  font-size:12.5px; color:var(--tx-soft); font-family:var(--mono); letter-spacing:.04em}

/* 提示条 */
.note{border-left:2px solid var(--gold); background:var(--paper-2);
  padding:14px 18px; font-size:13.5px; color:var(--tx-mid); border-radius:0 var(--r) var(--r) 0}
.note b{color:var(--ink)}
.band-dark .note{background:rgba(255,255,255,.05); color:var(--dk-mid)}
.band-dark .note b{color:#fff}

/* 面包屑 */
.crumb{font-family:var(--mono); font-size:12px; color:var(--tx-dim); margin-bottom:22px}
.crumb a{color:var(--tx-soft)}
.crumb span{margin-inline:8px}

/* --------------------------------------------------------------------------
   8. 页面级
   -------------------------------------------------------------------------- */
/* 内页头图（深色，比首页矮） */
.phead{background:linear-gradient(165deg,#071726 0%,#0C2440 62%,#123055 100%);
  color:#fff; padding-top:calc(var(--nav-h) + clamp(56px,7vw,96px)); padding-bottom:clamp(48px,6vw,84px)}
.phead h1{color:#fff; max-width:20ch}
.phead .lede{color:var(--dk-mid); margin-top:18px}
.phead .eyebrow{color:var(--gold)}
.phead .crumb{color:var(--dk-soft); margin-bottom:20px}
.phead .crumb a{color:var(--dk-soft)}

/* 首页头图 */
.hero{background:linear-gradient(168deg,#071726 0%,#0C2440 46%,#08192B 100%); color:var(--dk-tx);
  padding-top:calc(var(--nav-h) + clamp(64px,8vw,110px)); padding-bottom:clamp(64px,7vw,100px); position:relative; overflow:hidden}
.hero::before{content:""; position:absolute; right:-200px; top:-200px; width:660px; height:660px; border-radius:50%;
  background:radial-gradient(circle,rgba(217,164,65,.14),transparent 62%); pointer-events:none}
.hero::after{content:""; position:absolute; left:-160px; bottom:-220px; width:560px; height:560px; border-radius:50%;
  background:radial-gradient(circle,rgba(111,168,191,.16),transparent 64%); pointer-events:none}
.hero > .wrap{position:relative; z-index:1}
.hero h1{color:#fff}
.hero .lede{color:var(--dk-mid)}
.hero .hero-in{display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(30px,4.4vw,64px); align-items:center}
@media(max-width:980px){.hero .hero-in{grid-template-columns:minmax(0,1fr)}}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.hero .btn-ghost{color:#fff; border-color:rgba(255,255,255,.34)}
.hero .btn-ghost:hover{background:rgba(255,255,255,.1); border-color:#fff; color:#fff}
.hero .stats{margin-top:40px; padding-top:26px; border-top:1px solid var(--dk-line)}
/* .stat b 的默认色是深靛（给浅色区用的），直接放进深色头图会变成深靛压深靛——
   数值整个看不见。深色容器里的 stat 必须显式翻成亮色。 */
.hero .stat b,.band-ink .stat b,.phead .stat b{color:#fff}
.hero .stat span,.band-ink .stat span,.phead .stat span{color:var(--dk-soft)}
.hero-note{margin-top:18px; font-size:13px; color:var(--dk-soft); line-height:1.75; max-width:54ch}
.hero-note b{color:var(--dk-mid)}

/* 终端（头图右侧，毛玻璃） */
.terminal{background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg); backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  box-shadow:0 40px 80px -50px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.09); overflow:hidden}
.term-bar{display:flex; align-items:center; gap:8px; padding:12px 16px;
  border-bottom:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03)}
.dot{width:9px; height:9px; border-radius:50%; flex:none}
.term-bar span{font-family:var(--mono); font-size:11.5px; color:var(--dk-soft); margin-left:8px; letter-spacing:.06em}
.term-body{padding:20px 20px 24px; font-family:var(--mono); font-size:12.5px; line-height:2.1; color:var(--dk-mid)}
.term-body .k{color:var(--gold); font-weight:600}
.term-body .ok{color:#5FCF9B; font-weight:600}
.term-body .v{color:var(--cyan); font-weight:600}
.term-hr{height:1px; background:rgba(255,255,255,.08); margin:13px 0}

/* 自营实证 —— 全宽深色带，与深色头图无缝衔接（不再是一张单独的圆角卡片） */
.band-ink{
  background:linear-gradient(180deg,#08192B 0%,#0C2440 100%);
  color:#fff; position:relative; overflow:hidden;
  padding-block:clamp(34px,4vw,56px);
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.band-ink::after{content:""; position:absolute; right:-140px; top:-170px; width:430px; height:430px;
  border-radius:50%; background:radial-gradient(circle,rgba(111,168,191,.17),transparent 66%); pointer-events:none}
.band-ink > .wrap{position:relative; z-index:1}
.proof-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 18px; margin-bottom:24px}
.proof-head h3{color:#fff; font-family:var(--serif); font-size:19px; font-weight:600}
.proof-head p{margin:0; font-size:13.5px; color:var(--dk-soft); letter-spacing:.04em}
.proof-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:14px 26px}
.pf{border-left:1px solid rgba(217,164,65,.5); padding-left:14px}
.pf b{display:block; font-size:14.5px; font-weight:600; color:#fff}
.pf span{font-size:12.5px; color:var(--dk-soft)}

/* 定价 */
.tiers{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; align-items:start}
@media(max-width:920px){.tiers{grid-template-columns:minmax(0,1fr)}}
.tier{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:30px 26px 26px; display:flex; flex-direction:column; gap:12px; position:relative}
.tier[data-feat="1"]{border-color:var(--ink); border-width:2px; box-shadow:0 28px 52px -36px rgba(var(--sh),.6)}
.tier-badge{position:absolute; top:-13px; left:26px; background:var(--ink); color:#fff;
  font-size:11.5px; font-weight:700; letter-spacing:.08em; padding:4px 13px; border-radius:var(--r)}
.tier-name{font-family:var(--mono); font-size:12.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--blue-lt)}
.tier[data-tier="lite"] .tier-name{color:var(--gold-dp)}
.tier[data-tier="pro"] .tier-name{color:var(--rust)}
.tier-role{font-family:var(--serif); font-size:21px; font-weight:600; color:var(--ink)}
.tier-say{font-size:14px; color:var(--tx-soft); margin-top:-6px}
.price{display:flex; align-items:baseline; flex-wrap:wrap; gap:3px 7px; margin-top:6px}
.price .cur{font-family:var(--mono); font-size:18px; font-weight:600; color:var(--ink)}
.price .amt{font-family:var(--mono); font-size:37px; font-weight:600; color:var(--ink);
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1}
.price .per{font-size:14px; color:var(--tx-soft)}
.promo-tag{font-size:11.5px; font-weight:700; color:var(--rust); border:1px solid var(--rust);
  border-radius:var(--r); padding:2px 9px; letter-spacing:.03em}
.renew{font-size:13.5px; color:var(--tx-mid)}
.renew b{font-family:var(--mono); font-weight:600; color:var(--ink)}
.renew del{color:var(--tx-soft)}
.tier-keys{margin-top:6px; padding-top:15px; border-top:1px solid var(--line-2);
  display:flex; flex-direction:column; gap:7px; font-size:14px; color:var(--tx-mid)}
.tier-keys b{font-family:var(--mono); font-weight:600; color:var(--ink)}
.tier .btn{margin-top:16px; width:100%}

/* 收尾 CTA */
.cta{background:linear-gradient(152deg,#071726 0%,#0C2440 52%,#152F52 100%); color:#fff;
  border-radius:var(--r-lg); padding:clamp(40px,5vw,68px); text-align:center; position:relative; overflow:hidden}
.cta::after{content:""; position:absolute; right:-90px; top:-90px; width:360px; height:360px;
  border-radius:50%; background:radial-gradient(circle,rgba(111,168,191,.2),transparent 68%); pointer-events:none}
.cta > *{position:relative}
.cta h2{color:#fff}
.cta .lede{color:var(--dk-mid); margin-inline:auto}
.cta .hero-cta{justify-content:center}

/* --------------------------------------------------------------------------
   9. 动效
   -------------------------------------------------------------------------- */
.js .reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}

.js .term-line,.js .win-line{opacity:0; transform:translateY(5px);
  animation:lineIn .5s cubic-bezier(.22,.7,.3,1) forwards}
@keyframes lineIn{to{opacity:1; transform:none}}
.cursor{display:inline-block; width:7px; height:12px; background:var(--gold);
  vertical-align:-2px; margin-left:2px; animation:blink 1.05s steps(1) infinite}
@keyframes blink{0%,45%{opacity:1}50%,100%{opacity:0}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.js .reveal,.js .term-line,.js .win-line{opacity:1 !important; transform:none !important; animation:none !important}
  .cursor,.loginner{animation:none}
  *{transition-duration:.01ms !important}
}

/* --------------------------------------------------------------------------
   10. 产品可视化：信源汇流图 + 看板 + 轮播
   -------------------------------------------------------------------------- */
/* 信源汇流（贸 HOT） */
.flow-wrap{
  position:relative; background:
    radial-gradient(120% 80% at 20% 0%, rgba(29,79,130,.35), transparent 62%),
    linear-gradient(170deg,#071726 0%,#0B2038 60%,#08192B 100%);
  border:1px solid rgba(126,180,220,.16); border-radius:var(--r-lg);
  padding:clamp(18px,2.4vw,28px) 0 clamp(14px,1.8vw,20px); overflow:hidden;
}
.maohot-flow{display:block; width:100%; height:clamp(220px,30vw,330px)}
.maohot-flow.tall{height:clamp(240px,32vw,360px)}
.flow-head{
  position:absolute; top:clamp(18px,2.4vw,28px); right:clamp(20px,2.6vw,32px); left:auto; z-index:2; pointer-events:none; text-align:right;
}
.flow-head .ft{font-family:var(--serif); font-size:clamp(20px,2.2vw,27px); font-weight:600; color:#fff; margin:0; letter-spacing:.02em}
.flow-head .fs{margin:5px 0 0; font-size:13px; color:var(--dk-mid); letter-spacing:.02em}
.flow-legend{
  display:flex; flex-wrap:wrap; gap:8px 30px; align-items:center;
  padding:12px clamp(20px,2.6vw,32px) 0;
}
.flow-legend span{font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--dk-soft)}
.flow-legend b{color:var(--gold); font-weight:600}
.flow-steps{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  margin-top:clamp(20px,2.4vw,28px);
}
@media(max-width:820px){.flow-steps{grid-template-columns:repeat(2,1fr)}}
.flow-step{border-top:1px solid var(--line); padding-top:14px}
.flow-step .sn{font-family:var(--mono); font-size:11px; color:var(--gold-dp); letter-spacing:.12em}
.flow-step b{display:block; font-size:17px; color:var(--ink); margin:5px 0 3px; font-weight:700}
.flow-step p{margin:0; font-size:13px; color:var(--tx-soft); line-height:1.7}

/* 看板（天玑 / 独立站） */
.dash{
  background:radial-gradient(120% 70% at 50% -10%, rgba(37,99,235,.22), transparent 60%), #061224;
  border:1px solid rgba(86,150,225,.22); border-radius:var(--r-lg);
  overflow:hidden; color:#d9e8fb;
  box-shadow:0 34px 70px -46px rgba(6,18,36,.9);
}
.dash-hd{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 16px;
  background:linear-gradient(90deg,rgba(11,30,61,.9),rgba(20,64,120,.9),rgba(11,30,61,.9));
  border-bottom:1px solid rgba(86,150,225,.25);
}
.dash-hd h4{
  margin:0; color:#fff; font-family:var(--mono); font-size:14px; font-weight:600;
  letter-spacing:.1em; text-shadow:0 0 20px rgba(125,211,252,.5);
}
.dash-badge{font-family:var(--mono); font-size:10px; color:#9ecbff; background:rgba(56,189,248,.12);
  border:1px solid rgba(86,150,225,.35); border-radius:20px; padding:2px 9px; letter-spacing:.06em}
.dash-live{margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:10px; color:#34d399; letter-spacing:.14em;
  border:1px solid rgba(52,211,153,.4); border-radius:20px; padding:2px 10px}
.dash-live i{width:6px; height:6px; border-radius:50%; background:#34d399;
  box-shadow:0 0 8px #34d399; animation:dashPulse 1.6s infinite}
@keyframes dashPulse{0%,100%{opacity:1}50%{opacity:.25}}
.dash-clock{font-family:var(--mono); font-size:11px; color:#6f8db3; letter-spacing:.08em}

.kpi-row{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(86,150,225,.16)}
@media(max-width:700px){.kpi-row{grid-template-columns:repeat(2,1fr)}}
.kpi{background:#08182B; padding:14px 16px}
.kpi b{display:block; font-family:var(--mono); font-size:clamp(19px,2.1vw,25px); font-weight:600;
  color:#fff; line-height:1.1; font-variant-numeric:tabular-nums;
  text-shadow:0 0 24px rgba(56,189,248,.45)}
.kpi span{display:block; font-size:11px; color:#6f8db3; margin-top:5px}
.kpi em{display:block; font-style:normal; font-family:var(--mono); font-size:10.5px; color:#34d399; margin-top:3px}
.kpi em.dn{color:#f87171}

.dash-grid{display:grid; grid-template-columns:1.45fr 1fr; gap:1px; background:rgba(86,150,225,.16)}
@media(max-width:860px){.dash-grid{grid-template-columns:minmax(0,1fr)}}
.dash-panel{background:#08182B; padding:13px 15px 15px}
.dash-panel h5{margin:0 0 10px; font-family:var(--mono); font-size:10.5px; color:#9ecbff;
  letter-spacing:.12em; font-weight:600}
.dash-chart{width:100%; height:96px; display:block}
.dash-bars{display:flex; align-items:flex-end; gap:6px; height:96px}
.dash-bars i{flex:1; background:linear-gradient(180deg,#38bdf8,rgba(56,189,248,.25));
  border-radius:2px 2px 0 0; display:block; position:relative}
.dash-bars i.g{background:linear-gradient(180deg,#f59e0b,rgba(245,158,11,.25))}
.dash-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.dash-list li{display:flex; align-items:baseline; gap:9px; font-size:11.5px; line-height:1.5}
.dash-list .dot{width:5px; height:5px; border-radius:50%; flex:none; position:relative; top:-2px}
.dash-list .t{color:#c7dcf5; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dash-list .w{font-family:var(--mono); font-size:10px; color:#6f8db3; flex:none}

/* 轮播 */
.carousel{position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); box-shadow:0 30px 60px -44px rgba(var(--sh),.7)}
.car-track{display:flex; transition:transform .6s cubic-bezier(.4,0,.2,1); will-change:transform}
.car-slide{min-width:100%; position:relative}
.car-slide img{display:block; width:100%; height:auto}
.car-cap{position:absolute; left:0; right:0; bottom:0; padding:26px 22px 16px;
  background:linear-gradient(180deg,transparent,rgba(7,23,38,.92));
  color:#fff; font-family:var(--mono); font-size:11.5px; letter-spacing:.06em}
.car-nav{position:absolute; right:16px; bottom:14px; display:flex; gap:7px; z-index:3}
.car-nav button{width:8px; height:8px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.34); padding:0; transition:.22s}
.car-nav button.on{background:var(--gold); width:22px; border-radius:4px}
.car-arw{position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.3);
  background:rgba(7,23,38,.5); color:#fff; cursor:pointer; display:grid; place-items:center;
  font-size:15px; line-height:1; transition:.22s}
.car-arw:hover{background:rgba(7,23,38,.82); border-color:#fff}
.car-prev{left:12px} .car-next{right:12px}

/* 地球面板（独立站区块） */
.globe-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:1px; background:rgba(86,150,225,.16)}
@media(max-width:840px){.globe-grid{grid-template-columns:minmax(0,1fr)}}
.globe-box{background:#08182B; position:relative}
#geo-globe{display:block; width:100%; height:330px}
@media(max-width:840px){#geo-globe{height:270px}}
.globe-side{background:#08182B; padding:13px 15px 15px; display:flex; flex-direction:column}

/* --------------------------------------------------------------------------
   11. 自定义光标（随主题自动反色）
   -------------------------------------------------------------------------- */
.has-cursor, .has-cursor *{cursor:none !important}
.cur-dot,.cur-ring{
  position:fixed; left:0; top:0; pointer-events:none; z-index:9999;
  will-change:transform; mix-blend-mode:difference; opacity:1;
}
.cur-dot{width:6px; height:6px; border-radius:50%; background:#fff;
  transition:width .24s cubic-bezier(.16,.84,.3,1), height .24s cubic-bezier(.16,.84,.3,1), opacity .3s}
.cur-ring{width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.62);
  transition:width .32s cubic-bezier(.16,.84,.3,1), height .32s cubic-bezier(.16,.84,.3,1),
             border-color .32s ease, background .32s ease, opacity .3s}
.has-cursor.cur-on .cur-ring{width:58px; height:58px; border-color:rgba(255,255,255,.95); background:rgba(255,255,255,.12)}
.has-cursor.cur-on .cur-dot{width:0; height:0}
.has-cursor.cur-press .cur-ring{width:24px; height:24px}
@media(pointer:coarse){.cur-dot,.cur-ring{display:none}}
@media(prefers-reduced-motion:reduce){.cur-dot,.cur-ring{display:none}.has-cursor,.has-cursor *{cursor:auto !important}}

/* --------------------------------------------------------------------------
   12. 定价体系：总览卡 / 配置对比表 / 术语表 / 用量大数字
   -------------------------------------------------------------------------- */
/* 定价总览 */
.pcards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
@media(max-width:920px){.pcards{grid-template-columns:minmax(0,1fr)}}
.pcard{
  display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:26px 24px 22px; text-decoration:none; color:inherit;
  position:relative; overflow:hidden; transition:.32s cubic-bezier(.16,.84,.3,1);
}
.pcard::before{content:""; position:absolute; left:0; top:0; height:2px; width:0;
  background:linear-gradient(90deg,var(--cyan),var(--gold)); transition:width .5s cubic-bezier(.16,.84,.3,1)}
.pcard:hover{border-color:#CAD8E5; box-shadow:0 28px 52px -34px rgba(var(--sh),.5)}
.pcard:hover::before{width:100%}
.pcard h3{font-family:var(--serif); font-size:21px; margin-bottom:6px}
.pcard .pt{font-size:14px; color:var(--tx-soft); margin:0 0 16px; line-height:1.7}
.pcard .pn{font-family:var(--mono); font-size:13px; color:var(--ink); margin-top:auto;
  padding-top:14px; border-top:1px solid var(--line-2)}
.pcard .pn b{font-size:19px; font-weight:600}
.pcard .pn span{color:var(--tx-soft); font-size:12px}
.pcard .go{margin-top:12px; font-size:13.5px; color:var(--gold-dp); font-weight:600}

/* 配置对比表 */
.spec{width:100%; border-collapse:collapse; font-size:13.5px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.spec .sechd td{background:var(--paper-2); font-family:var(--mono); font-size:11.5px;
  letter-spacing:.12em; color:var(--ink); font-weight:600; padding:11px 15px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.spec tbody:first-child .sechd td{border-top:0}
.spec thead th{background:var(--ink); color:#fff; font-family:var(--mono); font-size:12px;
  letter-spacing:.1em; padding:14px 15px; text-align:left; font-weight:600;
  /* 静态表格：不做 sticky，避免首栏错位 */}
.spec thead th:first-child{color:var(--dk-soft); font-weight:400}
.spec td{padding:9px 15px; border-bottom:1px solid var(--line-2); vertical-align:top}
.spec td:first-child{color:var(--tx-mid); width:40%}
.spec tbody tr:hover td{background:#FAFCFE}
.spec .v{font-family:var(--mono); font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums}
.spec .mk{display:inline-block; font-size:11px; padding:1px 8px; border-radius:3px; font-weight:600}
.spec .mk.yes{color:#147A56; background:rgba(16,185,129,.11)}
.spec .mk.opt{color:var(--gold-dp); background:rgba(217,164,65,.14)}
.spec .mk.no{color:var(--tx-dim); font-weight:400}
.spec-wrap{border-radius:var(--r-lg); border:1px solid var(--line)}
.spec-wrap .spec{border:0; border-radius:0}
/* 只看差异 */
.mode{display:inline-flex; gap:2px; background:var(--paper-2); border:1px solid var(--line);
  border-radius:var(--r); padding:3px; margin-bottom:16px}
.mode button{font:inherit; font-size:13px; padding:7px 16px; border:0; border-radius:3px;
  background:transparent; color:var(--tx-soft); cursor:pointer; transition:.22s}
.mode button[aria-pressed="true"]{background:var(--ink); color:#fff; font-weight:600}
body.only-diff tr:not([data-diff]):not(.sechd){display:none}
body.only-diff tbody[data-same]{display:none}
@media(max-width:720px){
  .spec td,.spec thead th{padding:8px 10px; font-size:12.5px}
  .spec td:first-child{width:34%}
}

/* 术语表 */
.gl{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 30px}
@media(max-width:820px){.gl{grid-template-columns:minmax(0,1fr)}}
.gl-item dt{font-weight:600; color:var(--ink); font-size:14px; margin-bottom:4px}
.gl-item dd{margin:0; font-size:13.5px; color:var(--tx-mid); line-height:1.78}

/* 用量大数字（贸 HOT） */
.usage{text-align:center; padding:clamp(30px,4.4vw,58px) 20px}
.usage .lb{font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; color:var(--dk-soft); margin:0 0 10px}
.token-big{font-family:var(--mono); font-weight:600; letter-spacing:-.03em; line-height:1;
  font-size:clamp(38px,7.4vw,92px); color:#fff; font-variant-numeric:tabular-nums;
  text-shadow:0 0 60px rgba(56,189,248,.42)}
.token-big em{font-style:normal; font-size:.44em; color:var(--gold); margin-left:.22em; letter-spacing:.02em}
.usage .sm{font-size:13px; color:var(--dk-soft); margin:14px 0 0; letter-spacing:.04em}
.free-stamp{
  display:inline-block; margin-top:clamp(22px,3vw,34px); padding:14px 40px;
  font-family:var(--mono); font-size:clamp(17px,2.3vw,26px); font-weight:600; letter-spacing:.2em;
  color:#231906; background:var(--gold); border-radius:var(--r);
  box-shadow:0 22px 54px -24px rgba(217,164,65,.85);
}
.token-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(86,150,225,.16); margin-top:clamp(26px,3.4vw,42px)}
@media(max-width:700px){.token-grid{grid-template-columns:1fr}}
.token-grid div{background:#08182B; padding:18px 20px}
.token-grid b{display:block; font-family:var(--mono); font-size:clamp(19px,2.2vw,26px); color:#fff; font-variant-numeric:tabular-nums}
.token-grid span{display:block; font-size:11.5px; color:#6f8db3; margin-top:5px}

/* --------------------------------------------------------------------------
   13. 时段光晕（Time-of-day aurora）
   手法参考 Stripe 首页的数字区：不是粒子，是 6 层径向渐变在底部圆心处循环淡入淡出
   色板改用浅忆云品牌色，圆心置于底部中央，形成"地平线光"
   -------------------------------------------------------------------------- */
.aurora{position:relative; overflow:hidden; background:#071726; isolation:isolate}
.aurora__layer{
  position:absolute; inset:0; opacity:0;
  transition:opacity 2.2s cubic-bezier(.4,0,.2,1);
  will-change:opacity;
}
.aurora__layer.is-on{opacity:1}

/* 六个时段：从深夜走到黄昏再回来 */
.aurora__layer--midnight{
  background:radial-gradient(1650px 1090px at 50% calc(100% + 30px),
    #1D4F82 0%, #163C66 12%, #12314F 26%, #0E2740 42%, #0A1D31 62%, #071726 100%);
}
.aurora__layer--dawn{
  background:radial-gradient(1650px 1060px at 50% 104%,
    #6FA8BF 0%, #4E8BA8 14%, #35648A 29%, #23496F 45%, #163350 64%, #0B2038 84%, #071726 100%);
}
.aurora__layer--morning{
  background:radial-gradient(1650px 1100px at 50% calc(100% + 50px),
    #A9D6E5 0%, #8FC4D8 16%, #6FA8BF 32%, #4A7FA0 46%, #2A5273 62%, #11293F 82%, #071726 100%);
}
.aurora__layer--noon{
  background:radial-gradient(1650px 1100px at 50% calc(100% + 55px),
    #D9A441 0%, #C99B54 15%, #A9846A 30%, #7E7391 44%, #4A6E96 58%, #2A4A70 74%, #102741 90%, #071726 100%);
}
.aurora__layer--dusk{
  background:radial-gradient(1650px 1070px at 50% 102%,
    #E8B854 0%, #D9A441 14%, #C08552 28%, #A06A62 42%, #7A5A80 56%, #4E5187 72%, #26355F 86%, #0A1A31 100%);
}
.aurora__layer--evening{
  background:radial-gradient(1650px 1090px at 50% calc(100% + 40px),
    #B23B2E 0%, #9A3A45 14%, #7C3660 28%, #5C3168 42%, #3E2A5E 58%, #28204A 74%, #131A38 88%, #071726 100%);
}

/* 顶部压暗，保证白字可读 */
.aurora::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(7,23,38,.68) 0%, rgba(7,23,38,.24) 34%, transparent 62%);
}
.aurora > .wrap{position:relative; z-index:2}

.aurora .aurora-title{
  font-family:var(--serif); color:#fff; margin:0;
  font-size:clamp(26px,3.4vw,42px); line-height:1.3; letter-spacing:.02em;
}
.aurora .aurora-sub{
  margin:14px 0 0; font-size:clamp(14px,1.5vw,17px); color:rgba(226,238,250,.72);
  max-width:52ch; line-height:1.85;
}
.aurora-stats{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,3vw,42px); margin-top:clamp(34px,4.6vw,62px);
}
@media(max-width:860px){.aurora-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:460px){.aurora-stats{grid-template-columns:minmax(0,1fr)}}
.aurora-stat b{
  display:block; font-family:var(--mono); font-weight:600; color:#fff;
  font-size:clamp(30px,4.2vw,56px); line-height:1.05; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; text-shadow:0 2px 40px rgba(4,14,26,.6);
}
.aurora-stat span{
  display:block; margin-top:10px; font-size:13px; line-height:1.65;
  color:rgba(214,230,246,.72);
}

/* --------------------------------------------------------------------------
   14. 天玑看板（ECharts）布局 + 扫描特效
   -------------------------------------------------------------------------- */
.tianji-grid{display:grid; grid-template-columns:1.25fr 1fr; gap:1px; background:rgba(86,150,225,.16)}
@media(max-width:860px){.tianji-grid{grid-template-columns:minmax(0,1fr)}}
.t-panel{background:#08182B; padding:12px 14px; position:relative; overflow:hidden}
.t-panel h5{margin:0 0 4px; font-family:var(--mono); font-size:10.5px; color:#9ecbff; letter-spacing:.12em; font-weight:600}
.t-chart{width:100%; height:250px}
.t-chart.map{height:360px}   /* 地图是面板主角，给足高度 */
/* 扫描特效：一条横向光带周期扫过每个面板 */
.t-panel:first-child::after{content:""; position:absolute; left:-4px; right:-4px; top:-45%; height:34%;
  background:linear-gradient(180deg, transparent, rgba(56,189,248,.075), transparent);
  pointer-events:none; animation:tScan 4.6s linear infinite}
@keyframes tScan{0%{top:-45%}100%{top:110%}}
@media(prefers-reduced-motion:reduce){.t-panel::after{animation:none;display:none}}

/* 节点滚动列表（独立站卡片右侧） */
.node-scroll{max-height:340px; overflow:hidden; position:relative}
.node-scroll::after{content:""; position:absolute; inset:auto 0 0 0; height:44px; pointer-events:none;
  background:linear-gradient(180deg, transparent, #08182B)}
.node-track{animation:nodeRoll 240s linear infinite}   /* 240s = 比原来慢 1/3 */
.node-track:hover{animation-play-state:paused}
@keyframes nodeRoll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.node-row{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px 0; border-bottom:1px solid rgba(96,150,220,.14); font-family:var(--mono); font-size:12px}
.node-row .ct{color:#c7dcf5}
.node-row .ms{color:#34d399; font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){.node-track{animation:none}}

/* --------------------------------------------------------------------------
   15. 导航下拉（定价子页入口）
   -------------------------------------------------------------------------- */
.nav-drop{position:relative}
.nav-drop-btn{display:inline-flex; align-items:center; gap:6px;
  padding:9px 15px; border-radius:var(--r); font-size:14.5px; font-weight:500; color:var(--tx-mid); transition:.2s ease}
.nav-drop-btn i{font-style:normal; font-size:10px; transition:transform .22s}
.nav-drop:hover .nav-drop-btn i{transform:rotate(180deg)}
.nav-drop-menu{
  position:absolute; top:calc(100% + 8px); left:0; min-width:172px;
  background:rgba(244,247,250,.98); backdrop-filter:blur(14px);
  border:1px solid var(--line); border-radius:var(--r); padding:6px;
  box-shadow:0 18px 40px -22px rgba(var(--sh),.55);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .24s ease, transform .24s ease, visibility .24s;
}
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu{opacity:1; visibility:visible; transform:none}
.nav-drop-menu a{display:block; padding:9px 13px; border-radius:3px; font-size:14px;
  color:var(--tx-mid); transition:.18s}
.nav-drop-menu a:hover{background:rgba(12,36,64,.06); color:var(--ink)}
/* 当前页高亮：顶层「定价」是下拉按钮，子页高亮在下拉菜单里 */
.nav-drop-btn.on{color:var(--ink); font-weight:600}
.nav-drop-menu a.on{color:var(--ink); font-weight:600; background:rgba(12,36,64,.06)}
/* 深色头图态 */
.nav.on-dark:not(.solid) .nav-drop-menu{background:rgba(12,36,64,.98); border-color:rgba(255,255,255,.14)}
.nav.on-dark:not(.solid) .nav-drop-menu a{color:var(--dk-mid)}
.nav.on-dark:not(.solid) .nav-drop-menu a:hover{background:rgba(255,255,255,.1); color:#fff}
/* 移动端：下拉平铺 */
@media(max-width:960px){
  .nav-drop-menu{position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:0; background:transparent; padding:0 0 0 14px; min-width:0}
  .nav-drop-menu a{padding:10px 12px}
  .nav-drop:hover .nav-drop-btn i{transform:none}
}

/* 页脚前花束过渡 */
.flow-divider{height:150px; background:linear-gradient(180deg,#071726 0%,#0B2038 100%)}
.flow-divider canvas{display:block; width:100%; height:100%}

/* --------------------------------------------------------------------------
   16. 版本展示站（客户案例入口）
   三张卡片，点击整卡跳转；深色底，与深色带衔接
   -------------------------------------------------------------------------- */
.showcase{
  background:linear-gradient(180deg,#08192B 0%,#0C2440 100%);
  color:#fff; position:relative; overflow:hidden;
}
.showcase::after{content:""; position:absolute; left:-180px; bottom:-200px; width:520px; height:520px;
  border-radius:50%; background:radial-gradient(circle,rgba(217,164,65,.13),transparent 66%); pointer-events:none}
.showcase > .wrap{position:relative; z-index:1}
.showcase h2{color:#fff}
.showcase .lede{color:var(--dk-mid)}
.showcase .eyebrow{color:var(--gold)}
.sc-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:clamp(30px,3.8vw,50px)}
.sc-card{
  display:flex; flex-direction:column; position:relative; overflow:hidden;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-lg); padding:26px 24px 22px; text-decoration:none; color:inherit;
  transition:.34s cubic-bezier(.16,.84,.3,1);
}
.sc-card::before{content:""; position:absolute; left:0; top:0; height:2px; width:0;
  background:linear-gradient(90deg,var(--cyan),var(--gold)); transition:width .55s cubic-bezier(.16,.84,.3,1)}
.sc-card:hover{transform:translateY(-4px); border-color:rgba(255,255,255,.3);
  background:rgba(255,255,255,.075); box-shadow:0 30px 60px -40px rgba(0,0,0,.85); color:inherit}
.sc-card:hover::before{width:100%}
.sc-no{font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--gold)}
.sc-name{font-family:var(--serif); font-size:22px; font-weight:600; color:#fff; margin:10px 0 5px; letter-spacing:.01em}
.sc-tag{font-size:13.5px; color:var(--cyan); margin:0 0 14px; font-weight:600}
.sc-desc{font-size:13.5px; color:var(--dk-mid); line-height:1.8; margin:0; flex:1}
.sc-url{margin-top:18px; padding-top:14px; border-top:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-family:var(--mono); font-size:12px; color:var(--dk-soft); letter-spacing:.02em}
.sc-url .ar{transition:transform .28s cubic-bezier(.16,.84,.3,1); color:var(--gold)}
.sc-card:hover .sc-url .ar{transform:translateX(4px)}
.sc-note{margin-top:26px; font-size:13px; color:var(--dk-soft); line-height:1.8}

/* --------------------------------------------------------------------------
   17. 超宽屏（1600 / 1920 / 2560 / 3440px）
   原站只有 --wrap:1180px 一个上限，1920 以上会缩成一条窄柱。
   这里按档位放大版心、字号与可视化高度，让超宽屏看起来是"铺开"的，不是"居中一条"。
   -------------------------------------------------------------------------- */
@media(min-width:1600px){
  :root{ --wrap:1360px; --nav-h:76px; }
  body{font-size:16.5px}
  .win-body{font-size:12.5px}
  #geo-globe{height:380px}
  .t-chart{height:290px}
  .t-chart.map{height:420px}
  .node-scroll{max-height:400px}
  .dash-chart,.dash-bars{height:110px}
  .maohot-flow{height:clamp(260px,26vw,380px)}
  .aurora__layer--midnight{background:radial-gradient(1950px 1250px at 50% calc(100% + 30px),
    #1D4F82 0%,#163C66 12%,#12314F 26%,#0E2740 42%,#0A1D31 62%,#071726 100%)}
  .aurora__layer--dawn{background:radial-gradient(1950px 1220px at 50% 104%,
    #6FA8BF 0%,#4E8BA8 14%,#35648A 29%,#23496F 45%,#163350 64%,#0B2038 84%,#071726 100%)}
  .aurora__layer--morning{background:radial-gradient(1950px 1260px at 50% calc(100% + 50px),
    #A9D6E5 0%,#8FC4D8 16%,#6FA8BF 32%,#4A7FA0 46%,#2A5273 62%,#11293F 82%,#071726 100%)}
  .aurora__layer--noon{background:radial-gradient(1950px 1260px at 50% calc(100% + 55px),
    #D9A441 0%,#C99B54 15%,#A9846A 30%,#7E7391 44%,#4A6E96 58%,#2A4A70 74%,#102741 90%,#071726 100%)}
  .aurora__layer--dusk{background:radial-gradient(1950px 1230px at 50% 102%,
    #E8B854 0%,#D9A441 14%,#C08552 28%,#A06A62 42%,#7A5A80 56%,#4E5187 72%,#26355F 86%,#0A1A31 100%)}
  .aurora__layer--evening{background:radial-gradient(1950px 1250px at 50% calc(100% + 40px),
    #B23B2E 0%,#9A3A45 14%,#7C3660 28%,#5C3168 42%,#3E2A5E 58%,#28204A 74%,#131A38 88%,#071726 100%)}
}
@media(min-width:1920px){
  :root{ --wrap:1560px; --nav-h:78px; }
  body{font-size:17px; line-height:1.85}
  section{padding-block:clamp(76px,6.4vw,124px)}
  .hero{padding-bottom:clamp(76px,6vw,120px)}
  .phead{padding-bottom:clamp(60px,5.4vw,104px)}
  h1{font-size:clamp(38px,3.4vw,62px)}
  h2{font-size:clamp(26px,1.9vw,40px)}
  .card{padding:32px 30px 30px}
  .grid-2,.grid-3,.grid-4{gap:22px}
  #geo-globe{height:430px}
  .t-chart{height:320px}
  .t-chart.map{height:500px}
  .node-scroll{max-height:460px}
  .dash-chart,.dash-bars{height:126px}
  .kpi b{font-size:clamp(24px,1.7vw,30px)}
  .cta{padding:clamp(52px,4vw,84px)}
}
@media(min-width:2560px){
  :root{ --wrap:1880px; --nav-h:84px; --gut:40px }
  body{font-size:18px; line-height:1.9}
  .lede{font-size:clamp(17px,1.05vw,20px)}
  #geo-globe{height:560px}
  .t-chart{height:400px}
  .t-chart.map{height:620px}
  .node-scroll{max-height:560px}
  .dash-chart,.dash-bars{height:150px}
  .maohot-flow{height:clamp(340px,22vw,520px)}
  .foot-grid{gap:40px}
}
@media(min-width:3440px){
  :root{ --wrap:2280px; }
  body{font-size:19px}
  #geo-globe{height:660px}
  .t-chart.map{height:720px}
}
/* 4K / 5K / 8K
   分辨率越高，版心不能一直线性放大（一行字太长反而不好读），
   所以到 4K 之后主要加的是**留白与可视化尺寸**，版心增长放缓。 */
@media(min-width:3840px){      /* 4K UHD */
  :root{ --wrap:2480px; --gut:56px; }
  body{font-size:19.5px}
  section{padding-block:clamp(96px,4.4vw,168px)}
  #geo-globe{height:760px}
  .t-chart.map{height:840px}
  .node-scroll{max-height:640px}
}
@media(min-width:5120px){      /* 5K */
  :root{ --wrap:2980px; --gut:72px; }
  body{font-size:21px}
  #geo-globe{height:900px}
  .t-chart.map{height:1000px}
}
@media(min-width:7680px){      /* 8K */
  :root{ --wrap:3760px; --gut:96px; }
  body{font-size:24px; line-height:1.85}
  h1{font-size:clamp(48px,2.6vw,84px)}
  h2{font-size:clamp(32px,1.6vw,52px)}
  #geo-globe{height:1200px}
  .t-chart.map{height:1320px}
  .t-chart{height:1100px}
}

/* --------------------------------------------------------------------------
   19. 屏幕形态：横屏 / 竖屏 / 方屏
   分辨率管的是"多宽"，形态管的是"什么比例"。同样 1024px，
   竖屏平板和横屏手机是完全不同的排版问题。
   -------------------------------------------------------------------------- */
/* 方屏与接近方形的窗口（1:1 到 1.3:1）：竖向空间多、横向少，
   深色头图不能被拉得过高，栅格整体收一档 */
@media(max-aspect-ratio:13/10) and (min-width:700px){
  .hero,.phead{padding-top:calc(var(--nav-h) + 48px); padding-bottom:clamp(48px,6vw,80px)}
  .maohot-flow{height:clamp(200px,24vw,300px)}
  #geo-globe{height:min(360px,38vh)}
  .t-chart.map{height:min(380px,42vh)}
}
/* 窄而高的窗口（平板竖屏）：栅格提前塌成一列，避免挤成细条 */
@media(max-aspect-ratio:3/4) and (min-width:700px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .globe-grid,.dash-grid,.tianji-grid{grid-template-columns:minmax(0,1fr)}
  .foot-grid{grid-template-columns:repeat(2,1fr)}
}
/* 很宽但很矮的窗口（超宽屏 + 小高度、或手机横屏）：
   深色头图与可视化改成按视口高度算，别让内容跑到屏幕外 */
@media(min-aspect-ratio:21/9){
  .hero,.phead{padding-top:calc(var(--nav-h) + clamp(36px,6vh,72px)); padding-bottom:clamp(36px,5vh,64px)}
  #geo-globe{height:min(560px,56vh)}
  .t-chart.map{height:min(620px,62vh)}
  .maohot-flow{height:min(360px,40vh)}
}
/* 超宽屏下文字别拉成一行 —— 限制可读行长 */
@media(min-width:1920px){
  .lede{max-width:76ch}
  .phead h1{max-width:24ch}
  .card p,.card ul li,.tl-d,.m-bio{max-width:64ch}
}

/* --------------------------------------------------------------------------
   18. 手机端
   原有断点已覆盖栅格塌缩；这里补三件原站没做的事：
   刘海安全区、触控目标尺寸、超小屏与横屏的表现
   -------------------------------------------------------------------------- */
/* 刘海屏安全区（各页 <meta viewport> 已带 viewport-fit=cover）
   注意：这里必须用 --gut 变量而不是写死 24px，否则会盖掉超宽屏档位里加宽的内边距 */
.nav-in,.wrap{padding-left:max(var(--gut), env(safe-area-inset-left));
              padding-right:max(var(--gut), env(safe-area-inset-right))}
.footer{padding-bottom:max(30px, env(safe-area-inset-bottom))}   /* 法务行已去掉，footer 自身兜底 */
@media(max-width:960px){
  .nav-menu{padding-left:max(20px, env(safe-area-inset-left));
            padding-right:max(20px, env(safe-area-inset-right));
            padding-bottom:max(22px, env(safe-area-inset-bottom))}
}
/* 触控目标：可点元素至少 44px 高 */
@media(pointer:coarse){
  .nav-menu > a,.nav-drop-menu a{padding-block:13px}
  .nav-toggle{padding:14px; min-width:44px; min-height:44px}
  .btn{min-height:44px}
  .btn-sm{min-height:38px}
  .car-nav button{width:12px; height:12px; padding:0}
  .car-arw{width:44px; height:44px}
  .foot-grid a{display:inline-block; padding-block:3px}
}
/* 表格类：移动端改为横向滚动，而不是把列挤到读不出来 */
@media(max-width:720px){
  .tbl-scroll,.spec-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .tbl,.spec{min-width:560px}
  .gl-item dd{font-size:13px}
}
/* 超小屏（iPhone SE / 安卓小屏） */
@media(max-width:400px){
  :root{ --gut:16px }
  section{padding-block:clamp(44px,9vw,64px)}
  .hero,.phead{padding-top:calc(var(--nav-h) + 44px)}
  h1{font-size:clamp(27px,8.4vw,34px)}
  h2{font-size:clamp(21px,6.4vw,27px)}
  .lede{font-size:15px}
  .card{padding:22px 18px 20px}
  .tier{padding:24px 18px 20px}
  .price .amt{font-size:31px}
  .foot-grid{gap:22px}
  .stats{gap:10px 24px}
  .token-big{font-size:clamp(30px,11vw,48px)}
  .free-stamp{padding:12px 24px; font-size:clamp(15px,5vw,20px); letter-spacing:.14em}
  .win-body{font-size:11px}
  .term-body{font-size:11.5px}
  .dash-hd{padding:10px 12px; gap:8px}
  .dash-hd h4{font-size:12.5px}
  .kpi{padding:12px 13px}
  .t-panel{padding:10px 11px}
}
/* 横屏矮屏（手机横过来）：别让深色头图吃掉整个视口 */
@media(max-height:520px) and (orientation:landscape){
  .hero,.phead{padding-top:calc(var(--nav-h) + 28px); padding-bottom:36px}
  .hero-note,.crumb{display:none}
}
/* 手机端关掉重投影/大模糊，省电也防卡 */
@media(max-width:680px){
  .nav.solid{backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(244,247,250,.97)}
  .nav-drop-menu{backdrop-filter:none; -webkit-backdrop-filter:none}
  .terminal{backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(255,255,255,.07)}
}