/* =========================================================
   祥冠源 · 高端茶叶品牌官网  —— 全新设计系统（2026-09 改版）
   风格基准：八马式现代高端茶官网
   浅色宣纸底 × 朱砂红 × 鎏金 × 大字宋体 × 整屏叙事
   ========================================================= */

/* ---------- 主题变量 ---------- */
:root {
  --paper:       #faf6ee;   /* 页面底 · 宣纸米白 */
  --paper-2:     #f3ecdd;   /* 次级底 */
  --card:        #fffdf9;   /* 卡片白 */
  --ink:         #241c14;   /* 主文字 · 墨 */
  --ink-2:       #5d5347;   /* 次级文字 */
  --ink-3:       #95887a;   /* 弱文字 */
  --brand:       #9d2c22;   /* 朱砂红 · 品牌主色 */
  --brand-deep:  #7c1f17;
  --gold:        #9a7638;   /* 鎏金 · 降饱和一档，浅底上不再发飘 */
  --gold-deep:   #85682f;   /* 深金 · 浅底小字标签专用（对比度 ≈5.4:1，达 AA） */
  --gold-bright: #c9a55e;
  --gold-pale:   #efe3c8;
  --line:        rgba(36,28,20,.12);
  --line-strong: rgba(36,28,20,.24);
  --dark:        #211812;   /* 深色带（页脚/CTA） */
  --dark-2:      #2c211a;
  --cream:       #f6eeda;   /* 深底上的浅字 */
  --stone:       rgba(246,238,218,.75);
  --stone-light: rgba(246,238,218,.5);
  --ok:          #3f7d54;
  --danger:      #b6402a;
  --shadow:      0 1px 2px rgba(46,30,18,.06), 0 24px 56px -28px rgba(46,30,18,.34);
  --shadow-sm:   0 1px 2px rgba(46,30,18,.05), 0 10px 24px -18px rgba(46,30,18,.30);
  --ring:        rgba(157,44,34,.22);   /* 焦点环 · 用品牌红而不是金 */

  --font-serif: "Songti SC", "Noto Serif SC", "Source Han Serif SC", "Source Han Serif CN", "STSong", "SimSun", serif;
  --font-sans:  "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", "WenQuanYi Micro Hei", sans-serif;
  --font-en:    "Didot", "Bodoni MT", "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 基础重置 ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.75;
  font-size: 16px;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

::selection { background: var(--brand); color: var(--cream); }

/* 自定义滚动条 */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--paper-2); }
::-webkit-scrollbar-thumb { background: #cfc4ae; border-radius: 6px; border: 2px solid var(--paper-2); }
::-webkit-scrollbar-thumb:hover { background: var(--line-strong); }

.container { width: min(1200px, 92%); margin: 0 auto; }

/* 宣纸肌理（极轻） */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9999;
  pointer-events: none; opacity: .035; mix-blend-mode: multiply;
  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='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 首页品牌导览（极简门户：仅首屏 + 六个入口） ---------- */
.home-portal { padding: 92px 0 104px; }
.portal-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.portal-item {
  position: relative; display: block; padding: 32px 30px 34px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  transition: background .35s var(--ease), border-color .35s var(--ease), transform .16s var(--ease);
}
.portal-item:hover { background: var(--card); }
.portal-item:active { transform: translateY(2px); background: var(--paper-2); }
.portal-item em {
  display: block; font-family: var(--font-en); font-style: normal;
  font-size: 12px; letter-spacing: .26em; color: var(--gold); margin-bottom: 14px;
}
.portal-item h3 {
  font-family: var(--font-serif); font-weight: 600; font-size: 23px; letter-spacing: .1em;
  color: var(--ink); display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  transition: color .35s var(--ease);
}
.portal-item h3 span {
  font-family: var(--font-en); font-weight: 400; font-size: 10.5px;
  letter-spacing: .22em; color: var(--ink-3); transition: color .35s var(--ease);
}
.portal-item:hover h3 { color: var(--brand); }
.portal-item:hover h3 span { color: var(--gold); }
.portal-item p { color: var(--ink-2); font-size: 13.5px; margin-top: 12px; max-width: 30em; }
.portal-arrow {
  position: absolute; right: 26px; bottom: 28px; font-style: normal;
  color: var(--gold); font-size: 16px;
  opacity: .5;                       /* 常驻可见：触屏没有 hover，需保留可进入的提示 */
  transition: opacity .3s var(--ease), transform .3s var(--ease), color .3s var(--ease);
}
.portal-item:hover .portal-arrow,
.portal-item:focus-visible .portal-arrow { opacity: 1; color: var(--brand); transform: translateX(5px); }

@media (max-width: 900px) { .portal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .portal-grid { grid-template-columns: 1fr; }
  .home-portal { padding: 64px 0 78px; }
  .portal-item { padding: 26px 24px 28px; }
  .portal-item h3 { font-size: 21px; }
}

/* ---------- 通用元素 ---------- */
.section { padding: 110px 0; position: relative; }
.section--tint { background: var(--paper-2); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 38px; font-size: 14.5px; letter-spacing: .16em;
  border: 1px solid transparent; transition: all .35s var(--ease);
  position: relative; overflow: hidden; font-weight: 500; white-space: nowrap;
}
.btn-sm { padding: 10px 24px; font-size: 13px; }
.btn-gold {
  background: var(--brand); color: var(--cream);
}
.btn-gold:hover { background: var(--brand-deep); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn-ghost { color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); }
/* 深色底上的描边按钮 */
.btn-ghost.light { color: var(--cream); border-color: rgba(246,238,218,.4); }
.btn-ghost.light:hover { border-color: var(--gold-bright); color: var(--gold-bright); }
.btn-block { width: 100%; }

/* 区块标题 */
.section-head { max-width: 680px; margin: 0 auto 66px; text-align: center; }
.section-head.left { margin-left: 0; text-align: left; }
.head-en {
  display: block; font-family: var(--font-en); letter-spacing: .34em;
  font-size: 12px; color: var(--gold-deep); margin-bottom: 16px; text-transform: uppercase;
  /* 字距会在末字后多留一个 .34em，居中时表现为整体左偏 → 用等量负右外边距抵消 */
  margin-right: -.34em;
}
.head-title {
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(32px, 4.6vw, 46px); letter-spacing: .12em; line-height: 1.3; color: var(--ink);
}
.head-title span { color: var(--brand); }
.head-line { margin-top: 26px; display: flex; justify-content: center; }
.section-head.left .head-line { justify-content: flex-start; }
.head-line span { display: block; height: 1px; width: 200px; position: relative; background: var(--line-strong); }
.head-line span::before, .head-line span::after {
  content: ""; position: absolute; top: 50%; width: 5px; height: 5px;
  background: var(--line-strong); transform: translateY(-50%) rotate(45deg);
}
.head-line span::before { left: -3px; }
.head-line span::after { right: -3px; }
.head-sub { margin-top: 20px; color: var(--ink-2); font-size: 15px; letter-spacing: .08em; }

/* 回纹分隔条 */
.meander-strip {
  height: 24px; opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='24'%3E%3Cpath d='M0 0 H32 V12 H14 V24 H46 V0 H64' fill='none' stroke='%23b08a4a' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: repeat-x; background-size: 64px 24px;
}

/* 渐入动画（JS 开启后生效） */
.js .reveal { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.visible { opacity: 1; transform: none; }

/* ---------- 滚动进度条 ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 10000;
  background: linear-gradient(90deg, var(--gold), var(--brand));
  transition: width .1s linear;
  pointer-events: none;   /* 纯装饰指示条，不应拦截任何点击 */
}

/* ---------- 顶部导航 ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  transition: padding .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
  /* 头部尺寸随视口自适应：大屏更饱满（与首屏 84px 主标题成比例），
     窄屏自动收紧，避免 1025–1200px 区间导航换行 */
  padding: clamp(15px, 1.4vw, 20px) 0;
  background: linear-gradient(180deg, rgba(250,246,238,.9), rgba(250,246,238,0));
}
.site-header.scrolled {
  padding: clamp(10px, 0.9vw, 13px) 0;
  background: rgba(255,253,249,.94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm);
}
/* 滚动后头部收紧：logo 与品牌名同步缩小，形成「收起的导航条」 */
.site-header.scrolled .brand-seal { width: 60px; height: 60px; }
.site-header.scrolled .brand-text strong { font-size: 27px; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 22px; }

.brand { display: flex; align-items: center; gap: 15px; flex-shrink: 0; }
.brand-seal {
  width: clamp(62px, 5.1vw, 76px); height: clamp(62px, 5.1vw, 76px);
  object-fit: contain;
  transition: transform .3s var(--ease), width .35s var(--ease), height .35s var(--ease);
}
.brand:hover .brand-seal { transform: rotate(-6deg); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong {
  font-family: var(--font-serif); font-weight: 700; letter-spacing: .14em; color: var(--ink);
  font-size: clamp(26px, 2.2vw, 32px);
  transition: font-size .35s var(--ease);
}
.brand-text em { font-family: var(--font-en); font-size: clamp(9.5px, .78vw, 11.5px); letter-spacing: .3em; color: var(--gold-deep); margin-top: 4px; font-style: normal; }

.main-nav { display: flex; align-items: center; gap: clamp(20px, 2.5vw, 38px); }
.main-nav > a, .nav-drop-toggle {
  color: var(--ink); font-size: clamp(15px, 1.15vw, 17px); font-weight: 500; letter-spacing: .1em;
  position: relative; padding: 6px 0;
  opacity: .88; transition: color .3s, opacity .3s; display: inline-flex; align-items: center; gap: 6px;
}
.main-nav > a::after, .nav-drop-toggle::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: var(--brand); transition: width .35s var(--ease);
}
.main-nav > a:hover, .nav-drop-toggle:hover { color: var(--brand); opacity: 1; }
.main-nav > a:hover::after, .nav-drop-toggle:hover::after { width: 100%; }
.main-nav > a.active, .has-drop.active > .nav-drop-toggle { color: var(--brand); opacity: 1; }
.main-nav > a.active::after, .has-drop.active > .nav-drop-toggle::after { width: 100%; }

