/* ============================================================
   觅智 Puzziq 首页样式（P0-4-T17 · 从 pages/index.html 内联 <style> 外联）
   - 主题变量、顶栏、用户菜单、CTA、Toast
   - 大页脚（占位）
   - 觅智生态 · 滚动交互模块
   - 生态合作伙伴（首页无限滚动卡片）
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
/* body 用 min-height（而非 height:100%）：让 body 高度随内容增长，
   否则 sticky 顶栏的约束范围被限制在首屏 100vh，滚动超出后失效 */
html { height: 100%; }
body { min-height: 100%; }
body {
  background:
    /* Hero 主光晕：挂在 body 上从视口顶端连续晕开（原挂在 main 上，
       会在顶栏占位区间与底色断层，形成可见的水平缝隙）*/
    radial-gradient(ellipse 70% 240px at 50% 0%, rgba(74, 92, 224, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 50% 170px at 100% 140px, rgba(138, 148, 236, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 190px at 0% 230px, rgba(167, 139, 250, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 0%,  rgba(74,92,224,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 100% 100%, rgba(138,148,236,0.06) 0%, transparent 60%),
    var(--bg-page);
  /* 五层光晕均为固定尺寸渐变：默认 repeat 会沿长页面纵向平铺，
     在社区区两侧空白处产生周期性淡靛横带，故只允许绘制一次 */
  background-repeat: no-repeat;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  display: block;
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }

/* ---------- 主题变量（白底 + 靛紫品牌副色）---------- */
:root {
  /* 品牌色系：靛紫 Indigo-Violet（摆脱框架默认蓝，与紫色氛围光晕同族） */
  --bg-page:    #fafbfc;
  --bg-card:    #ffffff;
  --bg-soft:    #eff1fb;
  --bg-muted:   #f3f4f6;
  --bg-elev:    #ffffff;
  --text-primary:   #0f172a;
  --text-secondary: #475569;
  --text-muted:     #64748b;
  --text-hint:      #94a3b8;
  --text-on-accent: #ffffff;
  --border:        #dfe3f8;
  --border-soft:   #e5e7eb;
  --border-input:  #cbd5e1;
  --accent:        #4a5ce0;
  --accent-hover:  #3a4bc7;
  --accent-soft:   #8a94ec;
  --accent-fade:   rgba(74, 92, 224, 0.10);
  --success: #10b981;
  --danger:  #dc2626;

  /* ---------- 字体方案 ---------- */
  /* 中文界面系统栈：按平台择优（苹方/鸿蒙/小米/微软雅黑），西文走
     SF/Segoe；不引外链字体——CSP 友好、零网络成本、无 FOIT */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
               "PingFang SC", "HarmonyOS Sans SC", "MiSans",
               "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", sans-serif;

  /* ---------- 字阶（Type Scale）---------- */
  --fs-hero:     calc(72px * 1.1); /* Hero 主标题 */
  --fs-title-lg: 28px;  /* 区块大标题（eco 详情 / sec-head）*/
  --fs-title:    16px;  /* 页脚列标题 */
  --fs-body:     15px;  /* 正文（Hero 副文 / 空态标题）*/
  --fs-body-sm:  14px;  /* 次级正文（链接 / 描述 / 卡片标题）*/
  --fs-caption:  12px;  /* 辅助说明 / Toast / 标签 */
  --fs-micro:    11px;  /* 页脚微字 */
  --fs-eyebrow:  10px;  /* 眉题（全站统一）*/

  /* ---------- 字距（Tracking）---------- */
  --tracking-eyebrow: 0.4em;   /* 眉题 / 大写标签 */
  --tracking-title:   0.02em;  /* 标题 */
  --tracking-cta:     0.16em;  /* CTA 按钮 */
  --tracking-wide:    0.18em;  /* Toast / 页脚大写行 */
  --tracking-tag:     0.1em;   /* 卡片小标签 */
}

/* ---------- 中心 ---------- */
/* Hero 光晕已上移至 body 背景：从视口顶部连续晕开，玻璃顶栏背后有色彩可透 */
main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 顶栏 55px，再留 ~85px 缓冲；flex 居中后可视间距约一半，故取值偏大 */
  padding: 140px 24px 0;
  position: relative;
}
.center {
  max-width: 720px;
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 1;
}
.eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 40px;
}
.eyebrow .dot,
.sec-eyebrow .dot {
  display: inline-block;
  width: 4px; height: 4px;
  background: var(--text-muted);
  border-radius: 50%;
  vertical-align: middle;
  margin: 0 14px 2px;
}
h1 {
  font-size: var(--fs-hero);
  font-weight: 200;
  letter-spacing: var(--tracking-title);
  line-height: 1;
  background: linear-gradient(135deg, #0f172a 0%, #4a5ce0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 28px;
}
h1 .en {
  display: block;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--text-muted);
  text-transform: uppercase;
  margin-top: 18px;
  -webkit-text-fill-color: var(--text-muted);
}
.sub {
  font-size: var(--fs-body);
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 64px;
  font-weight: 300;
}

/* ---------- CTA ---------- */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 20px 40px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-size: var(--fs-body-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-cta);
  color: var(--text-on-accent);
  background: var(--accent);
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  cursor: pointer;
  text-transform: uppercase;
  box-shadow: 0 6px 20px rgba(74, 92, 224, 0.25);
}
.cta:hover, .cta:focus-visible {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--text-on-accent);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(74, 92, 224, 0.35);
}
.cta .arrow {
  font-size: 16px;
  line-height: 1;
  transition: transform 0.18s ease;
}
.cta:hover .arrow { transform: translateX(4px); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 32px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--accent); color: var(--text-on-accent);
  padding: 12px 24px;
  font-size: var(--fs-caption); font-weight: 500;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  border-radius: 999px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(74, 92, 224, 0.35);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 底栏 ---------- */
