/* =========================================================
   天乙源代码 · 禅意东方
   米白底、墨色字、赭石点缀，大量留白
   ========================================================= */

:root{
  --paper:#f7f4ee;
  --paper-2:#fdfbf7;
  --ink:#2b2925;
  --ink-2:#4a463f;
  --muted:#8a8177;
  --faint:#a9a196;
  --line:#e4ddd1;
  --line-2:#d3cabb;
  --accent:#8a6b45;
  --accent-soft:#b39a77;
  --ok:#5d7a5d;

  --serif:"Songti SC","STSong","Noto Serif SC","Source Han Serif SC","SimSun",serif;
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ---------------- 站头 ---------------- */
.site-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px 20px;flex-wrap:wrap;
  padding:22px 28px;
  max-width:1080px;margin:0 auto;
}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--serif);flex:0 0 auto}
/* 左上角徽章：用简化版（金环+墨底+天乙）。完整徽章含矩阵纹理，
   在 44px 下会糊成噪点，所以小尺寸一律不换完整版。 */
.brand-mark{width:44px;height:44px;flex:0 0 44px;display:block}
.brand-name{font-size:17px;letter-spacing:.18em;color:var(--ink-2);margin-right:-.18em;line-height:1.35}
.site-nav{display:flex;gap:26px;font-size:14px;letter-spacing:.08em;flex-wrap:wrap}
.site-nav a{color:var(--muted);padding-bottom:2px;border-bottom:1px solid transparent;transition:.25s;white-space:nowrap}
.site-nav a:hover{color:var(--ink);border-bottom-color:var(--line-2)}

/* ---------------- 通用块 ---------------- */
main{min-height:60vh}
.wrap{max-width:1080px;margin:0 auto;padding:0 28px}
.wrap-narrow{max-width:720px;margin:0 auto;padding:0 28px}
.eyebrow{
  font-size:12px;letter-spacing:.4em;color:var(--accent);
  text-transform:uppercase;margin-bottom:22px;
  display:flex;align-items:center;justify-content:center;gap:14px;
}
.eyebrow::before,.eyebrow::after{content:"";width:28px;height:1px;background:var(--accent-soft)}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.5}
.rule{height:1px;background:var(--line);margin:0}

/* ---------------- 水墨点缀 ----------------
   原则：远山只做气息，角落只做墨晕。
   透明度全部压住，保证任何时候文字都压得住背景。       */

/* 首页首屏：中心一团墨晕 + 底部远山 */
.hero{padding:92px 0 132px;text-align:center;position:relative;overflow:hidden}
.hero-ink{
  position:absolute;top:48%;left:50%;
  width:min(660px,90vw);height:min(660px,90vw);
  transform:translate(-50%,-58%);z-index:0;pointer-events:none;
  background:url("../img/ink-wash.svg") center/contain no-repeat;
  opacity:.62;
}
.hero-mountains{
  position:absolute;left:0;right:0;bottom:-1px;height:168px;z-index:0;pointer-events:none;
  background:url("../img/ink-mountains.svg") no-repeat bottom center/100% auto;
  opacity:.42;
}
.hero-mountains--sm{height:130px;opacity:.34}
/* 首屏徽章：这里尺寸够大，用带「源代码」的完整版。
   必须显式提层，否则会被 z-index:0 的墨晕盖住。 */
.hero-badge{
  display:block;width:128px;height:128px;margin:0 auto 30px;
  position:relative;z-index:1;
}

/* 洞见页：一团墨晕挂在左上角 */
.insight-wrap{position:relative;overflow:hidden}
/* 注意：不能用 `.insight-wrap > *`，那会把墨晕的 absolute 覆盖成 relative，
   导致它进入正常流、页面被顶出一个大洞。装饰元素必须排除。 */
.insight-wrap > :not([aria-hidden]){position:relative;z-index:1}
.insight-ink{
  position:absolute;left:-150px;top:40px;width:440px;height:440px;
  z-index:0;pointer-events:none;
  background:url("../img/ink-wash.svg") center/contain no-repeat;
  opacity:.45;
}