.caret { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .3s var(--ease); }
.has-drop { position: relative; }
.has-drop:hover .caret { transform: rotate(225deg) translateY(-1px); }

/* 二级下拉：六大品类 */
.drop-menu {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translate(-50%, 8px);
  width: 268px; background: var(--card); border: 1px solid var(--line);
  box-shadow: var(--shadow); padding: 10px 0; opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.has-drop:hover .drop-menu, .has-drop.open .drop-menu { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.drop-menu a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 11px 22px; font-size: 14px; letter-spacing: .08em; color: var(--ink);
  white-space: nowrap;
  transition: background .25s, color .25s, padding-left .25s;
}
.drop-menu a em { font-family: var(--font-en); font-size: 10px; letter-spacing: .18em; color: var(--ink-3); font-style: normal; }
.drop-menu a:hover { background: var(--paper-2); color: var(--brand); padding-left: 26px; }
.drop-menu a:hover em { color: var(--gold); }
/* 二级下拉里的分隔线：上面是六大品类，下面是「年度单品 / 未来发布产品」 */
.drop-sep { display: block; height: 1px; background: var(--line); margin: 8px 22px; }

.nav-cta { flex-shrink: 0; padding: clamp(12px, .85vw, 14px) clamp(24px, 1.8vw, 30px); font-size: clamp(14px, 1vw, 15.5px); }

.burger { display: none; flex-direction: column; gap: 5px; padding: 10px; }
.burger span { display: block; width: 24px; height: 2px; background: var(--ink); transition: all .35s var(--ease); }

/* ---------- 首页 Hero 轮播 ---------- */
.hero {
  position: relative; min-height: 100vh; overflow: hidden;
  background: var(--paper);
  /* 允许纵向滚动由浏览器处理，横向手势交给下方轮播脚本（实现左右滑动切换） */
  touch-action: pan-y;
}
/* 轮播容器：铺满首屏，作为滑动/悬停的命中区域
   （此前它只有绝对定位的子元素、自身高度为 0，导致手势区域几乎不存在） */
.hero-slider { position: absolute; inset: 0; }
.hero-slide {
  position: absolute; inset: 0; opacity: 0;
  /* 跨屏淡入淡出交给 GPU 合成：will-change 让每屏各自成层，淡出淡入不再重绘背景大图，
     缓动更柔和（1.15s ease-in-out），所以切换更「丝滑」。 */
  transition: opacity 1.15s cubic-bezier(.45, 0, .25, 1), transform .5s cubic-bezier(.45, 0, .25, 1);
  will-change: opacity;
  backface-visibility: hidden;
  display: flex; align-items: center; pointer-events: none;
}
/* 拖动跟随期间去掉 transform 过渡，保证跟手；松手后靠基础过渡回弹 */
.hero-slide.dragging { transition: opacity 1.15s cubic-bezier(.45, 0, .25, 1); }
.hero-slide.active { opacity: 1; pointer-events: auto; }
.hero-slide-bg { position: absolute; inset: 0; }
/* 微推镜：与 5 秒停留同步（5.2s 走完一轮推近），避免还没走完就被切走显得急促 */
.hero-slide-bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 11s cubic-bezier(.25, .6, .3, 1); }
.hero-slide.active .hero-slide-bg img { transform: scale(1); }
.hero-slide-bg::after {
  content: ""; position: absolute; inset: 0;
  /* 双层蒙版：只在左侧文字区留白保证标题/副文案可读，其余区域尽量透出实景照片；
     固定导航与轮播圆点的可读性由 <下方> .site-header 的浅色文字阴影兜底，
     避免为了导航把整张照片压灰。 */
  background:
    linear-gradient(90deg,
      rgba(250,246,238,.97) 0%,
      rgba(250,246,238,.94) 30%,
      rgba(250,246,238,.80) 44%,
      rgba(250,246,238,.30) 56%,
      rgba(250,246,238,.06) 64%,
      rgba(250,246,238,.06) 100%),
    linear-gradient(180deg,
      rgba(250,246,238,.84) 0%,
      rgba(250,246,238,0) 28%,
      rgba(250,246,238,0) 60%,
      rgba(250,246,238,.66) 100%);
}
/* 实景照片作首屏背景时，导航与侧边竖排文字靠浅色阴影保持可读 */
.site-header .brand-text strong,
.site-header .brand-text em,
.main-nav > a,
.nav-drop-toggle,
.hero-eyebrow,
.hero-title,
.hero-sub,
.hero-dots { text-shadow: 0 1px 10px rgba(250,246,238,.92), 0 0 3px rgba(250,246,238,.75); }
.hero-content { position: relative; z-index: 2; padding: 140px 0 120px; max-width: 760px; }
.hero-eyebrow {
  font-family: var(--font-en); letter-spacing: .5em; font-size: 12.5px; color: var(--gold);
  margin-bottom: 26px; text-transform: uppercase;
}
.hero-title {
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(44px, 7.4vw, 84px); line-height: 1.22; letter-spacing: .12em;
  margin-bottom: 30px; color: var(--ink);
}
.hero-title .accent { color: var(--brand); }
.hero-sub {
  font-size: clamp(15px, 1.9vw, 17.5px); color: var(--ink-2); letter-spacing: .14em;
  max-width: 560px; margin-bottom: 44px;
}
.hero-cta { display: flex; gap: 18px; flex-wrap: wrap; }

@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* 轮播控件（左右箭头 + 圆点 + 自动播放开关）：统一放在首屏底部居中。
   放在两侧时，窄桌面（<1360px）箭头会压到左侧标题与右侧印章，
   底部此处是标题下方 120px 留白，任何宽度都不与内容重叠。 */
.hero-controls {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  z-index: 4; display: flex; align-items: center; gap: 10px;
}
/* 圆点：28px 的点击热区（原先只有 34×3px 的细条，手机几乎点不中），
   视觉上是一枚 9px 圆点，当前屏放大并转为品牌红 */
.hero-dots { display: flex; align-items: center; }
.hero-dot {
  width: 28px; height: 28px; padding: 0; border: none; background: none;
  display: flex; align-items: center; justify-content: center;
}
.hero-dot::after {
  content: ""; display: block; width: 9px; height: 9px; border-radius: 50%;
  background: rgba(36,28,20,.32);
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.hero-dot:hover::after { background: rgba(36,28,20,.6); }
.hero-dot.active::after { background: var(--brand); transform: scale(1.35); }

/* 左右切换按钮：默认就可见（半透明），不再只在 hover 时出现 */
.hero-nav {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); background: rgba(255,253,249,.8); color: var(--ink-2);
  opacity: .62;
  transition: opacity .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .12s var(--ease);
}
.hero-nav { font-size: 20px; line-height: 1; padding-bottom: 2px; }
.hero-nav:hover, .hero-nav:focus-visible {
  opacity: 1; background: var(--brand); border-color: var(--brand); color: var(--cream);
}
.hero-nav:active { transform: scale(.94); }

/* 切屏时文案随之上浮渐入（替代原先只在首屏加载时播一次的渐入） */
.hero-slide.active .hero-eyebrow { animation: heroIn .9s cubic-bezier(.16, 1, .3, 1) .04s both; }
.hero-slide.active .hero-title   { animation: heroIn .95s cubic-bezier(.16, 1, .3, 1) .14s both; }
.hero-slide.active .hero-sub     { animation: heroIn .95s cubic-bezier(.16, 1, .3, 1) .26s both; }
.hero-slide.active .hero-cta     { animation: heroIn .95s cubic-bezier(.16, 1, .3, 1) .36s both; }
@keyframes heroIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 1024px) {
  .hero-nav { display: none; }
}
@media (max-width: 768px) {
  /* 移动端加大触控目标 */
  .hero-dot { width: 34px; height: 34px; }
  .hero-dot::after { width: 10px; height: 10px; }
  .hero-controls { bottom: 26px; }
}
/* 向下滚动提示 */
.hero-scroll {
  position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 2;
  display: none; flex-direction: column; align-items: center; gap: 10px; color: var(--ink-3);
}
.hero-dots + .hero-scroll { display: none; }
.scroll-line { width: 1px; height: 48px; background: var(--line-strong); position: relative; overflow: hidden; }
.scroll-line::after {
  content: ""; position: absolute; left: 0; top: -50%; width: 100%; height: 50%;
  background: var(--brand); animation: scrollHint 2s var(--ease) infinite;
}
@keyframes scrollHint { from { top: -50%; } to { top: 110%; } }
.scroll-text { font-family: var(--font-en); font-size: 10px; letter-spacing: .4em; }

/* 金色茶韵粒子 */
.hero-grains { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.hero-grain {
  position: absolute; top: -4%; width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle, rgba(176,138,74,.9), rgba(176,138,74,0) 72%);
  opacity: 0; animation-name: grainFall; animation-timing-function: linear; animation-iteration-count: infinite;
  will-change: transform, opacity;
}
@keyframes grainFall {
  0%   { transform: translate3d(0, -6vh, 0) scale(.55); opacity: 0; }
  8%   { opacity: .7; }
  90%  { opacity: .7; }
  100% { transform: translate3d(var(--dx, 24px), 106vh, 0) scale(1.05); opacity: 0; }
}

