/* =========================================================
   Compare2Best · 家居子站 (home.compare2best.com)
   共享设计系统 — 高端家居暖色调 (Home & Furniture)
   说明：本文件为全部子站页面共用的样式与组件库。
        开发交接时，CSS 变量与 figma-tokens.json 一一对应。
   ========================================================= */

/* ---------- 设计 Token ---------- */
:root{
  /* 色彩 — 中性暖底 */
  --bg:            #F7F2EA;   /* 暖米杏 */
  --bg-deep:       #EFE6D8;   /* 稍深沙色，用于分区 */
  --surface:       #FFFFFF;
  --surface-warm:  #FBF6EE;   /* 卡片暖白 */
  --border:        #E7DCCB;
  --border-strong: #D9C9B0;

  /* 文字 */
  --ink:        #2A211B;   /* 深咖墨 */
  --ink-soft:   #6B5D52;   /* 次要文字 */
  --ink-faint:  #9A8B7C;   /* 占位/辅助 */

  /* 品牌主色 — 焦糖/古铜 */
  --primary:       #A9744F;
  --primary-deep:  #7E5430;  /* 按钮/重点文字，WCAG AA 白字对比 ≥6.5:1 */
  --primary-soft:  #F0E2D4;

  /* 强调 — 金线 */
  --gold:        #C8A04C;
  --gold-deep:   #A8842F;
  --gold-soft:   #EFE2C2;

  /* 语义 */
  --success: #4F7A4E;
  --info:    #B07D4F;
  --warning: #C08A3E;
  --danger:  #B5563F;

  /* 字体 */
  --font-serif: "Noto Serif SC", "Songti SC", "STSong", Georgia, serif;
  --font-sans:  "Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono:  "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  /* 字号 (流式缩放) */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.375rem;
  --fs-2xl:  1.875rem;
  --fs-3xl:  2.5rem;
  --fs-4xl:  3.25rem;

  /* 间距 8pt 体系 */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.25rem; --s-6: 1.5rem;  --s-8: 2rem;    --s-10: 2.5rem;
  --s-12: 3rem;   --s-16: 4rem;   --s-20: 5rem;   --s-24: 6rem;

  /* 阴影 — 柔和暖影 */
  --sh-sm: 0 1px 2px rgb(42 33 27 / .06);
  --sh-md: 0 8px 22px rgb(42 33 27 / .08);
  --sh-lg: 0 18px 44px rgb(42 33 27 / .12);

  /* 圆角 */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px;

  /* 动效 */
  --t-fast: 150ms ease;
  --t-norm: 300ms cubic-bezier(.2,.7,.3,1);
}

/* ---------- 基础重置 ---------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--bg);
  font-size:var(--fs-base);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; }
.container{ width:100%; max-width:1200px; margin:0 auto; padding:0 var(--s-6); }
section{ padding:var(--s-20) 0; }
@media (max-width:640px){ section{ padding:var(--s-16) 0; } .container{ padding:0 var(--s-5); } }

h1,h2,h3,h4{ font-family:var(--font-serif); font-weight:600; line-height:1.2; color:var(--ink); letter-spacing:.01em; }
.eyebrow{
  font-family:var(--font-sans); font-size:var(--fs-xs); font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--primary-deep);
  display:inline-flex; align-items:center; gap:var(--s-2);
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--gold); display:inline-block; }
.section-head{ max-width:680px; margin-bottom:var(--s-12); }
.section-head h2{ font-size:var(--fs-3xl); margin:var(--s-3) 0 var(--s-4); }
.section-head p{ color:var(--ink-soft); font-size:var(--fs-lg); }

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  font-weight:600; font-size:var(--fs-sm); cursor:pointer; border:none;
  padding:.85rem 1.5rem; border-radius:var(--r-pill);
  transition:all var(--t-fast); user-select:none; white-space:nowrap;
}
.btn:focus-visible{ outline:2px solid var(--primary-deep); outline-offset:3px; }
.btn--primary{ background:var(--primary-deep); color:#fff; box-shadow:var(--sh-sm); }
.btn--primary:hover{ background:#6A4625; transform:translateY(-1px); box-shadow:var(--sh-md); }
.btn--gold{ background:linear-gradient(135deg,var(--gold) 0%,var(--gold-deep) 100%); color:#fff; }
.btn--gold:hover{ filter:brightness(1.05); transform:translateY(-1px); box-shadow:var(--sh-md); }
.btn--ghost{ background:transparent; color:var(--primary-deep); border:1.5px solid var(--border-strong); }
.btn--ghost:hover{ border-color:var(--primary); background:var(--primary-soft); }
.btn--sm{ padding:.55rem 1rem; font-size:var(--fs-xs); }
.btn--lg{ padding:1rem 2rem; font-size:var(--fs-base); width:100%; }

/* ---------- 徽标 ---------- */
.badge{
  display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-xs); font-weight:600;
  padding:4px 10px; border-radius:var(--r-pill); line-height:1.4;
  background:var(--surface-warm); border:1px solid var(--border); color:var(--ink-soft);
}
.badge--cert{ background:#F3EFE3; border-color:#E2D6BC; color:var(--primary-deep); }
.badge--cert svg{ color:var(--gold-deep); }
.badge--ok{ background:#EEF3EC; border-color:#D8E3D5; color:var(--success); }

/* =========================================================
   顶部导航（全站共用）
   ========================================================= */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(247,242,234,.82); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.nav__inner{ display:flex; align-items:center; gap:var(--s-8); height:72px; }
.brand{ display:flex; align-items:center; gap:var(--s-3); font-family:var(--font-serif); font-weight:700; font-size:1.15rem; }
.brand__mark{
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-deep) 100%);
  color:#fff; font-weight:700; box-shadow:var(--sh-sm);
}
.brand__mark span{ font-size:1.1rem; }
.brand small{ display:block; font-family:var(--font-sans); font-weight:500; font-size:.66rem; letter-spacing:.16em; color:var(--ink-faint); text-transform:uppercase; }
.nav__links{ display:flex; gap:var(--s-6); margin-left:auto; font-size:var(--fs-sm); font-weight:500; }
.nav__links a{ color:var(--ink-soft); padding:.4rem 0; position:relative; transition:color var(--t-fast); }
.nav__links a:hover{ color:var(--ink); }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--gold); transition:width var(--t-norm); }
.nav__links a:hover::after{ width:100%; }
.nav__cta{ display:flex; align-items:center; gap:var(--s-3); }
.nav__lang{ font-size:var(--fs-xs); color:var(--ink-faint); border:1px solid var(--border); border-radius:var(--r-pill); padding:.35rem .8rem; }
.burger{ display:none; background:none; border:none; cursor:pointer; flex-direction:column; gap:5px; padding:8px; }
.burger span{ width:22px; height:2px; background:var(--ink); border-radius:2px; transition:var(--t-fast); }
@media (max-width:920px){
  .nav__links, .nav__lang{ display:none; }
  .burger{ display:flex; }
  .nav__inner{ gap:var(--s-4); }
}
.mobile-menu{ display:none; flex-direction:column; gap:var(--s-2); padding:var(--s-4) var(--s-6) var(--s-6); border-bottom:1px solid var(--border); background:var(--surface); }
.mobile-menu.open{ display:flex; }
.mobile-menu a{ padding:.7rem 0; border-bottom:1px solid var(--border); color:var(--ink-soft); font-weight:500; }

