/* ============================================================================
   EGO · Calm Focus v3 —— 产品介绍页「观感 + 互动手感」打磨层（第 3 层样式）
   引入位置：必须排在 templates/index.html 最后一个内联 </style> 之后，
             且排在 ego-ui-v3-index.css / ego-ui-v3-index-enrich.css 之后。
   约束：纯离线零外链；配色/圆角/字号全部沿用既有令牌，不新造色相；
         不修改任何中文文案；不改图片槽宽高比；不使用 !important（打印兜底除外）。
   ========================================================================== */

/* ---------- 0. 令牌：只补不换 ---------- */
:root{
  /* 可读性修正：原 --ego-text-3:#93A1B1 在白底上实测仅 2.63:1（WCAG AA 正文要求 4.5:1）。
     换成同一冷灰色相的 #64748B：白底 4.93:1、--ego-bg 上 4.59:1，均达标。
     与 --ego-text-2(#5B6B7C, 5.47:1) 的层级改由「字号 12/14/16 + 字重」承担。 */
  --ego-text-3:#64748B;
  /* 间距刻度：把散落的 14/22/24/26/30/36 收进一套 8px 基准刻度 */
  --ego-sp-1:8px;  --ego-sp-2:12px; --ego-sp-3:16px; --ego-sp-4:24px;
  --ego-sp-5:32px; --ego-sp-6:44px; --ego-sp-7:56px;
  /* 吸顶栏实测高度 91px（1600 宽），取 92px 作为锚点偏移基准 */
  --ego-topbar-h:92px;
  --ego-focus:rgba(47,111,237,.85);
  --ego-focus-dark:#9FE9DF;
}

/* ---------- 1. 层级：标题不该继承正文的 1.8 行高 ----------
   实测：h2 曾为 28px/50px（行高比 1.79），标题块被"摊平"，与段落抢视觉重量。
   收敛为标题专属行高，靠字号与字重区分层级。 */
h2{ line-height:1.32; letter-spacing:-.2px; }
h3{ line-height:1.5; }
h4{ line-height:1.55; }
.eyebrow{ line-height:1.4; }
.lead{ line-height:1.72; }

/* ---------- 2. 节奏：区块头部自成一组，组后与并列板块统一 32px ---------- */
section:not(.hero) > .wrap > *{ margin-top:0; margin-bottom:0; }
section:not(.hero) > .wrap > * + *{ margin-top:var(--ego-sp-5); }
section:not(.hero) > .wrap > .eyebrow{ margin-bottom:var(--ego-sp-2); }
section:not(.hero) > .wrap > .eyebrow + h2{ margin-top:0; margin-bottom:var(--ego-sp-3); }
section:not(.hero) > .wrap > h2 + .lead{ margin-top:0; }
section:not(.hero) > .wrap > .lead + *{ margin-top:var(--ego-sp-5); }

/* ---------- 3. 首屏：三栏骨架回到「左文案 / 右 1:1 主视觉 / 底部指标带」 ---------- */
.hero-grid{ align-items:center; gap:var(--ego-sp-7); }
.hero-media{ width:100%; max-width:520px; justify-self:end; }
/* 指标带改为整幅三列等分，避免三个数字挤在右列下方、右侧留下大片空洞 */
.hero .metric{ justify-content:space-between; gap:var(--ego-sp-4) var(--ego-sp-6); }
.hero .metric > div{ flex:1 1 220px; min-width:0; }

/* ---------- 4. 图片槽：空态是"有意为之的占位视觉"，有图时自动生效 ----------
   改法：图片层放在 ::after 上。
   - 图不存在 → 该图层不绘制（不会出现破图图标、alt 文字外泄、也不会留空洞）；
   - 图存在   → 自动覆盖在占位图形之上，随放随生效，比例由既有 .ego-r-* 锁定；
   - 关掉 JS、只读 CSS 也完全一致（不再依赖 onerror 回调）。 */
.ego-figure{ position:relative; }
.ego-figure::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background-repeat:no-repeat; background-position:center; background-size:cover;
}
.ego-slot-hero::after{ background-image:url("/static/img/hero-multimodal.png"); }
.ego-slot-privacy::after{ background-image:url("/static/img/privacy-local.png"); }
.ego-slot-referral::after{ background-image:url("/static/img/referral-channel.png"); }
/* 占位图形：在既有装饰 SVG 外再补一层同色系柔光，让空槽看起来是"设计留白" */
.ego-figure-fallback{
  background:radial-gradient(58% 58% at 50% 46%, rgba(255,255,255,.34), transparent 72%);
}

