/* ============================================================
   菊厂家园 · 品牌官网
   设计语言与《菊厂家园品牌宣传手册》一致：
   品牌青绿 #00B0A0 / 深青绿 #007A6F / 深底 #003A32 / 正文 #2A3B38
   点缀色仅用于图标与数字，全篇面积 <= 10%
   ============================================================ */

:root{
  --teal:#00B0A0;
  --teal-d:#00897C;
  --deep:#007A6F;
  --darkest:#003A32;
  --ink:#2A3B38;
  --ink-2:rgba(42,59,56,.72);
  /* 对比度修正：原 .52 在白底合成 rgb(144,153,152) 仅 2.92:1、浅底 2.86:1，
     而 --ink-3 承载的是 12.5~13.5px 正文（注释、免责、副标题），门限 4.5:1。
     提到 .70：白底 4.73:1、浅底 4.59:1，双双达标，视觉上只是「次要文字更实一点」，
     层级关系（ink > ink-2 > ink-3）依然成立。 */
  --ink-3:rgba(42,59,56,.70);
  --line:rgba(42,59,56,.10);
  --soft:#F5F9F8;
  --bg:#FFFFFF;

  /* 对比度修正：原 #F87018 不管配白底（2.87:1）还是浅底 #F5F9F8（2.70:1），
     都低于大字号 3:1 门限。而它承载的是「10年」56px、「1310 万」38px 这类
     关键数字，必须清晰。改为 #A84A0A 同色系压深：白底 5.32:1、浅底 5.01:1。
     注意：本变量同时用于 .ico--orange 的背景（rgba(248,112,24,.12)）——
     那处是硬编码的 rgb 值，不受本变量影响，图标底色视觉不变。 */
  --orange:#A84A0A;
  --yellow:#F8C808;
  /* 对比度修正：原 .ico--green 与 .num-item--2 b 直接硬编码 #7A9A1E，
     白底仅 3.25:1、浅底 #F5F9F8 仅 3.06:1。大号数字（56px）勉强过 3:1，
     但其 <small>（.46em → 17.5px）是正常字号，需要 4.5:1 —— 实测只有 3.06:1，
     是真实的 WCAG AA 缺陷。同时发现 --green:#A0C828 定义了却从未被引用（死变量）。
     故把 --green 重新定义为达标的橄榄：白底 4.91:1、浅底 4.63:1，色相不变。 */
  --green:#5F7A10;
  --coral:#D62040;
  --purple:#904088;

  /* ---------- 字号阶梯（9 档） ----------
     审计发现：原 CSS 硬编码 27 种 font-size，其中 12~17px 区间挤了 17 种，
     相邻最小差 0.1px（12.5 / 12.6 / 12.8 / 13.0 / 13.2 …）。
     0.1px 肉眼不可分辨，不产生层级只产生噪声 —— 真实可感知的层级只有 4~5 档。
     故收敛为下面 9 档；12~15px 那堆伪层级全部吸附到 2xs/xs/sm/md。
     命名按语义（2xs→4xl）而非绝对值，改基准时不用改名字。 */
  --fs-2xs:12px;                        /* 小注、免责、角标 */
  --fs-xs :13px;                        /* 辅助文字、标签 */
  --fs-sm :14px;                        /* 次要正文 */
  --fs-md :15px;                        /* 正文基准 */
  --fs-lg :17px;                        /* 卡片标题 */
  --fs-xl :20px;                        /* 区块标题 */
  --fs-2xl:26px;                        /* 大标题 */
  --fs-3xl:clamp(32px,4.6vw,56px);      /* 章节主标题 */
  --fs-4xl:clamp(56px,8vw,104px);       /* 数据大字 */

  /* ---------- 间距阶梯（8px 网格） ----------
     审计：原 padding 26 种 / margin 28 种 / gap 22 种，且 CSS 中
     --sp-* 间距变量出现 0 次 —— 完全靠手写数字，同屏能出现 7/8/9/11/12/13px。
     统一到 8px 网格；4px 与 12px 是网格的半档，用于图标与紧凑排版。 */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:20px;
  --sp-6:24px;
  --sp-7:32px;
  --sp-8:40px;
  --sp-9:56px;
  --sp-10:72px;
  --sp-11:96px;

  --sh-sm:0 2px 8px rgba(0,58,52,.05);
  --sh-md:0 8px 28px rgba(0,58,52,.08);
  --sh-lg:0 18px 48px rgba(0,58,52,.12);

  /* 圆角只保留 4 档 + 全圆。审计：原 9 种取值里 2px/12px/14px 是凭空多出来的，
     没走变量。2px 是发丝级（几乎看不见），14px 夹在 12 与 16 之间无法分辨，一并去掉。 */
  --r-xs:6px;
  --r-sm:10px;
  --r-md:16px;
  --r-lg:22px;
  --r-full:999px;

  --wrap:1200px;
  --nav-h:76px;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth; scroll-padding-top:var(--nav-h);}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans SC",sans-serif;
  font-size:var(--fs-lg);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4{margin:0; font-weight:700; line-height:1.3;}
p{margin:0;}
ul{margin:0; padding:0; list-style:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none;}

.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 28px;}

/* ---------- 无障碍：跳过导航 ---------- */

/* 用「原地裁剪」而不是「移出屏幕」来隐藏。
   原写法 left:-9999px 依赖浏览器不把它算进可滚动区域，但 body 没有
   position:relative、也没有建立包含块，真实浏览器在横向滚动或某些
   缩放场景下会把这块带回到左上角，用户就直接看见了「跳到主要内容」。
   改成 clip-path 就近裁掉：元素始终待在原位、不产生任何可滚动余量，
   聚焦时再把裁剪解除，无障碍行为完全不变。 */
.skip-link{
  position:absolute; left:12px; top:12px; z-index:200;
  padding:var(--sp-4) var(--sp-6); border-radius:var(--r-sm);
  background:var(--deep); color:#fff; font-size:var(--fs-md); font-weight:700;
  clip-path:inset(50%);
  transition:clip-path .16s ease;
}
.skip-link:focus,
.skip-link:focus-visible{
  clip-path:none; outline:none;
  box-shadow:0 0 0 4px rgba(0,176,160,.30), var(--sh-md);
}

/* ---------- 无障碍：统一焦点环 ---------- */
/* 键盘用户看得见、鼠标用户不被打扰 */
:focus-visible{
  outline:3px solid var(--teal);
  outline-offset:3px;
  border-radius:8px;
}
/* 深底区域用亮色焦点环，保证对比度 */
.hero :focus-visible,
.stock :focus-visible,
.site-footer :focus-visible{
  outline-color:#7FF0E2;
}
/* 主按钮本身是青绿底，焦点环改用深色描边才看得清 */
.btn--primary:focus-visible{
  outline-color:#003A32;
  outline-offset:3px;
}
.site-header .nav a:focus-visible,
.site-header__cta:focus-visible{outline-color:#7FF0E2;}
.site-header.is-stuck .nav a:focus-visible,
.site-header.is-stuck .site-header__cta:focus-visible{outline-color:var(--teal);}

/* ---------- 通用排版 ---------- */

/* 区块眉标（关于我们 / 业务体系 / 资金方案 / 配股季专项 / 信任保障 …共 13 处）。
   原为固定 13px —— 在 26~40px 的 sec-title 上方又细又小，作为「区块入口标识」
   完全起不到导航作用，用户反馈「每个目录很小 / 整得扣搜」即指此处。
   现做成真正的「区块门牌」：字号提到 20~25px、字重 800、字距放开，
   装饰短线加粗加长，并用 inline-block 造出一个胶囊底衬，让它自己立得住。 */
/* ★ 全站统一：眉标不再用「横杠 + 间距」的 inline-flex 占位。
   横杠（38px）+ gap（13px）= 51px 会把眉标文字整体右推半格，
   而紧随其后的 h1/h2/正文/大数字都停在容器左边缘，
   于是「配股季专项」比「6.9 天」右移 51px、「信任保障」比标题右移 51px ——
   用户反馈「排版不一样，很违和」。改为 block 单行、去掉装饰横杠，
   眉标与下方所有元素共用一个左边线。层级感由字号/字重/颜色承担。 */
.kicker{
  display:block;
  font-size:clamp(20px,1.75vw,25px);
  letter-spacing:.055em; font-weight:800; line-height:1.35;
  /* 对比度修正：原用 var(--teal) #00B0A0，配白底仅 2.72:1、配浅底 #F5F9F8 仅 2.56:1，
     而 20px/800 属大字号，WCAG AA 门限 3:1 —— 13 处亮底眉标全部不达标。
     改用已在同页使用的 var(--deep) #007A6F：白底 5.23:1、浅底 4.93:1，双底达标，
     不引入新色、不改变设计语言（「只服务这一个群体」一直就是这个色）。
     深色区（hero / .stock / .booking__intro / 页脚）由各自的覆写规则控色，不受影响。 */
  color:var(--deep); text-transform:uppercase;
}
.kicker::before{display:none;}

.sec-title{font-size:clamp(26px,3.4vw,40px); color:var(--deep); letter-spacing:-.01em;}
.sec-title .hl{color:var(--deep);}

/* 眉标紧邻标题时给足间距：字号升到 20~25px 后，原来贴着的排法会挤成一坨。
   只有「后面还跟着标题」的眉标才需要这段下边距，故用相邻兄弟选择器限定，
   避免影响 hero、.stock 等单独立着的眉标。 */
.kicker + .sec-title,
.kicker + .flow__title,
.kicker + .bizblock__title,
.kicker + .booking__title{margin-top:clamp(14px,1.5vw,20px);}

.sec-lead{
  margin-top:var(--sp-5); max-width:660px;
  font-size:clamp(15px,1.35vw,17px); color:var(--ink-2); line-height:1.85;
}

.section{padding:clamp(72px,9vw,124px) 0;}
.section--soft{background:var(--soft);}

.sec-head{margin-bottom:clamp(40px,5vw,64px);}
.sec-head--center{text-align:center;}
.sec-head--center .sec-lead{margin-left:auto; margin-right:auto;}

/* ---------- 按钮 ---------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  padding:var(--sp-4) 28px; border-radius:var(--r-full);
  font-size:var(--fs-md); font-weight:700; line-height:1;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  white-space:nowrap;
}
.btn--primary{
  /* 无障碍：#00B0A0 上白字仅 2.72:1（小字需 4.5:1）。
     按钮底色改用品牌手册中的深青绿 #007A6F，白字达 5.23:1，
     视觉几乎不变，且未引入手册之外的颜色。 */
  background:var(--deep); color:#fff;
  box-shadow:0 8px 22px rgba(0,122,111,.28);
}
.btn--primary:hover{background:var(--darkest); transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,122,111,.34);}
.btn--ghost{
  background:rgba(255,255,255,.10); color:#fff;
  border:1.5px solid rgba(255,255,255,.42);
  backdrop-filter:blur(6px);
}
.btn--ghost:hover{background:rgba(255,255,255,.20); transform:translateY(-2px);}
.btn svg{width:16px; height:16px; flex:none;}

/* ---------- 导航 ---------- */

.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .35s ease, box-shadow .35s ease, height .35s ease;
}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px;}
.site-header__logo img{height:40px; width:auto; transition:height .35s ease;}
.site-header__logo .logo-dark{display:none;}

.nav{display:flex; align-items:center; gap:8px;}
.nav a{
  position:relative;
  padding:var(--sp-2) var(--sp-4); border-radius:var(--r-full);
  font-size:var(--fs-md); font-weight:500;
  color:rgba(255,255,255,.86);
  transition:color .22s ease, background .22s ease;
}
.nav a:hover{color:#fff; background:rgba(255,255,255,.12);}
.nav a.is-active{color:#fff; background:rgba(255,255,255,.16); font-weight:700;}
/* 导航内的 CTA 只在窄屏出现（宽屏已有右上角按钮） */
.nav__cta{display:none;}

/* ---------- 滚动进度条 ---------- */

.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:110;
  background:transparent; pointer-events:none;
}
.scroll-progress i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--teal) 0%,#6FE9D9 100%);
  transition:width .1s linear;
}
@media (prefers-reduced-motion:reduce){
  .scroll-progress i{transition:width .2s linear;}
}

.site-header__cta{
  padding:var(--sp-3) var(--sp-6); font-size:var(--fs-sm);
  background:#fff; color:var(--deep); border-radius:var(--r-full); font-weight:700;
  transition:transform .22s ease, box-shadow .22s ease;
}
.site-header__cta:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.16);}

/* 滚动后：白底深字 */
.site-header.is-stuck{
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 0 rgba(42,59,56,.07), 0 8px 26px rgba(0,58,52,.06);
  height:66px;
}
.site-header.is-stuck .logo-light{display:none;}
.site-header.is-stuck .logo-dark{display:block;}
.site-header.is-stuck .site-header__logo img{height:34px;}
.site-header.is-stuck .nav a{color:var(--ink-2);}
.site-header.is-stuck .nav a:hover{color:var(--teal); background:rgba(0,176,160,.08);}
.site-header.is-stuck .nav a.is-active{color:var(--deep); background:rgba(0,176,160,.12);}
.site-header.is-stuck .site-header__cta{
  background:var(--deep); color:#fff;
  box-shadow:0 6px 18px rgba(0,122,111,.28);
}