.footer {
  padding: 24px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-micro);
  color: var(--text-hint);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-top: 1px solid var(--border-soft);
}

/* ---------- 大页脚 ---------- */
.site-footer {
  background: var(--bg-card);
  border-top: 1px solid var(--border-soft);
  padding: 56px 40px 64px;
}
.sf-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px 32px;
}
.sf-title {
  font-size: var(--fs-title);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 20px;
  letter-spacing: var(--tracking-title);
}
.sf-link {
  display: block;
  width: fit-content;
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  padding: 6px 0;
  cursor: pointer;
  transition: color 0.18s ease;
  border-radius: 6px;
}
.sf-link:hover { color: var(--accent); }
.sf-desc {
  font-size: var(--fs-body-sm);
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 26em;
}
.sf-coming {
  max-width: 1200px;
  margin: 40px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--border-soft);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-tag);
  color: var(--text-hint);
}

@media (max-width: 1024px) {
  .sf-inner { grid-template-columns: repeat(3, 1fr); }
  .sf-col-brand { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .site-footer { padding: 40px 24px 48px; }
  .sf-inner { grid-template-columns: repeat(2, 1fr); }
  .sf-coming { margin-top: 32px; }
}
@media (max-width: 480px) {
  .sf-inner { grid-template-columns: 1fr; }
}

/* ================================================================
   觅智生态 · 滚动交互模块
   ================================================================ */
:root {
  /* 底部 140px 淡出回页面底色：避免渐变终止于浅蓝时与透明背景的社区区
     形成全屏宽硬接缝（一道 1px 横杠） */
  --eco-section-bg: linear-gradient(180deg, #fafbfc 0%, #eff1fb calc(100% - 140px), #fafbfc 100%);
  --eco-left-width: 420px;
  --eco-col-gap: 20px;
  --eco-card-gap: 16px;
  --eco-scroll-speed: 30;
  --eco-fade-dur: 0.3s;
  --eco-section-pt: 88px;
  --eco-section-pb: 96px;
}

.eco-section {
  background: var(--eco-section-bg);
  padding: var(--eco-section-pt) 40px var(--eco-section-pb);
}
.eco-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  gap: 48px;
}

.eco-left {
  flex: 0 0 var(--eco-left-width);
  max-width: var(--eco-left-width);
  position: sticky;
  top: 40px;
  align-self: flex-start;
}
.eco-detail {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 40px 36px;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 18px;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.eco-detail.has-hover {
  border-color: var(--accent);
  box-shadow: 0 16px 40px rgba(74, 92, 224, 0.12);
}
.eco-detail-eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 24px;
  font-weight: 500;
}
.eco-detail-icon {
  width: 64px; height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--accent);
  background: var(--accent-fade);
  border-radius: 16px;
  margin-bottom: 24px;
  transition: background 0.25s ease, transform 0.25s ease, color 0.25s ease;
}
.eco-detail.has-hover .eco-detail-icon {
  background: var(--accent);
  color: #fff;
  transform: scale(1.05);
}
.eco-detail-title {
  font-size: var(--fs-title-lg);
  font-weight: 600;
  letter-spacing: var(--tracking-title);
  line-height: 1.3;
  color: var(--text-primary);
  margin-bottom: 20px;
  min-height: 72px;
}
.eco-detail-desc {
  font-size: var(--fs-body-sm);
  line-height: 1.9;
  color: var(--text-secondary);
  font-weight: 300;
  min-height: 160px;
}
.eco-fade {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--eco-fade-dur) ease, transform var(--eco-fade-dur) ease;
}
.eco-fade.eco-in {
  opacity: 1;
  transform: translateY(0);
}