/* =========================================================
   页头 / 面包屑（子页共用）
   ========================================================= */
.crumb{ font-size:var(--fs-sm); color:var(--ink-faint); padding:var(--s-6) 0 0; }
.crumb a:hover{ color:var(--primary-deep); }
.page-head{ padding:var(--s-6) 0 var(--s-8); }
.page-head h1{ font-size:var(--fs-3xl); margin:var(--s-3) 0; }
.page-head p{ color:var(--ink-soft); font-size:var(--fs-lg); max-width:48em; }

/* ---------- 网格工具类（化解跨页 .grid 冲突） ---------- */
.grid{ display:grid; gap:var(--s-6); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:980px){ .grid--4{ grid-template-columns:repeat(2,1fr); } .grid--3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr; } }

/* =========================================================
   Hero（首页）
   ========================================================= */
.hero{ position:relative; overflow:hidden; padding:var(--s-24) 0 var(--s-20); }
.hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(700px 380px at 82% 8%, rgba(200,160,76,.16), transparent 70%),
    radial-gradient(560px 420px at 6% 96%, rgba(169,116,79,.14), transparent 70%);
}
.hero__grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:var(--s-12); align-items:center; }
.hero h1{ font-size:clamp(2.2rem,4.4vw,3.4rem); margin:var(--s-4) 0 var(--s-5); }
.hero h1 em{ font-style:normal; color:var(--primary-deep); position:relative; }
.hero h1 em::after{ content:""; position:absolute; left:0; right:0; bottom:6px; height:10px; background:var(--gold-soft); z-index:-1; border-radius:4px; }
.hero__lead{ font-size:var(--fs-lg); color:var(--ink-soft); max-width:34em; }
.hero__search{
  display:flex; gap:var(--s-2); margin:var(--s-8) 0 var(--s-5);
  background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r-pill);
  padding:6px 6px 6px 8px; box-shadow:var(--sh-md); max-width:520px;
}
.hero__search input{ flex:1; border:none; outline:none; background:transparent; font-size:var(--fs-base); padding:0 var(--s-4); color:var(--ink); font-family:var(--font-sans); }
.hero__search input::placeholder{ color:var(--ink-faint); }
.hero__chips{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin-bottom:var(--s-8); }
.hero__chips button{ font-size:var(--fs-xs); color:var(--ink-soft); background:var(--surface-warm); border:1px solid var(--border); border-radius:var(--r-pill); padding:6px 12px; cursor:pointer; transition:var(--t-fast); }
.hero__chips button:hover{ border-color:var(--primary); color:var(--primary-deep); }
@media (max-width:920px){ .hero__grid{ grid-template-columns:1fr; gap:var(--s-10); } }

/* Hero 数据看板 */
.dashboard{
  background:linear-gradient(160deg,#2A211B 0%, #3A2C22 100%);
  border-radius:var(--r-lg); padding:var(--s-8); color:#fff; box-shadow:var(--sh-lg);
  position:relative; overflow:hidden;
}
.dashboard::after{ content:""; position:absolute; right:-40px; top:-40px; width:200px; height:200px; background:radial-gradient(circle,rgba(200,160,76,.35),transparent 70%); }
.dashboard__label{ font-size:var(--fs-xs); letter-spacing:.16em; text-transform:uppercase; color:#D9C7A8; display:flex; align-items:center; gap:var(--s-2); }
.dashboard__label::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(200,160,76,.25); }
.dashboard__grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-6); margin-top:var(--s-6); }
.stat__num{ font-family:var(--font-serif); font-size:var(--fs-3xl); font-weight:700; color:#fff; line-height:1; }
.stat__num span{ color:var(--gold); }
.stat__label{ font-size:var(--fs-sm); color:#CBB89A; margin-top:4px; }
.dashboard__foot{ margin-top:var(--s-8); padding-top:var(--s-5); border-top:1px solid rgba(255,255,255,.12); display:flex; align-items:center; gap:var(--s-2); font-size:var(--fs-xs); color:#CBB89A; flex-wrap:wrap; }

/* =========================================================
   3 级验证体系
   ========================================================= */
.verify{ background:var(--surface); }
.verify__steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-6); margin-top:var(--s-10); }
.vstep{ background:var(--surface-warm); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--s-8) var(--s-6); position:relative; transition:var(--t-norm); }
.vstep:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); border-color:var(--border-strong); }
.vstep__no{ font-family:var(--font-serif); font-size:var(--fs-2xl); color:var(--gold); font-weight:700; }
.vstep h3{ font-size:var(--fs-xl); margin:var(--s-2) 0 var(--s-3); }
.vstep p{ color:var(--ink-soft); font-size:var(--fs-sm); margin-bottom:var(--s-4); }
.vstep ul{ display:flex; flex-direction:column; gap:6px; }
.vstep li{ font-size:var(--fs-sm); color:var(--ink-soft); display:flex; gap:8px; align-items:flex-start; }
.vstep li::before{ content:"✓"; color:var(--success); font-weight:700; flex-shrink:0; }
.vstep__arrow{ position:absolute; right:-22px; top:50%; transform:translateY(-50%); color:var(--gold); font-size:1.5rem; z-index:2; }
@media (max-width:820px){ .verify__steps{ grid-template-columns:1fr; } .vstep__arrow{ display:none; } }

