/* ============================================================
   Hero 首屏 · 样式
   结构：全屏单层 → logo(左上) / 节点网(中心) / 主张+CTA(底部居中)
   原则：文字极少，视觉主角是节点网
   ============================================================ */

.hero {
  position: relative;
  /* min-height 而不是 height：
     首屏至少铺满一屏，但内容更高时允许自然撑开，
     不像 height:100svh 那样把底部内容裁掉。 */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  /* ★ overflow-x:clip 而不是 hidden（本次 320px 实测踩到）
     首屏内部有横向滚动的导航，在 320px 小屏上，
     导航的溢出宽度仍会把整页 scrollWidth 撑到 333px，
     表现为「页面能左右晃」—— 很影响观感。
     hidden 会让 .hero 变成滚动容器，clip 则是真正裁掉且不创建滚动上下文。 */
  overflow-x: clip;
  overflow-y: hidden;
  isolation: isolate;
}

/* ---------- 背景：极轻的中心提亮，不做渐变色 ---------- */
/* 用一个 radial-gradient 模拟「中心有光」，比彩色渐变克制得多 */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 62% 48% at 50% 46%,
      rgba(172, 206, 34, .045) 0%,
      rgba(172, 206, 34, .012) 42%,
      transparent 72%);
  pointer-events: none;
}

/* ---------- 顶栏：导航位 ----------
   这是官网而非海报。左上角不放 logo（logo 在底部文字区），
   但顶部必须有导航位置：左侧预留给后续 logo / 右侧放主导航。
   当前四个栏目页尚未建设，先把位置与交互态搭出来，
   链接指向下方已存在的空语义区（#about 等），不留死链。 */
.hero__bar {
  position: relative;
  z-index: var(--z-ui);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;   /* 左空右实：左侧留给未来 logo */
  gap: var(--s-2);
  padding: 0 var(--gutter);
  height: clamp(56px, 9vh, 84px);
}

/* logo 未来回位时的落点（当前未启用，仅保留结构占位） */
.hero__slot {
  flex: 0 0 auto;
  margin-right: auto;
  display: flex;
  align-items: center;
}

.hero__nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 28px);
  /* 导航加一层极淡底衬：深空底上纯文字容易「沉下去」，
     一层 6% 白底 + 细描边能让它读作可交互的控件而非装饰文字。
     底衬用 94% 品牌绿的混合色，保持深色系不跳脱。 */
  padding: 5px 6px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.hero__nav a {
  position: relative;
  /* 提亮到 --c-text-2 以上：从「几乎看不见」提到「清晰可读」 */
  color: #C4CBD4;
  font-size: var(--t-sm);
  font-weight: 500;              /* 400→500，中文在小字号下更立得住 */
  letter-spacing: .06em;
  text-decoration: none;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  transition: color var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}
.hero__nav a:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
/* 悬停/当前页：品牌绿药丸底 + 深色字 —— 比细下划线显眼得多，
   在深空底上能第一时间被识别为「可点的导航」 */
.hero__nav a::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-pill);
  background: var(--c-brand);
  transform: scaleX(0);
  transition: transform var(--d-base) var(--ease);
  z-index: -1;
}
.hero__nav a { isolation: isolate; }
.hero__nav a:hover { color: var(--c-text-inv); }
.hero__nav a:hover::before,
.hero__nav a[aria-current="page"]::before { transform: scaleX(1); }
.hero__nav a[aria-current="page"] { color: var(--c-text-inv); font-weight: 600; }

/* logo 移到底部后可以更大：它现在是首屏唯一的品牌标识载体。

   ★ 本次调整（配合节点网放大）：
     128px → 108px。用户反馈「网状动图占页面太小」，
     根因是首屏纵向不够分配 —— 底区（logo+主张+按钮+留白）
     在 1440×900 上占 303px，把节点网压到 516px。
     既然要把网络放大，就必须先把这三样收一收，
     否则只是把「网络小」换成「网络大但挤」。

     108px 仍明显大于主张字号（36px），品牌标识感不受影响。 */