/* 报告页与联系页：右下角一小团 */
.corner-ink{
  position:absolute;right:-130px;bottom:-90px;width:380px;height:380px;
  z-index:0;pointer-events:none;
  background:url("../img/ink-wash.svg") center/contain no-repeat;
  opacity:.4;
}
.ink-host{position:relative;overflow:hidden}
.ink-host > :not([aria-hidden]){position:relative;z-index:1}
.hero .sub{font-size:16px;color:var(--muted);max-width:520px;margin:0 auto 40px;line-height:2.1}
.hero .meta{font-size:13px;color:var(--faint);letter-spacing:.06em;margin-top:22px}

.btn{
  display:inline-block;background:var(--accent);color:#fdfbf7;
  padding:15px 46px;font-size:15px;letter-spacing:.24em;
  border:none;cursor:pointer;font-family:var(--sans);
  transition:background .3s,transform .15s;
}
.btn:hover{background:#755936;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-ghost{background:transparent;color:var(--accent);border:1px solid var(--accent-soft)}
.btn-ghost:hover{background:rgba(138,107,69,.06);color:var(--accent)}

section{padding:78px 0}
.sec-title{font-size:26px;letter-spacing:.1em;margin-bottom:14px;display:flex;align-items:center;gap:14px}
/* 章节标题挂一条赭石竖条：这是全站统一的"分区"语言，
   首页、洞见页、报告页、联系页一眼就能看出层级关系 */
.sec-title::before{content:"";width:2px;height:1.05em;background:var(--accent);flex:0 0 2px}
.sec-sub{font-size:14px;color:var(--muted);margin-bottom:52px;line-height:2}

/* 体系观点 */
.beliefs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.belief{background:var(--paper-2);padding:40px 30px;position:relative}
.belief h3{font-size:19px;margin-bottom:16px;letter-spacing:.05em}
.belief p{font-size:14px;color:var(--muted);line-height:2}
.belief .more{display:block;margin-top:22px;font-size:12px;color:var(--accent-soft);letter-spacing:.08em}

/* 流程：编号做成圆形印记，比纯数字更像"步骤" */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:44px}
.step .no{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border:1px solid var(--accent-soft);
  font-family:var(--serif);font-size:13px;color:var(--accent);letter-spacing:.06em;
}
.step h3{font-size:18px;margin:16px 0 12px}
.step p{font-size:14px;color:var(--muted);line-height:2}

/* 见证 */
.witness{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:20px}
.wcard{border:1px solid var(--line);background:var(--paper-2);padding:28px 22px;text-align:center}
.wcard .q{font-family:var(--serif);font-size:16px;line-height:1.8}
.wcard .f{font-size:12px;color:var(--faint);margin-top:14px;letter-spacing:.1em}
.witness-note{font-size:12px;color:var(--faint);margin-top:22px;text-align:center}

/* FAQ */
.faq-item{border-top:1px solid var(--line);padding:26px 0}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-q{font-family:var(--serif);font-size:17px;margin-bottom:10px}
.faq-a{font-size:14px;color:var(--muted);line-height:2}

/* ---------------- 洞见页 ---------------- */
.insight-item{
  border-left:2px solid var(--line-2);
  padding:6px 0 6px 30px;margin-bottom:52px;
}
.insight-item p{font-family:var(--serif);font-size:clamp(19px,2.6vw,24px);line-height:1.9;letter-spacing:.04em}

/* ---------------- 测评页 ---------------- */
.quiz-page{padding:44px 0 90px}
.quiz-top{position:sticky;top:0;background:var(--paper);padding:14px 0 16px;z-index:10}
.quiz-progress{height:2px;background:var(--line);position:relative;overflow:hidden}
.quiz-progress i{position:absolute;left:0;top:0;bottom:0;background:var(--accent);width:0;transition:width .35s ease}
.quiz-status{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);letter-spacing:.1em;margin-top:10px}
.quiz-status .dim{color:var(--accent)}

.quiz-stage{padding-top:56px;min-height:440px}
.quiz-dim-title{font-family:var(--serif);font-size:25px;letter-spacing:.1em;margin-bottom:12px}
.quiz-dim-desc{font-size:14px;color:var(--muted);margin-bottom:40px;line-height:2}

.q-card{display:none}
.q-card.on{display:block;animation:fade .4s ease both}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.q-index{font-size:12px;color:var(--faint);letter-spacing:.2em;margin-bottom:14px}
.q-text{font-family:var(--serif);font-size:clamp(20px,3.4vw,27px);line-height:1.75;margin-bottom:38px;letter-spacing:.03em}

.opts{display:flex;flex-direction:column;gap:12px;max-width:520px}
.opt{
  display:flex;align-items:center;gap:16px;
  border:1px solid var(--line-2);background:var(--paper-2);
  padding:17px 22px;cursor:pointer;transition:.2s;
  font-size:15px;letter-spacing:.04em;
}
.opt:hover{border-color:var(--accent-soft);background:#fff}
.opt .k{
  width:26px;height:26px;flex:0 0 26px;border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--muted);font-family:var(--serif);
}
.opt.sel{border-color:var(--accent);background:rgba(138,107,69,.05)}
.opt.sel .k{background:var(--accent);color:#fdfbf7;border-color:var(--accent)}

.quiz-nav{display:flex;gap:14px;margin-top:44px}
.quiz-nav button{
  background:none;border:1px solid var(--line-2);color:var(--muted);
  padding:11px 26px;font-size:13px;letter-spacing:.14em;cursor:pointer;font-family:var(--sans);transition:.2s;
}
.quiz-nav button:hover:not(:disabled){border-color:var(--accent-soft);color:var(--ink)}
.quiz-nav button:disabled{opacity:.35;cursor:not-allowed}

/* 开放题 */
.open-wrap .q-text{margin-bottom:22px}
.open-wrap textarea{
  width:100%;max-width:520px;min-height:130px;
  border:1px solid var(--line-2);background:var(--paper-2);
  padding:16px 18px;font-family:var(--sans);font-size:15px;line-height:1.9;
  color:var(--ink);resize:vertical;
}
.open-wrap textarea:focus{outline:none;border-color:var(--accent-soft)}
.open-hint{font-size:12px;color:var(--faint);margin-top:10px}

.captcha-row{display:flex;align-items:center;gap:14px;margin-top:34px;flex-wrap:wrap}
.captcha-q{font-family:var(--serif);font-size:18px;letter-spacing:.08em}
.captcha-row input{
  width:100px;border:1px solid var(--line-2);background:var(--paper-2);
  padding:11px 14px;font-size:15px;font-family:var(--sans);color:var(--ink);
}
.captcha-row input:focus{outline:none;border-color:var(--accent-soft)}

.quiz-err{color:#9c4a3f;font-size:14px;margin-top:18px;min-height:24px}
.quiz-loading{text-align:center;padding:60px 0}
.quiz-loading p{font-size:14px;color:var(--muted);letter-spacing:.1em}
.dots::after{content:"";animation:dots 1.4s steps(4,end) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

/* 等待面板 —— AI 要 12~25 秒，这段时间页面上必须"有东西在动"。
   没有它，用户最常见的反应就是以为页面死了然后关掉，
   而这恰恰是临门一脚、最不该流失的一步。                       */
.wait-panel{
  margin-top:38px;padding:34px 32px;text-align:left;
  border:1px solid var(--accent-soft);border-left:3px solid var(--accent);
  background:rgba(138,107,69,.05);
}
.wait-title{
  font-family:var(--serif);font-size:20px;letter-spacing:.14em;
  color:var(--accent);margin-bottom:14px;
}
.wait-title::after{
  content:"";display:inline-block;width:1.6em;height:1px;
  background:var(--accent);vertical-align:middle;margin-left:12px;
  animation:waitpulse 1.6s ease-in-out infinite;
}
@keyframes waitpulse{0%,100%{opacity:.25;transform:scaleX(.6)}50%{opacity:1;transform:scaleX(1)}}
.wait-note{font-size:14px;color:var(--ink-2);line-height:1.95;margin-bottom:20px}
.wait-note b{color:var(--accent);font-weight:400;padding:0 2px}
.wait-steps{list-style:none}
.wait-steps li{
  position:relative;padding-left:26px;font-size:13.5px;color:var(--faint);
  line-height:2.1;transition:color .6s;
}
.wait-steps li::before{
  content:"";position:absolute;left:2px;top:11px;
  width:7px;height:7px;border:1px solid var(--line-2);border-radius:50%;
  transition:.6s;
}
.wait-steps li.on{color:var(--ink-2)}
.wait-steps li.on::before{border-color:var(--accent);background:var(--accent)}
.wait-fallback{font-size:12px;color:var(--faint);margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}

/* ---------------- 报告页 ----------------
   设计原则：不靠颜色堆层级，只靠留白、细线、字号和字距。
   四个维度是"并列的四种状态"，必须一眼能分开；
   任务和服务是"接下来要做什么"，必须一眼看出性质不同。        */
.report-wrap{padding:64px 0 90px}
.rp-head{text-align:center;padding-bottom:48px;border-bottom:1px solid var(--line);margin-bottom:56px}
.rp-head h1{font-size:30px;letter-spacing:.1em;margin-bottom:14px}
.rp-head .gen{font-size:12px;color:var(--faint);letter-spacing:.1em}

/* 四维：1px 间隙露出底下的横线，形成卡片之间的分隔，不加重描边 */
.dims{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:68px}
.dim{background:var(--paper-2);padding:36px 28px 30px;position:relative;overflow:hidden}

/* 右上角序号：做水印，压到接近背景色，只在余光里提示"这是第几块" */
.dim .dno{
  position:absolute;top:14px;right:20px;
  font-family:var(--serif);font-size:46px;line-height:1;
  color:var(--line);letter-spacing:.02em;pointer-events:none;
}

/* 维度名：一条赭石短线做锚点，比单纯靠字色更好认 */
.dim .dlabel{font-size:12px;color:var(--muted);letter-spacing:.3em;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.dim .dlabel::before{content:"";width:16px;height:1px;background:var(--accent);flex:0 0 16px}

.dim .dval{font-family:var(--serif);font-size:29px;letter-spacing:.08em;margin-bottom:8px;color:var(--ink)}
.dim .dtype{font-size:13px;color:var(--muted);margin-bottom:22px;letter-spacing:.1em}
.dim .dtext{font-size:14.5px;color:var(--ink-2);line-height:2.05;margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.dim .dnum{font-size:12px;color:var(--faint);margin-top:6px}

.gauge{display:flex;gap:4px;margin-top:6px}
.gauge i{flex:1;height:3px;background:var(--line)}
.gauge i.on{background:var(--accent)}

.stage-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.stage-list span{
  font-size:11px;letter-spacing:.1em;color:var(--faint);
  border:1px solid var(--line);padding:4px 10px;
}
.stage-list span.on{border-color:var(--accent);color:var(--accent);background:rgba(138,107,69,.06)}

.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.chip{font-size:13px;letter-spacing:.1em;color:var(--accent);border:1px solid var(--accent-soft);padding:5px 14px}

.rp-block{margin-bottom:68px}
/* 区块标题：左侧一条赭石竖条，把"解读"和"引导"两类内容明确分开 */
.rp-block h2{font-size:21px;letter-spacing:.12em;margin-bottom:12px;display:flex;align-items:center;gap:14px}
.rp-block .h2-bar{width:2px;height:1.05em;background:var(--accent);flex:0 0 2px}
.rp-block .rs{font-size:13px;color:var(--muted);margin-bottom:30px}
.rp-text{font-size:15.5px;line-height:2.15;color:var(--ink-2);max-width:640px}

/* 任务：整页唯一"要动手做"的东西，所以给它最重的边框和唯一的暖底 */
.task-box{
  border:1px solid var(--accent-soft);border-left:3px solid var(--accent);
  background:rgba(138,107,69,.05);padding:38px 36px;
}
.task-box .tl{font-size:12px;color:var(--accent);letter-spacing:.3em;margin-bottom:16px}
.task-box .tt{font-family:var(--serif);font-size:19px;line-height:2;letter-spacing:.03em;color:var(--ink)}

/* 服务引导：首推那一项是这次页面的落点，必须一眼可辨 */
.svc{border:1px solid var(--line);background:var(--paper-2);padding:0;margin-bottom:18px;overflow:hidden}
.svc.primary{border-color:var(--accent-soft);border-left:3px solid var(--accent);background:#fffdf9}
.svc-in{padding:30px 32px;position:relative}
.svc.primary .svc-in{padding:36px 34px}
.svc-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.svc-name{font-family:var(--serif);font-size:21px;letter-spacing:.08em}
.svc-price{font-size:14px;color:var(--accent);letter-spacing:.06em}
.svc.primary .svc-price{font-family:var(--serif);font-size:22px;letter-spacing:.04em}
.svc-fmt{font-size:12px;color:var(--faint);letter-spacing:.12em;margin-bottom:14px}
.svc-hook{font-size:15px;line-height:1.9;margin-bottom:10px}
.svc.primary .svc-hook{font-size:16px;color:var(--ink)}
.svc-detail{font-size:14px;color:var(--muted);line-height:2}
.svc-tag{
  display:inline-block;font-size:11px;letter-spacing:.2em;color:#fdfbf7;
  background:var(--accent);padding:3px 12px;margin-bottom:14px;
}
.svc-hide{font-size:12px;color:var(--faint);margin-top:14px;letter-spacing:.06em}

.mock-note{
  text-align:center;font-size:12px;color:var(--faint);
  border:1px dashed var(--line-2);padding:12px;margin-bottom:40px;letter-spacing:.06em;
}

.cta-band{text-align:center;padding:56px 0 20px;border-top:1px solid var(--line);margin-top:20px}
.cta-band p{font-size:15px;color:var(--muted);margin-bottom:26px;line-height:2}

.rp-disc{font-size:12px;color:var(--faint);line-height:1.9;margin-top:48px;padding-top:24px;border-top:1px solid var(--line)}

/* ---------------- 联系页 / 404 ---------------- */
.center-page{padding:96px 0;text-align:center;min-height:64vh}
.center-page h1{font-size:28px;letter-spacing:.1em;margin-bottom:20px}
.center-page p{color:var(--muted);font-size:15px;line-height:2.1;max-width:520px;margin:0 auto 34px}
.qr-box{width:200px;height:200px;border:1px dashed var(--line-2);margin:0 auto 26px;display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:13px;padding:16px;text-align:center;line-height:1.8}

/* ---------------- 页脚 ---------------- */
.site-foot{max-width:1080px;margin:0 auto;padding:56px 28px 72px;text-align:center}
.foot-rule{height:1px;background:var(--line);margin-bottom:36px}
.foot-brand{font-family:var(--serif);font-size:15px;letter-spacing:.24em;color:var(--ink-2);margin-bottom:18px}
.foot-disc{font-size:11.5px;color:var(--faint);line-height:2;max-width:620px;margin:0 auto 20px}
.foot-meta{font-size:11px;color:var(--line-2);letter-spacing:.14em}

/* ---------------- 移动端 ---------------- */
@media(max-width:860px){
  .site-head{padding:18px 20px;flex-direction:column;align-items:stretch;gap:14px}
  .brand{justify-content:center}
  .site-nav{justify-content:center;gap:12px 30px;font-size:13px}
  .wrap,.wrap-narrow,.site-foot{padding-left:20px;padding-right:20px}
  .hero{padding:56px 0 48px}
  .hero-badge{width:106px;height:106px;margin-bottom:24px}
  section{padding:56px 0}
  .quiz-stage{padding-top:38px;min-height:400px}
  .report-wrap{padding:44px 0 64px}
  .dim,.svc-in,.svc.primary .svc-in,.task-box{padding:26px 22px}
  .opts .opt{padding:15px 18px}
  .dims{grid-template-columns:1fr}
  /* 序号在窄屏会和标题挤到一起，缩到右上角当装饰 */
  .dim .dno{font-size:36px;top:10px;right:16px}
  .dim .dval{font-size:25px}
  .wait-panel{padding:26px 22px;margin-top:30px}
  .wait-title{font-size:18px}
  .eyebrow::before,.eyebrow::after{width:18px}
}
@media(max-width:640px){
  .hero h1{font-size:28px}
  .hero{padding:64px 20px 104px}
  .beliefs,.witness,.steps{grid-template-columns:1fr}
  .btn{width:auto;min-width:200px}
  .step .no{width:26px;height:26px;font-size:12px}
}