/* =========================================================
   热门品类（首页）
   ========================================================= */
.cats{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-5); }
.cat{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  padding:var(--s-6); transition:var(--t-norm); cursor:pointer; position:relative; overflow:hidden;
}
.cat:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); border-color:var(--border-strong); }
.cat__icon{ width:50px; height:50px; border-radius:13px; display:grid; place-items:center; background:var(--primary-soft); color:var(--primary-deep); margin-bottom:var(--s-4); }
.cat__icon svg{ width:26px; height:26px; }
.cat h3{ font-size:var(--fs-lg); margin-bottom:2px; font-family:var(--font-sans); font-weight:600; }
.cat p{ font-size:var(--fs-xs); color:var(--ink-faint); }
.cat__count{ font-size:var(--fs-xs); color:var(--primary-deep); font-weight:600; margin-top:var(--s-3); display:inline-block; }
.cat--feature{ grid-column:span 2; background:linear-gradient(135deg,var(--primary-soft),var(--surface)); display:flex; align-items:center; gap:var(--s-6); }
.cat--feature .cat__icon{ width:64px; height:64px; }
@media (max-width:980px){ .cats{ grid-template-columns:repeat(2,1fr); } .cat--feature{ grid-column:span 2; } }
@media (max-width:560px){ .cats{ grid-template-columns:1fr; } .cat--feature{ grid-column:span 1; flex-direction:column; align-items:flex-start; } }

/* =========================================================
   认证供应商展示（首页预览 + 供应商页 .sup-card）
   ========================================================= */
.suppliers{ background:var(--bg-deep); }
.sup-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-6); }
.sup-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  padding:var(--s-6); transition:var(--t-norm); display:flex; flex-direction:column; gap:var(--s-4);
}
.sup-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); }
.sup-card__top{ display:flex; align-items:center; gap:var(--s-4); }
.sup-card__logo{ width:52px; height:52px; border-radius:13px; background:linear-gradient(135deg,var(--primary),var(--primary-deep)); color:#fff; display:grid; place-items:center; font-family:var(--font-serif); font-weight:700; font-size:1.2rem; flex-shrink:0; }
.sup-card__name{ font-weight:700; font-size:var(--fs-base); }
.sup-card__meta{ font-size:var(--fs-xs); color:var(--ink-faint); }
.sup-card__verify{ margin-left:auto; text-align:right; }
.sup-card__verify .lv{ font-size:var(--fs-xs); font-weight:700; color:var(--success); background:#EEF3EC; border:1px solid #D8E3D5; border-radius:var(--r-pill); padding:3px 10px; display:inline-block; }
.sup-card__tags{ display:flex; flex-wrap:wrap; gap:6px; }
.sup-card__main{ font-size:var(--fs-xs); color:var(--ink-soft); }
.sup-card__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-2); padding-top:var(--s-4); border-top:1px dashed var(--border); }
.sup-card__stats div b{ font-family:var(--font-serif); font-size:var(--fs-lg); color:var(--ink); display:block; }
.sup-card__stats div span{ font-size:.68rem; color:var(--ink-faint); }
.sup-card__foot{ display:flex; gap:var(--s-2); margin-top:auto; }
.sup-card__foot .btn{ flex:1; font-size:var(--fs-xs); padding:.6rem; }
@media (max-width:920px){ .sup-grid{ grid-template-columns:1fr; } }

/* =========================================================
   高端材料专区（首页）
   ========================================================= */
.materials{ background:var(--surface); }
.mat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-5); margin-top:var(--s-10); }
.mat{ border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; background:var(--surface-warm); transition:var(--t-norm); }
.mat:hover{ box-shadow:var(--sh-md); transform:translateY(-3px); }
.mat__img{ height:120px; background:linear-gradient(135deg,var(--primary-soft),var(--gold-soft)); display:grid; place-items:center; }
.mat__img svg{ width:42px; height:42px; color:var(--primary-deep); }
.mat__body{ padding:var(--s-5); }
.mat__body h3{ font-size:var(--fs-base); font-family:var(--font-sans); font-weight:600; margin-bottom:4px; }
.mat__body p{ font-size:var(--fs-xs); color:var(--ink-soft); }
.mat__cert{ margin-top:var(--s-3); display:flex; gap:6px; flex-wrap:wrap; }
@media (max-width:900px){ .mat-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .mat-grid{ grid-template-columns:1fr; } }

/* =========================================================
   应用场景（首页卡片网格）
   ========================================================= */
.scenes{ background:var(--bg-deep); }
.scene-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5); margin-top:var(--s-10); }
.scene{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--s-6); transition:var(--t-norm); }
.scene:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); border-left:4px solid var(--gold); }
.scene__ico{ width:44px; height:44px; border-radius:12px; background:var(--primary-soft); color:var(--primary-deep); display:grid; place-items:center; margin-bottom:var(--s-4); }
.scene__ico svg{ width:24px; height:24px; }
.scene h3{ font-size:var(--fs-lg); font-family:var(--font-sans); font-weight:600; margin-bottom:6px; }
.scene p{ font-size:var(--fs-sm); color:var(--ink-soft); }
@media (max-width:880px){ .scene-grid{ grid-template-columns:1fr; } }

/* =========================================================
   AI 智能匹配（首页）
   ========================================================= */
