/* ─────────────────────────────────────────────────────────────
   LanZ · 招商 Agent 产品页(/products/invest/)专属样式

   来源:外部设计交付(Lanzdata招商产品页面重设计.zip)。
   与产业链溯源页共用同一套色板与字体,但**动效语汇刻意不重合**:
   那边是横向漂移 + 滚动驱动的变形图谱,这边是垂直流、旋转扫描和
   自动推演。两页放在一起看不会觉得是同一个模板套出来的。
   只被这一个页面引用 —— 其余页面都不加载。

   集成时做了五处改造, 都是本站硬约束逼出来的, 别改回去:

   1. **所有选择器收进 .investx 作用域。** 设计稿用的是 .hero / .wrap /
      .btn / .head / .num 这些通用类名, 而 style.css 全站加载、同名类
      全都有。不隔离的话两边互相覆盖, 顶栏会散架, 页面也拿不到设计稿
      的样子。(:root 留在全局 —— 本文件只在这一页加载, 漏不出去。)

   2. **动画名加了 iv- 前缀。** 设计稿的 @keyframes breathe / sweep /
      rise 与 style.css 里的同名, 后加载的那份会整体覆盖前一份。
      ⚠ 溯源页用的是 cx- 前缀, 两页各一套, 不要合并 —— 合并就等于
      两页共用一份动效, 改一边会静默动到另一边。

   3. **字体换成站里的系统字体栈。** 原稿引 Google Fonts, 本站 CSP 是
      default-src 'none' 起步, 外链字体会被浏览器直接拦掉, 而且不报错
      —— 只会静默回退。SVG 里的 font-family 属性也一并删掉了, 靠继承
      拿 --font-body, 带 class="mono" 的组继承 --font-mono。
      ⚠ 代价:原稿的 font-weight:900 在系统中文字体里没有对应字重,
      会回退到 700, 标题比设计稿略轻。

   4. **设计稿自带的胶囊顶栏与页脚样式整段删掉。** 那两块用站里统一的
      (build.sh 逐页比对, 不一致直接失败)。

   5. **[data-rise] 的隐藏态挂在 html.iv-rise 上。** 原稿直接写
      [data-rise]{opacity:0}, JS 一挂整段内容就永远不显示。本站的规矩
      是「内容默认可见, JS 只负责隐藏」—— 见 style.css 的 .reveal。

   设计系统说明见交付附带的 README;色值是设计稿给的 hex,
   ⚠ 没有转成 OKLCH —— 与 tokens.css 的口径不一致, 是笔已知的账。
   ───────────────────────────────────────────────────────────── */
:root{
  --ink:#12112B;  /* 主文字 */
  --ink-2:#3A3752;  /* 正文 */
  --ink-3:#6B6884;  /* 弱文字 / 等宽标签 */
  --bg:#EEF0F7;  /* 浅底 */
  --dark:#0B0A1E;  /* 深底 */
  --dark-2:#08071A;
  --panel:#131130;
  --purple:#7B4DEB;  /* 品牌紫 */
  --purple-d:#6D3FE0;  /* 浅底上的紫（文字可用） */
  --purple-l:#8B62F0;
  --purple-lt:#A98CFF;  /* 深底上的紫（文字可用） */
  --purple-pale:#B79EFF;
  --on-dark:#EDEBF7;
  --on-dark-2:#B4B1C9;
  --on-dark-3:#9E9BB8;
  --on-dark-4:#8A87A6;
  --warn:#E8734A;
  --warn-d:#B85423;  /* 浅底上的橙字（满足对比度） */
  --grid:rgba(160,150,255,.055);
  /* 只用于 h1 里「Agent」的渐变收尾, 本页没有别的用途 ——
     在供需页它是有语义的(青 = 供给侧), 这里纯装饰。 */
  --cyan:#3FD2E8;
  --maxw:1280px;
  --pad:40px;
}
body{ background:var(--bg); color:var(--ink) }
.investx, .investx *{ box-sizing:border-box }
.investx a{ color:var(--purple-d); text-decoration:none }
.investx a:hover{ color:var(--purple-l) }
.investx .mono{ font-family:var(--font-mono) }
.investx .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad) }
.investx .grid-tex{
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:64px 64px;
}

