/* ═══════════════════════════════════════════
   竹间宁 · 宋式新中式设计系统
   2026-11-02 · v1
   ═══════════════════════════════════════════ */

/* ── 字体 ── */
/* 中文：思源宋体 SC（Noto Serif CJK SC）子集化，405KB，覆盖本站全部 988 字 */
@font-face{
  font-family:'ZJNSerif';
  src:url('./NotoSerifSC-sub.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
/* 拉丁：Lora */
@font-face{font-family:'Lora';src:url('./Lora-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Lora';src:url('./Lora-600.woff2') format('woff2');font-weight:600;font-display:swap}

:root{
  /* 纸与墨 */
  --paper:      #F8F4EC;   /* 宣纸 · 主背景 */
  --paper-2:    #FBF9F4;   /* 定窑白 · 卡片/浮层 */
  --paper-3:    #EFEAE0;   /* 稍深纸色 · 分区 */
  --ink-1:      #1C1B18;   /* 墨 · 标题 */
  --ink-2:      #3A3833;   /* 墨 · 正文 */
  --ink-3:      #6B675E;   /* 墨 · 辅助 */
  --ink-4:      #86807A;   /* 墨 · 分隔/次要（2026-11-03 加深，原 #A8A29A 仅 2.46 不合格）*/

  /* 点缀（克制使用） */
  --celadon:    #A8C4C0;   /* 汝窑天青 · 冷调剂 */
  --ochre:      #D9A05B;   /* 赭石 · 只做细线/装饰 */
  --ochre-deep: #A67028;   /* 赭石深 · 文字强调（纸底 3.85，大字 AA）*/
  --cinnabar:   #B7352D;   /* 朱砂 · 全站 1-2 处 */
  --ink-btn:    #3A3228;   /* 墨褐 · 主按钮（比纯黑暖，与纸底协调）*/

  /* 线 · 宋式「线 > 框」 */
  --hair:       1px solid rgba(28,27,24,.10);
  --hair-2:     1px solid rgba(28,27,24,.18);

  /* 节奏 */
  --ease:       cubic-bezier(.16,1,.3,1);
  --dur-fast:   .18s;
  --dur-base:   .45s;
  --dur-slow:   .9s;

  /* 版心 */
  --gutter:     clamp(20px, 5vw, 72px);

  /* ─────────────────────────────────────────────
     2026-11-02 · 全站统一 scale（唯一真源）
     原则：所有页面用这里的变量，不再各处写 clamp
     ───────────────────────────────────────────── */

  /* SPACING SCALE（8 的倍数 + 两个半档） */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* 纵向节奏（页面级，全站同一套） */
  --pad-page-top:    clamp(96px, 11vh, 120px);  /* 有固定顶栏时的首块上方留白 */
  --pad-page-bottom: clamp(72px, 9vh, 110px);   /* 页面底部（页脚前） */
  --pad-sec:         clamp(64px, 9vh, 112px);   /* 分节上下 padding */
  --gap-card:        clamp(20px, 2.4vw, 32px);  /* 卡片网格间距 */
  --gap-col:         clamp(24px, 3.4vw, 48px);  /* 两栏间距 */
  --hd-gap:          clamp(32px, 4.6vh, 56px);  /* 块标题与内容之间 */

  /* TYPE SCALE（h1 / h2 / h3 / body / small） */
  --fs-h1:   clamp(30px, 4.2vw, 52px);   /* 页面主标题 */
  --fs-h2:   clamp(24px, 2.9vw, 38px);   /* 分节标题 */
  --fs-h3:   clamp(17px, 1.5vw, 20px);   /* 卡片标题 */
  --fs-lead: clamp(15px, 1.25vw, 17px);  /* 引言 / 大正文 */
  --fs-body: 16px;                        /* 正文 */
  --fs-sm:   14px;                        /* 辅助正文 */
  --fs-xs:   13px;                        /* 说明 */
  --fs-label:12px;                        /* 小标签 / 眉标 */

  /* 行高（三级，不再散落 1.85/1.9/1.95/2/2.05/2.1/2.2） */
  --lh-tight: 1.4;    /* 标题 */
  --lh-body:  1.85;   /* 正文 */
  --lh-loose: 2;      /* 引言 / 说明 */

  /* 字距 */
  --ls-title: .06em;
  --ls-label: .24em;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink-2);
  font-family:'ZJNSerif',"Noto Serif SC","Songti SC","STSong",serif;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 var(--gutter)}
.wrap-narrow{max-width:820px}

/* ══════ 顶栏 ══════ */
.hd{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:22px 0;
  transition:background var(--dur-base) var(--ease), padding var(--dur-base) var(--ease);
}
.hd.scrolled{
  background:rgba(247,243,234,.92);
  backdrop-filter:blur(12px);
  padding:14px 0;
  border-bottom:var(--hair);
}
.hd-in{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:30px;height:30px;object-fit:contain;opacity:.9}
.brand .nm{font-size:20px;letter-spacing:.22em;color:var(--ink-1);font-weight:400}
.nav{display:flex;gap:38px;align-items:center}
.nav a{
  font-size:14.5px;letter-spacing:.1em;color:var(--ink-3);
  transition:color var(--dur-fast) var(--ease);position:relative;
}
.nav a:hover{color:var(--ink-1)}
.nav a::after{
  content:'';position:absolute;left:0;bottom:-6px;width:0;height:1px;
  background:var(--ochre);transition:width var(--dur-base) var(--ease);
}
.nav a:hover::after{width:100%}

/* ══════ 首屏 ══════ */
/* ══════ 首屏（沿用现网竹林视频方案） ══════ */
.hero{
  min-height:100vh;
  display:flex;align-items:center;
  position:relative;overflow:hidden;
  padding:100px 0 80px;
}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;animation:heroBgIn 2.2s ease forwards}
@keyframes heroBgIn{from{opacity:0}to{opacity:1}}
.hero-video{
  position:absolute;top:50%;left:50%;
  min-width:100%;min-height:100%;
  width:auto;height:auto;
  transform:translate(-50%,-50%);
  object-fit:cover;
}
.hero-veil{
  position:absolute;inset:0;
  background:linear-gradient(100deg, rgba(20,26,18,.72) 0%, rgba(20,26,18,.42) 45%, rgba(20,26,18,.18) 100%);
}
/* ★ 2026-11-02 首屏改为整体居中 */
.hero-in{
  position:relative;z-index:2;width:100%;max-width:760px;
  margin:0 auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;
}

.hero-logo{margin-bottom:var(--sp-5);display:flex;justify-content:center}
.hero-logo img{height:clamp(72px,10.5vh,108px);width:auto;filter:drop-shadow(0 6px 24px rgba(0,0,0,.6))}

.hero h1{
  font-size:clamp(26px,3.9vw,46px);
  line-height:1.45;letter-spacing:var(--ls-title);
  color:#fff;font-weight:400;
  text-wrap:balance;
}
.hero h1 span{color:#eef5ea}
.hero h1 em{font-style:normal;color:#E8C4A8}

.hero .slogan{
  font-size:clamp(15px,1.7vw,19px);
  color:#f4f8f2;letter-spacing:.2em;
  margin-top:var(--sp-5);
}
.hero .slogan::before,.hero .slogan::after{content:'·';margin:0 10px;color:#cfe0c9}

/* 首屏只剩 3 行：主标题（2 行）+ slogan（1 行）；副标题已删 */

/* 逐行上浮动效（位移 ≤12px，宋式克制） */
.hero-in .fx{opacity:0;transform:translateY(12px);animation:heroUp 1s var(--ease) forwards}
@keyframes heroUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hero-in .hero-logo.fx{animation-delay:.1s}
.hero-in h1.fx{animation-delay:.4s}
.hero-in .slogan.fx{animation-delay:.7s}
.hero-in .hero-cta.fx{animation-delay:1s}
.hero-in .hero-scroll.fx{animation-delay:1.2s}
.hero-in .hero-entries.fx{animation-delay:1.4s}

/* 身心财三入口 */
.hero-entries{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.22);
  margin-top:clamp(40px,6vh,60px);
  max-width:680px;backdrop-filter:blur(6px);
}
.he{
  padding:22px 20px 20px;
  background:rgba(20,26,18,.32);
  display:flex;flex-direction:column;gap:6px;
  transition:background .45s cubic-bezier(.16,1,.3,1);
  position:relative;
}
.he:hover{background:rgba(20,26,18,.62)}
.he::after{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:transparent;transition:background .45s cubic-bezier(.16,1,.3,1);
}
.he:hover::after{background:#D9A05B}
.he-k{
  font-size:26px;letter-spacing:.14em;color:#fff;
  font-weight:400;line-height:1.1;
}
.he-n{
  font-size:15px;letter-spacing:.1em;color:#f0f5ee;margin-top:4px;
}
.he-d{
  font-size:12.5px;letter-spacing:.06em;color:rgba(240,245,238,.62);
}

@media(max-width:900px){
  .hero{min-height:auto;padding:110px 0 70px}
  .hero-entries{grid-template-columns:1fr;max-width:100%}
  .he{padding:18px 18px 16px;flex-direction:row;align-items:center;gap:14px;flex-wrap:wrap}
  .he-k{font-size:22px}
  .he-n{font-size:14.5px;margin-top:0}
  .he-d{font-size:12px;flex-basis:100%;margin-left:36px}
}

/* 降低动效偏好：不播视频 */
@media(prefers-reduced-motion:reduce){
  .hero-video{display:none}
  .hero-in .fx{animation:none;opacity:1;transform:none}
}

/* 首屏下方三块 */
.tri{
  padding:var(--pad-sec) 0;
  border-top:var(--hair);
}
.tri-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-card)}
.tri-item{
  padding:var(--sp-5) 0;border-top:var(--hair-2);
  transition:border-color var(--dur-base) var(--ease);
}
.tri-item:hover{border-color:var(--ochre)}
.tri-item .no{
  font-family:'Lora',serif;font-size:12px;letter-spacing:.2em;color:var(--ink-4);
  display:block;margin-bottom:16px;
}
.tri-item h3{
  font-size:var(--fs-h3);font-weight:400;letter-spacing:.08em;color:var(--ink-1);
  margin-bottom:var(--sp-2);
}
.tri-item p{font-size:var(--fs-sm);color:var(--ink-3);line-height:var(--lh-body)}

/* ══════ 通用分节 ══════ */
.sec{padding:var(--pad-sec) 0}
.sec-hd{margin-bottom:var(--hd-gap)}
.sec-hd .lb{
  font-family:'Lora',serif;font-size:12px;letter-spacing:.3em;
  color:var(--ink-4);text-transform:uppercase;display:block;margin-bottom:18px;
}
.sec-hd h2{
  font-size:var(--fs-h2);line-height:var(--lh-tight);
  font-weight:400;letter-spacing:var(--ls-title);color:var(--ink-1);
}
.sec-hd p{margin-top:var(--sp-4);font-size:var(--fs-lead);color:var(--ink-3);max-width:32em;line-height:var(--lh-loose)}

/* ══════ 身心财 · 三张无框 3D 卡 ══════ */
.triple{
  position:relative;
  display:flex;align-items:flex-end;justify-content:space-around;
  padding:clamp(40px,7vh,80px) 0 clamp(30px,5vh,60px);
  min-height:clamp(340px,46vh,460px);
}
.tp{
  flex:1;text-align:center;cursor:pointer;
  transition:opacity var(--dur-base) var(--ease);
  position:relative;
}
.tp .obj{
  margin:0 auto;
  display:flex;align-items:center;justify-content:center;
  transition:transform var(--dur-slow) var(--ease);
}
.tp .obj svg{width:100%;height:100%;display:block}
.tp:nth-child(1) .obj{width:clamp(110px,15vw,160px);height:clamp(110px,15vw,160px)}
.tp:nth-child(2) .obj{width:clamp(140px,19vw,200px);height:clamp(140px,19vw,200px)}
.tp:nth-child(3) .obj{width:clamp(110px,15vw,160px);height:clamp(110px,15vw,160px)}

.tp .t{
  margin-top:26px;font-size:clamp(22px,2.6vw,30px);
  letter-spacing:.24em;color:var(--ink-1);font-weight:400;
}
.tp .s{
  margin-top:8px;font-size:13px;letter-spacing:.12em;color:var(--ink-4);
}
.tp.off{opacity:.3}
.tp:hover .obj{transform:translateY(-8px) scale(1.04)}

.tp .badge{
  display:inline-block;margin-top:10px;
  font-size:12px;letter-spacing:.16em;color:var(--ink-3);
  border:1px solid rgba(28,27,24,.22);padding:3px 12px;border-radius:1px;
}

/* ══════ 诊断 · 答题 ══════ */
.quiz{padding:clamp(32px,5vh,56px) 0 var(--pad-page-bottom);min-height:100vh}
.quiz-top{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:40px;font-size:13px;color:var(--ink-4);letter-spacing:.1em;
}
.quiz-bar{height:2px;background:rgba(28,27,24,.08);margin-bottom:var(--sp-8)}
.quiz-bar i{display:block;height:100%;background:var(--ink-2);width:0;transition:width var(--dur-slow) var(--ease)}
.q-txt{
  font-size:var(--fs-h2);line-height:1.5;
  color:var(--ink-1);letter-spacing:.04em;
  margin-bottom:var(--sp-7);max-width:22em;
}
.opts{display:flex;flex-direction:column;gap:var(--sp-3);max-width:640px}
.opt{
  padding:18px 24px;border:var(--hair-2);border-radius:1px;
  font-size:var(--fs-body);min-height:56px;color:var(--ink-2);text-align:left;
  transition:all var(--dur-fast) var(--ease);
  display:flex;align-items:center;gap:16px;
}
.opt:hover{border-color:var(--ink-3);background:var(--paper-2)}
.opt .k{
  font-family:'Lora',serif;font-size:13px;color:var(--ink-4);
  width:18px;flex:0 0 auto;
}
.opt.sel{border-color:var(--ink-1);background:var(--paper-2)}

/* ══════ 结果 ══════ */
.res-hd{
  padding:var(--pad-page-top) 0 clamp(32px,4.6vh,48px);
  border-bottom:var(--hair);
}
.res-hd .lb{font-size:var(--fs-label);letter-spacing:var(--ls-label);color:var(--ink-4);margin-bottom:var(--sp-4)}
.res-hd h1{
  font-size:clamp(34px,5vw,56px);letter-spacing:.14em;
  color:var(--ink-1);font-weight:400;line-height:var(--lh-tight);
}
.res-hd .sub{
  margin-top:var(--sp-3);font-size:var(--fs-sm);color:var(--ink-3);letter-spacing:.1em;
}
.res-hd .sub b{color:var(--ink-2);font-weight:400}

.res-body{padding:var(--pad-sec) 0}
.res-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-col)}
.res-col h3{
  font-size:var(--fs-label);letter-spacing:var(--ls-label);color:var(--ink-4);
  font-weight:400;margin-bottom:var(--sp-5);padding-bottom:var(--sp-3);
  border-bottom:var(--hair-2);
}
.res-col p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-2)}
.res-col .kv{margin-top:var(--sp-5)}
.res-col .kv div{
  display:flex;gap:var(--sp-3);padding:9px 0;font-size:var(--fs-sm);
  border-bottom:var(--hair);
}
.res-col .kv span:first-child{color:var(--ink-4);flex:0 0 72px}