.ai{ background:linear-gradient(160deg,#2A211B,#3A2C22); color:#fff; border-radius:var(--r-lg); padding:var(--s-16) var(--s-12); position:relative; overflow:hidden; margin:0 auto; max-width:1200px; }
.ai::before{ content:""; position:absolute; inset:0; background:radial-gradient(500px 300px at 90% 20%,rgba(200,160,76,.22),transparent 70%); }
.ai__inner{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:var(--s-12); align-items:center; }
.ai h2{ color:#fff; font-size:var(--fs-3xl); }
.ai p{ color:#CBB89A; font-size:var(--fs-lg); margin:var(--s-4) 0 var(--s-6); }
.ai__form{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--r-md); padding:var(--s-6); }
.ai__field{ margin-bottom:var(--s-4); }
.ai__field label{ font-size:var(--fs-xs); color:#D9C7A8; display:block; margin-bottom:6px; letter-spacing:.04em; }
.ai__field select, .ai__field input{ width:100%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:#fff; border-radius:var(--r-sm); padding:.7rem .9rem; font-size:var(--fs-sm); font-family:var(--font-sans); outline:none; }
.ai__field select option{ color:#2A211B; }
.ai__field select:focus, .ai__field input:focus{ border-color:var(--gold); }
.ai .btn{ width:100%; margin-top:var(--s-2); }
.ai__hint{ font-size:var(--fs-xs); color:#9A8B7C; margin-top:var(--s-3); text-align:center; }
@media (max-width:880px){ .ai__inner{ grid-template-columns:1fr; gap:var(--s-8); padding:var(--s-10) var(--s-6); } .ai{ padding:0; } }

/* =========================================================
   采购流程
   ========================================================= */
.flow{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-6); counter-reset:flow; margin-top:var(--s-10); }
.flow__step{ text-align:center; position:relative; padding:var(--s-6); }
.flow__num{ width:54px; height:54px; margin:0 auto var(--s-4); border-radius:50%; background:var(--primary-soft); color:var(--primary-deep); display:grid; place-items:center; font-family:var(--font-serif); font-weight:700; font-size:1.4rem; border:2px solid var(--gold-soft); }
.flow__step h3{ font-family:var(--font-sans); font-weight:600; font-size:var(--fs-lg); margin-bottom:6px; }
.flow__step p{ font-size:var(--fs-sm); color:var(--ink-soft); max-width:24em; margin:0 auto; }
.flow__line{ position:absolute; top:27px; right:-30px; width:60px; height:2px; background:repeating-linear-gradient(90deg,var(--gold) 0 8px,transparent 8px 16px); }
@media (max-width:820px){ .flow{ grid-template-columns:1fr; } .flow__line{ display:none; } }

/* =========================================================
   内容专题（首页）
   ========================================================= */
.guides{ background:var(--surface); }
.guide-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-6); margin-top:var(--s-10); }
.guide{ border:1px solid var(--border); border-radius:var(--r-md); padding:var(--s-6); transition:var(--t-norm); display:flex; flex-direction:column; gap:var(--s-3); }
.guide:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); border-color:var(--border-strong); }
.guide__tag{ font-size:var(--fs-xs); color:var(--primary-deep); font-weight:600; letter-spacing:.04em; }
.guide h3{ font-size:var(--fs-lg); font-family:var(--font-sans); font-weight:600; }
.guide p{ font-size:var(--fs-sm); color:var(--ink-soft); }
.guide__more{ font-size:var(--fs-sm); color:var(--primary-deep); font-weight:600; margin-top:auto; display:inline-flex; align-items:center; gap:6px; }
.guide__more svg{ width:14px; height:14px; flex:none; }
.prod-card__match svg{ width:13px; height:13px; flex:none; }
.gallery__badge svg{ width:15px; height:15px; flex:none; }
@media (max-width:880px){ .guide-grid{ grid-template-columns:1fr; } }

/* =========================================================
   CTA + 页脚
   ========================================================= */
.cta{ background:var(--surface-warm); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--s-16) var(--s-8); text-align:center; }
.cta h2{ font-size:var(--fs-3xl); margin-bottom:var(--s-4); }
.cta p{ color:var(--ink-soft); font-size:var(--fs-lg); max-width:40em; margin:0 auto var(--s-8); }
.cta__btns{ display:flex; gap:var(--s-4); justify-content:center; flex-wrap:wrap; }
footer{ background:#241C16; color:#C9BBA6; padding:var(--s-16) 0 var(--s-8); margin-top:var(--s-20); }
.foot__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:var(--s-8); }
.foot__brand{ font-family:var(--font-serif); font-size:1.3rem; color:#fff; display:flex; align-items:center; gap:var(--s-3); margin-bottom:var(--s-4); }
.foot__brand .brand__mark{ width:36px; height:36px; }
.foot p{ font-size:var(--fs-sm); max-width:30em; }
.foot h4{ color:#fff; font-family:var(--font-sans); font-size:var(--fs-sm); font-weight:600; letter-spacing:.04em; margin-bottom:var(--s-4); }
.foot a{ display:block; font-size:var(--fs-sm); color:#C9BBA6; padding:5px 0; transition:color var(--t-fast); }
.foot a:hover{ color:var(--gold); }
.foot__bar{ border-top:1px solid rgba(255,255,255,.1); margin-top:var(--s-12); padding-top:var(--s-6); display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--s-3); font-size:var(--fs-xs); color:#8C7E6E; }
@media (max-width:880px){ .foot__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .foot__grid{ grid-template-columns:1fr; } }

/* =========================================================
   AI 匹配结果弹窗（全站复用）
   ========================================================= */
.modal{ position:fixed; inset:0; z-index:100; background:rgba(42,33,27,.55); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; padding:var(--s-6); }
.modal.open{ display:flex; }
.modal__card{ background:var(--surface); border-radius:var(--r-lg); max-width:560px; width:100%; max-height:88vh; overflow:auto; box-shadow:var(--sh-lg); animation:pop .3s var(--t-norm); }
@keyframes pop{ from{ transform:translateY(16px) scale(.98); opacity:0; } to{ transform:none; opacity:1; } }
.modal__head{ padding:var(--s-6); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:var(--surface); }
.modal__head h3{ font-size:var(--fs-xl); }
.modal__close{ background:none; border:none; font-size:1.5rem; cursor:pointer; color:var(--ink-faint); line-height:1; }
.modal__body{ padding:var(--s-6); }
.match-loading{ text-align:center; padding:var(--s-12) var(--s-6); color:var(--ink-soft); }
.spinner{ width:42px; height:42px; border:4px solid var(--primary-soft); border-top-color:var(--primary); border-radius:50%; margin:0 auto var(--s-5); animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.match-result{ display:none; }
.match-result.show{ display:block; }
.match-card{ border:1px solid var(--border); border-radius:var(--r-md); padding:var(--s-5); margin-bottom:var(--s-4); display:flex; gap:var(--s-4); align-items:center; }
.match-card .sup-card__logo, .match-card .logo{ width:46px; height:46px; }
.match-card__info{ flex:1; }
.match-card__info b{ font-size:var(--fs-base); }
.match-card__info p{ font-size:var(--fs-xs); color:var(--ink-soft); }
.match-score{ font-family:var(--font-serif); font-weight:700; color:var(--primary-deep); font-size:var(--fs-xl); margin-left:auto; text-align:center; }
.match-score small{ font-size:.6rem; color:var(--ink-faint); display:block; font-family:var(--font-sans); }

/* =========================================================
   列表页：筛选 + 产品卡 + 对比托盘 + 分页
   ========================================================= */
.layout{ display:grid; grid-template-columns:268px 1fr; gap:var(--s-8); align-items:start; padding-bottom:var(--s-16); }
@media (max-width:980px){ .layout{ grid-template-columns:1fr; } }

.filters{ position:sticky; top:88px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--s-6); box-shadow:var(--sh-sm); }
@media (max-width:980px){ .filters{ position:static; } }
.filters__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--s-4); }
.filters__top h3{ font-size:var(--fs-lg); font-family:var(--font-sans); font-weight:600; }
.filters__reset{ font-size:var(--fs-xs); color:var(--primary-deep); background:none; border:none; cursor:pointer; font-weight:600; }
.fgroup{ padding:var(--s-5) 0; border-top:1px solid var(--border); }
.fgroup:first-of-type{ border-top:none; padding-top:0; }
.fgroup h4{ font-size:var(--fs-sm); font-weight:600; margin-bottom:var(--s-3); color:var(--ink); }
.fopt{ display:flex; align-items:center; gap:var(--s-2); padding:6px 0; font-size:var(--fs-sm); color:var(--ink-soft); cursor:pointer; }
.fopt input{ width:16px; height:16px; accent-color:var(--primary-deep); cursor:pointer; }
.fopt .cnt{ margin-left:auto; font-size:var(--fs-xs); color:var(--ink-faint); }
.fopt:hover{ color:var(--ink); }

.results__bar{ display:flex; align-items:center; gap:var(--s-4); flex-wrap:wrap; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--s-4) var(--s-5); margin-bottom:var(--s-6); }
.results__count{ font-size:var(--fs-sm); color:var(--ink-soft); }
.results__count b{ color:var(--ink); font-family:var(--font-serif); }
.chips{ display:flex; flex-wrap:wrap; gap:6px; flex:1; }
.fchip{ display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-xs); background:var(--primary-soft); color:var(--primary-deep); border:1px solid var(--border-strong); border-radius:var(--r-pill); padding:4px 10px; }
.fchip button{ background:none; border:none; cursor:pointer; color:var(--primary-deep); font-size:.9rem; line-height:1; padding:0; }
.sort{ margin-left:auto; display:flex; align-items:center; gap:8px; font-size:var(--fs-sm); color:var(--ink-soft); }
.sort select{ border:1px solid var(--border); border-radius:var(--r-sm); padding:.45rem .7rem; font-family:var(--font-sans); font-size:var(--fs-sm); color:var(--ink); background:var(--surface); }

