@charset "utf-8";
/* ==========================================================================
   颐养适老版 · 站点模板样式表（eldercare）
   --------------------------------------------------------------------------
   适用：老年用品 / 康复辅具 / 适老化改造 / 养老服务机构

   配色依据（行业惯例 + 适老无障碍）：
     · 主色  暖橙棕 #B45A1E —— 老年用品与养老服务最常用的「温暖、照护、可信赖」色系，
                              白底对比度 4.75:1，达到 WCAG AA（正文级）；
     · 辅助色 墨绿  #1F6E60 —— 传递健康与安稳，用于分类标签、图标底、次级强调；
     · 底色  暖米白 #FFFBF4 —— 避免纯白刺眼，长时间阅读更舒适；
     · 页脚  深墨绿 #1F2E29 —— 浅字对比度 >10:1。

   适老化排版规范（本模板与其它模板的核心差异）：
     1. 基准字号 17px（其它模板 15.5px），正文行高 1.9；
     2. 按钮最小高度 50px、导航项 82px、分页与筛选项 ≥42px —— 满足触控目标尺寸；
     3. 链接与按钮统一可聚焦样式（:focus-visible 3px 描边），键盘/读屏可用；
     4. 提供「大字模式」开关（html.fs-lg），关键文本再放大 12%，选择记忆在浏览器本地；
     5. 尊重 prefers-reduced-motion（系统开启减少动效时关闭滚动动画）。
   ========================================================================== */

/* ==========================================================================
   1. 设计令牌
   ========================================================================== */