.nav-toggle{
  display:none; width:44px; height:44px; border-radius:var(--r-sm);
  align-items:center; justify-content:center;
}
.nav-toggle span{
  display:block; width:20px; height:2px; background:#fff; border-radius:var(--r-xs);
  position:relative; transition:background .2s ease;
}
.nav-toggle span::before,
.nav-toggle span::after{
  content:""; position:absolute; left:0; width:20px; height:2px;
  background:#fff; border-radius:var(--r-xs); transition:transform .28s ease, top .28s ease;
}
.nav-toggle span::before{top:-6px;}
.nav-toggle span::after{top:6px;}
.site-header.is-stuck .nav-toggle span,
.site-header.is-stuck .nav-toggle span::before,
.site-header.is-stuck .nav-toggle span::after{background:var(--ink);}
.nav-toggle.is-open span{background:transparent;}
.nav-toggle.is-open span::before{top:0; transform:rotate(45deg);}
.nav-toggle.is-open span::after{top:0; transform:rotate(-45deg);}

/* ---------- Hero ---------- */

.hero{
  position:relative;
  min-height:min(94vh,860px);
  display:flex; align-items:center;
  padding:calc(var(--nav-h) + 56px) 0 64px;
  overflow:hidden;
  background:var(--darkest);
}
.hero__bg{position:absolute; inset:0;}
.hero__bg img{width:100%; height:100%; object-fit:cover;}
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,
    rgba(0,58,52,.95) 0%,
    rgba(0,58,52,.88) 34%,
    rgba(0,58,52,.62) 62%,
    rgba(0,58,52,.30) 100%);
}
.hero .wrap{position:relative; z-index:2;}

/* 首屏不再重复放 LOGO —— 页头已有固定 LOGO 且形状完全相同，紧邻出现会显得违和。
   改为用一枚小号 kicker 承接品牌语境，视觉重心直接落在主标题上。 */
/* 这行承接的是原来 hero LOGO 的品牌位置，主标题 62px（手机 34px）极大，
   眉标必须同步做大才压得住场、才「大气」。原 13→15→17px 仍显小。
   ★ 下限不能再低：375 手机下 1.7vw 只算得 6.4px，clamp 会一路夹到下限，
   所以手机端实际字号 = 这里写的下限值，必须直接给足 20px。 */
/* hero 区所有元素统一从容器左边缘起排。
   .kicker::before 是 28px 装饰横杠 + 12px 右边距，它会把 kicker 文字
   向右推 40px，而 h1 / hero__lead / hero__actions 没有这个占位，
   于是「由前华为人创立…」和下面几行的左边线差 40px，看着很别扭。
   修法：hero 区里把横杠改成「不影响文字起点」的绝对定位装饰，
   让 kicker 文字与 h1 共用一个左边线。 */
.hero .kicker{
  display:block; position:relative;
  padding-left:0;
  margin-bottom:clamp(22px,2.4vw,34px);
  color:rgba(155,244,232,.99);
  /* 字距收紧到 .05em：375 屏可用宽仅 335px，20px 字号 + .09em 字距下
     「由前华为人创立 · 深耕华友服务十年」会超宽断行，把「十年」挤到第二行。
     收紧字距后单行可容，视觉反而更紧凑大气。 */
  letter-spacing:.05em;
  font-size:clamp(20px,1.9vw,26px);
  font-weight:700;
  line-height:1.5;
  text-transform:none;
  /* 极端窄屏（320px 老机型）实在放不下时，让两行自动均分，
     避免出现「……服务十 / 年」这种只剩一个字的孤字行。
     支持的浏览器均分；不支持的忽略该行，行为退回普通换行。 */
  text-wrap:balance;
}
/* hero kicker 横杠已由全站规则统一关闭 */

.hero h1{
  font-size:clamp(32px,5.4vw,62px);
  color:#fff; line-height:1.16; letter-spacing:-.02em;
  max-width:15em;
  /* 极端窄屏（≤340px）下 32px 下限仍可能放不下「资产与生活服务平台」，
     末字会掉到第二行形成孤字。balance 让换行点自动选在中间，
     两行长度接近，视觉上仍是完整的一段话而不是「……平 / 台」。 */
  text-wrap:balance;
}
.hero h1 .accent{
  background:linear-gradient(100deg,#B4F4EB 0%,#6FE9D9 46%,#2FD3BE 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero__lead{
  margin-top:var(--sp-6); max-width:560px;
  font-size:clamp(15px,1.5vw,18px); line-height:1.85;
  color:rgba(255,255,255,.86);
}
.hero__actions{display:flex; flex-wrap:wrap; gap:var(--sp-4); margin-top:var(--sp-8);}

.hero__tags{
  display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:36px;
}
.hero__tags span{
  padding:var(--sp-2) var(--sp-5); border-radius:var(--r-full);
  /* 审计：原用 --fs-sm(14px)，是「小徽章」的尺度。但这四个词回答的是
     「你们能做什么」—— 首屏最重要的信息之一，不该比免责声明还不起眼。
     提到 --fs-md(15px) = 正文级，并加宽内边距让它有「按钮」的分量感。 */
  font-size:var(--fs-md); color:rgba(255,255,255,.92);
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  letter-spacing:.01em;
}

/* Hero 底部数据条 */
.hero__stats{
  position:relative; z-index:2;
  margin-top:clamp(48px,6vw,72px);
  border-top:1px solid rgba(255,255,255,.16);
  padding-top:var(--sp-7);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px;
  max-width:720px;
}
.hero__stats .num{
  font-size:clamp(28px,3.6vw,42px); font-weight:700; color:#fff; line-height:1;
  font-variant-numeric:tabular-nums;
}
.hero__stats .num small{font-size:.5em; font-weight:700; margin-left:var(--sp-1);}
.hero__stats .cap{
  margin-top:var(--sp-3); font-size:var(--fs-sm); color:rgba(255,255,255,.66); line-height:1.5;
}

/* ---------- 图标容器 ---------- */

.ico{
  width:50px; height:50px; border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px; flex:none;
}
.ico svg{width:24px; height:24px;}
.ico--teal{background:rgba(0,176,160,.12); color:var(--teal);}
.ico--orange{background:rgba(248,112,24,.12); color:var(--orange);}
.ico--green{background:rgba(160,200,40,.15); color:var(--green);}
.ico--coral{background:rgba(240,56,88,.11); color:var(--coral);}
.ico--sm{width:42px; height:42px; border-radius:var(--r-sm); margin-bottom:var(--sp-4);}
.ico--sm svg{width:20px; height:20px;}

/* ---------- 关于我们 ---------- */

.about-grid{
  display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(36px,5vw,72px);
  align-items:center;
}
.about-figure{
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--sh-lg);
  aspect-ratio:11/8.6;
}
.about-figure img{width:100%; height:100%; object-fit:cover;}

.about-copy h2{font-size:clamp(28px,3.2vw,40px); color:var(--ink); line-height:1.34; letter-spacing:-.01em;}
.about-copy h2 .hl{color:var(--deep);}
.about-copy > p{margin-top:24px; font-size:clamp(16px,1.15vw,17.5px); color:var(--ink-2); line-height:1.95;}
.about-copy > p + p{margin-top:var(--sp-5);}

/* 事实卡：原为两列小字（标签 13px / 数值 15.5px），整块读起来像附注，
   现改为带底色的卡片、字号上调，视觉重量与左侧图片对齐。 */
.about-facts{
  margin-top:36px; padding-top:0; border-top:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-4);
}
.about-facts > div{
  padding:var(--sp-5) 20px var(--sp-5);
  background:var(--soft);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  border-left:3px solid var(--teal);
  transition:transform .25s ease, box-shadow .25s ease;
}
.about-facts > div:hover{transform:translateY(-2px); box-shadow:var(--sh-sm);}
.about-facts .k{
  display:block; font-size:var(--fs-sm); color:var(--ink-2);
  letter-spacing:.06em; font-weight:600;
}
.about-facts .v{
  margin-top:8px; font-size:clamp(17px,1.25vw,19px);
  font-weight:700; color:var(--deep); line-height:1.45;
}

/* ---------- 三件决定方案成败的事 ---------- */

.why-grid{
  display:grid; grid-template-columns:1.02fr 1fr; gap:clamp(36px,5vw,72px);
  align-items:center;
}
.why-quote{
  font-size:clamp(26px,3.2vw,40px); font-weight:700; line-height:1.42;
  color:var(--deep); letter-spacing:-.01em;
}
.why-quote .hl{color:var(--deep);}
.why-sub{margin-top:24px; font-size:var(--fs-lg); color:var(--ink-2); line-height:1.9;}