/* ---------- 品牌区（首页） ---------- */
.brand-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 72px; align-items: center; }
.brand-lead {
  font-family: var(--font-serif); font-size: 21px; line-height: 1.85; letter-spacing: .04em;
  color: var(--ink); margin-bottom: 22px; border-left: 3px solid var(--brand); padding-left: 20px;
}
.brand-copy > p { color: var(--ink-2); margin-bottom: 18px; letter-spacing: .02em; }
.brand-origin {
  margin-top: 30px; display: flex; gap: 18px; align-items: flex-start;
  background: var(--card); padding: 24px 26px; border: 1px solid var(--line); position: relative;
}
.brand-origin::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--gold-pale); pointer-events: none; }
.origin-tag {
  writing-mode: vertical-rl; font-family: var(--font-serif); letter-spacing: .3em;
  color: var(--brand); font-size: 15px; padding: 6px 2px; border-right: 1px solid var(--line); flex-shrink: 0;
}
.origin-text strong { font-family: var(--font-serif); font-size: 19px; letter-spacing: .06em; color: var(--ink); }
.origin-text p { color: var(--ink-2); font-size: 14.5px; margin-top: 6px; }
.brand-more { margin-top: 30px; }

/* 数据背书 */
.stats-band { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.stat-card {
  background: var(--card); border: 1px solid var(--line); padding: 34px 20px 28px; text-align: center;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .4s; position: relative;
}
.stat-card::after { content: ""; position: absolute; inset: 7px; border: 1px solid var(--gold-pale); pointer-events: none; transition: opacity .4s; }
.stat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-sm); border-color: var(--gold); }
.stat-num { font-family: var(--font-serif); font-size: clamp(38px, 4.4vw, 52px); font-weight: 700; color: var(--brand); line-height: 1; display: flex; align-items: baseline; justify-content: center; }
.stat-num i { font-style: normal; }
.stat-num b { font-size: .48em; color: var(--gold); font-weight: 700; margin-left: 4px; }
.stat-label { display: block; margin-top: 12px; color: var(--ink-2); letter-spacing: .16em; font-size: 13.5px; }

/* ---------- 明星产品 ---------- */
.star-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.star-empty {
  grid-column: 1 / -1; text-align: center; color: var(--ink-3); font-size: 15px;
  letter-spacing: .1em; padding: 44px 0; border: 1px dashed var(--line-strong);
}
.star-card {
  background: var(--card); border: 1px solid var(--line); overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  position: relative; display: flex; flex-direction: column;
}
.star-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); border-color: var(--line-strong); }
.star-visual {
  position: relative; aspect-ratio: 3 / 4; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: #efe7d6;
}
.star-visual svg { width: 88px; height: 88px; color: var(--cream); z-index: 2; opacity: .95; transition: transform .8s var(--ease); }
.star-card:hover .star-visual svg { transform: rotate(-6deg) scale(1.08); }
.star-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; transition: transform .8s var(--ease); }
.star-card:hover .star-visual img { transform: scale(1.07); }
.star-visual.v1 { background: linear-gradient(135deg, #caa04e, #8a6423); }
.star-visual.v2 { background: linear-gradient(135deg, #9d2c22, #5d1a14); }
.star-visual.v3 { background: linear-gradient(135deg, #5d7345, #2c3a20); }
.star-char {
  position: absolute; right: 12px; bottom: -18px; font-family: var(--font-serif);
  font-size: 120px; color: rgba(255,253,249,.16); line-height: 1; z-index: 1; pointer-events: none;
}
.star-visual.has-img .star-char { opacity: .85; mix-blend-mode: overlay; }
.star-body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.star-tag { font-size: 12px; letter-spacing: .2em; color: var(--gold); border-bottom: 1px solid var(--line); display: inline-block; padding-bottom: 5px; margin-bottom: 13px; align-self: flex-start; }
.star-body h4 { font-family: var(--font-serif); font-size: 21px; letter-spacing: .05em; margin-bottom: 9px; color: var(--ink); }
.star-body p { color: var(--ink-2); font-size: 14px; margin-bottom: 16px; flex: 1; }
.star-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.star-note { font-family: var(--font-serif); font-size: 13px; letter-spacing: .28em; color: var(--gold); }
.star-price { font-family: var(--font-serif); font-size: 23px; font-weight: 700; color: var(--brand); letter-spacing: .02em; }
.star-price i { font-style: normal; font-size: 14px; margin-right: 3px; color: var(--gold); }
.star-more { text-align: center; margin-top: 46px; }

/* ---------- 六大品类（品类导航卡：上图下文，配实拍茶图） ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2vw, 26px); }
.cat-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); border: 1px solid var(--line);
  transition: transform .35s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); border-color: var(--line-strong); }
/* 取景框：图片放大时由它裁切，不会溢出到下方文字区 */
.cat-media { height: 232px; overflow: hidden; background: var(--paper-2); }
.cat-card img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  transition: transform .8s var(--ease);
}
.cat-card:hover img { transform: scale(1.05); }
.cat-body { padding: 26px 26px 28px; }
.cat-body h3 {
  font-family: var(--font-serif); font-size: 23px; letter-spacing: .12em; color: var(--ink);
  display: flex; align-items: baseline; gap: 12px; transition: color .35s var(--ease);
}
.cat-card:hover .cat-body h3 { color: var(--brand); }
.cat-body h3 em { font-family: var(--font-en); font-size: 11px; letter-spacing: .24em; color: var(--ink-3); font-style: normal; }
.cat-body p { color: var(--ink-2); font-size: 13.5px; letter-spacing: .04em; margin-top: 10px; }
.cat-arrow {
  position: absolute; right: 26px; bottom: 32px; color: var(--brand); font-size: 18px;
  opacity: 0; transform: translateX(-8px); transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.cat-card:hover .cat-arrow, .cat-card:focus-visible .cat-arrow { opacity: 1; transform: none; }

/* ---------- 溯源查询 ---------- */
.trace { background: var(--paper-2); }
.trace-box { max-width: 780px; margin: 0 auto; }
.trace-search {
  display: flex; align-items: stretch; background: var(--card);
  border: 1px solid var(--gold); padding: 10px; position: relative;
  box-shadow: var(--shadow-sm);
}
/* 原来的「双线金框」去掉：主输入框只留一圈金发丝线，焦点态交给品牌红焦点环 */
.trace-search-icon { width: 26px; height: 26px; flex-shrink: 0; margin: auto 16px; color: var(--gold); }
.trace-search input {
  flex: 1; min-width: 0; background: transparent; border: 1px solid transparent; outline: none;
  color: var(--ink); font-size: 16px; letter-spacing: .06em; padding: 12px 4px; position: relative;
}
.trace-search input::placeholder { color: var(--ink-3); letter-spacing: .04em; }
.trace-search input.err-shake { border-color: var(--danger); animation: traceShake .4s; }
@keyframes traceShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.trace-btn { flex-shrink: 0; padding: 14px 46px; position: relative; z-index: 1; }
.trace-hint { margin-top: 18px; text-align: center; font-size: 13px; color: var(--ink-2); letter-spacing: .05em; }
.trace-sample { color: var(--brand); border-bottom: 1px dashed var(--brand); padding: 0 2px; font-family: var(--font-en); letter-spacing: .08em; transition: color .3s, border-color .3s; }
.trace-sample:hover { color: var(--gold); border-color: var(--gold); }
.trace-search:focus-within { border-color: var(--brand); box-shadow: var(--shadow-sm), 0 0 0 3px var(--ring); }

/* 查询结果 */
.trace-result { max-width: 780px; margin: 46px auto 0; }
.trace-card { border: 1px solid var(--line); background: var(--card); position: relative; overflow: hidden; animation: traceIn .6s var(--ease) both; box-shadow: var(--shadow-sm); }
.trace-card::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--line); pointer-events: none; }
.trace-card.genuine { border-color: var(--gold); }
.trace-card.suspect { border-color: var(--danger); }
@keyframes traceIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

.trace-head { display: flex; align-items: center; gap: 24px; padding: 30px 34px; border-bottom: 1px solid var(--line); }
.trace-img { width: 138px; height: 184px; flex-shrink: 0; border: 1px solid var(--gold); padding: 3px; position: relative; background: var(--paper-2); }
.trace-img::after { content: ""; position: absolute; inset: 5px; border: 1px solid var(--line); pointer-events: none; }
.trace-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.trace-stamp {
  width: 92px; height: 92px; flex-shrink: 0; border-radius: 50%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; border: 2px solid var(--brand); color: var(--brand);
  position: relative; background: rgba(157,44,34,.04);
}
.trace-stamp::after { content: ""; position: absolute; inset: 5px; border: 1px solid var(--brand); border-radius: 50%; opacity: .5; }
.trace-stamp b { font-family: var(--font-serif); font-size: 30px; letter-spacing: .12em; line-height: 1; }
.trace-stamp em { font-style: normal; font-size: 9px; letter-spacing: .3em; margin-top: 6px; }
.trace-head-info h3 { font-family: var(--font-serif); font-size: 26px; letter-spacing: .06em; color: var(--ink); }
.trace-head-info p { color: var(--ink-2); font-size: 13.5px; margin-top: 8px; letter-spacing: .04em; }
.trace-price-line { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; }
.trace-price { font-family: var(--font-serif); font-size: 30px; font-weight: 700; color: var(--brand); letter-spacing: .02em; line-height: 1; }
.trace-price i { font-style: normal; font-size: 16px; margin-right: 2px; color: var(--gold); }
.trace-price-unit { font-style: normal; font-size: 11px; letter-spacing: .22em; color: var(--ink-3); }
.trace-badge { margin-left: auto; flex-shrink: 0; font-size: 12px; letter-spacing: .25em; padding: 6px 14px; border: 1px solid var(--gold); color: var(--gold); }
.trace-card.suspect .trace-stamp { border-color: var(--danger); color: var(--danger); }
.trace-card.suspect .trace-stamp::after { border-color: var(--danger); }
.trace-card.suspect .trace-badge { border-color: var(--danger); color: var(--danger); }

.trace-table { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; padding: 8px 34px 26px; }
.trace-row { display: flex; gap: 18px; padding: 15px 4px; border-bottom: 1px dashed rgba(36,28,20,.16); }
.trace-row:nth-last-child(-n+2) { border-bottom: none; }
.trace-row dt { flex-shrink: 0; width: 96px; color: var(--gold); font-size: 13px; letter-spacing: .2em; padding-top: 2px; }
.trace-row dd { color: var(--ink); font-size: 14px; letter-spacing: .02em; margin: 0; word-break: break-all; }
.trace-note { padding: 0 34px 30px; color: var(--ink-2); font-size: 12.5px; letter-spacing: .05em; }
.trace-note i { color: var(--brand); font-style: normal; }
.trace-note b { color: var(--brand); }

.trace-suspect-body { padding: 44px 34px; text-align: center; }
.trace-suspect-body h3 { font-family: var(--font-serif); font-size: 28px; letter-spacing: .1em; color: var(--danger); }
.trace-suspect-body p { color: var(--ink-2); font-size: 14.5px; margin-top: 14px; letter-spacing: .05em; max-width: 520px; margin-left: auto; margin-right: auto; }
.trace-suspect-body b { color: var(--brand); }

/* ---------- 茶文化（浅色整屏，与全站主题统一） ---------- */
.culture {
  position: relative; background: var(--paper);
  color: var(--ink); padding: 130px 0; overflow: hidden;
}
.culture-bg { position: absolute; inset: 0; pointer-events: none; }
.culture-char {
  position: absolute; right: -40px; top: 6%; font-family: var(--font-serif);
  font-size: clamp(240px, 32vw, 480px); line-height: 1; color: rgba(176,138,74,.07); user-select: none;
}
.culture-char-2 {
  position: absolute; left: -60px; bottom: -8%; font-family: var(--font-serif);
  font-size: clamp(200px, 26vw, 400px); line-height: 1; color: rgba(176,138,74,.05); user-select: none;
}
.culture-inner { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 76px; align-items: center; }
.culture-en { font-family: var(--font-en); letter-spacing: .42em; font-size: 13px; color: var(--gold-deep); }
.culture-left h2 {
  font-family: var(--font-serif); font-size: clamp(34px, 4.8vw, 54px); line-height: 1.4;
  letter-spacing: .1em; margin: 20px 0 24px; color: var(--ink);
}
.culture-left > p { color: var(--ink-2); max-width: 440px; font-size: 15.5px; }
.culture-bowl { width: 116px; height: 108px; color: var(--gold); margin-top: 34px; opacity: .9; animation: floaty 6s ease-in-out infinite; }
.culture-right { display: flex; flex-direction: column; gap: 16px; }
.virtue {
  display: flex; gap: 22px; align-items: center; padding: 25px 27px;
  background: var(--card); border: 1px solid var(--line); transition: all .3s var(--ease);
}
.virtue:hover { background: var(--card); border-color: rgba(176,138,74,.5); box-shadow: var(--shadow-sm); transform: translateX(8px); }
.virtue-char {
  width: 66px; height: 66px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 32px; color: var(--brand);
  border: 1px solid rgba(176,138,74,.55); position: relative; transition: all .3s var(--ease);
}
.virtue:hover .virtue-char { background: var(--brand); border-color: var(--brand); color: var(--cream); }
.virtue-body h3 { font-family: var(--font-serif); font-size: 19px; letter-spacing: .08em; margin-bottom: 6px; color: var(--ink); }
.virtue-body p { color: var(--ink-2); font-size: 14px; }

/* ---------- 关于我们 ---------- */
.about-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 72px; align-items: start; }
.cap-card {
  position: relative; padding: 28px 28px 28px 90px; background: var(--card);
  border: 1px solid var(--line); transition: all .3s var(--ease); overflow: hidden; margin-bottom: 20px;
}
.cap-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--brand); transform: scaleY(0); transform-origin: top; transition: transform .35s var(--ease);
}
.cap-card:hover { transform: translateX(6px); box-shadow: var(--shadow-sm); border-color: var(--gold); }
.cap-card:hover::before { transform: scaleY(1); }
.cap-num {
  position: absolute; left: 24px; top: 20px; font-family: var(--font-serif);
  font-size: 32px; color: rgba(36,28,20,.12); line-height: 1; transition: color .4s;
}
.cap-card:hover .cap-num { color: var(--gold); }
.cap-icon { position: absolute; left: 25px; bottom: 24px; width: 30px; height: 30px; color: var(--gold); opacity: .8; }
.cap-card h3 { font-family: var(--font-serif); font-size: 20px; letter-spacing: .08em; margin-bottom: 8px; color: var(--ink); }
.cap-card p { color: var(--ink-2); font-size: 14.5px; }

/* ---------- 招商加盟 ---------- */
.store-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-bottom: 84px; }
.store-card {
  background: var(--card); border: 1px solid var(--line); padding: 30px 26px;
  transition: all .3s var(--ease); position: relative;
}
.store-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-sm); border-color: var(--gold); }
.store-card.featured { border-color: var(--gold); background: linear-gradient(180deg, #fdf7ea, var(--card)); }
.store-card.featured::before {
  content: "推荐"; position: absolute; top: -12px; left: 24px; background: var(--brand); color: var(--cream);
  font-size: 12px; letter-spacing: .2em; padding: 3px 12px;
}
.store-top { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 14px; }
.store-type { font-family: var(--font-serif); font-size: 22px; letter-spacing: .08em; color: var(--ink); }
.store-area { font-family: var(--font-en); font-size: 13px; color: var(--gold); letter-spacing: .1em; }
.store-pos { color: var(--ink-2); font-size: 13.5px; margin-bottom: 16px; }
.store-invest { display: flex; flex-direction: column; gap: 4px; padding: 13px 0; margin-bottom: 14px; }
.store-invest span { font-size: 12px; color: var(--ink-3); letter-spacing: .2em; }
.store-invest strong { font-family: var(--font-serif); font-size: 24px; color: var(--brand); }
.store-list li { position: relative; padding-left: 20px; font-size: 14px; color: var(--ink-2); margin-bottom: 8px; }
.store-list li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); }