/* 配方卡 */
.rx-list{display:flex;flex-direction:column;gap:var(--sp-3)}
.rx{
  border:var(--hair-2);padding:var(--sp-5);border-radius:1px;
  transition:all var(--dur-base) var(--ease);cursor:pointer;
  background:var(--paper-2);
}
.rx:hover{border-color:var(--ochre);transform:translateY(-2px)}
.rx .h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.rx .nm{font-size:var(--fs-h3);letter-spacing:.08em;color:var(--ink-1)}
.rx .tag{font-size:12px;color:var(--ink-4);letter-spacing:.1em}
.rx .ds{font-size:var(--fs-sm);color:var(--ink-3);line-height:var(--lh-body)}
.rx .go{margin-top:var(--sp-3);font-size:var(--fs-xs);color:var(--ink-2);letter-spacing:.1em}

/* ══════ 配方详情 ══════ */
.rx-detail{padding:clamp(24px,3.4vh,40px) 0 var(--pad-page-bottom)}
/* ── 左右等高布局 ── */
.rx-top{
  display:grid;grid-template-columns:1fr 1fr;
  gap:var(--gap-col);
  align-items:stretch;          /* ★ 两栏等高 */
}

/* 左：产品图（无框，直接铺） */
.rx-vis{
  width:100%;height:100%;
  object-fit:contain;
  display:block;
  transition:transform 1s cubic-bezier(.16,1,.3,1);
}
.rx-vis:hover{transform:scale(1.02)}

/* 右：文字区（底纹 + 横线分隔） */
.rx-info{
  position:relative;
  padding:var(--sp-6) var(--sp-6);
  background:var(--paper-2);
  border:1px solid rgba(28,27,24,.08);
  border-radius:1px;
  overflow:hidden;
  display:flex;flex-direction:column;
}
.rx-info-bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:.5;pointer-events:none;
  transition:opacity .9s cubic-bezier(.16,1,.3,1);
}
.rx-info:hover .rx-info-bg{opacity:.62}
.rx-info-inner{position:relative;z-index:2;display:flex;flex-direction:column;height:100%}

/* 标题 + 引言：加下横线 */
.rx-info h2{
  font-size:clamp(24px,2.9vw,34px);font-weight:400;
  letter-spacing:.08em;color:var(--ink-1);line-height:1.4;
  padding-bottom:16px;margin-bottom:16px;
  border-bottom:1px solid rgba(28,27,24,.14);
}
.rx-info p#rxIntro{
  font-size:15px;line-height:2;color:var(--ink-3);
  margin-bottom:20px;padding-bottom:20px;
  border-bottom:1px solid rgba(28,27,24,.10);
  max-width:30em;
}

/* 原料表：每行横线分隔 */
.rx-info .ing{flex:1}
.rx-info .ing li{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:15px 0;border-bottom:1px solid rgba(28,27,24,.10);
  font-size:16px;
}
.rx-info .ing li:last-child{border-bottom:none}
.rx-info .ing li .n{font-size:16px;letter-spacing:.02em;color:var(--ink-2)}
.rx-info .ing li .eff{
  display:block;font-size:12.5px;color:var(--ink-4);
  margin-top:4px;line-height:1.7;letter-spacing:.02em;
}
.rx-info .ing li .v{
  font-family:'Lora',serif;font-size:15px;
  color:var(--ink-1);white-space:nowrap;padding-left:18px;
}

/* 注意 + 按钮 */
.rx-info .caution{
  margin-top:20px;padding:16px 20px;
  border-left:2px solid var(--cinnabar);
  background:rgba(183,53,45,.035);
  font-size:13.5px;color:var(--ink-3);line-height:2;
}
.rx-info .acts{
  margin-top:24px;display:flex;gap:16px;align-items:center;
}
.rx-info .btn-main{padding:13px 32px;font-size:14.5px}

@media(max-width:900px){
  .rx-top{grid-template-columns:1fr;gap:20px;align-items:start}
  .rx-vis{aspect-ratio:4/3;height:auto}
  .rx-info{padding:22px 18px}
}