.hero__wordmark {
  height: 108px;
  width: auto;
  display: block;
  margin: 0;
}

/* ---------- 节点网：视觉主体 ----------
   关键：给它 flex:1 与最小高度，让它占据 bar 与 foot 之间的全部空间。
   文案区高度固定 → 两者不再互相挤压。

   ★ 比例协调（本次调整，Win 端实测）：
     节点网的直径由 JS 取 min(宽, 高) 决定 —— 在桌面端，
     宽度远大于高度，所以「高度」才是瓶颈。
     底区越高 → 节点网越小 → 中间图案显得空。
     因此比例的关键是把底区收紧，把高度让给节点网。

   ★★ 但 min-height 不能给太大（本次踩到）：
     首屏是 100svh，节点网是其中一段。
     若 min-height 给到 58svh，遇到 1366×768 / 1280×720 这类
     「矮屏」时，bar + net + foot 三段加起来会超过一屏，
     CTA 按钮被挤到折线以下 —— 首屏就看不到按钮了。
     所以桌面端用 flex 分配（不给硬性下限），
     只在移动端给一个保底值，且必须给低。 */
.hero__net {
  position: relative;
  z-index: var(--z-net);
  flex: 1 1 auto;
  /* 桌面端不给 min-height：让它吃满剩余空间，
     矮屏时自动让位给底区，保证 CTA 永远在首屏内 */
  min-height: 0;
  display: block;
  width: 100%;
  box-sizing: border-box;
  /* 不用 padding-top 偏移：会让 canvas 的可用高度被压缩，
     节点网在容器内重新居中反而更准。视觉重心由 rings 控制。 */
}

.hero__net canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* 无 WebGL / 无 JS 时的静态降级：
   保留一个用 CSS 画的中心点与几条线，保证版面不空 */
.hero__net--fallback {
  background:
    /* 中心平台点 */
    radial-gradient(circle 5px at 50% 50%, var(--c-node-hub) 0 100%, transparent 100%),
    /* 中心辉光 */
    radial-gradient(circle 46px at 50% 50%,
      rgba(172, 206, 34, .16) 0%, transparent 70%),
    /* 一圈资源节点的暗示 */
    radial-gradient(circle 2px at 40% 32%, var(--c-node-b) 0 100%, transparent 100%),
    radial-gradient(circle 2px at 61% 31%, var(--c-node-a) 0 100%, transparent 100%),
    radial-gradient(circle 2px at 65% 62%, var(--c-node-c) 0 100%, transparent 100%),
    radial-gradient(circle 2px at 35% 64%, var(--c-node-d) 0 100%, transparent 100%);
}