.eco-right {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  gap: var(--eco-col-gap);
  height: 560px;
}
.eco-col {
  position: relative;
  overflow: hidden;
  height: 100%;
  border-radius: 18px;
  min-height: 0;
}
.eco-col::before,
.eco-col::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 40px;
  z-index: 2;
  pointer-events: none;
}
.eco-col::before {
  top: 0;
  background: linear-gradient(180deg, rgba(239,241,251,0.95) 0%, transparent 100%);
}
.eco-col::after {
  bottom: 0;
  background: linear-gradient(0deg, rgba(239,241,251,0.95) 0%, transparent 100%);
}
.eco-col-track {
  display: flex;
  flex-direction: column;
  gap: var(--eco-card-gap);
  will-change: transform;
  padding: 8px 2px;
}
.eco-col-1 .eco-card { min-height: 112px; }
.eco-col-2 .eco-card { min-height: 128px; }
.eco-col-3 .eco-card { min-height: 104px; }

.eco-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 18px 18px 16px;
  border-radius: 16px;
  cursor: pointer;
  transition: background 0.22s ease,
              border-color 0.22s ease,
              box-shadow 0.22s ease,
              transform 0.22s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
}
.eco-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 0;
  background: var(--accent);
  transition: height 0.25s ease;
}
.eco-card:hover,
.eco-card.is-active {
  background: var(--bg-card);
  border-color: var(--accent);
  box-shadow: 0 10px 28px rgba(74, 92, 224, 0.18);
  transform: translateY(-2px);
  z-index: 3;
}
.eco-card:hover::before,
.eco-card.is-active::before {
  height: 100%;
}
.eco-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.eco-card-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--accent-fade);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: background 0.22s ease, color 0.22s ease;
}
.eco-card:hover .eco-card-icon,
.eco-card.is-active .eco-card-icon {
  background: var(--accent);
  color: #fff;
}
.eco-card-title {
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: var(--tracking-title);
  line-height: 1.3;
}
.eco-card-desc {
  font-size: var(--fs-caption);
  line-height: 1.65;
  color: var(--text-muted);
  font-weight: 400;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.eco-card-tag {
  display: inline-block;
  align-self: flex-start;
  padding: 2px 8px;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-tag);
  text-transform: uppercase;
  background: var(--bg-muted);
  color: var(--text-secondary);
  border-radius: 999px;
  font-weight: 500;
}
.eco-card:hover .eco-card-tag {
  background: var(--accent-fade);
  color: var(--accent);
}