/* ══════ 工艺演示 ══════ */
.step-stage{
  border:1px solid rgba(28,27,24,.12);background:var(--paper-2);
  aspect-ratio:16/7;display:flex;align-items:center;justify-content:center;
  position:relative;border-radius:1px;overflow:hidden;
}
.step-stage .ph{text-align:center;color:var(--ink-4);font-size:14px;line-height:2.2}
.step-nav{display:flex;align-items:center;gap:16px;margin-top:20px}
.step-dots{display:flex;gap:10px;flex:1}
.sd{flex:1;height:2px;background:rgba(28,27,24,.10);cursor:pointer;transition:background .45s cubic-bezier(.16,1,.3,1)}
.sd.on{background:var(--cinnabar);height:3px}
.sd.done{background:var(--ochre)}
.step-btns{display:flex;gap:10px}
.sb{
  padding:10px 22px;border:1px solid rgba(28,27,24,.18);border-radius:1px;
  font-size:14px;letter-spacing:.1em;color:var(--ink-2);
  transition:all .18s cubic-bezier(.16,1,.3,1);background:none;cursor:pointer;
}
.sb:hover:not(:disabled){border-color:var(--ink-1);background:var(--paper-2)}
.sb:disabled{opacity:.3;cursor:not-allowed}
.sb.primary{background:var(--ink-1);color:var(--paper-2);border-color:var(--ink-1)}
.sb.primary:hover{background:#000}
.step-list{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px}
.sl{padding-top:16px;border-top:1px solid rgba(28,27,24,.14);transition:border-color .45s cubic-bezier(.16,1,.3,1);cursor:pointer}
.sl.on{border-color:var(--cinnabar)}
.sl .n{font-family:'Lora',serif;font-size:12px;color:var(--ink-4);letter-spacing:.16em}
.sl .t{font-size:16px;color:var(--ink-1);margin-top:8px;letter-spacing:.06em}
.sl .d{font-size:13.5px;color:var(--ink-3);margin-top:6px;line-height:1.85}

/* ══════ 包装选择 ══════ */
.pk-top{display:grid;grid-template-columns:1.05fr 0.95fr;gap:clamp(30px,5vw,64px);align-items:start}
.pk-vis{
  border:1px solid rgba(28,27,24,.12);background:var(--paper-2);aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;border-radius:1px;
}
.pk-vis .ph{color:var(--ink-4);font-size:13px;text-align:center;line-height:2}
.pk-opts{display:flex;flex-direction:column;gap:12px;margin-top:26px}
.pk{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;border:1px solid rgba(28,27,24,.16);border-radius:1px;
  transition:all .18s cubic-bezier(.16,1,.3,1);cursor:pointer;
}
.pk:hover{border-color:var(--ink-3)}
.pk.on{border-color:var(--ink-1);background:var(--paper-2)}
.pk .l{display:flex;flex-direction:column;gap:3px}
.pk .l .n{font-size:16px;color:var(--ink-1);letter-spacing:.06em}
.pk .l .d{font-size:13px;color:var(--ink-4)}
.pk .p{font-family:'Lora',serif;font-size:15px;color:var(--ink-2)}

/* ══════ 下单 ══════ */
.order{padding:clamp(40px,6vh,70px) 0 110px}
.or-top{display:grid;grid-template-columns:0.85fr 1.15fr;gap:clamp(30px,5vw,64px);align-items:start}
.or-vis{
  border:1px solid rgba(28,27,24,.12);background:var(--paper-2);aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;border-radius:1px;
}
.or-vis .ph{color:var(--ink-4);font-size:13px;text-align:center;line-height:2}
.or-rows{border-top:1px solid rgba(28,27,24,.16)}
.or-row{display:flex;justify-content:space-between;padding:16px 0;border-bottom:1px solid rgba(28,27,24,.10);font-size:15.5px}
.or-row .k{color:var(--ink-4)}
.or-row .v{color:var(--ink-1)}
.or-total{display:flex;justify-content:space-between;align-items:baseline;padding:26px 0;border-bottom:1px solid rgba(28,27,24,.16)}
.or-total .k{font-size:14px;letter-spacing:.16em;color:var(--ink-4)}
.or-total .v{font-family:'Lora',serif;font-size:32px;color:var(--ink-1)}
.field{margin-top:26px}
.field label{display:block;font-size:13px;letter-spacing:.14em;color:var(--ink-4);margin-bottom:10px}
.field input{
  width:100%;padding:14px 16px;border:1px solid rgba(28,27,24,.16);border-radius:1px;
  background:var(--paper-2);font-family:inherit;font-size:15.5px;color:var(--ink-1);
  transition:border-color .18s cubic-bezier(.16,1,.3,1);
}
.field input:focus{outline:none;border-color:var(--ink-2)}
.or-note{
  margin-top:22px;padding:16px 20px;background:rgba(168,196,192,.12);
  border-left:2px solid var(--celadon);font-size:14px;color:var(--ink-3);line-height:1.95;
}

/* ══════ 页脚 ══════ */
.ft{padding:clamp(50px,8vh,90px) 0 40px;border-top:1px solid rgba(28,27,24,.10);background:var(--paper-3);margin-top:80px}
.ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(24px,4vw,60px);margin-bottom:50px}
.ft-brand .nm{font-size:19px;letter-spacing:.22em;color:var(--ink-1);margin-bottom:14px}
.ft-brand p{font-size:13.5px;color:var(--ink-3);line-height:2;max-width:16em}
.ft-col h4{font-size:12px;letter-spacing:.24em;color:var(--ink-4);font-weight:400;margin-bottom:18px}
.ft-col a{display:block;font-size:14px;color:var(--ink-3);padding:6px 0;transition:color .18s cubic-bezier(.16,1,.3,1)}
.ft-col a:hover{color:var(--ink-1)}
.ft-btm{padding-top:26px;border-top:1px solid rgba(28,27,24,.10);display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--ink-4);letter-spacing:.08em;flex-wrap:wrap;gap:12px}

/* ══════ 页面切换 ══════ */
.page{display:none}
.page.on{display:block;animation:fadeUp .9s cubic-bezier(.16,1,.3,1)}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ══════ 全局移动端 ══════ */
@media(max-width:900px){
  .nav{display:none}
  .tri-grid{grid-template-columns:1fr;gap:0}
  .triple{flex-direction:column;align-items:center;gap:56px;padding:50px 0}
  .tp{flex:0 0 auto;width:100%}
  .step-list{grid-template-columns:1fr 1fr}
  .ft-grid{grid-template-columns:1fr 1fr;gap:36px}
  .pk-top,.or-top,.res-grid{grid-template-columns:1fr}
  .opts{max-width:100%}
  .opt{padding:17px 20px;font-size:15px;min-height:52px}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ══════════════════════════════════════════════
   全站统一层（2026-11-02）
   ══════════════════════════════════════════════ */

/* ── 顶栏：完整 logo ── */
.hd{padding:16px 0}
.hd.scrolled{padding:11px 0}
.brand{display:flex;align-items:center}
.brand img{
  height:clamp(38px,4.4vh,46px);
  width:auto;display:block;
  object-fit:contain;
}

/* ── 页面标题条（统一：返回 + 面包屑） ── */
.page-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(24px,3.4vh,36px) 0 clamp(18px,2.4vh,26px);
  margin-bottom:clamp(20px,3vh,34px);
  border-bottom:1px solid rgba(28,27,24,.10);
  gap:20px;
}
.page-bar .wrap{width:100%;display:flex;align-items:center;justify-content:space-between}
.page-back{
  font-size:14px;letter-spacing:.08em;color:var(--ink-3);
  padding:8px 0;border:none;background:none;cursor:pointer;
  transition:color .18s cubic-bezier(.16,1,.3,1);
  display:inline-flex;align-items:center;gap:6px;
  white-space:nowrap;
}
.page-back:hover{color:var(--ink-1)}
.page-crumb{
  font-size:13px;letter-spacing:.18em;color:var(--ink-4);
  font-family:'Lora',serif;text-transform:uppercase;
  white-space:nowrap;
}

/* 页面主体统一上边距（避开固定顶栏） */
.page{padding-top:0}
#pg-rx, #pg-craft, #pg-pack, #pg-order{padding-top:clamp(72px,9vh,96px)}
#pg-quiz{padding-top:clamp(80px,10vh,104px)}
#pg-start{padding-top:clamp(78px,9.5vh,100px)}

/* ── 按钮统一 ── */
.btn-main{
  padding:14px 34px;font-size:15px;letter-spacing:.14em;
  background:var(--ink-1);color:var(--paper-2);
  border:1px solid var(--ink-1);border-radius:1px;
  transition:all .28s cubic-bezier(.16,1,.3,1);
}
.btn-main:hover{background:#000;border-color:#000;transform:translateY(-1px)}
.btn-ghost{
  font-size:14px;letter-spacing:.08em;color:var(--ink-3);
  border-bottom:1px solid var(--ochre);padding-bottom:3px;
  transition:color .18s cubic-bezier(.16,1,.3,1);
}
.btn-ghost:hover{color:var(--ink-1)}

/* 右对齐按钮组 */
.acts-right{display:flex;justify-content:flex-end;margin-top:auto;padding-top:24px}

/* ── 各页按钮位置统一（底部右对齐） ── */
#pg-craft .acts, #pg-pack .acts, #pg-order .acts{
  display:flex;justify-content:flex-end;
  margin-top:clamp(36px,5vh,52px);
}
#pg-craft .acts{gap:16px}

/* ── 页脚统一 ── */
.ft{margin-top:clamp(70px,10vh,110px)}

/* ── 移动端 ── */
@media(max-width:900px){
  .brand img{height:34px}
  .page-bar{padding:20px 0 14px;margin-bottom:18px}
  .page-back{font-size:13px}
  .page-crumb{font-size:11.5px;letter-spacing:.14em}
  #pg-craft .acts, #pg-pack .acts, #pg-order .acts{justify-content:stretch}
  #pg-craft .acts .btn-main, #pg-pack .acts .btn-main, #pg-order .acts .btn-main{width:100%;text-align:center}
}

/* ══════ 配方页：压缩右侧，保证按钮在首屏内 ══════ */
.rx-info h2{font-size:clamp(22px,2.5vw,28px);padding-bottom:12px;margin-bottom:12px}
.rx-info p#rxIntro{font-size:14.5px;line-height:1.9;margin-bottom:14px;padding-bottom:14px}
.rx-info .ing li{padding:11px 0}
.rx-info .ing li .n{font-size:15.5px}
.rx-info .ing li .eff{font-size:12px;margin-top:3px;line-height:1.6}
.rx-info .ing li .v{font-size:14.5px}
.rx-info .caution{margin-top:16px;padding:13px 16px;font-size:13px;line-height:1.85}
.rx-info .acts-right{padding-top:18px;margin-top:0}
.rx-info .btn-main{padding:12px 30px;font-size:14px}

/* 左侧图：限制高度，不撑爆 */
.rx-vis{max-height:min(78vh,720px);width:100%;object-fit:contain;justify-self:center}
.rx-top{align-items:center}

/* ══════════════════════════════════════════════
   工艺 / 包装 / 下单 页排版优化（2026-11-02）
   ══════════════════════════════════════════════ */

/* ── 通用：辅助文字加深 ── */
.step-stage .ph{color:var(--ink-3)}
.pk-vis .ph,.or-vis .ph{color:var(--ink-3);font-size:13.5px}
.lb,.lb2{color:var(--ink-3)!important}

