/* =====================================================================
   FingerPixel 统一页头页脚 (chrome) — 供产品详情页使用
   与主站 site.css 视觉一致；作用域仅限 .fp-* / .btn，
   不含全局 reset，避免与详情页的 bootstrap-wondershare 冲突。
   ===================================================================== */
:root{
  --bg:#ffffff; --bg-soft:#f5f8fc; --bg-tint:#eef5fb; --surface:#ffffff;
  --ink:#0f172a; --text:#334155; --muted:#64748b; --line:#e6ebf2; --line-soft:#eef2f7;
  --brand:#0e7490; --brand-bright:#06b6d4; --brand-2:#2563eb;
  --brand-grad:linear-gradient(120deg,#0891b2 0%,#2563eb 100%);
  --r-sm:10px; --r-pill:999px;
  --shadow:0 10px 30px -12px rgba(15,23,42,.16);
  --container:1200px; --nav-h:64px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* nav/footer 内容宽度容器（详情页不加载 site.css，这里自带，避免依赖 bootstrap .container） */
.fp-nav__inner,
.fp-footer .container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 20px; }

/* ---------- 按钮（导航 CTA） ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.72rem 1.5rem; min-height:44px; font-family:var(--font); font-size:1rem; font-weight:600; line-height:1; cursor:pointer; border-radius:var(--r-pill); border:1px solid transparent; text-decoration:none; white-space:nowrap; transition:transform .2s var(--ease),box-shadow .2s var(--ease); }
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--brand-grad); color:#fff; box-shadow:0 10px 24px -10px rgba(37,99,235,.6); }
.btn-primary:hover{ color:#fff; box-shadow:0 16px 32px -12px rgba(37,99,235,.7); }

/* ---------- 页头导航 ---------- */
.fp-nav{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9); -webkit-backdrop-filter:saturate(160%) blur(12px); backdrop-filter:saturate(160%) blur(12px); border-bottom:1px solid var(--line); font-family:var(--font); }
.fp-nav__inner{ height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.fp-brand{ display:inline-flex; align-items:center; gap:.6rem; font-weight:800; font-size:1.12rem; color:var(--ink); letter-spacing:-.02em; text-decoration:none; }
.fp-brand:hover{ color:var(--ink); }
.fp-brand__mark{ width:30px; height:30px; border-radius:9px; background:var(--brand-grad); display:inline-flex; align-items:center; justify-content:center; box-shadow:0 6px 14px -6px rgba(37,99,235,.7); flex:none; }
.fp-brand__mark svg{ width:18px; height:18px; color:#fff; }
.fp-brand small{ display:block; font-size:.62rem; font-weight:600; letter-spacing:.18em; color:var(--muted); text-transform:uppercase; margin-top:1px; }
.fp-nav__links{ display:flex; align-items:center; gap:.35rem; }
.fp-nav__links a:not(.btn){ color:var(--text); font-weight:500; font-size:.98rem; padding:.5rem .85rem; border-radius:var(--r-sm); text-decoration:none; transition:color .2s var(--ease),background .2s var(--ease); }
.fp-nav__links a:not(.btn):hover{ color:var(--brand); background:rgba(6,182,212,.08); }
.fp-nav__cta{ margin-left:.5rem; }
.fp-nav__toggle{ display:none; }
.fp-burger{ display:none; width:44px; height:44px; border:0; background:transparent; cursor:pointer; align-items:center; justify-content:center; color:var(--ink); }
.fp-burger svg{ width:26px; height:26px; }
.fp-burger .x{ display:none; }
@media (max-width:900px){
  .fp-burger{ display:inline-flex; }
  .fp-nav__links{ position:absolute; left:0; right:0; top:var(--nav-h); flex-direction:column; align-items:stretch; gap:0; background:#fff; border-bottom:1px solid var(--line); box-shadow:var(--shadow); padding:.5rem 20px 1rem; max-height:0; overflow:hidden; opacity:0; transform:translateY(-6px); pointer-events:none; transition:max-height .3s var(--ease),opacity .2s var(--ease),transform .25s var(--ease); }
  .fp-nav__links a:not(.btn){ padding:.85rem .5rem; border-bottom:1px solid var(--line-soft); }
  .fp-nav__links .fp-nav__cta{ margin:.9rem 0 .2rem; display:flex; }
  .fp-nav__toggle:checked ~ .fp-nav__links{ max-height:420px; opacity:1; transform:none; pointer-events:auto; }
  .fp-nav__toggle:checked ~ .fp-burger .menu{ display:none; }
  .fp-nav__toggle:checked ~ .fp-burger .x{ display:block; }
}

/* ---------- 页脚 ---------- */
.fp-footer{ background:#0f172a; color:#cbd5e1; padding:56px 0 28px; margin-top:24px; font-family:var(--font); }
.fp-footer a{ text-decoration:none; }
.fp-footer__top{ display:flex; flex-wrap:wrap; gap:32px; justify-content:space-between; padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,.08); }
.fp-footer__brand{ max-width:320px; }
.fp-footer__brand .fp-brand{ color:#fff; }
.fp-footer__brand small{ color:#7c8aa5; }
.fp-footer__brand p{ margin:.9rem 0 0; color:#8595ad; font-size:.92rem; line-height:1.8; }
.fp-footer__cols{ display:flex; gap:clamp(32px,6vw,72px); flex-wrap:wrap; }
.fp-footer__col h5{ color:#fff; font-size:.95rem; margin:0 0 .9rem; font-weight:600; }
.fp-footer__col a{ display:block; color:#93a1b8; font-size:.92rem; padding:.3rem 0; }
.fp-footer__col a:hover{ color:#fff; }
.fp-footer__bottom{ padding-top:22px; display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; align-items:center; justify-content:center; font-size:.82rem; color:#7c8aa5; text-align:center; }
.fp-footer__bottom a{ color:#7c8aa5; display:inline-flex; align-items:center; gap:.35rem; }
.fp-footer__bottom a:hover{ color:#cbd5e1; }
.fp-footer__bottom img{ display:inline-block; height:16px; width:auto; }