/* =====================================================================
   服务集市撮合平台 · 前台皮肤（只管前台特有的排布）
   口径：组件（按钮 / 表单 / 卡片 / 表格 / 标签 / 空态 / 上传 / 富文本 / 浮层）
   一律只在 fm-ui.css 定义一次，本文件不再复制；需要前台差异时写「结构上下文」规则。
   取值一律来自 fm-tokens.css，本文件不出现第二个 :root，
   写死的色值只允许出现在「透明叠层」这类令牌表达不了的地方。
   所有交互态（hover/focus-visible/active/disabled/loading/empty/error）都必须存在。
   ===================================================================== */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.fm-front{margin:0;font-family:var(--font);font-size:15px;line-height:1.65;color:var(--ink-700);
  background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* 链接走填充色 --brand（白底 5.4:1），hover 才降到 --brand-700：
   两者若都取 --brand-text 就是同一个值，鼠标移动没有任何反馈。 */
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-700)}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;color:var(--ink-900);font-weight:700;letter-spacing:-.01em}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
::selection{background:var(--brand-tint);color:var(--brand-text)}
.fm-wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}

/* ---------- 顶部导航 ---------- */
/* 顶栏用实底而不是「半透明 + backdrop-filter」：毛玻璃在滚动时露出内容残影，
   而且在深色档里 .92 白底会变成刺眼的浅灰块。 */
.fm-header{position:sticky;top:0;z-index:60;background:var(--card);border-bottom:1px solid var(--line)}
.fm-header .fm-wrap{display:flex;align-items:center;gap:22px;height:66px}
.fm-logo{display:flex;align-items:center;gap:9px;font-weight:800;color:var(--ink-900);font-size:17px;flex:none}
.fm-logo img{height:30px;width:auto}
.fm-logo-mark{width:30px;height:30px;border-radius:var(--radius-sm);background:var(--brand);color:var(--on-brand);display:grid;
  place-items:center;font-size:15px;font-weight:700;box-shadow:var(--shadow-1)}
.fm-nav{display:flex;gap:4px}
.fm-nav-item{padding:8px 13px;border-radius:var(--radius-sm);color:var(--ink-500);font-size:14.5px;
  transition:background .16s,color .16s;white-space:nowrap}
.fm-nav-item:hover{background:var(--bg-soft);color:var(--ink-900)}
.fm-nav-item.is-on{color:var(--brand-text);background:var(--brand-tint);font-weight:600}
.fm-nav-cta{background:var(--brand);color:var(--on-brand)!important;font-weight:600;box-shadow:var(--shadow-1)}
.fm-nav-cta:hover{background:var(--brand-700);color:var(--on-brand)!important}
.fm-ghost:hover{background:transparent;color:var(--brand-text)}
.fm-search{margin-left:auto;display:flex;align-items:center;flex:0 1 300px;background:var(--bg-soft);
  border:1px solid transparent;border-radius:var(--pill);padding:0 4px 0 14px;transition:border-color .16s,background .16s}
.fm-search:focus-within{background:var(--card);border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-a12)}
.fm-search input{border:0;background:transparent;outline:0;flex:1;font-size:14px;padding:8px 0;color:var(--ink-900);min-width:0}
.fm-search button{border:0;background:transparent;color:var(--ink-400);cursor:pointer;padding:7px 11px;border-radius:var(--pill);display:grid;place-items:center}
.fm-search button:hover{color:var(--brand);background:var(--card)}
.fm-header-right{display:flex;align-items:center;gap:10px;flex:none}
.fm-bell{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:var(--radius-sm);color:var(--ink-500)}
.fm-bell:hover{background:var(--bg-soft);color:var(--brand)}
/* 角标本体在 fm-ui.css，这里只管贴到铃铛上的位置 */
.fm-bell .fm-dot{position:absolute;top:-2px;right:-4px;border:2px solid var(--card)}
.fm-burger{display:none;border:0;background:transparent;cursor:pointer;padding:8px;flex-direction:column;gap:4px}
.fm-burger i{width:18px;height:2px;background:var(--ink-700);border-radius:2px;display:block}
.fm-nav-mobile{display:none;flex-wrap:wrap;gap:6px;padding:10px 20px 14px;border-bottom:1px solid var(--line);background:var(--card)}