:root{
  /* 品牌色 */
  --brand:#B45A1E;
  --brand-dark:#93430F;
  --brand-light:#D98B4A;
  --brand-weak:#FCEFE1;

  /* 辅助色（健康/信赖） */
  --accent:#1F6E60;
  --accent-weak:#E4F1EE;

  --hot:#C6453C;
  --green:#2E8B57;

  /* 文字与线条 */
  --ink:#2A2420;
  --text:#3B342D;
  --muted:#6B6157;
  --line:#EDE0D0;

  /* 背景 */
  --bg-soft:#FDF8F1;
  --bg-soft2:#F9F1E5;
  --bg-page:#FFFBF4;

  /* 首屏 / 内页头图：深暖棕渐变，白字对比度 5.8:1 以上（保证正文级可读） */
  --hero-grad:linear-gradient(115deg,#2E1D10 0%,#5E3315 44%,#96541F 100%);
  --hero-accent:#FFD9A8;

  /* 主渐变（按钮、图标底、强调块） */
  --grad:linear-gradient(135deg,#B45A1E,#E09A46);
  --grad-135:linear-gradient(135deg,#E09A46,#B45A1E);

  /* 页脚 */
  --ft-bg:#1F2E29;
  --ft-text:#CBD6D0;
  --ft-muted:#93A29B;
  --ft-accent:#F0B077;
  --ft-line:rgba(255,255,255,.13);
  --ft-card:rgba(255,255,255,.05);

  /* 形状与阴影 */
  --radius:14px;
  --radius-s:10px;
  --shadow:0 6px 20px rgba(74,52,30,.07);
  --shadow-h:0 16px 40px rgba(74,52,30,.15);

  --w:1240px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB",
         "Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",sans-serif;
}

/* ==========================================================================
   2. 基础重置 + 无障碍
   ========================================================================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden}
body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;            /* 适老：基准字号上调（其它模板 15.5px） */
  line-height:1.9;           /* 适老：行距放宽 */
  color:var(--text);
  background:var(--bg-page);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;border:0}
a{color:inherit;text-decoration:none}
a:hover{color:var(--brand)}
ul,ol{list-style:none;margin:0;padding:0}
button{font-family:inherit}
h1,h2,h3,h4,h5{font-weight:700;line-height:1.35;color:var(--ink);margin:0}
h1{font-size:34px}
h2{font-size:28px}
h3{font-size:21px}
p{margin:0}
table{border-collapse:collapse}
main{display:block}

/* 焦点可见：键盘用户与读屏用户能明确看到当前位置 */
:focus-visible{
  outline:3px solid var(--brand);
  outline-offset:2px;
  border-radius:4px;
}

/* 跳到主要内容（读屏/键盘用户第一个可聚焦元素） */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:3000;
  background:var(--brand);color:#fff;padding:14px 22px;border-radius:0 0 12px 0;
  font-size:16px;font-weight:600;
}
.skip-link:focus{left:0;color:#fff}

/* 屏幕阅读器专用文本 */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.container{width:100%;max-width:var(--w);margin:0 auto;padding:0 20px}

/* ---- 大字模式（适老核心能力）：html.fs-lg 由 theme.js 切换并记忆 ---- */
html.fs-lg body{font-size:19px}
html.fs-lg .nav-link{font-size:18px}
html.fs-lg .sec-head h2{font-size:35px}
html.fs-lg .sec-head p{font-size:17px}
html.fs-lg .hero-sub{font-size:19.5px}
html.fs-lg .hero h1{font-size:44px}
html.fs-lg .quicknav-title{font-size:19px}
html.fs-lg .quicknav-desc{font-size:16px}
html.fs-lg .pc-body h3{font-size:18.5px}
html.fs-lg .pc-body p{font-size:16px}
html.fs-lg .mini-list a{font-size:17px}
html.fs-lg .art-body{font-size:19.5px}
html.fs-lg .art-title{font-size:29px}
html.fs-lg .footer-links a,html.fs-lg .footer-contacts li{font-size:16px}
html.fs-lg .footer-brand p{font-size:15px}
html.fs-lg .btn{font-size:17.5px;height:54px}
html.fs-lg .pd-desc,html.fs-lg .pd-tab-pane{font-size:17px}

/* ==========================================================================
   3. 按钮 / 区块标题 / 通用
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:50px;padding:0 30px;                 /* 适老：50px 高度，便于点按 */
  border:1px solid transparent;border-radius:999px;
  font-size:16.5px;font-weight:600;line-height:1;cursor:pointer;
  transition:transform .24s ease,box-shadow .24s ease,background .24s ease,color .24s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 8px 20px rgba(180,90,30,.26)}
.btn-primary:hover{background:var(--grad-135);color:#fff;transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(180,90,30,.34)}
.btn-ghost{border-color:var(--brand);color:var(--brand);background:#fff}
.btn-ghost:hover{background:var(--brand-weak);color:var(--brand-dark);transform:translateY(-2px)}
.btn-white{background:#fff;color:var(--brand-dark)}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.2);color:var(--brand-dark)}

.sec{padding:78px 0}
.sec-soft{background:var(--bg-soft2)}
.sec-head{margin-bottom:38px}
.sec-head.center{text-align:center}
.sec-eyebrow{
  display:inline-block;font-size:13px;letter-spacing:2.4px;color:var(--brand);
  font-weight:800;text-transform:uppercase;margin-bottom:10px;
}
.sec-head h2{font-size:32px;letter-spacing:.5px}
.sec-head p{margin-top:12px;color:var(--muted);font-size:16px}
.sec-foot{text-align:center;margin-top:42px}

/* ==========================================================================
   4. 适老服务条 / 顶部信息条 / 头部导航 / 移动抽屉
   ========================================================================== */
.a11y-bar{background:#2A2420;color:#F3E7D8;font-size:14px}
.a11y-bar .container{display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:40px;padding-top:6px;padding-bottom:6px}
.a11y-hint{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.a11y-hint i{font-style:normal;color:var(--ft-accent)}
.a11y-hint span{opacity:.92}
.a11y-tools{display:flex;align-items:center;gap:10px;flex-shrink:0}
.fs-toggle{
  height:30px;padding:0 16px;border-radius:999px;
  border:1px solid rgba(243,231,216,.45);background:transparent;color:#F3E7D8;
  font-size:13.5px;font-weight:600;cursor:pointer;transition:.22s;
}
.fs-toggle:hover{border-color:#F3E7D8;background:rgba(255,255,255,.1)}
.fs-toggle[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}

.topbar{background:var(--bg-soft2);color:var(--muted);font-size:14.5px;
  border-bottom:1px solid var(--line)}
.topbar .container{display:flex;align-items:center;justify-content:space-between;
  gap:18px;min-height:44px;padding-top:6px;padding-bottom:6px}
.topbar .tb-l{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.topbar .tb-l a{color:var(--muted)}
.topbar .tb-l a:hover{color:var(--brand)}
.tb-r{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.tb-tel{color:var(--brand-dark);font-weight:800;letter-spacing:.4px}

.site-header{
  position:sticky;top:0;z-index:1200;background:rgba(255,251,244,.98);
  backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid var(--line);
  transition:box-shadow .28s ease;
}
.site-header.on{box-shadow:0 8px 26px rgba(74,52,30,.1)}
.header-inner{display:flex;align-items:center;justify-content:space-between;
  height:82px;gap:24px}

.logo{display:flex;align-items:center;gap:13px;flex-shrink:0}
.logo-mark{
  width:46px;height:46px;border-radius:12px;background:var(--grad-135);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:21px;font-weight:800;letter-spacing:1px;flex-shrink:0;
}
.logo-txt b{display:block;font-size:21px;color:var(--ink);letter-spacing:.6px;line-height:1.25}
.logo-txt span{display:block;font-size:11.5px;color:var(--muted);letter-spacing:2px;
  text-transform:uppercase}

.nav-list{display:flex;align-items:center;gap:2px}
.nav-item{position:relative}
.nav-link{
  display:flex;align-items:center;gap:6px;padding:0 17px;line-height:82px;
  font-size:17px;color:var(--text);font-weight:600;transition:color .22s;position:relative;
}
.nav-item:hover>.nav-link,.nav-item.active>.nav-link,
.nav-item.on>.nav-link{color:var(--brand)}
.nav-item.active>.nav-link::after{
  content:"";position:absolute;left:17px;right:17px;bottom:0;height:4px;border-radius:3px 3px 0 0;
  background:var(--grad);
}

.header-cta{display:flex;align-items:center;gap:16px;flex-shrink:0}
.head-tel{text-align:right;line-height:1.3}
.head-tel span{display:block;font-size:13px;color:var(--muted);letter-spacing:.4px}
.head-tel b{display:block;font-size:23px;color:var(--brand-dark);letter-spacing:.4px;font-weight:800}

.nav-toggle{
  display:none;position:relative;width:48px;height:48px;border:1px solid var(--line);
  border-radius:12px;background:#fff;cursor:pointer;
}
.nav-toggle i{position:absolute;left:13px;width:22px;height:2.5px;background:var(--ink);
  border-radius:2px;transition:.28s}
.nav-toggle i:nth-child(1){top:16px}
.nav-toggle i:nth-child(2){top:23px}
.nav-toggle i:nth-child(3){top:30px}
.nav-toggle.on i:nth-child(1){top:23px;transform:rotate(45deg)}
.nav-toggle.on i:nth-child(2){opacity:0}
.nav-toggle.on i:nth-child(3){top:23px;transform:rotate(-45deg)}

.mobile-nav{
  position:fixed;right:0;top:0;bottom:0;width:86%;max-width:360px;background:#fff;z-index:1600;
  transform:translateX(102%);transition:transform .3s ease;overflow-y:auto;
  box-shadow:-14px 0 40px rgba(42,36,32,.2);
}
.mobile-nav.on{transform:translateX(0)}
.mn-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:18px 22px;border-bottom:1px solid var(--line)}
.mn-head .logo-txt b{font-size:19px}
.mn-close{width:44px;height:44px;border:1px solid var(--line);border-radius:12px;
  background:#fff;font-size:22px;color:var(--muted);cursor:pointer;flex-shrink:0}
.mobile-nav .mnav>li>a{
  display:flex;align-items:center;justify-content:space-between;padding:17px 22px;
  font-size:18px;font-weight:600;color:var(--text);border-bottom:1px solid var(--line);
}
.mobile-nav .mnav>li>a:hover{background:var(--bg-soft);color:var(--brand)}
.mobile-nav .msub{display:none;background:var(--bg-soft2)}
.mobile-nav .msub.open{display:block}
.mobile-nav .msub a{display:block;padding:13px 22px 13px 38px;font-size:16px;color:var(--muted)}
.mn-foot{padding:22px}
.mn-foot .btn{width:100%;margin-bottom:12px}
.nav-mask{position:fixed;inset:0;background:rgba(42,36,32,.55);z-index:1500;
  opacity:0;visibility:hidden;transition:.3s}
.nav-mask.show{opacity:1;visibility:visible}

/* ==========================================================================
   5. 快捷服务入口（产品展示型站点的第一层导航）
   ========================================================================== */
.quicknav{background:#fff;border-bottom:1px solid var(--line)}
.quicknav .container{display:grid;grid-template-columns:repeat(4,1fr)}
.quicknav-item{
  padding:26px 28px;border-left:1px solid var(--line);transition:.26s;position:relative;
}
.quicknav-item:first-child{border-left:0}
.quicknav-item::before{content:"";position:absolute;left:0;top:0;height:0;width:4px;
  background:var(--grad);transition:.26s}
.quicknav-item:hover{background:var(--bg-soft)}
.quicknav-item:hover::before{height:100%}
.quicknav-title{font-size:18px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:11px}
.quicknav-title i{width:38px;height:38px;border-radius:11px;background:var(--brand-weak);
  color:var(--brand);font-style:normal;display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0}
.quicknav-desc{margin-top:8px;font-size:15px;color:var(--muted);padding-left:49px;line-height:1.7}

/* ==========================================================================
   6. 首屏
   ========================================================================== */
.hero{position:relative;background:var(--hero-grad);overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 1px,transparent 1px 26px);
}
.hero::after{
  content:"";position:absolute;right:-140px;top:-160px;width:420px;height:420px;
  border-radius:50%;border:1px solid rgba(255,217,168,.22);
}
.hero .container{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;
  gap:48px;align-items:center;padding-top:72px;padding-bottom:72px}
.hero-badge{
  display:inline-flex;align-items:center;gap:10px;padding:8px 20px;
  border:1px solid rgba(255,217,168,.5);border-radius:999px;
  font-size:15px;color:#FCE6CC;background:rgba(255,255,255,.07);
}
.hero-badge i{width:8px;height:8px;border-radius:50%;background:var(--hero-accent);flex-shrink:0}
.hero h1{color:#fff;font-size:40px;letter-spacing:1px;margin-top:20px;line-height:1.3}
.hero h1 em{font-style:normal;color:var(--hero-accent)}
.hero-sub{margin:20px 0 30px;font-size:17.5px;color:rgba(255,255,255,.92);
  max-width:600px;line-height:1.9}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap}
.hero .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff;background:rgba(255,255,255,.1)}
.hero .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.2);color:#fff}
.hero-trust{
  display:flex;gap:34px;flex-wrap:wrap;margin-top:34px;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.2);
}
.hero-trust div{font-size:14.5px;color:rgba(255,255,255,.8)}
.hero-trust b{display:block;font-size:23px;color:var(--hero-accent);letter-spacing:.4px;
  font-weight:800;line-height:1.4}

.hero-visual{position:relative;height:360px}
.hv-card{position:absolute;border-radius:var(--radius);overflow:hidden;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);
  box-shadow:0 18px 40px rgba(0,0,0,.28)}
.hv-card.c1{left:0;top:0;width:64%;height:212px}
.hv-card.c2{right:0;bottom:0;width:58%;height:162px;background:rgba(255,251,244,.96);
  color:var(--ink);padding:20px 22px;display:flex;flex-direction:column;justify-content:center;
  gap:6px}
.hv-card.c2 b{display:block;font-size:16.5px;color:var(--ink)}
.hv-card.c2 span{font-size:15px;color:var(--muted);line-height:1.6}
.hv-card.c2 .mini-bar{display:flex;gap:6px;align-items:flex-end;height:40px;margin-top:12px}
.hv-card.c2 .mini-bar i{flex:1;border-radius:3px 3px 0 0;background:var(--grad)}
.hv-card .ph{position:absolute;inset:14px;border-radius:9px;
  border:1px dashed rgba(255,255,255,.4)}
.shot-sources{display:none}

/* ==========================================================================
   7. 产品展示墙
   ========================================================================== */
.product-tabs-wrap{display:flex;align-items:center;gap:12px;margin-bottom:30px}
.product-tabs{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;flex:1;padding:4px}
.product-tabs::-webkit-scrollbar{display:none}
.tab-btn{
  flex-shrink:0;display:inline-flex;align-items:center;
  height:46px;padding:0 24px;                 /* 适老：≥46px 触控高度 */
  border-radius:999px;border:1px solid var(--line);background:#fff;
  font-size:16px;color:var(--muted);font-weight:600;transition:.22s;
}
.tab-btn:hover{border-color:var(--brand);color:var(--brand)}
.tab-btn.active{background:var(--grad);border-color:transparent;color:#fff;
  box-shadow:0 8px 20px rgba(180,90,30,.24)}
.tab-arrow{flex-shrink:0;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--muted);font-size:18px;cursor:pointer;transition:.22s}
.tab-arrow:hover{border-color:var(--brand);color:var(--brand)}

/* 固定列数在「卡片数不是列数整数倍」时会留空洞（实测：资质 3 项 / 案例 3 项 / 招商 1 项）。
   改用 flex：每张卡等宽、整行居中；任意数量都不会出现豁口，单张时也只占一个卡片宽（不会被拉满）。 */
.product-grid{display:flex;flex-wrap:wrap;gap:22px;justify-content:center}
.product-grid>*{flex:1 1 250px;max-width:290px;min-width:0}
.product-card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;transition:.28s ease;
  box-shadow:0 2px 8px rgba(74,52,30,.04);
}
.product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-h);
  border-color:rgba(180,90,30,.38)}
.product-list{display:none}
.product-list.active{display:block}
.empty-note{
  display:block;text-align:center;padding:52px 24px;color:var(--muted);
  background:#fff;border:1px dashed var(--line);border-radius:var(--radius);font-size:16px;
}
.empty-note a{color:var(--brand);font-weight:600}

.pc-img{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;
  background:linear-gradient(140deg,#FBF1E3,#F5E3CB)}
.pc-img::after{content:"";position:absolute;right:-34px;top:-34px;width:120px;height:120px;
  border-radius:50%;background:rgba(180,90,30,.06)}
.pc-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease}
.product-card:hover .pc-img img{transform:scale(1.05)}
.pc-abbr{position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);
  font-size:32px;font-weight:800;color:rgba(180,90,30,.28);letter-spacing:2px}
.pc-img .ph-line{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);
  width:64%;height:34px;border-radius:6px;background:rgba(180,90,30,.12)}