.store-head, .process-head { text-align: center; margin: 0 0 38px; }
.store-head h3, .process-head h3 {
  font-family: var(--font-serif); font-size: 30px; letter-spacing: .08em; display: inline-block;
  position: relative; color: var(--ink);
}
.store-head h3::before, .store-head h3::after, .process-head h3::before, .process-head h3::after {
  content: ""; position: absolute; top: 50%; width: 44px; height: 1px; background: var(--line-strong);
}
.store-head h3::before, .process-head h3::before { right: 100%; margin-right: 18px; }
.store-head h3::after, .process-head h3::after { left: 100%; margin-left: 18px; }

.process { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.process li {
  text-align: center; padding: 30px 14px; background: var(--card); border: 1px solid var(--line);
  position: relative; transition: all .3s var(--ease);
}
.process li:hover { transform: translateY(-6px); box-shadow: var(--shadow-sm); }
.process li:not(:last-child)::after { content: "→"; position: absolute; right: -16px; top: 42%; color: var(--gold); font-size: 18px; z-index: 1; }
.step-num { display: block; font-family: var(--font-serif); font-size: 30px; color: var(--brand); margin-bottom: 10px; }
.process h4 { font-family: var(--font-serif); font-size: 17px; letter-spacing: .1em; margin-bottom: 8px; color: var(--ink); }
.process p { color: var(--ink-2); font-size: 12.5px; }

/* 加盟 CTA 深色横幅 */
.cta-band {
  position: relative; background: linear-gradient(135deg, var(--brand-deep), var(--brand) 60%, #b4472c);
  color: var(--cream); padding: 74px 0; overflow: hidden;
}
.cta-band::before {
  content: ""; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px;
  border-radius: 50%; border: 1px solid rgba(246,238,218,.18);
}
.cta-band::after {
  content: ""; position: absolute; right: -30px; top: -30px; width: 220px; height: 220px;
  border-radius: 50%; border: 1px solid rgba(246,238,218,.12);
}
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; position: relative; }
.cta-inner h2 { font-family: var(--font-serif); font-size: clamp(26px, 3.6vw, 38px); letter-spacing: .12em; }
.cta-inner p { color: rgba(246,238,218,.8); margin-top: 10px; letter-spacing: .08em; }

/* ---------- 联系我们 ---------- */
.contact-inner { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: start; }
.contact-info, .contact-form-wrap { min-width: 0; }
.contact-info h2 { font-family: var(--font-serif); font-size: clamp(30px, 4vw, 44px); letter-spacing: .06em; margin: 14px 0 0; color: var(--ink); }
.contact-info h2 span { color: var(--brand); }
.contact-desc { color: var(--ink-2); margin-top: 20px; max-width: 400px; }
.contact-list { margin-top: 38px; display: flex; flex-direction: column; gap: 20px; }
.contact-list li { display: flex; gap: 18px; align-items: flex-start; }
.c-label {
  flex-shrink: 0; width: 72px; font-size: 13px; letter-spacing: .2em; color: var(--gold);
  border-right: 1px solid var(--line); padding-right: 18px; padding-top: 3px;
}
.contact-list p { font-size: 15px; color: var(--ink); }
.contact-seal { width: 106px; height: 106px; margin-top: 42px; opacity: .95; object-fit: contain; animation: floaty 6s ease-in-out infinite; }

.contact-form-wrap {
  background: var(--card); border: 1px solid var(--line); padding: 42px 40px;
  position: relative; box-shadow: var(--shadow-sm);
}
.contact-form-wrap::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--gold-pale); pointer-events: none; }
.contact-form-wrap h3 { font-family: var(--font-serif); font-size: 26px; letter-spacing: .1em; color: var(--ink); position: relative; }
.form-sub { color: var(--ink-3); font-size: 13.5px; margin: 8px 0 28px; position: relative; }

