/* ============================================================
   村上云间 · 品牌页专属样式
   仅 cunshangyunjian.html 引用；在 style.css 之后加载。
   选择器以 .bp 开头；涉及页头/页脚时以 body.brand-page 收口
   （brand-page 类只加在本页 body 上），不触碰其他 7 页。
   视觉母题：云山（村上＝山乡产地，云间＝云端销路）＋ 描金字
   ============================================================ */

/* ---------- 零、页头：导航当前项＝金色描边框 ---------- */
.brand-page nav a.on{
  color:var(--bp-gold-ink);
  background:linear-gradient(180deg,rgba(200,150,62,.15),rgba(200,150,62,.06));
  box-shadow:inset 0 0 0 1px rgba(200,150,62,.58);
  font-weight:500;
}
.brand-page nav a.on:hover{color:#6E4E14;background:rgba(200,150,62,.21)}
.brand-page .nav-cta{box-shadow:inset 0 0 0 1px rgba(200,150,62,.42)}
.brand-page .logo-mark{background:linear-gradient(140deg,#0E2A22 0%,#175943 100%);box-shadow:inset 0 0 0 1px rgba(200,150,62,.34)}
.brand-page footer{border-top:1px solid rgba(200,150,62,.24)}
.brand-page .f-top{border-bottom-color:rgba(200,150,62,.20)}

/* 标题强调字：全页改描金（原为品牌绿） */
.bp h2.sec em{color:var(--bp-gold)}

.bp{
  --bp-deep:#05170F;
  --bp-ink:#08211A;
  --bp-green:#0E3A2C;
  --bp-green2:#175943;
  --bp-gold:#C8963E;
  --bp-gold2:#E3B45F;
  --bp-gold-ink:#8A6420;      /* 浅底上的深金，保证小字可读 */
  --bp-gold-dim:rgba(200,150,62,.46);
  --bp-gold-line:rgba(200,150,62,.32);
  --bp-hair:rgba(255,255,255,.13);
}

/* ============================================================
   一、品牌首屏
   ============================================================ */
.bp-hero{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(168deg,#05170F 0%,#0A2A20 42%,#154634 100%);
  min-height:clamp(520px,80vh,780px);
  display:flex;align-items:center;
  padding:76px 0 148px;
}
/* 光晕 */
.bp-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(780px 520px at 78% 6%,rgba(46,139,106,.42) 0%,transparent 62%),
    radial-gradient(640px 430px at 8% 90%,rgba(200,150,62,.20) 0%,transparent 64%);
}
/* 细网格 */
.bp-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:
    linear-gradient(rgba(255,255,255,.034) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.034) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 78% 66% at 50% 32%,#000 24%,transparent 100%);
  mask-image:radial-gradient(ellipse 78% 66% at 50% 32%,#000 24%,transparent 100%);
}
/* 云山剪影 */
.bp-hills{
  position:absolute;left:0;right:0;bottom:-1px;z-index:2;
  width:100%;height:auto;display:block;pointer-events:none;
}
.bp-hero .wrap{position:relative;z-index:3;text-align:center}

/* 上沿双角金饰 */
.bp-cn{
  position:absolute;width:60px;height:60px;z-index:3;pointer-events:none;
  border:1px solid var(--bp-gold-dim);
}
.bp-cn.tl{left:34px;top:34px;border-right:0;border-bottom:0}
.bp-cn.tr{right:34px;top:34px;border-left:0;border-bottom:0}

/* 面包屑（与页面 BreadcrumbList 结构化数据保持一致） */
.bp-crumb{
  font-size:12px;color:rgba(255,255,255,.32);
  letter-spacing:.6px;margin-bottom:24px;
}
.bp-crumb a{transition:color .2s}
.bp-crumb a:hover{color:var(--bp-gold2)}
.bp-crumb span{opacity:.5;margin:0 7px}

/* 眉标：公司 → 品牌 的从属关系 */
.bp-kicker{
  display:inline-flex;align-items:center;gap:15px;
  font-size:13px;letter-spacing:.24em;text-indent:.24em;
  color:var(--bp-gold2);margin-bottom:34px;
}
.bp-kicker::before,.bp-kicker::after{
  content:"";width:42px;height:1px;background:var(--bp-gold-dim);flex:0 0 auto;
}

/* 品牌主标 */
.bp-title{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(2.7rem,8.4vw,6.4rem);
  line-height:1.12;letter-spacing:.16em;text-indent:.16em;
  margin:0 0 28px;
  text-shadow:0 6px 46px rgba(0,0,0,.42);
}
.bp-title em{font-style:normal;color:var(--bp-gold2)}

/* 金色分隔线 */
.bp-rule{
  width:70px;height:2px;margin:0 auto 28px;
  background:linear-gradient(90deg,transparent,var(--bp-gold2),transparent);
}

/* 品牌口号 */
.bp-slogan{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.05rem,2.1vw,1.45rem);
  letter-spacing:.3em;text-indent:.3em;
  color:rgba(255,255,255,.90);margin:0 0 26px;
}
.bp-sub{
  color:rgba(255,255,255,.60);font-size:16px;line-height:1.98;
  max-width:640px;margin:0 auto 52px;
}

/* 三条定性事实（不含未核实数字） */
.bp-facts{
  display:grid;grid-template-columns:repeat(3,1fr);
  max-width:780px;margin:0 auto;
  border-top:1px solid var(--bp-gold-line);border-bottom:1px solid var(--bp-gold-line);
}
.bp-facts div{padding:26px 14px;text-align:center;border-right:1px solid rgba(200,150,62,.18)}
.bp-facts div:last-child{border-right:none}
.bp-facts b{
  display:block;font-family:var(--serif);font-size:17px;font-weight:700;
  color:var(--bp-gold2);letter-spacing:.7px;margin-bottom:8px;
}
.bp-facts span{font-size:12.5px;color:rgba(255,255,255,.50);letter-spacing:1.1px}

/* ============================================================
   二、品牌释义：描金巨字
   ============================================================ */
.bp-mean{background:var(--cream);padding:94px 0 86px}
.bp-mean .big{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(3rem,6.6vw,4.6rem);line-height:1;
  letter-spacing:.14em;text-indent:.14em;
  color:rgba(200,150,62,.24);
  margin-bottom:24px;
}
@supports (-webkit-text-stroke:1px red){
  .bp-mean .big{color:rgba(200,150,62,.10);-webkit-text-stroke:1.3px var(--bp-gold)}
}
.bp-mean-grid{display:grid;grid-template-columns:1fr 1fr;position:relative}
.bp-mean-grid::before{
  content:"";position:absolute;left:50%;top:8px;bottom:8px;width:1px;
  background:linear-gradient(to bottom,transparent,var(--bp-gold-line) 16%,var(--bp-gold-line) 84%,transparent);
}
.bp-mean-item{padding:0 56px}
.bp-mean-item:first-child{padding-left:0}
.bp-mean-item:last-child{padding-right:0}
.bp-mean-item h3{
  font-family:var(--serif);font-size:23px;font-weight:700;
  margin-bottom:16px;letter-spacing:.6px;
  display:flex;align-items:center;gap:13px;
}
.bp-mean-item h3::before{
  content:"";width:28px;height:2px;background:var(--bp-gold);flex:0 0 auto;
}
.bp-mean-item p{color:var(--muted);font-size:15px;line-height:2}

/* ============================================================
   三、主营品类：双列大图墙
   ============================================================ */
.bp-prod{
  background:linear-gradient(180deg,#fff 0%,var(--cream) 100%);
  padding:88px 0 96px;
}
.bp-prod .g3{grid-template-columns:repeat(2,1fr);gap:30px}
.bp-prod .prod{
  position:relative;border-radius:16px;border-color:rgba(14,42,34,.07);
  box-shadow:0 1px 2px rgba(14,42,34,.05),0 6px 20px rgba(14,42,34,.045);
}
/* 卡片顶部常驻金线 */
.bp-prod .prod::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(200,150,62,.62),transparent);
}
.bp-prod .prod:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 46px rgba(14,42,34,.13);
  border-color:rgba(200,150,62,.30);
}
.bp-prod .prod .media{overflow:hidden}
.bp-prod .prod .media img{transition:transform .75s cubic-bezier(.2,.7,.3,1)}
.bp-prod .prod:hover .media img{transform:scale(1.045)}
.bp-prod .prod-body{padding:26px 30px 30px}
.bp-prod .prod-body .from{
  display:inline-block;font-size:11.5px;letter-spacing:1.4px;text-transform:none;
  color:var(--bp-gold-ink);background:rgba(200,150,62,.08);
  border:1px solid rgba(200,150,62,.52);border-radius:4px;
  padding:3px 12px;margin-bottom:14px;
}
/* 通栏卡为 flex 容器，标签须避免被拉伸成满行 */
.bp-prod .prod-wide .prod-body .from{align-self:flex-start;border-color:rgba(200,150,62,.62)}
.bp-prod .prod-body h3{font-size:22px;margin-bottom:11px}
.bp-prod .prod-body p{font-size:14.5px;line-height:1.92}
.bp-prod .prod-wide .prod-body{padding:40px 56px}
.bp-prod .prod-wide .prod-body h3{font-size:26px}