/* ── 工艺页 ── */
#pg-craft .sec-hd{margin-bottom:clamp(22px,3vh,32px)}
.step-stage{aspect-ratio:16/6.2;margin-bottom:0}
.step-nav{margin-top:14px}
.step-list{margin-top:clamp(28px,4vh,44px)}
.sl{padding-top:13px}
.sl .d{font-size:13px;line-height:1.75}
#pg-craft .acts{margin-top:clamp(28px,4vh,40px)!important}

/* ── 包装页：左右收窄，减少空白 ── */
.pk-top{grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,44px);align-items:stretch}
.pk-vis{aspect-ratio:auto;min-height:clamp(380px,52vh,520px)}
.pk-opts{gap:10px;margin-top:20px}
.pk{padding:16px 20px}
.pk .p{min-width:52px;text-align:right}
#pg-pack .acts{margin-top:clamp(26px,4vh,38px)!important}

/* ── 下单页 ── */
.or-top{grid-template-columns:0.92fr 1.08fr;gap:clamp(24px,3.4vw,44px);align-items:stretch}
.or-vis{aspect-ratio:auto;min-height:clamp(360px,50vh,500px)}
.or-row{padding:14px 0}
.or-total{padding:20px 0}
.or-total .v{font-size:28px}
.field{margin-top:20px}
.field input{padding:12px 15px;font-size:15px}
.or-note{margin-top:18px;padding:14px 18px;font-size:13.5px;line-height:1.9}
#pg-order .acts{margin-top:clamp(24px,3.6vh,34px)!important}

/* ── 结果页 ── */
#pg-res .res-hd{padding:clamp(40px,6vh,70px) 0 clamp(30px,4vh,46px)}
.res-hd h1{font-size:clamp(36px,5vw,56px)}
#pg-res .res-body{padding:clamp(32px,5vh,54px) 0}
.res-grid{gap:clamp(28px,4vw,56px)}
.res-col h3{margin-bottom:18px;padding-bottom:10px}
.res-col p{font-size:15.5px;line-height:2}
.rx-list{gap:13px}
.rx{padding:20px 22px}
.rx .nm{font-size:18px}
.rx .ds{font-size:14px;line-height:1.9}
.rx .go{margin-top:11px;font-size:13px}

@media(max-width:900px){
  .pk-top,.or-top{grid-template-columns:1fr}
  .pk-vis,.or-vis{min-height:280px;aspect-ratio:4/3}
  .step-stage{aspect-ratio:4/3}
}

/* ── 细节：对比度与引导（2026-11-02 收尾） ── */
.pk{border-color:rgba(28,27,24,.20)}
.pk .l .n{color:var(--ink-1)}
.pk .l .d{color:var(--ink-3)}
.pk .p{color:var(--ink-2);font-weight:400}
.pk.on{border-color:var(--ink-1);border-left:2px solid var(--cinnabar);padding-left:19px}

.pk-vis .ph,.or-vis .ph{font-size:13.5px;line-height:2.1;color:var(--ink-3)}
.pk-vis .ph span,.or-vis .ph span{font-size:12px;color:var(--ink-4)}

.page-crumb{font-size:13.5px;color:var(--ink-3)}
.page-back{color:var(--ink-2)}

#pg-pack .btn-main,#pg-order .btn-main{padding:15px 38px;font-size:15px}

/* ══════ 按钮改描边（去黑色实心） ══════ */
.btn-main{
  background:transparent;
  color:var(--ink-1);
  border:1px solid var(--ink-1);
  padding:14px 36px;
}
.btn-main:hover{
  background:var(--ink-1);
  color:var(--paper-2);
  transform:translateY(-1px);
}
.btn-main .arw{transition:transform .45s cubic-bezier(.16,1,.3,1)}
.btn-main:hover .arw{transform:translateX(4px)}

/* 主 CTA 强调版（只给真正的关键动作留一个） */
.btn-main.solid{
  background:var(--ink-1);color:var(--paper-2);border-color:var(--ink-1);
}
.btn-main.solid:hover{background:#000;border-color:#000}

/* 首页 hero 里保持实心（深色背景需要） */
.hero .btn-main{
  background:var(--ink-1);color:var(--paper-2);border-color:var(--ink-1);
}
.hero .btn-main:hover{background:#000}

/* ══════ 首屏可读性修正 ══════ */
/* 遮罩：整体加深，顶部再加一层，保证导航可读 */
.hero-veil{
  background:
    linear-gradient(to bottom, rgba(16,22,14,.62) 0%, rgba(16,22,14,.12) 26%, rgba(16,22,14,0) 42%),
    radial-gradient(ellipse at 50% 46%, rgba(16,22,14,.52) 0%, rgba(16,22,14,.34) 60%, rgba(16,22,14,.22) 100%);
}

/* 首屏里的导航：白字 + 投影 */
/* 导航栏：浅色背景，不加任何阴影（2026-11-03） */
.hd:not(.scrolled) .nav a{color:var(--ink-2)}
.hd:not(.scrolled) .nav a:hover{color:var(--ink-1)}
.hd:not(.scrolled) .nav a::after{background:var(--ochre-deep)}
.hd:not(.scrolled) .brand img{filter:none}

/* 标题/副标题：浅色背景，不加阴影（2026-11-03） */
.hero h1{text-shadow:none}
.hero .slogan{text-shadow:none}

/* 身心财三入口：浅色背景（2026-11-03） */
.he-k{text-shadow:none;color:var(--ink-4)}
.he-n{color:var(--ink-1);text-shadow:none}
.he-d{color:var(--ink-3);text-shadow:none}
.he{background:var(--paper-2)}

/* ══════════════════════════════════════════════
   首屏：单一入口 + 铺垫（2026-11-02）
   ══════════════════════════════════════════════ */

/* ── 唯一主按钮：横排（标题 / 说明 / 箭头），整体居中 ── */
.hero-cta{margin-top:clamp(36px,5.4vh,52px);display:flex;justify-content:center;width:100%}
.hero-btn{
  display:inline-flex;align-items:center;gap:clamp(16px,2.4vw,26px);
  padding:18px clamp(26px,3.2vw,40px);
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.55);
  border-radius:1px;cursor:pointer;
  transition:all .5s cubic-bezier(.16,1,.3,1);
  text-align:left;
  position:relative;overflow:hidden;
}
.hero-btn::before{
  content:'';position:absolute;inset:0;
  background:rgba(255,255,255,.92);
  transform:scaleX(0);transform-origin:left;
  transition:transform .55s cubic-bezier(.16,1,.3,1);
  z-index:0;
}
.hero-btn:hover::before{transform:scaleX(1)}
.hero-btn>*{position:relative;z-index:1;transition:color .45s cubic-bezier(.16,1,.3,1)}
.hero-btn .hb-t{
  font-size:clamp(17px,2vw,20px);letter-spacing:.2em;
  color:#fff;white-space:nowrap;
}
.hero-btn .hb-s{
  font-size:12.5px;letter-spacing:.1em;
  color:rgba(255,255,255,.72);white-space:nowrap;
  padding-left:clamp(16px,2.4vw,26px);
  border-left:1px solid rgba(255,255,255,.32);
}
.hero-btn .hb-a{
  font-size:16px;color:rgba(255,255,255,.85);
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.hero-btn:hover .hb-t,.hero-btn:hover .hb-a{color:var(--ink-1)}
.hero-btn:hover .hb-s{color:var(--ink-3);border-left-color:rgba(28,27,24,.25)}
.hero-btn:hover .hb-a{transform:translateX(6px)}

/* ── 滚动提示 ── */
.hero-scroll{
  position:absolute;left:50%;bottom:clamp(28px,4vh,44px);
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  z-index:3;pointer-events:none;
}
.hs-line{
  width:1px;height:44px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.55));
  position:relative;overflow:hidden;
}
.hs-line::after{
  content:'';position:absolute;left:0;top:-44px;width:1px;height:20px;
  background:rgba(255,255,255,.95);
  animation:scrollDot 2.6s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes scrollDot{
  0%{top:-24px;opacity:0}
  30%{opacity:1}
  100%{top:44px;opacity:0}
}
.hs-t{
  font-size:11px;letter-spacing:.28em;color:rgba(255,255,255,.55);
  writing-mode:vertical-rl;text-orientation:upright;
}

/* ── 首屏下方：三块铺垫（轻量） ── */
.hero-scroll + * , .tri{margin-top:0}

@media(max-width:900px){
  /* 移动端：按钮保持横排一行，宽度收在 320 以内并居中 */
  .hero-btn{
    flex-direction:row;align-items:center;justify-content:center;
    gap:12px;padding:16px 20px;width:auto;max-width:100%;
  }
  .hero-btn .hb-t{font-size:16px;letter-spacing:.16em}
  .hero-btn .hb-s{
    padding-left:14px;border-left:1px solid rgba(255,255,255,.32);
    border-top:none;padding-top:0;font-size:11.5px;letter-spacing:.06em;
  }
  .hero-btn .hb-a{position:static;transform:none;font-size:14px}
  /* 滚动提示保留，固定在首屏底部中央 */
  .hero-scroll{bottom:24px}
  .hs-line{height:36px}
  .hs-t{font-size:11px;letter-spacing:.24em}
}

/* ══════ 铺垫区样式 ══════ */
.prep{padding:clamp(70px,11vh,120px) 0;border-top:1px solid rgba(28,27,24,.08)}
.prep-hd{margin-bottom:clamp(40px,6vh,64px)}
.prep-hd .lb{
  font-family:'Lora',serif;font-size:12px;letter-spacing:.3em;
  color:var(--ink-4);text-transform:uppercase;display:block;margin-bottom:16px;
}
.prep-hd h2{
  font-size:clamp(26px,3.4vw,40px);font-weight:400;
  letter-spacing:.05em;color:var(--ink-1);line-height:1.5;
}
.prep-hd p{margin-top:16px;font-size:16px;color:var(--ink-3);line-height:2.05;max-width:32em}

/* 三步骤 */
.prep-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px)}
.ps{padding-top:22px;border-top:1px solid rgba(28,27,24,.16);position:relative}
.ps-n{
  font-size:13px;letter-spacing:.2em;color:var(--ochre);
  display:block;margin-bottom:14px;
}
.ps h3{font-size:19px;font-weight:400;letter-spacing:.06em;color:var(--ink-1);margin-bottom:10px}
.ps p{font-size:14.5px;color:var(--ink-3);line-height:2}

.prep-free{
  margin-top:clamp(40px,6vh,60px);text-align:center;
  font-size:13.5px;letter-spacing:.16em;color:var(--ink-4);
}