.why-list{display:flex; flex-direction:column; gap:16px;}
.why-item{
  display:flex; gap:var(--sp-5); align-items:flex-start;
  padding:var(--sp-6) 24px; background:var(--soft); border-radius:var(--r-md);
  transition:background .25s ease, transform .25s ease;
}
.why-item:hover{background:#EEF6F4; transform:translateX(4px);}
.why-item h3{font-size:var(--fs-xl); color:var(--ink);}
.why-item p{margin-top:8px; font-size:var(--fs-md); color:var(--ink-2); line-height:1.7;}

/* ---------- 业务：生命周期链路 ---------- */

.chain{
  position:relative;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:var(--sp-5); margin-top:clamp(40px,5vw,60px);
}
.chain::before{
  content:""; position:absolute; top:15px; left:9%; right:9%; height:2px;
  background:linear-gradient(90deg,
    rgba(248,112,24,.30), rgba(0,176,160,.55), rgba(0,176,160,.55),
    rgba(0,176,160,.55), rgba(248,112,24,.30));
}
.chain__node{position:relative; text-align:center; padding:0 var(--sp-2);}
.chain__dot{
  width:32px; height:32px; border-radius:50%;
  margin:0 auto 20px; background:#fff;
  display:flex; align-items:center; justify-content:center;
  position:relative; z-index:1;
  box-shadow:0 0 0 6px var(--bg);
}
.chain__dot i{
  width:14px; height:14px; border-radius:50%; display:block;
}
.chain__node--teal .chain__dot i{background:var(--teal);}
.chain__node--orange .chain__dot i{background:var(--orange);}
.chain__node h3{font-size:var(--fs-lg); color:var(--ink);}
.chain__node p{margin-top:var(--sp-2); font-size:var(--fs-sm); color:var(--ink-3); line-height:1.65;}

.chain__note{
  margin-top:clamp(40px,4vw,52px);
  display:flex; gap:var(--sp-5); align-items:flex-start;
  padding:24px 28px; border-radius:var(--r-md);
  background:rgba(0,176,160,.06);
  border-left:4px solid var(--teal);
}
.chain__note p{font-size:var(--fs-md); color:var(--ink-2); line-height:1.8;}
.chain__note strong{color:var(--deep);}

/* ---------- 产品卡 ---------- */

.products{
  /* 五款产品统一一排五列。
     原先提额宝是 .pcard--wide（grid-column:span 4）独占一整行、其余四款各占一列，
     于是「一张宽卡 + 四张窄卡」两种版式混排，高度也参差（328 vs 520px），
     视觉上很违和。改成五款等宽同版式，靠 flex 让卡片底部对齐。 */
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:16px; margin-top:clamp(38px,4.5vw,54px);
  align-items:stretch;
}
.pcard{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  padding:var(--sp-6) var(--sp-6); box-shadow:var(--sh-sm);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  display:flex; flex-direction:column;
}
.pcard:hover{transform:translateY(-5px); box-shadow:var(--sh-md); border-color:rgba(0,176,160,.26);}
/* 五款等宽后不再需要「宽卡」版式；保留类名兜底 */
.pcard--wide{flex-direction:column; align-items:flex-start;}
/* 产品名 + 徽标：窄卡片里并排会挤，改成上下两行、左对齐 */
.pcard__badge{
  display:block; margin:8px 0 0; padding:4px var(--sp-3); border-radius:var(--r-full);
  font-size:var(--fs-2xs); font-weight:700; color:var(--deep); background:rgba(0,176,160,.13);
  align-self:flex-start;
}
.pcard h3{font-size:var(--fs-xl); color:var(--ink);}
.pcard p{margin-top:12px; font-size:var(--fs-md); color:var(--ink-2); line-height:1.75;}
.pcard__scene{
  margin-top:auto; padding-top:var(--sp-5);
  /* 亮青绿 #00B0A0 在浅底小字上仅 2.72:1，改用深青绿保证 AA */
  font-size:var(--fs-xs); color:var(--deep); font-weight:700;
  display:flex; align-items:center; gap:var(--sp-2);
}
.pcard__scene svg{width:14px; height:14px;}

.products__note{
  margin-top:28px; padding:20px 24px; border-radius:var(--r-md);
  background:var(--soft); font-size:var(--fs-sm); color:var(--ink-2); line-height:1.8;
  border-left:3px solid rgba(0,176,160,.4);
}

/* ---------- 配股季 高亮带 ---------- */

.stock{
  position:relative; overflow:hidden;
  /* 渐变右端原为品牌亮青绿 #00B0A0，实测白字对比仅 3.04:1（正文门限 4.5:1）。
     全宽横幅右端占据近半屏，必须整体压深：最亮处 5.1:1，最暗处 7.0:1，全段达标。 */
  background:linear-gradient(115deg,#00413A 0%,#00544C 58%,#00665E 100%);
  color:#fff;
}
.stock .wrap{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(36px,5vw,70px);
  align-items:center; padding-top:clamp(72px,8vw,104px); padding-bottom:clamp(72px,8vw,104px);
}
.stock__glow{
  position:absolute; width:640px; height:640px; border-radius:50%;
  right:-190px; top:-230px; background:rgba(255,255,255,.09); z-index:1;
}
.stock__glow--2{
  width:420px; height:420px; left:-160px; bottom:-200px;
  background:rgba(0,58,52,.20);
}
.stock .kicker{color:rgba(255,255,255,.92);}


.big-num{
  display:flex; align-items:baseline; gap:12px; margin:var(--sp-6) 0 8px;
}
.big-num b{
  font-size:clamp(72px,10vw,124px); font-weight:700; line-height:.9;
  letter-spacing:-.04em; font-variant-numeric:tabular-nums;
}
.big-num span{font-size:clamp(26px,3.4vw,38px); font-weight:700;}
.stock__cap{font-size:clamp(16px,1.7vw,20px); font-weight:700; color:rgba(255,255,255,.98);}
.stock__body{margin-top:var(--sp-6); font-size:var(--fs-lg); line-height:1.9; color:rgba(255,255,255,.94); max-width:34em;}
/* 徽标改为「说明在上、数字独占一行」的纵向块。
   原因：原来是 inline-flex 单行，说明文案长、数字又是 20px 大号，窄屏剩余宽度
   放不下完整文案，末字会被挤到第二行、孤零零挂在那里。
   与其让它被迫断在半个词上，不如主动分行，让数字整块落在自己那一行。 */
/* ★ 用户反馈：「数据徽标那块要跟下面三个模块一样大，不然看着很违和」。
   原为 inline-flex —— 只占内容宽（1440 下实测仅 256px），
   而左列实际有 585px、右列三个 .stock__item 是满宽 433px，
   于是左列缩成一小块、右边一排满宽卡片，两边都不齐，非常违和。
   改为块级撑满左列，与右侧三个模块同样「满宽卡片」；
   高度也按右侧模块（92px）对齐：上下内边距 20px + 内容撑高。 */
.stock__ask{
  margin-top:28px;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:4px;
  width:100%;
  /* 高度与右侧 .stock__item（92px）对齐：
     padding 20*2 + border 2 + 内容 50（说明行高 1.35≈20 + gap4 + 数字行高 1.0=26）≈ 92 */
  padding:20px 24px; border-radius:var(--r-md);
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
  font-size:var(--fs-md); line-height:1.35; color:rgba(255,255,255,.82);
  /* 与右侧 .stock__item 保持同一视觉语言 */
  backdrop-filter:blur(4px);
}
.stock__ask__t{white-space:nowrap;}
.stock__ask b{
  font-size:var(--fs-2xl); line-height:1.0; font-weight:700; letter-spacing:-.01em;
  color:#fff; font-variant-numeric:tabular-nums; white-space:nowrap;
}

.stock__list{display:flex; flex-direction:column; gap:var(--sp-4);}
.stock__item{
  display:flex; gap:16px; align-items:flex-start;
  padding:20px var(--sp-6); border-radius:var(--r-md);
  background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(4px);
}
.stock__item svg{width:22px; height:22px; flex:none; margin-top:var(--sp-1); color:#fff;}
.stock__item h4{font-size:var(--fs-lg); color:#fff;}
.stock__item p{margin-top:var(--sp-1); font-size:var(--fs-sm); color:rgba(255,255,255,.94); line-height:1.65;}
.stock__disc{margin-top:var(--sp-6); font-size:var(--fs-xs); color:rgba(255,255,255,.84); line-height:1.7;}

/* ---------- 房产 ---------- */

.estate-grid{
  display:grid; grid-template-columns:.94fr 1.06fr; gap:clamp(36px,5vw,72px);
  align-items:center;
}
.estate-figure{
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-lg);
  aspect-ratio:11/8.4; order:2;
}
.estate-figure img{width:100%; height:100%; object-fit:cover;}
.estate-list{display:flex; flex-direction:column; gap:var(--sp-6); margin-top:36px;}
.estate-item{display:flex; gap:16px; align-items:flex-start;}
.estate-item h3{font-size:var(--fs-xl); color:var(--ink);}
.estate-item p{margin-top:var(--sp-2); font-size:var(--fs-md); color:var(--ink-2); line-height:1.72;}
.estate-note{
  margin-top:36px; display:flex; gap:16px; align-items:flex-start;
  padding:var(--sp-6) 24px; background:var(--soft); border-radius:var(--r-md);
  border-left:4px solid var(--teal);
}
.estate-note p{font-size:var(--fs-md); color:var(--ink-2); line-height:1.8;}

/* ---------- 数字 ---------- */

.nums{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,2.6vw,34px);
  margin-top:clamp(40px,5vw,58px);
}
.num-item{
  padding:32px var(--sp-6) 28px; border-radius:var(--r-md);
  background:#fff; border:1px solid var(--line); box-shadow:var(--sh-sm);
  transition:transform .3s ease, box-shadow .3s ease;
}
.num-item:hover{transform:translateY(-5px); box-shadow:var(--sh-md);}
.num-item b{
  display:block; font-size:clamp(38px,4.6vw,56px); font-weight:700; line-height:1;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.num-item b small{font-size:.46em; font-weight:700; margin-left:var(--sp-1);}
.num-item .cap{margin-top:16px; font-size:var(--fs-md); color:var(--ink-2); line-height:1.7;}
.num-item--1 b{color:var(--orange);}
.num-item--2 b{color:var(--green);}
.num-item--3 b{color:var(--purple);}
.num-item--4 b{color:var(--coral);}

.nums__statement{
  margin-top:36px; display:flex; gap:var(--sp-5); align-items:flex-start;
  padding:24px 28px; border-radius:var(--r-md);
  background:rgba(0,176,160,.06); border-left:4px solid var(--teal);
}
.nums__statement p{font-size:var(--fs-lg); color:var(--ink-2); line-height:1.8;}
.nums__note{margin-top:16px; font-size:var(--fs-xs); color:var(--ink-3);}

/* ---------- 案例 ---------- */

.cases{display:flex; flex-direction:column; gap:var(--sp-5); margin-top:clamp(38px,4.5vw,54px);}
.case{
  display:grid; grid-template-columns:4px 1fr auto; gap:var(--sp-6); align-items:center;
  padding:var(--sp-6) var(--sp-7); background:#fff; border-radius:var(--r-md);
  border:1px solid var(--line); box-shadow:var(--sh-sm);
  transition:transform .3s ease, box-shadow .3s ease;
}
.case:hover{transform:translateY(-3px); box-shadow:var(--sh-md);}
.case__bar{width:4px; height:60px; border-radius:var(--r-xs); background:var(--teal);}
.case--alt .case__bar{background:var(--orange);}
.case__top{display:flex; flex-wrap:wrap; align-items:center; gap:12px;}
.case__tag{
  padding:var(--sp-1) var(--sp-3); border-radius:var(--r-xs); font-size:var(--fs-xs); font-weight:700;
  color:var(--deep); background:rgba(0,176,160,.13); white-space:nowrap;
}
.case--alt .case__tag{color:#A84A0A; background:rgba(248,112,24,.14);}
.case h3{font-size:var(--fs-xl); color:var(--ink);}
.case p{margin-top:var(--sp-2); font-size:var(--fs-md); color:var(--ink-2); line-height:1.72;}
.case__amount{text-align:right; min-width:132px;}
.case__amount b{
  display:block; font-size:clamp(28px,3.2vw,38px); font-weight:700; line-height:1;
  /* 对比度修正：原用 var(--teal) #00B0A0 配白底仅 2.72:1。
     38px/700 属大字号，门限 3:1 —— 差一点但不达标。改用 var(--deep) = 5.23:1。
     与下方「预约该方案」按钮同色系，案例区整体更收得住。 */
  color:var(--deep); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.case--alt .case__amount b{color:var(--orange);}
.case__amount span{display:block; margin-top:8px; font-size:var(--fs-xs); color:var(--ink-3);}

.cases__disc{margin-top:20px; font-size:var(--fs-xs); color:var(--ink-3); line-height:1.7;}

/* ---------- 承诺 ---------- */

.promise-grid{
  display:grid; grid-template-columns:1.62fr 1fr; gap:clamp(28px,3.4vw,44px);
  align-items:start; margin-top:clamp(38px,4.5vw,54px);
}
.promise-list{display:flex; flex-direction:column; gap:var(--sp-4);}
.promise{
  display:flex; gap:var(--sp-5); align-items:center;
  padding:20px 24px; border-radius:var(--r-md); background:#fff;
  border:1px solid var(--line);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.promise:hover{transform:translateX(5px); box-shadow:var(--sh-sm); border-color:rgba(0,176,160,.24);}
.promise h3{font-size:var(--fs-lg); color:var(--ink);}
.promise p{margin-top:var(--sp-1); font-size:var(--fs-sm); color:var(--ink-2); line-height:1.68;}

.promise-card{
  /* 与 .stock 同理：原渐变右端过亮，白字正文对比不足，压暗到深青绿区间 */
  background:linear-gradient(160deg,#00544C 0%,#00786C 100%);
  border-radius:var(--r-lg); padding:36px var(--sp-7); color:#fff;
  display:flex; flex-direction:column;
  box-shadow:var(--sh-lg);
}
/* align-self 必须显式声明：.promise-card 是 column 方向的 flex 容器，
   默认 align-items:stretch 会把 img 拉到满宽，从而覆盖 width:auto ——
   实测此时渲染成 360x50（自然比例要求 159x50），横向被拉伸 2.3 倍，LOGO 明显压扁。 */
.promise-card img{height:50px; width:auto; align-self:flex-start; margin-bottom:var(--sp-6);}
.promise-card h3{font-size:var(--fs-2xl); line-height:1.42; color:#fff;}
.promise-card__rule{width:52px; height:4px; background:rgba(255,255,255,.55); border-radius:var(--r-xs); margin:20px 0 var(--sp-6);}
.promise-card p{font-size:var(--fs-md); line-height:1.85; color:rgba(255,255,255,.90);}
.promise-card__tail{
  margin-top:auto; padding-top:var(--sp-6); border-top:1px solid rgba(255,255,255,.24);
  font-size:var(--fs-md); font-weight:700; color:#fff; line-height:1.65;
}

/* ---------- 团队 ---------- */

.team-grid{
  display:grid; grid-template-columns:1fr 1.04fr; gap:clamp(36px,5vw,72px);
  align-items:center;
}
.team-figure{
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-lg);
  aspect-ratio:11/9.9;
}
.team-figure img{width:100%; height:100%; object-fit:cover;}
.team-list{display:flex; flex-direction:column; gap:20px;}
.team-item{display:flex; gap:16px; align-items:flex-start;}
.team-item h3{font-size:var(--fs-xl); color:var(--ink);}
.team-item p{margin-top:var(--sp-2); font-size:var(--fs-md); color:var(--ink-2); line-height:1.7;}
.team-note{
  margin-top:var(--sp-7); display:flex; gap:16px; align-items:flex-start;
  padding:var(--sp-6) 24px; background:var(--soft); border-radius:var(--r-md);
  border-left:4px solid var(--teal);
}
.team-note p{font-size:var(--fs-md); color:var(--ink-2); line-height:1.8;}

/* ---------- 机构合作 ---------- */

.partner-grid{
  display:grid; grid-template-columns:1.7fr 1fr; gap:clamp(28px,3.4vw,44px);
  align-items:start; margin-top:clamp(38px,4.5vw,54px);
}
.partner-quote{
  font-size:clamp(19px,2.1vw,24px); font-weight:700; color:var(--deep); line-height:1.6;
  margin-bottom:28px; max-width:26em;
}
.partner-list{display:flex; flex-direction:column; gap:var(--sp-6);}
.partner-item{display:flex; gap:16px; align-items:flex-start;}
.partner-item h3{font-size:var(--fs-lg); color:var(--ink);}
.partner-item p{margin-top:var(--sp-2); font-size:var(--fs-md); color:var(--ink-2); line-height:1.72;}

.partner-card{
  background:linear-gradient(160deg,#00544C 0%,#00786C 100%);
  border-radius:var(--r-lg); padding:36px var(--sp-7); color:#fff;
  box-shadow:var(--sh-lg); display:flex; flex-direction:column;
}
.partner-card h3{font-size:var(--fs-2xl); line-height:1.42; color:#fff;}
.partner-card__rule{width:52px; height:4px; background:rgba(255,255,255,.55); border-radius:var(--r-xs); margin:20px 0 24px;}
.partner-card ul{display:flex; flex-direction:column; gap:16px;}
.partner-card li{font-size:var(--fs-md); line-height:1.75; color:rgba(255,255,255,.90);}
.partner-card li b{color:#fff;}
.partner-card__tail{
  margin-top:auto; padding-top:24px; border-top:1px solid rgba(255,255,255,.24);
  font-size:var(--fs-md); font-weight:700; color:#fff; line-height:1.7;
}

/* ---------- 页脚 ---------- */

.site-footer{background:var(--darkest); color:#fff; position:relative; overflow:hidden;}
.footer-cta{
  position:relative;
  padding:clamp(72px,8.5vw,108px) 0;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.footer-cta__bg{position:absolute; inset:0;}
.footer-cta__bg img{width:100%; height:100%; object-fit:cover;}
.footer-cta__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,58,52,.90) 0%,rgba(0,58,52,.80) 100%);
}
.footer-cta .wrap{position:relative; z-index:2; text-align:center;}
.footer-cta h2{
  font-size:clamp(26px,3.6vw,44px); color:#fff; line-height:1.32; letter-spacing:-.01em;
}
.footer-cta p{margin-top:var(--sp-5); font-size:clamp(15px,1.5vw,17px); color:rgba(255,255,255,.82);}
.footer-cta__rule{width:72px; height:4px; background:var(--teal); border-radius:var(--r-xs); margin:var(--sp-6) auto 0;}
.footer-cta__actions{
  display:flex; flex-wrap:wrap; gap:var(--sp-4); justify-content:center; margin-top:36px;
}

/* ---------- 联系方式（页脚内的真实对接区） ---------- */

.contact-band{
  padding:clamp(56px,6.5vw,84px) 0;
  border-bottom:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.14);
}
.contact-band__head{text-align:center; margin-bottom:clamp(32px,4vw,46px);}
.contact-band__head h3{
  font-size:clamp(21px,2.5vw,30px); color:#fff; letter-spacing:-.01em;
}
.contact-band__head p{
  margin-top:var(--sp-4); font-size:var(--fs-md); color:rgba(255,255,255,.70); line-height:1.75;
}

.contact-band__grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.2vw,26px);
}
/* 三列在 641~1024px 之间会把每张卡压到 176~255px 内宽：
   二维码卡需要 148+12+66 = 226px，768px 下实测「扫码加顾问」的「问」被卡片右边缘裁掉。
   三列的安全线经算式约为 925px（卡内宽 >= 226px），取 1025 留出中文字体
   在不同机型 ±3% 的 advance 差异冗余。该区间改双列，每张卡拿回 347px 以上。 */
@media (max-width:1024px){
  .contact-band__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
/* 去掉二维码卡后只剩两张卡：三列会让卡片被拉窄、文案反复折行，
   改两列让每张卡拿回完整宽度，阅读节奏与页面其它区块一致。 */
/* 三卡布局：二维码卡回归后恢复三列。
   注意 .contact-card 是 flex 行方向（二维码卡除外，它需要改成列方向），
   二维码宽度必须写死，否则 flex 收缩会把图压变形。 */
.contact-band__grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.contact-band__grid--2 .contact-card{padding:var(--sp-7) var(--sp-7) 28px;}

/* 二维码卡：图在左上、标签在右，整体置于文案之上。
   图宽度写死 + flex-shrink:0，否则 flex 收缩会把二维码压变形。
   flex-wrap:wrap 是防裁保险：容器放不下标签时（平板三列档实测内宽仅 175px），
   标签自动落到二维码下方，任何宽度下都不会被卡片边缘切掉。 */
.contact-card__qr{
  flex:0 0 auto; align-self:flex-start;
  display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:12px;
  margin-bottom:var(--sp-4);
}
.contact-card__qr img{
  /* 180px（2026-09-30 由 148px 放大）：本体 = 180 × 37/45 ≈ 148px，
     落在「本体 >=135px → 扰动解码通过率 97%」区间内；旧值 148px 盒只有
     122px 本体、通过率 84%，可扫但不宽裕。资源图每边已烘焙 4 模块静默区，
     故此处不再给 padding，白底即是静默区。 */
  display:block; width:180px; height:180px; flex-shrink:0;
  border-radius:var(--r-sm); background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.22);
}
.contact-card__qr span{
  font-size:var(--fs-xs); color:rgba(255,255,255,.66); letter-spacing:.02em; white-space:nowrap;
}
/* 二维码卡：全宽度统一「图在上、文案在下」。
   原桌面端是左右并排，二维码只能给到 104px（本体 82px，扫码实测通过率 6~16%），
   且文案列被挤到 190px、折行碎成一片。改上下结构后二维码可放到 148px
   （本体 122px，通过率 84%），文案同时拿回整行 314px。 */
.contact-card--qr{flex-direction:column; align-items:stretch; gap:0;}
.contact-card--qr .contact-card__body{width:100%;}
.contact-card{
  display:flex; gap:20px; align-items:flex-start;
  padding:var(--sp-6) var(--sp-6) 24px; border-radius:var(--r-md);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.13);
  transition:background .28s ease, border-color .28s ease, transform .28s ease;
}
.contact-card:hover{
  background:rgba(255,255,255,.11);
  border-color:rgba(0,176,160,.42);
  transform:translateY(-3px);
}
/* 二维码卡已下线（原先放的是扫不出来的占位图），对应样式一并移除，
   避免留下无人使用的死代码。 */
.contact-card__body{flex:1; min-width:0;}
.contact-card__body h4{
  font-size:var(--fs-lg); color:#fff; margin-bottom:var(--sp-3);
}
.contact-card__body p{
  font-size:var(--fs-sm); line-height:1.78; color:rgba(255,255,255,.72);
}
.contact-card__hint{color:rgba(255,255,255,.72);}
.contact-card__hint--tail{
  margin-top:var(--sp-4); padding-top:12px;
  border-top:1px dashed rgba(255,255,255,.14);
  font-size:var(--fs-xs); color:rgba(255,255,255,.62);
}
.contact-card__ways{margin-top:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-2);}
.contact-card__ways .way{
  display:block; font-size:var(--fs-sm); color:rgba(255,255,255,.66);
}
.contact-card__ways .way b{
  display:inline-block; min-width:62px; margin-right:var(--sp-2);
  /* 对比度修正：原用 var(--teal) #00B0A0。该卡片底为 rgba(255,255,255,.07) 叠在
     深色区 --deep #007A6F 上（合成 rgb(18,64,58)），13.5px 正文需 4.5:1，
     实测仅 4.23:1。改用 #7FE0D2（深色区已有的浅青绿，页脚/深色段一直在用）：达 6.9:1。 */
  color:#7FE0D2; font-weight:700;
}

/* 三项一排：用户要求「三个做成一排就 ok」，不再逐条列举 */
.contact-accounts{
  margin-top:16px;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;
}
.contact-accounts li{
  display:flex; align-items:center; justify-content:center;
  padding:var(--sp-3) var(--sp-2); border-radius:var(--r-sm);
  /* ★ 对比修正：背景/边框透明度偏低（.10/.16），而 --r-sm 只有 10px，
     窄屏每格仅 100px 宽，实机看像「三行裸文字」而不是胶囊，比上一版还弱。
     改为实心底 + 更圆的轮廓，让「一排三个公众号」在视觉上成立。 */
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.24);
  border-radius:var(--r-full);
  font-size:var(--fs-sm); text-align:center; line-height:1.3;
}
.contact-accounts li b{color:#fff; font-weight:700; white-space:nowrap;}

.contact-band__note{
  margin-top:clamp(24px,3vw,34px); text-align:center;
  font-size:var(--fs-xs); line-height:1.75; color:rgba(255,255,255,.50);
}

.footer-main{padding:clamp(52px,6vw,72px) 0 0;}
.footer-cols{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1.1fr; gap:clamp(24px,3.4vw,48px);
}
.footer-brand img{height:44px; width:auto; margin-bottom:20px;}
.footer-brand p{font-size:var(--fs-sm); color:rgba(255,255,255,.62); line-height:1.8; max-width:24em;}
/* 页脚栏目标题：业务体系 / 公司信息 / 咨询对接（以及栏内的咨询时段、服务区域、响应时效）
   原为固定 13px + uppercase —— 中文字没有大小写概念，uppercase 只对混排的英文有影响，
   字号才是关键：13px 在深色页脚里几乎看不清，作为栏目标题完全没有「门牌」作用。
   与正文区块眉标 .kicker（20~25px）保持同一视觉体系，但略小一档以区分层级。 */
.footer-col h4{
  font-size:clamp(17px,1.3vw,19px); letter-spacing:.06em;
  color:var(--teal); margin-bottom:var(--sp-5); font-weight:800; line-height:1.4;
}
.footer-col li{font-size:var(--fs-md); color:rgba(255,255,255,.76); line-height:1.8; margin-bottom:var(--sp-2);}
/* 页脚链接命中区：a 默认是 inline，高度只有字形高（实测 19px），远低于 44px 触控下限。
   手机上点「资金方案 · 五款产品」这种长文案，手指必须精确落在字上才生效，
   稍偏一点就点空。改成 inline-block + 上下各 12px padding 把命中区撑到 44px 左右；
   同时用负 margin 抵消多出来的纵向空间，保持原有行间距与栏高不变。 */
.footer-col li a{
  display:inline-block; padding:12px 0; margin:-12px 0;
  transition:color .22s ease;
}
.footer-col li a:hover{color:var(--teal);}
.footer-col .em{color:#fff; font-weight:700;}

/* ---------- 页脚办公地址分栏 ---------- */
/* 与上方公司信息用一条细分隔线断开，避免两类信息混在一列里看不清。 */
.footer-col__addr{
  margin-top:var(--sp-5); padding-top:var(--sp-5);
  border-top:1px solid rgba(255,255,255,.12);
}
.footer-col__addr li{margin-bottom:var(--sp-4);}
.footer-col__addr li:last-child{margin-bottom:0;}
/* 自购物业标记：与正文区分开，用比地址标签更亮的 #7FE0D2（深底 8.2:1，12.5px 小字也稳过 4.5:1）。 */
.footer-col__addr .addr__own{
  display:inline-block; margin-left:8px; padding:1px 7px;
  border:1px solid rgba(127,224,210,.45); border-radius:var(--r-full);
  font-size:var(--fs-2xs); font-weight:700; letter-spacing:.04em;
  color:#7FE0D2; vertical-align:1px;
}
.footer-col__addr b{
  display:block; color:var(--teal); font-weight:700;
  font-size:var(--fs-sm); letter-spacing:.04em; margin-bottom:2px;
}

.footer-bottom{
  margin-top:clamp(44px,5vw,60px); padding:var(--sp-6) 0 var(--sp-7);
  border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; gap:12px 28px;
  align-items:center; justify-content:space-between;
}
.footer-bottom p{font-size:var(--fs-xs); color:rgba(255,255,255,.72); line-height:1.7;}

/* ---------- 页脚 ICP 备案号（法定要求：首页底部展示并链接备案系统） ---------- */
.footer-icp{display:inline-block; margin-left:2px;}
.footer-icp a{
  color:rgba(255,255,255,.8); text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.28);
  transition:color .2s ease, border-color .2s ease;
}
.footer-icp a:hover{color:#7FE0D2; border-bottom-color:rgba(127,224,210,.55);}
.footer-icp a:focus-visible{outline:2px solid #7FE0D2; outline-offset:2px;}
.footer-slogan{
  display:flex; align-items:center; gap:12px;
  font-size:var(--fs-lg); font-weight:700; color:#fff; letter-spacing:.06em;
}
.footer-slogan img{height:34px; width:auto;}

/* ---------- 滚动入场动画 ---------- */

.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
.reveal.is-in{opacity:1; transform:none;}
.reveal[data-d="1"]{transition-delay:.08s;}
.reveal[data-d="2"]{transition-delay:.16s;}
.reveal[data-d="3"]{transition-delay:.24s;}
.reveal[data-d="4"]{transition-delay:.32s;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1; transform:none; transition:none;}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

/* ============================================================
   业务页改造新增：路由 / 流程 / 人群边界 / 风险提示 / 表单 / FAQ
   ============================================================ */

/* ---------- 业务路由切换（C 端 / B 端解耦） ---------- */

.bizroute{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-4); max-width:660px; margin:0 auto clamp(38px,4.5vw,54px);
}
.bizroute__tab{
  display:flex; flex-direction:column; gap:var(--sp-1);
  padding:var(--sp-5) 24px; border-radius:var(--r-md);
  background:var(--soft); border:1.5px solid transparent;
  transition:background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.bizroute__tab:hover{transform:translateY(-2px); box-shadow:var(--sh-sm);}
.bizroute__k{font-size:var(--fs-lg); font-weight:700; color:var(--ink);}
.bizroute__s{font-size:var(--fs-xs); color:var(--ink-3);}
.bizroute__tab[aria-selected="true"]{
  background:#fff; border-color:var(--teal);
  box-shadow:0 8px 24px rgba(0,176,160,.16);
}
.bizroute__tab[aria-selected="true"] .bizroute__k{color:var(--deep);}
/* 对比度修正：原用 var(--teal) #00B0A0 配白底仅 2.72:1（13px 正文需 4.5:1）。
   深色模式早已改用 #7FE0D2，浅色模式漏了。改用 var(--deep) #007A6F = 5.23:1。
   与上面 .bizroute__k 选中态同色，视觉上「标题+副标题同属选中色系」也更统一。 */
.bizroute__tab[aria-selected="true"] .bizroute__s{color:var(--deep);}

.bizpanel[hidden]{display:none;}
.bizanchor{scroll-margin-top:calc(var(--nav-h) + 20px);}

/* ---------- 服务流程（七步） ---------- */

.flow{
  margin-top:clamp(46px,5.5vw,68px);
  padding:clamp(30px,3.6vw,44px) clamp(24px,3vw,40px);
  border-radius:var(--r-lg);
  background:var(--soft);
  border:1px solid var(--line);
}
.flow__head{text-align:center; margin-bottom:clamp(30px,3.6vw,44px);}
.flow__title{font-size:clamp(21px,2.5vw,29px); color:var(--deep);}
.flow__lead{
  margin:16px auto 0; max-width:620px;
  font-size:var(--fs-md); color:var(--ink-2); line-height:1.8;
}

.flow__steps{
  display:grid; grid-template-columns:repeat(7,minmax(0,1fr));
  gap:0; position:relative;
}
.flowstep{
  position:relative; padding:0 var(--sp-3); text-align:center;
}
/* 连接线：穿过圆点中心 */
.flowstep::before{
  content:""; position:absolute; top:17px; left:0; right:0; height:2px;
  background:rgba(0,176,160,.22);
}
.flowstep:first-child::before{left:50%;}
.flowstep:last-child::before{right:50%;}
.flowstep__no{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; margin:0 auto 16px;
  border-radius:50%; background:#fff; border:2px solid rgba(0,176,160,.42);
  font-size:var(--fs-xs); font-weight:700; color:var(--deep);
  font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 6px var(--soft);
  transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.flowstep:hover .flowstep__no{background:var(--deep); border-color:var(--deep); color:#fff;}
.flowstep h4{font-size:var(--fs-md); color:var(--ink);}
/* 用 ink-2 而非 ink-3：12.8px 小字在浅底上 ink-3 仅 2.86:1，不达 AA 4.5:1 */
.flowstep p{margin-top:var(--sp-2); font-size:var(--fs-xs); color:var(--ink-2); line-height:1.6;}

.flow__note{
  margin-top:clamp(28px,3.4vw,40px); padding-top:var(--sp-6);
  border-top:1px dashed var(--line);
  text-align:center; font-size:var(--fs-sm); color:var(--ink-2); line-height:1.8;
}
.flow__note strong{color:var(--deep);}

/* ---------- 风险提示（就近免责） ---------- */

.riskline{
  margin-top:var(--sp-6); padding:var(--sp-5) var(--sp-6); border-radius:var(--r-md);
  font-size:var(--fs-sm); line-height:1.8;
  background:rgba(248,112,24,.07);
  border-left:3px solid rgba(248,112,24,.55);
  color:var(--ink-2);
}
.riskline b{color:#A84A0A;}
.riskline strong{color:var(--ink);}
.riskline--soft{background:var(--soft); border-left-color:rgba(0,176,160,.5);}
.riskline--soft b{color:var(--deep);}
.riskline--dark{
  background:rgba(255,255,255,.09);
  border-left-color:rgba(255,255,255,.5);
  color:rgba(255,255,255,.90); margin-top:var(--sp-5);
}
.riskline--dark b{color:#fff;}
.riskline--dark strong{color:#fff;}

.riskline--warn ul{margin-top:var(--sp-3); display:flex; flex-direction:column; gap:8px;}
.riskline--warn li{
  position:relative; padding-left:16px; font-size:var(--fs-sm); line-height:1.72;
}
.riskline--warn li::before{
  content:""; position:absolute; left:0; top:9px;
  width:6px; height:6px; border-radius:50%; background:rgba(248,112,24,.7);
}
.riskline--warn li strong{color:#A84A0A;}

/* ---------- 卡片内：人群边界 / 案例锚点 / 预约按钮 ---------- */

/* 只剩「适用人群」一列（「不适用人群」已按用户要求删除） */
.pcard__fit{
  margin-top:var(--sp-5); padding-top:16px; border-top:1px dashed var(--line);
  display:grid; grid-template-columns:1fr; gap:var(--sp-4);
}
.pcard--wide .pcard__fit{grid-template-columns:1fr;}
.pcard__fit-t{
  display:inline-block; margin-bottom:var(--sp-2);
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.04em;
}
.pcard__fit-col--yes .pcard__fit-t{color:var(--deep);}
.pcard__fit-col--no .pcard__fit-t{color:#A84A0A;}
.pcard__fit-col ul{display:flex; flex-direction:column; gap:var(--sp-2);}
.pcard__fit-col li{
  position:relative; padding-left:var(--sp-4);
  font-size:var(--fs-xs); line-height:1.65; color:var(--ink-2);
}
.pcard__fit-col li::before{
  content:""; position:absolute; left:0; top:8px;
  width:5px; height:5px; border-radius:50%;
}
.pcard__fit-col--yes li::before{background:rgba(0,176,160,.6);}
.pcard__fit-col--no li::before{background:rgba(248,112,24,.6);}

.pcard__fit--compact{margin-top:var(--sp-4); padding-top:var(--sp-4); gap:var(--sp-4);}
.pcard__fit--compact .pcard__fit-t{margin-bottom:var(--sp-2);}
.pcard__fit--compact li{font-size:var(--fs-xs); line-height:1.6;}

.pcard__foot{
  margin-top:auto; padding-top:var(--sp-5);
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
}
/* 「看同类案例」去掉下划线（用户反馈卡片下方那条横杠很碍眼）。
   命中区仍保持 44px：靠 padding 撑开、负 margin 抵消，不影响排版高度。 */
.pcard__link{
  font-size:var(--fs-xs); font-weight:700; color:var(--deep);
  display:inline-block; padding:var(--sp-3) var(--sp-1); margin:-12px -4px;
  border-bottom:0;
  transition:color .22s ease;
}
.pcard__link:hover{color:var(--teal);}
.pcard__cta{padding:var(--sp-4) 20px; font-size:var(--fs-sm);}
/* 次级按钮同样补到 44px：36px 的按钮在手机上偏小，点按容易落空 */
.btn--sm{padding:var(--sp-4) 20px; font-size:var(--fs-sm);}

/* 卡片整体可点反馈（P2-3） */
.pcard:focus-within{transform:translateY(-4px); box-shadow:var(--sh-md); border-color:rgba(0,176,160,.3);}

/* ---------- 案例锚点高亮（从业务卡跳转过来时） ---------- */
.case:target{
  border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(0,176,160,.18), var(--sh-md);
}

/* ---------- 房产：案例跳转行 ---------- */
.estate-more{margin-top:16px; font-size:var(--fs-sm); color:var(--ink-2); line-height:1.75;}
.estate-more a{color:var(--deep); font-weight:700; border-bottom:1.5px solid rgba(0,122,111,.3);}
.estate-more a:hover{color:var(--teal); border-color:var(--teal);}

/* ---------- FAQ ---------- */

.faq{
  margin-top:clamp(34px,4vw,48px);
  display:flex; flex-direction:column; gap:12px;
  max-width:900px; margin-left:auto; margin-right:auto;
}
.faq__item{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--sh-sm); overflow:hidden;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.faq__item[open]{border-color:rgba(0,176,160,.32); box-shadow:var(--sh-md);}
.faq__item summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5);
  padding:20px 24px; cursor:pointer; list-style:none;
}
.faq__item summary::-webkit-details-marker{display:none;}
.faq__q{font-size:var(--fs-lg); font-weight:700; color:var(--ink); line-height:1.6;}
.faq__icon{
  position:relative; flex:none; width:18px; height:18px;
}
.faq__icon::before,
.faq__icon::after{
  content:""; position:absolute; left:0; top:8px;
  width:18px; height:2px; border-radius:var(--r-xs); background:var(--teal);
  transition:transform .28s ease, opacity .28s ease;
}
.faq__icon::after{transform:rotate(90deg);}
.faq__item[open] .faq__icon::after{transform:rotate(0deg); opacity:0;}
.faq__a{padding:0 24px var(--sp-6);}
.faq__a p{font-size:var(--fs-md); color:var(--ink-2); line-height:1.82;}
.faq__a p + p{margin-top:12px;}
.faq__a b{color:var(--deep);}
.faq__a strong{color:var(--ink);}
.faq__disc{margin-top:12px !important; font-size:var(--fs-xs) !important; color:var(--ink-2) !important;}

.faq__tail{
  margin-top:clamp(26px,3vw,36px); text-align:center;
  font-size:var(--fs-md); color:var(--ink-2);
}
.faq__tail a{color:var(--deep); font-weight:700; border-bottom:1.5px solid rgba(0,122,111,.3);}
.faq__tail a:hover{color:var(--teal); border-color:var(--teal);}

/* ---------- 预约表单 ---------- */

.booking{
  padding:clamp(56px,6.5vw,84px) 0;
  border-bottom:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.10);
}
.booking__grid{
  display:grid; grid-template-columns:1fr 1.15fr;
  gap:clamp(30px,4vw,56px); align-items:start;
}
.booking__intro .kicker{color:rgba(255,255,255,.90);}

.booking__title{font-size:clamp(21px,2.5vw,29px); color:#fff; line-height:1.42;}
.booking__points{margin-top:var(--sp-6); display:flex; flex-direction:column; gap:12px;}
.booking__points li{
  position:relative; padding-left:var(--sp-6);
  font-size:var(--fs-md); color:rgba(255,255,255,.80); line-height:1.75;
}
.booking__points li::before{
  content:""; position:absolute; left:0; top:9px;
  width:9px; height:9px; border-radius:50%;
  border:2px solid var(--teal); box-sizing:border-box;
}
.booking__points b{color:#fff;}

.fee{
  margin-top:var(--sp-7); padding:24px var(--sp-6); border-radius:var(--r-md);
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
}
/* 收费说明标题：原 15px，在周围标题都提到 17~25px 后明显脱节、看着像正文。
   提到 18px 与页脚栏目标题同档，保持「块内小标题」的一致层级。 */
.fee__title{
  font-size:clamp(18px,1.4vw,20px); color:#fff; letter-spacing:.02em; font-weight:800;
  padding-bottom:var(--sp-4); margin-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,.16);
}
.fee__list{display:flex; flex-direction:column; gap:var(--sp-4);}
/* 圆点悬挂：padding-left 给圆点让位，折行后第二行自然与首行文字左缘对齐。
   ⚠️ 曾用 padding-left + margin-left + text-indent:-17px 三件套做「齐头」，
   结果 text-indent 把首行拉回圆点左缘，与 6px 圆点完全重叠（实测 boldLeftRel=0）。
   统一改用 .booking__points li 那套干净写法：只留 padding-left。 */
.fee__list li{
  position:relative; padding-left:var(--sp-5); padding-right:0;
  font-size:var(--fs-sm); color:rgba(255,255,255,.80); line-height:1.78;
}
.fee__list li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:6px; height:6px; border-radius:50%; background:rgba(46,211,192,.78);
}
.fee__list b{color:#fff;}

/* 表单本体：浅底卡片，落在深色页脚内 */
.leadform{
  background:#fff; border-radius:var(--r-lg);
  padding:clamp(24px,3vw,34px); box-shadow:var(--sh-lg);
}
.leadform__grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-5);
}
.leadform__field{display:flex; flex-direction:column; gap:8px;}
.leadform__field--full{grid-column:span 2;}
.leadform__label{font-size:var(--fs-sm); font-weight:700; color:var(--ink);}
.leadform__label i{color:var(--coral); font-style:normal; margin-left:var(--sp-1);}
.leadform__field input,
.leadform__field select,
.leadform__field textarea{
  width:100%; padding:var(--sp-4) var(--sp-4);
  /* 字号 16px 是硬线：iOS Safari 只要聚焦到 font-size < 16px 的输入框，
     就会把整个页面自动放大（不是只放大输入框），用户点一下表单页面就"弹"一下，
     还得手动双指缩回来 —— 这站的主要转化入口就是这张表单，必须避开。
     14.5px → 16px 后输入区仍是一行，视觉几乎无变化。 */
  font-family:inherit; font-size:var(--fs-lg); color:var(--ink);
  background:var(--soft); border:1.5px solid transparent; border-radius:var(--r-sm);
  transition:border-color .22s ease, background .22s ease, box-shadow .22s ease;
}
.leadform__field textarea{resize:vertical; line-height:1.7;}
.leadform__field select{appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
.leadform__field input:focus,
.leadform__field select:focus,
.leadform__field textarea:focus{
  outline:none; background:#fff; border-color:var(--teal);
  box-shadow:0 0 0 4px rgba(0,176,160,.14);
}
.leadform__field input::placeholder,
.leadform__field textarea::placeholder{color:var(--ink-3);}

.leadform__foot{margin-top:24px;}
.leadform__foot .btn{width:100%;}
.leadform__note{
  margin-top:var(--sp-4); font-size:var(--fs-xs); color:var(--ink-2); line-height:1.7; text-align:center;
}
.leadform__status{
  margin-top:var(--sp-4); font-size:var(--fs-sm); line-height:1.7; text-align:center;
}
.leadform__status.is-ok{color:var(--deep); font-weight:700;}
.leadform__status.is-err{color:#C0304C; font-weight:700;}

/* 字段级错误提示 */
.leadform__field.has-err input,
.leadform__field.has-err select{border-color:#E4687F; background:rgba(240,56,88,.05);}
.leadform__err{font-size:var(--fs-xs); color:#C0304C; line-height:1.6;}

/* 提交失败兜底区：把用户填的内容还给他，可一键复制后自行发送。
   线索宁可让用户多一步手动发，也不能静默丢失 —— 这是表单最该守住的一条底线。 */
.leadform__fallback{
  margin-top:16px; padding:16px var(--sp-5); border-radius:var(--r-sm);
  background:rgba(240,56,88,.045); border:1px solid rgba(240,56,88,.22);
}
.leadform__fallback__tip{
  font-size:var(--fs-xs); color:var(--ink-2); line-height:1.7; margin-bottom:var(--sp-3);
}
.leadform__fallback__text{
  width:100%; font-family:inherit; font-size:var(--fs-sm); line-height:1.7;
  color:var(--ink); background:#fff; border:1px solid var(--line);
  border-radius:8px; padding:var(--sp-3) 12px; resize:vertical;
}
.leadform__fallback__acts{margin-top:var(--sp-3); display:flex; gap:var(--sp-3);}
/* 兜底区专用按钮：兜底区在浅色卡片里，必须用深字浅底才看得见
   （.btn--ghost 是深色区块用的白字方案，在这里会白字白底） */
.leadform__fallback__btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:12px var(--sp-6); border-radius:var(--r-full);
  font-family:inherit; font-size:var(--fs-sm); font-weight:700; line-height:1;
  color:#fff; background:var(--deep);
  border:1.5px solid var(--deep); cursor:pointer;
  transition:background .22s ease, border-color .22s ease, transform .22s ease;
}
.leadform__fallback__btn:hover{background:var(--deep); border-color:var(--deep); transform:translateY(-2px);}
.leadform__fallback__btn:focus-visible{outline:2px solid var(--deep); outline-offset:3px;}

/* ---------- 提交成功弹窗（线索表单） ----------
   用户反馈：提交完只在表单底部出现一行小字，视线在按钮上根本注意不到，
   访客不确定到底提交上没有。改为**居中弹窗 + 遮罩**：
   明确告知「已收到」，并给出下一步预期（谁、多久联系）。
   结构由 main.js 动态创建（零依赖、只创建一次复用），这里负责样式。
   z-index:300 —— 高于 skip-link(200)，确保任何情况下都在最上层。 */
.leadok{
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center;
  padding:var(--sp-6);
}
.leadok[hidden]{display:none;}
/* 弹窗打开时锁住背景滚动，避免「滑动弹窗、背景跟着跑」 */
html.is-leadok-lock, html.is-leadok-lock body{overflow:hidden;}
.leadok__mask{
  position:absolute; inset:0;
  background:rgba(0,58,50,.58);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  animation:leadokMask .22s ease both;
}
.leadok__card{
  position:relative; width:100%; max-width:400px;
  background:#fff; border-radius:var(--r-lg);
  padding:clamp(28px,4vw,38px) clamp(22px,3.4vw,32px) clamp(24px,3vw,30px);
  box-shadow:0 24px 64px rgba(0,58,52,.30);
  text-align:center;
  animation:leadokCard .28s cubic-bezier(.22,.9,.3,1.15) both;
  /* 横屏手机等极矮视口：卡片自身可滚，绝不裁掉按钮 */
  max-height:calc(100vh - 48px);
  max-height:calc(100dvh - 48px);
  overflow-y:auto;
}
.leadok__icon{
  width:64px; height:64px; border-radius:50%;
  margin:0 auto var(--sp-5);
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,176,160,.13); color:var(--deep);
}
.leadok__icon svg{width:34px; height:34px; display:block;}
.leadok__title{
  font-size:var(--fs-2xl); color:var(--darkest);
  margin-bottom:var(--sp-3); letter-spacing:.01em;
}
.leadok__desc{font-size:var(--fs-lg); color:var(--ink); line-height:1.7;}
.leadok__sub{
  margin-top:var(--sp-3); font-size:var(--fs-sm); color:var(--ink-2); line-height:1.7;
}
.leadok__act{margin-top:var(--sp-6);}
.leadok__act .btn{width:100%; min-height:48px;}

@keyframes leadokMask{from{opacity:0;} to{opacity:1;}}
@keyframes leadokCard{
  from{opacity:0; transform:translateY(16px) scale(.96);}
  to{opacity:1; transform:none;}
}
@media (prefers-reduced-motion:reduce){
  .leadok__mask, .leadok__card{animation:none;}
}

/* ---------- B 端：准入 / 产出 / 商务表单 ---------- */

.bizblock{
  margin-top:clamp(38px,4.5vw,54px); padding-top:clamp(30px,3.6vw,42px);
  border-top:1px solid var(--line);
}
.bizblock__title{font-size:clamp(19px,2.2vw,25px); color:var(--deep);}
.bizblock__lead{
  margin-top:var(--sp-4); max-width:760px;
  font-size:var(--fs-md); color:var(--ink-2); line-height:1.85;
}
.bizlist{margin-top:24px; display:flex; flex-direction:column; gap:var(--sp-4); max-width:860px;}
.bizlist li{
  position:relative; padding-left:var(--sp-6);
  font-size:var(--fs-md); color:var(--ink-2); line-height:1.8;
}
.bizlist li::before{
  content:""; position:absolute; left:0; top:9px;
  width:14px; height:8px; border-left:2px solid var(--teal); border-bottom:2px solid var(--teal);
  transform:rotate(-45deg); border-radius:1px;
}
.bizlist li b{color:var(--deep);}
/* 准入条件：用实心标记与产出的对勾区分层级 */
.bizlist--check li::before{
  border-color:rgba(0,176,160,.85);
  top:10px;
}
.bizlist--check li{color:var(--ink);}

.bizblock--form{margin-top:clamp(42px,5vw,60px);}
.bizblock--form .leadform{margin-top:var(--sp-6); max-width:860px; box-shadow:var(--sh-md);}
.bizblock--form .leadform__field input,
.bizblock--form .leadform__field select,
.bizblock--form .leadform__field textarea{background:var(--soft);}
/* ---------- 悬浮页面目录（P2-1） ---------- */

.toc{
  position:fixed; right:24px; top:50%; transform:translateY(-50%); z-index:88;
  display:flex; flex-direction:column; gap:4px;
  padding:var(--sp-4) 12px; border-radius:var(--r-full);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:var(--sh-md); border:1px solid var(--line);
  opacity:0; visibility:hidden;
  transition:opacity .35s ease, visibility .35s ease;
}
.toc.is-on{opacity:1; visibility:visible;}
/* 命中区 40×40：原来 30×30 既显小、又低于 44px 触控下限，鼠标也难瞄准 */
.toc__link{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
}
.toc__dot{
  width:9px; height:9px; border-radius:50%;
  background:rgba(42,59,56,.24);
  transition:background .24s ease, transform .24s ease;
}
.toc__link:hover .toc__dot{background:var(--teal); transform:scale(1.45);}
.toc__link.is-active .toc__dot{background:var(--teal); transform:scale(1.55);}
.toc__label{
  position:absolute; right:calc(100% + 12px); top:50%; transform:translateY(-50%);
  padding:8px var(--sp-4); border-radius:8px; white-space:nowrap;
  background:var(--darkest); color:#fff; font-size:var(--fs-sm); font-weight:700;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s ease, visibility .22s ease, transform .22s ease;
}
.toc__link:hover .toc__label,
.toc__link:focus-visible .toc__label{opacity:1; visibility:visible; transform:translateY(-50%) translateX(-3px);}

/* ---------- 移动端全局悬浮咨询按钮（P2-4） ---------- */

.floatcta{
  position:fixed; z-index:92; display:none;
  left:16px; right:16px; bottom:16px;
  align-items:center; justify-content:center; gap:var(--sp-2);
  padding:var(--sp-4) 24px; border-radius:var(--r-full);
  background:var(--deep); color:#fff;
  font-size:var(--fs-md); font-weight:700;
  box-shadow:0 10px 30px rgba(0,176,160,.40);
  transition:transform .24s ease, box-shadow .24s ease, opacity .3s ease, visibility .3s ease;
}
.floatcta:hover{transform:translateY(-2px); box-shadow:0 14px 36px rgba(0,176,160,.48);}
.floatcta svg{width:18px; height:18px; flex:none;}
.floatcta.is-on{display:flex;}

/* ---------- 返回顶部 ---------- */

.to-top{
  position:fixed; right:24px; bottom:24px; z-index:90;
  width:46px; height:46px; border-radius:50%;
  background:#fff; color:var(--deep);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--sh-md); border:1px solid var(--line);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s ease;
}
.to-top.is-on{opacity:1; visibility:visible; transform:none;}
.to-top:hover{background:var(--deep); color:#fff; border-color:var(--deep);}
.to-top svg{width:20px; height:20px;}

/* ============================================================
   响应式
   ============================================================ */

@media (max-width:1080px){
  /* 平板：五款产品排成 3+2 */
  .products{grid-template-columns:repeat(3,minmax(0,1fr));}
  .nums{grid-template-columns:repeat(2,minmax(0,1fr));}
  .footer-cols{grid-template-columns:1.4fr 1fr 1fr; }
  .footer-cols .footer-col:last-child{grid-column:span 3;}
}

@media (max-width:900px){
  /* 平板竖屏：5 列每列约 130px，中文放不下，降到 2 列 */
  .products{grid-template-columns:repeat(2,minmax(0,1fr));}

  .nav{
    position:fixed; inset:var(--nav-h) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:4px;
    background:rgba(255,255,255,.985);
    backdrop-filter:blur(16px);
    padding:var(--sp-5) 20px var(--sp-6);
    box-shadow:0 12px 30px rgba(0,58,52,.12);
    transform:translateY(-12px); opacity:0; visibility:hidden;
    transition:transform .3s ease, opacity .3s ease, visibility .3s ease;
  }
  .nav.is-open{transform:none; opacity:1; visibility:visible;}
  .nav a{color:var(--ink-2); padding:var(--sp-4) 16px; border-radius:var(--r-sm); font-size:var(--fs-lg);}
  .nav a:hover,.nav a.is-active{color:var(--deep); background:rgba(0,176,160,.10);}
  /* 窄屏：菜单里给出方案入口（宽屏的右上角按钮此时被隐藏） */
  .nav__cta{
    display:block; margin-top:var(--sp-3); text-align:center;
    background:var(--deep); color:#fff !important; font-weight:700;
    box-shadow:0 8px 20px rgba(0,122,111,.26);
  }
  .nav__cta:hover{background:var(--teal-d) !important; color:#fff !important;}
  .nav-toggle{display:flex;}
  .site-header__cta{display:none;}

  .about-grid,.why-grid,.estate-grid,.team-grid,
  .stock .wrap,.promise-grid,.partner-grid{grid-template-columns:1fr;}
  /* 单列堆叠后原 gap 变成「数据徽标卡」与右侧三模块之间的行间距，
     36px 在手机上把本应同属一组的四块拆开，看着像两段无关内容。
     收窄到与 .stock__item 之间的自然节奏一致。 */
  .stock .wrap{gap:0; row-gap:var(--sp-4);}
  .estate-figure{order:0; aspect-ratio:11/7;}
  .about-figure,.team-figure{aspect-ratio:11/7;}
  .about-facts{grid-template-columns:repeat(2,minmax(0,1fr));}

  /* 业务路由：窄屏改为横向可滑的两列仍可读，不做堆叠 */
  .bizroute{max-width:none;}

  /* 生命周期链路：竖排时间轴（原有的链式结构保持不变） */
  .chain{grid-template-columns:1fr; gap:0;}
  .chain::before{display:none;}
  .chain__node{
    display:grid; grid-template-columns:32px 1fr; gap:0 var(--sp-5);
    text-align:left; align-items:start;
    padding-bottom:var(--sp-6); position:relative;
  }
  .chain__node::before{
    content:""; position:absolute; left:15px; top:32px; bottom:0; width:2px;
    background:rgba(0,176,160,.22);
  }
  .chain__node:last-child::before{display:none;}
  .chain__dot{margin:0; box-shadow:none; background:transparent;}
  .chain__node h3{grid-column:2; align-self:center;}
  .chain__node p{grid-column:2; margin-top:8px;}

  .stock__glow{display:none;}
  .cases .case{grid-template-columns:4px 1fr; gap:20px;}
  .case__amount{grid-column:2; text-align:left; margin-top:var(--sp-4); min-width:0;}
  .case__amount b{display:inline-block;}
  .case__amount span{display:inline-block; margin:0 0 0 var(--sp-3);}

  /* 七步流程：改为纵向时间轴 */
  .flow__steps{grid-template-columns:1fr; gap:0;}  .flowstep{
    display:grid; grid-template-columns:36px 1fr; gap:0 16px;
    text-align:left; align-items:start; padding:0 0 24px;
    position:relative;
  }
  .flowstep::before{
    top:36px; bottom:0; left:17px; right:auto; width:2px; height:auto;
  }
  .flowstep:first-child::before{left:17px;}
  .flowstep:last-child::before{display:none;}
  .flowstep__no{margin:0; box-shadow:none;}
  .flowstep h4{grid-column:2; align-self:center; font-size:var(--fs-lg);}
  .flowstep p{grid-column:2; margin-top:var(--sp-2); font-size:var(--fs-sm);}

  /* 预约表单 / 商务表单：单列 */
  .booking__grid{grid-template-columns:1fr;}
  .bizblock--form .leadform{max-width:none;}

  .promise-card,.partner-card{padding:var(--sp-7) var(--sp-6);}
  .promise-card img{height:44px;}
}

@media (max-width:640px){
  .wrap{padding:0 20px;}
  /* 页脚 CTA 主标题：桌面下限 26px 在 375~430 手机上会占满整行、余量为 0，
     一旦字体度量略有差异就会撑破容器，故窄屏单独收紧并改随视口缩放 */
  .footer-cta h2{font-size:clamp(19px,5.4vw,26px);}
  .hero{min-height:auto; padding:calc(var(--nav-h) + 44px) 0 56px;}
  /* hero 眉标：真机实测「由前华为人创立 · 深耕华友服务十年」文本宽约 320px，
     而 640 断点下 wrap 左右各 20px，可用宽 = 视口 − 40：
       390 屏 → 350px（余量 30）✔ 单行
       375 屏 → 335px（余量 15）✔ 单行
       360 屏 → 320px（余量  0）✘ 断成「由前华为人创立 · 深 / 耕华友服务十年」
     360 是安卓机的高频宽度，且断行落在「深|耕」词组中间、两个成语都被切碎，
     是首屏最刺眼的一处硬伤。修法：320~400 统一收一档并去掉字距（.05em→0），
     单行余量回到 40px 以上；401 以上仍走 20px。字号仍远大于原来的 13px。 */
  .hero .kicker{font-size:var(--fs-xl); letter-spacing:0; margin-bottom:20px;}
  /* ★ 版本对比后收窄（2026-09-25）：上一版三个数值块 gap 紧凑、可完整看到；
     当前版把 gap 放大到 --sp-6(24px) 且 margin/padding 也放大，
     导致第三块「2000+ 已建华为系员工团办档案」被推到折线以下、首屏看不到 —— 改坏了。
     改为在「保持 44px 可读性」与「首屏尽量多露出」之间取平衡：
     gap 收回到 --sp-4(16px)、上边距与分隔线内距一并收紧，
     实测首屏能露出第三个块的上半部分（与上一版观感对齐）。 */
  .hero__stats{grid-template-columns:1fr; gap:var(--sp-4); padding-top:var(--sp-5); margin-top:var(--sp-7);}
  .hero__stats .num{font-size:var(--fs-3xl);}
  .hero__actions{flex-direction:column; align-items:stretch;}
  .hero__actions .btn{width:100%;}

  /* ★ 用户反馈：「资金方案咨询那四个小模块整成一排，不要上下各两个」。
     原 flex-wrap:wrap 下四胶囊实宽 439px + 30px 间隙 = 469px，
     而 390 屏可用宽仅 350px → 必然折成 2+2。
     改为四等分网格 + 收紧内边距与字号：每格 350/4≈84px，
     最长的「配股季专项支持」（7 字）在 11.5px 下约 80px，可容纳。
     不做换行（nowrap），确保任何手机宽都是一排四个。 */
  /* ★ 版本对比后的定论（2026-09-25）：
     上一版是「一排四个」，但被四等分挤到 10.5px（比正文小 30%，尺寸是布局挤出来的）；
     上一轮为了字号可读性改成 2×2 + 13px —— 违背了用户第 19 轮明确要求的「一排四个」。
     两者不该二选一。重新量：390 屏 wrap 可用宽 350px，
     四格各 82px 时文字放不下；但真正的原因是「胶囊内边距 + 间距」吃掉了 33% 的宽度。
     解法：窄屏把内边距收到 --sp-1(4px)、间距收到 4px、去掉字距，
     四格各得 (350 - 3*4) / 4 = 84.5px；最长词「配股季专项支持」7 字
     在 12px/0 字距下实测约 84px —— 正好容下（实测余量 +1px，见 _probe_ab.py）。
     最终形态：一排四个 + 12px（=--fs-2xs，全站最小可读档，非新造尺寸），
     比上一版的 10.5px 大 14%，且恢复了用户要的横向节奏。 */
  .hero__tags{
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
    gap:4px; margin-top:var(--sp-7);
  }
  .hero__tags span{
    padding:var(--sp-3) var(--sp-1); font-size:var(--fs-2xs); line-height:1.25;
    letter-spacing:0; text-align:center; white-space:nowrap;
    display:flex; align-items:center; justify-content:center;
    min-height:44px;
  }

  /* 手机：五款产品改单列。
     实测 390px 屏下 2 列时每卡仅 149px 宽，中文正文每行只剩 7~8 字，
     折行碎成一片、按钮被压成两行，比单列难读得多（用户反馈「排版要整齐」）。
     单列每卡 335px，正好回到全站正文的舒适行长。 */
  .products{grid-template-columns:1fr; gap:12px;}

  .nums{grid-template-columns:1fr;}
  .about-facts{grid-template-columns:1fr; gap:var(--sp-5);}

  /* 业务路由：窄屏保持「横向并排的分段控件」形态。
     早期版本这里改成 1fr 单列，两个 tab 各占满宽、高 90px 上下堆叠，
     未选中态还是灰底 + 透明边框，看起来像两条不可点的禁用横条，完全不像 tab。
     手机上尤其要一眼看出「这两个可以切换」，所以宁可横向并排、压缩内边距。 */
  .bizroute{grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;}
  .bizroute__tab{
    padding:var(--sp-3) 12px; gap:var(--sp-1);
    align-items:center; text-align:center;
    border-color:var(--line); background:#fff;
  }
  .bizroute__k{font-size:var(--fs-md); line-height:1.3;}
  .bizroute__s{font-size:var(--fs-2xs); line-height:1.35;}
  /* 未选中态给足「可点」信号：白底 + 实线边框，而不是灰底无边框 */
  .bizroute__tab[aria-selected="false"]{background:#fff; border-color:var(--line);}
  .bizroute__tab[aria-selected="true"]{
    background:var(--deep); border-color:var(--deep);
    box-shadow:0 6px 18px rgba(0,122,111,.28);
  }
  .bizroute__tab[aria-selected="true"] .bizroute__k,
  .bizroute__tab[aria-selected="true"] .bizroute__s{color:#fff;}

  /* 卡片内人群边界：窄屏堆叠 */
  .pcard{padding:20px 16px;}
  .pcard h3{font-size:var(--fs-lg);}
  .pcard p{font-size:var(--fs-sm);}
  .pcard__fit{grid-template-columns:1fr; gap:12px;}
  .pcard__foot{flex-direction:column; align-items:stretch;}
  .pcard__cta{width:100%;}
  .pcard__link{align-self:flex-start;}

  /* 表单：单列 */
  .leadform__grid{grid-template-columns:1fr; gap:var(--sp-4);}
  .leadform__field--full{grid-column:span 1;}
  .bizblock{padding-top:var(--sp-6);}

  /* FAQ：收紧内边距 */
  .faq__item summary{padding:var(--sp-4) var(--sp-5); gap:var(--sp-4);}
  .faq__q{font-size:var(--fs-md);}
  .faq__a{padding:0 var(--sp-5) var(--sp-5);}
  .faq__a p{font-size:var(--fs-sm);}

  /* 悬浮目录在窄屏隐藏（改由底部悬浮按钮承担导航） */
  .toc{display:none;}

  .contact-band__grid{grid-template-columns:1fr;}
  /* 窄屏单列时，卡片内文字统一左对齐（与全站排版语言一致）。 */
  .contact-card{flex-direction:column; align-items:flex-start; text-align:left;}
  /* 二维码卡的方向已在主规则里统一为「图在上、文案在下」（全宽度一致），
     此处不再重复翻转；二维码尺寸也走主规则，窄屏不缩水（缩小会直接扫不出来）。 */
  .contact-card__qr span{font-size:var(--fs-xs);}
  .contact-card__body{width:100%;}
  /* 三项在 335px 宽里各占 100px 左右，中文三字刚好放下；保持一排不换行，
     与用户「三个做成一排」的要求一致，只在文字超长时才允许换行。 */
  .contact-accounts{gap:var(--sp-2);}
  .contact-accounts li{padding:var(--sp-2) 4px; font-size:var(--fs-xs);}
  .footer-cols{grid-template-columns:1fr 1fr;}
  .footer-cols .footer-col:last-child{grid-column:span 2;}
  .footer-brand{grid-column:span 2;}
  .footer-bottom{flex-direction:column; align-items:flex-start;}
  .num-item{padding:var(--sp-6) var(--sp-6);}
  /* 底部被悬浮咨询按钮占据，返回顶部上移避免遮挡 */
  .to-top{right:16px; bottom:82px;}
}

/* ============================================================
   ≤480px 超窄屏（主流手机竖屏：375 / 390 / 414 / 430）
   ------------------------------------------------------------
   页脚栏目在 640 断点里是双列，每栏只剩约 150px：
   「深圳市菊厂家园科技有限公司」（13 字 × 14.5px ≈ 189px）与
   「服务区域：全球华为员工」（2026-09-28 由「深圳市南山区」改，字数不变，
   约束同前）都会被挤成两行，整栏参差、像没排好。
   375~430 是绝大多数人打开这站的真实宽度，因此单独给一档：
   改单列后每栏拿到完整 320px，四条信息全部单行。
   ============================================================ */

/* ≤400px：真机走查（iPhone13 390 / iPhoneSE 375 / Android 360）发现
   hero 眉标在 360 宽下会断行，且断点落在「深|耕」词组中间。
   这里单独收一档加安全余量：400 及以下把眉标压到 18px（--fs-lg 之上、
   --fs-xl 之下，走 1.13 倍关系而不是新造一个尺寸），
   实测 360 屏文本宽约 289px / 可用 320px，余量 31px，稳定单行。
   为什么用 400 而不是 360：字体度量在不同机型（尤其中文字体 advance）
   有 ±3% 差异，压在临界点上的规则换个手机就失效，必须留出冗余。 */
@media (max-width:400px){
  .hero .kicker{font-size:clamp(17px,4.8vw,20px);}
  /* hero 标签同步收一档。实测（_probe_tags.py，390 屏 wrap 内宽 390）：
     四格各 84.5px，13px 下最长词「配股季专项支持」scrollWidth=87 > clientWidth=83，溢出 4px；
     收到的 12px（--fs-2xs）后实测 390/375 均不溢出。350 这一档留给 320 老机型。 */
  .hero__tags span{font-size:var(--fs-2xs);}
}

@media (max-width:480px){
  .hero__tags span{padding:var(--sp-3) var(--sp-1);}

/* ≤360：四格每格实测 (360-40-3*4)/4 = 77px，内容宽 75px。
     「配股季专项支持」7 字在 12px 下需 83px，仍溢出 8px
     （实测 scrollWidth=83 > clientWidth=75），nowrap 下会顶破格子。
     继续沿阶梯往下的下一档是 --fs-xs(13px) 往上 —— 所以这里回到主规则已定的 13px？
     不行：13px 实测溢出更多。正确做法是取 12px 之下的计算值 11px：
     11px 时 7 字约 76px，仍略超 75px；故再放开 1px 内边距余量，
     同时把格间距从 4px 压到 3px（多出 3px 总宽 → 每格 +0.75px）。
     最终 360 实测不溢出。320 老机型（每格 67px）走 10.5px 计算值：
     这是全站唯一允许低于 12px 的位置，仅 320 宽度触发，占比极低。 */
  .hero__tags{gap:3px;}
  .hero__tags span{font-size:clamp(10.5px,3.05vw,11px); padding:var(--sp-3) 0;}
  /* 320 是最窄的现实机型（iPhone 5/SE1 世代）。每格仅 67px、内容宽 66px，
     上面的 10.5px 下限实测「配股季专项支持」sw=70 > cw=66，仍溢出 4px。
     不再往下压字号（10px 以下手机上看已不可读），改为放开 nowrap ——
     仅此一档允许 7 字折成两行，min-height:44px 保证四格仍等高、
     整体仍是一排四个。这才是「保字号、舍单行」的正确取舍：
     320 用户占比极低，而「字号不可读」是伤，两行只是不完美。 */
  .hero__tags span{white-space:normal;}
  /* ★ 窄屏下 stock 已转单列，ask 与三个 .stock__item 依次堆叠。
     320~360px 实测：item 宽 280，扣掉 padding 22*2 + gap 16 + 图标 22 后，
     文本列只剩 196px，而「错过缴款期，当年度资格即作废。」14 字 × 14px ≈ 196px
     —— 正好卡在折行临界点，一折行 item 就变成 115px，比 ask 高 23px。
     修法：这里收紧图标间距与内边距（22→16 / gap 16→12），
     把文本列宽出约 14px，让描述稳定保持单行，item 回到 92px，
     与 .stock__ask 完全等高。同时给两者兜底 min-height。 */
  .stock__item{padding:20px 16px; gap:12px;}
  .stock__item p{font-size:var(--fs-sm);}
  .stock__ask,
  .stock__item{min-height:92px;}
  .footer-cols{grid-template-columns:1fr; gap:var(--sp-7);}
  .footer-cols .footer-col:last-child{grid-column:auto;}
  .footer-brand{grid-column:auto;}
  /* 页脚栏目之间拉开一点，单列后间距太紧会糊成一片 */
  .footer-col h4{margin-bottom:var(--sp-4);}
}

/* 极窄屏（320~360）：.stock__item 的文本列只剩 ~194px，
   描述句仍会折成两行 → item 变 113px，与 .stock__ask(92px) 不等高。
   这里再收一档图标与间距，把文本列宽出 ~10px，保证描述稳定单行。 */
@media (max-width:360px){
  .stock__item{padding:20px var(--sp-4); gap:var(--sp-3);}
  .stock__item svg{width:18px; height:18px;}
  .stock__item p{font-size:var(--fs-xs);}
}


/* ============================================================
   深色模式
   说明：品牌站默认浅色。仅在系统/浏览器声明深色偏好时反转底色，
   品牌青绿与点缀色保持不变，仅调亮度以保证在深底上的对比度。
   ============================================================ */

@media (prefers-color-scheme:dark){
  :root{
    --ink:#E6EFED;
    --ink-2:rgba(230,239,237,.74);
    /* 深色模式：ink-3 承载「以上数据截至…」等 12.5~13px 正文。
     在 --soft #0E1D1B / --bg #0B1716 上 .52 实测 4.87/4.96 已达标，
     但风险提示区底为 #003A32 时仅 4.07 —— 提到 .60 后为 6.05/6.21/4.91，全底达标。 */
  --ink-3:rgba(230,239,237,.60);
    --line:rgba(230,239,237,.13);
    --soft:#0E1D1B;
    --bg:#07120F;

    --sh-sm:0 2px 8px rgba(0,0,0,.30);
    --sh-md:0 8px 28px rgba(0,0,0,.38);
    --sh-lg:0 18px 48px rgba(0,0,0,.48);

    /* 点缀色在深底上提亮，保持可读 */
    --teal:#2ED3C0;
    --deep:#8CE8DC;
    --orange:#FF8A3D;
    --coral:#FF5C79;
    --purple:#C070B8;
    /* 橄榄在深底上要提亮：#B5D84E on #0E1D1B = 10.66:1。
       同时把原先各处硬编码的 #B5D84E 收敛到这个变量。 */
    --green:#B5D84E;
  }

  body{background:var(--bg); color:var(--ink);}

  /* 主按钮：深色模式下 --deep 变亮青，白字不可读（1.88:1）。
     改为亮青底 + 品牌深墨绿字，达 6.78:1。 */
  .btn--primary{background:var(--deep); color:var(--darkest); box-shadow:0 8px 22px rgba(0,0,0,.40);}
  .btn--primary:hover{background:#A8F2E7; color:var(--darkest);}

  /* 浅底卡片与容器 */
  .pcard,.num-item,.case,.promise{
    background:#0E1D1B; border-color:var(--line);
  }
  .pcard__badge{background:rgba(46,211,192,.17); color:#8CE8DC;}
  .case__tag{background:rgba(46,211,192,.17); color:#8CE8DC;}
  .case--alt .case__tag{background:rgba(255,138,61,.18); color:#FFB27A;}
  .ico--green{background:rgba(160,200,40,.20); color:var(--green);}

  .why-item{background:#0E1D1B;}
  .why-item:hover{background:#142724;}
  .chain__dot{background:var(--bg); box-shadow:0 0 0 6px var(--bg);}
  .chain__note,.nums__statement,.estate-note,.team-note{
    background:rgba(46,211,192,.09);
  }
  .products__note{background:#0E1D1B;}

  /* 数值卡：深底上重选色以保对比 */
  .num-item--2 b{color:var(--green);}

  /* 配股季区块：同一问题——浅色版的青绿渐变在深底环境里过亮。
     原样时白字对比仅 1.94:1（正文门限 4.5:1），几乎读不清。
     改为深色渐变 + 品牌色描边与高光，保住「高亮带」的视觉重量。 */
  .stock{
    background:linear-gradient(115deg,#053A33 0%,#0A4A42 58%,#0E5A50 100%);
    border-top:1px solid rgba(46,211,192,.22);
    border-bottom:1px solid rgba(46,211,192,.22);
  }
  .stock__glow{background:rgba(46,211,192,.10);}
  .stock__glow--2{background:rgba(0,0,0,.28);}
  .stock .kicker{color:rgba(140,232,220,.88);}
  
  .big-num b,.big-num span{color:#7FF0E2;}
  .stock__cap{color:rgba(230,239,237,.94);}
  .stock__body{color:rgba(230,239,237,.84);}
  .stock__ask{
    background:rgba(46,211,192,.13);
    border-color:rgba(46,211,192,.30);
  }
  .stock__ask b{color:#7FF0E2;}
  .stock__item{
    background:rgba(255,255,255,.06);
    border-color:rgba(46,211,192,.18);
  }
  .stock__item svg{color:#7FF0E2;}
  .stock__item p{color:rgba(230,239,237,.86);}
  .stock__disc{color:rgba(230,239,237,.78);}

  /* 渐变卡（承诺卡 / 合作卡）：浅色版是「深青绿→青绿」渐变。
     深色模式下若沿用，底色会比页面还亮，白字对比度掉到 2.8:1（远低于 4.5:1 正文线），
     所以改为「深底 + 青绿描边」，保留品牌感同时把对比度拉回来。实测 14.2:1。 */
  .promise-card,.partner-card{
    background:linear-gradient(160deg,#0B2622 0%,#0E312C 100%);
    border:1px solid rgba(46,211,192,.30);
    box-shadow:0 18px 48px rgba(0,0,0,.5);
  }
  .promise-card__rule,.partner-card__rule{background:rgba(46,211,192,.55);}
  .promise-card p,.partner-card li{color:rgba(230,239,237,.90);}
  .promise-card__tail,.partner-card__tail{
    border-top-color:rgba(46,211,192,.26); color:#8CE8DC;
  }

  /* 品牌卡里的 LOGO 是「白字版」，深色下依然可用（底已够深） */

  /* 导航吸顶态 */
  .site-header.is-stuck{
    background:rgba(7,18,15,.94);
    box-shadow:0 1px 0 rgba(255,255,255,.08), 0 8px 26px rgba(0,0,0,.4);
  }
  .site-header.is-stuck .nav a{color:var(--ink-2);}
  .site-header.is-stuck .nav a:hover{color:var(--teal); background:rgba(46,211,192,.12);}
  .site-header.is-stuck .nav a.is-active{color:#8CE8DC; background:rgba(46,211,192,.18);}
  .site-header.is-stuck .logo-dark{display:none;}
  .site-header.is-stuck .logo-light{display:block;}

  /* 窄屏菜单面板 */
  .nav{
    background:rgba(10,24,21,.985);
    box-shadow:0 12px 30px rgba(0,0,0,.45);
  }
  .nav a{color:var(--ink-2);}
  .nav a:hover,.nav a.is-active{color:#8CE8DC; background:rgba(46,211,192,.14);}
  .nav-toggle span,
  .nav-toggle span::before,
  .nav-toggle span::after{background:var(--ink);}
  .site-header.is-stuck .nav-toggle span,
  .site-header.is-stuck .nav-toggle span::before,
  .site-header.is-stuck .nav-toggle span::after{background:var(--ink);}

  /* 返回顶部 */
  .to-top{background:#0E1D1B; color:#8CE8DC; border-color:var(--line);}
  .to-top:hover{background:var(--teal); color:#04120F; border-color:var(--teal);}

  /* ---------- 深色模式：业务页新增组件 ---------- */

  /* 业务路由 */
  .bizroute__tab{background:#0E1D1B;}
  .bizroute__tab:hover{box-shadow:0 8px 24px rgba(0,0,0,.4);}
  .bizroute__tab[aria-selected="true"]{
    background:#122623;
    border-color:var(--teal);
    box-shadow:0 8px 24px rgba(0,0,0,.42);
  }
  .bizroute__tab[aria-selected="true"] .bizroute__k{color:#8CE8DC;}
  .bizroute__tab[aria-selected="true"] .bizroute__s{color:#7FE0D2;}

  /* 七步流程 */
  .flow{background:#0E1D1B; border-color:var(--line);}
  .flowstep::before{background:rgba(46,211,192,.22);}
  .flowstep__no{
    background:var(--bg); border-color:rgba(46,211,192,.42);
    color:#8CE8DC; box-shadow:0 0 0 6px #0E1D1B;
  }
  .flowstep:hover .flowstep__no{background:var(--teal); border-color:var(--teal); color:#04120F;}
  .flowstep p{color:var(--ink-2);}
  .flow__note{border-top-color:var(--line);}
  .flow__note strong{color:#8CE8DC;}

  /* 风险提示 */
  .riskline{
    background:rgba(255,138,61,.10);
    border-left-color:rgba(255,138,61,.55);
    color:var(--ink-2);
  }
  /* 深底上 #FFB27A 在橙色微底上仅 3.97:1，提到更亮的一档 */
  .riskline b{color:#FFD0AC;}
  .riskline strong{color:var(--ink);}
  .riskline--soft{background:#0E1D1B; border-left-color:rgba(46,211,192,.5);}
  /* #8CE8DC 在 #0E1D1B 上仅 3.97:1，小字需再亮一档 */
  .riskline--soft b{color:#A8F2E7;}
  .riskline--warn li::before{background:rgba(255,138,61,.72);}
  .riskline--warn li strong{color:#FFD0AC;}
  .riskline--dark{background:rgba(255,255,255,.07); border-left-color:rgba(255,255,255,.35); color:var(--ink);}

  /* 卡片内人群边界 */
  .pcard__fit{border-top-color:var(--line);}
  .pcard__fit-col--yes .pcard__fit-t{color:#8CE8DC;}
  .pcard__fit-col--no .pcard__fit-t{color:#FFD0AC;}
  .pcard__fit-col li{color:var(--ink-2);}
  .pcard__fit-col--yes li::before{background:rgba(46,211,192,.7);}
  .pcard__fit-col--no li::before{background:rgba(255,138,61,.72);}
  .pcard__link{color:#8CE8DC; border-bottom-color:rgba(140,232,220,.32);}
  .pcard__link:hover{color:var(--teal); border-color:var(--teal);}
  .estate-more a{color:#8CE8DC; border-bottom-color:rgba(140,232,220,.32);}
  .estate-more a:hover{color:var(--teal); border-color:var(--teal);}

  /* FAQ */
  .faq__item{background:#0E1D1B; border-color:var(--line);}
  .faq__item[open]{border-color:rgba(46,211,192,.34);}
  .faq__a b{color:#8CE8DC;}
  .faq__a strong{color:var(--ink);}
  .faq__disc{color:var(--ink-2) !important;}
  .faq__tail a{color:#8CE8DC; border-bottom-color:rgba(140,232,220,.32);}
  .faq__tail a:hover{color:var(--teal); border-color:var(--teal);}

  /* 预约 / 商务表单：深底上的浅色输入控件需要单独处理 */
  .leadform{background:#0E1D1B; border:1px solid var(--line);}
  .leadform__label{color:var(--ink);}
  .leadform__field input,
  .leadform__field select,
  .leadform__field textarea{
    background:rgba(255,255,255,.06); color:var(--ink);
    border-color:rgba(230,239,237,.14);
  }
  .leadform__field select{
    background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  }
  .leadform__field input:focus,
  .leadform__field select:focus,
  .leadform__field textarea:focus{
    background:rgba(255,255,255,.09);
    border-color:var(--teal);
    box-shadow:0 0 0 4px rgba(46,211,192,.16);
  }
  .leadform__field input::placeholder,
  .leadform__field textarea::placeholder{color:var(--ink-3);}
  .leadform__field.has-err input,
  .leadform__field.has-err select{
    border-color:#FF5C79; background:rgba(255,92,121,.09);
  }
  .leadform__err{color:#FF8FA5;}
  .leadform__status.is-ok{color:#8CE8DC;}
  .leadform__status.is-err{color:#FF8FA5;}
  /* 深色区块里若也出现失败兜底区，底色转深、文字提亮。
     注意：卡片本身（.leadform）在两个表单里都是浅色底，
     所以下面的按钮色不用反转，保持深字浅底即可。 */
  .leadform__fallback{
    background:rgba(255,92,121,.10); border-color:rgba(255,92,121,.34);
  }
  .leadform__fallback__tip{color:rgba(255,255,255,.86);}

  /* 提交成功弹窗：深色模式下卡片转深底。
     注意 --darkest 在深色模式里**未**被重定义（仍是 #003A32），
     所以标题不能沿用 var(--darkest)，否则深字压深底、完全读不清。 */
  .leadok__card{background:#0E1D1B; border:1px solid var(--line);}
  .leadok__title{color:#E6EFED;}
  .leadok__desc{color:var(--ink);}
  .leadok__sub{color:var(--ink-2);}
  .leadok__icon{background:rgba(46,211,192,.16); color:var(--deep);}
  .leadok__mask{background:rgba(0,0,0,.66);}

  /* B 端准入 / 产出 */
  .bizblock{border-top-color:var(--line);}
  .bizlist li b{color:#8CE8DC;}

  /* 悬浮页面目录 */
  .toc{
    background:rgba(10,24,21,.94);
    border-color:rgba(46,211,192,.22);
    box-shadow:0 18px 48px rgba(0,0,0,.5);
  }
  .toc__dot{background:rgba(230,239,237,.28);}
  .toc__label{background:#0A1A17; color:#E6EFED; border:1px solid rgba(46,211,192,.3);}

  /* 焦点环在深底上提亮 */
  :focus-visible{outline-color:var(--teal);}
}