@charset "utf-8"; 
/* ==========================================================================
   销房宝官网 2026 · 全站共用模块样式
   适用范围：所有页面。顶栏 / 巨幕菜单 / 服务保障 / 客户案例 / 预约 CTA /
   页脚 / 悬浮工具条，外加它们依赖的通用件（容器、区块、区块头、按钮、文字链）。
   加载顺序：base_2026.css → layout_2026.css → index_2026.css（首页）或 <page>.css（子页），
   后者只放本页专属区块，靠加载顺序覆盖本文件。
   桌面优先：窄屏适配集中在文件末尾「响应式」一节，不要在上半部分插 @media 断点。
   ========================================================================== */

/* ===== 子页共享框架与通用内容件 ===== */
/* 除渠道管家页外的子页共用；专属样式在各 <page>.css */

/* ===== 子页外壳 ===== */
/* --sp-* 是全局令牌别名，不造新色值 */
.sp-page{
  --sp-blue: var(--brand);
  --sp-ink: var(--ink);
  --sp-muted: var(--ink-4);
  --sp-line: var(--line);
  --sp-wash: var(--wash);
  color: var(--ink);
}

/* ===== 常规排版区块 ===== */
.sp-page .pgs{ padding: 104px 0; }

.sp-page .pgs--wash{ background: var(--wash); }

.sp-page .pgs__head{ max-width: 760px; margin-bottom: 54px; }

.sp-page .pgs__head h2{
  margin: 16px 0 0; font-size: 38px; line-height: 1.2;
  letter-spacing: -.035em; color: var(--ink);
}

.sp-page .pgs__head p{ margin: 18px 0 0; color: var(--ink-4); line-height: 1.9; }

/* ===== 子页眉题 ===== */
.sp-page .eyebrow{ font-size: 11px; letter-spacing: .18em; display: inline-flex; align-items: center; gap: 10px; }

.sp-page .eyebrow::before{ content: ""; width: 18px; height: 1px; background: currentColor; flex: none; display: inline-block; }

/* ===== 首屏 ===== */
/* 浅蓝坡度 + 网格纹 + 右上同心圆；专色渐变不抽令牌，装饰色用品牌蓝透明色。
   padding-top 70 + crumb 18 = 88px，面包屑恰在 80px 吸顶顶栏下沿。 */