/* ---------- 动效基座 ---------- */
@keyframes iv-roll{ to{ transform:translateY(-50%) } }
@keyframes iv-spin{ to{ transform:rotate(360deg) } }
@keyframes iv-breathe{ 0%,100%{ opacity:.4 } 50%{ opacity:1 } }
@keyframes iv-sweep{ 0%{ transform:translateX(-110%) } 100%{ transform:translateX(320%) } }
@keyframes iv-ping{ 0%{ transform:scale(.4); opacity:.55 } 100%{ transform:scale(1.6); opacity:0 } }
@keyframes iv-rise{ from{ opacity:0; transform:translateY(24px) } to{ opacity:1; transform:none } }
/* 隐藏态挂在 html.iv-rise 上:只有 JS 确认 IntersectionObserver 可用
   才加这个类。JS 挂了 = 内容照常显示, 不会白屏。 */
html.iv-rise .investx [data-rise]{ opacity:0 }
.investx [data-rise="in"]{ animation:iv-rise .9s cubic-bezier(.16,.84,.34,1) both }
.investx .dot{
  width:6px;
  height:6px;
  border-radius:999px;
  background:var(--purple-l);
  animation:iv-breathe 2.4s ease-in-out infinite;
}

/* ---------- 按钮 ---------- */
.investx .btn{
  display:inline-block;
  white-space:nowrap;
  padding:19px 46px;
  border-radius:999px;
  background:var(--purple);
  color:#fff;
  font-size:17px;
  font-weight:700;
  box-shadow:0 14px 44px rgba(123,77,235,.5);
}
.investx .btn:hover{ background:var(--purple-l); color:#fff }

/* ---------- 通用排版 ---------- */
.investx .sect-h2{
  margin:26px 0 0;
  font-size:clamp(34px,3.6vw,46px);
  line-height:1.18;
  font-weight:900;
  letter-spacing:-.025em;
}
.investx .sect-p{
  margin:24px 0 0;
  font-size:17.5px;
  line-height:1.9;
  color:var(--ink-2);
  max-width:27em;
}
.investx .stats{ display:flex; flex-wrap:wrap; gap:16px 52px }
.investx .stats .k{ display:block; font-size:12.5px; color:var(--ink-3) }
.investx .stats .v{
  display:block;
  font-size:34px;
  font-weight:900;
  letter-spacing:-.03em;
  margin-top:3px;
  color:var(--ink);
}
.investx .stats .v.hi{ color:var(--purple-d) }

/* ---------- 首屏：持续上滚的线索流 ---------- */
/* ⚠ 原稿是 margin-top:-88px —— 那是为了钻到它自带的 sticky 胶囊导航
   下面。本站顶栏是 position:fixed, 不占文档流, 首屏本来就从页面顶端
   开始, 再拉 -88px 会把大标题整个顶出屏幕。改成 0, 上边距交给 padding。
   min-height 不是 height —— 窄屏上内容会比 100vh 高, 写死 height 会
   让它溢出到下一屏并被 overflow:hidden 切掉。 */
.investx .iv-hero{
  position:relative;
  padding:186px 0 130px;
  min-height:100vh;
  display:flex;
  align-items:center;
  background:var(--dark);
  color:var(--on-dark);
  overflow:hidden;
}
.investx .iv-hero > .wrap{ width:100% }
.investx .iv-hero .glow{
  position:absolute;
  top:-170px;
  left:4%;
  width:840px;
  height:640px;
  filter:blur(10px);
  background:radial-gradient(ellipse at center,rgba(123,77,235,.36),rgba(11,10,30,0) 68%);
}
.investx .iv-hero .glow2{
  position:absolute;
  top:160px;
  right:-150px;
  width:660px;
  height:660px;
  background:radial-gradient(circle at center,rgba(64,196,255,.11),rgba(11,10,30,0) 70%);
}
.investx .hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:66px;
  align-items:center;
}
.investx .iv-hero h1{
  margin:0;
  font-size:clamp(40px,4.2vw,62px);
  line-height:1.14;
  font-weight:900;
  letter-spacing:-.02em;
  color:#fff;
}
/* 「Agent」那一段的渐变字。⚠ 与另外四个 Agent 页逐字相同, 改一处要五处
   一起改 —— 五页的标题摆在一起看, 渐变角度或色标差一点就很显眼。
   ⚠ color:transparent 收在 @supports 里:万一 background-clip:text 不生效,
   落回实色标题, 而不是一个看不见的大标题。 */