.join-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 18px; position: relative; }
/* hidden 属性必须覆盖 display:grid，否则提交成功后表单仍可见可重复提交 */
.join-form[hidden] { display: none !important; }
.field { display: flex; flex-direction: column; min-width: 0; }
.field-full { grid-column: 1 / -1; }
.field label { font-size: 13px; letter-spacing: .12em; margin-bottom: 9px; color: var(--ink-2); }
.field label i { color: var(--brand); font-style: normal; }
.field input, .field select, .field textarea {
  width: 100%; background: #fff; border: 1px solid var(--line-strong); padding: 12px 15px;
  color: var(--ink); font-size: 14.5px; transition: border-color .3s, box-shadow .3s; outline: none;
}
.field input::placeholder, .field textarea::placeholder { color: #b9ac9b; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--ring); }
.field select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23b08a4a' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center;
}
.field textarea { resize: vertical; min-height: 80px; }
.field .err { font-size: 12px; color: var(--danger); margin-top: 6px; min-height: 0; }
.field.invalid input, .field.invalid textarea { border-color: var(--danger); }

.field-captcha { grid-column: 1 / -1; }
.captcha-row { display: flex; gap: 12px; }
.captcha-row input { flex: 1; min-width: 0; }
.captcha-box {
  width: 128px; height: 46px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: var(--paper-2); color: var(--ink); font-family: var(--font-serif);
  font-size: 22px; letter-spacing: .3em; font-weight: 700; cursor: pointer; user-select: none;
  border: 1px dashed var(--gold); position: relative; overflow: hidden;
}
.captcha-box::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(120deg, transparent 30%, rgba(176,138,74,.18) 50%, transparent 70%);
  background-size: 200% 100%; animation: captchaShine 4s linear infinite;
}
@keyframes captchaShine { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.captcha-box:active { transform: scale(.96); }

.form-tip { grid-column: 1 / -1; font-size: 12px; color: var(--ink-3); text-align: center; margin-top: 4px; }

.form-success { text-align: center; padding: 30px 10px; }
.success-icon { width: 52px; height: 52px; color: var(--ok); margin: 0 auto 18px; }
.form-success h4 { font-family: var(--font-serif); font-size: 24px; letter-spacing: .12em; margin-bottom: 10px; color: var(--ink); }
.form-success p { color: var(--ink-2); font-size: 14.5px; }

/* ---------- 页脚 ---------- */
.site-footer { background: var(--dark); color: rgba(246,238,218,.72); }
.footer-top {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 50px; padding: 64px 0 48px;
}
.footer-brand .brand-seal { width: 66px; height: 66px; margin-bottom: 16px; object-fit: contain; filter: none; }
.footer-brand .brand-text strong { font-family: var(--font-serif); font-weight: 700; color: var(--cream); font-size: 21px; letter-spacing: .1em; white-space: nowrap; }
.footer-brand .brand-text em { color: var(--gold-bright); }
.footer-brand > p { margin-top: 14px; font-family: var(--font-serif); letter-spacing: .18em; color: var(--gold-bright); font-size: 14px; }
.footer-col h4 {
  font-family: var(--font-serif); font-size: 16px; letter-spacing: .2em; color: var(--cream);
  margin-bottom: 20px; position: relative; padding-bottom: 10px;
}
.footer-col h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 26px; height: 1px; background: rgba(246,238,218,.22); }
.footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 26px; align-content: start; }
.footer-links a { font-size: 14px; letter-spacing: .08em; opacity: .72; transition: all .3s; }
.footer-links a:hover { color: var(--gold-bright); opacity: 1; padding-left: 5px; }
.footer-contact p { font-size: 13.5px; opacity: .8; margin-bottom: 12px; letter-spacing: .03em; }
.footer-wechat { margin-top: 6px; display: inline-block; border: 1px dashed rgba(246,238,218,.3); padding: 8px 16px; font-size: 12.5px; letter-spacing: .1em; color: var(--stone); }
.footer-bottom { border-top: 1px solid rgba(246,238,218,.1); padding: 20px 0; }
.footer-bottom .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 12.5px; opacity: .55; }

/* 回到顶部 */
.to-top {
  position: fixed; right: 28px; bottom: 28px; z-index: 900; width: 46px; height: 46px;
  border: 1px solid var(--brand); color: var(--brand); background: rgba(255,253,249,.9);
  font-size: 20px; opacity: 0; pointer-events: none; transform: translateY(12px);
  transition: all .35s var(--ease); border-radius: 50%;
  box-shadow: var(--shadow-sm);
}
.to-top.show { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover { background: var(--brand); color: var(--cream); transform: translateY(-3px); }
.to-top:active { transform: scale(.93); transition-duration: .1s; }

/* ---------- 页面骨架（子页面共用） ---------- */
.page-main { padding-top: 96px; min-height: 62vh; }
.page-main--full { padding-top: 0; }
.page-crumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-bottom: 34px; font-size: 13.5px; letter-spacing: .08em; color: var(--ink-3);
}
.page-crumb a { color: var(--ink-3); border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; }
.page-crumb a:hover { color: var(--brand); border-color: var(--brand); }
.page-crumb span { color: var(--ink-3); }
.page-crumb em { font-style: normal; color: var(--gold); }

/* 无 JS 提示 */
.noscript-note {
  max-width: 640px; margin: 0 auto; padding: 20px 26px; text-align: center;
  border: 1px dashed var(--gold); color: var(--ink);
  background: var(--card); font-size: 14.5px; letter-spacing: .08em;
}

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
  .section { padding: 88px 0; }
  .brand-grid, .about-grid, .culture-inner, .contact-inner { grid-template-columns: 1fr; gap: 52px; }
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .star-grid { grid-template-columns: repeat(2, 1fr); }
  .store-grid { grid-template-columns: repeat(2, 1fr); }
  .process { grid-template-columns: repeat(3, 1fr); gap: 22px 16px; }
  .process li:not(:last-child)::after { display: none; }
}

/* 手机 / 平板（≤1024）：顶部的排布规则统一放在样式表末尾的「响应式」段里
   （那里在基础规则之后，能稳定覆盖 .brand-center 的绝对定位） */
@media (max-width: 1024px) {
  .site-header { background: transparent; }
  /* 窄屏文字横跨整幅，左侧留白式横向蒙版不再适用：
     改为竖向蒙版（文字区通透明亮），照片仍透出约 1/4 作为质感底纹 */
  .hero-slide-bg::after {
    background: linear-gradient(180deg,
      rgba(250,246,238,.84) 0%,
      rgba(250,246,238,.76) 42%,
      rgba(250,246,238,.88) 100%);
  }
}

@media (max-width: 900px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-band { gap: 14px; }
}

@media (max-width: 768px) {
  .section { padding: 66px 0; }
  /* 子页面顶距：让开固定头部（移动端约 78px）后只留一点点呼吸位 */
  .page-main { padding-top: 128px; }
  /* 首个区块自带 44px 内联上边距，手机端收到最小，避免「导航 → 内容」这段空太多 */
  .page-main > section:first-of-type { padding-top: 14px !important; }
  .section-head { margin-bottom: 44px; }
  .head-line span { width: 130px; }
  .head-sub { font-size: 14px; line-height: 1.8; }

  /* 头部收紧（品牌与栏目尺寸统一由 ≤1024 的移动端规则控制，这里只调内边距） */
  .site-header { padding: 12px 0; }
  .site-header.scrolled { padding: 8px 0; }
  .burger span { width: 22px; }
  /* 移动端表单控件 ≥16px 防 iOS 聚焦缩放 */
  .field input, .field select, .field textarea { font-size: 16px; }

  .hero-content { padding: 120px 0 110px; }
  .hero-title { letter-spacing: .08em; }
  .hero-eyebrow { letter-spacing: .32em; }
  .hero-sub { letter-spacing: .1em; margin-bottom: 34px; }
  .hero-cta { gap: 12px; }
  .hero-cta .btn { flex: 1; min-width: 140px; }
  .hero-dots { bottom: 30px; }

  .star-grid { grid-template-columns: 1fr; }
  .store-grid { grid-template-columns: 1fr; }
  .process { grid-template-columns: repeat(2, 1fr); }
  .stats-band { grid-template-columns: 1fr 1fr; }
  .trace-search { flex-wrap: wrap; }
  .trace-btn { width: 100%; }
  .trace-table { grid-template-columns: 1fr; padding: 4px 20px 18px; }
  .trace-row:nth-last-child(-n+2) { border-bottom: 1px dashed rgba(36,28,20,.16); }
  .trace-row:last-child { border-bottom: none; }
  .trace-head { flex-wrap: wrap; gap: 16px; padding: 22px 20px; }
  .trace-badge { margin-left: 0; }
  .trace-search-icon { display: none; }
  .trace-search input { padding: 12px 14px; }
  .trace-img { width: 105px; height: 140px; }
  .join-form { grid-template-columns: 1fr; }
  .field-full, .field-captcha { grid-column: auto; }
  .store-head h3::before, .store-head h3::after, .process-head h3::before, .process-head h3::after { display: none; }
  .contact-form-wrap { padding: 32px 22px; }
  .contact-list li { gap: 14px; align-items: baseline; }
  .c-label { width: auto; min-width: 68px; padding-right: 14px; letter-spacing: .1em; white-space: nowrap; }
  .footer-top { grid-template-columns: 1fr; gap: 36px; padding: 46px 0 36px; }
  .footer-brand .brand-text strong, .footer-brand .brand-text em { white-space: normal; }
  body::after { display: none; }
}