/* ---------- 底部文案：一句主张 + 一个 CTA ---------- */
.hero__foot {
  position: relative;
  z-index: var(--z-ui);
  padding: 0 var(--gutter) clamp(24px, 4vh, 44px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* 间距只用 gap 一处控制，元素本身不带 margin —— 避免叠加成松散距离。
     gap 24px 作用于「主张↔CTA」；logo↔主张 靠 margin-top 负值收紧到 6px，
     让 logo 与主张读成同一个品牌语块。
     ★ 本次把 gap 24 → 20：底区每少 4px，节点网就多 4px，
       在 520px 高的窗口上这个量级是能看出来的。 */
  gap: 20px;
  flex: 0 0 auto;                /* 固定高度，不被节点网挤压 */
}

/* ---------- 矮屏专项：把高度让给节点网 ----------
   实测（1080×520 窗口）：顶栏 56 + 底区 275 = 331px，
   视口只有 520px → 节点网容器只剩 189px，网络直径被压到 262px
   （仅占视口宽 24%），看起来就是「一小团点」。

   关键认知：canvas 尺寸 = 容器尺寸，网络外径的硬上限就是容器高。
   所以想让网络变大，必须把底区压缩，把高度让给它 ——
   这不是「调系数」能解决的。

   做法：视口越矮，logo / 主张 / 按钮 / 间距按比例收紧。
   160~700px 之间线性变化，不会在某个宽度突然跳变。 */
@media (max-height: 700px) {
  .hero__foot {
    padding-bottom: clamp(14px, 2.6vh, 26px);
    gap: clamp(10px, 1.8vh, 16px);
  }
  /* logo 与主张的负 margin 也要跟着收，否则会留出空隙 */
  .hero__claim { margin-top: -6px; }
  /* ★ logo 不再收得太狠。
     实测 1080×520：原来 clamp(64px,13vh,104px) 在 520 高时只有 68px，
     缩到和按钮差不多大，品牌标识感全无 —— 网络是大了，但 logo 小得失真。
     现在下限抬到 84px、上限 108px：520 高时约 84px，
     仍是画面里第二大的元素，比例才协调。 */
  .hero__wordmark { height: clamp(84px, 16vh, 108px); }
  .hero__cta { padding: clamp(9px, 1.5vh, 13px) clamp(18px, 3vh, 26px);
               font-size: clamp(14px, 2.3vh, 17px); }
}
/* 极矮（如多窗口分屏、或手机横屏）再收一档 */
@media (max-height: 560px) {
  .hero__foot { gap: clamp(8px, 1.4vh, 12px); padding-bottom: 10px; }
  .hero__wordmark { height: clamp(72px, 15vh, 92px); }
}

.hero__claim {
  font-size: var(--t-display);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.005em;
  color: var(--c-text);
  max-width: 24ch;
  /* 负 margin 抵消父级 gap：logo 与主张实际间距 = 24 - 18 = 6px。
     logo 图内有透明内边距，用负值抵消后视觉间距才真正收紧。 */
  margin: -14px 0 0;
  text-wrap: nowrap;
}
/* 极窄屏解除 nowrap，允许两行 */
@media (max-width: 560px) {
  .hero__claim { text-wrap: wrap; max-width: 15ch; }
}

/* 主张里的品牌色：只染「野心」这一个词 */
.hero__claim em {
  font-style: normal;
  color: var(--c-brand-hi);
  white-space: nowrap;
}

/* CTA：唯一按钮。品牌绿底 + 深色字，克制到只有一个。

   ★ 比例调整（本次）：
     原 26px 字号在 Win 下显得过大 —— 按钮比首屏主张（40px）
     只小一档，视觉上抢走了主张的注意力，且按钮本身有 1px 描边，
     显得像一块「广告牌」。
     改为 17px：与主张 40px 形成 2.4 倍的层级差，
     按钮回到「入口」的配角位置，主张重新成为视觉主角。
     高度同步收窄，整体从 327×65 降到约 232×52。 */
.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  border-radius: var(--r-pill);
  background: var(--c-brand);
  color: var(--c-text-inv);
  font-size: 17px;
  line-height: 1.2;            /* 锁定行高，使高度可控 */
  font-weight: 500;
  letter-spacing: .02em;
  text-decoration: none;
  border: 1px solid transparent;
  transition:
    background var(--d-fast) var(--ease),
    border-color var(--d-fast) var(--ease),
    transform var(--d-fast) var(--ease);
}
.hero__cta:hover {
  background: var(--c-brand-hi);
  border-color: var(--c-brand-hi);
  transform: translateY(-1px);
}
.hero__cta:active { transform: translateY(0) scale(.99); }
.hero__cta:focus-visible {
  outline: 2px solid var(--c-brand-hi);
  outline-offset: 3px;
}
/* 箭头：唯一的方向符号，用 CSS 画，避免额外请求 */
.hero__cta::after {
  content: "";
  width: 9px; height: 9px;     /* 配 17px 字号 */
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, 1px);
  transition: transform var(--d-base) var(--ease);
}
.hero__cta:hover::after { transform: rotate(45deg) translate(2px, -2px); }

