/* ============================================================================
   EGO · Calm Focus v3 —— 官网首页视觉升级层
   只做「令牌 + 样式规则」覆盖：不改 DOM、不改 JS、不引外链、不联网。
   加载方式：templates/index.html 内联 <style> 的 </style> 之后同一行引入。
   ========================================================================== */
:root{
  /* 圆角 / 阴影：全站统一到同一组 token，卡片不再各写各的 */
  --ego-radius:16px;
  --ego-radius-btn:12px;
  --ego-shadow:0 1px 2px rgba(27,39,51,.05), 0 10px 28px rgba(27,39,51,.07);
  --ego-shadow-hover:0 4px 10px rgba(27,39,51,.08), 0 20px 44px rgba(27,39,51,.14);
}
/* 字号阶梯统一为 12 / 14 / 16 / 20 / 28 / 40 六档（旧变量名保留为别名，避免历史样式失联） */
:root{ --ego-fs-14:14px; --ego-fs-16:16px; --ego-fs-20:20px; --ego-fs-28:28px;
       --ego-fs-13:14px; --ego-fs-15:16px; --ego-fs-18:20px; --ego-fs-26:28px; }

body{ font-size:var(--ego-fs-16); line-height:1.8; }
h2{ font-size:var(--ego-fs-28); letter-spacing:-.2px; margin-bottom:14px; }
h3{ font-size:var(--ego-fs-20); }
h4{ font-size:var(--ego-fs-16); margin-bottom:8px; }
.lead{ font-size:var(--ego-fs-20); line-height:1.75; }
.eyebrow{ font-size:var(--ego-fs-12); letter-spacing:2.4px; margin-bottom:12px; }
.tiny{ font-size:var(--ego-fs-12); line-height:1.8; }
.small{ font-size:var(--ego-fs-14); }

/* 留白：分区间距拉大，避免长页面读起来像一堵墙 */
section{ padding:88px 0; }
section.tight{ padding:66px 0; }
.grid{ gap:24px; }
.card{ padding:28px; }
.value{ padding:26px; }
.tradeoff{ padding:34px; }
.arch{ padding:30px; }
.arch-band + .arch-band{ margin-top:26px; padding-top:26px; }
.arch-lane{ padding:16px 18px; }
.arch-lane b{ font-size:var(--ego-fs-14); }
.arch-lane span{ font-size:var(--ego-fs-12); line-height:1.7; }
.arch-agent{ padding:12px 14px; font-size:var(--ego-fs-12); }
.arch-agent strong{ font-size:var(--ego-fs-14); }
.arch-out div{ padding:14px 16px; font-size:var(--ego-fs-12); }
.arch-out strong{ font-size:var(--ego-fs-14); }
.timeline{ margin-top:36px; }
.tl-item{ padding-bottom:32px; }
.tl-item h3{ margin-bottom:6px; }
.cause{ padding:12px 0 12px 16px; font-size:var(--ego-fs-14); line-height:1.8; }
.spectrum{ margin:26px 0 8px; }
.spectrum-bar{ height:16px; }
.spectrum-marks{ font-size:var(--ego-fs-14); margin-top:10px; }
.pick{ margin-top:20px; padding:12px 18px; font-size:var(--ego-fs-14); }

/* ---------- 首屏：3 秒内说清「这是什么 / 解决什么 / 凭什么」 ---------- */
.hero{ padding:104px 0 108px; }
.hero h1{ font-size:clamp(30px,4.8vw,46px); line-height:1.24; letter-spacing:.2px; max-width:960px; margin:22px 0 18px; }
.hero .sub{ font-size:var(--ego-fs-20); line-height:1.8; max-width:840px; }
/* 首屏 CTA 尺寸刻度：与开场页「进入网页端」的 --btn-fs 同一套语言（见 ego-ui-v3-landing.css）。
   一处 clamp 派生字号，下面所有尺寸都从它算，改这一条即等比缩放。 */
.hero .cta{ --ego-cta-fs:clamp(18.56px, max(1.024vw, 1.8347vh), 21.33px);
            margin-top:36px; gap:calc(var(--ego-cta-fs) * 1); }