.pc-tag{
  position:absolute;left:12px;top:12px;z-index:2;padding:5px 14px;border-radius:999px;
  font-size:13px;font-weight:700;color:#fff;background:var(--brand);
  /* 分类名来自企业数据，可能是长文本 → 单行省略，别把药丸撑成多行 */
  max-width:calc(100% - 24px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pc-tag.blue{background:var(--accent)}
.pc-tag.green{background:var(--green)}
.pc-body{padding:18px 20px 20px;border-top:1px solid var(--line);flex:1;
  display:flex;flex-direction:column}
.pc-body h3{font-size:17px;line-height:1.5}
.pc-body h3 a{transition:color .22s}
.product-card:hover .pc-body h3 a{color:var(--brand)}
.pc-body p{margin-top:8px;font-size:15px;color:var(--muted);line-height:1.75;flex:1;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc-more{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:15.5px;
  color:var(--brand);font-weight:700;transition:gap .22s}
.product-card:hover .pc-more,.sol-card:hover .pc-more{gap:12px}
.card-thumb-ph{font-size:26px;color:rgba(180,90,30,.35);font-weight:700;letter-spacing:1px}

/* ==========================================================================
   8. 服务承诺（适老服务的核心卖点区）
   ========================================================================== */
.svc-grid2{display:flex;flex-wrap:wrap;gap:22px;justify-content:center}
.svc-grid2>.svc-item{flex:1 1 280px;max-width:390px;min-width:0}
.svc-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 26px;transition:.28s}
.svc-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-h);
  border-color:rgba(180,90,30,.36)}
.svc-item i{display:flex;width:50px;height:50px;border-radius:13px;background:var(--brand-weak);
  color:var(--brand);align-items:center;justify-content:center;font-style:normal;
  font-size:23px;margin-bottom:16px}
