/* ============================================================
   香满棠官网 · 公共样式（全站共享）
   ------------------------------------------------------------
   结构索引：
     1. 设计变量        2. 基础重置       3. 翻页骨架（deck）
     4. 顶部导航        5. 移动端菜单     6. 分页圆点（首页）
     7. 通用组件        8. 回到顶部       9. 轻页脚
    10. 品牌实力屏      11. 好味文案通用  12. 子页 Hero
    13. 门店海报墙      14. 响应式（导航/圆点/页脚/减动效）
   ------------------------------------------------------------
   页面差异：
     · 首页 deck 专属样式  → index.html <style>
     · 子页滚动流覆盖      → css/scroll-page.css（仅 4 个子页引入）
     · 各子页专属屏        → 各页 <style>
   ============================================================ */

/* ---------- 1. 设计变量 ---------- */
:root{
  --orange:#dd5d20;
  --orange-lite:#ff7a2e;
  --orange-deep:#b44716;
  --ember:#c94212;
  --gold:#f0a63c;
  --green:#318337;
  --green-bright:#3f9948;
  --green-dark:#24692c;
  --cream:#f5f0d2;
  --cream-2:#eddfae;
  --paper:#fff;
  --line:#dedaca;
  --ink:#241b12;
  --ink-soft:#676148;
  --dark:#24692c;
  --darker:#173d1c;
  --sh:100vh;                              /* 单屏高度，首页 JS 按窗口实时写入 */
  --ease-page:cubic-bezier(.22,1,.36,1);   /* 翻页缓动 */
  --ease-soft:cubic-bezier(.22,1,.36,1);   /* 悬浮/入场缓动 */
  --page-dur:1.2s;                         /* 翻页时长（与首页 JS 的 DUR 保持一致） */
}

