/* =====================================================================
 *  答蟹大闸蟹 —— 站点外壳样式（商城 / 分销页共用）
 *
 *  这份文件是把首页 index.html 里那套已经调好的版式抽出来的：
 *  同一套顶栏、首屏、区块标题、产品卡、页脚、滚动渐显和响应式断点。
 *  商城和分销页引用它，就和首页长在同一个模子里，不会出现
 *  「首页是一套、商城是另一套」的割裂感。
 *
 *  首页自己仍然用它内嵌的样式，本文件不影响首页，改这里不会改坏首页。
 *  依赖 style.css（.card / .field / .btn / .alert / .badge / .kv 等基础件）。
 * ===================================================================== */

@font-face{
  font-family:'DaCrab Serif';
  src:url('lib/title-serif.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  /* 标题字体：宋体笔画有粗细对比，比黑体更像"食物"而不是"说明书"。
     和首页用的是同一串回退链。 */
  --serif:'DaCrab Serif',"Songti SC","SimSun","Source Han Serif SC","Noto Serif CJK SC",serif;
  --red:#b81d22; --red-deep:#8c1419; --gold:#c9a35a; --gold-lt:#e3c98f;
  --cream:#fbf4e9; --line:#ece0cf;
  --neutral:#f4f2ef;      /* 微暖的浅灰，区块交替底色 */
  --ink-1:#1d1b1a;
  --ink-2:#6b6560;
  --content:1100px;
  --narrow:640px;
  --gutter:16px;
}

*{ box-sizing:border-box; }
body{
  margin:0; background:#fff; color:var(--ink-1);
  letter-spacing:.01em; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
.app{ max-width:none; margin:0 auto; background:#fff; overflow:hidden; }

/* 背景通栏 + 内容居中：靠左右内边距把内容挤到中间，不必改 HTML 结构 */
.topbar,.hero,.sec,.foot{
  padding-left:  max(var(--gutter), calc((100% - var(--content)) / 2));
  padding-right: max(var(--gutter), calc((100% - var(--content)) / 2));
}
/* 要填要读的东西不能拉太宽，一行字横跨整屏没法读 */
.func{ max-width:var(--narrow); margin-left:auto; margin-right:auto; }

/* ============ 顶栏 ============ */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:8px;
  color:#fff; padding-top:10px; padding-bottom:10px;
  background:rgba(109,16,20,.94);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  backdrop-filter:saturate(180%) blur(18px);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .topbar{ background:#6d1014; }
}
.topbar .tlogo{ height:30px; width:30px; border-radius:50%; background:#fff; object-fit:contain; flex:0 0 auto; }
.topbar .tname{ font-size:16px; font-weight:600; letter-spacing:1.5px;
  font-family:var(--serif); }
.topbar .tnav{ margin-left:auto; display:flex; gap:14px; font-size:13px; }
.topbar .tnav a{ text-decoration:none; color:#fff; opacity:.75; transition:opacity .2s; white-space:nowrap; }
.topbar .tnav a:hover{ opacity:1; }
.topbar .tnav a.on{ opacity:1; font-weight:600; }

/* ---- 标题一律宋体（这一组和首页 index.html 里的选择器保持一致，
       少一个就会出现"同为标题却两种字体"的割裂感） ---- */
.hero h1,.hero .slogan,.sec-h .t,.prod .pname,.feat .ti,.foot .fn{
  font-family:var(--serif);
  font-weight:700;
}

/* ============ 首屏 ============ */
.hero{
  position:relative; overflow:hidden; color:#fff; text-align:center;
  background:linear-gradient(168deg,#7c1216 0%,#5d0d10 55%,#3a0709 100%);
  padding-top:clamp(52px,8vw,120px);
  padding-bottom:clamp(56px,8.5vw,128px);
}
.hero::before,.hero::after{ display:none; }   /* style.css 里那只角落大蟹水印，首页也是关掉的 */
.hero .logo{
  display:block; width:auto; max-width:80%; max-height:150px; height:auto;
  background:#fff; border-radius:clamp(14px,1.4vw,22px);
  padding:12px 18px; margin:0 auto 12px;
}
.hero h1{
  margin:6px 0 2px; font-weight:700;
  font-size:clamp(30px,5.4vw,66px); letter-spacing:6px;
}
.hero .en{ font-size:clamp(11px,.95vw,14px); letter-spacing:8px; color:var(--gold-lt); opacity:.7; }
.hero .slogan{
  font-size:clamp(17px,2.1vw,30px); font-weight:600; color:#fff;
  margin-top:clamp(18px,2vw,32px); line-height:1.45;
}
.hero .slogan b{ color:var(--gold-lt); }
.hero .sub{ font-size:clamp(13px,1.15vw,17px); opacity:.72; margin-top:clamp(8px,.9vw,14px); }
.cta{ display:flex; gap:clamp(12px,1.4vw,16px); justify-content:center; margin-top:clamp(22px,2.6vw,40px); flex-wrap:wrap; }
.cta a{
  flex:1 1 150px; max-width:200px; text-decoration:none;
  background:var(--red); color:#fff; border-radius:999px;
  font-weight:600; letter-spacing:.5px;
  padding:clamp(12px,1.15vw,17px) 0;
  font-size:clamp(14.5px,1.2vw,17px);
  transition:opacity .2s;
}
.cta a:hover{ opacity:.85; }
.cta a.ghost{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.5); }

/* ============ 区块 ============ */
.sec{
  background:#fff;
  padding-top:clamp(56px,7.5vw,108px);
  padding-bottom:clamp(56px,7.5vw,108px);
}
.sec.alt{ background:var(--neutral); }
.sec-h{ text-align:center; margin-bottom:clamp(28px,3.4vw,52px); }
.sec-h .t{
  display:block;
  font-size:clamp(26px,3.6vw,46px); font-weight:700;
  line-height:1.22; letter-spacing:.5px; color:var(--ink-1);
}
.sec-h .s{
  font-size:clamp(14.5px,1.35vw,20px); color:var(--ink-2);
  margin-top:clamp(10px,1vw,16px); line-height:1.6;
}

/* ============ 四宫格卖点 ============ */
.feat{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.6vw,18px); }
.feat .it{
  border:none; box-shadow:none; text-align:center;
  border-radius:clamp(14px,1.4vw,22px);
  padding:clamp(24px,2.6vw,38px) clamp(16px,1.6vw,22px);
}
.sec .feat .it{ background:var(--neutral); }
.sec.alt .feat .it{ background:#fff; }
.feat .ic{ font-size:clamp(32px,3vw,44px); }
.feat .ti{ font-weight:700; color:var(--ink-1); margin-top:clamp(10px,1vw,16px); font-size:clamp(16px,1.4vw,20px); }
.feat .de{ font-size:clamp(12.5px,1.05vw,15px); color:var(--ink-2); margin-top:6px; }

/* ============ 产品卡 ============ */
.prods{ display:flex; flex-direction:column; gap:clamp(12px,1.6vw,18px); }
.prods > *{ min-width:0; }   /* 不加这行，卡片里 nowrap 的按钮会把四列网格顶破 */
.prod{
  min-width:0;
  border:none; box-shadow:none;
  border-radius:clamp(14px,1.4vw,22px);
  padding:clamp(20px,2.2vw,30px);
  display:flex; flex-direction:column;
}
.sec .prod{ background:var(--neutral); }
.sec.alt .prod{ background:#fff; }
.prod .pname{ font-size:clamp(16px,1.45vw,21px); font-weight:700; color:var(--ink-1); letter-spacing:.5px; }
.prod .pspec{ font-size:clamp(12.5px,1.05vw,15px); color:var(--ink-2); line-height:1.75; margin-top:6px; }
.prod .pb{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:auto; padding-top:clamp(12px,1.4vw,18px); }
.prod .pprice{ font-size:clamp(22px,2.1vw,31px); font-weight:700; color:var(--ink-1); white-space:nowrap; }
.prod .pprice small{ font-size:.45em; color:var(--ink-2); font-weight:400; margin-left:2px; }
.prod .pold{ font-size:clamp(12px,1vw,14px); color:var(--ink-2); text-decoration:line-through; margin-left:6px; font-weight:400; }
.prod .pbtn{
  text-decoration:none; border:none; cursor:pointer;
  background:var(--red); color:#fff; border-radius:999px;
  font-weight:600; letter-spacing:.5px; white-space:nowrap;
  font-size:clamp(13px,1.15vw,14px);
  padding:clamp(9px,1vw,10px) clamp(18px,1.8vw,20px);
  transition:opacity .2s;
}
.prod .pbtn:hover{ opacity:.85; }

/* ============ 表单卡 ============ */
.func{
  background:#fff; border:none;
  box-shadow:0 1px 3px rgba(0,0,0,.04),0 12px 40px rgba(0,0,0,.06);
  border-radius:clamp(16px,1.6vw,22px);
  padding:clamp(22px,2.4vw,36px) clamp(20px,2.2vw,36px);
}
.sec.alt .func{ background:#fff; }

/* ============ 页脚 ============ */
.foot{
  background:var(--ink-1); color:#a9a29c; text-align:center;
  padding-top:clamp(24px,2.6vw,34px); padding-bottom:clamp(24px,2.6vw,34px);
  font-size:clamp(12px,1vw,13.5px); line-height:1.9;
}
.foot .fn{
  color:#fff; font-weight:700; font-size:clamp(16px,1.5vw,19px); letter-spacing:2px;
}
.foot a{ color:#a9a29c; text-decoration:none; }
.foot a:hover{ color:#fff; }

/* ============ 滚动渐显 ============ */
@media (prefers-reduced-motion:no-preference){
  .reveal{ opacity:0; transform:translateY(26px); }
  .reveal.in{ opacity:1; transform:none; transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1); }
}

/* ============ 响应式 ============ */
@media (min-width:700px){
  body{ font-size:16px; }
  .hero .logo{ max-height:180px; }
  .prods{ display:grid; grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1000px){
  body{ font-size:16.5px; line-height:1.75; }
  /* 四列时单卡变窄，价格和按钮挤在一行会溢出，让按钮独占一行 */
  .prod .pbtn{ flex:1 1 100%; text-align:center; margin-top:4px; }
  .hero .logo{ max-height:210px; }
  .topbar{ padding-top:13px; padding-bottom:13px; }
  .topbar .tname{ font-size:18px; }
  .topbar .tlogo{ height:34px; width:34px; }
  .topbar .tnav{ gap:22px; font-size:14px; }
  .feat{ grid-template-columns:repeat(4,1fr); }
  .prods{ grid-template-columns:repeat(4,1fr); }
}