/* ---------- 无障碍：视觉隐藏但可被读屏与搜索引擎获取 ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   响应式：移动端专项优化
   ------------------------------------------------------------
   目标：手机端视觉比例尽量接近桌面端，而不是简单等比缩小。
   实测问题（iPhone 390×844）与对策：
     1. logo 只 94px 宽（桌面 350px）→ 高度 66→104px
     2. 主张被拆两行、「野心」断在行尾 → 缩字号 + 允许换行但控制断点
     3. 底部区过高挤压节点网 → 收紧 gap 与上下留白
     4. 节点网连线过密成一团 → 移动端减少节点数（由 JS 侧 cap 控制）
   ============================================================ */

/* ---------- ≤860px：平板与手机 ---------- */
@media (max-width: 860px) {
  /* 导航：横向滚动，6 项全保留（隐藏某项会让人找不到当前页）
     ★ 导航从 5 项增加到 6 项后，390px 宽度下最后一项会被裁掉。
       两手处理：
         1) 收紧内边距与字号，先尽量挤进一屏
         2) 右侧加一道渐隐，暗示「还能横向滑动」—— 否则用户
            以为「联系我们」不存在，就永远找不到了。 */
  /* 顶栏必须自己约束宽度：内部导航能横向滚动，
     但若不裁掉超出部分，整页 scrollWidth 会跟着变宽 → 出现横向溢出。
     这是 320px 小屏实测踩到的：320 的页面被撑到 333。 */
  .hero__bar {
    padding: 0 var(--s-2);
    height: clamp(52px, 7vh, 68px);
    min-width: 0;
    overflow: hidden;          /* 关键：不让超宽的子元素撑大页面 */
  }
  .hero__nav {
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 3px 4px;
    max-width: 100%;
    min-width: 0;
    /* 右侧渐隐：提示还有内容可滑 */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
            mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
  }
  .hero__nav::-webkit-scrollbar { display: none; }
  .hero__nav a { font-size: 12.5px; padding: 6px 8px; flex: 0 0 auto; }

  /* 底部区：收紧间距，把高度让给节点网 */
  .hero__foot { gap: 14px; padding-bottom: clamp(24px, 5vh, 40px); }

  /* logo：手机端必须显著放大，否则品牌感缺失 */
  .hero__wordmark { height: 104px; }

  /* 主张：24px 两行内排完；不强制 nowrap，让「野心」保持完整 */
  .hero__claim { font-size: 24px; line-height: 1.34; }

  /* logo 与主张在手机端会「粘」在一起（桌面靠负 margin 收紧，
     那是为 128px 大 logo 设计的；96px 时显得太挤）。
     移动端改用正常间距，让 logo 与文字各自独立成组。 */
  .hero__claim { margin: 6px 0 0; }

  /* 节点网在竖屏下会偏上、下方留白。
     轻微下移 + 压缩，让它的视觉中心落在屏幕上半部的黄金位置。 */
  .hero__net { min-height: 42svh; }   /* 移动端保底值，不设太高 */
}

/* ---------- 561~860px：平板。宽度足够，尺寸应向桌面靠拢 ---------- */
@media (min-width: 561px) and (max-width: 860px) {
  .hero__wordmark { height: 128px; }   /* 与桌面一致 */
  .hero__claim { font-size: 32px; }
  .hero__cta { padding: 12px 23px; font-size: 15.5px; }
  .hero__foot { gap: 16px; }
  /* 平板不是手机，节点数放开一些 */
  .hero__net { min-height: 46svh; }
}

/* ---------- ≤420px：手机主力机型 ---------- */
@media (max-width: 420px) {
  .hero__nav { gap: 3px; }
  .hero__nav a { font-size: 11.5px; padding: 5px 7px; }

  .hero__wordmark { height: 96px; }

  /* 22px 时「为每一颗改变世界的野心提供土壤」14 字
     在 390px 宽内可排两行且语义不断，视觉重心与桌面一致 */
  .hero__claim { font-size: 22px; line-height: 1.36; max-width: none; margin: 4px 0 0; }
  .hero__claim em { white-space: nowrap; }   /* 「野心」永不拆开 */

  .hero__cta { padding: 11px 20px; font-size: 15px; line-height: 1.2; }
}