.hero .metric{ margin-top:50px; padding-top:30px; gap:46px; }
.hero .metric b{ font-size:var(--ego-fs-28); }
.hero .metric span{ font-size:var(--ego-fs-14); line-height:1.6; }
.pill{ padding:7px 16px; font-size:var(--ego-fs-12); }
.btn{ padding:14px 30px; font-size:var(--ego-fs-16); }
/* ---------- 首屏两个 CTA 放大（作者：「这两个标志也加大一点」） ----------
   只作用于 .hero .cta 里的两个按钮，不波及其他 .btn（顶栏 btn-sm、页脚链接保持原样）。
   尺寸全部由 --ego-cta-fs 派生（字号 / 内边距 / 圆角 / 描边），随 max(vw,vh) 平滑放大，
   不写死 px、不加 !important、不改 DOM：
     · 1920×1080 档 19.81px ≈ 1.24×（与开场页按钮同档、同倍数）
     · 下限 18.56px = 1.16×（任何一档都不会变小）
     · 上限 21.33px ≈ 1.33×（超大屏封顶）
   越过下限的视口阈值（宽 ≥1813px 或高 ≥1012px）与 landing 的 --btn-fs 完全一致，
   投屏时开场页按钮与首屏 CTA 同步变大、不会出现「两拨人改」的观感差。
   比例沿用原值：内边距 14/30px、圆角 12px、描边 1px 均按 16px 字号换算成 em 系数。 */
.hero .cta > .btn{
  font-size:var(--ego-cta-fs); font-weight:700;
  padding:calc(var(--ego-cta-fs) * .875) calc(var(--ego-cta-fs) * 1.875);  /* 14 / 30px @16px */
  border-radius:calc(var(--ego-cta-fs) * .75);                             /* 12px @16px */
}
.hero .cta > .btn-ghost{ border-width:calc(var(--ego-cta-fs) / 16); }      /* 1px @16px（描边同比例） */
/* 「专业对接绿色通道」条：把定位（初步筛查 → 交专业医生）在首屏显著说出 */
.hero-note{
  flex:0 0 100%; display:block; margin-top:4px; padding:12px 18px;
  font-size:var(--ego-fs-14); line-height:1.65; color:rgba(255,255,255,.94);
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22);
  border-left:3px solid #6FE3D4; border-radius:12px;
}
.hero-note b{ color:#9FE9DF; letter-spacing:.4px; }

/* ---------- 顶栏 / 页脚 ---------- */
.topbar{ padding:16px 28px; }
.brand b{ font-size:var(--ego-fs-20); }
.brand span{ font-size:var(--ego-fs-12); }
.nav-links{ gap:26px; font-size:var(--ego-fs-14); }
footer{ padding:54px 0 46px; }
footer .fnote{ padding:22px 24px; font-size:var(--ego-fs-14); line-height:1.9; }
footer .frow{ font-size:var(--ego-fs-12); }

/* ---------- 键盘可达性 ---------- */
a:focus-visible,.btn:focus-visible{ outline:none; box-shadow:0 0 0 4px rgba(47,111,237,.4); border-radius:var(--ego-radius-btn); }
.btn-ghost:focus-visible{ box-shadow:0 0 0 4px rgba(255,255,255,.4); }

/* ---------- 动效：只做一次克制的进入位移，不做循环动画 ---------- */
@media (prefers-reduced-motion:no-preference){
  .card,.value,.arch-lane,.arch-agent{ transition:transform .3s var(--ego-ease), box-shadow .3s var(--ego-ease); }
  .card:hover{ transform:translateY(-4px); }
  .grid > *{ animation:egoRise .52s var(--ego-ease) both; }
  .grid > *:nth-child(2){ animation-delay:.06s; }
  .grid > *:nth-child(3){ animation-delay:.12s; }
  .grid > *:nth-child(4){ animation-delay:.18s; }
  .grid > *:nth-child(5){ animation-delay:.24s; }
  .grid > *:nth-child(6){ animation-delay:.30s; }
  .tl-item{ animation:egoRise .5s var(--ego-ease) both; }
}
@keyframes egoRise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation:none !important; transition:none !important; } }

/* ---------- 响应式：1280×720 投影与 1920×1080 大屏都不破版 ---------- */
@media (max-width:1280px){
  .wrap{ max-width:1040px; }
  section{ padding:72px 0; }
  .hero{ padding:86px 0 90px; }
  .hero h1{ font-size:clamp(28px,4.4vw,40px); }
}
@media (max-width:900px){
  .g3,.g4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero .metric{ gap:28px; }
}
@media (max-width:640px){
  .g2,.g3,.g4{ grid-template-columns:1fr; }
  .hero-note{ font-size:var(--ego-fs-12); }
  .hero .metric b{ font-size:var(--ego-fs-20); }
}