/* ---------- 主体 ---------- */
.fm-main{min-height:calc(100vh - 300px);padding:24px 0 44px}
.fm-crumb{font-size:13.5px;color:var(--ink-400);padding-top:6px}
.fm-crumb a{color:var(--ink-400)}.fm-crumb a:hover{color:var(--brand)}
.fm-crumb i{font-style:normal;margin:0 8px;color:var(--line-strong)}
.fm-cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;align-items:start}
.fm-section{margin-bottom:28px}
.fm-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px}
.fm-section-head h2{font-size:19px}
.fm-section-head small{color:var(--ink-400);font-size:13px}

/* 卡片的悬停反馈只动边框和投影，不做 translateY：
   一排卡片集体上浮是模板站的招牌动作，在信息密集的需求板上只会让视线跟着抖，
   而且网格里的兄弟元素被抬起来那个会压到相邻卡片的边框上。 */
.fm-hover{transition:box-shadow .18s ease,border-color .18s}
.fm-hover:hover{box-shadow:var(--shadow-2);border-color:var(--line-strong)}

/* 需求/服务卡片 */
.fm-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:16px}
.fm-item{display:flex;flex-direction:column;gap:10px;padding:16px 17px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-1);color:var(--ink-700)}
.fm-item:hover{border-color:var(--brand);box-shadow:var(--shadow-2);color:var(--ink-700)}
.fm-item-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.fm-item h3{font-size:15.5px;line-height:1.45;font-weight:650;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.fm-item p{margin:0;font-size:13.5px;color:var(--ink-500);display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;line-height:1.6}
.fm-item-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;
  padding-top:10px;border-top:1px dashed var(--line)}
.fm-price{font-size:16px;font-weight:750;color:var(--accent-text);letter-spacing:-.02em}
.fm-price small{font-size:12px;font-weight:500;color:var(--ink-500);margin-left:3px}
/* 详情页的主价格：预算 / 报价是这一屏要读的第一个数，比列表卡片的 16px 上一档。
   写成 .fm-price.fm-price-lg，这样不用依赖皮肤的后置顺序就能压过本体。 */
.fm-price.fm-price-lg{font-size:22px}
/* 收银台的应付金额：这一屏唯一的数，允许再上一档 */
.fm-price.is-hero{font-size:30px}
.fm-meta{font-size:12.5px;color:var(--ink-500);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* 跟在大额价格后面的注脚要贴着文字走，不能另起一行。共用层的单类 .fm-inline 排在前面，
   会被这里的 .fm-meta 反超，所以写成复合选择器按本体所在皮肤压回去。 */
.fm-meta.fm-inline{display:inline}
.fm-meta b{font-weight:600;color:var(--ink-700)}
.fm-meta.is-center{justify-content:center}
/* 缩略图集：一行放不下就换行，尺寸由容器决定，不让每张图自己报一个宽高 */
.fm-thumbs{display:flex;gap:6px;flex-wrap:wrap}
.fm-thumbs img{width:52px;height:52px;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--line)}
.fm-thumbs.is-md img{width:96px;height:96px}
.fm-thumbs.is-lg img{width:132px;height:132px}
/* 服务案例图集：整幅大图成排，图集本身就是那张卡片的内容区 */
.fm-thumbs.is-wide{gap:10px;padding:12px}
.fm-thumbs.is-wide img{width:100%;height:220px}
/* 卡片封面：占满卡片宽度的一屏图，圆角跟令牌走而不是各页自写 10px */
.fm-item-cover{width:100%;height:120px;object-fit:cover;border-radius:var(--radius-sm)}
/* 徽标 / 按钮 / 表单控件 / 表格 / 标签页 / 空态 / 分页 / 上传 / 富文本 全部在 fm-ui.css 定义一次 */

/* 分类选择：两个下拉与按钮同底对齐；提示独占最后一行，不参与列高比较 */
.fm-catpick{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
  gap:14px;align-items:end}
.fm-catpick .fm-btn{padding:10px 18px;line-height:1.65;white-space:nowrap}
.fm-catpick-tip{grid-column:1/-1}
@media(max-width:719px){
  .fm-catpick{grid-template-columns:1fr}
  .fm-catpick-action{grid-column:1}
  .fm-catpick-action>.fm-label{display:none}
  .fm-catpick .fm-btn{width:100%}
}
.fm-count{font-size:12px;color:var(--ink-500);text-align:right;margin:0}
.fm-count.is-over{color:var(--danger-text)}