@media (max-width: 480px) {
  .cat-grid { grid-template-columns: 1fr; }
  .process { grid-template-columns: 1fr; }
  .stats-band { gap: 12px; }
  .stat-card { padding: 26px 12px 22px; }
  .section { padding: 56px 0; }
  .brand-seal { width: 50px; height: 50px; }
  .site-header.scrolled .brand-seal { width: 46px; height: 46px; }
  .brand-text strong { font-size: 25px; }
  .site-header.scrolled .brand-text strong { font-size: 24px; }
  .btn { padding: 14px 30px; }
  .main-nav { gap: 3px 10px; }
  .main-nav > a, .nav-drop-toggle { font-size: 12px; }
}

/* ---------- 无障碍与偏好 ---------- */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .hero-grains { display: none; }
  .js .reveal { opacity: 1; transform: none; }
  .nav-open .main-nav a, .nav-open .has-drop { animation: none; opacity: 1; transform: none; }
  .hero-slide-bg img { transform: none; }
}

/* 触屏按压反馈 */
.btn:active { transform: translateY(0) scale(.97); transition-duration: .1s; }
.cat-card:active, .star-card:active, .store-card:active, .stat-card:active, .process li:active {
  transform: translateY(0) scale(.99); transition-duration: .12s;
}
.main-nav > a:active { translate: 0 2px; color: var(--brand); }
.trace-sample:active { opacity: .65; }

/* =========================================================
   八马式布局改版（2026-09）
   A. 公共壳：居中 logo 分栏导航 + 五栏页脚 + 右侧悬浮咨询
   B. 首页 Hero：左文案 / 右产品陈列 / 底部声明
   C. 首页新增：品牌简介三卡 · 公司发展时间轴 · 未来发布产品
   ========================================================= */

/* ---------- A1. 导航：左三 + 居中 logo + 右三（仅桌面；移动端走全屏菜单） ---------- */
.nav-inner { position: relative; }
.nav-gap { flex: 0 0 clamp(150px, 15vw, 250px); }
.brand-center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 2; text-align: center;
}
/* 桌面上让六个栏目分列 logo 两侧；移动端不能加这条，否则会覆盖全屏菜单的居中排布 */
@media (min-width: 1025px) {
  .main-nav { flex: 1; justify-content: space-between; }
}
/* 导航配色全站统一：米白底 + 深墨字，滚动后加深底色。
   （首页曾用「深色首屏 + 浅色导航」的 header--dark，现已与全站统一为浅色主题，该类不再使用） */
/* 带 backdrop-filter / transform 的元素会成为 position:fixed 子元素的包含块，
   会把「全屏菜单」限制在导航条那一小条里（表现为菜单没背景、菜单项铺满屏幕）。
   菜单展开时先把这些属性清掉，保证面板铺满整屏。 */
body.nav-open .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; transform: none; }
@media (max-width: 1024px) {
  /* 移动端不需要磨砂：不用 backdrop-filter，既省性能，也避免上面的包含块问题 */
  .site-header.scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255, 253, 249, .97); }
}

/* ---------- A1b. 移动端全屏菜单（汉堡打开；桌面不显示） ---------- */
.mobile-menu { display: none; }
@media (max-width: 1024px) {
  .mobile-menu {
    display: flex; flex-direction: column; align-items: center;
    position: fixed; inset: 0; z-index: 999; overflow-y: auto;
    padding: 104px 26px calc(60px + env(safe-area-inset-bottom));
    background: radial-gradient(120% 55% at 50% 0%, rgba(176, 138, 74, .10), transparent 70%), var(--paper);
    opacity: 0; pointer-events: none; transition: opacity .3s var(--ease);
  }
  body.nav-open .mobile-menu { opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }
  .mm-main { display: flex; flex-direction: column; align-items: center; width: 100%; }
  .mobile-menu a {
    display: block; width: 100%; text-align: center;
    padding: 13px 10px; font-size: 17px; letter-spacing: .16em; color: var(--ink);
    border-bottom: 1px solid var(--line);
  }
  .mobile-menu a:active { color: var(--brand); background: var(--paper-2); }
  .mm-sep { width: 56px; height: 1px; background: var(--gold); opacity: .5; margin: 26px 0 18px; }
  .mm-foot { margin-top: auto; padding-top: 34px; font-size: 12.5px; color: var(--ink-3); letter-spacing: .06em; }
}

/* ---------- A2. 页脚：五栏 ---------- */
.footer-cols {
  display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)) 1.5fr;
  gap: 40px; padding: 62px 0 50px;
}
.footer-cols .footer-col a { display: block; }
.footer-cols .footer-col a {
  font-size: 14px; letter-spacing: .08em; opacity: .72; margin-bottom: 12px;
  transition: color .3s var(--ease), opacity .3s var(--ease), padding-left .3s var(--ease);
}
.footer-cols .footer-col a:hover { color: var(--cream); opacity: 1; padding-left: 5px; }
.footer-col--contact p { font-size: 13.5px; opacity: .8; margin-bottom: 10px; letter-spacing: .03em; }
.footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.footer-social { font-size: 12.5px; letter-spacing: .1em; }
.footer-mark-wrap { padding: 6px 0 26px; }
.footer-mark { width: 132px; height: 132px; object-fit: contain; opacity: .18; margin: 0 auto; }

/* ---------- A3. 右侧悬浮咨询 ---------- */
.side-widget {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%);
  z-index: 900; display: flex; flex-direction: column; overflow: hidden;
  /* 三个入口共用一块表面：只留一圈描边和一处投影，层级干净 */
  background: var(--card); border: 1px solid var(--line); border-right: none;
  border-radius: 10px 0 0 10px; box-shadow: var(--shadow-sm);
}
.sw-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 74px; padding: 14px 6px; background: transparent; border: none;
  color: var(--ink-2);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.sw-item + .sw-item { border-top: 1px solid var(--line); }
.sw-item em { font-style: normal; font-size: 12px; letter-spacing: .08em; line-height: 1.3; text-align: center; }
.sw-ico { font-family: var(--font-serif); font-size: 19px; line-height: 1; color: var(--brand); }
.sw-item:hover, .sw-item:focus-visible { background: var(--brand); color: var(--cream); }
.sw-item:hover .sw-ico, .sw-item:focus-visible .sw-ico { color: var(--cream); }
.sw-item:active { transform: scale(.97); }

/* ---------- B. 首页 Hero（八马式构图 + 全站统一的浅色主题） ----------
   构图：左侧文案 / 右侧产品陈列 / 底部声明；
   配色与其余页面一致：米白底 + 深墨字 + 朱砂红点缀（不再使用深色首屏）。
   浅色蒙版来自上方 .hero-slide-bg::after 的基础规则（原来这里覆盖成深色，已移除）。 */
.hero--bama .hero-content { max-width: 620px; padding: clamp(104px, 11vh, 128px) 0 clamp(180px, 22vh, 230px); }
.hero--bama .hero-eyebrow { color: var(--gold-deep); }
.hero--bama .hero-title {
  color: var(--ink); font-size: clamp(42px, 5.6vw, 76px); line-height: 1.18;
}
.hero--bama .hero-title .accent { color: var(--brand); }
.hero--bama .hero-sub { color: var(--ink-2); margin-bottom: 34px; }
/* 描边徽标（八马「股票代码 6980.HK」同型，配色改为浅底墨字 + 金色描边） */
.hero-badge {
  display: inline-flex; align-items: center; gap: 14px; margin-bottom: 26px;
  border: 1px solid rgba(176, 138, 74, .55); background: rgba(255, 253, 249, .72);
  padding: 10px 20px;
  color: var(--ink); letter-spacing: .12em; font-size: clamp(13px, 1.1vw, 15px);
}
.hero-badge span { font-family: var(--font-en); font-size: 12px; letter-spacing: .22em; color: var(--gold-deep); }
.hero-badge b { font-weight: 600; }
/* 右侧产品陈列：三张竖版实拍照错落排开
   顶部与左侧文案对齐（不再垂直居中），避免顶部 LOGO 与第一张图之间空一大截 */
.hero-showcase {
  position: absolute; right: max(96px, 4.5vw);
  /* 与左侧「标题 + 说明 + 按钮」整块的视觉重心对齐：900 高的屏上约 270px */
  top: clamp(220px, 30vh, 290px);
  z-index: 3; display: flex; align-items: center; gap: clamp(10px, 1.1vw, 20px);
}
.showcase-item {
  width: clamp(132px, 13.2vw, 228px); aspect-ratio: 3 / 4; overflow: hidden;
  border: 1px solid rgba(176, 138, 74, .5); background: var(--card);
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease);
}
.showcase-item img { width: 100%; height: 100%; object-fit: cover; }
.show-1 { transform: translateY(-26px); }
.show-2 { transform: translateY(14px); }
.show-3 { transform: translateY(-18px); }
.hero-showcase:hover .showcase-item { transform: translateY(0); }
/* 底部声明行（八马式「三大名茶全国销量第一」位置） */
.hero-claim {
  position: absolute; left: 0; right: 0; bottom: 78px; z-index: 4;
  text-align: center; padding: 0 6vw; pointer-events: none;
}
.hero-claim b {
  display: block; font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(19px, 2.1vw, 30px); letter-spacing: .16em; color: var(--brand);
}
.hero-claim em {
  display: block; font-style: normal; margin-top: 10px;
  font-size: clamp(11px, .95vw, 12.5px); letter-spacing: .1em; color: var(--ink-2);
}