.svc-item h3{font-size:18px;margin-bottom:10px}
.svc-item p{font-size:15.5px;color:var(--muted);line-height:1.8}
.faq-list{display:grid;gap:12px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.faq-q{
  width:100%;text-align:left;background:none;border:0;padding:19px 22px;font-size:17px;
  font-weight:700;color:var(--ink);cursor:pointer;display:flex;justify-content:space-between;
  align-items:center;gap:16px;line-height:1.5;
}
.faq-q::after{content:"+";font-size:22px;color:var(--brand);transition:.24s;flex-shrink:0}
.faq-item.open .faq-q::after{transform:rotate(45deg)}
.faq-a{display:none;padding:0 22px 20px;font-size:16px;color:var(--muted);line-height:1.9}
.faq-item.open .faq-a{display:block}

/* ==========================================================================
   9. 内容中心（新闻 / 资质 / 资讯多栏）
   ========================================================================== */
.cc-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:26px;align-items:start}
.cc-right{display:grid;gap:26px}
.cc-two{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.cc-block{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px}
.cc-block-header{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-bottom:18px;padding-bottom:15px;border-bottom:1px solid var(--line)}
.cc-block-title{font-size:19px;display:flex;align-items:center;gap:11px}
.cc-block-title::before{content:"";width:5px;height:19px;border-radius:3px;background:var(--grad)}
.hot-tag{padding:2px 10px;border-radius:999px;background:var(--hot);color:#fff;
  font-size:12px;font-weight:800;letter-spacing:1px}
.cc-more{font-size:15px;color:var(--muted);transition:.22s;flex-shrink:0}
.cc-more:hover{color:var(--brand)}

.news-card{display:flex;gap:16px;padding:14px 0;border-bottom:1px dashed var(--line)}
.news-card:last-child{border-bottom:0;padding-bottom:4px}
.news-thumb{flex-shrink:0;width:112px;height:78px;border-radius:10px;overflow:hidden;
  position:relative;background:linear-gradient(140deg,#FBF1E3,#F2DFC4)}
.news-thumb img{width:100%;height:100%;object-fit:cover}
.news-thumb i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-style:normal;font-size:13px;letter-spacing:1.5px;color:rgba(180,90,30,.6);font-weight:700}
.news-body{flex:1;min-width:0}
.news-title{font-size:16.5px;line-height:1.5;transition:.22s;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-weight:700;color:var(--ink)}
.news-card:hover .news-title{color:var(--brand)}
.news-desc{margin-top:6px;font-size:14.5px;color:var(--muted);line-height:1.7;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.news-meta{margin-top:9px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.news-tag{padding:3px 11px;border-radius:999px;background:var(--brand-weak);color:var(--brand);
  font-size:13px;line-height:1.6;font-weight:600}
.news-date{margin-left:auto;font-size:14px;color:var(--muted);white-space:nowrap}
.news-card.wide{align-items:center}
.news-card.wide .news-thumb{width:180px;height:124px}
.news-card.wide .news-title{font-size:18px;-webkit-line-clamp:2}

/* 新闻/案例列表页的两栏骨架（补充：原基线模板未定义，这里给出完整布局） */
.news-layout{display:grid;grid-template-columns:1fr 300px;gap:38px;align-items:start}
.news-main{min-width:0}
.news-side{position:sticky;top:104px}
.news-list{display:grid;gap:18px}
.news-list .news-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;transition:.26s}
.news-list .news-card:hover{box-shadow:var(--shadow-h);transform:translateY(-3px);
  border-color:rgba(180,90,30,.36)}

/* ⚠️ 布局写在 li 上：本模板的 .mini-list 有两种结构 ——
   ① <li><a>标题</a><span>日期</span></li>（首页资质、侧栏最新内容）
   ② <li><span>① 需求沟通</span><span>明确场景与预算</span></li>（案例页「落地流程」，无 <a>）
   原来布局只写在 `.mini-list a` 上，② 会退化成行内文本（"① 需求沟通明确场景与预算"粘成一行）。 */
.mini-list li{display:flex;align-items:center;gap:12px;padding:13px 0;
  border-bottom:1px dashed var(--line)}
.mini-list li:last-child{border-bottom:0}
.mini-list a{flex:1;min-width:0;display:flex;align-items:center;gap:12px;font-size:16px;
  color:var(--text);transition:.22s;line-height:1.65}
.mini-list a::before{content:"";flex-shrink:0;width:7px;height:7px;border-radius:50%;
  background:var(--brand-light);transition:.22s}
.mini-list a:hover{color:var(--brand)}
.mini-list a:hover::before{background:var(--brand);transform:scale(1.3)}
.mini-list li>span:first-child:not(:only-child){flex:1;min-width:0;font-size:16px;
  color:var(--text);line-height:1.65}
.mini-list time,.mini-list a>span:last-child,
.mini-list li>span:last-child:not(:only-child){margin-left:auto;flex-shrink:0;font-size:14.5px;
  color:var(--muted);text-align:right}
.mini-list .q-badge{flex-shrink:0;width:26px;height:26px;border-radius:7px;background:var(--grad);
  color:#fff;font-size:14px;font-weight:800;display:flex;align-items:center;
  justify-content:center}
.baike-item{padding:13px 0;border-bottom:1px dashed var(--line)}
.baike-item:last-child{border-bottom:0}
.baike-item b{display:block;font-size:16px;font-weight:700;color:var(--ink);transition:.22s}
.baike-item:hover b{color:var(--brand)}
.baike-item p{margin-top:5px;font-size:14.5px;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ==========================================================================
   10. 关于我们
   ========================================================================== */
.about-hero{height:300px;border-radius:var(--radius);overflow:hidden;position:relative;
  margin-bottom:48px;background:var(--hero-grad)}
.about-hero::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 48px),
  repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 48px)}
.about-hero .ah-cap{position:absolute;left:38px;bottom:32px;z-index:2;color:#fff}
.about-hero .ah-cap b{font-size:27px;letter-spacing:3px;display:block}
.about-hero .ah-cap span{font-size:15px;letter-spacing:2px;color:rgba(255,255,255,.82)}
.about-hero .ah-badge{position:absolute;right:38px;bottom:32px;z-index:2;text-align:right;color:#fff}
.about-hero .ah-badge b{font-size:38px;font-family:Georgia,serif;color:var(--hero-accent)}
.about-hero .ah-badge b small{font-size:20px}
.about-hero .ah-badge span{display:block;font-size:15px;color:rgba(255,255,255,.82)}
.about-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:start}
.about-left h2{font-size:30px;margin-bottom:18px}
.about-left>p{color:var(--muted);margin-bottom:24px;font-size:16.5px;line-height:1.95}
.about-points{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0 28px}
.about-points div{text-align:center;padding:18px 10px;border:1px solid var(--line);
  border-radius:var(--radius-s);background:#fff;transition:.28s}
.about-points div:hover{border-color:var(--brand);box-shadow:var(--shadow);transform:translateY(-3px)}
.about-points b{display:block;width:42px;height:42px;margin:0 auto 10px;border-radius:12px;
  background:var(--brand-weak);color:var(--brand);font-size:19px;line-height:42px;
  font-family:Georgia,serif}
.about-points span{font-size:15px;color:var(--muted)}
.value-stack{display:grid;gap:16px}
.value-item{display:flex;align-items:flex-start;gap:18px;padding:22px 24px;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);
  transition:.28s}
.value-item:hover{border-color:rgba(180,90,30,.4);box-shadow:var(--shadow);transform:translateX(4px)}
/* ⚠️ 必须限定直接子级 `>i`：否则 .ph 里的提示 <i>（占位说明文字）也会被命中，
   被渲染成 50×50 的橙色圆角方块（实测 box=50x50 + 橙色渐变底），文字挤在里面完全看不清。 */
.value-item>i{flex-shrink:0;width:50px;height:50px;border-radius:13px;background:var(--grad);
  color:#fff;font-style:normal;display:flex;align-items:center;justify-content:center;
  font-size:22px}
/* 占位块在 .value-item（行向 flex）里会塌成内容宽度：实测宽 102px 而父容器 545px，
   100px 的大字与提示文字挤成一条竖带 —— 这里强制撑满，并把大字按 200px 高缩小。 */
.value-item>.ph{flex:1 1 auto;width:100%;min-width:0}
.value-item>.ph b{font-size:72px}
.value-item>img{width:100%;border-radius:12px}
.value-title{font-size:17px;font-weight:700;color:var(--ink);display:block}
.value-desc{margin-top:5px;font-size:15.5px;color:var(--muted);display:block;line-height:1.75}

/* ==========================================================================
   11. CTA / 友情链接
   ========================================================================== */
.cta{background:var(--hero-grad);color:#fff;padding:58px 0;position:relative;overflow:hidden}
.cta::after{content:"";position:absolute;right:-130px;top:-150px;width:400px;height:400px;
  border-radius:50%;border:1px solid rgba(255,217,168,.22)}
.cta .container{position:relative;z-index:2;display:flex;align-items:center;
  justify-content:space-between;gap:34px;flex-wrap:wrap}
.cta h2{color:#fff;font-size:28px}
.cta p{margin-top:10px;color:rgba(255,255,255,.88);font-size:16.5px;line-height:1.8}
.cta-btns{display:flex;gap:16px;flex-wrap:wrap}
.cta .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff;background:transparent}
.cta .btn-ghost:hover{background:rgba(255,255,255,.16);color:#fff}

.friend-links{padding:30px 0;border-top:1px solid var(--line);background:#fff}
.friend-links .container{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap}
.friend-links b{font-size:16px;color:var(--ink);flex-shrink:0}
.friend-links a{font-size:15px;color:var(--muted);transition:.22s}
.friend-links a:hover{color:var(--brand)}

/* ==========================================================================
   12. 页脚
   ========================================================================== */
.site-footer{background:var(--ft-bg);color:var(--ft-text);font-size:15.5px}
/* auto-fit：栏目数会变（「服务与保障」整栏可能因 nav_hidden 被隐藏），
   固定 4 列时少一栏就会留空位 */
.footer-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:40px;
  padding:60px 0 46px}
.footer-brand .brand-line{display:flex;align-items:center;gap:13px;margin-bottom:18px}
.footer-brand .brand-line img{height:46px;width:auto;border-radius:10px}
/* ⚠️ 选择器必须写成 `.brand-line .brand-mark`（三个类）：
   若只写 `.footer-brand .brand-mark`（两个类），会被下面 `.brand-line .brand-txt>span`
   这类"两个类+标签"的规则在**同一元素**上压低优先级 —— 实测出现过 display 被改成 block、
   字号降到 11.5px、颜色变 --ft-muted，结果橙色方块里等于看不见字。
   现在文字容器单独用 .brand-txt，方块与文字彻底不共用选择器。 */
.footer-brand .brand-line .brand-mark{width:44px;height:44px;border-radius:12px;
  background:linear-gradient(135deg,#E09A46,#B45A1E);color:#fff;display:flex;
  align-items:center;justify-content:center;font-weight:800;font-size:19px;line-height:1;
  letter-spacing:0;text-transform:none;flex-shrink:0;text-align:center;overflow:hidden}
.footer-brand .brand-line .brand-txt b{display:block;font-size:19px;color:#fff;letter-spacing:.6px}
.footer-brand .brand-line .brand-txt>span{display:block;font-size:11.5px;color:var(--ft-muted);
  letter-spacing:2px;text-transform:uppercase}
.footer-brand p{font-size:15px;line-height:1.9;color:var(--ft-muted)}
.footer-col h4{color:#fff;font-size:17px;margin:0 0 20px;letter-spacing:.5px;
  position:relative;padding-bottom:13px}
.footer-col h4::after{content:"";position:absolute;left:0;bottom:0;width:26px;height:3px;
  border-radius:2px;background:var(--ft-accent)}
.footer-links li{margin-bottom:12px}
.footer-links a{display:inline-flex;align-items:center;gap:9px;color:var(--ft-text);
  transition:.22s;font-size:15.5px}
.footer-links a i{width:6px;height:6px;border-radius:1px;background:var(--ft-accent);
  transform:rotate(45deg);flex-shrink:0}
.footer-links a:hover{color:var(--ft-accent);transform:translateX(3px)}
.footer-contacts li{margin-bottom:13px;color:var(--ft-muted);font-size:15px;line-height:1.8}
.footer-contacts strong{color:#fff;font-size:19px;letter-spacing:.4px;display:inline-block}
.footer-contacts a{color:var(--ft-text)}
.footer-contacts a:hover{color:var(--ft-accent)}
.footer-contacts .badge{display:inline-block;margin-left:8px;padding:2px 10px;border-radius:999px;
  background:rgba(240,176,119,.16);color:var(--ft-accent);font-size:12px;font-weight:700;
  letter-spacing:.5px}
.qr-row{display:flex;gap:14px;margin-top:16px}
.qr-row .qr{width:84px;height:84px;border-radius:10px;background:var(--ft-card);
  border:1px solid var(--ft-line);display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--ft-muted);text-align:center;line-height:1.5;padding:6px}
.footer-bottom{border-top:1px solid var(--ft-line);padding:20px 0;display:flex;
  justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:14px;color:var(--ft-muted)}
.footer-bottom a{color:var(--ft-muted)}
.footer-bottom a:hover{color:var(--ft-accent)}
.footer-bottom .beian{display:inline-flex;flex-wrap:wrap;align-items:center;gap:0 12px}
.ft-lic{display:inline}
.ft-lic>span{display:inline}

/* ==========================================================================
   13. 侧悬浮操作 / 移动端底部导航 / Toast / 回顶部
   ========================================================================== */
.side-float{position:fixed;right:18px;bottom:120px;z-index:1400;display:flex;
  flex-direction:column;gap:12px}
.side-float a,.side-float button{
  width:52px;height:52px;border-radius:13px;border:1px solid var(--line);background:#fff;
  box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;font-size:11.5px;color:var(--muted);cursor:pointer;
  transition:.24s;
}
.side-float a:hover,.side-float button:hover{background:var(--grad);color:#fff;
  border-color:transparent;transform:translateY(-3px)}
.side-float i{font-style:normal;font-size:19px;line-height:1}

.bottom-nav{display:none;position:fixed;left:0;right:0;bottom:0;z-index:1400;
  background:rgba(255,251,244,.99);border-top:1px solid var(--line);
  box-shadow:0 -6px 24px rgba(74,52,30,.1)}
.bottom-nav .container{display:grid;grid-template-columns:repeat(4,1fr);height:64px}
.bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;font-size:12.5px;color:var(--muted);transition:.2s}
.bottom-nav a i{font-style:normal;font-size:20px;line-height:1}
.bottom-nav a.on{color:var(--brand);font-weight:700}
.bottom-nav .bn-cta{background:var(--grad);color:#fff;margin:9px 12px;border-radius:11px;
  height:46px;display:flex;align-items:center;justify-content:center;font-size:15px;
  font-weight:700}

.toast{position:fixed;left:50%;bottom:48px;transform:translate(-50%,20px);z-index:2000;
  background:#2A2420;color:#fff;padding:14px 28px;border-radius:999px;font-size:16px;
  box-shadow:0 14px 34px rgba(42,36,32,.4);opacity:0;visibility:hidden;transition:.3s;
  border:1px solid rgba(240,176,119,.45);max-width:calc(100% - 32px);text-align:center}
.toast.on{opacity:1;visibility:visible;transform:translate(-50%,0)}

.totop{position:fixed;right:22px;bottom:40px;width:52px;height:52px;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--brand);font-size:20px;cursor:pointer;
  box-shadow:var(--shadow);display:none;align-items:center;justify-content:center;
  z-index:60;transition:.24s}
.totop.show{display:flex}
.totop:hover{background:var(--brand);color:#fff;border-color:var(--brand)}

.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ==========================================================================
   14. 内页通用骨架
   ========================================================================== */
.page-hero{position:relative;background:var(--hero-grad);color:#fff;
  padding:66px 0 58px;overflow:hidden;text-align:center}
.page-hero::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(circle at 50% 40%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 40%,#000,transparent 78%)}
.page-hero .container{position:relative;z-index:2}
.page-hero h1{color:#fff;font-size:34px;letter-spacing:2px}
.page-hero p{margin-top:14px;color:rgba(255,255,255,.9);font-size:16.5px;
  max-width:760px;margin-left:auto;margin-right:auto;line-height:1.85}
/* 面包屑：本模板各页都把 .crumb 放在 .container **内部**（不是整宽条），
   所以内边距必须写在 .crumb 自身上 —— 原来只写在 `.crumb .container`，
   嵌套用法里没有内层 .container，实测 padding=0px，文字直接贴边。 */
.crumb{background:var(--bg-soft2);border:1px solid var(--line);border-radius:var(--radius-s);
  font-size:14.5px;color:var(--muted);padding:12px 18px;margin-bottom:28px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.crumb .container{padding:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--brand)}
.crumb i{font-style:normal;opacity:.55}
.page-main{padding:56px 0 80px}
.layout{display:grid;grid-template-columns:290px 1fr;gap:40px;align-items:start}
.wide{width:100%}

.side-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);margin-bottom:24px}
.sc-head{background:var(--grad);color:#fff;padding:17px 22px;font-size:17px;font-weight:700;
  letter-spacing:.5px}
.sc-head span{display:block;font-size:11.5px;color:rgba(255,255,255,.8);letter-spacing:2px;
  text-transform:uppercase;margin-top:3px;font-weight:600}
.side-nav li a{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 22px;font-size:16px;color:var(--text);border-bottom:1px solid var(--line);
  transition:.22s}
.side-nav li:last-child a{border-bottom:0}
.side-nav li a::after{content:"›";color:var(--muted);font-size:19px}
.side-nav li a:hover,.side-nav li.active a{background:var(--bg-soft);color:var(--brand);
  padding-left:26px}
.side-cta{padding:24px 22px;background:var(--grad-135);color:#fff;border-radius:var(--radius)}
.side-cta b{display:block;font-size:17px;margin-bottom:8px}
.side-cta p{font-size:15px;color:rgba(255,255,255,.9);line-height:1.85;margin-bottom:16px}
.side-cta .btn{width:100%;height:48px;font-size:16px;background:#fff;color:var(--brand-dark)}
.side-cta .btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(74,40,12,.32)}

/* ==========================================================================
   15. 文章详情
   ========================================================================== */
.art-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:44px 48px}
.art-title{font-size:28px;line-height:1.5}
.art-meta{margin:18px 0 26px;padding-bottom:20px;border-bottom:1px solid var(--line);
  font-size:14.5px;color:var(--muted);display:flex;gap:20px;flex-wrap:wrap}
.art-body{font-size:17px;color:var(--text);line-height:2.0}
.art-body p{margin-bottom:18px}
.art-body h2{font-size:22px;margin:34px 0 16px;padding-left:14px;
  border-left:4px solid var(--brand);line-height:1.5}
.art-body h3{font-size:19px;margin:26px 0 12px}
.art-body ul,.art-body ol{margin:0 0 18px 22px;list-style:disc}
.art-body ol{list-style:decimal}
.art-body ul li,.art-body ol li{margin-bottom:9px}
.art-body strong{color:var(--ink)}
.art-body img{max-width:100%;height:auto;border-radius:10px;margin:16px 0}
.art-body blockquote{margin:22px 0;padding:18px 22px;background:var(--bg-soft);
  border-left:4px solid var(--brand);border-radius:0 var(--radius-s) var(--radius-s) 0;
  color:var(--muted);font-size:16.5px}
.art-figure{margin:26px 0;border-radius:var(--radius-s);overflow:hidden;height:230px;
  position:relative;background:var(--hero-grad)}
.art-figure::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 46px),
  radial-gradient(circle at 70% 25%,rgba(255,217,168,.22),transparent 62%)}
.art-figure figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 20px;
  background:linear-gradient(0deg,rgba(30,20,10,.86),transparent);color:#F7E4CC;font-size:14.5px}
.art-foot{margin-top:36px;padding-top:26px;border-top:1px solid var(--line);display:flex;
  justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:15.5px}
.art-foot a{color:var(--muted);transition:.22s;display:block;max-width:46%;line-height:1.6}
.art-foot a:hover{color:var(--brand)}
.art-foot span{display:block;font-size:13px;color:var(--muted);margin-bottom:6px;opacity:.85}

/* ==========================================================================
   16. 列表筛选与分页
   ========================================================================== */
.filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:28px;
  padding:18px 22px;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.filter-bar a{display:inline-flex;align-items:center;height:42px;padding:0 20px;
  border-radius:999px;font-size:15.5px;color:var(--muted);border:1px solid var(--line);
  transition:.22s}
.filter-bar a:hover{border-color:var(--brand);color:var(--brand)}
.filter-bar a.on{background:var(--grad);color:#fff;border-color:transparent;font-weight:700}
.search-input{height:44px;border:1px solid var(--line);border-radius:999px;padding:0 20px;
  font-size:15.5px;font-family:inherit;color:var(--text);outline:none;min-width:200px;
  background:#fff;transition:.22s}
.search-input:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-weak)}
.fb-btn{height:44px;padding:0 26px;border:0;border-radius:999px;background:var(--grad);
  color:#fff;font-size:15.5px;font-weight:700;cursor:pointer;transition:.22s}
.fb-btn:hover{filter:brightness(1.06)}
.pager{display:flex;justify-content:center;gap:10px;margin-top:42px;flex-wrap:wrap}
.pager a,.pager span{min-width:44px;height:44px;line-height:42px;text-align:center;padding:0 14px;
  border:1px solid var(--line);border-radius:10px;font-size:15.5px;color:var(--muted);
  background:#fff;transition:.22s}
.pager a:hover{border-color:var(--brand);color:var(--brand)}
.pager .on{background:var(--grad);border-color:transparent;color:#fff;font-weight:700}

/* ==========================================================================
   17. 联系我们
   ========================================================================== */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:42px;align-items:start}
.contact-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:34px}
.contact-box h3{font-size:21px;margin-bottom:22px;padding-bottom:16px;
  border-bottom:1px solid var(--line)}
.ct-li{display:flex;gap:17px;margin-bottom:22px;align-items:flex-start}
.ct-li i{flex-shrink:0;width:48px;height:48px;border-radius:13px;background:var(--grad);
  color:#fff;font-style:normal;display:flex;align-items:center;justify-content:center;
  font-size:20px}
.ct-li h4{font-size:15px;margin-bottom:6px;color:var(--muted);font-weight:600}
.ct-li p{font-size:17px;color:var(--ink);font-weight:700;line-height:1.7}
.ct-li p small{display:block;font-size:14.5px;color:var(--muted);font-weight:400;margin-top:4px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-grid .full{grid-column:1/-1}
.field label{display:block;font-size:15.5px;color:var(--muted);margin-bottom:8px;font-weight:600}
.field label i{color:var(--hot);font-style:normal}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);
  border-radius:var(--radius-s);padding:14px 16px;font-size:16.5px;font-family:inherit;
  color:var(--text);outline:none;transition:.22s;background:#fff;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);
  box-shadow:0 0 0 4px var(--brand-weak)}
.form-grid .btn{width:100%}
.form-tip{font-size:14.5px;color:var(--muted);margin-top:14px;line-height:1.8}
.map-box{margin-top:52px;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;height:340px;position:relative;background:var(--bg-soft);
  background-image:linear-gradient(rgba(180,90,30,.06) 1px,transparent 1px),
  linear-gradient(90deg,rgba(180,90,30,.06) 1px,transparent 1px);background-size:38px 38px}
.map-pin{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);text-align:center}
.map-pin b{display:block;width:56px;height:56px;margin:0 auto 14px;border-radius:50%;
  background:var(--grad);color:#fff;line-height:56px;font-size:24px;
  box-shadow:0 12px 30px rgba(180,90,30,.34)}
.map-pin span{font-size:15px;color:var(--muted);background:#fff;padding:7px 18px;
  border-radius:999px;border:1px solid var(--line)}

/* ==========================================================================
   18. 方案卡与技术支持
   ========================================================================== */
.sol-grid{display:flex;flex-wrap:wrap;gap:24px;justify-content:center}
.sol-grid>.sol-card{flex:1 1 260px;max-width:300px;min-width:0}
.sol-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:.3s;display:flex;flex-direction:column}
.sol-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-h);
  border-color:rgba(180,90,30,.38)}