/* ---------- ≤360px：小屏兜底 ---------- */
@media (max-width: 360px) {
  .hero__wordmark { height: 84px; }
  .hero__claim { font-size: 20px; }
  .hero__cta { padding: 10px 17px; font-size: 14px; }
}

/* ============================================================
   背景层：logo 图形放大作水印（实验性）
   ------------------------------------------------------------
   实现约束（均为实测踩坑，勿改）：
     · 必须放在 .hero 的第一个可视子元素，且 position:absolute
       —— 放错位置会盖住节点网；position:fixed 会脱离 .hero 覆盖全屏
     · z-index:0，节点网为 1、文案为 2，天然垫底
     · pointer-events:none，绝不拦截点击
   恢复定稿版：删掉 index.html 中 <div class="hero__brandbg"> 整段
   ============================================================ */
.hero__brandbg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
}
.hero__brandbg svg {
  /* ★ 与节点网共用一套尺寸参照（本次调整）
     原来固定 min(700px, 72%)，但节点网是随容器高度缩放的，
     于是在 1080×520 这类宽而矮的窗口上：
       背景 logo = 700px，节点网 = 250px，两者差 2.8 倍 —— 极不协调。
     现在让背景 logo 同时受视口宽与视口高约束：
     宽屏大、矮屏小，与节点网的缩放方向一致，两者的比例就稳定了。 */
  width: min(700px, 72vw, 62vh);
  height: auto;
  opacity: .03;                 /* .03 以上会形成可见色块，抢走注意力 */
  transform: translateY(-4%);
  filter: drop-shadow(0 0 70px rgba(172, 206, 34, .35));
}
@media (max-width: 768px) {
  .hero__brandbg svg { width: min(96%, 46vh); opacity: .028; }
}

/* ---------- 英文版标语（2026-10-09 新增）----------
   加了第二行之后，首屏高度多占一行，必须同步收窄中文标语与按钮，
   否则 520–700px 高的笔记本窗口里按钮会被挤出首屏。

   做法：把三者的尺寸都挂到同一个 clamp 上，
   用 --hero-scale 在断点里统一调整，避免各改各的又对不齐。 */
.hero__claim-en {
  margin: -8px 0 0;
  font-size: clamp(9px, 1.15vw, 13px);
  font-weight: 500;
  line-height: 1.35;
  /* 字距收紧：全大写英文默认 tracking 太散会显得松垮 */
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-text-3);
  /* ★ 桌面端不能用 nowrap+ellipsis：
     实测 13px + .18em 字距下，这句英文约 640px 宽，
     而 .hero__foot 容器在 1440 视口下只有约 600px —— 结果被截成
     "Fertile Ground for E…" 。标语被截断等于没说。
     改成允许换行（max-width 用 ch 限制成两行以内）。 */
  /* 34ch 在 13px 下只有约 300px，英文被挤成 3 行，首屏高度不够用。
     放宽到 48ch（约 430px）→ 稳定两行，矮窗也能留出按钮空间。 */
  max-width: 48ch;
  text-wrap: balance;
}

/* 中文标语让一档，给英文行腾位置 */
@media (max-height: 700px) {
  .hero__claim { font-size: clamp(30px, 5.2vh, 52px); }
  .hero__wordmark { height: clamp(64px, 12vh, 92px); }
  .hero__cta { padding: clamp(8px, 1.3vh, 11px) clamp(15px, 2.6vh, 22px);
               font-size: clamp(13px, 2.1vh, 16px); }
}
/* 更高窗口可以放回大一些的值 */
@media (min-height: 900px) {
  .hero__claim { font-size: var(--t-display); }
  .hero__wordmark { height: clamp(92px, 15vh, 112px); }
}
@media (max-width: 860px) {
  /* 窄屏英文长句换行，不做省略 */
  .hero__claim-en {
    font-size: 10px;
    letter-spacing: .12em;
    white-space: normal;
    max-width: 30ch;
    text-align: center;
  }
}
@media (max-width: 420px) {
  .hero__claim-en { font-size: 9px; letter-spacing: .08em; max-width: 26ch; }
}