.sp-hero{
  position: relative; overflow: hidden; min-height: 650px; padding-top: 70px;
  background: linear-gradient(130deg, #FAFCFF 0%, #F2F7FF 52%, #EDF4FF 100%);
}

.sp-hero::before{
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(43,92,230,.06) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(43,92,230,.06) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(90deg, transparent 3%, #000 48%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 3%, #000 48%, #000 100%);
}

.sp-hero::after{
  content: ""; position: absolute; right: -12%; top: -55%; width: 64vw; height: 64vw;
  border: 1px solid rgba(43,92,230,.09); border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(43,92,230,.025), 0 0 0 150px rgba(43,92,230,.018);
}

.sp-hero .wrap{ position: relative; z-index: 1; }

.sp-hero .crumb{
  display: flex; align-items: center; flex-wrap: wrap; gap: 0;
  padding-top: 30px; color: var(--ink-5); font-size: 12px;
}

.sp-hero .crumb > *{ margin-right: 9px; }

.sp-hero .crumb i{ font-style: normal; opacity: .5; }

.sp-hero .crumb a:hover{ color: var(--brand); }

.sp-hero__grid{
  display: grid; grid-template-columns: minmax(420px,.9fr) minmax(520px,1.1fr);
  align-items: center; gap: 44px; min-height: 535px;
}

.sp-hero__copy{ padding: 42px 0 64px; }

.sp-hero__copy h1{
  margin: 20px 0 24px; max-width: 680px;
  font-size: 56px; line-height: 1.14; letter-spacing: -.05em; color: var(--ink);
}

.sp-hero__copy > p{ max-width: 590px; color: var(--ink-4); font-size: 17px; line-height: 1.9; }

.sp-hero__actions{ display: flex; gap: 12px; margin-top: 32px; }

.sp-hero__visual{
  position: relative; min-height: 430px; margin: 0;
  display: grid; place-items: center; isolation: isolate;
}

.sp-hero__visual::after{
  content: ""; position: absolute; inset: 3% -10%; z-index: -1;
  background: radial-gradient(circle, rgba(43,92,230,.13), transparent 66%);
  filter: blur(16px);
}

/* ===== 首屏配图 ===== */
/* 近白底线稿 JPG：multiply 融底 + 径向遮罩收边；透明底 PNG 勿用（multiply 会失效）。 */
.sp-hero__visual img{
  width: 116%; max-width: none; mix-blend-mode: multiply; opacity: .9;
  filter: saturate(.88) contrast(.96);
  -webkit-mask-image: radial-gradient(ellipse 66% 62% at 58% 50%, #000 52%, transparent 88%);
  mask-image: radial-gradient(ellipse 66% 62% at 58% 50%, #000 52%, transparent 88%);
}

.sp-hero__facts{
  position: absolute; right: 1%; bottom: 7%; z-index: 1;
  display: grid; grid-template-columns: repeat(3, minmax(120px,1fr));
  width: min(94%, 580px); margin: 0; padding: 0;
  border-top: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(255,255,255,.2), rgba(255,255,255,.82));
}

.sp-hero__facts li{ padding: 19px 18px; border-right: 1px solid var(--line-soft); }

.sp-hero__facts li:last-child{ border-right: 0; }

.sp-hero__facts b{ display: block; font-size: 14px; color: var(--ink); }

.sp-hero__facts p{ margin: 6px 0 0; font-size: 11px; color: var(--ink-4); }

.sp-hero--plain .sp-hero__visual{ min-height: 370px; }

.sp-hero--plain .sp-hero__visual::before{
  content: ""; width: 270px; height: 270px; border-radius: 50%;
  border: 1px solid rgba(43,92,230,.18);
  box-shadow: 0 0 0 34px rgba(43,92,230,.035), 0 0 0 72px rgba(43,92,230,.025);
}

/* ===== 富文本段落 ===== */
.sp-page .rt{ max-width: 62em; color: var(--ink-3); font-size: 16.5px; line-height: 1.95; }

.sp-page .rt p + p{ margin-top: 20px; }

.sp-page .rt strong{ color: var(--ink); font-weight: 600; }

/* ===== 卡片矩阵 ===== */
.sp-page .pgrid{ display: grid; gap: 20px; }

.sp-page .pgrid--2{ grid-template-columns: repeat(2, 1fr); }

.sp-page .pcard{
  border: 1px solid var(--line); background: var(--paper);
  padding: 30px 30px 34px;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}

.sp-page .pcard:hover{
  border-color: var(--brand-soft);
  box-shadow: 0 16px 46px -18px rgba(43,92,230,.18);
  transform: translateY(-2px);
}

.sp-page .pcard b{
  display: block; margin: 0 0 10px; font-size: 18px; line-height: 1.4;
  letter-spacing: -.02em; color: var(--ink);
}

.sp-page .pcard p{ margin: 0; font-size: 13.5px; line-height: 1.85; color: var(--ink-4); }

/* ===== 开放清单 ===== */
.sp-page .plist{ margin: 0; padding: 0; list-style: none; }

.sp-page .plist li{ border-top: 1px solid var(--line); }

.sp-page .plist__b{ padding: 26px 48px 30px; }

.sp-page .plist__b b{
  display: block; margin-bottom: 9px; font-size: 18px;
  letter-spacing: -.02em; color: var(--ink);
}

.sp-page .plist__b p{ margin: 0; font-size: 14px; line-height: 1.9; color: var(--ink-4); }

/* ===== 成对要点 ===== */
.sp-page .sp-pairs{
  display: grid; grid-template-columns: 1.15fr .85fr; column-gap: 88px; row-gap: 0;
}

.sp-page .sp-pairs article{ padding: 28px 0 38px; border-top: 1px solid var(--line); }

.sp-page .sp-pairs article:nth-child(4n+2),
.sp-page .sp-pairs article:nth-child(4n+3){ transform: translateY(42px); }

.sp-page .sp-pairs--even article{ transform: none; }

.sp-page .sp-pairs h3{ margin: 0 0 9px; font-size: 20px; color: var(--ink); }

.sp-page .sp-pairs p{ margin: 0; color: var(--ink-4); font-size: 13px; line-height: 1.8; }

/* ===== 网格底纹区 ===== */
/* --reverse 图在左；配图是透明底线稿 PNG，直接铺 wash 底，不套首屏图的 multiply / radial-mask。 */
.sp-page .sp-fusion{
  position: relative; overflow: hidden; padding: 84px 0;
  background: var(--paper); isolation: isolate;
  scroll-margin-top: var(--header-h);
}

.sp-page .sp-fusion::before{
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: linear-gradient(rgba(43,92,230,.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(43,92,230,.045) 1px, transparent 1px);
  background-size: 56px 56px; opacity: .72;
  -webkit-mask-image: linear-gradient(90deg, transparent 16%, #000 70%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 16%, #000 70%, transparent 100%);
}

.sp-page .sp-fusion__grid{
  display: grid; grid-template-columns: minmax(380px,.9fr) minmax(520px,1.1fr);
  grid-template-areas: "copy visual" "detail visual";
  grid-template-rows: auto auto;
  align-items: start; align-content: center;
  column-gap: 54px; min-height: 520px;
}

.sp-page .sp-fusion--reverse .sp-fusion__grid{
  grid-template-columns: minmax(520px,1.1fr) minmax(380px,.9fr);
  grid-template-areas: "visual copy" "visual detail";
}

.sp-page .sp-fusion__copy{
  grid-area: copy; position: relative; z-index: 2;
  max-width: 590px; align-self: end;
}

.sp-page .sp-fusion__detail{ grid-area: detail; position: relative; z-index: 2; max-width: 590px; }

.sp-page .sp-fusion__label{
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 20px; color: var(--brand);
}

.sp-page .sp-fusion__label small{
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .16em;
}

.sp-page .sp-fusion__label i{ display: block; width: 18px; height: 1px; background: rgba(43,92,230,.35); }

.sp-page .sp-fusion h2{
  margin: 0; font-size: 44px; line-height: 1.18; letter-spacing: -.045em; color: var(--ink);
}

.sp-page .sp-fusion__detail .rt{ margin-top: 24px; color: var(--ink-3); font-size: 15.5px; line-height: 1.9; }

.sp-page .sp-fusion__detail .rt p{ margin: 0; }

.sp-page .sp-fusion__detail .rt p + p{
  margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line-soft);
}

.sp-page .sp-fusion__detail .rt strong{ color: var(--ink); font-size: 16px; font-weight: 600; }

.sp-page .sp-fusion__points{
  list-style: none; margin: 28px 0 0; padding: 0;
  border-top: 1px solid rgba(43,92,230,.25);
}

.sp-page .sp-fusion__points li{ padding: 16px 0; border-bottom: 1px solid var(--line-soft); }

.sp-page .sp-fusion__points b{ display: block; font-size: 14.5px; line-height: 1.5; letter-spacing: -.01em; color: var(--ink); }

.sp-page .sp-fusion__points p{ margin: 6px 0 0; color: var(--ink-4); font-size: 12px; line-height: 1.65; }

.sp-page .sp-fusion__visual{
  grid-area: visual; position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center; align-self: center;
  min-height: 440px; margin: -20px -64px -20px -24px; pointer-events: none;
}

.sp-page .sp-fusion__visual::before{
  content: ""; position: absolute; inset: 10% 6%; z-index: -1; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(43,92,230,.105), rgba(43,92,230,.028) 50%, transparent 72%);
  filter: blur(18px);
}

.sp-page .sp-fusion__visual img{
  display: block; width: 112%; max-width: none; height: auto;
  max-height: 550px; object-fit: contain;
  filter: saturate(.9) contrast(1.02);
}

.sp-page .sp-fusion--reverse .sp-fusion__visual{ margin-left: -62px; margin-right: -26px; }

.sp-page .pgs--tight{ padding: 64px 0; }

/* .sp-page .pgs__head--c{ margin-left: auto; margin-right: auto; text-align: center; } */

/* ===== 圆环小注记 ===== */
.sp-hero__visual figcaption{
  position: absolute; left: 13%; bottom: 12%;
  display: flex; flex-direction: column; gap: 4px;
}

.sp-hero__visual figcaption small{
  color: var(--brand); font-family: var(--mono);
  font-size: 10px; font-weight: 600; letter-spacing: .18em;
}

.sp-hero__visual figcaption b{ font-size: 30px; color: var(--ink); }

.sp-hero__visual figcaption span{ font-size: 12px; color: var(--ink-4); }

.sp-page .pgrid--3{ grid-template-columns: repeat(3, 1fr); }

.sp-page .pgrid--4{ grid-template-columns: repeat(4, 1fr); }

.sp-page .pgrid--4 .pcard{ padding: 26px 24px 30px; }

.sp-page .pgrid--4 .pcard b{ font-size: 17px; }

/* ===== 引言 ===== */
.sp-page .pquote{ background: var(--wash); color: var(--ink); padding: 52px 56px 54px; }

.sp-page .pquote q{
  font-size: 29px; line-height: 1.55; font-weight: 700;
  letter-spacing: -.03em; color: var(--ink);
}

.sp-page .pquote q b{ color: var(--brand); }

.sp-page .pquote p{ margin: 20px 0 0; font-size: 14.5px; line-height: 1.95; color: var(--ink-4); max-width: 56em; }

/* ===== 声明 / 注释条 ===== */
.sp-page .pnote{
  margin-top: 26px; padding: 22px 0 0; border-top: 1px solid var(--line);
  font-size: 13px; line-height: 1.95; color: var(--ink-4);
}

.sp-page .pnote b{ color: var(--ink); }

.sp-page .pgs--tight .pnote{ margin-top: 0; }

.sp-page .pnote + .pgrid{ margin-top: 26px; }

.sp-page .sp-radial{
  position: relative; display: grid;
  grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto auto;
  column-gap: 100px; row-gap: 42px; min-height: 600px;
}

.sp-page .sp-radial::before,
.sp-page .sp-radial::after{
  content: ""; position: absolute; left: 50%; top: 50%;
  border-radius: 50%; transform: translate(-50%, -50%);
  border: 1px solid rgba(43,92,230,.15);
}

.sp-page .sp-radial::before{ width: 340px; height: 340px; }

.sp-page .sp-radial::after{ width: 430px; height: 430px; border-style: dashed; }

.sp-page .sp-radial__core{
  grid-area: 2/2; align-self: center; justify-self: center; z-index: 2;
  width: 220px; height: 220px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: radial-gradient(circle at 45% 35%, #fff, var(--tint-2));
  box-shadow: 0 22px 70px rgba(43,92,230,.12);
}

.sp-page .sp-radial__core small{
  color: var(--brand); font-family: var(--mono);
  font-size: 10px; font-weight: 600; letter-spacing: .16em;
}

.sp-page .sp-radial__core b{ font-size: 26px; margin: 11px 0; color: var(--ink); }

.sp-page .sp-radial__core p{ margin: 0; max-width: 150px; color: var(--ink-4); font-size: 12px; line-height: 1.65; }

.sp-page .sp-radial__item{
  position: relative; z-index: 2; min-height: 130px;
  padding: 22px 4px 18px; border-top: 1px solid var(--line);
}

.sp-page .sp-radial__item > i{
  display: block; width: 6px; height: 6px;
  border: 1px solid rgba(43,92,230,.55); border-radius: 50%; background: var(--paper);
}

.sp-page .sp-radial__item h3{ margin: 12px 0 8px; font-size: 17px; color: var(--ink); }

.sp-page .sp-radial__item p{ margin: 0; color: var(--ink-4); font-size: 13px; line-height: 1.75; }

.sp-page .sp-radial__item--1{ grid-area: 1/1; }

.sp-page .sp-radial__item--2{ grid-area: 1/3; }

.sp-page .sp-radial__item--3{ grid-area: 2/1; }

.sp-page .sp-radial__item--4{ grid-area: 2/3; }

.sp-page .sp-radial__item--5{ grid-area: 3/1; }

.sp-page .sp-radial__item--6{ grid-area: 3/3; }

.sp-page .sp-layers{ list-style: none; margin: 0; padding: 0 0 0 6%; }

.sp-page .sp-layers li{
  position: relative; width: 94%; margin-top: -1px;
  padding: 27px 34px; border: 1px solid var(--line);
  background: var(--paper); box-shadow: 0 12px 40px rgba(14,20,32,.05);
}

.sp-page .sp-layers li:nth-child(even){ margin-left: 4%; }

.sp-page .sp-layers li:nth-child(3n){ margin-left: 1.5%; }

.sp-page .sp-layers b{ font-size: 18px; color: var(--ink); }

.sp-page .sp-layers p{ margin: 8px 0 0; color: var(--ink-4); font-size: 13px; line-height: 1.75; }

body{ background: var(--paper); }

/* ===== 容器 / 区块 ===== */
.wrap{ width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.sect{ padding: 108px 0; position: relative; scroll-margin-top: var(--header-h); }
.sect--sm{ padding: 76px 0; }
.sect--wash{ background: var(--wash); }
.sect--tint{ background: linear-gradient(180deg,var(--tint) 0%,#fff 100%); }

/* ===== 区块标题 ===== */
.shead{ margin-bottom: 56px; }
.shead--c{ text-align: center; }
.shead--c .eyebrow{ justify-content: center; }
.shead h2{ 
  font-size: 42px; line-height: 1.3; font-weight: 700; letter-spacing: -.025em; color: var(--ink); 
  margin-top: 18px; 
}
.shead--c h2{ margin-left: auto; margin-right: auto; max-width: 20em; }
.shead h2 em{ font-style: normal; color: var(--brand); }
.shead p{ margin-top: 18px; font-size: 16.5px; line-height: 1.9; color: var(--ink-4); max-width: 50em; }
.shead--c p{ margin-left: auto; margin-right: auto; text-align: center; }
.shead--row{ display: flex; align-items: flex-end; justify-content: space-between; gap: 70px; }
.shead--row>div:first-child{ flex: 0 0 auto; }
.shead--row h2{ max-width: none; white-space: nowrap; }
.shead--row p{ margin-top: 0; flex: 1; max-width: 40em; padding-bottom: 6px; }
/* 小一号区块头。写成 .shead.shead--sm 是为了提一档特异性，压住文件末尾响应式一节的
   .shead h2 字号阶梯 —— 这个标题原本是内联样式，不随断点缩小，搬过来时保持原行为。 */
.shead--sm{ margin-bottom: 32px; }
.shead.shead--sm h2{ font-size: 30px; margin-top: 14px; }

/* ===== 按钮 ===== */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; 
  height: 50px; padding: 0 26px; border-radius: var(--r); 
  font-size: 15px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; 
  transition: background .26s var(--ease),color .26s var(--ease),border-color .26s var(--ease),box-shadow .26s var(--ease),transform .26s var(--ease); 
}
.btn .iconfont{ flex: none; transition: transform .3s var(--ease); }
.btn:hover .iconfont{ transform: translateX(4px); }
/* 提交中的置灰。以前是 main.js 直接写 btn.style.opacity，样式挪回 CSS 里 */
.btn:disabled{ opacity: .6; cursor: default; }
.btn--primary{ background: var(--brand); color: #fff; box-shadow: 0 8px 20px -10px rgba(43,92,230,.7); }
.btn--primary:hover{ background: var(--brand-deep); box-shadow: 0 12px 26px -10px rgba(27,63,184,.7); }
.btn--line{ border: 1px solid var(--line-strong); color: var(--ink); background: rgba(255,255,255,.7); }
.btn--line:hover{ border-color: var(--brand); color: var(--brand); }

.tlink{ 
  display: inline-flex; align-items: center; gap: 8px; 
  font-size: 15px; font-weight: 600; color: var(--brand); 
}
.tlink svg{ width: 14px; height: 14px; transition: transform .3s var(--ease); }
.tlink:hover svg{ transform: translateX(4px); }

/* ===== 顶栏 ===== */
.site-header{
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header); height: var(--header-h); 
  background: rgba(255,255,255,.86); backdrop-filter: saturate(180%) blur(16px); 
  border-bottom: 1px solid transparent; 
  transition: height .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease); 
}
.site-header.is-solid{ height: var(--header-h-solid); border-bottom-color: var(--line-soft); box-shadow: 0 4px 20px -14px rgba(14,20,32,.35); background: rgba(255,255,255,.94); }
.site-header__in{ display: flex; align-items: center; gap: 32px; height: 100%; }
.site-logo{ height: 42px; width: auto; }
.nav{ display: flex; align-items: center; height: 100%; flex: 1; }
.nav__item{ 
  position: relative; display: flex; align-items: center; gap: 5px; height: 100%; padding: 0 13px; 
  font-size: 15px; font-weight: 500; color: var(--ink-3); transition: color .22s var(--ease); cursor: pointer; 
}
.nav__item:hover,.nav__item.is-active{ color: var(--brand); }
.nav__item::after{ 
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 0; height: 2px; background: var(--brand); 
  transform: scaleX(0); transform-origin: center; transition: transform .32s var(--ease); 
}
.nav__item:hover::after{ transform: scaleX(1); }
.nav__item > .iconfont{ transition: transform .3s var(--ease); }
.nav__item[aria-expanded="true"] > .iconfont{ transform: rotate(180deg); }
.header-cta{ display: flex; align-items: center; gap: 22px; }
.header-tel{ font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.header-tel span{ display: block; font-size: 10px; letter-spacing: .14em; color: var(--ink-5); font-weight: 500; }
.header-cta .btn{ height: 40px; padding: 0 20px; font-size: 14px; }

/* ===== 汉堡按钮 ===== */
.header-btn{ display:  flex; align-items: center; gap: 4px; }
.nav-toggle{ display: none; width: 40px; height: 40px; align-items: center; justify-content: center; color: var(--ink-2); border-radius: 10px; transition: background .2s var(--ease);}
.nav-toggle .iconfont{ font-size:  24px; }

/* ===== 顶栏防挤压 ===== */
/* logo 与右侧 CTA 不参与收缩，导航项不折行。
   顶栏原本在这里带 1340 / 1180 两个断点，已并入文件末尾响应式一节。 */
.site-header .wrap{ max-width: 1400px; }
.site-header__in>a:first-child{ flex: none; }
.header-cta{ flex: none; }
.nav{ min-width: 0; }
.nav__item{ white-space: nowrap; }

/* 巨幕菜单。顶部位置跟着顶栏高度令牌走：顶栏一收缩（.is-solid）面板就跟着上移，
   不用再手工对齐两个数字。窄屏改成全屏面板，见文件末尾响应式一节。 */
.mega{ 
  position: fixed; left: 0; right: 0; top: var(--header-h); z-index: var(--z-mega); background: #fff; 
  border-bottom: 1px solid var(--line); box-shadow: 0 30px 60px -34px rgba(14,20,32,.4); 
  opacity: 0; visibility: hidden; transform: translateY(-10px); 
  transition: opacity .28s var(--ease),transform .28s var(--ease),visibility .28s; 
}
.site-header.is-solid ~ .mega{ top: var(--header-h-solid); }
.mega.is-open{ opacity: 1; visibility: visible; transform: none; }
.mega__in{ display: grid; grid-template-columns: 264px 1fr; gap: 56px; padding: 44px 0 48px; }
.mega__aside{ border-right: 1px solid var(--line-soft); padding-right: 44px; }
.mega__aside h3{ font-size: 21px; font-weight: 700; letter-spacing: -.015em; color: var(--ink); margin-bottom: 12px; }
.mega__aside p{ font-size: 14px; line-height: 1.85; color: var(--ink-4); }
.mega__aside .tlink{ margin-top: 20px; font-size: 14px; }
.mega__cols{ display: grid; grid-template-columns: repeat(4,1fr); gap: 34px 30px; }
.mega__group h4{ 
  display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink); 
  padding-bottom: 11px; margin-bottom: 8px; border-bottom: 1px solid var(--line-soft); letter-spacing: .03em; 
}
.mega__group a{ display: block; padding: 8px 0; font-size: 14px; font-weight: 500; color: var(--ink-3); transition: color .2s var(--ease),transform .25s var(--ease); }
.mega__group a span{ display: block; font-size: 12px; font-weight: 400; color: var(--ink-5); margin-top: 2px; line-height: 1.5; }
.mega__group a:hover{ color: var(--brand); transform: translateX(4px); }

/* ===== 窄屏抽屉导航 ===== */
/* 为什么是独立的 fixed 覆盖层，而不是顶栏 flex-wrap 折出来的第二行：
   折行方案里抽屉是顶栏的一部分，展开后顶栏得变成可滚容器（max-height:100vh），
   于是顶栏高度随开合变化，--header-h 下游那一串计算（巨幕菜单的 top、
   区块的 scroll-margin-top、锚点滚动的偏移）全都跟着抖。改成覆盖层后顶栏高度恒定。

   桌面档不用 display:none —— display 不可动画。靠 visibility + transform 移出视口，
   visibility:hidden 同时挡掉指针事件，桌面点不到它。
   ⚠️ visibility 的 transition 延时必须等于 transform 的时长（都是 .38s），否则关闭时
   元素在动画走完前就消失，看起来是「啪一下没了」而不是「滑出去」。两个数字成对改。

   overscroll-behavior 和 overflow-y 成对，别只留一个：抽屉铺满视口，手指全落在它上面，
   滑到底若继续滑会把背景页一起带走（实测能带出 1000px）。 */
.drawer{
  position: fixed; inset: 0; z-index: var(--z-drawer); background: var(--paper);
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%); visibility: hidden;
  transition: transform .38s var(--ease-out),visibility 0s linear .38s;
}
/* 抽屉顶部条高度直接取顶栏令牌，窄屏它已经是 60px，两处不用各写一遍 */
.drawer__bar{ display: flex; align-items: center; justify-content: space-between; height: var(--header-h); padding: 0 14px 0 20px; border-bottom: 1px solid var(--line-soft); flex: none; }
.drawer__bar .site-logo{ height: 32px; }
.drawer__close{ width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--ink-2); border-radius: 10px; transition: background .2s var(--ease); }
.drawer__close:active{ background: var(--wash-2); }
.drawer__close .iconfont{ font-size: 22px; }
.drawer__body{ padding: 12px 20px 30px; }
.drawer__item{
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 16px 0; font-size: 18px; font-weight: 600; color: var(--ink); text-align: left;
  border-bottom: 1px solid var(--line-soft);
}
/* 右侧的 01–07 编号与 → 箭头：编号是首页区块序号，箭头表示跳出本页 */
.drawer__item span{ font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--ink-6); }
.drawer__foot{ margin-top: auto; padding: 22px 20px 34px; background: var(--wash); }
.drawer__foot .btn{ width: 100%; margin-bottom: 12px; }
.drawer__tel{ display: block; text-align: center; font-family: var(--mono); font-size: 20px; font-weight: 600; color: var(--ink); letter-spacing: -.02em; }
.drawer__tel span{ display: block; font-size: 11px; font-weight: 400; letter-spacing: .14em; color: var(--ink-5); margin-top: 4px; }

/* ===== 服务保障 ===== */
.assure{ display: grid; grid-template-columns: repeat(5,1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--r); overflow: hidden; }
.assure div{ background: #fff; padding: 28px 24px 30px; }
.assure div div{ padding: 0;}
.assure .idx{ display: block; margin-bottom: 18px; }
.assure b{ display: block; font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.assure p{ font-size: 13px; line-height: 1.75; color: var(--ink-4); }

/* ===== 横滑卡指示点 ===== */
/* 基线隐藏，在各样式表末尾的响应式节里随对应 [data-carousel] 横滑卡一起开 display：
   首页 .lines ≤1024、.scenes ≤768（index_2026.css），案例 .flagship ≤1024（本文件）。
   点选跳转 / 键盘访问由 main.js 第 14 段统一驱动。 */
.mdots{
  display: none; gap: 6px; justify-content: center; margin-top: 18px;
}
.mdots i{
  width: 6px; height: 6px; border-radius: 99px; background: var(--line-strong);
  transition: width .3s var(--ease),background .3s var(--ease);
}
.mdots i.is-on{ width: 20px; background: var(--brand); }

/* ===== 案例与成效 ===== */
.stats{ display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.stat{ background: #fff; padding: 32px 28px 34px; }
.stat b{ display: block; font-family: var(--mono); font-size: 46px; line-height: 1; font-weight: 600; color: var(--ink); letter-spacing: -.05em; }
.stat b i{ font-style: normal; font-size: 22px; margin-left: 1px; letter-spacing: 0; }
.stat span{ display: block; font-size: 14px; color: var(--ink-3); margin-top: 14px; font-weight: 500; }
.stat em{ display: block; font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--ink-6); margin-top: 6px; letter-spacing: .03em; }

.flagship { 
  display: grid; 
  grid-template-columns: repeat(6, 1fr); 
  gap: 16px; 
  margin-top: 16px; 
}
.flagship .fcase:nth-child(4):nth-last-child(2),
.flagship .fcase:nth-child(5):nth-last-child(1) { 
  grid-column:  span 3; 
}
.fcase { 
  grid-column: span 2; 
  border: 1px solid var(--line); 
  border-radius: var(--r); 
  background: #fff; 
  padding: 28px 26px 30px; 
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease); 
}
.fcase__logo { 
  margin-bottom:  12px; 
}
.fcase__logo img { 
  height: 52px; 
  width: auto; 
  max-width: 100%; 
  display: block; 
  filter: brightness(0); 
  opacity: .55; 
}
.fcase:hover{ border-color: var(--brand-soft); box-shadow: var(--sh-2); transform: translateY(-3px); }
.fcase__name{ font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: -.015em; }
.fcase__tag{ display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--brand); margin: 6px 0 16px; }
.fcase p{ font-size: 13.5px; line-height: 1.85; color: var(--ink-4); min-height: 5em; }
.fcase__kpi{ margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.fcase__kpi em{ font-style: normal; color: var(--ink-6); }

/* ===== 品牌墙 · 深色幕墙 ===== */
/* 为什么是一整块深色：全站到这里已经连着八个浅色区块，品牌墙如果还是白底细线，
   就只是又一张表格。压一块深色下来，它才成为一个「章节图章」，落在 CTA 之前收住节奏；
   国央企客户的语境也需要这个分量。
   ⚠️ 这是全站唯一的深色块，改配色时别顺手把它拉回浅色 —— 方案成立的前提就是反差。 */
.wall{ margin-top: 56px; }
.wall__panel{ 
  position: relative; border-radius: var(--r); overflow: hidden; 
  background: linear-gradient(158deg,#0A101B 0%,#101A2C 46%,#0C1421 100%); 
  box-shadow: 0 40px 90px -46px rgba(11,17,28,.72); 
}
/* ===== 光晕 ===== */
/* 四团光各走各的长周期缓慢交错。**周期取 23/27/31/37 秒这四个互质的数**，
   最小公倍数约 7.3 年 —— 实际观感就是永远不会回到同一个画面，
   盯着看多久都不会察觉「在循环」。改周期时请继续用互质的数，别取 20/30/40。

   为什么用真实 DOM 元素而不是 ::before：
   一个伪元素只能整体动一次，四团要各走各的节奏就必须是四个独立元素。

   ⚠️ 只动 transform（translate3d + scale），交给合成器，不触发重排重绘，
   也不改变任何布局高度。**不要改成动 background-position 或 width/height** ——
   那会逐帧重绘整块面板，长页面滚动时很容易掉帧。

   ⚠️ 光团一律锚在面板上缘之外（top 为负），漂移幅度也压得很小。
   这是硬约束不是审美：光一旦淌到 logo 行，白色 logo 立刻被冲淡。
   实测第一行 logo 格底色亮度在整个周期内稳定在 25/255（静态版基线 23）。
   **调完参数请逐帧扫一遍周期复测这个值**，只看某一帧是测不出问题的。 */
.wall__glow{ position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.wall__glow b{ position: absolute; display: block; border-radius: 50%; will-change: transform; }
.wall__glow .gblue{ 
  width: 880px; height: 600px; right: -200px; top: -320px; 
  background: radial-gradient(closest-side,rgba(64,116,255,.60),transparent 74%); 
  animation: wg2 31s ease-in-out infinite alternate; 
}
.wall__glow .gpurple{ 
  width: 800px; height: 540px; right: 170px; top: -300px; 
  background: radial-gradient(closest-side,rgba(146,96,255,.62),transparent 72%); 
  animation: wg3 27s ease-in-out infinite alternate; 
}
.wall__glow .gcore{ 
  width: 520px; height: 400px; right: -150px; top: -250px; 
  background: radial-gradient(closest-side,rgba(176,202,255,.90),transparent 72%); 
  animation: wg1 23s ease-in-out infinite alternate; 
}
.wall__glow .gcool{ 
  width: 640px; height: 460px; left: -220px; bottom: -300px; 
  background: radial-gradient(closest-side,rgba(43,92,230,.30),transparent 74%); 
  animation: wg4 37s ease-in-out infinite alternate; 
}
@keyframes wg1{ from{ transform: translate3d(0,0,0) scale(1); }   to{ transform: translate3d(-84px,30px,0) scale(1.14); }}
@keyframes wg2{ from{ transform: translate3d(0,0,0) scale(1.04); }to{ transform: translate3d(72px,-18px,0) scale(.94); }}
@keyframes wg3{ from{ transform: translate3d(0,0,0) scale(.96); } to{ transform: translate3d(-150px,34px,0) scale(1.16); }}
@keyframes wg4{ from{ transform: translate3d(0,0,0) scale(1); }   to{ transform: translate3d(90px,-40px,0) scale(1.1); }}

/* 建筑感网格纹理。z-index 必须压在光晕之上、内容之下，三层顺序不能乱。 */
.wall__panel::after{ 
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; 
  background-image: linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); 
  background-size: 60px 60px; 
  -webkit-mask-image: radial-gradient(80% 100% at 50% 0,#000,transparent 76%); 
  mask-image: radial-gradient(80% 100% at 50% 0,#000,transparent 76%); 
}
.wall__in{ position: relative; z-index: 3; padding: 52px 56px 0; }

.wall__head{ 
  display: flex; align-items: flex-end; justify-content: space-between; gap: 50px; 
  padding-bottom: 38px; border-bottom: 1px solid rgba(255,255,255,.09); 
}
.wall__head>div{ flex: 0 0 auto; }
.wall__head .eyebrow{ color: var(--eyebrow-on-dark); }
.wall__head h3{ margin-top: 14px; font-size: 25px; font-weight: 600; color: #fff; letter-spacing: -.02em; line-height: 1.5; }
.wall__head p{ font-size: 13.5px; line-height: 1.9; color: rgba(255,255,255,.46); max-width: 26em; text-align: right; }

/* ===== 标杆客户网格 ===== */
/* logo 已按墨量归一并烘焙到统一画布（显示 200×80），
   所以这里只需给一个固定宽高，不用为任何一个 logo 单独调参。
   反白靠 brightness(0) invert(1)：先压成纯黑再反相 = 纯白，
   十个深浅不一的 logo 因此有完全一致的视觉重量，不需要另出一套白色版图片。
   ⚠️ 用 > div 而不是后代选择器 —— 后者会连带命中 logo 外的任何内层 div。 */
.wall__grid{ display: grid; grid-template-columns: repeat(5,1fr); }
.wall__grid>div{ height: 132px; display: flex; align-items: center; justify-content: center; position: relative; }
/* 柱列式竖线：只分列、上下留出空档，读起来像幕墙的柱距，而不是表格的格子。
   这是这版和旧版观感差别最大的一处，别改回四面都有的网格。 */
.wall__grid>div:not(:nth-child(5n))::after{ 
  content: ""; position: absolute; right: 0; top: 28px; bottom: 28px; width: 1px; background: var(--hair-on-dark); 
}
.wall__grid>div:nth-child(n+6)::before{ 
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--hair-on-dark-soft); 
}
.wall__grid img{ 
  width: 200px; height: 80px; object-fit: contain; 
  filter: brightness(0) invert(1); opacity: .68; 
  transition: opacity .4s var(--ease); 
}
.wall__grid>div:hover img{ opacity: 1; }

/* 更多客户：单行慢速流，撑满面板宽度（负 margin 抵掉 .wall__in 的左右内边距）。
   遮罩留到 17%/83%：旧版是 9%，淡出距离太短，滚动中的名字还没淡透就被面板边缘切掉，
   看着像布局出错。淡出区宽一点，才像「延伸出去」而不是「被裁断」。 */
.wall__strip{ 
  position: relative; margin: 0 -56px; border-top: 1px solid rgba(255,255,255,.09); 
  background: rgba(0,0,0,.16); overflow: hidden; 
  -webkit-mask-image: linear-gradient(90deg,transparent 0,#000 17%,#000 83%,transparent 100%); 
  mask-image: linear-gradient(90deg,transparent 0,#000 17%,#000 83%,transparent 100%); 
}
.wall__strip .marquee__track{ animation-duration: 96s; }
.wall__strip i{ 
  flex: none; display: flex; align-items: center; height: 62px; padding: 0 26px; font-style: normal; 
  font-size: 14.5px; color: rgba(255,255,255,.5); white-space: nowrap; transition: color .3s var(--ease); 
}
.wall__strip i:hover{ color: #fff; }
.wall__strip i::after{ 
  content: ""; width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.22); margin-left: 26px; 
}

.wall__foot{ margin-top: 20px; display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--ink-5); }

/* ===== 预约 CTA ===== */
.cta{ position: relative; overflow: hidden; background: linear-gradient(180deg,#F2F6FF 0%,#FAFCFF 100%); }
.cta::before{ 
  content: ""; position: absolute; inset: 0; pointer-events: none; 
  background-image: radial-gradient(rgba(43,92,230,.16) 1px,transparent 1px); 
  background-size: 22px 22px; 
  -webkit-mask-image: radial-gradient(60% 70% at 78% 50%,#000,transparent 72%); 
  mask-image: radial-gradient(60% 70% at 78% 50%,#000,transparent 72%); 
}
.cta__grid{ position: relative; display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; border: 1px solid var(--line); border-radius: var(--r); background: #fff; box-shadow: var(--sh-3); overflow: hidden; }
.cta__left{ padding: 48px 52px 52px; }
.cta__left h2{ font-size: 34px; font-weight: 700; color: var(--ink); letter-spacing: -.03em; line-height: 1.35; margin: 16px 0 14px; }
.cta__left>p{ font-size: 15px; line-height: 1.9; color: var(--ink-4); max-width: 32em; }
.form{ margin-top: 30px; }
.form__row{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field label{ display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--ink-5); margin-bottom: 7px; text-transform: uppercase; }
.field input{ width: 100%; height: 50px; padding: 0 15px; background: var(--wash); border: 1px solid var(--line); border-radius: var(--r); font-size: 15px; transition: border-color .24s var(--ease),background .24s var(--ease),box-shadow .24s var(--ease); }
.field input:focus{ outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px rgba(43,92,230,.12); }
.field input::placeholder{ color: var(--ink-6); }
.field .err{ display: block; min-height: 19px; font-size: 12px; color: var(--accent); margin-top: 5px; }
.form__foot{ display: flex; align-items: center; gap: 20px; }
.form__foot .btn{ height: 52px; padding: 0 32px; }
.form__note{ font-size: 12.5px; color: var(--ink-5); line-height: 1.65; }
.form__note a{ text-decoration: underline; color: var(--ink-3); text-underline-offset: 2px; }

.cta__right{ padding: 48px 44px; border-left: 1px solid var(--line-soft); background: var(--wash); }
.cta__right h3{ font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 20px; }
.cta__qr{ background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 12px; width: 158px; }
.cta__right>p{ font-size: 12.5px; color: var(--ink-5); margin-top: 10px; }
.cta__ch{ margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.cta__ch dt{ font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--ink-5); text-transform: uppercase; }
.cta__ch dd{ font-size: 16px; font-weight: 600; color: var(--ink); margin: 4px 0 18px; letter-spacing: -.01em; }
.cta__ch dd.tel{ font-family: var(--mono); font-size: 22px; color: var(--brand); letter-spacing: -.02em; }
.cta__ch dd:last-child{ margin-bottom: 0; }
.cra-hide{ display: none;}

/* ===== 页脚 ===== */
.site-footer{ background: var(--wash); border-top: 1px solid var(--line-soft); padding: 64px 0 0; }
.site-footer__top{ display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr auto; gap: 44px; padding-bottom: 48px; }
.site-footer__brand img{ height: 40px; width: auto; margin-bottom: 20px; }
.site-footer__brand p{ font-size: 13.5px; line-height: 1.85; color: var(--ink-4); max-width: 23em; }
.site-footer__brand .claim{ display: block; margin-top: 16px; font-size: 14.5px; color: var(--ink); font-weight: 700; letter-spacing: -.01em; }
.fcol h4{ font-size: 13.5px; color: var(--ink); font-weight: 700; margin-bottom: 14px; }
.fcol a{ display: block; font-size: 13.5px; color: var(--ink-4); padding: 5px 0; transition: color .22s var(--ease); }
.fcol a:hover{ color: var(--brand); }
.site-footer__qr{ display: flex; gap: 18px; }
.site-footer__qr figure{ margin: 0; text-align: center; }
.site-footer__qr img{ width: 96px; height: 96px; background: #fff; padding: 5px; border: 1px solid var(--line-soft); border-radius: var(--r); }
.site-footer__qr figcaption{ font-size: 11.5px; color: var(--ink-5); margin-top: 8px; }
.site-footer__bar{ border-top: 1px solid var(--line-soft); padding: 20px 0 24px; display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--ink-5); }
.site-footer__bar a{ color: var(--ink-5); }
.site-footer__bar a:hover{ color: var(--brand); }
.site-footer__bar .sep{ margin: 0 9px; opacity: .4; }

/* ===== 右侧浮动工具条 ===== */
.side{
  position: fixed; right: 28px; bottom: 32px; z-index: var(--z-float); 
  display: flex; flex-direction: column; 
  border: 1px solid var(--line); border-radius: var(--r); background: #fff; 
  box-shadow: var(--sh-3); overflow: hidden; 
}
.side__btn{ 
  width: 64px; height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; 
  color: var(--ink-3); border-bottom: 1px solid var(--line-soft); 
  transition: background .24s var(--ease),color .24s var(--ease); 
}
.side__btn:last-child{ border-bottom: 0; }
.side__btn .iconfont{ font-size:  20px; }
.side__btn span{ font-size: 10.5px; letter-spacing: .02em; line-height: 1; }
.side__btn:hover{ background: var(--tint); color: var(--brand); }
.side__btn--top{ 
  opacity: 0; visibility: hidden; max-height: 0; padding: 0; overflow: hidden; 
  transition: opacity .3s var(--ease),max-height .3s var(--ease),visibility .3s,background .24s,color .24s; 
}
.side__btn--top.is-on{ opacity: 1; visibility: visible; max-height: 64px; }

.toast{ 
  position: fixed; left: 50%; top: 96px; transform: translate(-50%,-14px); z-index: var(--z-toast); 
  background: var(--ink); color: #fff; padding: 12px 22px; font-size: 14px; border-radius: var(--r); 
  opacity: 0; visibility: hidden; transition: all .32s var(--ease); box-shadow: var(--sh-3); 
}
.toast.is-on{ opacity: 1; visibility: visible; transform: translate(-50%,0); }

/* ===== 响应式 ===== */
/* 共用模块的断点区，按从宽到窄排列，不要打乱顺序。
   档位是全站固定的一套：1400 / 1360 / 1340 / 1200 / 1180 / 1024 / 768 / 480。
   本文件只放共用模块的断点，页面专属区块的断点写在各自的样式表末尾；
   两份文件的层叠顺序就是加载顺序（layout_2026.css 在前），页面样式表可以覆盖这里。
   1024 是汉堡切换点，main.js 里的 matchMedia('(min-width: 1025px)') 与它成对，
   改一处必须改两处。

   两条容易踩的坑：
   1) 用 gap: 1px + 容器底色画发丝线的网格（.assure / .stats），列数换成不能整除
      条目数的值时最后一行会露出容器底色的空格，所以换列数时同时给最后一项
      grid-column: span N 补满，降到单列再改回 auto。
   2) .wall__strip 的负 margin 必须等于 .wall__in 的左右 padding，两个值成对改。 */

/* ===== ≤1360px ===== */
@media (max-width: 1360px){
  .wrap{ padding: 0 32px; }
  .shead h2{ font-size: 38px; }
}
/* ===== ≤1340px ===== */
@media (max-width: 1340px){
  .site-logo{ height: 36px; }
  .nav__item{ padding: 0 10px; font-size: 14px; }
  .header-tel{ font-size: 14px; }
  .header-cta{ gap: 14px; }
  .site-header__in{ gap: 20px; }
}

/* ===== ≤1200px ===== */
@media (max-width: 1200px){
  .wrap{ padding: 0 28px; }
  .sect{ padding: 92px 0; }
  .sect--sm{ padding: 64px 0; }
  .shead{ margin-bottom: 44px; }
  .shead h2{ font-size: 34px; }

  .cta__left{ padding: 40px 36px 44px; }
  .cta__right{ padding: 40px 32px; background: transparent; }

  .wall__in{ padding: 44px 40px 0; }
  .wall__strip{ margin: 0 -40px; }
  /* logo 画布是 400×160，等比缩放不会变形，比死宽 200px 更耐挤 */
  .wall__grid img{ width: 100%; max-width: 200px; height: auto; }

  /* ===== 子页共享件 ===== */
  .sp-hero__grid{ grid-template-columns: minmax(360px,.9fr) minmax(430px,1.1fr); }
  .sp-hero__copy h1{ font-size: 48px; }
  .sp-page .sp-pairs{ column-gap: 54px; }
  .sp-page .sp-radial{ column-gap: 60px; }
  .sp-page .sp-fusion__grid,
.sp-page .sp-fusion--reverse .sp-fusion__grid{
    grid-template-columns: minmax(330px,.9fr) minmax(460px,1.1fr); column-gap: 34px;
  }
  .sp-page .sp-fusion--reverse .sp-fusion__grid{
    grid-template-columns: minmax(460px,1.1fr) minmax(330px,.9fr);
  }
  .sp-page .sp-fusion__visual,
.sp-page .sp-fusion--reverse .sp-fusion__visual{ margin-left: -44px; margin-right: -48px; }
}
@media (max-width: 1180px){ 
  .site-logo{ height: 32px; }
  .nav__item{ padding: 0 8px; font-size: 13.5px; }
  .header-tel{ display: none; }
}

/* ===== ≤1024px ===== */
@media (max-width: 1024px){
  /* 顶栏高度令牌在这里重定义一次，巨幕菜单的 top、抽屉顶部条高度、区块的
     scroll-margin-top 全部自动跟到 60px，不用再写死。
     汉堡按钮在 DOM 里紧跟 logo —— 抽屉改成覆盖层后这不再是布局硬约束，
     但顺序仍决定视觉上「logo 在左、电话+汉堡在右」，别打乱。 */
  :root{ --header-h: 60px; --header-h-solid: 60px; }
  .wrap { padding: 0 20px;}
  .site-header{ background:  transparent; backdrop-filter: initial; }
  .site-header,.site-header.is-solid{ height: auto; }
  .site-header__in{ height: auto; min-height: var(--header-h); gap: 0; justify-content: space-between; }
  .site-logo{ height: 32px; }
  .nav-toggle{ display: flex; }

  /* 桌面导航与右侧 CTA 窄屏一律不出现，它们的内容由抽屉承担 */
  .nav{ display: none; }
  .header-cta{ display: none; }
  body.is-nav-open{ overflow: hidden; }

  /* 抽屉展开。写在断点内而不是基线：桌面档就算误挂上 is-nav-open 也开不出来。
     visibility 的延时在这里必须归零，否则开启时元素要等 .38s 才可见 ——
     和基线那条的 0s linear .38s 是一对，见共用模块区 .drawer 的注释。 */
  body.is-nav-open .drawer{ transform: none; visibility: visible; transition: transform .38s var(--ease-out),visibility 0s; }

  /* 比顶栏多 4px，锚点落点不至于顶着顶栏下沿 */
  .sect{ scroll-margin-top: 64px; }

  .shead--row{ flex-direction: column; align-items: flex-start; gap: 14px; }
  .shead--row h2{ white-space: normal; }
  .shead--row p{ max-width: none; padding-bottom: 0; }

  .stats{ grid-template-columns: repeat(2,1fr); }

  /* 标杆案例：≤1024 进入横滑卡形态 + 指示点（与首页 .lines 同款，
     main.js 第 14 段按 data-carousel/data-dots 同名配对驱动点选）。
     本档 .wrap 左右 20px，滑卡负 margin 必须同为 20px；
     ≤480 档 wrap 变 16px，在文末 ≤480 块成对改。
     卡宽 82vw、封顶 320：1024 档三张占 996px，第 4 张稳定露出约 28px 边，提示可滑。 */
  .flagship{
    display: flex; gap: 12px; margin: 16px -20px 0; padding: 0 20px 4px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .flagship::-webkit-scrollbar{ display: none; }
  .flagship>*{ flex: 0 0 auto; scroll-snap-align: start; }
  [data-dots="flagship"]{ display: flex; }
  .fcase{
    width: 82vw; max-width: 320px; padding: 22px 20px 24px;
    border-radius: var(--r-card-m); box-shadow: var(--sh-1);
  }
  .fcase:hover{ border-color: var(--line); box-shadow: var(--sh-1); transform: none; }

  .cta__grid{ grid-template-columns: 1fr; background: transparent; box-shadow: none; border: none; }
  .field input{ background: #fff;}
  .cta__right{ border-left: 0; } 
  .cra-show{ display: none;}
  .cra-hide{ display: flex; margin-top: 24px; border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 22px 20px; display: flex; gap: 18px; align-items: center; }
  .cra-hide p{ font-size: 12.5px; color: var(--ink-4); line-height: 1.7; } 
  .cra-hide a{ display: block; margin-top: 10px; font-family: var(--mono); font-size: 19px; font-weight: 600; color: var(--brand); letter-spacing: -.02em; }

  .site-footer__top{ grid-template-columns: repeat(3,1fr); gap: 32px; }
  .site-footer__brand{ grid-column: 1/-1; }
  .site-footer__brand p{ max-width: 44em; }
  .site-footer__qr{ grid-column: 1/-1; }
  .site-footer__bar{flex-direction: column;}
  .toast{ top: 72px; }

  /* ===== 子页共享件 ===== */
  .sp-page .pgs{ padding: 76px 0; }
  .sp-hero,.sp-hero__grid{ min-height: 380px; }
  .sp-hero__grid{ grid-template-columns: 1fr; }
  .sp-hero__copy{ padding: 56px 0 18px; }
  .sp-hero__copy h1{ font-size: 42px; }
  .sp-hero__visual{ min-height: 340px; position: absolute; z-index: -1; }
  .sp-hero__visual img{ width: 100%; position: relative; }
  .sp-hero__facts{ right: 0; width: 100%; }
  .sp-page .sp-pairs{ column-gap: 40px; }
  .sp-page .plist__b{ padding-right: 20px; }
  .sp-page .sp-fusion{ padding: 68px 0; }
  .sp-page .sp-fusion__grid,
.sp-page .sp-fusion--reverse .sp-fusion__grid{
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "visual" "detail";
    grid-template-rows: auto; gap: 24px; min-height: 0;
  }
  .sp-page .sp-fusion__copy,
.sp-page .sp-fusion__detail{ max-width: 720px; align-self: start; }
  .sp-page .sp-fusion__visual,
.sp-page .sp-fusion--reverse .sp-fusion__visual{ min-height: 350px; margin: -10px -42px -22px; }
  .sp-page .pgs--tight{ padding: 48px 0; }
  .sp-page .pgrid--3,
.sp-page .pgrid--4{ grid-template-columns: repeat(2, 1fr); }
  .sp-page .pquote{ padding: 32px 26px 34px; }
  .sp-page .pquote q{ font-size: 23px; }
  /* 放射图收成纵向：核心圆提到最前，双圈隐藏 */
.sp-page .sp-radial{ display: flex; flex-direction: column; gap: 0; min-height: 0; }
  .sp-page .sp-radial::before,
.sp-page .sp-radial::after{ display: none; }
  .sp-page .sp-radial__core{
    order: -1; align-self: center; width: 190px; height: 190px; margin-bottom: 20px;
  }
  .sp-page .sp-radial__item{ min-height: 0; }
}

/* ===== ≤768px ===== */
@media (max-width: 768px){
  .wrap{ padding: 0 20px; }
  .sect{ padding: 60px 0; }
  .sect--sm{ padding: 44px 0; }
  .shead{ margin-bottom: 30px; }
  .shead h2{ font-size: 27px; }
  .shead p{ font-size: 15px; line-height: 1.85; }

  .drawer__item{ font-size: 17px; padding: 15px 0; }

  .assure{ grid-template-columns: 1fr; border-radius: var(--r-card-m); }
  .assure .idx{ color: var(--brand); padding-top: 4px; }
  .assure div{ display: grid; padding: 18px 20px; grid-template-columns: 32px 1fr; }
  .assure div div{ display: block;}

  /* .flagship 横滑卡已在 ≤1024 档生效，本档只放松卡片正文的最小行高 */
  .fcase p{ min-height: 0; }
  .stats{ border-radius: var(--r-card-m); }
  .stat{ padding: 24px 20px 26px; }
  .stat b{ font-size: 32px; }
  .stat b i{ font-size: 16px; }

  /* 客户墙：10 个 logo 换 2 列正好 5 行，不会出现悬空的分隔线。
     竖线/横线原本靠 :nth-child(5n) 的伪元素画，列数变了就换成 cell 自己的边框。 */
  .wall{ margin-top: 36px; }
  .wall__in{ padding: 32px 20px 0; }
  .wall__strip{ margin: 0 -20px; }
  .wall__head{ flex-direction: column; align-items: flex-start; gap: 16px; padding-bottom: 26px; }
  .wall__head h3{ font-size: 20px; }
  .wall__head p{ text-align: left; max-width: none; }
  .wall__grid{ grid-template-columns: repeat(2,1fr); }
  .wall__grid>div{ height: 96px; border-right: 1px solid var(--hair-on-dark); border-top: 1px solid var(--hair-on-dark-soft); }
  .wall__grid>div::after,.wall__grid>div::before{ display: none; }
  .wall__grid>div:nth-child(2n){ border-right: 0; }
  .wall__grid>div:nth-child(-n+2){ border-top: 0; }
  .wall__grid img{ max-width: 150px; }
  .wall__strip i{ height: 54px; padding: 0 18px; font-size: 13.5px; }
  .wall__foot{ flex-direction: column; align-items: flex-start; gap: 8px; }

  .cta__left{ padding: 30px 22px 34px; }
  .cta__left h2{ font-size: 25px; }
  .cta__right{ padding: 30px 22px 34px; }
  .form__row{ grid-template-columns: 1fr; gap: 6px; }
  .form__foot{ flex-direction: column; align-items: stretch; gap: 14px; }
  .form__foot .btn{ width: 100%; height: 50px; }

  .site-footer{ padding: 44px 0 0; }
  .site-footer__top{ gap: 10px; padding-bottom: 32px; }
  .site-footer__bar{ flex-direction: column; align-items: flex-start; gap: 8px; }
  .site-footer__brand{ margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
  .fcol a{ font-size: 12px;}

  /* 悬浮条压窄，只留图标（每个按钮本来就有 aria-label） */
  .side{ right: 12px; bottom: 14px; }
  .side__btn{ width: 46px; height: 46px; gap: 0; }
  .side__btn span{ display: none; }
  .side__btn--top.is-on{ max-height: 46px; }

  .toast{ top: 66px; max-width: calc(100% - 24px); text-align: center; }

  /* ===== 子页共享件 ===== */
  .sp-page .pgs{ padding: 62px 0; }
  .sp-page .pgs__head{ margin-bottom: 38px; }
  .sp-page .pgs__head h2{ font-size: 29px; }
  .sp-hero{ padding-top: 58px; }
  .sp-hero .crumb{ padding-top: 14px; }
  .sp-hero__copy{ padding-top: 38px; }
  .sp-hero__copy h1{ font-size: 36px; }
  .sp-hero__copy > p{ font-size: 15px; }
  .sp-hero__actions{  }
  /* 出血值必须等于本档 .wrap 的 20px 槽宽（≤480 档再成对改成 16px） */
  .sp-hero__visual{ min-height: 300px; margin: 0 -20px; }
  .sp-hero--plain .sp-hero__visual{ min-height: 175px; }
  .sp-hero--plain .sp-hero__visual::before{
    width: 180px; height: 180px; margin-top: -40px; margin-right: -40px;
    box-shadow: 0 0 0 22px rgba(43,92,230,.035), 0 0 0 48px rgba(43,92,230,.025);
  }
  /* facts 脱离首屏视觉区落到视觉下方成行：视觉容器出血 20px，facts 用同等内边距
     把内容对回 .wrap 版心；负边距都在 hero overflow 内。 */
  .sp-hero__facts{
    position: relative; right: auto; bottom: auto;
    width: calc(100% - 40px); margin: 0 20px 28px; grid-template-columns: 1fr;
  }
  .sp-hero__facts li{ border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .sp-page .rt{ font-size: 15.5px; }
  .sp-page .pgrid--2{ grid-template-columns: 1fr; }
  /* 本站只用 --plain（无编号列），窄屏保持单列，不搬原型给编号清单准备的 52px 列 */
  .sp-page .plist__b{ padding: 22px 0 26px; }
  .sp-page .sp-pairs{ grid-template-columns: 1fr; }
  .sp-page .sp-pairs article:nth-child(n){ transform: none; }
  .sp-page .sp-fusion h2{ font-size: 33px; }
  .sp-page .sp-fusion__detail .rt{ margin-top: 0; font-size: 14.5px; line-height: 1.82; }
  .sp-page .sp-fusion__detail .rt p + p{ margin-top: 16px; padding-top: 16px; }
  .sp-page .sp-fusion__points{ margin-top: 22px; }
  .sp-page .sp-fusion__points li{ padding: 15px 0; }
  .sp-page .sp-fusion__visual,
  .sp-page .sp-fusion--reverse .sp-fusion__visual{ min-height: 250px; margin: 8px -24px -12px; }
  .sp-page .sp-fusion__visual img{ width: 100%; max-height: 320px; }
  .sp-page .pgs--tight{ padding: 40px 0; }
  .sp-page .pgrid--2,
  .sp-page .pgrid--3,
  .sp-page .pgrid--4{ grid-template-columns: 1fr; }
  .sp-page .pquote q{ font-size: 20px; }
  /* 分层卡取消错位，单列占满版心 */
  .sp-page .sp-layers{ padding-left: 0; }
  .sp-page .sp-layers li,
  .sp-page .sp-layers li:nth-child(n){ width: 100%; margin-left: 0; padding: 22px 20px; }
  /* 无图首屏圆环下的注记在窄屏隐藏，资讯页保留 */
  .sp-hero--plain .sp-hero__visual figcaption{ display: none; }
  .sp-hero::after{ width: 75vw; height: 75vw; right: -50px; top: -50px; }
}

/* ===== ≤480px ===== */
@media (max-width: 480px){
  .wrap{ padding: 0 16px; }
  .sect{ padding: 32px 0; }
  .shead--c{ text-align: left;}
  .shead p{ font-size: 14px; text-align: left;}

  .drawer__bar{ padding: 0 10px 0 16px; }
  .drawer__body{ padding: 8px 16px 24px; }
  .drawer__item{ font-size: 16px; padding: 14px 0; }
  .drawer__foot{ padding: 18px 16px 28px; }

  .wall__in{ padding: 26px 16px 0; }
  .wall__strip{ margin: 0 -16px; }
  .wall__panel{ border-radius: var(--r-card-m); }
  .wall__glow .gblue{ width: 400px; height: 250px; right: -90px; top: -140px; }
  .wall__glow .gpurple{ width: 380px; height: 230px; right: 60px; top: -130px; }
  .wall__glow .gcore{ width: 250px; height: 175px; right: -70px; top: -108px; }
  .wall__glow .gcool{ width: 300px; height: 200px; left: -110px; bottom: -140px; }
  .wall__foot{ font-size: 12px; }
  .wall__foot a{ display: none;}

  /* 案例横滑卡的出血跟随本档 .wrap 的 16px（1024 档是 20） */
  .flagship{ margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
  .wall__grid>div{ height: 84px; }

  .cta__ch dd.tel{ font-size: 19px; }
  .cta__left,
  .cta__right{ padding: 0; }
  .cta__right h3{ margin-bottom: 5px;}
  .cta__right a{ margin-top: 5px;}
  .cta__qr{ width: 96px; padding: 4px; }
  .side__btn{ width: 42px; height: 42px; }
  .side__btn--top.is-on{ max-height: 42px; }
  .side__btn svg{ width: 17px; height: 17px; }
  .site-footer__top{ grid-template-columns: 1fr 120px 1fr; }

  /* ===== 子页共享件 ===== */
  /* hero 出血与 facts 内边距跟随本档 .wrap 的 16px 槽宽（768 档是 20px，成对改）；
     fusion 视觉的 -24px 是装饰性出血，区块自身 overflow:hidden 收边，保留原型值 */
  .sp-hero__visual{ margin: 0 -16px; }
  .sp-hero__facts{ width: calc(100% - 32px); margin-right: 16px; margin-left: 16px; }
  .sp-page .pgs,.sp-page .sp-fusion{ padding: 32px 0; }
  .sp-page .pgs__head{ margin-bottom: 28px;}
  .sp-page .sp-pairs article{ padding: 18px 0; }
  .sp-hero__copy{ padding-top: 20px; }
  .sp-hero__grid{ gap: 0; }
}

/* ===== 子页共享件动效降级 ===== */
/* 锚点跳转不给平滑滚动 */
@media (prefers-reduced-motion: reduce){
  .sp-page *{ scroll-behavior: auto !important; }
}