/* 卡片列表空态：管理员在后台显式删光全部卡片时展示 */
.eco-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-muted, #9ca3af);
  padding: 24px;
}
.eco-empty[hidden] { display: none; }
.eco-empty-icon { font-size: 36px; line-height: 1; margin-bottom: 8px; opacity: 0.7; color: var(--text-muted); }
.eco-empty-title { font-size: var(--fs-body); font-weight: 600; color: var(--text-primary, #374151); margin: 0 0 6px; }
.eco-empty-sub { font-size: var(--fs-body-sm); line-height: 1.6; margin: 0; max-width: 360px; }

@media (max-width: 1180px) {
  :root { --eco-left-width: 340px; }
  .eco-inner { gap: 32px; }
}
@media (max-width: 1024px) {
  :root { --eco-left-width: 320px; }
  .eco-section { padding: 64px 28px 72px; }
  .eco-right { height: 520px; }
  .eco-detail { padding: 32px 28px; min-height: 440px; }
  .eco-detail-title { font-size: 24px; }
}
@media (max-width: 860px) {
  .eco-inner {
    flex-direction: column;
    gap: 28px;
  }
  .eco-left {
    flex: none;
    max-width: 100%;
    width: 100%;
    position: static;
  }
  .eco-detail {
    min-height: auto;
    padding: 28px 24px;
  }
  .eco-detail-title { min-height: 0; font-size: 22px; margin-bottom: 14px; }
  .eco-detail-desc  { min-height: 0; }
  .eco-right {
    height: auto;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .eco-col {
    overflow: visible;
  }
  .eco-col::before,
  .eco-col::after { display: none; }
  .eco-col-track {
    transform: none !important;
    padding: 0;
  }
  .eco-card:hover,
  .eco-card.is-active {
    transform: none;
  }
}
@media (max-width: 560px) {
  .eco-section { padding: 48px 20px 56px; }
  .eco-right { grid-template-columns: 1fr; }
  .eco-card { min-height: auto !important; }
  .eco-detail-icon { width: 52px; height: 52px; font-size: 26px; }
}

/* ---------- 响应式 ---------- */
@media (max-width: 720px) {
  .footer { padding: 20px 24px; gap: 12px; }
  h1 { font-size: calc(44px * 1.1); }
  h1 .en { font-size: 11px; letter-spacing: 0.3em; }
  .sub { font-size: 14px; margin-bottom: 48px; }
  .cta { width: 100%; justify-content: center; padding: 20px 24px; letter-spacing: 0.12em; }
  .eyebrow { margin-bottom: 32px; }
}

/* ================================================================
   统一 Section Header（sec-head）
   全站区块头部组件：eyebrow（眉题）+ title（大标题）+ desc（描述），
   字阶/字距与 Hero 眉题、eco 左栏眉题共用同一套 token
   ================================================================ */
.sec-head {
  max-width: 1280px;
  margin: 0 auto 48px;
}
.sec-eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--accent);
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 14px;
}
.sec-title {
  font-size: var(--fs-title-lg);
  font-weight: 600;
  letter-spacing: var(--tracking-title);
  line-height: 1.3;
  color: var(--text-primary);
  margin-bottom: 12px;
}
.sec-desc {
  font-size: var(--fs-body-sm);
  line-height: 1.8;
  color: var(--text-secondary);
  max-width: 40em;
}
.community-section .sec-head { padding: 0 40px; }
@media (max-width: 860px) {
  .community-section .sec-head { padding: 0 20px; margin-bottom: 32px; }
}

/* ================================================================
   SVG 图标（eco 卡片 / 详情 / 空态）
   尺寸跟随容器 font-size（1em），描边随 currentColor 变色
   ================================================================ */
.eco-card-icon svg,
.eco-detail-icon svg,
.eco-empty-icon svg {
  width: 1em;
  height: 1em;
  display: block;
}

/* ================================================================
   键盘可达性：全局焦点环（仅键盘导航 :focus-visible 时出现；
   颜色跟随品牌色，outline 自动贴合圆角）
   ================================================================ */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ================================================================
   减少动态效果（prefers-reduced-motion）
   JS 侧同步停用 eco 三列 rAF 自动滚动（见 index.html eco 引擎）
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  .eyebrow, .cta, .cta .arrow, .toast, .sf-link,
  .eco-detail, .eco-detail-icon, .eco-fade,
  .eco-card, .eco-card-icon, .eco-card::before {
    transition: none;
  }
  .cta:hover, .cta:focus-visible { transform: none; }
  .cta:hover .arrow { transform: none; }
  .eco-card:hover, .eco-card.is-active { transform: none; }
  .eco-detail.has-hover .eco-detail-icon { transform: none; }
  .eco-fade { transform: none; }
}

