/* 人生解析页 · 站点 UI 规范
   设计令牌唯一真源：shared/tokens.css（:root 定义在此文件，不在此重复声明）
   本文件只描述页面专属布局，颜色/字体/圆角一律走令牌 */

/* 整页统一衬线字体（站点 --serif：Merriweather + Noto Serif SC）
   tokens.css 中 html,body 默认 --sans，这里把页面内容整体覆盖为 --serif，
   避免标题宋体 / 正文黑体混排。.la-wrap 为本页专属类，不污染其它页。 */
.la-wrap{ width:min(1120px, calc(100% - 48px)); margin:0 auto; font-family:var(--serif); }

/* ===== Hero ===== */
.la-hero{ min-height:calc(100vh - 72px); display:flex; align-items:center; padding:90px 0; }
.la-eyebrow{ font-size:11px; letter-spacing:.2em; color:var(--ink3); margin-bottom:28px; text-transform:uppercase; }
.la-hero h1{ font-family:var(--serif); font-weight:400; font-size:clamp(40px,5.2vw,68px); line-height:1.18; letter-spacing:-.02em; margin:0; color:var(--ink); }
.la-hero h1 span{ display:block; }
.la-hero .lead{ max-width:720px; margin:32px 0 0; font-size:15px; color:var(--ink2); line-height:2; }
.la-hero .note{ margin-top:26px; font-size:13px; color:var(--ink2); display:flex; align-items:center; gap:16px; }
.la-hero .note:before{ content:""; width:40px; border-top:1px solid var(--ink3); }

/* hero 右侧：十神关键词文字场（纯装饰，缓慢漂浮） */
.la-hero-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,400px); gap:48px; align-items:center; }
/* 双栏后文案列变窄：标题降一档字号，保证第二行不出现单字悬挂 */
.la-hero-grid h1{ font-size:clamp(36px,4.2vw,54px); }
.la-hero-field{ position:relative; min-height:480px; user-select:none; pointer-events:none;
  /* 速度旋钮：动画周期 = 各词 --t × --spd。1=原速，越小越快（0.3 已明显活泼），不建议 >1 */
  --spd:.5; }
.lf{ position:absolute; left:var(--x); top:var(--y); font-family:var(--serif); font-weight:400;
  font-size:var(--fs,20px); letter-spacing:.14em; color:var(--ink3); --o:.55;
  animation:laFloat calc(var(--t,9s) * var(--spd,.5)) ease-in-out var(--d,0s) infinite alternate,
            laBreathe calc(var(--t,9s) * var(--spd,.5) * .7) ease-in-out calc(var(--d,0s) * var(--spd,.5)) infinite alternate; }
.lf--em{ color:var(--ink2); --o:.8; }
.lf--v{ writing-mode:vertical-rl; letter-spacing:.24em; }
/* 每个词的漂移向量/倾角错开，避免整体同频摆动 */
.lf:nth-child(3n){   --dx:4px;  --dy:12px; --r:-1.4deg; }
.lf:nth-child(3n+1){ --dx:11px; --dy:6px;  --r:1.6deg; }
.lf:nth-child(4n){   --dx:7px;  --dy:10px; --r:-.8deg; }
@keyframes laFloat{
  from{ transform:translate(calc(var(--dx,8px)*-1), calc(var(--dy,9px)*-1)) rotate(calc(var(--r,1.2deg)*-1)); }
  to  { transform:translate(var(--dx,8px), var(--dy,9px)) rotate(var(--r,1.2deg)); }
}
@keyframes laBreathe{
  from{ opacity:calc(var(--o,.55) - .1); }
  to  { opacity:calc(var(--o,.55) + .15); }
}
@media (prefers-reduced-motion: reduce){ .lf{ animation:none; opacity:var(--o,.55); } }
@media (max-width:960px){ .la-hero-grid{ grid-template-columns:1fr; } .la-hero-field{ display:none; } }