.sol-img{height:158px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#FBF1E3,#F3DFC2)}
.sol-img i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-style:normal;
  font-size:38px;color:rgba(180,90,30,.42);font-weight:800;letter-spacing:3px;
  font-family:Georgia,"Songti SC",serif}
.sol-body{padding:22px 24px 24px;flex:1;display:flex;flex-direction:column}
.sol-body h3{font-size:18.5px;margin-bottom:10px}
.sol-body p{font-size:15.5px;color:var(--muted);flex:1;line-height:1.8}
.sol-body .pc-more{margin-top:16px}

/* ==========================================================================
   19. 产品详情页
   ========================================================================== */
.pd-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px}
.pd-layout{display:grid;grid-template-columns:1.02fr .98fr;gap:42px;align-items:start}
.pd-gallery{min-width:0}
.pd-main{position:relative;aspect-ratio:1/1;border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(140deg,#FBF1E3,#F1DFC6);overflow:hidden}
.pd-main::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,rgba(180,90,30,.05) 0 1px,transparent 1px 24px)}
.pd-main img,.pd-main .ph{width:100%;height:100%;object-fit:cover}
.pd-main .pc-abbr{font-size:70px}
.pd-main .ph-line{width:70%;height:64px;bottom:12%}
.pd-main .ph-line::after{top:16px;height:22px}
.pd-main .pc-tag{font-size:14px;padding:7px 18px}
.pd-thumbs{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.pd-thumbs>.pd-thumb{flex:0 0 88px}
.pd-thumb{aspect-ratio:1/1;border:1px solid var(--line);border-radius:12px;cursor:pointer;
  background:linear-gradient(140deg,#FDF6EC,#F2E2CB);transition:.22s;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;
  color:rgba(180,90,30,.55)}
.pd-thumb:hover,.pd-thumb.on{border-color:var(--brand);box-shadow:0 0 0 3px rgba(180,90,30,.14)}
.pd-info .pd-cat{font-size:15px;font-weight:700;color:var(--brand);letter-spacing:.5px}
.pd-info h1{font-size:29px;line-height:1.42;margin-top:10px}
.pd-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.pd-tag{padding:7px 18px;border-radius:999px;background:var(--brand-weak);color:var(--brand-dark);
  font-size:14.5px;font-weight:700}
.pd-desc{margin-top:18px;font-size:16.5px;line-height:1.95;color:var(--muted)}
/* 产品详情页的统计格固定只有 2 项（参考价格 / 浏览次数），原来是 4 列 →
   右半行整块留空。auto-fit 让 2 项各占一半，将来加项也能自适应。 */
.pd-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:24px}
.pd-stats div{border:1px solid var(--line);border-radius:12px;padding:15px 10px;text-align:center;
  background:var(--bg-soft)}
.pd-stats b{display:block;font-size:21px;color:var(--brand-dark)}
.pd-stats span{display:block;margin-top:5px;font-size:14px;color:var(--muted)}
.pd-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.pd-actions .btn{padding:0 34px}
.pd-hotline{margin-top:20px;font-size:15.5px;color:var(--muted)}
.pd-hotline b{color:var(--brand-dark);font-size:19px;margin-left:6px}
.pd-tabs{margin-top:38px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
.pd-tab-nav{display:flex;border-bottom:1px solid var(--line);background:var(--bg-soft2);
  overflow-x:auto}
.pd-tab-btn{padding:17px 30px;font-size:17px;font-weight:700;color:var(--muted);border:0;
  border-bottom:3px solid transparent;background:none;cursor:pointer;white-space:nowrap;
  transition:.22s}
.pd-tab-btn.on{color:var(--brand);border-bottom-color:var(--brand);background:#fff}
.pd-tab-pane{display:none;padding:30px 32px;font-size:16.5px;line-height:2.0;color:var(--ink)}
.pd-tab-pane.active{display:block}
.pd-tab-pane h3{font-size:18.5px;margin-bottom:12px}
.pd-tab-pane ul{padding-left:20px;color:var(--muted);list-style:disc}
.pd-tab-pane li{margin:7px 0}
.pd-tab-pane img{max-width:100%;height:auto;border-radius:10px;margin:16px 0}
.pd-tab-pane table{width:100%;border-collapse:collapse}
.pd-tab-pane table td,.pd-tab-pane table th{border:1px solid var(--line);padding:12px 16px;
  font-size:16px}
.spec-table{width:100%;border-collapse:collapse;font-size:15.5px}
.spec-table td{padding:13px 16px;border:1px solid var(--line);color:var(--muted);line-height:1.75}
.spec-table td:first-child{width:200px;background:var(--bg-soft);font-weight:700;color:var(--ink)}
.pd-related{margin-top:48px}
.pd-related .sec-head{margin-bottom:24px}
/* .pd-related .product-grid 沿用上面的 flex（原固定 3 列，只有 2 项时会留空洞） */

/* ==========================================================================
   20. 平台适配段（YouxieWang 企业站运行时补充）
   ========================================================================== */
/* 缺图占位：企业名首字品牌大字 + 提示（与其它模板同口径） */
.ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  background:linear-gradient(135deg,#FCF3E6,#FFFBF4);height:100%}
.ph b{font-size:100px;line-height:1;font-weight:700;color:rgba(180,90,30,.16);letter-spacing:2px}
.ph i{font-style:normal;font-size:15px;color:#B9A288;letter-spacing:2px;
  display:flex;align-items:center;gap:14px;text-align:center}
.ph i::before,.ph i::after{content:"";width:32px;height:1px;background:#E6D5BE}
.hero-visual .ph{height:330px;border-radius:14px}
.pc-img img,.pd-main img,.pc-img .ph,.pd-main .ph{width:100%;height:100%;object-fit:cover}

/* 导航高亮补充态 */
.nav-item.on>.nav-link{color:var(--brand)}

/* ==========================================================================
   21. 响应式
   ========================================================================== */
@media (max-width:1180px){
  .nav-link{padding:0 12px;font-size:16px}
  .head-tel{display:none}
  /* .product-grid / .footer-top 交给 flex 与 auto-fit 自适应，不能再覆盖固定列数 */
  .footer-top{gap:34px}
}
@media (max-width:1024px){
  .layout,.news-layout{grid-template-columns:1fr;gap:32px}
  .news-side{position:static}
}
@media (max-width:980px){
  .nav-list,.header-cta .head-tel{display:none}
  .nav-toggle{display:block}
  .sec{padding:60px 0}
  .sec-head h2{font-size:27px}
  .hero .container{grid-template-columns:1fr;gap:40px;padding-top:48px;padding-bottom:48px}
  .hero-visual{display:none}
  .hero h1{font-size:31px}
  .quicknav .container{grid-template-columns:1fr 1fr}
  .quicknav-item{border-left:0;border-top:1px solid var(--line)}
  .quicknav-item:nth-child(-n+2){border-top:0}
  .quicknav-item:nth-child(even){border-left:1px solid var(--line)}
  .cc-grid,.about-grid,.contact-grid{grid-template-columns:1fr;gap:32px}
  .cc-two{grid-template-columns:1fr}
  .about-hero{height:220px}
  .about-hero .ah-cap{left:24px;bottom:22px}
  .about-hero .ah-cap b{font-size:22px}
  .about-hero .ah-badge{right:24px;bottom:22px}
  .about-hero .ah-badge b{font-size:30px}
  .cta .container{flex-direction:column;align-items:flex-start;gap:24px}
  .footer-top{gap:32px;padding:48px 0 36px}
  .page-hero h1{font-size:28px}
  .art-card{padding:28px 22px}
  .bottom-nav{display:block}
  body{padding-bottom:64px}
  .side-float{display:none}
  .totop{bottom:80px}
  .pd-layout{grid-template-columns:1fr;gap:26px}
  .pd-info h1{font-size:23px}
  .toast{bottom:84px}
}
@media (max-width:640px){
  .container{padding:0 16px}
  .a11y-bar .container{flex-wrap:wrap;gap:10px}
  .a11y-hint span{display:none}
  .topbar .container{flex-wrap:wrap}
  .tb-r{gap:14px}
  .header-inner{height:70px}
  .logo-mark{width:42px;height:42px;font-size:19px}
  .logo-txt b{font-size:18px}
  .hero h1{font-size:clamp(23px,6.6vw,28px);letter-spacing:0}
  .hero-sub{font-size:16.5px}
  .hero-actions .btn,.cta-btns .btn{width:100%}
  .hero-trust{gap:18px}
  .hero-trust div{font-size:14px}
  .quicknav .container{grid-template-columns:1fr}
  .quicknav-item{border-left:0 !important;border-top:1px solid var(--line)}
  .quicknav-item:first-child{border-top:0}
  .quicknav-desc{padding-left:0}
  /* flex 卡片在窄屏放开宽度上限，避免被 max-width 卡成窄条居中 */
  .product-grid>*,.sol-grid>.sol-card,.svc-grid2>.svc-item{max-width:none}
  .about-points{grid-template-columns:1fr}
  .pd-stats{grid-template-columns:repeat(2,1fr)}
  .sec-head h2{font-size:24px}
  .sec{padding:48px 0}
  .form-grid{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr;gap:30px}
  .cc-two{gap:24px}
  .filter-bar{padding:14px}
  .search-input{flex:1;min-width:0}
  .page-hero{padding:48px 0 42px}
  .page-hero h1{font-size:24px;letter-spacing:1px}
  .page-hero p{font-size:15.5px}
  .news-thumb{width:92px;height:66px}
  .news-card.wide{flex-direction:column;align-items:stretch}
  .news-card.wide .news-thumb{width:100%;height:170px}
  .about-grid{gap:28px}
  .art-body{font-size:17px;line-height:1.95}
  .art-title{font-size:22px}
  .pd-card{padding:20px}
  .pd-tab-pane{padding:20px}
  .pd-tab-btn{padding:15px 22px;font-size:16px}
  .pager a,.pager span{min-width:42px;height:42px;line-height:40px;padding:0 11px}
}

/* 尊重系统的「减少动效」偏好 */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}