/* 上传 / 表格 / 状态标签 / Tabs / 空态 / 分页 / 提示条 / 富文本：见 fm-ui.css。
   这里只留前台筛选条的紧凑尺寸——组件本体仍由共用层定义。 */
.fm-filters .fm-input,.fm-filters .fm-select{width:auto;min-width:150px;padding:7px 12px;font-size:13.5px}

/* 详情页 */
.fm-detail-head{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:flex-start;margin-bottom:16px}
.fm-detail-head h1{font-size:23px;line-height:1.4;max-width:740px}
.fm-detail-sub{display:flex;gap:12px;flex-wrap:wrap;color:var(--ink-500);font-size:13px;margin-top:8px}
/* 取值盒 .fm-kv 在 fm-ui.css：前台详情页用 <div> 包 dt/dd， centres 用裸 dt/dd，同一份定义都排得开 */
.fm-contact-card{background:var(--brand-tint);border:1px solid var(--brand-line);border-radius:var(--radius);
  padding:18px;text-align:center}
.fm-contact-card .fm-btn{margin-top:10px}
.fm-side-sticky{position:sticky;top:82px;display:grid;gap:16px}
.fm-quote{border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;background:var(--card);display:grid;gap:9px}
.fm-quote:hover{border-color:var(--line-strong)}
.fm-quote.is-adopted{border-color:var(--brand);background:var(--brand-tint);box-shadow:var(--shadow-1)}
.fm-quote-head{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.fm-seller{display:flex;gap:9px;align-items:center;font-size:14px;color:var(--ink-700);font-weight:600}
.fm-seller img{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:none}
/* 名片区的商家：字号和头像一起放大，不在页面里手写 gap / 宽高 / 圆角。
   有图用 img、没图用 .fm-avatar 首字，两种占位必须同尺寸，否则有无头像的商家卡宽窄不一。 */
.fm-seller.is-lg{font-size:15px}
.fm-seller.is-xl{gap:14px;font-size:15px}
.fm-seller.is-lg img,.fm-seller.is-lg .fm-avatar{width:40px;height:40px;font-size:16px;border-radius:var(--radius)}
.fm-seller.is-xl img,.fm-seller.is-xl .fm-avatar{width:56px;height:56px;font-size:20px;border-radius:var(--radius)}

/* 首页首屏：一屏内完成「搜 / 分类 / 看需求」。
   原来的 .fm-hero 是径向+线性双层渐变、32px 标题、三个大按钮、三个计数器——那是落地页的排法，
   放在一个撮合需求板上，第一屏全是装饰，真正的在架需求被推到折叠线以下。 */
.fm-start{padding:24px 0 6px;display:grid;gap:12px}
.fm-start h1{font-size:21px;line-height:1.35;letter-spacing:-.01em}
.fm-start p{font-size:14px;color:var(--ink-500);max-width:560px;margin:0;line-height:1.65}
.fm-start-bar{display:flex;gap:10px;flex-wrap:wrap;margin-top:2px}
.fm-start-bar .fm-input{flex:1 1 260px;min-width:0;font-size:15px;padding:10px 14px}
.fm-start-bar .fm-btn{padding:10px 18px;white-space:nowrap}
.fm-start-alt{font-size:13.5px;color:var(--ink-500)}
@media(max-width:719px){
  .fm-start{padding-top:16px}
  .fm-start-bar .fm-input{flex:1 1 100%}
  .fm-start-bar .fm-btn{flex:1}
}
.fm-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.fm-cat{display:flex;flex-direction:column;gap:6px;padding:14px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);font-size:14px;color:var(--ink-700);font-weight:600;transition:border-color .16s,background .16s,color .16s}
.fm-cat:hover{border-color:var(--brand);background:var(--brand-tint);color:var(--brand-text)}
.fm-cat small{font-weight:400;font-size:12px;color:var(--ink-500)}
.fm-banner{position:relative;border-radius:var(--radius-lg);overflow:hidden;height:210px;background:var(--bg-soft);
  border:1px solid var(--line);margin-bottom:26px}