/* 产品卡 */
.prod-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; transition:var(--t-norm); display:flex; flex-direction:column; }
.prod-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); border-color:var(--border-strong); }
.prod-card__media{ height:160px; background:linear-gradient(135deg,var(--primary-soft),var(--gold-soft)); position:relative; display:grid; place-items:center; }
.prod-card__media svg{ width:54px; height:54px; color:var(--primary-deep); }
.prod-card__match{ position:absolute; top:var(--s-3); right:var(--s-3); background:rgba(42,33,27,.78); color:#fff; border-radius:var(--r-pill); font-size:var(--fs-xs); font-weight:700; padding:4px 10px; display:flex; align-items:center; gap:5px; }
.prod-card__cmp{ position:absolute; top:var(--s-3); left:var(--s-3); background:rgba(255,255,255,.9); border-radius:var(--r-sm); padding:4px 8px; font-size:var(--fs-xs); display:flex; align-items:center; gap:6px; cursor:pointer; color:var(--ink); }
.prod-card__cmp input{ accent-color:var(--primary-deep); cursor:pointer; }
.prod-card__body{ padding:var(--s-5); display:flex; flex-direction:column; gap:var(--s-3); flex:1; }
.prod-card__name{ font-size:var(--fs-base); font-weight:700; font-family:var(--font-sans); }
.prod-card__sup{ font-size:var(--fs-xs); color:var(--ink-faint); }
.prod-card__tags{ display:flex; flex-wrap:wrap; gap:6px; }
.prod-card__params{ display:grid; grid-template-columns:1fr 1fr; gap:6px var(--s-4); font-size:var(--fs-xs); border-top:1px dashed var(--border); padding-top:var(--s-3); margin-top:auto; }
.prod-card__params div{ display:flex; justify-content:space-between; color:var(--ink-soft); }
.prod-card__params b{ color:var(--ink); font-weight:600; }
.prod-card__foot{ display:flex; gap:var(--s-2); margin-top:var(--s-3); }
.prod-card__foot .btn{ flex:1; font-size:var(--fs-xs); padding:.6rem; }

/* 对比托盘 */
.compare-tray{ position:fixed; left:0; right:0; bottom:0; z-index:60; background:rgba(42,33,27,.94); color:#fff; transform:translateY(110%); transition:transform var(--t-norm); padding:var(--s-4) 0; }
.compare-tray.show{ transform:none; }
.compare-tray__inner{ display:flex; align-items:center; gap:var(--s-4); max-width:1200px; margin:0 auto; padding:0 var(--s-6); }
.compare-tray__inner span{ font-weight:600; font-size:var(--fs-sm); }
.compare-tray .btn{ margin-left:auto; }
.compare-slots{ display:flex; gap:var(--s-2); }
.cslot{ width:54px; height:54px; border-radius:var(--r-sm); background:rgba(255,255,255,.1); display:grid; place-items:center; font-size:1.4rem; border:1px dashed rgba(255,255,255,.3); }
.cslot.filled{ background:linear-gradient(135deg,var(--primary),var(--primary-deep)); border:none; }

.pager{ display:flex; justify-content:center; gap:6px; margin-top:var(--s-10); }
.pager a{ width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--border); border-radius:var(--r-sm); font-size:var(--fs-sm); color:var(--ink-soft); transition:var(--t-fast); }
.pager a.active, .pager a:hover{ background:var(--primary-deep); color:#fff; border-color:var(--primary-deep); }

/* 供应商页精选横幅 */
.feature{ background:linear-gradient(135deg,#2A211B,#3A2C22); color:#fff; border-radius:var(--r-lg); padding:var(--s-8); margin-bottom:var(--s-10); display:flex; align-items:center; gap:var(--s-8); flex-wrap:wrap; }
.feature h2{ color:#fff; font-size:var(--fs-2xl); margin-bottom:var(--s-2); }
.feature p{ color:#CBB89A; font-size:var(--fs-sm); max-width:40em; }
.feature .btn{ margin-left:auto; }
@media (max-width:980px){ .feature{ flex-direction:column; align-items:flex-start; } .feature .btn{ margin-left:0; } }

/* =========================================================
   场景页：标签 + 面板 + 需求卡 + 推荐卡
   ========================================================= */
.tabs{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-bottom:var(--s-10); }
.tab{ font-size:var(--fs-sm); font-weight:600; padding:.7rem 1.3rem; border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--border); color:var(--ink-soft); cursor:pointer; transition:var(--t-fast); display:flex; align-items:center; gap:8px; }
.tab svg{ width:18px; height:18px; color:var(--primary-deep); }
.tab:hover{ border-color:var(--primary); }
.tab.active{ background:var(--primary-deep); color:#fff; border-color:var(--primary-deep); }
.tab.active svg{ color:#fff; }

.panel{ display:none; animation:fade .4s var(--t-norm); }
.panel.active{ display:block; }
@keyframes fade{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
.panel__hero{ background:linear-gradient(135deg,#2A211B,#3A2C22); color:#fff; border-radius:var(--r-lg); padding:var(--s-10); margin-bottom:var(--s-10); display:flex; gap:var(--s-8); align-items:center; flex-wrap:wrap; }
.panel__hero .ico{ width:64px; height:64px; border-radius:16px; background:rgba(200,160,76,.18); color:var(--gold); display:grid; place-items:center; flex-shrink:0; }
.panel__hero .ico svg{ width:34px; height:34px; }
.panel__hero h2{ color:#fff; font-size:var(--fs-2xl); margin-bottom:var(--s-2); }
.panel__hero p{ color:#CBB89A; font-size:var(--fs-base); max-width:46em; }

.req{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5); margin-bottom:var(--s-10); }
.req-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--s-6); border-top:3px solid var(--gold); }
.req-card h3{ font-family:var(--font-sans); font-size:var(--fs-base); font-weight:600; margin-bottom:var(--s-3); }
.req-card li{ font-size:var(--fs-sm); color:var(--ink-soft); padding:5px 0 5px 22px; position:relative; }
.req-card li::before{ content:"✓"; color:var(--success); font-weight:700; position:absolute; left:0; }
.sec-title{ font-size:var(--fs-xl); margin-bottom:var(--s-6); }
@media (max-width:880px){ .req{ grid-template-columns:1fr; } .panel__hero{ flex-direction:column; align-items:flex-start; } }

/* =========================================================
   产品详情页
   ========================================================= */
.detail{ display:grid; grid-template-columns:1.05fr .95fr; gap:var(--s-10); padding:var(--s-8) 0 var(--s-12); align-items:start; }
.gallery{ display:flex; flex-direction:column; gap:var(--s-3); }
.gallery__main{ height:360px; border-radius:var(--r-lg); background:linear-gradient(135deg,var(--primary-soft),var(--gold-soft)); display:grid; place-items:center; position:relative; overflow:hidden; }
.gallery__main svg{ width:120px; height:120px; color:var(--primary-deep); }
.gallery__badge{ position:absolute; top:var(--s-4); left:var(--s-4); background:rgba(42,33,27,.8); color:#fff; border-radius:var(--r-pill); font-size:var(--fs-sm); font-weight:700; padding:6px 14px; display:flex; gap:6px; align-items:center; }
.gallery__thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-3); }
.gallery__thumbs div{ height:72px; border-radius:var(--r-sm); background:linear-gradient(135deg,#F0E2D4,#EDE3D5); border:1px solid var(--border); cursor:pointer; transition:var(--t-fast); }
.gallery__thumbs div.active, .gallery__thumbs div:hover{ border-color:var(--primary); box-shadow:var(--sh-sm); }

.dinfo h1{ font-size:var(--fs-3xl); margin:var(--s-2) 0 var(--s-3); }
.dinfo__sup{ font-size:var(--fs-sm); color:var(--ink-soft); margin-bottom:var(--s-4); }
.dinfo__sup b{ color:var(--ink); }
.dinfo__tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:var(--s-6); }
.dinfo__quick{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-3); background:var(--surface-warm); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--s-5); margin-bottom:var(--s-6); }
.dinfo__quick div{ font-size:var(--fs-sm); }
.dinfo__quick span{ color:var(--ink-faint); }
.dinfo__quick b{ display:block; font-family:var(--font-serif); font-size:var(--fs-xl); color:var(--ink); }
.dinfo__cta{ display:flex; gap:var(--s-3); }
.dinfo__cta .btn{ flex:1; }

/* 参数表 */
.block{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--s-8); margin-bottom:var(--s-8); }
.block h2{ font-size:var(--fs-2xl); margin-bottom:var(--s-2); }
.block .sub{ color:var(--ink-soft); font-size:var(--fs-sm); margin-bottom:var(--s-6); }
.ptable{ width:100%; border-collapse:collapse; }
.ptable th, .ptable td{ text-align:left; padding:var(--s-3) var(--s-4); border-bottom:1px solid var(--border); font-size:var(--fs-sm); vertical-align:top; }
.ptable th{ font-weight:600; color:var(--ink); background:var(--surface-warm); width:30%; }
.ptable td{ color:var(--ink-soft); }
.ptable tr:last-child th, .ptable tr:last-child td{ border-bottom:none; }
.ptable .std{ font-size:var(--fs-xs); color:var(--primary-deep); background:var(--primary-soft); border-radius:var(--r-sm); padding:2px 8px; margin-left:6px; white-space:nowrap; }
.ptgroup-title{ font-family:var(--font-sans); font-weight:700; font-size:var(--fs-base); color:var(--primary-deep); padding:var(--s-4); background:var(--bg-deep); border-radius:var(--r-sm); margin-top:var(--s-4); }

/* 供应商卡（详情页） */
.supcard{ background:var(--surface-warm); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--s-6); }
.supcard__top{ display:flex; align-items:center; gap:var(--s-4); margin-bottom:var(--s-4); }
.supcard__logo{ width:54px; height:54px; border-radius:13px; background:linear-gradient(135deg,var(--primary),var(--primary-deep)); color:#fff; display:grid; place-items:center; font-family:var(--font-serif); font-weight:700; font-size:1.3rem; flex-shrink:0; }
.supcard__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-2); border-top:1px dashed var(--border); padding-top:var(--s-4); margin-top:var(--s-2); }
.supcard__stats b{ font-family:var(--font-serif); font-size:var(--fs-lg); display:block; }
.supcard__stats span{ font-size:.66rem; color:var(--ink-faint); }
.supcard__actions{ display:flex; gap:var(--s-3); margin-top:var(--s-5); }
.supcard__actions .btn{ flex:1; }

/* 材料溯源 */
.trace{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-4); }
.trace-node{ background:var(--surface-warm); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--s-5); position:relative; }
.trace-node__layer{ font-size:var(--fs-xs); color:var(--primary-deep); font-weight:600; }
.trace-node h4{ font-family:var(--font-sans); font-size:var(--fs-sm); font-weight:600; margin:4px 0; }
.trace-node p{ font-size:var(--fs-xs); color:var(--ink-soft); }
.trace-node__cert{ margin-top:var(--s-2); display:flex; gap:4px; flex-wrap:wrap; }
@media (max-width:940px){ .detail{ grid-template-columns:1fr; gap:var(--s-8); } .trace{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .trace{ grid-template-columns:1fr; } .dinfo__cta{ flex-direction:column; } }

/* 认证文件 */
.certs{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-3); }
@media (max-width:940px){ .certs{ grid-template-columns:1fr; } }
.cert-card{ display:flex; align-items:center; gap:var(--s-3); border:1px solid var(--border); border-radius:var(--r-sm); padding:var(--s-3) var(--s-4); background:var(--surface); transition:var(--t-fast); }
.cert-card:hover{ border-color:var(--primary); box-shadow:var(--sh-sm); }
.cert-card__ico{ width:38px; height:38px; border-radius:9px; background:#F3EFE3; color:var(--primary-deep); display:grid; place-items:center; flex-shrink:0; }
.cert-card__ico svg{ width:20px; height:20px; }
.cert-card__meta b{ font-size:var(--fs-sm); display:block; }
.cert-card__meta span{ font-size:var(--fs-xs); color:var(--ink-faint); }
.cert-card__dl{ margin-left:auto; font-size:var(--fs-xs); color:var(--primary-deep); font-weight:600; }

/* 定制输入 */
.custom{ background:linear-gradient(160deg,#2A211B,#3A2C22); color:#fff; border-radius:var(--r-lg); padding:var(--s-8); }
.custom h2{ color:#fff; font-size:var(--fs-2xl); }
.custom p{ color:#CBB89A; font-size:var(--fs-sm); margin:var(--s-2) 0 var(--s-6); }
.cfield{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4); margin-bottom:var(--s-4); }
.cfield label{ font-size:var(--fs-xs); color:#D9C7A8; display:block; margin-bottom:6px; }
.cfield input, .cfield select{ width:100%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:#fff; border-radius:var(--r-sm); padding:.7rem .9rem; font-size:var(--fs-sm); font-family:var(--font-sans); outline:none; }
.cfield input:focus, .cfield select:focus{ border-color:var(--gold); }
.cfield select option{ color:#2A211B; }
.custom .btn{ margin-top:var(--s-2); }
@media (max-width:560px){ .cfield{ grid-template-columns:1fr; } }

/* 相关产品 */
.related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5); margin-top:var(--s-6); }
.rec-card{ border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; background:var(--surface); transition:var(--t-norm); }
.rec-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); }
.rec-card__media{ height:120px; background:linear-gradient(135deg,var(--primary-soft),var(--gold-soft)); display:grid; place-items:center; }
.rec-card__media svg{ width:40px; height:40px; color:var(--primary-deep); }
.rec-card__body{ padding:var(--s-5); }
.rec-card__body h4{ font-family:var(--font-sans); font-size:var(--fs-sm); font-weight:600; }
.rec-card__body .rcard__sup{ font-size:var(--fs-xs); color:var(--ink-faint); margin-top:2px; }
.rec-card__body .badge{ margin-top:var(--s-3); }
@media (max-width:760px){ .related-grid{ grid-template-columns:1fr; } }

/* =========================================================
   采购指南详情页
   ========================================================= */
.hero--article{ padding:var(--s-8) 0 var(--s-10); display:grid; grid-template-columns:1fr; gap:var(--s-4); }
.hero--article .meta{ display:flex; gap:var(--s-4); flex-wrap:wrap; font-size:var(--fs-sm); color:var(--ink-faint); align-items:center; }
.hero--article .meta .badge{ background:var(--primary-soft); border-color:var(--border-strong); color:var(--primary-deep); }
.hero--article h1{ font-size:var(--fs-3xl); max-width:18em; }
.hero--article .lead{ font-size:var(--fs-lg); color:var(--ink-soft); max-width:52em; }

.article-layout{ display:grid; grid-template-columns:240px 1fr; gap:var(--s-12); align-items:start; padding-bottom:var(--s-16); }
.toc{ position:sticky; top:90px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--s-6); box-shadow:var(--sh-sm); }
.toc h4{ font-family:var(--font-sans); font-size:var(--fs-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:var(--s-4); }
.toc a{ display:block; font-size:var(--fs-sm); color:var(--ink-soft); padding:7px 0; padding-left:12px; border-left:2px solid transparent; transition:var(--t-fast); }
.toc a:hover, .toc a.active{ color:var(--primary-deep); border-left-color:var(--gold); }
@media (max-width:900px){ .article-layout{ grid-template-columns:1fr; } .toc{ position:static; } }

.article section{ margin-bottom:var(--s-12); scroll-margin-top:90px; }
.article h2{ font-size:var(--fs-2xl); margin-bottom:var(--s-4); }
.article h3{ font-size:var(--fs-xl); margin:var(--s-6) 0 var(--s-3); font-family:var(--font-serif); }
.article p{ color:var(--ink-soft); margin-bottom:var(--s-4); }
.article ul.bullets{ padding-left:0; margin-bottom:var(--s-4); }
.article ul.bullets li{ padding:6px 0 6px 26px; position:relative; color:var(--ink-soft); }
.article ul.bullets li::before{ content:"▪"; color:var(--gold-deep); position:absolute; left:6px; font-size:1.1em; }
.article a.inline{ color:var(--primary-deep); font-weight:600; }
.article a.inline:hover{ text-decoration:underline; }

/* 对比表 */
.ctable{ width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; margin:var(--s-4) 0; }
.ctable th, .ctable td{ text-align:left; padding:var(--s-3) var(--s-4); border-bottom:1px solid var(--border); font-size:var(--fs-sm); vertical-align:top; }
.ctable thead th{ background:var(--primary-deep); color:#fff; font-weight:600; font-size:var(--fs-sm); }
.ctable tbody th{ font-weight:600; color:var(--ink); background:var(--surface-warm); width:22%; }
.ctable td{ color:var(--ink-soft); }
.ctable tr:last-child td, .ctable tr:last-child th{ border-bottom:none; }

.callout{ background:var(--surface-warm); border:1px solid var(--border-strong); border-left:4px solid var(--gold); border-radius:var(--r-sm); padding:var(--s-5) var(--s-6); margin:var(--s-5) 0; }
.callout b{ color:var(--primary-deep); }
.callout p{ margin:0; color:var(--ink-soft); font-size:var(--fs-sm); }

/* =========================================================
   独立 RFQ 页
   ========================================================= */
.rfq-wrap{ max-width:940px; }
.head{ text-align:center; padding:var(--s-8) 0 var(--s-6); }
.head h1{ font-size:var(--fs-3xl); margin:var(--s-3) 0; }
.head p{ color:var(--ink-soft); font-size:var(--fs-lg); max-width:40em; margin:0 auto; }

.steps{ display:flex; align-items:center; justify-content:center; gap:0; margin:var(--s-8) 0 var(--s-10); }
.step{ display:flex; align-items:center; gap:var(--s-3); }
.step__dot{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-serif); font-weight:700; background:var(--surface); border:2px solid var(--border-strong); color:var(--ink-faint); transition:var(--t-norm); }
.step.active .step__dot{ background:var(--primary-deep); border-color:var(--primary-deep); color:#fff; }
.step.done .step__dot{ background:var(--gold); border-color:var(--gold); color:#fff; }
.step__label{ font-size:var(--fs-sm); font-weight:600; color:var(--ink-faint); }
.step.active .step__label{ color:var(--ink); }
.step__line{ width:64px; height:2px; background:var(--border-strong); margin:0 var(--s-3); }
.step.done + .step__line, .step.active + .step__line{ background:var(--gold); }

.form-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--s-10); box-shadow:var(--sh-sm); }
.fstep{ display:none; }
.fstep.active{ display:block; animation:fade .35s var(--t-norm); }
.fstep h2{ font-size:var(--fs-xl); margin-bottom:var(--s-2); }
.fstep .sub{ color:var(--ink-soft); font-size:var(--fs-sm); margin-bottom:var(--s-8); }
.field{ margin-bottom:var(--s-5); }
.field label{ display:block; font-size:var(--fs-sm); font-weight:600; margin-bottom:var(--s-2); }
.field .req{ color:var(--gold-deep); }
.field input, .field select, .field textarea{ width:100%; border:1px solid var(--border-strong); border-radius:var(--r-sm); padding:.8rem var(--s-4); font-size:var(--fs-base); font-family:var(--font-sans); color:var(--ink); background:var(--surface); outline:none; transition:var(--t-fast); }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--primary); box-shadow:0 0 0 3px rgb(169 116 79/.12); }
.field textarea{ resize:vertical; min-height:110px; }
.two{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-5); }
.checks{ display:flex; flex-wrap:wrap; gap:var(--s-2); }
.checks label{ display:inline-flex; align-items:center; gap:8px; font-size:var(--fs-sm); font-weight:500; background:var(--surface-warm); border:1px solid var(--border); border-radius:var(--r-pill); padding:8px 14px; cursor:pointer; transition:var(--t-fast); }
.checks label:hover{ border-color:var(--primary); }
.checks input{ accent-color:var(--primary-deep); width:16px; height:16px; }
.checks input:checked + span{ color:var(--primary-deep); font-weight:600; }
.nav-btns{ display:flex; justify-content:space-between; margin-top:var(--s-8); padding-top:var(--s-6); border-top:1px solid var(--border); }
@media (max-width:640px){ .two{ grid-template-columns:1fr; } .step__label{ display:none; } .step__line{ width:32px; } .form-card{ padding:var(--s-6); } }

/* 成功态 */
.success{ text-align:center; padding:var(--s-6) 0; }
.success__ico{ width:84px; height:84px; border-radius:50%; background:var(--success); color:#fff; display:grid; place-items:center; margin:0 auto var(--s-6); box-shadow:var(--sh-md); }
.success__ico svg{ width:42px; height:42px; }
.success h2{ font-size:var(--fs-2xl); margin-bottom:var(--s-3); }
.success p{ color:var(--ink-soft); max-width:34em; margin:0 auto var(--s-4); }
.matchrow{ display:flex; gap:var(--s-4); justify-content:center; flex-wrap:wrap; margin:var(--s-8) 0; }
.matchcard{ background:var(--surface-warm); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--s-5) var(--s-6); display:flex; align-items:center; gap:var(--s-4); min-width:240px; }
.matchcard .logo{ width:46px; height:46px; border-radius:12px; background:linear-gradient(135deg,var(--primary),var(--primary-deep)); color:#fff; display:grid; place-items:center; font-family:var(--font-serif); font-weight:700; }
.matchcard b{ font-size:var(--fs-base); }
.matchcard .s{ font-size:var(--fs-xs); color:var(--ink-faint); }
.matchcard .score{ margin-left:auto; font-family:var(--font-serif); font-weight:700; color:var(--primary-deep); font-size:var(--fs-xl); }

/* =========================================================
   入场动画（全站）
   ========================================================= */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--t-norm), transform .7s var(--t-norm); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }
