/* ==========================================================================
   有关家快修 · 官网样式系统 v2
   --------------------------------------------------------------------------
   设计基调：企业色取自 logo 实测 —— 房子蓝 #187DC5 + 背景橙 #EF8134
   用色规则：蓝做主调（标题、图形、导航），橙做大色块（行动条、报价按钮）；
             橙底一律配深字 #2A1508（与 logo 同一种用法），橙底白字对比不足 3:1
   设计原则：
     1. 大字号梯级 —— 标题要压得住页面，正文要够舒服
     2. 大留白     —— 区块间距 104px，让内容有呼吸
     3. 弱边框     —— 用留白和阴影分区，不靠灰线切块
     4. 数字优先   —— 价格、年限、门店数一律大字重 + 等宽数字
   ========================================================================== */

:root{
  /* 底色 */
  --paper:#faf9f6;
  --paper-2:#f3f1ea;
  --cream:#eae5d8;
  --white:#ffffff;

  /* 墨色：中性微冷（旧版偏绿，与蓝橙企业色不搭，已去除） */
  --ink:#0f1720;
  --ink-2:#374650;
  --ink-3:#556169;
  --ink-4:#66717a;

  /* 品牌：取自 logo 实测 —— 房子蓝 #187DC5 + 背景橙 #EF8134 */
  --rust:#187dc5;        /* 品牌蓝：大标题强调、图形、编号 */
  --rust-ink:#1570b4;    /* 文字 / 按钮底：配白字 5.3:1 */
  --rust-deep:#0f5891;
  --rust-soft:#e8f4fc;

  --pine:#0e3a57;        /* 深色区：品牌蓝的深色版 */
  --pine-deep:#092b41;
  --pine-soft:#e2eef7;

  /* 行动色：品牌橙。深色版用于文字，亮色只做底 */
  --flare:#a8500e;       /* 文字用橙，白底 5.6:1 / 浅米底 5.0:1 */
  --flare-band:#ef8134;  /* 色块用橙，配深字 */
  --flare-deep:#9c4a0c;
  --flare-soft:#fdf1e7;
  --on-flare:#2a1508;    /* 橙底上的文字色 */
  /* nav band = brand orange itself (was darkened #B45309); text/icons now --on-flare, 6.5:1 on #EF8134 */
  --nav-band:var(--flare-band);

  --amber:#9a6700;
  --amber-soft:#fdf6e3;
  --red:#b42318;
  --red-soft:#fef3f2;
  --green:#15803d;

  /* 线 */
  --line:#e6e2d9;
  --line-2:#f0ede6;
  --line-soft:rgba(15,23,32,.07);
  --line-dark:rgba(255,255,255,.1);

  /* 圆角 */
  --r-sm:6px;
  --r:10px;
  --r-lg:16px;
  --r-xl:24px;

  /* 阴影：三级 */
  --sh-1:0 1px 2px rgba(16,23,19,.05);
  --sh-2:0 2px 4px rgba(16,23,19,.04), 0 10px 24px -14px rgba(16,23,19,.16);
  --sh-3:0 4px 8px rgba(16,23,19,.04), 0 24px 56px -28px rgba(16,23,19,.28);

  --wrap:1280px;
  --wrap-narrow:840px;

  /* 字体栈 */
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-num:ui-monospace,"SF Mono",Consolas,"Roboto Mono",monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  font-family:var(--font);
  background:var(--paper);
  color:var(--ink);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none}
::selection{background:var(--rust);color:#fff}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px}
.wrap-narrow{max-width:var(--wrap-narrow);margin:0 auto;padding:0 40px}

/* ---------- 顶部信息条 ---------- */
.topbar{
  background:var(--pine-deep);
  color:#96b6cc;
  font-size:12.5px;
  letter-spacing:.01em;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:38px;gap:20px}
.topbar a{color:#b7d0e0;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.topbar a:hover{color:#fff}
.topbar .tb-l{display:flex;gap:20px;align-items:center}
.topbar .dot{width:6px;height:6px;border-radius:50%;background:#3ecf8e;display:inline-block;margin-right:7px;vertical-align:0px;box-shadow:0 0 0 3px rgba(62,207,142,.16)}
.topbar .tb-r{display:flex;gap:14px;align-items:center}
.topbar .tb-r .sep{color:rgba(255,255,255,.22)}

/* 备案号链接：沿用所在位置的文字色，静态观感与纯文本一致；悬停给下划线提示可点 */
a.icp{color:inherit}
a.icp:hover{text-decoration:underline}
.topbar a.icp{color:#96b6cc}
.topbar a.icp:hover{color:#fff;text-decoration:none}

/* ---------- 导航 ---------- */
/* brand orange band + dark-brown text: same usage as the logo, WCAG AA 6.5:1 */
.nav{
  position:sticky;top:0;z-index:100;
  background:var(--nav-band);
  border-bottom:1px solid rgba(42,21,8,.14);
  transition:box-shadow .2s;
}
.nav .wrap{display:flex;align-items:center;height:78px;gap:40px}

.logo{display:flex;align-items:center;gap:11px;flex-shrink:0}
/* 深橙底上用白底圆角块装 logo，蓝房子才立得住 */
.logo-mark{
  width:42px;height:42px;flex-shrink:0;display:block;object-fit:contain;
  background:#fff;border-radius:11px;padding:7px;
}
.logo-txt{display:flex;flex-direction:column;line-height:1.15}
.logo-txt b{font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--on-flare)}
.logo-txt span{font-size:10.5px;color:rgba(42,21,8,.82);letter-spacing:.1em;margin-top:3px}

.nav-menu{display:flex;gap:2px;flex:1;margin-left:8px}
.nav-menu a{
  font-size:14.5px;color:var(--on-flare);padding:9px 14px;border-radius:8px;
  transition:background .16s,color .16s;white-space:nowrap;font-weight:560;
}
.nav-menu a:hover{background:rgba(42,21,8,.10);color:var(--on-flare)}
/* 当前页：实心白胶囊 + 深橙字，与正文字幕拉开层级 */
.nav-menu a.on{background:#fff;color:var(--nav-band);font-weight:700}

.nav-cta{display:flex;align-items:center;gap:12px;flex-shrink:0}
.nav-tel{display:flex;flex-direction:column;line-height:1.15;text-align:right;margin-right:6px}
.nav-tel span{font-size:10.5px;color:rgba(42,21,8,.82);letter-spacing:.07em}
.nav-tel b{font-size:16.5px;font-variant-numeric:tabular-nums;letter-spacing:.01em;color:var(--on-flare);font-weight:750}

.burger{display:none;width:42px;height:42px;border:1px solid rgba(42,21,8,.52);border-radius:var(--r-sm);place-items:center}
.burger span{display:block;width:17px;height:1.6px;background:var(--on-flare);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:1.6px;background:var(--on-flare)}
.burger span::before{top:-5.5px}.burger span::after{top:5.5px}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:var(--r);font-size:15px;font-weight:650;
  transition:transform .14s,background .18s,box-shadow .18s,border-color .18s;
  white-space:nowrap;letter-spacing:.01em;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--rust-ink);color:#fff;box-shadow:0 1px 2px rgba(21,112,180,.24), 0 8px 20px -10px rgba(21,112,180,.5)}
.btn-primary:hover{background:var(--rust-deep);box-shadow:0 2px 4px rgba(21,112,180,.28), 0 14px 28px -12px rgba(21,112,180,.55)}
/* 橙色导航里的主按钮：白底深橙字（6.3:1），与 logo 的橙底白字互为反转 */
.nav .btn-primary{background:#fff;color:var(--flare-deep);box-shadow:0 1px 2px rgba(42,21,8,.16), 0 8px 18px -10px rgba(42,21,8,.42)}
.nav .btn-primary:hover{background:#fff6ee;color:var(--flare-deep);box-shadow:0 2px 6px rgba(42,21,8,.2), 0 12px 24px -12px rgba(42,21,8,.46)}
/* 品牌橙按钮：橙底配深字，对比 6.5:1 */
.btn-flare{background:var(--flare-band);color:var(--on-flare);font-weight:780;
  box-shadow:0 1px 2px rgba(217,106,30,.28), 0 10px 24px -12px rgba(217,106,30,.6)}
.btn-flare:hover{background:#f2903f;box-shadow:0 2px 4px rgba(217,106,30,.32), 0 16px 32px -12px rgba(217,106,30,.66)}
.btn-ghost{border:1px solid var(--line);color:var(--ink-2);background:var(--white)}
.btn-ghost:hover{border-color:var(--ink-4);color:var(--ink);box-shadow:var(--sh-1)}
.btn-dark{background:var(--pine);color:#fff}
.btn-dark:hover{background:var(--pine-deep)}
.btn-lg{padding:15px 30px;font-size:16px;border-radius:12px}
.btn-light{background:#fff;color:var(--pine)}
.btn-light:hover{background:#eef4fa}
.btn-outline-light{border:1px solid rgba(255,255,255,.28);color:#fff}
.btn-outline-light:hover{background:rgba(255,255,255,.1)}

/* ---------- 首屏 ---------- */
.hero{
  padding:40px 0 104px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(760px 420px at 88% -10%, rgba(24,125,197,.11), transparent 66%),
    radial-gradient(600px 380px at 6% 108%, rgba(239,129,52,.07), transparent 64%),
    var(--paper);
  border-bottom:1px solid var(--line-soft);
}
/* 工程网格纹理：极淡，撑住「施工」的语境 */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(24,125,197,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(24,125,197,.05) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(to bottom, #000 0%, transparent 78%);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, transparent 78%);
}
.hero .wrap{position:relative}

/* 首屏业务切换：三等分段进度条，段内文字 + 段下 2px 填充，七秒走满即切屏 */
/* 负 margin 把蓝点的占位收到内容边界外，让文字与 h1 左边缘对齐 */
.hero-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0 0 40px -14px}
.hero-nav-i{
  position:relative;display:block;text-align:left;font-family:inherit;
  padding:0 0 12px;border:0;background:none;cursor:pointer;
}
.hero-nav-i .hn-label{
  display:flex;align-items:baseline;gap:8px;
  font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.2;
  color:var(--ink-4);transition:color .18s ease;
}
/* 当前项前面的实心蓝点：比“进度条走到哪”更先被看到，静态下就能认出在播哪屏 */
.hero-nav-i .hn-label::before{
  content:"";flex-shrink:0;width:6px;height:6px;border-radius:50%;
  background:var(--rust);opacity:0;transform:translateY(-2px);transition:opacity .2s ease;
}
.hero-nav-i.is-on .hn-label::before{opacity:1}
.hero-nav-i:hover .hn-label{color:var(--ink-2)}
.hero-nav-i.is-on .hn-label{color:var(--ink)}
.hero-nav-i:focus-visible{outline:2px solid var(--rust-ink);outline-offset:3px;border-radius:3px}
.hero-nav-i .hn-k{
  font-family:var(--font-num);font-size:10.5px;font-weight:700;letter-spacing:.1em;
  color:var(--ink-4);transition:color .18s ease;
}
.hero-nav-i.is-on .hn-k{color:var(--rust)}
/* 轨道 1px、填充 2px：线不抢镜，但当前项的段明显更实 */
.hero-nav-i .hn-bar{
  position:absolute;left:0;right:0;bottom:0;height:1px;
  background:rgba(15,23,32,.12);
}
.hero-nav-i .hn-fill{
  position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--rust);
  transform:scaleX(0);transform-origin:left center;
}

/* 三张 slide 叠在同一格：高度取最高者，切换时不抖动 */
.hero-vp{display:grid}
.hero-slide{
  grid-area:1/1;display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:80px;align-items:start;
  visibility:hidden;pointer-events:none;transition:visibility .52s;
}
.hero-slide.is-on{visibility:visible;pointer-events:auto}
/* 切屏时屏内元素依次上浮入场：纯靠过渡延迟错峰，不动 JS 时间轴 */
.hero-slide > div > *,
.hero-slide > .quote-card{
  opacity:0;transform:translateY(18px);
  transition:opacity .3s ease,transform .3s ease;
}
.hero-slide.is-on > div > *,
.hero-slide.is-on > .quote-card{
  opacity:1;transform:none;
  transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1);
}
.hero-slide.is-on .eyebrow{transition-delay:.05s}
.hero-slide.is-on h1,.hero-slide.is-on .hero-h1{transition-delay:.1s}
.hero-slide.is-on .hero-sub{transition-delay:.17s}
.hero-slide.is-on .hero-facts{transition-delay:.24s}
.hero-slide.is-on .hero-actions{transition-delay:.31s}
.hero-slide.is-on .hero-note{transition-delay:.36s}
.hero-slide.is-on .quote-card{transition-delay:.2s}
/* 第 2、3 屏主标题：视觉与 h1 同级，但不重复 h1 语义 */

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12.5px;font-weight:700;letter-spacing:.12em;color:var(--rust-ink);
  background:var(--rust-soft);border:1px solid rgba(21,112,180,.16);
  padding:6px 14px;border-radius:99px;margin-bottom:26px;
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--rust);flex-shrink:0}

h1,.hero-h1{
  font-size:clamp(42px,4.5vw,74px);
  line-height:1.14;
  font-weight:840;
  letter-spacing:-.042em;
  margin-bottom:24px;
  color:var(--ink);
}
h1 em,.hero-h1 em{font-style:normal;color:var(--rust);position:relative;white-space:nowrap;z-index:0}
h1 em::after,.hero-h1 em::after{
  content:"";position:absolute;left:-2px;right:-2px;bottom:.02em;height:.32em;
  background:var(--rust-soft);z-index:-1;border-radius:3px;
}
.hero-sub{font-size:17px;color:var(--ink-2);line-height:1.8;max-width:580px;margin-bottom:32px}
.hero-sub b{color:var(--ink);font-weight:680}

.hero-facts{display:flex;gap:0;margin-bottom:36px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:26px}
.fact{border-left:1px solid var(--line-soft);padding:0 26px}
.fact:first-child{border-left:none;padding-left:0;padding-right:30px}
.fact b{display:block;font-size:26px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.15;color:var(--ink)}
/* 第一个数字是本屏的主指标：字号拉大一档并上品牌色，打破四列平铺的表格感 */
.fact:first-child b{font-size:44px;line-height:1.02;letter-spacing:-.04em;color:var(--rust-ink)}
.fact span{font-size:12.5px;color:var(--ink-3);letter-spacing:.02em}
.fact:first-child span{display:block;margin-top:6px;font-size:13px;color:var(--ink-2)}

.hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-note{font-size:13px;color:var(--ink-3);margin-top:20px;display:flex;align-items:center;gap:8px}
.hero-note::before{content:"✓";color:var(--green);font-weight:800}

/* ---------- 报价卡（首屏右侧） ---------- */
.quote-card{
  background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r-xl);
  box-shadow:var(--sh-3);overflow:hidden;position:sticky;top:100px;width:520px;max-width:100%;
}
.qc-head{
  padding:18px 24px;border-bottom:1px solid var(--line-soft);
  display:flex;justify-content:space-between;align-items:center;background:var(--white);
  position:relative;
}
/* 主卡顶部左侧一道品牌色短竖条：跟首屏切换器的进度线呼应，避免整卡过于平 */
.qc-head::before{
  content:"";position:absolute;left:0;top:17px;bottom:17px;width:3px;
  background:var(--rust);border-radius:0 3px 3px 0;
}
.qc-head b{font-size:15.5px;font-weight:750;letter-spacing:-.01em}
.qc-head span{
  font-size:11px;color:var(--rust-ink);letter-spacing:.06em;font-weight:700;
  background:var(--rust-soft);padding:3px 9px;border-radius:99px
}
.qc-body{padding:4px 0;background:var(--white)}
.qc-row{
  display:grid;grid-template-columns:1fr auto;gap:18px;align-items:baseline;
  padding:15px 24px;border-bottom:1px solid var(--line-2);position:relative;
  transition:background .16s;
}
.qc-row::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent;
  transition:background .16s;
}
.qc-row:hover{background:#fcfcfa}
.qc-row:hover::before{background:var(--rust)}
.qc-row:last-child{border-bottom:none}
.qc-row .k{font-size:14px;color:var(--ink-2);font-weight:550}
.qc-row .k small{display:block;font-size:12px;color:var(--ink-4);margin-top:2px;font-weight:400}
.qc-row .v{
  font-size:20px;font-weight:790;font-variant-numeric:tabular-nums;letter-spacing:-.025em;
  color:var(--flare);white-space:nowrap;line-height:1.2;
}
.qc-row .v s{font-size:11.5px;color:var(--ink-4);font-weight:500;text-decoration:none;display:block;text-align:right;letter-spacing:0;margin-top:1px}
.qc-foot{padding:16px 24px;background:var(--pine);color:#b6cbd9;font-size:12.5px;line-height:1.65}
.qc-foot b{color:#fff}
.qc-tag{display:inline-block;background:rgba(255,255,255,.15);padding:2px 8px;border-radius:4px;font-size:10.5px;letter-spacing:.06em;margin-right:7px;color:#fff}
/* 报价卡底部行动区 */
.qc-cta{padding:16px 24px;background:var(--white);border-top:1px solid var(--line-2);display:grid;gap:10px}
.qc-cta .btn{width:100%}
.qc-cta .btn-flare{box-shadow:0 2px 6px rgba(217,106,30,.26), 0 12px 26px -12px rgba(217,106,30,.55)}
.qc-cta p{font-size:11.5px;color:var(--ink-4);text-align:center;line-height:1.6;margin:0}

/* ---------- 通用 Section ---------- */
.sec{padding:104px 0;border-bottom:1px solid var(--line-soft)}
.sec:last-of-type{border-bottom:none}
.sec-alt{background:var(--paper-2)}
.sec-dark{background:var(--pine-deep);color:#bdd3e2;border-bottom:none}

.sec-head{margin-bottom:56px;max-width:900px}
/* 标题尽量均分两行，避免末行只剩一两个字。不支持的浏览器行为不变 */
.sec-head h2{text-wrap:balance}
.sec-kicker{
  font-size:12px;font-weight:750;letter-spacing:.18em;color:var(--rust-ink);
  margin-bottom:14px;display:flex;align-items:center;gap:10px;
}
.sec-kicker::before{content:"";width:22px;height:2px;background:var(--rust);flex-shrink:0}
.sec-dark .sec-kicker{color:#6fb8d6}
.sec-dark .sec-kicker::before{background:#6fb8d6}

h2{font-size:clamp(28px,2.6vw,44px);line-height:1.26;font-weight:820;letter-spacing:-.035em;color:var(--ink)}
.sec-dark h2{color:#fff}
.sec-desc{font-size:16px;color:var(--ink-3);margin-top:16px;line-height:1.85}
.sec-dark .sec-desc{color:#8fa9bb}

h3{font-size:21px;font-weight:750;letter-spacing:-.02em;margin-bottom:14px}
h4{font-size:16px;font-weight:720;margin-bottom:9px;letter-spacing:-.01em}

/* ---------- 业务卡 ---------- */
.biz-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.biz{
  background:var(--white);padding:36px 32px 32px;display:flex;flex-direction:column;
  border:1px solid var(--line-soft);border-radius:var(--r-lg);
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s,border-color .22s;
  position:relative;overflow:hidden;
}
.biz::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--rust),rgba(24,125,197,.1));
  transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.biz:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:transparent}
.biz:hover::before{transform:scaleX(1)}
.biz-no{
  font-size:11px;font-weight:800;color:var(--ink-4);letter-spacing:.16em;
  font-variant-numeric:tabular-nums;margin-bottom:16px;
}
.biz h3{font-size:24px;margin-bottom:8px;letter-spacing:-.025em}
.biz .biz-tag{
  font-size:12.5px;color:var(--flare);font-weight:680;margin-bottom:16px;
  letter-spacing:.01em;
}
.biz p{font-size:14.5px;color:var(--ink-2);line-height:1.8;margin-bottom:20px;flex:1;max-width:520px}
.biz ul{list-style:none;font-size:13.5px;color:var(--ink-3);margin-bottom:24px;display:grid;gap:8px}
.biz ul li{position:relative;padding-left:18px;line-height:1.6}
.biz ul li::before{
  content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:1px;
  background:var(--rust);opacity:.5;transform:rotate(45deg);
}
.biz-link{
  font-size:14px;font-weight:680;color:var(--pine);display:inline-flex;align-items:center;gap:6px;
  padding-top:16px;border-top:1px solid var(--line-2);transition:color .16s;
}
.biz-link:hover{color:var(--rust)}
.biz-link::after{content:"→";transition:transform .2s;display:inline-block}
.biz:hover .biz-link::after{transform:translateX(4px)}

/* ---------- 数据条 ---------- */
.stats{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;
  background:rgba(255,255,255,.08);
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.stat{padding:40px 32px;background:var(--pine-deep);position:relative}
.stat b{
  display:block;font-size:46px;font-weight:840;color:#fff;letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;line-height:1.05;
}
.stat b em{font-size:18px;font-style:normal;font-weight:600;color:#6fb8d6;margin-left:4px;letter-spacing:0}
.stat span{font-size:13px;color:#9ab4c6;display:block;margin-top:10px;letter-spacing:.02em}
/* 深色底上的占位数字：降燥，不抢眼 */
.stat .stat-tbd{
  display:block;font-size:46px;font-weight:840;line-height:1.05;letter-spacing:-.045em;
  color:#6fb8d6;border-bottom:2px dashed rgba(111,184,214,.42);padding-bottom:2px;
}

/* ---------- 价格表 ---------- */
.price-table{
  width:100%;border-collapse:separate;border-spacing:0;font-size:14.5px;
  background:var(--white);border:1px solid var(--line-soft);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1);
}
.price-table th{
  background:var(--paper-2);text-align:left;padding:14px 20px;font-size:12.5px;
  font-weight:720;color:var(--ink-2);border-bottom:1px solid var(--line);letter-spacing:.06em;
  text-transform:none;
}
.price-table td{padding:16px 20px;border-bottom:1px solid var(--line-2);color:var(--ink-2);vertical-align:top;line-height:1.65}
/* 无表头的两列信息表（如企业注册信息）：首列固定、次列自适应 */
.price-table td.k{color:var(--ink-3)}
/* 两列「标签—内容」信息表（如企业注册信息）：标签列不折行，内容列吃掉剩余宽度 */
.info-table td:first-child{white-space:nowrap;color:var(--ink-3)}
/* 表格外层滚动容器：窄屏可横向滑动，避免列被压成竖条 */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
/* 表格不再单独限宽：全站内容轨道统一 1200px，所有块共享同一条左基线与同一条右边界 */
.price-table tbody tr{transition:background .14s}
.price-table tr:last-child td{border-bottom:none}
.price-table tbody tr:hover{background:#fbfbf8}
.price-table .num{
  font-variant-numeric:tabular-nums;font-weight:750;color:var(--flare);
  white-space:nowrap;font-size:15.5px;letter-spacing:-.015em;
}
.price-table .lvl{font-weight:750;color:var(--ink);font-size:15px}
.price-table .lvl small{display:block;font-weight:400;color:var(--ink-3);font-size:12.5px;margin-top:2px}

/* ---------- 报价区间图 ---------- */
.chart{
  background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  padding:40px 36px 32px;box-shadow:var(--sh-1);
}
.chart-scale{position:relative;height:22px;margin:0 0 10px}
.chart-scale span{
  position:absolute;font-size:11.5px;color:var(--ink-4);transform:translateX(-50%);
  font-variant-numeric:tabular-nums;letter-spacing:.03em;white-space:nowrap;
}
.chart-body{display:grid;gap:16px}
.chart-row{display:grid;grid-template-columns:200px 1fr 120px;gap:22px;align-items:center}
.chart-row .cl b{display:block;font-size:14.5px;font-weight:720;letter-spacing:-.01em}
.chart-row .cl small{display:block;font-size:11.5px;color:var(--ink-4);margin-top:1px}
.chart-track{position:relative;height:36px;background:var(--paper-2);border-radius:9px;overflow:hidden}
.chart-bar{
  position:absolute;top:0;bottom:0;left:var(--s);width:var(--w);
  background:linear-gradient(90deg,var(--rust-ink),var(--rust-deep));border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-size:11.5px;color:#fff;font-weight:750;font-variant-numeric:tabular-nums;
  letter-spacing:.02em;transition:filter .18s;
}
.chart-bar.hot{background:linear-gradient(90deg,var(--flare-band),#f5a05c);color:var(--on-flare)}
.chart-row:hover .chart-bar{filter:brightness(1.06)}
.chart-val{
  text-align:right;font-size:19px;font-weight:820;font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;color:var(--flare);line-height:1.15;
}
.chart-val small{display:block;font-size:11px;color:var(--ink-4);font-weight:500;letter-spacing:0;margin-top:1px}

/* ---------- 施工流程条 ---------- */
.flow{display:grid;grid-template-columns:repeat(6,1fr);margin-top:10px}
.flow-step{position:relative;padding-right:18px}
.flow-step::before{
  content:"";position:absolute;left:38px;right:0;top:18px;height:1.5px;
  background:var(--line);z-index:0;
}
.flow-step:last-child::before{display:none}
.flow-dot{
  position:relative;z-index:1;width:36px;height:36px;border-radius:50%;
  background:var(--white);border:1.5px solid var(--line);
  display:grid;place-items:center;font-size:13px;font-weight:800;
  color:var(--rust);font-variant-numeric:tabular-nums;margin-bottom:18px;
  transition:background .2s,color .2s,border-color .2s,transform .2s;
}
.flow-step:hover .flow-dot{background:var(--rust);color:#fff;border-color:var(--rust);transform:scale(1.08)}
.flow-step b{display:block;font-size:15px;font-weight:720;margin-bottom:6px;letter-spacing:-.01em}
.flow-step p{font-size:12.5px;color:var(--ink-3);line-height:1.7;margin:0}
/* 深色底上的流程条 */
.sec-dark .flow-step::before{background:rgba(255,255,255,.13)}
.sec-dark .flow-dot{background:transparent;border-color:rgba(255,255,255,.24);color:#6fb8d6}
.sec-dark .flow-step:hover .flow-dot{background:var(--rust);border-color:var(--rust);color:#fff}
.sec-dark .flow-step b{color:#fff}
.sec-dark .flow-step p{color:#8fa9bb}

/* ---------- 门店表 ---------- */
.store-table{
  width:100%;border-collapse:separate;border-spacing:0;font-size:14px;
  background:var(--white);border:1px solid var(--line-soft);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1);
}
.store-table th{
  background:var(--pine-deep);color:#b8ccdb;text-align:left;padding:14px 18px;
  font-size:12px;font-weight:650;letter-spacing:.06em;
}
.store-table td{padding:16px 18px;border-bottom:1px solid var(--line-2);color:var(--ink-2);line-height:1.6}
.store-table tr:last-child td{border-bottom:none}
.store-table tbody tr{transition:background .14s}
.store-table tbody tr:hover{background:#fbfbf8}
.store-table .st-name{font-weight:720;color:var(--ink)}
.store-table .st-num{font-variant-numeric:tabular-nums;white-space:nowrap}
.store-badge{
  display:inline-block;font-size:10.5px;padding:2px 8px;border-radius:99px;
  background:var(--pine-soft);color:var(--pine);font-weight:650;margin-left:8px;vertical-align:1px;
  letter-spacing:.02em;
}
/* 门店名录：两列表，按区域分组，避免 29 行重复写同一个电话 */
.store-list td{padding:13px 18px}
.store-table .st-grp td{
  background:var(--paper-2);border-bottom:1px solid var(--line);
  font-size:11.5px;font-weight:750;letter-spacing:.12em;color:var(--ink-3);
  padding:9px 18px;
}
.store-table tbody tr.st-grp:hover{background:transparent}

/* ---------- 证据块 ---------- */
.evi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
/* 两列版：4 张卡 2×2，移动端同样降为单列 */
.evi-grid.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.evi{
  background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  padding:30px 26px 26px;position:relative;
  transition:transform .2s,box-shadow .2s;
}
.evi:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
/* 实拍证据图：卡内单图 + 多图横排 */
.evi-shot{margin:14px 0 0}
.evi-shot img{width:100%;height:230px;object-fit:cover;object-position:center 20%;border-radius:8px}
.shot-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:22px}
.shot-row img{width:100%;height:240px;object-fit:cover;border-radius:8px}
.evi-shot figcaption,.shot-row figcaption{font-size:11.5px;color:var(--ink-4);text-align:center;letter-spacing:.04em;line-height:1.6;margin-top:8px}
/* 小标签通用样式：不限定在 .evi 内，扫码带的「自助」也要用 */
.evi-no{
  display:inline-block;
  font-size:12.5px;font-weight:750;letter-spacing:.1em;
  color:var(--rust-ink);background:var(--rust-soft);
  padding:3px 10px;border-radius:999px;
  line-height:1.7;margin-bottom:13px;
  font-variant-numeric:tabular-nums;
  transition:background .2s,color .2s;
}
/* 深色区里的编号标签 */
.sec-dark .evi-no{background:rgba(255,255,255,.09);color:#8fc7e6}
.evi:hover .evi-no{background:var(--rust);color:#fff}
.evi h4{font-size:16.5px;margin-bottom:10px}
.evi p{font-size:13.5px;color:var(--ink-3);line-height:1.8;margin:0}
.evi p b{color:var(--ink-2);font-weight:650}

/* ---------- 小程序扫码带 ---------- */
/* 第 4 种联络方式，横跨整行：左边说明、右边太阳码。源图已补 24px 静区，扫码才认得出来 */
.qr-band{
  display:grid;grid-template-columns:minmax(0,1fr) 196px;
  background:var(--white);border:1px solid var(--line-soft);border-top:2px solid var(--rust);border-radius:var(--r-lg);
  margin-top:20px;overflow:hidden;
}
.qr-band .qb-txt{padding:34px 40px 34px 32px}
.qr-band .evi-no{margin-bottom:12px}
.qr-band h4{font-size:19px;letter-spacing:-.015em;margin-bottom:12px}
.qr-band p{font-size:13.5px;color:var(--ink-3);line-height:1.85;margin:0 0 18px;max-width:620px}
.qr-band p b{color:var(--ink-2);font-weight:650}
/* 扫码之后的三步：回答「扫了能干嘛」，顺带把右侧的空白填上 */
.qb-flow{display:flex;flex-wrap:wrap;align-items:center;margin-top:2px}
.qb-flow span{
  display:flex;align-items:center;gap:9px;
  font-size:13px;color:var(--ink-2);letter-spacing:.01em;
  padding-right:22px;margin-right:22px;border-right:1px solid var(--line);
}
.qb-flow span:last-child{border-right:none;padding-right:0;margin-right:0}
.qb-flow em{
  font-style:normal;font-variant-numeric:tabular-nums;
  flex-shrink:0;width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:760;color:var(--rust-ink);background:var(--rust-soft);
}
.qr-side{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;
  background:var(--paper-2);border-left:1px solid var(--line-soft);padding:20px;
}
/* 306px 源图显示 152px：2 倍屏正好 1:1 物理像素，扫码不糊。flex-shrink 必须关，否则被压到 147 */
.qr-side img{
  display:block;flex-shrink:0;width:152px;height:152px;background:#fff;border-radius:10px;
  box-shadow:0 1px 2px rgba(15,23,32,.05),0 8px 22px rgba(15,23,32,.08);
}
.qr-side span{font-size:11.5px;color:var(--ink-4);letter-spacing:.06em;text-align:center}
/* 桌面端扫、手机端长按——两种提示分开写，不要一句糊弄两边 */
.qr-tip-m{display:none}

/* ---------- 培训中心 ---------- */
/* 960×540 原图按 480 宽显示，2 倍屏正好 1:1；再放宽就要插值放大，会糊 */
.tc-band{
  display:grid;grid-template-columns:minmax(0,1fr) 520px;
  background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  overflow:hidden;
}
.tc-txt{padding:32px 34px 32px 30px}
.tc-txt>p{font-size:13.5px;color:var(--ink-3);line-height:1.9;margin:0 0 15px}
.tc-txt>p b{color:var(--ink-2);font-weight:650}
.tc-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0 20px}
.tc-nums div{border-left:2px solid var(--rust);padding-left:11px}
.tc-nums b{
  display:block;font-family:var(--font-num);font-size:23px;font-weight:750;
  color:var(--ink);letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums;
}
.tc-nums span{display:block;font-size:11.5px;color:var(--ink-4);margin-top:5px;letter-spacing:.03em;line-height:1.5}
.tc-majors{display:flex;flex-wrap:wrap;gap:7px;list-style:none;padding:0;margin:0}
.tc-majors li{
  font-size:12px;color:var(--ink-2);background:var(--paper-2);
  border:1px solid var(--line-soft);border-radius:999px;padding:4px 11px;line-height:1.6;
}
.tc-img{
  display:flex;flex-direction:column;justify-content:center;gap:10px;
  background:var(--paper-2);border-left:1px solid var(--line-soft);padding:20px;
}
.tc-img img{
  display:block;width:100%;height:auto;border-radius:8px;
  box-shadow:0 1px 2px rgba(15,23,32,.05),0 10px 26px rgba(15,23,32,.09);
}
.tc-img span{font-size:11.5px;color:var(--ink-4);text-align:center;letter-spacing:.04em;line-height:1.6}

/* ---------- 视觉块（原图片占位） ---------- */
.ph{
  position:relative;overflow:hidden;
  background:
    linear-gradient(135deg,rgba(24,125,197,.04),rgba(24,125,197,.07) 46%,rgba(239,129,52,.05)),
    var(--paper-2);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  display:grid;place-items:center;
  color:var(--ink-3);font-size:13px;text-align:center;padding:26px;
  min-height:220px;line-height:1.7;
}
.ph::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(to right, rgba(12,47,63,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(12,47,63,.045) 1px, transparent 1px);
  background-size:32px 32px;
  mask-image:radial-gradient(circle at 50% 50%, #000, transparent 76%);
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000, transparent 76%);
}
.ph > *{position:relative}
.ph b{display:block;color:var(--ink-2);font-size:14px;margin-bottom:5px;font-weight:700}

/* ---------- 交付物 / 清单 ---------- */
.chk{list-style:none}
.chk li{position:relative;padding-left:30px;margin-bottom:13px;font-size:15px;color:var(--ink-2);line-height:1.75}
.chk li::before{
  content:"";position:absolute;left:0;top:4px;width:18px;height:18px;border-radius:5px;
  background:var(--pine);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:11px;background-repeat:no-repeat;background-position:center;
}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line);margin-top:8px}
.faq details{border-bottom:1px solid var(--line);background:transparent}
.faq summary{
  padding:22px 54px 22px 4px;font-size:16.5px;font-weight:680;color:var(--ink);
  cursor:pointer;list-style:none;position:relative;transition:color .16s;
  letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:30px;width:9px;height:9px;
  border-right:1.8px solid var(--ink-3);border-bottom:1.8px solid var(--ink-3);
  transform:rotate(45deg);transition:transform .22s,border-color .16s;
}
.faq details[open] summary::after{transform:rotate(-135deg);top:32px;border-color:var(--rust)}
.faq summary:hover{color:var(--rust)}
.faq .faq-a{padding:0 54px 24px 4px;font-size:15px;color:var(--ink-2);line-height:1.85}
.faq .faq-a p{margin-bottom:11px}
.faq .faq-a p:last-child{margin-bottom:0}
.faq .faq-a b{color:var(--ink);font-weight:680}

/* ---------- 呼号条 ---------- */
/* 呼号条：品牌橙大色块，橙底配深字（与 logo 同一种用法） */
.cta-band{
  background:var(--flare-band);color:var(--on-flare);padding:72px 0;position:relative;overflow:hidden;
}
.cta-band::before{
  content:"";position:absolute;right:-10%;top:-60%;width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.26),transparent 66%);
}
.cta-band::after{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--rust),transparent 62%);opacity:.5;
}
.cta-band .wrap{display:flex;justify-content:space-between;align-items:center;gap:48px;flex-wrap:wrap;position:relative}
.cta-band h2{color:var(--on-flare);font-size:clamp(24px,2.4vw,34px);margin-bottom:12px;letter-spacing:-.03em}
.cta-band p{color:rgba(42,21,8,.78);font-size:15px;margin:0;line-height:1.7}
.cta-band p b{color:var(--on-flare);font-weight:750}
.cta-band .acts{display:flex;gap:14px;flex-wrap:wrap}
.cta-band .btn-primary{background:#fff;color:var(--flare-deep);box-shadow:0 2px 4px rgba(120,60,10,.14), 0 12px 26px -12px rgba(120,60,10,.4)}
.cta-band .btn-primary:hover{background:#fff;color:#7a3a0a;box-shadow:0 4px 8px rgba(120,60,10,.18), 0 18px 34px -14px rgba(120,60,10,.46)}
.cta-band .btn-dark{background:rgba(42,21,8,.9);color:#fff}
.cta-band .btn-dark:hover{background:#2a1508}
.cta-band .btn-ghost{background:rgba(255,255,255,.14);border-color:rgba(42,21,8,.24);color:var(--on-flare)}
.cta-band .btn-ghost:hover{background:rgba(255,255,255,.24);border-color:rgba(42,21,8,.4);color:var(--on-flare)}
.cta-band .btn-light{background:#fff;color:var(--flare-deep)}
.cta-band .btn-light:hover{background:#fff5ec;color:#7a3a0a}
.cta-band .btn-outline-light{border-color:rgba(42,21,8,.36);color:var(--on-flare)}
.cta-band .btn-outline-light:hover{background:rgba(42,21,8,.08);border-color:rgba(42,21,8,.5)}

/* ---------- 面包屑 ---------- */
.crumb{background:var(--paper-2);border-bottom:1px solid var(--line-soft);font-size:12.5px;color:var(--ink-3)}
.crumb .wrap{padding-top:13px;padding-bottom:13px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.crumb a:hover{color:var(--rust)}
.crumb .sepc{color:var(--ink-4)}
.crumb .cur{color:var(--ink-2);font-weight:550}

/* ---------- 页头（内页） ---------- */
.page-head{
  padding:72px 0 56px;border-bottom:1px solid var(--line-soft);
  background:
    radial-gradient(680px 340px at 92% 0%, rgba(0,160,224,.08), transparent 68%),
    var(--paper-2);
}
.page-head h1{font-size:clamp(30px,3.4vw,46px);margin-bottom:18px;letter-spacing:-.038em}
.page-head .ph-sub{font-size:16.5px;color:var(--ink-2);max-width:720px;line-height:1.8}
.page-head .ph-meta{display:flex;gap:28px;flex-wrap:wrap;margin-top:28px;font-size:13px;color:var(--ink-3)}
.page-head .ph-meta span{display:flex;align-items:center;gap:7px}
.page-head .ph-meta b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- 正文排版 ---------- */
.prose{max-width:880px}
.prose h2{font-size:28px;margin:52px 0 18px}
.prose h3{font-size:20px;margin:38px 0 13px}
.prose p{margin-bottom:18px;color:var(--ink-2);line-height:1.9}
.prose ul,.prose ol{margin:0 0 20px 24px;color:var(--ink-2)}
.prose li{margin-bottom:10px;line-height:1.8}
.prose strong{color:var(--ink);font-weight:700}
.prose code{
  background:var(--paper-2);border:1px solid var(--line-soft);border-radius:5px;
  padding:2px 7px;font-family:var(--font-num);font-size:13px;color:var(--rust);
}

/* ---------- 提示条 ---------- */
.note{
  border-radius:var(--r);padding:18px 22px;font-size:14px;line-height:1.8;
  border-left:3px solid;margin:22px 0;
}
.note b{display:block;margin-bottom:5px;font-size:14px}
.note p:last-child,.note:last-child{margin-bottom:0}
.note-rust{background:var(--rust-soft);border-color:var(--rust);color:#0d4a6b}
.note-rust b{color:#003a5a}
.note-pine{background:var(--pine-soft);border-color:var(--pine);color:#12405e}
.note-pine b{color:var(--pine-deep)}
.note-amber{background:var(--amber-soft);border-color:var(--amber);color:#6b4a00}
.note-amber b{color:var(--amber)}
.note-red{background:var(--red-soft);border-color:var(--red);color:#8a1c14}
.note-red b{color:var(--red)}

/* ---------- 占位符（克制版：不再用刺眼的黄底虚线） ---------- */
body .tbd{
  display:inline-block;
  background:transparent;
  border-bottom:1.5px dashed rgba(168,80,14,.5);
  color:var(--flare);
  padding:0 3px;border-radius:0;
  font-size:.94em;font-weight:650;
  font-variant-numeric:tabular-nums;
  cursor:help;
}
.sec-dark .tbd,.footer .tbd,.qc-foot .tbd{
  color:#f0b285;border-bottom-color:rgba(240,178,133,.55);
}
/* 橙底上的占位符：用深字，不能再用浅色 */
.cta-band .tbd{
  color:#5c2a06;border-bottom-color:rgba(92,42,6,.5);
}

/* ---------- 页脚 ---------- */
.footer{background:var(--pine-deep);color:#93aabb;font-size:13.5px;padding:72px 0 0}
.footer .fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.3fr;gap:48px;padding-bottom:52px}
.footer .f-brand b{display:block;color:#fff;font-size:17px;font-weight:780;margin-bottom:12px;letter-spacing:-.01em}
.footer .f-brand p{font-size:13px;line-height:1.85;color:#8299ab;margin-bottom:18px;max-width:320px}
.footer h5{color:#c8dcea;font-size:11.5px;letter-spacing:.14em;font-weight:720;margin-bottom:16px}
.footer ul{list-style:none}
.footer li{margin-bottom:10px}
.footer a{transition:color .14s}
.footer a:hover{color:#fff}
.footer .f-contact div{font-size:13px;margin-bottom:10px;display:flex;gap:9px}
.footer .f-contact em{font-style:normal;color:#7d98ac;flex-shrink:0}
.footer .f-tel{
  font-size:24px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;
  letter-spacing:.01em;display:block;margin-bottom:5px;
}
.footer-bot{
  border-top:1px solid rgba(255,255,255,.08);padding:22px 0;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
    font-size:12px;color:#7d98ac;
}
.footer-bot .fb-l{display:flex;gap:18px;flex-wrap:wrap}

/* ---------- 移动端悬浮条 ---------- */
.susp{display:none}

/* ---------- 响应式 ---------- */
/* 超宽屏：再放一档，避免 1920 屏上两侧空白过宽 */
@media (min-width:1680px){
  :root{--wrap:1560px}
  .hero .wrap{grid-template-columns:1fr 560px;gap:96px}
  .quote-card{width:560px}
  .sec-head{max-width:960px}
}

@media (max-width:1180px){
  .hero .wrap{grid-template-columns:1fr 440px;gap:48px}
  .quote-card{width:440px}
}

@media (max-width:1080px){
  .wrap{padding:0 30px}
  .nav .wrap{gap:24px}
  .nav-menu a{padding:8px 10px;font-size:14px}
  .footer .fgrid{grid-template-columns:1.5fr 1fr 1fr;gap:36px}
}

/* 781–1024：六个一级项 + 电话 + 量房按钮横排要占到 1017px，平板竖屏放不下。
   菜单收进汉堡，电话与量房按钮留着——平板上这两件事仍然是主路径 */
@media (max-width:1024px){
  .nav .wrap{gap:0}
  .nav-menu{display:none}
  .nav-cta{margin-left:auto;gap:10px}
  .nav-tel{margin-right:2px}
  .burger{display:grid}
  .nav.open .nav-menu{
    display:flex;flex-direction:column;position:absolute;top:78px;left:0;right:0;
    background:var(--nav-band);border-bottom:1px solid rgba(42,21,8,.24);padding:14px;gap:2px;
    box-shadow:0 16px 32px -16px rgba(0,0,0,.28);
  }
  .nav.open .nav-menu a{padding:13px 15px;font-size:15.5px}
}

@media (max-width:960px){
  .hero-slide{grid-template-columns:minmax(0,1fr);gap:44px}
  .hero-nav{gap:12px;margin-bottom:30px}
  .quote-card{position:static;width:auto}
  h1,.hero-h1{font-size:38px}
  .hero{padding:34px 0 64px}
  .hero-facts{gap:0}
  .fact{padding:0 18px}
  .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stat{padding:32px 24px}
  .stat b{font-size:38px}
  .evi-grid,.evi-grid.g-2{grid-template-columns:minmax(0,1fr)}
  /* 扫码带在窄屏竖排：码落到下方，靠文字与码之间的分隔线区隔 */
  .qr-band{grid-template-columns:minmax(0,1fr)}
  .qr-band .qb-txt{padding:26px 22px 22px}
  /* 19px 下「下单」会被折成孤字，降一档刚好一行 */
  .qr-band h4{font-size:16.5px;line-height:1.4}
  /* 三步在窄屏平铺三列，不让「师傅接单上门」落单换行 */
  .qb-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}
  .qb-flow span{
    display:block;border-right:none;padding-right:0;margin-right:0;
    font-size:12.5px;line-height:1.5;
  }
  .qb-flow em{display:flex;margin-bottom:6px}
  .qr-side{border-left:none;border-top:1px solid var(--line-soft);padding:22px}
  .qr-tip{display:none}
  .qr-tip-m{display:block}
  /* 培训中心同档竖排：图落到下方 */
  .tc-band{grid-template-columns:minmax(0,1fr)}
  .tc-txt{padding:24px 22px 20px}
  .tc-nums{gap:10px;margin:16px 0 18px}
  .tc-nums b{font-size:20px}
  .tc-img{border-left:none;border-top:1px solid var(--line-soft);padding:18px}
  /* 竖排后容器变宽，但源图只有 960 宽——限死 480，不让浏览器放大插值 */
  .tc-img img{max-width:480px;margin:0 auto}
  .footer .fgrid{grid-template-columns:1fr 1fr;gap:32px}
  .sec{padding:72px 0}
  .flow{grid-template-columns:repeat(3,1fr);gap:30px 0}
  .chart-row{grid-template-columns:170px 1fr 110px;gap:16px}
}

@media (max-width:780px){
  .wrap,.wrap-narrow{padding:0 20px}
  /* 顶栏原本写死 38px 高，窄屏折行会裁掉文字：改为自适应 + 服务区域单行省略，备案号由页脚承担 */
  .topbar .wrap{height:auto;min-height:34px;padding-top:6px;padding-bottom:6px;gap:10px}
  .topbar .tb-l{flex:1 1 auto;min-width:0;gap:14px}
  .topbar .tb-l>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar .tb-l span.hide-mob{display:none}
  .topbar .tb-r{flex:0 0 auto;gap:0}
  .topbar .tb-r span{display:none}
  body{font-size:15.5px}
  .nav .wrap{height:64px;gap:0}
  .nav-menu,.nav-tel{display:none}
  .nav-cta{margin-left:auto;margin-right:10px}
  /* 360–390px 屏放不下「上门量房」按钮，留汉堡开菜单即可，电话入口在首屏与页底 */
  .nav-cta>.btn{display:none}
  .burger{display:grid}
  .nav.open .nav-menu{
    display:flex;flex-direction:column;position:absolute;top:64px;left:0;right:0;
    background:var(--nav-band);border-bottom:1px solid rgba(42,21,8,.24);padding:14px;gap:2px;
    box-shadow:0 16px 32px -16px rgba(0,0,0,.28);
  }
  .nav.open .nav-menu a{padding:13px 15px;font-size:15.5px}

  .hero{padding:26px 0 52px}
  h1,.hero-h1{font-size:31px;letter-spacing:-.03em}
  .hero-nav{gap:9px;margin:0 0 22px -11px}
  .hero-nav-i{padding-bottom:10px}
  .hero-nav-i .hn-label{font-size:13px;gap:5px}
  .hero-nav-i .hn-k{font-size:9.5px}
  .hero-sub{font-size:15.5px}
  .hero-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:28px;padding-top:20px}
  /* 手机屏宽不够：主数字独占一行，三个辅数字平铺在下面，不能任它乱换行 */
  .fact{padding:0 12px}
  .fact:first-child{
    grid-column:1/-1;border-left:none;padding:0 0 14px;margin-bottom:14px;
    border-bottom:1px solid var(--line-soft);
  }
  .fact:first-child b{font-size:38px}
  .fact:nth-child(2){border-left:none;padding-left:0}
  .fact b{font-size:24px}
  .fact span{font-size:11.5px}

  .qc-row{padding:13px 20px}
  .qc-row .v{font-size:18px}

  .sec{padding:56px 0}
  .sec-head{margin-bottom:34px}
  h2{font-size:24px;letter-spacing:-.028em}
  .sec-desc{font-size:15px}
  .biz-grid{grid-template-columns:minmax(0,1fr);gap:14px}
  .biz{padding:28px 22px}
  .biz h3{font-size:21px}

  .page-head{padding:40px 0 34px}
  .page-head h1{font-size:27px}

  .price-table,.store-table{font-size:13px;border-radius:var(--r)}
  .price-table th,.price-table td,.store-table th,.store-table td{padding:11px 12px}
  .price-table .num{font-size:14px}
  /* 窄屏：给表格保底宽度，靠横向滑动看完整内容，而不是把列压成 40px */
  .tbl-scroll>table{min-width:620px}
  .tbl-scroll>table:has(thead th:nth-child(4):last-child),
  .tbl-scroll>table:has(thead th:nth-child(5):last-child){min-width:780px}
  .tbl-scroll>table.store-list{min-width:0}
  .tbl-scroll>table.info-table{min-width:560px}

  .chart{padding:26px 20px 22px}
  .chart-row{grid-template-columns:1fr;gap:8px}
  .chart-row .cl{display:flex;align-items:baseline;gap:8px}
  .chart-val{text-align:left;font-size:16px;display:flex;align-items:baseline;gap:5px}
  .chart-val small{display:inline;margin-top:0}
  .chart-track{height:32px}
  .chart-scale{margin-bottom:4px}

  .flow{grid-template-columns:repeat(2,1fr);gap:24px 0}
  .flow-step::before{display:none}
  .flow-dot{margin-bottom:12px}

  .cta-band{padding:48px 0}
  .cta-band .wrap{flex-direction:column;align-items:flex-start;gap:28px}
  .cta-band h2{font-size:23px}

  .footer{padding:52px 0 0}
  .footer .fgrid{grid-template-columns:1fr;gap:32px;padding-bottom:36px}
  .footer-bot{justify-content:flex-start}

  /* 移动端悬浮行动条 */
  .susp{
    display:grid;grid-template-columns:1fr 1fr;gap:1px;
    position:fixed;left:0;right:0;bottom:0;z-index:200;
    background:var(--line-soft);
    box-shadow:0 -8px 24px -12px rgba(16,23,19,.24);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .susp a{
    display:flex;align-items:center;justify-content:center;gap:8px;
    height:56px;font-size:15px;font-weight:700;letter-spacing:.01em;
  }
  .susp .s-tel{background:var(--white);color:var(--ink)}
  .susp .s-tel b{font-variant-numeric:tabular-nums;font-weight:800}
  .susp .s-book{background:var(--flare-band);color:var(--on-flare);font-weight:780}
  body{padding-bottom:57px}
}

/* 用户系统设置「减少动态效果」时：不做位移、不做错峰入场，进度线直接满格 */
@media (prefers-reduced-motion:reduce){
  .hero-slide,
  .hero-slide > div > *,
  .hero-slide > .quote-card{transition:none;transform:none;opacity:1}
  .hero-nav-i{transition:none}
}

@media print{
  .topbar,.nav,.susp,.cta-band,.footer{display:none}
  body{background:#fff}
}