.fm-banner img{width:100%;height:100%;object-fit:cover}
/* 轮播的每一张叠在同一格里；hidden 由 UA 的 [hidden]{display:none} 负责，不要给 inline display */
.fm-banner [data-slide]{position:absolute;inset:0}
.fm-banner-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:7px}
.fm-banner-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.6);cursor:pointer;display:block}
.fm-banner-dots i.is-on{background:var(--card);width:20px;border-radius:var(--pill)}
/* 流程步骤 .fm-steps / .fm-step 在 fm-ui.css：商家中心的入驻进度格也用同一份定义 */

/* 账号页 */
.fm-auth-alt{display:flex;justify-content:space-between;font-size:13.5px;margin-top:16px;flex-wrap:wrap;gap:8px}
/* 验证码行 .fm-cap 与「获取验证码」按钮尺寸在 fm-ui.css */
.fm-steps-auth{display:flex;gap:6px;margin-bottom:20px}
.fm-steps-auth i{flex:1;height:3px;border-radius:2px;background:var(--line)}
.fm-steps-auth i.is-on{background:var(--brand)}

/* 登录 / 注册：左栏把"平台不碰钱、联系方式要你自己点查看"讲明白，
   新用户第一次进来最需要的不是美化，而是知道点下去会发生什么 */
.fm-auth-split{display:grid;grid-template-columns:1.02fr .98fr;max-width:1000px;margin:34px auto;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-2);overflow:hidden}
.fm-auth-aside{padding:34px 32px;background:var(--brand);color:var(--on-brand);display:flex;flex-direction:column;justify-content:center;gap:16px}
.fm-auth-aside h2{color:var(--on-brand);font-size:21px;margin:0}
.fm-auth-aside p{font-size:13.8px;margin:0;line-height:1.75}
/* 要点列表：以前每条前面塞一个 <i> 符号（￥ 🔒 ✎ ① ✓），四个登录注册页各选一套，
   既是 AI 味的符号图标，也是同一组件的四种写法。现在只留一条左侧短线当项目符号。 */
.fm-auth-points{list-style:none;padding:0;margin:4px 0 0;display:grid;gap:10px;font-size:13.5px;line-height:1.7}
.fm-auth-points li{padding-left:14px;border-left:2px solid rgba(255,255,255,.35)}
.fm-auth-main{padding:34px 32px}
.fm-auth-main h1{font-size:20px;margin-bottom:6px}
.fm-auth-main>p{color:var(--ink-500);font-size:13.6px;margin:0 0 20px}
@media (max-width:860px){
  .fm-auth-split{grid-template-columns:1fr;margin:16px}
  .fm-auth-aside{padding:22px 20px;gap:10px}
  .fm-auth-main{padding:24px 20px}
}

/* 密码强度条、结果页：见 fm-ui.css */

/* 安装页（独立 body，不套前台导航） */
body.fm-install{margin:0;min-height:100vh;display:grid;place-items:center;padding:24px;
  font-family:var(--font);background:var(--bg-soft);color:var(--ink-700);line-height:1.65}
.fm-install-card{width:min(540px,100%);background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-2);padding:32px}
.fm-install-card h1{font-size:20px;margin-bottom:10px}
.fm-install-tip{font-size:13.6px;color:var(--ink-500);margin:0 0 18px}
.fm-install-form{display:grid;gap:14px}
.fm-install-form label{display:grid;gap:6px;font-size:13.5px;color:var(--ink-700)}
.fm-install-help{font-size:12.8px;color:var(--ink-500);margin:0}
.fm-install-note{font-size:12.8px;color:var(--ink-500);margin:16px 0 0;padding-top:14px;border-top:1px dashed var(--line)}
.fm-install-err{background:var(--danger-100);color:var(--danger-text);padding:10px 12px;border-radius:var(--radius-sm);font-size:13.5px;margin:0 0 14px}
.fm-install-kv{margin:0 0 6px}
.fm-install-kv div{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:11px 13px;background:var(--bg-soft);border-radius:var(--radius-sm);margin-bottom:8px}
.fm-install-kv dt{font-size:13px;color:var(--ink-500)}
.fm-install-kv dd{margin:0;font-weight:700;color:var(--ink-900)}
.fm-install-kv code{font-size:15px;letter-spacing:.05em;user-select:all}
.fm-install-actions{margin:20px 0 0}