/* ============================================================
   四、品牌主张：先下地，再开播（深色）
   ============================================================ */
.bp-craft{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(150deg,#08211A 0%,#0D3629 55%,#134434 100%);
  padding:94px 0 100px;
}
.bp-craft::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(660px 380px at 18% 0%,rgba(46,139,106,.34) 0%,transparent 64%);
}
.bp-hills-soft{
  position:absolute;left:0;right:0;bottom:-1px;z-index:1;
  width:100%;height:auto;display:block;pointer-events:none;
}
.bp-craft .wrap{position:relative;z-index:2}
.bp-craft h2.sec{color:#fff}
.bp-craft .eyebrow{color:var(--bp-gold2)}
.bp-craft .sec-head{margin-bottom:0}
.bp-craft .lead{color:rgba(255,255,255,.60)}
.bp-steps{
  display:grid;grid-template-columns:repeat(3,1fr);
  margin-top:58px;
}
.bp-step{padding:0 40px;position:relative}
.bp-step:first-child{padding-left:0}
.bp-step:last-child{padding-right:0}
.bp-step:not(:last-child)::after{
  content:"";position:absolute;right:0;top:32px;height:calc(100% - 46px);width:1px;
  background:linear-gradient(to bottom,var(--bp-gold-dim),transparent);
}
.bp-step .n{
  width:54px;height:54px;border-radius:50%;
  border:1px solid var(--bp-gold-dim);color:var(--bp-gold2);
  background:rgba(200,150,62,.08);
  box-shadow:0 0 0 7px rgba(200,150,62,.055),0 0 26px rgba(200,150,62,.15);
  display:grid;place-items:center;margin-bottom:24px;
  font-family:var(--serif);font-size:17px;font-weight:700;
}
.bp-step h3{
  font-family:var(--serif);font-size:21px;font-weight:700;
  color:#fff;letter-spacing:.7px;margin-bottom:13px;
}
.bp-step p{font-size:14.5px;color:rgba(255,255,255,.58);line-height:1.92}

/* ============================================================
   五、购买与合作
   ============================================================ */
.bp-chan{padding:88px 0 92px}
.bp-plats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bp-plat{
  position:relative;overflow:hidden;text-align:center;
  background:#fff;border:1px solid rgba(14,42,34,.075);border-radius:14px;
  padding:30px 16px 26px;
  transition:all .3s cubic-bezier(.2,.7,.3,1);
}
.bp-plat::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(200,150,62,.55),transparent);
  opacity:.6;transition:opacity .42s ease;
}
.bp-plat:hover{
  transform:translateY(-5px);
  box-shadow:0 14px 34px rgba(14,42,34,.11);
  border-color:rgba(200,150,62,.34);
}
.bp-plat:hover::before{opacity:1}
.bp-plat i{
  font-style:normal;display:inline-block;font-size:10.5px;
  color:var(--bp-gold-ink);letter-spacing:1.6px;margin-bottom:12px;
  padding:2px 9px;border-radius:3px;background:rgba(200,150,62,.13);
}
.bp-plat b{
  display:block;font-family:var(--serif);font-size:18px;font-weight:700;
  letter-spacing:1.2px;margin-bottom:10px;
}
.bp-plat span{font-size:12.5px;color:var(--muted);line-height:1.78;display:block}
.bp-coop{margin-top:52px}