.investx .iv-hero h1 em{ font-style:normal }
@supports (-webkit-background-clip:text) or (background-clip:text){
  .investx .iv-hero h1 em{
    background:linear-gradient(96deg,#fff 18%,var(--purple-lt) 62%,var(--cyan) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
}
.investx .iv-hero p{
  margin:30px 0 0;
  font-size:18.5px;
  line-height:1.85;
  color:var(--on-dark-2);
  max-width:26em;
}
.investx .iv-hero .btn{ margin-top:44px }

.investx .feed{ position:relative }
.investx .feed-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(180,170,255,.18);
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.1em;
  color:var(--on-dark-4);
}
/* 上下淡出, 让流看着是从画外滚进来的, 而不是被容器切断的 */
.investx .feed-view{
  position:relative;
  height:392px;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 82%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 12%,#000 82%,transparent);
}
/* ⚠ 无缝循环靠「内容重复两遍 + 位移 -50%」。条目由 invest.js 用
   FEED.concat(FEED) 渲染 —— 只渲染一遍会在循环点看到明显回跳。 */
.investx .feed-col{ display:flex; flex-direction:column; animation:iv-roll 26s linear infinite }
.investx .feed-row{
  display:grid;
  grid-template-columns:72px minmax(0,1fr) auto;
  gap:16px;
  align-items:center;
  padding:17px 4px;
  border-bottom:1px solid rgba(180,170,255,.09);
}
.investx .feed-row .t{ font-family:var(--font-mono); font-size:12px; color:var(--on-dark-4) }
.investx .feed-row .n{ min-width:0 }
.investx .feed-row .n b{
  display:block;
  font-size:15.5px;
  font-weight:700;
  color:#fff;
  letter-spacing:-.01em;
}
.investx .feed-row .n s{
  display:block;
  text-decoration:none;
  font-size:12.5px;
  color:var(--on-dark-3);
  margin-top:4px;
}
.investx .feed-row .w{
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--purple-pale);
  padding:5px 11px;
  border-radius:999px;
  background:rgba(123,77,235,.18);
}
.investx .feed-row.top .w{ background:var(--purple); color:#fff }
.investx .score{
  position:absolute;
  left:-46px;
  bottom:-56px;
  z-index:2;
  display:flex;
  align-items:center;
  gap:13px;
  background:#fff;
  border-radius:12px;
  padding:13px 17px;
  box-shadow:0 22px 52px rgba(4,3,14,.5);
}
.investx .score .lbl{ font-size:11.5px; color:var(--ink-3); font-weight:500 }
.investx .score .num{
  font-size:27px;
  font-weight:900;
  letter-spacing:-.03em;
  color:var(--ink);
  margin-top:2px;
}

/* ---------- 收窄：径向内收 ---------- */
.investx .cohort{ position:relative; background:var(--bg); padding:108px 0 112px }
.investx .cohort .wrap{
  display:grid;
  grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  gap:64px;
  align-items:center;
}
.investx .ring-lbl{ display:flex; flex-direction:column; gap:18px; margin-top:38px }
.investx .ring-lbl > div{ display:flex; align-items:center; gap:13px; font-size:14.5px; color:var(--ink-2) }
.investx .ring-lbl .sw{ width:12px; height:12px; border-radius:999px; flex:none }
.investx .ring-lbl .num{ margin-left:auto; font-family:var(--font-mono); font-size:14px; color:var(--ink) }

/* ---------- 雷达：资讯信号 ---------- */
.investx .radar{
  position:relative;
  background:var(--dark);
  color:var(--on-dark);
  padding:112px 0 116px;
  overflow:hidden;
}
.investx .radar .halo{
  position:absolute;
  top:50%;
  right:-6%;
  width:860px;
  height:860px;
  transform:translateY(-50%);
  background:radial-gradient(circle at center,rgba(123,77,235,.26),rgba(11,10,30,0) 66%);
  animation:iv-breathe 7s ease-in-out infinite;
}
.investx .radar .wrap{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:66px;
  align-items:center;
}
.investx .radar h2{
  margin:26px 0 0;
  font-size:clamp(34px,3.6vw,46px);
  line-height:1.18;
  font-weight:900;
  letter-spacing:-.025em;
  color:#fff;
}
.investx .radar p{
  margin:24px 0 0;
  font-size:17.5px;
  line-height:1.9;
  color:var(--on-dark-2);
  max-width:26em;
}
.investx .rstats{
  display:flex;
  flex-wrap:wrap;
  gap:16px 46px;
  margin-top:40px;
  padding-top:26px;
  border-top:1px solid rgba(180,170,255,.18);
}
.investx .rstats .k{ display:block; font-size:12.5px; color:var(--on-dark-3) }
.investx .rstats .v{
  display:block;
  font-size:28px;
  font-weight:900;
  letter-spacing:-.03em;
  margin-top:3px;
  color:#fff;
}
.investx .rstats .v.hi{ color:var(--purple-lt) }
/* ⚠ transform-origin 必须与 SVG 里的圆心 (170,170) 一致, 差一点扫描臂
   就会绕着偏心点转。改 viewBox 要同步改这里。
   ⚠ 扫描周期 7s 与五个信号点 <animate> 的 dur 是同一个值 ——
   改一处不改另一处, 点的亮灭会与扫描臂脱节。 */
.investx .sweep-arm{ transform-origin:170px 170px; animation:iv-spin 7s linear infinite }

/* ---------- 自动推演 ---------- */
.investx .play{ position:relative; background:#fff; padding:110px 0 114px }
.investx .play .wrap{
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:64px;
  align-items:center;
}
.investx .gauge{ display:flex; align-items:baseline; gap:10px }
.investx .gauge .n{
  font-size:clamp(52px,6vw,76px);
  font-weight:900;
  letter-spacing:-.04em;
  line-height:1;
  background:linear-gradient(120deg,var(--ink) 10%,var(--purple-d) 90%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.investx .gauge .d{ font-family:var(--font-mono); font-size:14px; color:var(--ink-3) }
.investx .gauge .st{
  margin-left:auto;
  font-size:13.5px;
  font-weight:700;
  padding:7px 15px;
  border-radius:999px;
  background:var(--bg);
  color:var(--ink-2);
  transition:background .4s,color .4s;
}
.investx .gauge .st.hot{ background:var(--purple); color:#fff }
.investx .track{
  position:relative;
  height:10px;
  border-radius:5px;
  background:var(--bg);
  overflow:hidden;
  margin-top:22px;
}
.investx .track i{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  border-radius:5px;
  width:0;
  background:linear-gradient(90deg,var(--purple-lt),var(--purple));
  transition:width .9s cubic-bezier(.16,.84,.34,1);
}
.investx .marks{
  display:flex;
  justify-content:space-between;
  margin-top:11px;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--ink-3);
}
.investx .sigs{ margin-top:34px; border-top:1px solid rgba(18,17,43,.12) }
.investx .sig{
  display:grid;
  grid-template-columns:78px minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
  padding:15px 0;
  border-bottom:1px solid rgba(18,17,43,.08);
  opacity:.34;
  transition:opacity .5s,transform .5s;
  transform:translateX(-6px);
}
.investx .sig.on{ opacity:1; transform:none }
.investx .sig .t{ font-family:var(--font-mono); font-size:12px; color:var(--ink-3) }
.investx .sig .k{ font-size:16px; font-weight:700; color:var(--ink) }
.investx .sig .w{
  font-family:var(--font-mono);
  font-size:13px;
  padding:5px 12px;
  border-radius:999px;
  background:var(--bg);
  color:var(--ink-3);
  transition:background .5s,color .5s;
}
.investx .sig.on .w{ background:rgba(123,77,235,.14); color:var(--purple-d) }
/* min-height 占住三行:六条依据长短不一, 不占位会让整块上下跳 */
.investx .sig-note{
  margin:24px 0 0;
  font-size:13px;
  letter-spacing:.03em;
  line-height:1.85;
  color:var(--purple-d);
  min-height:3.7em;
}

/* ---------- 漏斗 ---------- */
.investx .funnel{ position:relative; background:var(--bg); padding:106px 0 112px; overflow:hidden }
/* ⚠ 原稿这块叫 .head。.head 在 style.css 里是首页六个 section 的双栏
   标题块(display:grid + ::before 一条紫线), 作用域再怎么收也挡不住
   —— 同名类会连 display 一起带过来, 标题被拆成左右两栏, 上面还多
   一条线。所以改名 iv-head。 */
.investx .funnel .iv-head{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad) }
.investx .fn-grid{
  max-width:var(--maxw);
  margin:52px auto 0;
  padding:0 var(--pad);
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:60px;
  align-items:center;
}
.investx .tiers{ display:flex; flex-direction:column; gap:2px }
.investx .tier{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:20px;
  align-items:center;
  padding:22px 0;
  border-bottom:1px solid rgba(18,17,43,.1);
}
.investx .tier .rg{ font-family:var(--font-mono); font-size:12px; color:var(--ink-3); width:62px }
.investx .tier .nm{ font-size:17px; font-weight:700; color:var(--ink) }
.investx .tier .ct{ font-family:var(--font-mono); font-size:15px; color:var(--ink-3) }
.investx .tier.hot .rg{ color:var(--purple-d) }
.investx .tier.hot .ct{ color:var(--purple-d); font-size:19px }
.investx .tbar{
  position:relative;
  height:6px;
  border-radius:3px;
  background:rgba(18,17,43,.09);
  overflow:hidden;
  margin-top:9px;
}
.investx .tbar i{ position:absolute; top:0; bottom:0; left:0; border-radius:3px; background:var(--purple-d) }
.investx .tbar u{
  position:absolute;
  top:0;
  bottom:0;
  width:34%;
  text-decoration:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.75),rgba(255,255,255,0));
  animation:iv-sweep 2.8s linear infinite;
}

/* ---------- CTA ---------- */
.investx .cta-s{
  position:relative;
  background:var(--dark);
  color:var(--on-dark);
  padding:116px 0 122px;
  overflow:hidden;
  text-align:center;
}
.investx .pings{
  position:absolute;
  left:50%;
  top:50%;
  width:520px;
  height:520px;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.investx .pings i{
  position:absolute;
  inset:0;
  border-radius:999px;
  border:1px solid rgba(169,140,255,.5);
  animation:iv-ping 5s ease-out infinite;
}
.investx .cta-s h2{
  margin:0;
  font-size:clamp(38px,4.4vw,54px);
  line-height:1.16;
  font-weight:900;
  letter-spacing:-.025em;
  color:#fff;
}
.investx .cta-s p{
  margin:26px auto 0;
  font-size:18px;
  line-height:1.9;
  color:var(--on-dark-2);
  max-width:28em;
}

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  .investx .hero-grid,
  .investx .cohort .wrap,
  .investx .radar .wrap,
  .investx .play .wrap,
  .investx .fn-grid{ grid-template-columns:minmax(0,1fr); gap:44px }
  .investx .iv-hero{ padding:150px 0 96px }
  .investx .score{ position:static; margin-top:20px }
  .investx .feed-view{ height:320px }
  .investx .pings{ width:360px; height:360px }
}
@media (prefers-reduced-motion:reduce){
  .investx .feed-col,
  .investx .sweep-arm,
  .investx .dot,
  .investx .pings i,
  .investx .tbar u,
  .investx .radar .halo{ animation:none }
  .investx [data-rise="in"]{ animation:none }
  html.iv-rise .investx [data-rise]{ opacity:1 }
}