/* 页脚 */
.fm-footer{border-top:1px solid var(--line);background:var(--card);padding:26px 0;margin-top:30px}
.fm-footer .fm-wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-500)}
.fm-foot-links{display:flex;gap:18px;flex-wrap:wrap}
.fm-foot-links a{color:var(--ink-500)}.fm-foot-links a:hover{color:var(--brand)}
.fm-foot-meta{display:flex;gap:16px;flex-wrap:wrap;align-items:center}

/* 移动端 */
.fm-tabbar{display:none}
@media (max-width:1080px){
  .fm-cols{grid-template-columns:1fr}
  .fm-side-sticky{position:static}
  .fm-header .fm-nav,.fm-header .fm-search,.fm-header-right{display:none}
  .fm-burger{display:flex}
  .fm-header .fm-wrap{gap:12px;height:58px}
  .fm-nav-mobile.is-open{display:flex}
}
@media (max-width:860px){
  body.fm-front{font-size:14.5px;padding-bottom:60px}
  .fm-cards{grid-template-columns:1fr}
  .fm-main{padding:16px 0 30px}
  .fm-detail-head h1{font-size:19px}
  .fm-tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;height:56px;background:var(--card);
    border-top:1px solid var(--line);z-index:80;padding-bottom:env(safe-area-inset-bottom)}
  .fm-tabbar a{flex:1;display:grid;place-items:center;gap:2px;font-size:11px;color:var(--ink-500);position:relative}
  .fm-tabbar a.is-on{color:var(--brand-text)}
  .fm-tabbar i{position:absolute;top:5px;right:calc(50% - 20px);font-style:normal;background:var(--danger);color:var(--on-danger);
    font-size:10px;padding:1px 4px;border-radius:var(--pill);min-width:15px;text-align:center}
  .fm-table{font-size:13px}
  .fm-item h3{font-size:15px}
}
/* 前台外壳自己的过渡；组件动效由 fm-ui.css 关掉。
   卡片不再有位移，所以这里只收时长，不需要再写 transform:none 去抵消。 */
@media (prefers-reduced-motion:reduce){
  .fm-hover,.fm-item,.fm-cat,.fm-nav-item,.fm-search,.fm-chip{transition-duration:.01ms}
}
@media print{.fm-header,.fm-footer,.fm-tabbar,.fm-btn{display:none!important}}

/* =====================================================================
   方案A「暖壤市集」视觉覆盖层
   在 fm-ui.css 之后加载（front_page 顺序：fm-tokens → fm-ui → front），
   覆盖按钮/卡片/区块标题等组件观感，并新增顶部公告条、首页营销 Hero
   与货架分区、多栏正规化页脚。全部基于现有 .fm-* 令牌，不改后端逻辑。
   ===================================================================== */
@keyframes fm-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fm-pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(255,211,122,.5)}50%{opacity:.7;box-shadow:0 0 0 7px rgba(255,211,122,0)}}
@keyframes fm-tick{0%,22%{transform:translateY(0)}28%,50%{transform:translateY(-34px)}56%,78%{transform:translateY(-68px)}84%,100%{transform:translateY(-102px)}}

/* ---- 顶部公告条 ---- */
.fm-topbar{background:linear-gradient(90deg,var(--brand-700),var(--brand));color:#eaf2fc;font-size:13px;height:34px;
  display:flex;align-items:center;overflow:hidden}