/* ---------- C1. 品牌简介（纯文字，靠留白与大字撑气势） ---------- */
.brand-intro { padding: 130px 0 124px; background: var(--paper); }
.intro-head { text-align: center; }
.intro-en {
  display: block; font-family: var(--font-en); font-size: 12px; letter-spacing: .34em;
  color: var(--gold-deep); margin-top: 16px; margin-right: -.34em;
}
.intro-title {
  font-family: var(--font-serif); font-weight: 600; color: var(--ink);
  font-size: clamp(30px, 3.4vw, 46px); letter-spacing: .16em;
}
.intro-lead {
  margin: 56px auto 0; text-align: center;
  font-family: var(--font-serif); font-weight: 600; color: var(--ink);
  font-size: clamp(26px, 3.2vw, 46px); line-height: 1.6; letter-spacing: .1em;
}
.intro-lead em { font-style: normal; color: var(--brand); }
.intro-text {
  max-width: 880px; margin: 34px auto 0; text-align: center;
  color: var(--ink-2); font-size: clamp(15px, 1.2vw, 17px); line-height: 2.2; letter-spacing: .05em;
}

/* ---------- C2. 公司发展（3 年目标 / 5 年目标 / 10 年规划） ---------- */
.goals { padding: 120px 0 130px; background: var(--paper-2); }
.goals-sub {
  text-align: center; margin-top: -34px;
  font-family: var(--font-serif); color: var(--brand);
  font-size: clamp(15px, 1.35vw, 19px); letter-spacing: .28em;
}
.goal-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.2vw, 34px); margin-top: 74px;
}
.goal-item {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line);
  padding: 48px 40px 46px;
  transition: transform .35s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.goal-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-sm); border-color: var(--line-strong);
}
.goal-term { display: flex; align-items: baseline; gap: 12px; }
.goal-num {
  font-family: var(--font-en); color: var(--brand);
  font-size: clamp(56px, 5.4vw, 80px); line-height: .9; letter-spacing: .01em;
}
.goal-unit {
  font-family: var(--font-serif); color: var(--ink-3);
  font-size: clamp(17px, 1.4vw, 21px); letter-spacing: .2em;
}
.goal-rule { height: 1px; background: var(--line); margin: 28px 0 26px; }
.goal-head {
  font-family: var(--font-serif); color: var(--ink);
  font-size: clamp(20px, 1.8vw, 25px); letter-spacing: .12em; margin-bottom: 20px;
}
.goal-list li {
  position: relative; padding-left: 24px; margin-bottom: 13px;
  color: var(--ink-2); font-size: 14.5px; line-height: 2; letter-spacing: .02em;
}
.goal-list li:last-child { margin-bottom: 0; }
.goal-list li::before {
  content: ""; position: absolute; left: 0; top: 14px;
  width: 9px; height: 1px; background: var(--line-strong);
}
.goal-note {
  text-align: center; color: var(--ink-3); font-size: 12.5px;
  margin-top: 52px; letter-spacing: .08em;
}