/* ---------- 5. 互动手感：指针、悬停、按下、触控尺寸 ---------- */
a,button,.btn{ cursor:pointer; }
.btn{ transition:transform .18s var(--ego-ease), box-shadow .18s var(--ego-ease), background-color .18s var(--ego-ease); }
.btn:active{ transform:translateY(1px); box-shadow:0 3px 10px rgba(47,111,237,.24); }
.btn-ghost:active{ box-shadow:none; background:rgba(255,255,255,.2); }

/* 顶栏导航：触控目标抬到 44px 高（实测原为 56×25 / 84×25，低于 40px 下限），并给悬停下划线 */
.nav-links a{
  position:relative; display:inline-flex; align-items:center; min-height:44px; padding:0 2px;
}
.nav-links a::after{
  content:""; position:absolute; left:2px; right:2px; bottom:6px; height:2px; border-radius:2px;
  background:currentColor; transform:scaleX(0); transform-origin:left center;
  transition:transform .22s var(--ego-ease);
}
.nav-links a:hover::after,.nav-links a:focus-visible::after{ transform:scaleX(1); }
.nav-links a:active{ opacity:.75; }

/* 页脚链接与正文链接：同样补足触控高度（页脚原为 100×15） */
footer .frow a{ display:inline-flex; align-items:center; min-height:44px; padding:0 2px; }
footer .frow a:hover{ text-decoration:underline; text-underline-offset:3px; }
.hero-note a,.card a,.tradeoff a,.value a{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }

/* ---------- 6. 键盘焦点：整站统一可见焦点环（外层样式曾把 outline 抹成 none） ---------- */
a:focus-visible,.btn:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--ego-focus); outline-offset:2px; border-radius:8px;
}
/* 深色底（顶栏 / 首屏 / 页脚）改用浅青环，避免蓝环落在蓝底上"隐身" */
.topbar a:focus-visible,.hero a:focus-visible,footer a:focus-visible{ outline-color:var(--ego-focus-dark); }

/* ---------- 7. 锚点定位：跳转后不被 92px 吸顶栏遮住 ---------- */
html{ scroll-padding-top:calc(var(--ego-topbar-h) + 12px); }
section[id]{ scroll-margin-top:calc(var(--ego-topbar-h) + 12px); }

/* ---------- 8. 动效：滚动进入的淡入上移（JS 只做增强，CSS 优先） ----------
   旧行为是"页面加载瞬间"把 19 个区块一次性播完，用户滚到位时动画早已结束；
   且旧动画挂在所有 .grid 子项上，与"滚动进入"无关。
   新机制：只有 JS 成功给 <html> 加上 .ego-anim 后才隐藏（无 JS / 无 IO / reduce 时一律不隐藏）。 */
html .grid > *,html .tl-item{ animation:none; }
@media (prefers-reduced-motion:no-preference){
  html.ego-anim .ego-rise{ opacity:0; transform:translateY(14px); }
  html.ego-anim .ego-rise.ego-in{
    opacity:1; transform:none;
    transition:opacity .5s var(--ego-ease), transform .5s var(--ego-ease);
  }
  .card,.value{ will-change:transform; }
}

/* ---------- 9. 动效降级：系统要求减弱动效时，一切位移/过渡全部关闭 ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  html.ego-anim .ego-rise{ opacity:1; transform:none; transition:none; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .card:hover,.value:hover{ transform:none; }
}

/* ---------- 10. 响应式：中窄屏的节奏重排 ---------- */
@media (max-width:1280px){
  .hero-grid{ gap:var(--ego-sp-6); }
}
@media (max-width:1024px){
  .hero-media{ max-width:440px; justify-self:center; }
  .hero .metric > div{ flex:1 1 180px; }
}
@media (max-width:900px){
  section:not(.hero) > .wrap > * + *{ margin-top:var(--ego-sp-4); }
}
@media (max-width:640px){
  section:not(.hero) > .wrap > * + *{ margin-top:var(--ego-sp-4); }
  .hero .metric > div{ flex:1 1 100%; }
  .nav-links a{ min-height:40px; }
}

/* ---------- 11. 打印：无论动效状态如何，内容必须全部可见 ---------- */
@media print{
  html.ego-anim .ego-rise{ opacity:1 !important; transform:none !important; }
  .ego-figure::after{ display:none; }
}