.fm-topbar .fm-wrap{display:flex;align-items:center;gap:14px;height:100%;padding:0 20px}
.fm-topbar .fm-tick{display:flex;align-items:center;gap:10px;min-width:0;flex:1;overflow:hidden}
.fm-topbar .fm-tk-dot{width:7px;height:7px;border-radius:50%;background:#ffd37a;flex:none;animation:fm-pulse 1.6s ease infinite}
.fm-topbar .fm-tk-track{display:inline-flex;flex-direction:column;white-space:nowrap;line-height:34px;animation:fm-tick 9s linear infinite}
.fm-topbar .fm-tk-track span{height:34px;display:flex;align-items:center;gap:8px;overflow:hidden;text-overflow:ellipsis}
.fm-topbar .fm-tk-track b{font-weight:700;color:#fff;margin-right:6px}
.fm-topbar .fm-tk-more{flex:none;font-weight:600;color:#eaf2fc;border:1px solid rgba(255,255,255,.35);border-radius:999px;
  padding:2px 12px;transition:background .16s,color .16s;font-size:12.5px}
.fm-topbar .fm-tk-more:hover{background:rgba(255,255,255,.16);color:#fff}

/* ---- 头部强化 ---- */
.fm-header{box-shadow:0 1px 3px rgba(31,43,58,.05)}
.fm-nav-item{position:relative}
.fm-nav-item::after{content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;border-radius:2px;
  background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.fm-nav-item:hover::after,.fm-nav-item.is-on::after{transform:scaleX(1)}

/* ---- 按钮：渐变 + 柔和投影 + 上浮反馈 ---- */
.fm-btn{transition:transform .16s ease,box-shadow .16s,border-color .16s,background .16s,color .16s}
.fm-btn:hover{transform:translateY(-1px)}
.fm-btn:active{transform:translateY(0) scale(.97)}
.fm-btn-primary{background:linear-gradient(180deg,#4a88d8,#3a74c6);border-color:transparent;
  box-shadow:0 6px 16px rgba(63,130,212,.26)}
.fm-btn-primary:hover{background:linear-gradient(180deg,#3f7ecf,#2f6cbb);border-color:transparent;
  box-shadow:0 8px 20px rgba(63,130,212,.34);color:#fff;transform:translateY(-2px)}
.fm-btn-primary:active{transform:translateY(0) scale(.98)}
.fm-nav-cta{background:linear-gradient(180deg,#4a88d8,#3a74c6);box-shadow:0 6px 16px rgba(63,130,212,.26)}
.fm-nav-cta:hover{background:linear-gradient(180deg,#3f7ecf,#2f6cbb);transform:translateY(-2px)}

/* ---- 区块标题：左侧色条 ---- */
.fm-section-head h2{position:relative;padding-left:12px}
.fm-section-head h2::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:5px;height:20px;border-radius:3px;background:var(--brand)}

/* ---- 卡片：悬停上浮（方案A小动态） ---- */
.fm-hover{transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease}
.fm-hover:hover{transform:translateY(-3px);border-color:var(--brand)}
.fm-cat{transition:box-shadow .18s,border-color .18s,background .18s,transform .18s,color .18s}
.fm-cat:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}

/* ---- 首页营销 Hero ---- */
.fm-hero{position:relative;overflow:hidden;background:linear-gradient(120deg,#2f6cbb,#4a88d8 55%,#7fb0e8);
  color:#fff;border-radius:0 0 24px 24px;padding:0}
.fm-hero .fm-wrap{display:grid;grid-template-columns:1.15fr 1fr;gap:38px;align-items:center;padding:44px 20px 40px}
.fm-hero h1{font-size:32px;line-height:1.32;font-weight:800;letter-spacing:.01em;color:#fff;margin:0;animation:fm-rise .5s ease both}
.fm-hero h1 em{font-style:normal;color:#dcebfa}
.fm-hero .fm-hero-sub{margin:14px 0 22px;color:rgba(255,255,255,.9);font-size:15px;max-width:560px;line-height:1.7;animation:fm-rise .5s .06s ease both}
.fm-hero-bar{display:flex;gap:10px;flex-wrap:wrap;animation:fm-rise .5s .12s ease both}
.fm-hero-bar .fm-input{flex:1 1 240px;min-width:0;border-radius:999px;padding:11px 18px;border:0;box-shadow:0 6px 18px rgba(20,60,120,.18)}
.fm-hero-bar .fm-btn{border-radius:999px;padding:11px 24px;font-weight:700}
.fm-hero-stats{display:flex;gap:30px;flex-wrap:wrap;margin-top:26px;animation:fm-rise .5s .18s ease both}
.fm-hero-stats b{font-size:26px;font-weight:800;color:#fff}
.fm-hero-stats span{font-size:13px;color:rgba(255,255,255,.85);display:block;margin-top:2px}
.fm-hero-board{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.28);border-radius:16px;padding:18px 20px;animation:fm-rise .5s .1s ease both}
.fm-hero-board .fm-hb-ttl{font-size:13px;font-weight:700;color:#eaf2fc;margin-bottom:10px;letter-spacing:.08em}
.fm-hero-board a{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px dashed rgba(255,255,255,.26);font-size:13.5px;color:#eaf2fc}
.fm-hero-board a:first-of-type{border-top:0}
.fm-hero-board a:hover{color:#fff}
.fm-hero-board .fm-hb-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.fm-hero-board .fm-hb-v{flex:none;font-weight:700}
@media (max-width:860px){.fm-hero .fm-wrap{grid-template-columns:1fr;padding:30px 16px}.fm-hero h1{font-size:24px}.fm-hero-board{display:none}}

/* ---- 首页货架分区 ---- */
.fm-shelf{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow-1)}
.fm-shelf-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px}
.fm-shelf-head .fm-sh-kicker{font-size:11.5px;letter-spacing:.2em;color:var(--brand-text);font-weight:700;text-transform:uppercase}
.fm-shelf-head h2{font-size:19px;font-weight:800;color:var(--ink-900);margin:2px 0 0;line-height:1.2}
.fm-shelf-head .fm-sh-more{margin-left:auto;font-size:13.5px;color:var(--ink-500);font-weight:600}
.fm-shelf-head .fm-sh-more:hover{color:var(--brand)}
.fm-shelf-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.fm-shelf-group{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;
  transition:transform .18s,box-shadow .18s,border-color .18s,background .18s;animation:fm-rise .4s ease both}
.fm-shelf-group:nth-child(2){animation-delay:.04s}.fm-shelf-group:nth-child(3){animation-delay:.08s}
.fm-shelf-group:nth-child(4){animation-delay:.12s}.fm-shelf-group:nth-child(5){animation-delay:.16s}
.fm-shelf-group:hover{transform:translateY(-3px);border-color:var(--brand);background:#fff;box-shadow:var(--shadow-2)}
.fm-shelf-group .fm-sg-name{font-weight:700;font-size:14px;color:var(--ink-900);display:flex;align-items:center;gap:6px}
.fm-shelf-group .fm-sg-sub{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.fm-shelf-group .fm-sg-sub span{font-size:12px;color:var(--ink-500);background:var(--card);border-radius:5px;padding:2px 8px;transition:background .15s,color .15s}
.fm-shelf-group:hover .fm-sg-sub span{background:var(--brand-tint);color:var(--brand-text)}
@media (max-width:1080px){.fm-shelf-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.fm-shelf-grid{grid-template-columns:repeat(2,1fr)}}

/* ---- 页脚：多栏正规化 ---- */
.fm-footer{margin-top:44px;background:linear-gradient(180deg,#1a2f47,#1f2b3a);color:#b9c3cf;border-top:0;padding:0}
.fm-ft-main{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.25fr;gap:34px;padding:40px 20px 34px;font-size:13px}
.fm-ft-brand .fm-ft-logo{display:flex;align-items:center;gap:9px;font-weight:800;color:#fff;font-size:17px;margin-bottom:12px}
.fm-ft-brand p{color:#a6b2bd;line-height:1.75;max-width:320px;margin:0}
.fm-ft-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.fm-ft-badges span{font-size:11.5px;color:#cdd7e0;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  border-radius:999px;padding:3px 10px;font-weight:600}
.fm-ft-col h5{color:#fff;font-size:14px;margin:0 0 12px;padding-bottom:8px;position:relative}
.fm-ft-col h5::after{content:"";position:absolute;left:0;bottom:0;width:22px;height:2px;background:var(--brand);border-radius:2px}
.fm-ft-col a{display:block;color:#a6b2bd;font-size:13px;padding:5px 0;transition:color .16s,transform .16s}
.fm-ft-col a:hover{color:#fff;transform:translateX(2px)}
.fm-ft-contact div{display:flex;align-items:center;gap:8px;color:#a6b2bd;font-size:13px;padding:5px 0}
.fm-ft-contact div i{font-style:normal;color:var(--brand-text-d);width:15px;flex:none}
.fm-ft-bottom{border-top:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.2);padding:14px 0}
.fm-ft-bottom .fm-wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:12.5px;color:#7f8b96;padding:0 20px}
.fm-ft-bottom a{color:#a6b2bd}.fm-ft-bottom a:hover{color:#fff}
@media (max-width:1080px){.fm-ft-main{grid-template-columns:1fr 1fr;gap:24px}}
@media (max-width:720px){.fm-ft-main{grid-template-columns:1fr}}