/* 三条线 */
.lines{border-top:1px solid rgba(28,27,24,.10)}
.ln{
  display:flex;align-items:flex-start;gap:clamp(24px,4vw,56px);
  padding:clamp(24px,3.6vh,36px) 0;
  border-bottom:1px solid rgba(28,27,24,.10);
  transition:padding-left .5s cubic-bezier(.16,1,.3,1);
}
.ln:hover{padding-left:10px}
.ln-k{
  flex:0 0 auto;width:clamp(56px,7vw,80px);
  font-size:clamp(30px,3.6vw,42px);color:var(--ink-1);
  letter-spacing:.1em;line-height:1;font-weight:400;
}
.ln:nth-child(1) .ln-k{color:#7A8B6F}
.ln:nth-child(2) .ln-k{color:#B08A94}
.ln:nth-child(3) .ln-k{color:#9A8A72}
.ln-b{flex:1;padding-top:4px}
.ln-b h3{font-size:18px;font-weight:400;letter-spacing:.06em;color:var(--ink-1);margin-bottom:8px}
.ln-b p{font-size:14.5px;color:var(--ink-3);line-height:2;max-width:34em}
.ln-m{
  display:inline-block;margin-top:12px;
  font-size:12px;letter-spacing:.14em;color:var(--ink-4);
}

.prep-cta{margin-top:clamp(44px,6.5vh,64px);text-align:center}

@media(max-width:900px){
  .prep-steps{grid-template-columns:1fr;gap:28px}
  .ln{flex-direction:column;gap:10px}
  .ln-k{font-size:26px;width:auto}
}

/* ── 首屏按钮与滚动提示增强 ── */
.hero-btn{
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.72);
  box-shadow:0 8px 32px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.18);
}
.hero-btn .hb-t{font-weight:500}
.hero-btn:hover{
  box-shadow:0 12px 40px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.5);
  border-color:rgba(255,255,255,.9);
}
/* 呼吸微光，暗示可点 */
.hero-btn::after{
  content:'';position:absolute;inset:-1px;border-radius:1px;
  border:1px solid rgba(255,255,255,.42);
  animation:btnBreath 3.4s cubic-bezier(.4,0,.2,1) infinite;
  pointer-events:none;z-index:0;
}
@keyframes btnBreath{
  0%,100%{opacity:.5;transform:scale(1)}
  50%{opacity:0;transform:scale(1.035)}
}

/* 滚动提示更明显 */
.hs-t{font-size:12px;letter-spacing:.3em;color:rgba(255,255,255,.72)}
.hs-line{height:52px;background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.75))}

/* ══════════════════════════════════════════════
   收尾：prep / step / pk / or / ft 全部改用 token
   ══════════════════════════════════════════════ */

/* ── 铺垫区 ── */
.prep{padding:var(--pad-sec) 0;border-top:var(--hair)}
.prep-hd{margin-bottom:var(--hd-gap)}
.prep-hd .lb{font-family:'Lora',serif;font-size:var(--fs-label);letter-spacing:var(--ls-label);color:var(--ink-4);text-transform:uppercase;display:block;margin-bottom:var(--sp-4)}
.prep-hd h2{font-size:var(--fs-h2);font-weight:400;letter-spacing:var(--ls-title);color:var(--ink-1);line-height:var(--lh-tight)}
.prep-hd p{margin-top:var(--sp-4);font-size:var(--fs-body);color:var(--ink-3);line-height:var(--lh-loose);max-width:32em}

.prep-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-col)}
.ps{padding-top:var(--sp-5);border-top:1px solid rgba(28,27,24,.16)}
.ps-n{font-size:var(--fs-xs);letter-spacing:.2em;color:var(--ochre);display:block;margin-bottom:var(--sp-3)}
.ps h3{font-size:var(--fs-h3);font-weight:400;letter-spacing:var(--ls-title);color:var(--ink-1);margin-bottom:var(--sp-2)}
.ps p{font-size:var(--fs-sm);color:var(--ink-3);line-height:var(--lh-body)}
.prep-free{margin-top:var(--sp-7);text-align:center;font-size:var(--fs-xs);letter-spacing:.16em;color:var(--ink-4)}

/* ── 三条线 ── */
.lines{border-top:var(--hair)}
.ln{display:flex;align-items:flex-start;gap:var(--gap-col);padding:var(--sp-6) 0;border-bottom:var(--hair);transition:padding-left var(--dur-base) var(--ease)}
.ln:hover{padding-left:var(--sp-3)}
.ln-k{flex:0 0 auto;width:clamp(56px,7vw,80px);font-size:clamp(30px,3.6vw,42px);letter-spacing:.1em;line-height:1;font-weight:400}
.ln-b{flex:1;padding-top:var(--sp-1)}
.ln-b h3{font-size:var(--fs-h3);font-weight:400;letter-spacing:var(--ls-title);color:var(--ink-1);margin-bottom:var(--sp-2)}
.ln-b p{font-size:var(--fs-sm);color:var(--ink-3);line-height:var(--lh-loose);max-width:34em}
.ln-m{display:inline-block;margin-top:var(--sp-3);font-size:var(--fs-xs);letter-spacing:.14em;color:var(--ink-4)}
.prep-cta{margin-top:var(--sp-8);text-align:center}

/* ── 工艺页 ── */
#pg-craft .sec-hd{margin-bottom:var(--sp-5)}
.step-stage{aspect-ratio:16/6.2;margin-bottom:0}
.step-nav{margin-top:var(--sp-3)}
.step-list{margin-top:var(--sp-7);gap:var(--gap-card)}
.sl{padding-top:var(--sp-3);border-top:1px solid rgba(28,27,24,.14)}
.sl .n{font-family:'Lora',serif;font-size:var(--fs-label);color:var(--ink-4);letter-spacing:.16em}
.sl .t{font-size:var(--fs-body);color:var(--ink-1);margin-top:var(--sp-2);letter-spacing:var(--ls-title)}
.sl .d{font-size:var(--fs-xs);color:var(--ink-3);margin-top:var(--sp-1);line-height:var(--lh-body)}

/* ── 包装页 ── */
.pk-top{grid-template-columns:1fr 1fr;gap:var(--gap-col);align-items:stretch}
.pk-vis{aspect-ratio:auto;min-height:clamp(380px,52vh,520px)}
.pk-opts{gap:10px;margin-top:var(--sp-5)}
.pk{padding:var(--sp-4) var(--sp-5)}
.pk .l .n{font-size:var(--fs-body);letter-spacing:var(--ls-title)}
.pk .l .d{font-size:var(--fs-xs)}
.pk .p{font-family:'Lora',serif;font-size:var(--fs-sm);min-width:52px;text-align:right}

/* ── 下单页 ── */
.or-top{grid-template-columns:0.92fr 1.08fr;gap:var(--gap-col);align-items:stretch}
.or-vis{aspect-ratio:auto;min-height:clamp(360px,50vh,500px)}
.or-row{padding:var(--sp-3) 0;font-size:var(--fs-body)}
.or-total{padding:var(--sp-5) 0}
.or-total .k{font-size:var(--fs-sm);letter-spacing:.16em}
.or-total .v{font-family:'Lora',serif;font-size:28px}
.field{margin-top:var(--sp-5)}
.field label{font-size:var(--fs-xs);letter-spacing:.14em;margin-bottom:var(--sp-2)}
.field input{padding:var(--sp-3) var(--sp-4);font-size:var(--fs-body)}
.or-note{margin-top:var(--sp-4);padding:var(--sp-4) var(--sp-5);font-size:var(--fs-xs);line-height:var(--lh-body)}

/* ── 页脚 ── */
.ft{padding:var(--pad-sec) 0 var(--sp-6);border-top:var(--hair);background:var(--paper-3);margin-top:var(--pad-sec)}
.ft-grid{gap:var(--gap-col);margin-bottom:var(--sp-7)}
.ft-brand .nm{font-size:var(--fs-h3);letter-spacing:.22em;margin-bottom:var(--sp-3)}
.ft-brand p{font-size:var(--fs-xs);line-height:var(--lh-loose)}
.ft-col h4{font-size:var(--fs-label);letter-spacing:var(--ls-label);margin-bottom:var(--sp-4)}
.ft-col a{font-size:var(--fs-sm);padding:var(--sp-1) 0}
.ft-btm{padding-top:var(--sp-5);font-size:var(--fs-xs);letter-spacing:.08em}

/* ── 页面标题条 ── */
.page-bar{padding:var(--sp-6) 0 var(--sp-5);margin-bottom:var(--sp-6)}
.page-back{font-size:var(--fs-sm)}
.page-crumb{font-size:var(--fs-xs);letter-spacing:.16em}

/* ── 移动端收尾 ── */
@media(max-width:900px){
  /* 顶栏 logo 居中 */
  .hd-in{justify-content:center;position:relative}
  .hd .nav{display:none}
  .brand{margin:0 auto}

  /* hero 按钮：单行紧凑 */
  .hero-btn{
    flex-direction:row;align-items:center;justify-content:center;
    gap:12px;padding:16px 22px;width:100%;
  }
  .hero-btn .hb-t{font-size:16.5px;letter-spacing:.16em;font-weight:500}
  .hero-btn .hb-s{
    font-size:11.5px;padding-left:12px;
    border-left:1px solid rgba(255,255,255,.35);
    border-top:none;padding-top:0;
    color:rgba(255,255,255,.82);
  }
  .hero-btn .hb-a{position:static;transform:none;font-size:15px}

  /* 首屏高度收紧 */
  .hero{min-height:88vh;padding:100px 0 60px}
  .hero-in{max-width:100%}
  .hero-logo img{height:64px}
  .hero h1{font-size:clamp(26px,7.6vw,34px);line-height:1.38}
  .hero .slogan{font-size:13px;letter-spacing:.14em;margin-top:12px}
  .hero-cta{margin-top:32px}

  /* 铺垫区 */
  .prep{padding:var(--sp-8) 0}
  .prep-steps{grid-template-columns:1fr;gap:var(--sp-5)}
  .ln{flex-direction:column;gap:var(--sp-2)}
  .ln-k{font-size:26px;width:auto}
  .ln-b p{font-size:var(--fs-sm)}

  /* 产品网格 */
  .pd-grid{grid-template-columns:1fr;gap:var(--sp-6)}
  .pd-hero{padding:100px 0 var(--sp-6)}

  /* 产品详情 */
  .pdd-top{grid-template-columns:1fr;gap:var(--sp-5)}
  .pdd-vis{aspect-ratio:1}
  .pdd-acts{position:sticky;bottom:0;background:var(--paper);padding:var(--sp-3) 0;z-index:5}
  .pdd-price .v{font-size:26px}

  /* 配方页 */
  .rx-top{grid-template-columns:1fr;gap:var(--sp-5)}
  .rx-vis{aspect-ratio:4/3;height:auto;max-height:none}
  .rx-info{padding:var(--sp-5) var(--sp-4)}

  /* 其他 */
  .pk-top,.or-top,.res-grid{grid-template-columns:1fr}
  .pk-vis,.or-vis{min-height:260px;aspect-ratio:4/3}
  .step-stage{aspect-ratio:4/3}
  .step-list{grid-template-columns:1fr 1fr;gap:var(--sp-4)}
  .ft-grid{grid-template-columns:1fr 1fr;gap:var(--sp-6)}
}