/* ============================================================
   六、品牌问答
   ============================================================ */
.bp-faq{padding:0 0 96px}
/* 卡片顶部金线：由「仅悬停出现」改为「常驻淡金 + 悬停全亮」 */
.bp .card::before{width:100%;opacity:.42;transition:opacity .38s ease}
.bp .card:hover::before{opacity:1}
/* 图标底：浅金底 + 金描边 + 金线条 */
.bp .card .ico{background:rgba(200,150,62,.10);box-shadow:inset 0 0 0 1px rgba(200,150,62,.30)}
.bp .card .ico svg{stroke:var(--bp-gold-ink)}
.bp .card:hover .ico{background:var(--bp-ink)}
.bp .card:hover .ico svg{stroke:var(--bp-gold2)}

/* ============================================================
   七、行动召唤
   ============================================================ */
.bp-act{padding:0 0 100px}
.bp .cta{padding:68px 56px;border-radius:20px;box-shadow:0 0 0 1px rgba(200,150,62,.34),0 30px 70px rgba(5,23,15,.26)}
.bp .cta h2{font-size:33px}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width:1024px){
  .bp-mean-item{padding:0 36px}
  .bp-step{padding:0 26px}
  .bp-prod .prod-body{padding:24px 24px 26px}
}
@media (max-width:860px){
  .bp-hero{min-height:auto;padding:60px 0 104px}
  .bp-cn{display:none}
  .bp-facts{grid-template-columns:1fr}
  .bp-facts div{border-right:none;border-bottom:1px solid rgba(255,255,255,.085);padding:20px 12px}
  .bp-facts div:last-child{border-bottom:none}
  .bp-mean{padding:64px 0 58px}
  .bp-mean-grid{grid-template-columns:1fr;gap:46px}
  .bp-mean-grid::before{display:none}
  .bp-mean-item{padding:0}
  .bp-mean-item h3{font-size:20px}
  .bp-prod{padding:60px 0 64px}
  .bp-prod .g3{grid-template-columns:1fr;gap:22px}
  .bp-prod .prod-wide .prod-body{padding:24px 24px 26px}
  .bp-craft{padding:66px 0 70px}
  .bp-steps{grid-template-columns:1fr;gap:38px;margin-top:40px}
  .bp-step{padding:0}
  .bp-step::after{display:none!important}
  .bp-chan{padding:60px 0 64px}
  .bp-plats{grid-template-columns:repeat(2,1fr);gap:12px}
  .bp-faq{padding:0 0 66px}
  .bp-act{padding:0 0 70px}
  .bp .cta{padding:48px 24px;border-radius:16px}
  .bp .cta h2{font-size:23px}
}
@media (max-width:420px){
  .bp-plats{grid-template-columns:1fr}
  .bp-title{letter-spacing:.12em;text-indent:.12em}
}