/* ---------- 2. 基础重置 ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}     /* deck 锁滚动；子页由 scroll-page.css 解锁 */
body{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,"Segoe UI",sans-serif;
  background:var(--cream);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
::selection{background:var(--orange);color:#fff}

/* ---------- 3. 翻页骨架（deck 模式，首页使用） ---------- */
.deck{position:fixed;inset:0;overflow:hidden}
.track{
  position:absolute;top:0;left:0;width:100%;
  transform:translate3d(0,0,0);
  transition:transform var(--page-dur) var(--ease-page);
  will-change:transform;
}
.slide{position:relative;height:var(--sh);overflow:hidden;contain:layout paint}
/* 视差层：背景慢、内容快（--off 由 JS 写入：当前屏 0，上下屏 ±1） */
.pg-bg{
  position:absolute;inset:-8% 0;
  transform:translate3d(0,calc(var(--off,0) * -0.12 * var(--sh)),0);
  transition:transform var(--page-dur) var(--ease-page);
}
.pg-fg{
  position:relative;height:100%;z-index:2;
  transform:translate3d(0,calc(var(--off,0) * -0.4 * var(--sh)),0);
  transition:transform var(--page-dur) var(--ease-page);
}
/* 非当前屏压暗，翻页时形成明暗层次 */
.slide .shade{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:#241b12;opacity:.3;
  transition:opacity var(--page-dur) var(--ease-page);
}
.slide.light .shade{opacity:.18}
.slide.on .shade{opacity:0}
/* 元素级入场：当前屏逐个浮现（--d 为逐项延迟） */
.anim{
  opacity:0;transform:translate3d(0,20px,0);
  transition:opacity .6s ease var(--d,0s),transform .72s var(--ease-soft) var(--d,0s);
}
.slide.on .anim{opacity:1;transform:translate3d(0,0,0)}

/* ---------- 4. 顶部导航 ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;gap:24px;
  padding:0 clamp(18px,4vw,54px);height:72px;color:#fff;
  background:linear-gradient(to bottom,rgba(18,10,5,.72),rgba(18,10,5,.28) 70%,transparent);
  transition:background .5s,backdrop-filter .5s;
}
/* 滚离首屏后的实底毛玻璃态 */
.nav.solid{
  background:rgba(18,10,5,.82);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.brand{display:flex;align-items:baseline;gap:10px;flex-shrink:0}
.brand .zh{font-size:24px;font-weight:900;letter-spacing:2px}
.brand .zh em{font-style:normal;color:var(--orange-lite);font-size:.5em;vertical-align:super}
.brand .sub{font-size:11px;letter-spacing:6px;color:rgba(255,255,255,.7)}
.nav-menu{display:flex;gap:clamp(14px,2.4vw,34px);margin:0 auto}
.nav-menu a{
  position:relative;font-size:14.5px;letter-spacing:2px;
  color:rgba(255,255,255,.8);padding:6px 2px;white-space:nowrap;
  transition:color .3s;cursor:pointer;
}
.nav-menu a:hover{color:#fff}
/* 当前页高亮：首页用 .on，子页用 data-current */
.nav-menu a.on,
.nav-menu a[data-current]{color:#fff;font-weight:600}
.nav-menu a.on::after,
.nav-menu a[data-current]::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--orange-lite),var(--orange-deep));
}
.nav-tel{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;line-height:1.25}
.nav-tel .lab{font-size:10.5px;letter-spacing:2px;color:rgba(255,255,255,.6)}
.nav-tel .num{
  font-size:17px;font-weight:700;letter-spacing:.5px;
  font-variant-numeric:tabular-nums;transition:color .3s;
}
.nav-tel .num:hover{color:var(--orange-lite)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;margin-left:auto}
.burger span{width:22px;height:2px;background:#fff;border-radius:2px;transition:.3s}

/* ---------- 5. 移动端菜单（<=900px 展开） ---------- */
.m-menu{display:none}

/* ---------- 6. 分页圆点（首页 deck 使用，子页隐藏） ---------- */
.dots{
  position:fixed;right:clamp(14px,2.6vw,36px);top:50%;transform:translateY(-50%);z-index:55;
  display:flex;flex-direction:column;gap:13px;transition:opacity .5s;
}
.dots.hide{opacity:0;pointer-events:none}
.dots button{
  width:11px;height:11px;border-radius:7px;cursor:pointer;padding:0;
  border:1.5px solid rgba(255,255,255,.6);background:transparent;
  transition:all .5s var(--ease-soft);
}
.dots button:hover{background:rgba(255,255,255,.35)}
.dots button.on{
  height:30px;border-color:transparent;
  background:linear-gradient(180deg,var(--orange-lite),var(--orange-deep));
  box-shadow:0 6px 18px rgba(200,70,15,.5);
}
/* 浅色屏上的圆点改深色描边 */
.dots.dark button{border-color:rgba(36,27,18,.4)}
.dots.dark button:hover{background:rgba(36,27,18,.28)}
.dots.dark button.on{
  border-color:transparent;
  background:linear-gradient(180deg,var(--orange-lite),var(--orange-deep));
  box-shadow:0 6px 18px rgba(180,71,22,.34);
}

/* ---------- 7. 通用组件 ---------- */
/* 眉题：短横线 + 编号文字 */
.eyebrow{
  display:inline-flex;align-items:center;gap:13px;
  font-size:13px;letter-spacing:3.5px;font-weight:600;
}
.eyebrow .en{font-size:10.5px;letter-spacing:2.5px;opacity:.55;font-weight:600}
.eyebrow::before{
  content:"";width:36px;height:2px;border-radius:2px;
  background:currentColor;opacity:.9;
}
/* 按钮 */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 36px;border-radius:999px;border:0;cursor:pointer;
  font-size:15.5px;font-weight:600;letter-spacing:2px;
  transition:transform .35s var(--ease-soft),box-shadow .35s;
}
.btn:hover{transform:translateY(-3px)}
/* 橙色实心（悬停扫光） */
.btn-solid{
  color:#fff;
  background:linear-gradient(120deg,var(--orange-lite),var(--orange) 52%,var(--orange-deep));
  box-shadow:0 14px 34px rgba(200,70,15,.42),inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-solid:hover{box-shadow:0 20px 44px rgba(200,70,15,.5),inset 0 1px 0 rgba(255,255,255,.28)}
.btn-solid::after{
  content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);transition:none;
}
.btn-solid:hover::after{animation:sheen .85s ease}
@keyframes sheen{from{left:-60%}to{left:130%}}
/* 深底描边 */
.btn-ghost{
  color:#fff;background:rgba(255,255,255,.06);
  border:1.5px solid rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.btn-ghost:hover{background:rgba(255,255,255,.14);border-color:#fff}
/* 绿色实心 */
.btn-dark{
  color:#fff;
  background:linear-gradient(120deg,var(--green-bright),var(--green-dark));
  box-shadow:0 14px 32px rgba(36,105,44,.3);
}
.btn-dark:hover{box-shadow:0 20px 42px rgba(36,105,44,.38)}
/* 浅底描边（浅色屏用） */
.btn-line{
  color:var(--ink);background:#fff;
  border:1.5px solid var(--line);
  box-shadow:0 10px 24px rgba(36,27,18,.08);
}
.btn-line:hover{border-color:var(--orange);color:var(--orange-deep);box-shadow:0 14px 30px rgba(221,93,32,.16)}

/* ---------- 8. 回到顶部 ---------- */
.to-top{
  position:fixed;right:clamp(16px,2.6vw,36px);bottom:32px;z-index:56;
  width:48px;height:48px;border-radius:50%;cursor:pointer;
  border:1.5px solid var(--line);background:rgba(255,255,255,.9);color:var(--ink);
  font-size:17px;opacity:0;pointer-events:none;
  transition:opacity .45s,transform .35s var(--ease-soft),background .35s,border-color .35s;
}
.to-top.show{opacity:1;pointer-events:auto}
.to-top:hover{
  background:linear-gradient(120deg,var(--orange-lite),var(--orange-deep));
  border-color:transparent;color:#fff;transform:translateY(-4px);
}

/* ---------- 9. 轻页脚 ---------- */
.pfoot{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 14px;
  padding:22px 24px;background:#173d1c;
  color:rgba(255,255,255,.66);font-size:12px;letter-spacing:1.5px;
}
.pfoot a{color:rgba(255,255,255,.85);font-weight:700}
.pfoot a:hover{color:var(--gold)}

/* ---------- 10. 品牌实力屏（s-strength）共享基础 ---------- */
.s-strength{
  background:radial-gradient(1100px 640px at 12% 6%,rgba(240,166,60,.14) 0%,transparent 62%),
             #ffffff;
  color:var(--ink);
}
.s-strength .eyebrow{color:var(--orange)}
.strength-inner{
  display:flex;flex-direction:column;justify-content:center;
  padding:92px clamp(24px,6vw,104px) 58px;
  max-width:1460px;margin:0 auto;
}
.strength-head{
  margin:18px 0 0;
  font-size:clamp(32px,4.6vw,60px);font-weight:900;letter-spacing:3px;line-height:1.18;
}
/* 背景中国地图描边 */
.cn-map{
  position:absolute;right:2%;top:50%;transform:translateY(-50%);
  height:84%;width:auto;pointer-events:none;
  fill:none;stroke:rgba(36,105,44,.20);stroke-width:1.1;
  stroke-linejoin:round;stroke-linecap:round;
}
/* 数据卡 */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,32px)}
.stat{
  position:relative;overflow:hidden;border-radius:22px;
  padding:clamp(22px,2.4vw,34px) clamp(22px,2.4vw,32px);
  background:linear-gradient(158deg,rgba(255,255,255,.74) 0%,rgba(253,251,244,.58) 100%);
  border:1px solid rgba(222,218,202,.75);
  box-shadow:0 12px 30px rgba(36,27,18,.08),inset 0 1px 0 #fff;
  transition:transform .4s var(--ease-soft),box-shadow .4s,border-color .4s;
}
.stat::before{ /* 顶部橙色短线 */
  content:"";position:absolute;left:clamp(22px,2.4vw,32px);top:0;
  width:46px;height:3px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,var(--orange-lite),var(--orange-deep));
}
.stat::after{ /* 右上角大编号水印 */
  content:attr(data-no);position:absolute;right:14px;top:2px;
  font-size:56px;font-weight:900;letter-spacing:-3px;
  color:rgba(36,27,18,.07);pointer-events:none;
}
.stat:hover{
  transform:translateY(-6px);border-color:rgba(255,122,46,.42);
  box-shadow:0 24px 56px rgba(36,27,18,.15),inset 0 1px 0 #fff;
}
.stat .row{display:flex;align-items:baseline;gap:6px}
.stat .num{
  font-size:clamp(46px,4.8vw,70px);font-weight:900;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-1px;
  background:linear-gradient(180deg,var(--orange),var(--orange-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat .unit{font-size:clamp(17px,1.7vw,23px);font-weight:800;color:var(--orange-deep)}
.stat h3{margin-top:13px;font-size:clamp(16px,1.6vw,20px);font-weight:800;letter-spacing:2px;color:var(--ink)}
.stat p{margin-top:8px;font-size:clamp(12.5px,1.15vw,14.5px);color:var(--ink-soft);letter-spacing:1px;line-height:1.65}
.stat-note{margin-top:20px;font-size:12px;color:var(--ink-soft);letter-spacing:1.2px}
.strength-grid{
  display:grid;grid-template-columns:minmax(300px,420px) 1fr;
  gap:clamp(30px,5vw,86px);align-items:center;flex:1;min-height:0;margin-top:20px;
}

/* ---------- 11. 招牌好味屏（s-menu）与文案通用 ---------- */
.s-menu{
  background:radial-gradient(900px 620px at 78% 16%,rgba(240,166,60,.16),transparent 60%),
             #ffffff;
  color:var(--ink);
}
.s-menu .eyebrow{color:var(--orange-deep)}
.menu-inner{
  display:flex;flex-direction:column;justify-content:center;
  padding:88px clamp(24px,6vw,104px) 48px;
  max-width:1500px;margin:0 auto;
}
.menu-title{
  margin-top:16px;
  font-size:clamp(32px,4.6vw,58px);font-weight:900;letter-spacing:3px;line-height:1.18;
}
.menu-sub{
  margin-top:12px;
  font-size:clamp(13px,1.2vw,15.5px);color:var(--ink-soft);letter-spacing:2px;
  max-width:580px;line-height:1.85;
}
.menu-note{margin-top:18px;font-size:12px;color:var(--ink-soft);letter-spacing:1.5px}
/* 「了解更多 →」文字链接 */
.join-link{
  display:inline-flex;align-items:center;gap:6px;margin-top:14px;
  font-weight:800;color:var(--orange-deep);
  text-decoration:none;border-bottom:1px solid var(--orange-deep);
  padding-bottom:2px;letter-spacing:1px;
}
.join-link span{transition:transform .3s}
.join-link:hover span{transform:translateX(4px)}

/* ---------- 12. 子页 Hero（深色眉题区 + 整幅海报首屏） ---------- */
.s-hero{
  background:radial-gradient(900px 620px at 78% 12%,rgba(240,166,60,.16) 0%,transparent 60%),
             radial-gradient(760px 520px at 8% 92%,rgba(180,71,22,.1),transparent 62%),
             linear-gradient(165deg,#120a06 0%,#1a1008 100%);
  color:#fff;
}
.s-hero .eyebrow{color:var(--gold)}
.hero-inner{
  display:flex;flex-direction:column;justify-content:center;
  padding:96px clamp(24px,6vw,104px) 88px;
  max-width:1440px;margin:0 auto;
}
.hero-title{
  margin-top:18px;
  font-size:clamp(36px,5.4vw,80px);font-weight:900;letter-spacing:3px;line-height:1.18;
  text-shadow:0 10px 46px rgba(0,0,0,.5);
}
.hero-title .accent{
  background:linear-gradient(180deg,#ffb066,var(--orange) 60%,var(--orange-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-title .hl{
  background:linear-gradient(100deg,#ffe9b8,var(--gold));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero-sub{
  margin-top:18px;
  font-size:clamp(13.5px,1.3vw,17px);letter-spacing:2px;
  color:rgba(255,255,255,.78);line-height:1.9;
}
.hero-cta{margin-top:clamp(30px,5vh,56px);display:flex;gap:16px;flex-wrap:wrap}
.hero-cta .btn-dark{box-shadow:0 14px 32px rgba(36,105,44,.42)}
/* 首屏整幅海报（无文字层） */
.hero-poster{
  display:flex;align-items:center;justify-content:center;
  padding:72px 0 0;max-width:none;margin:0;height:auto;box-sizing:border-box;
}
.hero-poster-img{
  display:block;width:100%;height:auto;max-height:none;
  object-fit:contain;object-position:center;
}

/* ---------- 13. 门店海报墙（lb-*）共享基础 ---------- */
.lb-inner{
  display:flex;flex-direction:column;justify-content:center;
  padding:40px clamp(24px,6vw,104px) 48px;
  max-width:1500px;margin:0 auto;
}
.lb-head{max-width:840px}
.lb-head h2{
  margin-top:14px;
  font-size:clamp(23px,3.1vw,38px);font-weight:800;letter-spacing:1.5px;line-height:1.5;
  color:var(--ink);
}
.lb-head h2 .hl{
  background:linear-gradient(180deg,var(--gold),var(--orange-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lb-head p{margin-top:12px;font-size:clamp(12.5px,1.1vw,15.5px);line-height:1.9;letter-spacing:1.2px;color:var(--ink-soft)}
.lb-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.8vw,26px);margin-top:clamp(18px,3vh,34px);
}
.lb-card{
  border-radius:18px;overflow:hidden;background:var(--cream);
  box-shadow:0 16px 40px rgba(36,27,18,.14),inset 0 0 0 1px rgba(255,255,255,.6);
  transition:transform .6s var(--ease-soft),box-shadow .6s var(--ease-soft);
}
.lb-card img{display:block;width:100%;height:clamp(140px,23vh,220px);object-fit:cover}
.lb-card figcaption{padding:11px 16px 13px;font-size:12.5px;letter-spacing:1.2px;color:var(--ink-soft)}
.lb-card:hover{transform:translateY(-6px);box-shadow:0 24px 54px rgba(36,27,18,.2)}
.lb-card.wide{grid-column:1 / -1}
.lb-card.wide img{height:clamp(110px,18vh,180px)}
.lb-card.pos25 img{object-position:25% center}

/* ---------- 14. 响应式：导航 / 圆点 / 页脚 ---------- */
/* 窄屏桌面导航（901–1200px） */
@media (min-width:901px) and (max-width:1200px){
  .nav{gap:12px}
  .nav-menu{gap:12px}
  .nav-menu a{font-size:13px;letter-spacing:.5px}
  .brand .zh{font-size:20px}
  .brand .sub{display:none}
  .nav-tel .lab{display:none}
  .nav-tel .num{font-size:15px}
}
/* 移动端（<=900px）：导航折叠 + 圆点贴边 + 页脚紧凑 */
@media (max-width:900px){
  .nav-menu,.nav-tel .lab{display:none}
  .burger{display:flex}
  .nav-tel{flex-shrink:1;min-width:0}
  .nav-tel .num{font-size:13.5px;white-space:nowrap}
  .brand .zh{font-size:19px}
  .brand .sub{letter-spacing:3px}
  .m-menu{
    display:flex;position:fixed;inset:72px 0 auto 0;z-index:59;
    flex-direction:column;padding:10px 26px 26px;gap:2px;
    background:rgba(18,10,5,.97);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    transform:translateY(-14px);opacity:0;pointer-events:none;transition:.35s;
  }
  .m-menu.open{transform:none;opacity:1;pointer-events:auto}
  .m-menu a{
    padding:13px 4px;font-size:16px;letter-spacing:3px;color:#fff;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .m-menu a[data-current]{color:var(--gold);font-weight:700}
  .dots{right:11px;gap:11px}
  .pfoot{font-size:10px;letter-spacing:.5px;padding:18px 16px}
  .cn-map{right:-18%;height:52%;stroke:rgba(36,105,44,.16)}
}
/* 用户偏好减少动效 */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}