/* ── 移动端最后微调 ── */
@media(max-width:900px){
  .hd .wrap.hd-in{padding:0 var(--gutter)}
  .brand img{height:36px}
  .hero-logo{margin:0 auto var(--sp-5)}
  .hero-logo img{height:60px}
  .hero h1{margin-top:var(--sp-3)}
  .hero-btn{
    background:rgba(255,255,255,.20);
    border-color:rgba(255,255,255,.85);
    box-shadow:0 6px 24px rgba(0,0,0,.28);
  }
}

/* ══════ 移动端首屏重构（去重叠） ══════ */
@media(max-width:900px){
  .hero{
    min-height:100vh;
    min-height:100svh;          /* 手机浏览器真实视口 */
    padding:88px 0 84px;        /* 给滚动提示留出底部空间 */
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .hero-in{
    display:flex;flex-direction:column;align-items:center;
    justify-content:center;text-align:center;
    width:100%;
  }

  /* 滚动提示：改为横排小字，固定在最底部，不与按钮冲突 */
  .hero-scroll{
    left:50%;bottom:20px;
    flex-direction:row;align-items:center;gap:8px;
  }
  .hs-line{
    width:26px;height:1px;
    background:linear-gradient(to right, transparent, rgba(255,255,255,.55));
  }
  .hs-line::after{display:none}
  .hs-t{
    writing-mode:horizontal-tb;text-orientation:initial;
    font-size:10.5px;letter-spacing:.22em;color:rgba(255,255,255,.55);
  }

  /* 按钮：两行结构，不再挤 */
  .hero-btn{
    flex-direction:column;align-items:center;gap:6px;
    padding:15px 26px;width:auto;min-width:220px;
    background:rgba(255,255,255,.18);
    border-color:rgba(255,255,255,.8);
  }
  .hero-btn .hb-t{font-size:16px;letter-spacing:.2em}
  .hero-btn .hb-s{
    font-size:11px;padding-left:0;border-left:none;
    color:rgba(255,255,255,.78);letter-spacing:.06em;
  }
  .hero-btn .hb-a{
    position:absolute;right:18px;top:50%;transform:translateY(-50%);
    font-size:14px;
  }

  /* 上移一点，给滚动提示腾位 */
  .hero-cta{margin-top:30px;margin-bottom:26px}
}

/* 超短屏（如 iPhone SE） */
@media(max-width:900px) and (max-height:680px){
  .hero{padding:76px 0 70px}
  .hero-logo img{height:50px}
  .hero h1{font-size:24px}
  .hero .slogan{font-size:12px;margin-top:8px}
  .hero-cta{margin-top:22px;margin-bottom:18px}
}

/* ── 移动端首屏：精确排布，彻底去重叠 ── */
@media(max-width:900px){
  .hero{
    min-height:100svh;
    padding:88px 0 96px;      /* 底部留 96px 给滚动提示 */
  }
  .hero-in{
    justify-content:flex-start;
    padding-top:8vh;
  }
  .hero-logo img{height:56px}
  .hero h1{font-size:clamp(25px,7.2vw,32px);line-height:1.42;margin-top:14px}
  .hero .slogan{font-size:12.5px;letter-spacing:.14em;margin-top:10px}
  .hero-cta{margin-top:34px;margin-bottom:0}

  /* 滚动提示：贴底固定，高度可控 */
  .hero-scroll{
    position:absolute;
    left:50%;transform:translateX(-50%);
    bottom:28px;
    flex-direction:row;align-items:center;gap:8px;
  }
}


/* ── 移动端首屏：flex 自动分配空间（最终版） ── */
@media(max-width:900px){
  .hero{
    min-height:100svh;
    padding:88px 0 0;
    display:flex;
    align-items:stretch;
  }
  .hero-in{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    width:100%;
    padding-bottom:0;
  }
  .hero-logo img{height:56px}
  .hero h1{font-size:clamp(25px,7.2vw,32px);line-height:1.42;margin-top:14px}
  .hero .slogan{font-size:12.5px;letter-spacing:.14em;margin-top:10px}
  .hero-cta{margin-top:32px}

  /* 关键：滚动提示用 margin-top:auto 自动推到最底，永不上浮 */
  .hero-scroll{
    position:static;
    transform:none;
    margin-top:auto;
    margin-bottom:26px;
    flex-direction:row;
    align-items:center;
    gap:8px;
  }
  .hs-line{width:24px;height:1px}
  .hs-line::after{display:none}
  .hs-t{writing-mode:horizontal-tb;font-size:10.5px;letter-spacing:.22em}
}

/* ── 移动端对比度终极修正 ── */
@media(max-width:900px){
  /* 遮罩更深，保证所有文字可读 */
  .hero-veil{
    background:
      radial-gradient(ellipse at 50% 42%, rgba(12,18,10,.46) 0%, rgba(12,18,10,.52) 45%, rgba(12,18,10,.70) 100%),
      linear-gradient(to bottom, rgba(12,18,10,.42) 0%, rgba(12,18,10,.20) 30%, rgba(12,18,10,.42) 100%);
  }
  /* logo 加投影 */
  .hero-logo img{
  }
  /* 文字全部加强 */
  .hero h1{text-shadow:none}
  .hero .slogan{color:var(--ink-3);text-shadow:none}
  /* 按钮 */
  .hero-btn{
    background:rgba(255,255,255,.22);
    border:1px solid rgba(255,255,255,.9);
    box-shadow:0 6px 26px rgba(0,0,0,.42);
  }
  .hero-btn .hb-t{color:var(--paper-2)}
  .hero-btn .hb-s{color:rgba(251,249,244,.86)}
  .hero-btn .hb-a{color:#fff}
  /* 滚动提示 */
  .hs-t{color:rgba(255,255,255,.85);font-weight:400}
  .hs-line{background:linear-gradient(to right, transparent, rgba(255,255,255,.75))}
}

/* ══════════════════════════════════════════════
   全站视觉审查修正（2026-11-02 最终）
   ══════════════════════════════════════════════ */

/* ── ① 身心财页：留白收紧 + 文字加深 ── */
#pg-start{padding-top:clamp(80px,9vh,100px)!important}
#pg-start .start-hdh{padding-top:0!important;margin-bottom:var(--sp-6)!important}
#pg-start .triple{
  padding:var(--sp-6) 0 var(--sp-9)!important;
  min-height:auto!important;
}
.tp .s{color:var(--ink-3);font-size:var(--fs-sm)}
.tp .t{font-size:clamp(24px,2.8vw,32px)}

/* ── ② 结果页：行距与间距 ── */
.res-col .kv div{
  padding:var(--sp-3) 0;
  line-height:var(--lh-loose);
}
.res-col .kv span:first-child{flex:0 0 84px;color:var(--ink-4)}
.rx .go{margin-top:var(--sp-4);color:var(--ink-2)}

/* ── ③ 下单页：左窄右宽 + 压缩空白 ── */
.or-top{grid-template-columns:0.78fr 1.22fr!important;gap:var(--gap-col)!important}
.or-vis{min-height:clamp(320px,44vh,440px)!important}
#pg-order{padding-top:clamp(80px,9vh,100px)!important}
#pg-order .page-bar{margin-bottom:var(--sp-6)}
.or-note{
  background:rgba(168,196,192,.16);
  border-left:2px solid var(--celadon);
  color:var(--ink-2);
}
#pg-order .acts{margin-top:var(--sp-6)!important}

/* ── ④ 导航与可点击文字统一加深 ── */
.nav a{color:var(--ink-3)}
.nav a:hover{color:var(--ink-1)}
.page-back{color:var(--ink-2);font-weight:400}
.page-back:hover{color:var(--ink-1)}
.ft-col a{color:var(--ink-3)}
.ft-col a:hover{color:var(--ink-1)}

/* ── ⑤ 卡片可点击感（细边框加深） ── */
.rx{border-color:rgba(28,27,24,.14)}
.rx:hover{border-color:var(--ochre);background:var(--paper-2)}

/* ── ⑥ 顶部导航间距 ── */
.nav{gap:clamp(24px,2.8vw,38px)}

/* ══════ 身心财 · 3D 文物按钮 ══════ */
.triple3d{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,4vw,64px);
  padding:clamp(40px,7vh,80px) 0 clamp(60px,10vh,110px);
}
.t3d{
  display:flex;flex-direction:column;align-items:center;
  text-decoration:none;color:inherit;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.t3d-cv{
  position:relative;
  width:100%;aspect-ratio:1;
  max-width:clamp(180px,22vw,260px);
  margin:0 auto;
  cursor:grab;
}
.t3d-cv:active{cursor:grabbing}
.t3d-cv canvas{
  width:100%!important;height:100%!important;
  display:block;
}
/* 文物底光（营造陈列感） */
.t3d-cv::after{
  content:'';position:absolute;left:15%;right:15%;bottom:6%;height:16%;
  background:radial-gradient(ellipse at center, rgba(28,27,24,.14), transparent 70%);
  pointer-events:none;z-index:-1;
}

.t3d-lb{
  margin-top:clamp(16px,2.4vh,26px);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  text-align:center;
}
.t3d-lb .k{
  font-size:clamp(26px,3vw,34px);
  letter-spacing:.24em;color:var(--ink-1);
  font-weight:400;line-height:1.1;
  transition:letter-spacing .6s cubic-bezier(.16,1,.3,1);
}
.t3d:hover .t3d-lb .k{letter-spacing:.32em}
.t3d-lb .n{
  font-size:var(--fs-sm);letter-spacing:.12em;color:var(--ink-2);
  margin-top:4px;
}
.t3d-lb .d{
  font-size:var(--fs-xs);color:var(--ink-4);letter-spacing:.06em;
}

/* 三条线各自的字色（极淡的点缀） */
.t3d[data-k="shen"] .t3d-lb .k{color:#5C7A62}
.t3d[data-k="xin"]  .t3d-lb .k{color:#8C6E76}
.t3d[data-k="cai"]  .t3d-lb .k{color:#7E6A52}

@media(max-width:900px){
  .triple3d{grid-template-columns:1fr;gap:clamp(32px,6vh,56px);padding:var(--sp-7) 0 var(--sp-9)}
  .t3d-cv{max-width:190px}
}

/* ══════ 手机端导航修正（2026-11-03）══════ */
/* 覆盖上面 @media(max-width:900px) 里的 .nav{display:none} 与 .hd .nav{display:none} */
@media (max-width: 900px) {
  .hd .hd-in { justify-content: flex-start !important; padding-left: 16px !important; padding-right: 6px !important; gap: 0 !important; }
  .hd .brand { margin: 0 !important; flex: 0 0 auto !important; }
  .hd .nav {
    display: flex !important;
    overflow-x: auto !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin-left: 10px !important;
    gap: 0 !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    -webkit-overflow-scrolling: touch;
  }
  .hd .nav::-webkit-scrollbar { display: none !important; }
  .hd .nav a {
    flex: 0 0 auto !important;
    padding: 9px 13px !important;
    font-size: 12.5px !important;
    white-space: nowrap !important;
    letter-spacing: .04em !important;
    color: var(--ink-2) !important;
    opacity: .9;
  }
  .hd .nav a[style] { color: var(--ink-1) !important; opacity: 1; font-weight: 500; }
}

/* ══════ 品牌板块（并入首页）══════ */
.brand-why,.brand-no,.brand-name,.tool-entry{padding:var(--pad-sec) 0}
.brand-why{background:var(--paper-2)}
.brand-no{background:var(--paper)}
.brand-name{background:var(--paper-2)}
.tool-entry{background:var(--paper)}

.bw-hd,.bn-hd,.te-hd{margin-bottom:var(--sp-7)}
.bw-hd .lb,.bn-hd .lb,.te-hd .lb,.bname-in .lb{
  font-family:'Lora',serif;font-size:var(--fs-label);letter-spacing:var(--ls-label);
  color:var(--ink-4);text-transform:uppercase;display:block;margin-bottom:var(--sp-4)}
.bw-hd h2,.bn-hd h2,.te-hd h2{
  font-size:var(--fs-h2);font-weight:400;letter-spacing:var(--ls-title);
  color:var(--ink-1);line-height:var(--lh-tight)}
.bw-lead{margin-top:var(--sp-5);font-size:var(--fs-body);color:var(--ink-3);
  line-height:var(--lh-loose);max-width:34em}

.bw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-card);margin-top:var(--sp-7)}
.bw{padding-top:var(--sp-4);border-top:1px solid rgba(28,27,24,.14)}
.bw-n{display:block;font-size:var(--fs-body);color:var(--ink-1);letter-spacing:.04em;margin-bottom:var(--sp-3)}
.bw p{font-size:var(--fs-sm);color:var(--ink-3);line-height:var(--lh-loose)}

.bw-foot{margin-top:var(--sp-7);padding-top:var(--sp-5);border-top:1px solid rgba(28,27,24,.12);
  font-size:var(--fs-sm);color:var(--ink-3);line-height:var(--lh-loose)}
.bw-foot b{color:var(--ink-1);font-weight:500}

.bn-list{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-card)}
.bn{padding:var(--sp-5);background:var(--paper-2);border:1px solid rgba(28,27,24,.10);border-radius:1px}
.bn-n{font-family:'Lora',serif;font-size:var(--fs-xs);letter-spacing:.2em;color:var(--ochre);display:block;margin-bottom:var(--sp-3)}
.bn p{font-size:var(--fs-sm);color:var(--ink-2);line-height:2.0}

.bname-in{max-width:36em}
.bname-in h2{font-size:var(--fs-h2);font-weight:400;letter-spacing:var(--ls-title);color:var(--ink-1);margin-bottom:var(--sp-5)}
.bname-in p{font-size:var(--fs-body);color:var(--ink-3);line-height:var(--lh-loose);margin-bottom:var(--sp-5)}
.bname-q{font-size:var(--fs-body);color:var(--ink-2)!important;line-height:var(--lh-loose);
  padding-left:var(--sp-5);border-left:2px solid var(--ochre)}
.bname-q b{color:var(--ink-1);font-weight:500}

.te-hd p{margin-top:var(--sp-3);font-size:var(--fs-sm);color:var(--ink-3)}
.te-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-card)}
.te{
  display:flex;flex-direction:column;gap:6px;padding:var(--sp-5);
  background:var(--paper-2);border:1px solid rgba(28,27,24,.12);border-radius:1px;
  text-decoration:none;transition:all .35s var(--ease);
}
.te:hover{border-color:var(--ochre);transform:translateY(-3px);box-shadow:0 10px 28px rgba(28,27,24,.08)}
.te-k{font-size:10.5px;letter-spacing:.18em;color:var(--ink-4)}
.te-t{font-size:var(--fs-body);color:var(--ink-1);letter-spacing:.05em;margin-top:2px}
.te-d{font-size:var(--fs-xs);color:var(--ink-3);margin-top:auto;padding-top:var(--sp-3)}