/* ================================================================
   Hero 签名交互：认知神经网络粒子画布
   （JS 见 index.html 内联脚本；pointer-events 关闭不挡 CTA）
   ================================================================ */
#heroCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ================================================================
   入场动效编排
   - .hero-rise：hero 四件套 stagger 上浮，节奏由 d1~d4 delay 编排
   - .reveal：区块 IntersectionObserver 依次淡入
   - reduced-motion 直显（JS 侧同步直加 .in）
   ================================================================ */
.hero-rise {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.16, 0.84, 0.32, 1);
}
.hero-rise.d1 { transition-delay: 0.05s; }
.hero-rise.d2 { transition-delay: 0.16s; }
.hero-rise.d3 { transition-delay: 0.30s; }
.hero-rise.d4 { transition-delay: 0.44s; }
.hero-rise.in { opacity: 1; transform: none; }

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.16, 0.84, 0.32, 1);
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hero-rise, .reveal { opacity: 1; transform: none; transition: none; }
}

/* ================================================================
   真实深色模式（跟随系统 prefers-color-scheme）
   token 与 topbar 的 --topbar-* 命名空间互不冲突；
   深色下品牌靛紫整体提亮一档，保证文字/连线对比度
   ================================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-page:    #0b1020;
    --bg-card:    #131a2e;
    --bg-soft:    #1a2138;
    --bg-muted:   #1c2438;
    --bg-elev:    #161e33;
    --text-primary:   #eef1f9;
    --text-secondary: #aeb7cd;
    --text-muted:     #8590a8;
    --text-hint:      #5d6880;
    --border:        #273048;
    --border-soft:   #232c44;
    --border-input:  #3a4560;
    --accent:        #7c8af0;
    --accent-hover:  #9aa5f2;
    --accent-soft:   #5a68d8;
    --accent-fade:   rgba(124, 138, 240, 0.14);
    --eco-section-bg: linear-gradient(180deg, #0b1020 0%, #121a30 calc(100% - 140px), #0b1020 100%);
  }
  body {
    background:
      radial-gradient(ellipse 70% 240px at 50% 0%, rgba(124, 138, 240, 0.16) 0%, transparent 60%),
      radial-gradient(ellipse 50% 170px at 100% 140px, rgba(138, 148, 236, 0.10) 0%, transparent 60%),
      radial-gradient(ellipse 60% 190px at 0% 230px, rgba(167, 139, 250, 0.07) 0%, transparent 60%),
      radial-gradient(ellipse 80% 60% at 50% 0%, rgba(90, 104, 216, 0.10) 0%, transparent 60%),
      radial-gradient(ellipse 50% 40% at 100% 100%, rgba(138, 148, 236, 0.05) 0%, transparent 60%),
      var(--bg-page);
    background-repeat: no-repeat;
  }
  h1 { background: linear-gradient(135deg, #eef1f9 0%, #9aa5f2 100%); }
  /* eco 三列上下渐隐蒙层：与深色渐变中段 #121a30 同源 */
  .eco-col::before { background: linear-gradient(180deg, rgba(18, 26, 48, 0.95) 0%, transparent 100%); }
  .eco-col::after  { background: linear-gradient(0deg,  rgba(18, 26, 48, 0.95) 0%, transparent 100%); }
}