/* ---------- C3. 未来发布产品（深色预告带；位于「产品中心」页，不再出现在首页） ---------- */
.upcoming {
  padding: 96px 0 104px;
  background: linear-gradient(158deg, #241610 0%, #3a1d16 46%, #4d221a 100%);
}
.upcoming .head-en { color: var(--gold-bright); }
.upcoming .head-title { color: var(--cream); }
.upcoming .head-title span { color: var(--gold-bright); }
.upcoming .head-line span { background: linear-gradient(90deg, var(--gold-bright), rgba(201,165,94,0)); }
.up-sub { text-align: center; color: var(--stone); font-size: 14.5px; letter-spacing: .08em; margin-top: 22px; }
.up-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px); margin-top: 52px; }
.up-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: rgba(255,253,249,.05); border: 1px solid rgba(201,165,94,.24);
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.up-card:hover { background: rgba(255,253,249,.09); border-color: rgba(201,165,94,.55); transform: translateY(-4px); }
.up-media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; }
.up-media img { width: 100%; height: 100%; object-fit: cover; }
.up-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24,13,7,.1), rgba(24,13,7,.55)); }
.up-badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: var(--gold-bright); color: #2a1a12;
  font-size: 11.5px; letter-spacing: .16em; padding: 6px 14px;
}
.up-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.up-cat { font-family: var(--font-en); font-size: 11px; letter-spacing: .3em; color: var(--gold-bright); }
.up-body h3 { font-family: var(--font-serif); font-size: clamp(19px, 1.6vw, 23px); color: var(--cream); letter-spacing: .1em; margin: 12px 0 10px; }
.up-body p { font-size: 13.5px; color: var(--stone); line-height: 1.95; letter-spacing: .02em; }
.up-link {
  align-self: flex-start; margin-top: auto; padding-top: 18px;
  font-size: 13px; letter-spacing: .1em; color: var(--gold-bright);
  border-bottom: 1px solid rgba(201,165,94,.45); padding-bottom: 3px;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.up-link:hover { color: var(--cream); border-color: var(--cream); }
.up-note { text-align: center; font-size: 12.5px; color: var(--stone-light); margin-top: 36px; letter-spacing: .06em; }

/* ---------- 响应式 ---------- */
@media (max-width: 1180px) {
  /* 窄桌面：右侧悬浮咨询条固定占 74px，产品陈列再左让，避免压住图片 */
  .hero-showcase { right: 96px; }
  .showcase-item { width: clamp(104px, 11vw, 140px); }
}
@media (max-width: 1024px) {
  /* 移动端顶部排布统一由上面的「≤1024 移动端顶部」规则控制，这里只管其它元素 */
  .side-widget { display: none; }
  .footer-cols { grid-template-columns: repeat(3, 1fr); gap: 32px; padding: 48px 0 40px; }
  .footer-col--contact { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  /* ===== 移动端首屏：与官网（桌面端）同一套视觉 =====
     实景照片 + 米白蒙版 + 深墨字 + 金色描边徽标 + 品牌红按钮，
     只做尺寸与排布的自适应，不换配色、不另做一套。 */
  .hero--bama .hero-slide { align-items: flex-start; padding: 0 26px; }
  .hero--bama .container { width: 100%; }
  .hero--bama .hero-content {
    display: flex; flex-direction: column;
    /* 撑到「屏高 − 112px」：底部圆点上方留 ~52px，多出来的高度交给 .hero-spacer */
    min-height: calc(100vh - 112px);
    /* 整块（标题 → 按钮）往下移，让上半屏的实景照片透气 */
    padding: 168px 0 0;
    max-width: none;
  }
  /* 英文眉标：收窄字距，保证一行放得下 */
  .hero--bama .hero-eyebrow { font-size: 10px; letter-spacing: .22em; margin-bottom: 16px; }
  .hero--bama .hero-title { font-size: 40px; margin-bottom: 20px; }
  /* 徽标沿用桌面的金色描边框，仅缩小尺寸 */
  .hero-badge { padding: 8px 14px; gap: 10px; font-size: 12.5px; margin-bottom: 18px; }
  .hero-badge span { font-size: 10px; letter-spacing: .18em; }
  .hero--bama .hero-sub { font-size: 14px; line-height: 1.9; margin-bottom: 0; }

  /* 产品图：桌面上在右侧，手机端横排放在文案下方（同一批产品实拍） */
  .hero--bama .hero-showcase {
    position: absolute; left: 26px; right: 26px; bottom: 24vh; top: auto;
    transform: none; justify-content: center; gap: 12px;
  }
  .hero--bama .showcase-item { width: 92px; height: 122px; }
  .hero--bama .show-1, .hero--bama .show-2, .hero--bama .show-3 { transform: none; }

  /* 行动区：与桌面同为「实底主按钮 + 描边次按钮」；
     align-items: center 让两颗按钮（内边距不同）在框内居中，矮屏下也不会突出框外压到产品图 */
  .hero--bama .hero-cta {
    margin: 26px 0 0; padding-top: 0; gap: 12px; align-items: center; flex-wrap: nowrap;
  }
  .hero--bama .hero-cta .btn { flex: 1 1 0; min-width: 0; padding: 15px 0; font-size: 14px; letter-spacing: .12em; }

  /* 底部声明行与圆点：沿用桌面的品牌红字与深色圆点 */
  .hero-claim { bottom: 100px; padding: 0 6vw; }
  .hero-claim b { font-size: 16px; }
  .hero-claim em { font-size: 11px; }

  .up-grid { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }

  /* ---------- 手机端各区块的纵向节奏（原样照搬桌面会让手机页面拉得很长） ---------- */
  .brand-intro, .goals, .upcoming { padding: 62px 0 68px; }
  .intro-lead { margin-top: 30px; }
  /* 英文小标在窄屏收窄字距，保证一行放得下（原来会折成两行） */
  .intro-en { letter-spacing: .26em; font-size: 11px; margin-right: -.26em; }
  .intro-text { line-height: 2; margin-top: 26px; text-align: left; }

  /* 3 年 / 5 年 / 10 年目标：窄屏改为竖向排列，并把卡片整体收紧 */
  .goal-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 40px; }
  .goal-item { padding: 26px 22px 26px; }
  .goal-num { font-size: 44px; }
  .goal-unit { font-size: 16px; letter-spacing: .14em; }
  .goal-rule { margin: 18px 0 16px; }
  .goal-head { font-size: 19px; margin-bottom: 14px; }
  .goal-list li { margin-bottom: 10px; line-height: 1.8; font-size: 14px; padding-left: 20px; }
  .goal-list li::before { top: 12px; }
  .goals-sub { margin-top: -20px; letter-spacing: .16em; }
  .goal-note { margin-top: 32px; font-size: 12px; }

  /* 页脚：手机上两列，联系方式占满一行 */
  .footer-cols { gap: 26px 20px; padding: 44px 0 32px; }
  .footer-cols .footer-col a { margin-bottom: 10px; font-size: 13.5px; }
  .footer-mark { width: 96px; height: 96px; }
}

/* 移动端产品图：排在按钮下方的内容流里（.hero-inline-show），任何屏高都看得到。
   桌面端沿用右侧绝对定位的 .hero-showcase，故这里隐藏流内那一组。 */
.hero-inline-show, .hero-claim-inline, .hero-spacer { display: none; }

@media (max-width: 900px) {
  .hero--bama .hero-showcase { display: none; }        /* 移动端只保留流内这一组 */
  /* 标题：常规手机 40px；极窄屏（≤360px）跟着屏宽缩，不会撑破一行 */
  .hero--bama .hero-title { font-size: clamp(30px, 10.3vw, 40px); }

  /* 产品图：三张等分一行，宽度随屏幕自适应（高度按原图 3:4 自动算），
     大屏手机最多 124px 宽；两侧各借 10px 让图片再大一点。 */
  .hero-inline-show {
    display: flex; justify-content: center; align-items: flex-start;
    gap: 10px;
    margin: 26px -10px 0;
  }
  .hero-inline-show .his-item {
    flex: 1 1 0; min-width: 0; max-width: 124px;
    overflow: hidden;
    border: 1px solid rgba(201, 165, 94, .45);
    background: rgba(255, 253, 249, .06);
  }
  /* 用图片自身比例定高（三张都是 900×1200），任何浏览器都支持，不依赖 aspect-ratio */
  .hero-inline-show .his-item img { width: 100%; height: auto; display: block; }

  /* 弹性留白：flex-grow 吃掉多余高度 → 屏幕够高时把「文案 → 按钮 → 产品图」铺到接近满屏；
     空间不够时收到 0（产品图自身的 margin-top 仍是最小间距），所以矮屏不会被挤动 */
  .hero-spacer { display: block; flex: 1 1 0; min-height: 0; }

  /* 底部声明行：手机端排进内容流（跟在产品图之后），随页面自然落位，永远不会压到图片 */
  .hero-claim { display: none; }
  .hero-claim-inline { display: block; margin: 24px 0 0; text-align: center; }
  .hero-claim-inline b {
    display: block; font-family: var(--font-serif); font-weight: 600;
    font-size: 16px; line-height: 1.5; letter-spacing: .1em; color: var(--brand);
  }
  .hero-claim-inline em {
    display: block; font-style: normal; font-size: 11px; margin-top: 8px;
    letter-spacing: .04em; color: var(--ink-2);
  }
}

/* 屏高 ≤880px：「文案 → 按钮 → 产品图」之后已没有空间，底部声明行收掉 */
@media (max-width: 900px) and (max-height: 880px) {
  .hero-claim-inline { display: none; }
}

/* 屏高 ≤860px（多数手机浏览器的可视区就在这一档）：
   顶部 LOGO 是固定定位、实高 116px，文案的上内边距必须让开它，故 168 → 128。 */
@media (max-width: 900px) and (max-height: 860px) {
  .hero--bama .hero-content { padding-top: 128px; }
}

/* 矮屏（≤760px）：字号、间距、产品图各收一档，保证底部轮播圆点上方不会压到图 */
@media (max-width: 900px) and (max-height: 760px) {
  .hero--bama .hero-content { padding-top: 124px; min-height: calc(100vh - 112px); }
  .hero-inline-show { margin-top: 16px; }
  .hero-inline-show .his-item { max-width: 96px; }
  .hero--bama .hero-title { font-size: 36px; margin-bottom: 14px; }
  .hero--bama .hero-badge { padding: 7px 12px; margin-bottom: 12px; }
  .hero--bama .hero-cta { margin-top: 18px; }
  .hero--bama .hero-sub { font-size: 13.5px; }
}

/* 更矮（≤640px）：说明段已放不下，收掉；产品图再小一档 */
@media (max-width: 900px) and (max-height: 640px) {
  .hero--bama .hero-sub { display: none; }
  .hero-inline-show .his-item { max-width: 84px; }
}

/* 极矮屏（≤580px）：圆点已和产品图抢位置，收掉圆点（手势左右滑动照常可用） */
@media (max-width: 900px) and (max-height: 580px) {
  .hero-dots { display: none; }
}

/* 极矮屏（≤560px，多为手机横屏）：收回产品图、圆点与英文眉标，只留「标题 + 按钮」 */
@media (max-width: 900px) and (max-height: 560px) {
  .hero-inline-show { display: none; }
  .hero-dots { display: none; }
  .hero--bama .hero-eyebrow { display: none; }
  .hero--bama .hero-content { padding-top: 120px; min-height: calc(100vh - 104px); }
  .hero--bama .hero-title { font-size: 30px; margin-bottom: 14px; }
  .hero-badge { padding: 6px 12px; font-size: 12px; margin-bottom: 12px; }
  .hero--bama .hero-cta { margin-top: 16px; }
}

/* 极窄手机（宽 ≤340px，如 320px 宽的老机型）：字号与产品图再收一档 */
@media (max-width: 340px) {
  .hero--bama .hero-eyebrow { font-size: 9px; margin-bottom: 12px; }
  .hero--bama .hero-title { font-size: 30px; margin-bottom: 12px; }
  .hero-badge { padding: 6px 10px; font-size: 11.5px; margin-bottom: 10px; }
  .hero--bama .hero-sub { font-size: 13px; }
  .hero-inline-show { margin-top: 14px; }
  .hero-inline-show .his-item { max-width: 80px; }
  .hero--bama .hero-cta { margin-top: 16px; }
}

@media (max-width: 640px) {
  .hero-claim { bottom: 96px; }
  .hero-claim b { font-size: 15.5px; letter-spacing: .06em; }
  .hero-claim em { display: none; }
  .hero-badge { padding: 8px 14px; gap: 10px; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  .footer-mark { width: 104px; height: 104px; }
  .footer-bottom-inner { justify-content: center; text-align: center; }
}

/* =========================================================
   移动端顶部（≤1024）—— 与八马一致：LOGO 居中 + 栏目一行
   放在样式表最后：这样能稳定覆盖前面基础规则里的绝对定位等设定。
   右上角保留汉堡按钮，打开的是完整菜单（含六大品类 / 年度单品 / 未来新品）。
   ========================================================= */
@media (max-width: 1024px) {
  /* 移动端顶部：只保留居中的 LOGO + 右上角汉堡；
     全部栏目与品类都在汉堡打开的全屏菜单里（见 .mobile-menu） */
  .nav-inner { flex-direction: row; justify-content: center; align-items: center; }
  .brand-center { order: 1; position: static; left: auto; top: auto; transform: none; }
  /* 印章在上、品牌名在下，两者各自居中——这样「祥冠源」三个字正好在画面正中（八马同款做法） */
  .brand { flex-direction: column; align-items: center; gap: 3px; }
  .brand-seal { width: 46px; height: 46px; }
  .site-header.scrolled .brand-seal { width: 42px; height: 42px; }
  .brand-text { align-items: center; }
  .brand-text strong { font-size: 27px; letter-spacing: .16em; margin-right: -.16em; }
  .site-header.scrolled .brand-text strong { font-size: 25px; }
  .brand-text em { font-size: 9px; letter-spacing: .22em; margin-right: -.22em; margin-top: 2px; }
  .main-nav { display: none; }          /* 顶部不再列出栏目，避免与菜单重复 */
  .burger {
    order: 2; display: flex;
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    z-index: 1001; padding: 10px 0 10px 12px;
  }
  .nav-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-open .burger span:nth-child(2) { opacity: 0; }
  .nav-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}


/* =========================================================
   品牌与标题专用宋体：思源宋体（Noto Serif SC，SIL OFL 1.1）子集，
   只含站内标题实际用到的字（303 字 ≈ 39KB），自托管、不依赖外部 CDN。
   这样在任何系统（含没装思源宋体的 Windows / Android）上都显示同一款好看的宋体。
   ========================================================= */
@font-face {
  font-family: "XGY Serif";
  src: url("assets/fonts/xgy-serif.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
.brand-text strong, .brand-name, .foot-slogan,
.hero-title, .intro-title, .intro-lead,
.head-title, .head-title span, .star-head h3,
.goal-head, .goal-num {
  font-family: "XGY Serif", var(--font-serif);
}

/* ============================================================
   移动端页脚：只保留最下面的两行（版权 + 公众号）
   隐藏掉的：栏目导航（关于祥冠源 / 产品中心 / 服务支持 / 招商加盟 / 联系我们）、
            联系我们的地址电话邮箱、底部 logo 水印
   只在手机端（≤900px，与移动端导航同一断点）生效；电脑端页脚完整保留。
   联系方式在手机端仍可从「联系我们」页面与右侧悬浮按钮进入。
   ============================================================ */
@media (max-width: 900px) {
  .site-footer .footer-cols,
  .site-footer .footer-mark-wrap { display: none !important; }

  /* 留下的版权行：居中排布；底部留出「回到顶部」悬浮按钮的位置，
     避免右上角那个 46px 圆钮压到文案上（它固定在 right/bottom 28px） */
  .site-footer .footer-bottom { padding: 16px 0 76px; }
  .site-footer .footer-bottom-inner {
    justify-content: center; text-align: center; flex-direction: column; gap: 6px;
  }
}