@media(max-width:1100px){
  .te-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .bw-grid,.bn-list{grid-template-columns:1fr;gap:var(--sp-5)}
  .te-grid{grid-template-columns:repeat(2,1fr);gap:var(--sp-3)}
  .te{padding:var(--sp-4)}
  .brand-why,.brand-no,.brand-name,.tool-entry{padding:var(--sp-8) 0}
}

/* ══════ 三条路（身心财 · 平级三入口）══════ */
.three-paths{padding:var(--pad-sec) 0;background:var(--paper-2)}
.tp-hd{margin-bottom:var(--sp-7)}
.tp-hd .lb{font-family:'Lora',serif;font-size:var(--fs-label);letter-spacing:var(--ls-label);
  color:var(--ink-4);text-transform:uppercase;display:block;margin-bottom:var(--sp-4)}
.tp-hd h2{font-size:var(--fs-h2);font-weight:400;letter-spacing:var(--ls-title);
  color:var(--ink-1);line-height:var(--lh-tight)}
.tp-hd p{margin-top:var(--sp-3);font-size:var(--fs-sm);color:var(--ink-3);line-height:var(--lh-loose)}

.tp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
.tpath{
  display:flex;flex-direction:column;
  padding:var(--sp-6);background:var(--paper);
  border:1px solid rgba(28,27,24,.14);border-radius:1px;
  text-decoration:none;transition:all .4s var(--ease);
}
.tpath:hover{border-color:var(--ochre);transform:translateY(-4px);box-shadow:0 14px 36px rgba(28,27,24,.10)}
.tpath-k{
  font-family:'Lora',serif;font-size:24px;color:var(--ochre);
  letter-spacing:.1em;display:block;margin-bottom:var(--sp-4);
  padding-bottom:var(--sp-3);border-bottom:1px solid rgba(28,27,24,.10);
}
.tpath h3{font-size:var(--fs-h3);font-weight:400;letter-spacing:.04em;color:var(--ink-1);margin-bottom:var(--sp-2)}
.tpath-d{font-size:var(--fs-sm);color:var(--ink-3);letter-spacing:.06em;margin-bottom:var(--sp-4)}
.tpath-x{font-size:var(--fs-sm);color:var(--ink-2);line-height:1.9;flex:1;margin-bottom:var(--sp-5);min-height:3.8em}
.tpath-m{display:flex;justify-content:space-between;align-items:center;
  padding-top:var(--sp-4);border-top:1px solid rgba(28,27,24,.16)}
.tpath-t{font-size:var(--fs-xs);color:var(--ink-4);letter-spacing:.06em}
.tpath-a{font-size:var(--fs-sm);color:var(--ink-1);letter-spacing:.06em}
.tpath:hover .tpath-a{color:var(--ochre)}
.tpath-more{display:block;margin-top:var(--sp-4);padding-top:var(--sp-3);font-size:11px;color:var(--ink-4);letter-spacing:.04em;border-top:1px dashed rgba(28,27,24,.10)}
.tp-note{margin-top:var(--sp-6);text-align:center;font-size:var(--fs-xs);color:var(--ink-4);letter-spacing:.06em}

@media(max-width:900px){
  .tp-grid{grid-template-columns:1fr;gap:var(--sp-4)}
  .tpath{padding:var(--sp-5)}
  .tpath-k{font-size:19px}
}

/* ══════ 下拉导航（测一测 / 工具箱 / 服务）══════ */
.nav-dd{position:relative;display:flex;align-items:center}
.nav-dd > a{cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.nav-dd > a .car{font-size:9px;opacity:.55;transition:transform .25s var(--ease)}
.nav-dd:hover > a .car{transform:rotate(180deg)}

.dd-menu{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(-6px);
  margin-top:14px;min-width:240px;padding:10px;
  background:rgba(251,249,244,.98);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(28,27,24,.12);border-radius:2px;
  box-shadow:0 20px 52px rgba(28,27,24,.20), 0 2px 8px rgba(28,27,24,.08);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:all .28s cubic-bezier(.16,1,.3,1);z-index:200;
}
.dd-menu::before{content:'';position:absolute;top:-16px;left:0;right:0;height:16px}
.nav-dd:hover .dd-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}

.dd-menu a{
  display:flex;flex-direction:column;gap:2px;
  padding:9px 13px;border-radius:1px;transition:background .18s;
}
.dd-menu a:hover{background:rgba(217,160,91,.12)}
.dd-menu a .t{font-size:13.5px;color:var(--ink-1);letter-spacing:.05em}
.dd-menu a .d{font-size:11.5px;color:var(--ink-3);letter-spacing:.02em}
.dd-sep{height:1px;background:rgba(28,27,24,.08);margin:7px 8px}

/* 手机端：下拉改为横向展开 */
@media(max-width:900px){
  .nav-dd{display:block}
  .dd-menu{
    position:fixed;left:0;right:0;top:56px;
    transform:translateY(-8px);min-width:0;width:100%;
    margin-top:0;border-radius:0;border-left:none;border-right:none;
    max-height:60vh;overflow-y:auto;
  }
  .dd-menu::before{display:none}
  .nav-dd:hover .dd-menu{transform:translateY(0)}
}