/* 按钮（复用 --primary / --radius-md / 阴影令牌） */
.la-btn{ display:inline-flex; align-items:center; height:46px; padding:0 26px; background:var(--primary); color:#fff; font-size:13px; text-decoration:none; border-radius:var(--radius-md); box-shadow:var(--shadow-btn); transition:background .15s, transform .15s, box-shadow .15s; margin-top:34px; }
.la-btn:hover{ background:var(--btn-primary-hover); color:#fff; transform:translateY(-1px); box-shadow:var(--shadow-btn-hover); }

/* ===== 通用区块标题 ===== */
/*.la-section{ border-top:1px solid var(--line); }*/
.la-kicker{ font-size:11px; letter-spacing:.2em; color:var(--accent-status); margin-bottom:16px; text-transform:uppercase; font-family:var(--serif); }
.la-title{ font-family:var(--serif); font-weight:400; font-size:clamp(28px,3.2vw,42px); line-height:1.4; margin:0; color:var(--ink); }
.la-intro{ max-width:640px; color:var(--ink2); font-size:14px; line-height:2; margin-top:16px; }

/* 三段式交替行 */
.la-row{ display:grid; grid-template-columns:36% 64%; min-height:520px;}
.la-row.rev{ grid-template-columns:64% 36%; }
.la-copy{ display:flex; flex-direction:column; justify-content:center; padding:60px 50px 60px 0; }
.la-row.rev .la-copy{ order:2; padding:60px 0 60px 50px; }
.la-num{ font:12px var(--serif); color:var(--ink3); letter-spacing:.12em; margin-bottom:22px; }
.la-copy h3{ font-family:var(--serif); font-weight:600; font-size:30px; line-height:1.45; margin:0 0 16px; color:var(--ink); }
.la-copy p{ font-size:15px; color:var(--ink2); line-height:2.1; margin:0; max-width:390px; }
.la-tag{ font-size:11px; color:var(--ink3); letter-spacing:.08em; margin-top:26px; }

/* 浏览器截图占位框 */
.la-shot-wrap{ display:flex; align-items:center; padding:40px 0 40px 36px; }
.la-row.rev .la-shot-wrap{ order:1; padding:40px 36px 40px 0; }
.la-shot{ width:100%; min-height:420px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:0 18px 45px rgba(24,24,24,.06); overflow:hidden; }
.la-shotbar{ height:37px; border-bottom:1px solid var(--line); padding:0 14px; display:flex; align-items:center; gap:6px; background:var(--surface3); }
.la-dot{ width:6px; height:6px; border-radius:50%; background:var(--ink3); opacity:.5; }
.la-shotbody{ padding:34px 40px; }
.la-image-placeholder{ width:100%; min-height:340px; background:var(--surface2); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; color:var(--ink3); font-size:12px; letter-spacing:.1em; }
.la-shot-img{ width:100%; height:auto; display:block; border-radius:var(--radius-sm); }
.la-shot--fill .la-shotbody{ padding:0; }
.la-shot--fill .la-shot-img{ border-radius:var(--radius-md); }
.la-image-placeholder:after{ content:"图片占位"; }

/* ===== 四大领域 Tab 区 ===== */
.la-life{ background:var(--surface2); border-top:1px solid var(--line); padding:120px 0; }
.la-life-top{ display:flex; justify-content:center; align-items:center; text-align:center; gap:48px; margin-bottom:44px; }
.la-life-top .la-intro{ max-width:420px; margin:0; }
.la-tabs{ width:min(640px,100%); margin:0 auto 52px; display:grid; grid-template-columns:repeat(4,1fr); padding:5px; background:var(--surface); border:1px solid var(--line); border-radius:38px; box-shadow:0 8px 25px rgba(24,24,24,.05); }
.la-tab{ appearance:none; border:0; background:transparent; color:var(--ink2); cursor:pointer; height:48px; border-radius:28px; font:400 15px var(--serif); transition:.25s; }
.la-tab:hover{ color:var(--ink); }
.la-tab.active{ background:var(--surface2); color:var(--ink); box-shadow:0 4px 12px rgba(24,24,24,.08); }
.la-showcase{ display:grid; grid-template-columns:minmax(0,68%) 32%; align-items:center; gap:0; }
.la-screenshot{ padding-right:56px; }
.la-screen{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:0 22px 55px rgba(24,24,24,.07); min-height:460px; padding:32px 40px; }
.la-screen .la-shotbar{ background:transparent; border:0; padding:0 0 14px; }
.la-screen-label{ font-size:9px; letter-spacing:.16em; color:var(--ink3); text-transform:uppercase; }
.la-screen-title{ font-family:var(--serif); font-weight:400; font-size:26px; margin:10px 0 16px; color:var(--ink); }
.la-lines{ display:flex; flex-direction:column; gap:8px; }
.la-lines i{ display:block; height:7px; background:var(--surface2); border-radius:4px; width:82%; }
.la-lines i:nth-child(2){ width:55%; } .la-lines i:nth-child(3){ width:68%; }
.la-chart{ height:230px; margin-top:28px; border:1px solid var(--line); border-radius:var(--radius-sm); position:relative; background:var(--paper); overflow:hidden; }
.la-chart:before{ content:""; position:absolute; left:0; right:0; top:50%; border-top:1px dashed var(--line); }
.la-chart:after{ content:""; position:absolute; top:0; bottom:0; left:50%; border-left:1px dashed var(--line); }
.la-chart-circle{ width:120px; height:120px; border:1px solid var(--elm-metal); border-radius:50%; position:absolute; left:calc(50% - 60px); top:50px; }
.la-showcase-copy{ padding:32px 0 32px 8px; }
.la-showcase-copy .la-num{ margin-bottom:14px; }
.la-showcase-copy h3{ font-family:var(--serif); font-weight:400; font-size:28px; margin:0 0 14px; color:var(--ink); }
.la-showcase-copy p{ font-size:14px; color:var(--ink2); line-height:2; margin:0; }
.la-showcase-copy .la-tag{ margin-top:20px; }
.la-link{ display:inline-block; margin-top:22px; font-size:13px; color:var(--accent-status); text-decoration:none; }
.la-link span{ transition:.2s; } .la-link:hover span{ margin-left:4px; }

/* ===== 末段 CTA（黑底，按首页 .final 规范） ===== */
.la-final{ min-height:75vh; background:var(--ink); color:#f4f2ec; display:flex; align-items:center; justify-content:center; text-align:center; }
.la-final h2{ font-family:var(--serif); font-weight:700; font-size:clamp(46px,6.2vw,78px); line-height:1.1; margin:0 0 28px; }
.la-final p{ color:#aaa79f; font-size:15px; line-height:2; margin:0 auto 35px; max-width:540px; }

.primary{ display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:13px 26px; font-size:13px; cursor:pointer; background:var(--primary); color:#fff; border:1px solid var(--primary); box-shadow:var(--shadow-btn); text-decoration:none; transition:background .15s,box-shadow .15s,transform .15s; }
.primary:hover{ background:var(--btn-primary-hover); transform:translateY(-1px); box-shadow:var(--shadow-btn-hover); }
.la-final .primary{ background:#f3f1eb; color:var(--ink); border-color:#f3f1eb; }
.la-final .primary:hover{ background:#fff; border-color:#fff; }

/* 页脚：按首页 lp-footer 规范 */
.lp-footer{ background:var(--ink); color:#8d8a82; padding:28px 7vw; border-top:1px solid #33332f; font-size:12px; display:flex; justify-content:space-between; gap:16px; }

/* 顶部导航当前项高亮 */
.public-nav a.is-active{ color:var(--ink); font-weight:600; }

/* ===== 响应式 ===== */
@media(max-width:800px){
  .la-wrap{ width:calc(100% - 32px); }
  .la-hero{ min-height:auto; padding:80px 0 80px; }
  .la-hero h1{ font-size:38px; }
  /*.la-section{ padding:80px 0; }*/
  .la-row,.la-row.rev{ display:flex; flex-direction:column; min-height:0; }
  .la-copy,.la-row.rev .la-copy{ order:1; padding:44px 0 24px; }
  .la-shot-wrap,.la-row.rev .la-shot-wrap{ order:2; padding:16px 0 48px; }
  .la-life{ padding:84px 0; }
  .la-life-top{ display:block; text-align:center; }
  .la-tabs{ width:100%; }
  .la-showcase{ display:flex; flex-direction:column; }
  .la-screenshot{ padding-right:0; width:100%; }
  .la-showcase-copy{ padding:24px 0 8px; border-left:0; border-top:1px solid var(--line); margin-top:24px; }
  .lp-footer{ display:block; line-height:2.2; }
}