/* ══════ Hero（植物插画 · 干净留白版）══════ */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(ellipse 60% 50% at 50% 45%, #FDFCF8 0%, #F8F4EC 55%, #F2EDE2 100%);
  overflow:hidden;
  padding:100px 0 100px;
}

/* 植物插画环绕 */
.hero-plants{position:absolute;inset:0;pointer-events:none;z-index:1}
.hp{
  position:absolute;
  opacity:.30;
  filter:saturate(.72) blur(.2px);
  transition:opacity .8s var(--ease);
  user-select:none;
  -webkit-user-drag:none;
}
.hero:hover .hp{opacity:.38}

/* 手工定位：留出中心区域 */
.hp-1{width:26vw;max-width:380px;top:-6%;left:-8%;transform:rotate(-14deg)}          /* 迷迭香 左上 */
.hp-2{width:22vw;max-width:320px;top:2%;right:-7%;transform:rotate(12deg)}            /* 尤加利 右上 */
.hp-3{width:30vw;max-width:440px;bottom:-14%;left:-6%;transform:rotate(8deg)}         /* 薰衣草 左下 */
.hp-4{width:20vw;max-width:290px;bottom:4%;right:-4%;transform:rotate(-10deg)}        /* 佛手柑 右下 */
.hp-5{width:16vw;max-width:230px;top:38%;left:3%;transform:rotate(24deg);opacity:.16}  /* 雪松 左中 */
.hp-6{width:14vw;max-width:200px;top:34%;right:4%;transform:rotate(-18deg);opacity:.16}/* 洋甘菊 右中 */
.hp-7{width:18vw;max-width:260px;bottom:-10%;left:42%;transform:rotate(6deg);opacity:.14}/* 茉莉 底部中 */

/* 细颗粒质感 */
.hero-grain{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.42;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}

/* 中心内容 */
.hero-in{position:relative;z-index:5;text-align:center;max-width:760px}

/* Hero 上的导航：浅底用深字 */
.hd:not(.scrolled) .nav a{color:var(--ink-3)}
.hd:not(.scrolled) .nav a:hover{color:var(--ink-1)}
.hd:not(.scrolled) .brand img{opacity:.95}
.hero-logo{margin-bottom:40px}
.hero-logo img{height:52px;width:auto;opacity:.92}

.hero h1{
  font-size:clamp(34px,4.6vw,60px);
  line-height:1.42;font-weight:500;letter-spacing:.09em;
  color:var(--ink-1);
}
.hero h1 span{color:var(--ochre-deep);text-shadow:none}
.hero .slogan{
  margin-top:26px;font-size:14px;letter-spacing:.34em;
  color:var(--ink-3);text-transform:none;
}

.hero-cta{margin-top:52px;display:flex;justify-content:center}
.hero-btn{
  display:inline-flex;flex-direction:column;align-items:center;gap:6px;
  padding:20px 52px;border-radius:3px;
  background:var(--ink-btn);border:1px solid var(--ink-btn);
  color:var(--paper-2);cursor:pointer;font-family:inherit;
  transition:all .4s var(--ease);position:relative;overflow:hidden;
  box-shadow:0 4px 16px rgba(58,50,40,.18);
}
.hero-btn:hover{background:#2E2820;transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(58,50,40,.26)}
.hero-btn .hb-t{font-size:16.5px;letter-spacing:.16em;font-weight:500}
.hero-btn .hb-s{font-size:12px;letter-spacing:.10em;opacity:.86;margin-top:3px}
.hero-btn .hb-a{position:absolute;right:20px;top:50%;transform:translateY(-50%);opacity:0;transition:all .35s var(--ease);font-size:15px}
.hero-btn:hover .hb-a{opacity:.85;right:24px}

.hero-scroll{
  margin-top:64px;display:flex;flex-direction:column;align-items:center;gap:10px;
}
.hs-line{width:1px;height:46px;background:linear-gradient(to bottom,rgba(28,27,24,.30),transparent)}
.hs-t{font-size:10.5px;letter-spacing:.32em;color:var(--ink-4)}

/* 手机 */
@media(max-width:900px){
  .hero{min-height:88vh;padding:96px 0 60px}
  .hero-logo img{height:40px}
  .hero h1{font-size:32px;letter-spacing:.07em}
  .hero .slogan{font-size:12px;letter-spacing:.24em;margin-top:20px}
  .hero-cta{margin-top:36px}
  .hero-btn{padding:15px 32px;width:100%;max-width:300px}
  .hero-btn .hb-t{font-size:15px}
  .hp-1{width:52vw;top:-3%;left:-18%}
  .hp-2{width:44vw;top:2%;right:-16%}
  .hp-3{width:60vw;bottom:-12%;left:-16%}
  .hp-4{width:40vw;bottom:6%;right:-10%}
  .hp-5,.hp-6,.hp-7{display:none}
  .hp{opacity:.22}
  .hero-scroll{margin-top:40px}
}

/* 下拉菜单 · 主推标记 */
.dd-menu .hot{color:var(--cinnabar);font-size:11px;vertical-align:super;margin-left:2px;letter-spacing:0}

/* 页脚 · 联系方式 */
.ft-contact{display:flex;gap:40px;flex-wrap:wrap;padding:22px 0;border-top:1px solid rgba(28,27,24,.08);font-size:13px;color:var(--ink-3);letter-spacing:.03em}
.ft-contact b{color:var(--ink-2);font-weight:500;letter-spacing:.06em}
@media(max-width:640px){.ft-contact{flex-direction:column;gap:8px;font-size:12.5px}}


/* ═══════════════════════════════════════════
   按钮体系统一（2026-11-03）
   .btn-main = 主按钮（实心墨褐）
   .btn-line = 次按钮（描边）
   两个必须同高、同圆角、同字距
   ═══════════════════════════════════════════ */
.btn-main,
.btn-line{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:50px;
  padding:0 34px;
  font-family:inherit;
  font-size:14.5px;
  letter-spacing:.10em;
  line-height:1;
  border-radius:2px;
  cursor:pointer;
  text-decoration:none;
  transition:background .28s cubic-bezier(.16,1,.3,1),
             color .28s cubic-bezier(.16,1,.3,1),
             border-color .28s cubic-bezier(.16,1,.3,1),
             transform .28s cubic-bezier(.16,1,.3,1);
  white-space:nowrap;
}

/* 主按钮 */
.btn-main{
  background:var(--ink-btn);
  color:var(--paper-2);
  border:1px solid var(--ink-btn);
}
.btn-main:hover{
  background:#2E2820;
  border-color:#2E2820;
  color:var(--paper-2);
  transform:translateY(-1px);
}

/* 次按钮（描边） */
.btn-line{
  background:transparent;
  color:var(--ink-1);
  border:1px solid rgba(28,27,24,.22);
}
.btn-line:hover{
  background:rgba(28,27,24,.04);
  border-color:var(--ink-1);
  color:var(--ink-1);
  transform:translateY(-1px);
}

/* 深色背景上的按钮 */
.btn-main.on-dark{background:var(--paper-2);color:var(--ink-1);border-color:var(--paper-2)}
.btn-main.on-dark:hover{background:#fff;color:var(--ink-1)}
.btn-line.on-dark{color:var(--paper-2);border-color:rgba(251,249,244,.45);background:transparent}
.btn-line.on-dark:hover{background:rgba(251,249,244,.12);border-color:var(--paper-2)}

/* 按钮组：两个按钮之间固定间距 */
.btn-group,
.tina-acts,
.sv-hero-btns,
.svc-card .acts,
.fq-foot-btns,
.tcta-btns,
.sv-cta-btns{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
}

@media(max-width:640px){
  .btn-main,.btn-line{height:46px;padding:0 24px;font-size:14px;letter-spacing:.06em}
  .btn-group,.tina-acts,.sv-hero-btns,.sv-cta-btns,.tcta-btns{width:100%}
  .btn-group>.btn-main,.btn-group>.btn-line,
  .tina-acts>.btn-main,.tina-acts>.btn-line,
  .sv-hero-btns>.btn-main,.sv-hero-btns>.btn-line,
  .sv-cta-btns>.btn-main,.sv-cta-btns>.btn-line,
  .tcta-btns>.btn-main,.tcta-btns>.btn-line{flex:1;min-width:0;padding:0 16px}
}


/* ── 首页 Hero 主按钮：尺寸可大（两行），但样式语言与全站一致 ── */
.hero-btn{
  border-radius:2px;
  border-color:var(--ink-btn);
  box-shadow:0 4px 16px rgba(58,50,40,.18);
}
.hero-btn::before{
  background:#2E2820;   /* hover 时是墨褐加深，不是白底覆盖 */
}
.hero-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(58,50,40,.24);
}
/* hover 时文字保持浅色（原来会变深色，但底色也是深色 → 会看不见） */
.hero-btn:hover .hb-t,
.hero-btn:hover .hb-a{color:var(--paper-2)}
.hero-btn:hover .hb-s{color:rgba(251,249,244,.86);border-left-color:rgba(251,249,244,.32)}

@media(max-width:640px){
  .hero-btn{padding:15px 22px;gap:14px}
  .hero-btn .hb-t{font-size:16px;letter-spacing:.14em}
  .hero-btn .hb-s{font-size:11.5px;padding-left:14px}
}


/* ═══════════════════════════════════════════
   「往下看」修复（2026-11-03）
   原：position:absolute;bottom:44px
       → 与随内容下移的按钮重叠（实测重叠 137px）
   改：参与文档流，永远排在内容之后
   ═══════════════════════════════════════════ */
.hero .hero-scroll{
  position:static;
  left:auto;bottom:auto;
  transform:none;
  margin-top:clamp(40px,6vh,72px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  z-index:3;
  pointer-events:none;
  opacity:.75;
}

/* hero 内容用 column 布局，让「往下看」自然落在最后 */
.hero-in{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
}

/* 小屏：hero 不要撑满整屏，避免内容挤 */
@media (max-height:760px){
  .hero{padding:88px 0 72px}
  .hero .hero-scroll{margin-top:32px}
}
@media(max-width:640px){
  .hero .hero-scroll{margin-top:36px}
  .hs-line{height:32px}
}