/* ============================================================
   有缘人口腔门诊部 · 医疗品牌样式系统 v2
   ------------------------------------------------------------
   设计取向：医疗专业感 + 现代 SaaS 的精致度
   配色：医疗蓝主色 + 青绿辅助 + 暖橙点缀（信任 / 洁净 / 亲和）

   v2 升级要点（对照 v1）
   ----------------------
   1. Hero 从「两层径向渐变」升级为 mesh 网格渐变 + aurora 流动光斑 + 胶片噪点
   2. 卡片从「白底 + 1px 实线边框」升级为「渐变描边」（双层背景法，圆角不破）
   3. 卡片 hover 增加「跟随光标的光晕」（CSS 变量驱动，Linear / Vercel 同款手法）
   4. 按钮增加扫光（shine sweep）与渐变底，hover 走合成层，不触发重排
   5. 数据条数字用渐变文字（background-clip: text）
   6. 滚动入场从「整体位移」升级为「位移 + 轻微缩放 + 模糊消散」
   7. 缓动统一为指数型 ease-out（--ease），禁用 bounce / elastic 弹跳感
   8. 全程 prefers-reduced-motion 守卫

   ⚠️ 不引任何外部动画库（AOS / GSAP / ScrollReveal）：
      服务器出口仅 ~115 KB/s，任何外部依赖都是净负担。
      以下全部为纯 CSS + 原生 IntersectionObserver，零新增请求。
   ============================================================ */

:root {
  /* 品牌色 */
  --brand: #0B6BF2;
  --brand-hover: #0A5FD8;
  --brand-active: #0852BD;
  --brand-soft: #EAF2FE;
  --brand-softer: #F3F8FF;
  --brand-deep: #063D8A;
  --brand-ink: #052E68;

  /* 辅助色 */
  --teal: #0EA5A0;
  --teal-soft: #E6F7F5;
  --teal-deep: #0B7C78;
  --violet: #6366F1;
  --warm: #FF7A45;
  --warm-soft: #FFF1EA;

  /* 中性色 */
  --bg: #F6F8FB;
  --bg-tint: #F2F6FC;
  --surface: #FFFFFF;
  --surface-2: #FAFBFD;
  --surface-3: #F4F7FB;
  --ink: #0F172A;
  --muted: #5B6B7F;
  --faint: #94A3B8;
  --line: #E6EAF0;
  --line-strong: #D8DFE9;

  /* 语义色 */
  --success: #12B76A;
  --warning: #F79009;
  --danger: #F04438;

  /* 圆角阶梯 */
  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;

  /* 阴影阶梯：每一级都比上一级更大、更软、更淡（Vercel 式多层投影） */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-card:
    0 1px 2px rgba(15, 23, 42, .04),
    0 4px 12px rgba(15, 23, 42, .04),
    0 12px 32px rgba(15, 23, 42, .05);
  --shadow-pop:
    0 2px 4px rgba(15, 23, 42, .04),
    0 8px 20px rgba(15, 23, 42, .07),
    0 24px 56px rgba(15, 23, 42, .09);
  --shadow-brand: 0 10px 28px rgba(11, 107, 242, .22);
  --shadow-brand-lg: 0 16px 44px rgba(11, 107, 242, .26);

  /* 缓动：一律指数型 ease-out，不用 bounce / elastic（弹跳属于玩具感） */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --t-fast: .16s;
  --t-base: .28s;
  --t-slow: .48s;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "SF Pro Text", "Helvetica Neue", "Microsoft YaHei", "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.8;
  font-size: 16px;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; margin: 0; }
img { display: block; max-width: 100%; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.container-narrow { max-width: 860px; }

/* 焦点可见性：键盘可达性，不用 outline:none 一刀切 */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ===== 顶部信息条 ===== */
.topbar {
  background: linear-gradient(90deg, var(--brand-ink) 0%, var(--brand-deep) 55%, #0A4A9E 100%);
  color: rgba(255, 255, 255, .86);
  font-size: 13px;
  position: relative;
}
.topbar::after {
  /* 底部一道极淡的青绿高光，把深色条从「纯色块」拉出一点质感 */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(127, 227, 218, .45) 30%, rgba(127, 227, 218, .25) 70%, transparent);
}
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 38px; gap: 16px;
}
.topbar-left { display: flex; align-items: center; gap: 18px; }
.topbar-item { display: inline-flex; align-items: center; gap: 6px; }
.topbar-item svg { width: 14px; height: 14px; opacity: .8; }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.topbar-right a { position: relative; transition: color var(--t-fast) var(--ease); }
.topbar-right a:hover { color: #fff; }

/* ===== 主导航：白色毛玻璃 ===== */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(230, 234, 240, .9);
  transition: box-shadow var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.nav-wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 70px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-img { height: 40px; width: auto; }
.nav-links { display: flex; gap: 30px; }
.nav-links a {
  font-size: 15px; color: var(--ink); font-weight: 400;
  padding: 6px 0; position: relative;
  transition: color var(--t-fast) var(--ease);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--brand), var(--teal));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-base) var(--ease);
}
.nav-links a:hover { color: var(--brand); }
.nav-links a:hover::after { transform: scaleX(1); }

/* CTA 按钮：渐变底 + 扫光 */
.nav-cta {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 22px; color: #fff;
  background: linear-gradient(135deg, var(--brand) 0%, #0A8FD8 100%);
  border-radius: 999px; font-size: 14px; font-weight: 500;
  box-shadow: 0 4px 14px rgba(11, 107, 242, .22);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease);
  white-space: nowrap;
}
.nav-cta::before {
  /* 扫光：一条斜向高光，hover 时从左掠过 */
  content: ""; position: absolute; top: 0; bottom: 0; width: 45%;
  left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
  transition: left var(--t-slow) var(--ease);
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(11, 107, 242, .3); }
.nav-cta:hover::before { left: 115%; }
.nav-cta > * { position: relative; z-index: 1; }

/* ===== Hero ===== */
/* mesh 网格渐变 + 底部渐隐，落点在左上偏冷、右上偏青，中段留白给正文 */
/* ===== Hero：居中版式 =====
   版式取向：官网首屏用**居中**，不用左对齐。
   左对齐适合文档/后台（阅读动线从左往右、信息密度优先），
   官网首屏要的是「品牌门面」——居中才有对称感与仪式感，
   这也是同类医疗站（穗华/瑞尔/美奥）的通行做法。
   中轴顺序：logo → 大标题 → 一句说明 → 行动按钮 → 信任点。
   门店属性徽标移到右下角，它属于辅助信息，不该占中轴。 */
.hero {
  position: relative; overflow: hidden;
  /* 首屏字号的唯一来源：宽度约束 min(13vw) 之外再叠一条高度约束 min(21.5vh)，
     矮屏（1366×768 这类）靠高度约束自动退字号，避免胶囊被顶出折线。
     移动端断点只改这一个值，容器宽度会跟着自动重算。
     ⛔ 上限 240px 不可回退到旧版的 116px：旧上限是配「三行 10 字」标的，
        标语改两行 6 字后，同样的 116px 会让块宽只剩视口的 43%，
        首屏正中一坨大字、两侧全空（实测 1440 屏：611px 块 / 1400px 视口）。
        240px 是两行 6 字的对应值：1440 屏块宽回到视口的 62.7%，
        2560 屏从 35.4% 提到 45.2%，与旧三行版的 79% 同一量级。
      ⚠️ 1440 及以下不受此上限影响（此时由 min(13vw, 21.5vh) 决定），
         它只兜住 1600px 以上的超宽屏 —— 所以改它必须复验 2560/1920 两档。 */
  --hero-fs: clamp(40px, min(13vw, 21.5vh), 240px);
  /* 首屏撑满一屏：减去顶栏 38px + 主导航 70px，让主标语独占整个可视区。
     这是「满屏」的物理前提 —— 不撑满就永远只是"页头的一块内容"。
     底部预留 96px：下方数据条要上浮 56px 压进来，不留够会被压住。
     svh 用于移动端（地址栏收起时 vh 会跳，svh 取最小可视高度，不会抖）。 */
  min-height: calc(100vh - 108px);
  min-height: calc(100svh - 108px);
  /* ⚠️ 上下内边距是"装不装得下"的总闸门，必须按内容实算：
       ⛔ 本轮标语由三行改两行后，这份算式必须重算（行数变了，内容高度全变）：
       900px 视口 → hero 高 792px（100vh−108）；标语 2×188×1.12 ≈ 421 + 38 段距
       内容 = padding(40+56) + 标题(421) + 38 + 说明句30 + 40 + 按钮46 + 胶囊(44+36) = 751 ≈ 792
       实测留余 40–57px，胶囊底边距折线 55–85px（18 档全在折线内）。
     上一版 padding 64/88 时总高 831px，超出 39px —— 胶囊正好被推出折线，
     这就是客户说「下面那些小小胶囊也看不到了」的真实原因。 */
  padding: 40px 0 56px;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(1000px 560px at 50% -14%, rgba(11, 107, 242, .16), transparent 62%),
    radial-gradient(820px 480px at 92% 88%, rgba(14, 165, 160, .13), transparent 58%),
    radial-gradient(700px 440px at 6% 72%, rgba(99, 102, 241, .07), transparent 60%),
    linear-gradient(180deg, #FBFCFE 0%, var(--bg) 72%, var(--bg) 100%);
  isolation: isolate;
}
/* aurora 流动光斑：两个缓慢漂移的大色团，30s 一个循环，位移很小
   ——位移大了会变成「背景在动」的干扰，这里的幅度控制在 ±3% */
.hero::before,
.hero::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%;
  filter: blur(70px); pointer-events: none;
}
.hero::before {
  width: 520px; height: 420px; left: -6%; top: -14%;
  background: radial-gradient(circle, rgba(11, 107, 242, .30), transparent 68%);
  animation: auroraDrift1 30s var(--ease-soft) infinite alternate;
}
.hero::after {
  width: 460px; height: 380px; right: -4%; top: 2%;
  background: radial-gradient(circle, rgba(14, 165, 160, .26), transparent 68%);
  animation: auroraDrift2 34s var(--ease-soft) infinite alternate;
}
@keyframes auroraDrift1 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(3%, 5%, 0) scale(1.08); }
}
@keyframes auroraDrift2 {
  from { transform: translate3d(0, 0, 0) scale(1.04); }
  to   { transform: translate3d(-4%, 6%, 0) scale(1); }
}
/* 胶片噪点：给大块渐变加一点颗粒，消掉「数字渐变」的塑料感。
   用内联 SVG feTurbulence，不额外请求；透明度压到 3% 只做质感不做视觉。 */
.hero-grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}
.hero-wrap {
  /* 「满」的物理来源是**容器与标语的宽窄匹配**，不是字号大小 —— 这句判断在本轮被再次验证。
     标语从「三行 6/10/6 字」改成「两行 6/6 字」后，最长行从 10 字变 6 字：
     沿用旧的 1240px 容器时，6 字行只占 46.9% —— 首屏正中一坨大字、两侧全空，
     观感从"门面"直接掉成"半截文档"。
     ⛔ 教训：**换标语字数后必须重算容器**。字号与容器是一对，只改一头必然失配。
     本轮后手：容器宽度不再写死，而是由 --hero-fs 反算 —— 内宽 = 字号 × 5.27，
     任何视口、任何字数下最长行都恰好占内宽约 92%，两侧各留 4% 呼吸。
     这样换标语只改 --hero-fs 一处，容器自动跟上，不会再出现"改了字没改框"。
     ⚠️ --hero-fs 必须定义在 .hero（祖先）而不是 .hero-wrap（自身）：
        若定义在 .hero-wrap 上，窄屏断点在 .hero 上改它会**被自身定义压住而失效**。 */
  width: 100%;
  max-width: calc(var(--hero-fs) * 5.27 + 64px);
  position: relative;
  /* 中轴排版：整栏居中，内部所有块级元素居中对齐 */
  margin: 0 auto; padding: 0 32px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}


/* ============ 主标语：整页唯一的视觉主角 ============
   尺寸逻辑：满屏 = 每行把容器宽度吃掉，但不是"越大越好"。
     标语本轮由「三行 6/10/6 字」改为「两行 6/6 字」——
     行数少一行、每行短 4 字，**若字号不变，视觉重量会掉一半**（实测占比 93.8% → 46.9%）。
     所以字号必须同步上调，且容器由 --hero-fs 反算（见 .hero-wrap）。
   尺寸反推（以最长行 6 字为准，实测 6 字行宽 ≈ 字号 × 5.27）：
     字号 × 5.27 ≈ 容器内宽 × 0.92
     → 240px 时行宽 ≈ 1158px，容器内宽 1265px 的 92%，两侧各留 4%。
   ⛔ 不写死像素：写死 240px 在 1024 屏溢出、4K 屏又不够。
      取 min(13vw, 21.5vh) —— 宽度约束之外**再叠一条高度约束**，
      否则 1366×768 这类矮屏上，大字号会把下方胶囊顶出折线（实测 +23px）。
      min() 让矮屏自动退字号，这是本轮的第二个修正。 */
.hero h1 {
  /* 大字必须负字距：汉字是方块字，字号越大字间空白越显眼，
     正字距会让三个字看起来像三块，负字距才收成一个字块。
     标语缩短后字距再收紧一点（-0.03 → -0.035）：6 字行比 10 字行更短，
     同样的负字距在短行上"抱团"效果更明显，收得过紧会显挤。 */
  font-size: var(--hero-fs);
  /* 行距：两行大字 1.12。原来 1.22 是为三行标题留的舒展区 ——
     两行之间没有第三行来分摊，行距过大会让标题散成两块，失去整体感。
     1.10–1.16 是两行中文大标题的区间，低于 1.10 笔画会互相干扰。 */
  line-height: 1.12;
  letter-spacing: -0.035em;
  font-weight: 800;
  /* 与下方说明句之间 46 → 38：行数少一行后，标题与正文之间的视觉断层
     已经由"两行 vs 一行"本身建立，再留 46px 会显得空。 */
  margin: 0 0 38px;
  max-width: none;
  /* —— 色相流转：整句颜色缓慢流过 ——
     background-size 放宽到 260% 才有可流动的余量；
     gradient 首尾同色（都是 --brand），background-position 从 0% 走到 100%
     再折回，衔接处不会跳色，形成无缝循环。
     12s 一个来回：低于 6s 会变成刺眼的"跑马灯"，高于 20s 又看不出在动。 */
  background: linear-gradient(
    100deg,
    #0B6BF2 0%, #0A8FD8 16%, #0EA5A0 32%,
    #6366F1 48%, #0A8FD8 66%, #0EA5A0 82%, #0B6BF2 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--brand);   /* 兜底：background-clip 不支持时仍可读 */
  animation: hueFlow 12s var(--ease-soft) infinite;
  /* 光晕压在字后面：色相的亮度有起伏，没有垫底光会在浅底上"发飘" */
  filter: drop-shadow(0 10px 38px rgba(11, 107, 242, .13));
}
/* 0% / 100% 必须同值，否则每轮循环会"顿"一下 */
@keyframes hueFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/* 标语上方的极细渐变装饰线：给「导航 → 大字」之间留一个过渡，
   长度 64px 是经验值 —— 再短看不出是线，再长就成了分隔条。
   ⚠️ 当前 HTML 中已无 .hero-rule 元素（标语由三行改两行时随行数一起拿掉），
      此规则为**待用状态**，不删：恢复装饰线只需在 <h1> 前加回
      <span class="hero-rule"></span>，样式即刻生效。 */
.hero-rule {
  display: block; width: 64px; height: 2px; border-radius: 2px;
  margin: 0 0 42px;
  background: linear-gradient(90deg, transparent, var(--brand), var(--teal), transparent);
  opacity: .55;
}

/* ============ 辅助元素：做小，但不能小到看不见 ============
   前一版把说明句压到 15px、按钮 13px、胶囊 12px，思路是"对比"，
   但压过头了 —— 12px 的文字配浅灰边框，在浅底上基本读不到，
   客户的原话是「下面那些小小胶囊也看不到了」。
   收敛后的准则：**最小可读字号 13px，次要信息靠颜色变浅而非字号变小**。
   对比仍靠 8:1 的大小差建立（标语 ~124px vs 正文 15.5px），
   但每个元素都保持"能看清"的下限。 */
.hero-sub {
  font-size: 16px; color: var(--muted);
  margin: 0 0 40px;
  line-height: 1.9;
  letter-spacing: .01em;
  max-width: 42em;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; justify-content: center; }
/* 满屏版式下按钮要"收着"：大按钮会跟标语抢注意力。
   收到 14px 就够 —— 再小点击热区不足，移动端会误触。 */
.hero-actions .btn { padding: 13px 28px; font-size: 14px; }
.hero-actions .btn svg { width: 16px; height: 16px; }

.hero-chips {
  display: flex; flex-wrap: wrap; gap: 11px; margin-top: 44px;
  justify-content: center;
}
/* 胶囊：比标语弱、比脚注强。字号 13px 是浅色背景上的可读下限；
   底色提到 .86 不透明度 + 一行细描边，在浅底上才有轮廓。 */
.hero-chips .chip {
  background: rgba(255, 255, 255, .86);
  border-color: rgba(214, 222, 234, .9);
  padding: 8px 15px;
  font-size: 13px;
  color: var(--ink);          /* 次要信息靠"字重变轻"区分，不靠"颜色变淡到看不见" */
  font-weight: 450;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
}
.hero-chips .chip svg { width: 14px; height: 14px; color: var(--teal); }

/* 门店属性徽标 → 首屏右下角，脚注级。
   放在流内自右对齐（不是绝对定位）：hero 下方紧跟着上浮的统计条，
   绝对定位会被那条压住；流内右对齐既到角落又不重叠。 */
.hero-corner {
  align-self: flex-end;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 500; letter-spacing: .02em;
  color: var(--faint);
  background: rgba(255, 255, 255, .6);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  padding: 5px 12px; border-radius: 999px;
  margin: 22px 0 0;
}
.hero-corner .dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--teal);
  box-shadow: 0 0 0 4px rgba(14, 165, 160, .14);
  animation: dotPulse 2.6s var(--ease-soft) infinite;
}
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(14, 165, 160, .18); }
  50%      { box-shadow: 0 0 0 6px rgba(14, 165, 160, .07); }
}
/* 窄屏：标语从"满屏大字"退到"铺满内容宽"。
   注意 clamp 的下限在 390px 屏上仍偏大（6 字 × 55px = 330px > 内容宽），
   所以移动端必须单独给值，不能只靠 clamp 兜。
   ⛔ 关键：断点里改 padding 时，必须同步改 --hero-fs（容器宽度由它反算），
      否则内宽变化而字号不变，占比会跑掉（这是上一版 900px 档的隐患）。 */
@media (max-width: 900px) {
  /* 行距略放到 1.15：屏幕变窄后每行更长，行与行的挤压感更强 */
  .hero { --hero-fs: clamp(38px, min(13.4vw, 20vh), 240px); }
  .hero h1 { line-height: 1.15; letter-spacing: -0.03em; margin-bottom: 30px; }
  .hero-corner { align-self: center; margin-top: 26px; }
  .hero-wrap { padding: 0 24px; max-width: calc(var(--hero-fs) * 5.27 + 48px); }
  .hero-sub { margin-bottom: 30px; }
  .hero-chips { margin-top: 34px; }
}
@media (max-width: 560px) {
  .hero { padding: 52px 0 84px; min-height: 0; --hero-fs: clamp(36px, min(15.4vw, 19vh), 76px); }
  /* 移动端字距收到 -0.025：小屏上 6 字行本就短，负字距过紧会粘连 */
  .hero h1 { line-height: 1.17; letter-spacing: -0.025em; margin-bottom: 24px; }
  .hero-rule { width: 48px; margin-bottom: 24px; }
  .hero-sub { font-size: 14.5px; margin-bottom: 26px; }
  /* ⛔ 胶囊字号的下限是 13px：低于这个值在手机上也读不清，
     空间不够应改"换行"（flex-wrap 已开），不该改"字号" */
  .hero-chips { gap: 8px; margin-top: 30px; }
  .hero-chips .chip { font-size: 13px; padding: 7px 13px; }
}
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 999px; padding: 9px 16px;
  font-size: 13.5px; color: var(--ink);
  box-shadow: var(--shadow-xs);
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease);
}
.chip:hover {
  transform: translateY(-2px);
  border-color: rgba(11, 107, 242, .28);
  box-shadow: 0 6px 18px rgba(11, 107, 242, .1);
}
.chip svg { width: 15px; height: 15px; color: var(--teal); flex: none; }

/* ===== 按钮体系 ===== */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 30px; border-radius: 999px;
  font-size: 15px; font-weight: 500;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease),
              background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  cursor: pointer;
  border: 1px solid transparent;
}
.btn svg { width: 17px; height: 17px; }
.btn > * { position: relative; z-index: 1; }

.btn-primary {
  background: linear-gradient(135deg, var(--brand) 0%, #0A8FD8 100%);
  color: #fff;
  box-shadow: 0 6px 18px rgba(11, 107, 242, .24);
}
.btn-primary::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 45%;
  left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .34), transparent);
  transition: left var(--t-slow) var(--ease);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-brand-lg);
}
.btn-primary:hover::before { left: 115%; }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: rgba(255, 255, 255, .9);
  color: var(--ink); border-color: var(--line-strong);
}
.btn-ghost:hover {
  border-color: var(--brand); color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(11, 107, 242, .1);
}

.btn-warm {
  background: linear-gradient(135deg, var(--warm) 0%, #F2682F 100%);
  color: #fff;
  box-shadow: 0 6px 18px rgba(255, 122, 69, .24);
}
.btn-warm:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(255, 122, 69, .3); }

.btn-block { display: flex; width: 100%; text-align: center; }

/* ===== 数据条 ===== */
/* 数据条：满屏首屏下方的第一块「小东西」，必须收着。
   主标语 116px 时这里若还给 30px，两块会互相抢注意力，对比就垮了。
   压到 20px + 紧凑内边距，读起来像一行脚注注解，而不是第二主角。 */
.stats-bar {
  position: relative; z-index: 2;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-radius: var(--radius-xl);
  margin: -48px auto 0;
  max-width: 1140px;
  padding: 24px 0;
  box-shadow: var(--shadow-pop);
  border: 1px solid rgba(255, 255, 255, .9);
}
/* 顶部一道渐变描边高光，让浮起来的白条有边界 */
.stats-bar::before {
  content: ""; position: absolute; left: 12%; right: 12%; top: -1px; height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(11, 107, 242, .5), rgba(14, 165, 160, .45), transparent);
  border-radius: 2px;
}
.stats-wrap { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 18px; }
.stats-wrap .stat { display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; }
.stats-wrap .stat strong {
  font-size: 20px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25;
  background: linear-gradient(160deg, var(--brand) 0%, #0A8FD8 60%, var(--teal) 130%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--brand);
}
.stats-wrap .stat span { font-size: 13px; color: var(--muted); }

/* ===== Section 通用 ===== */
.section { padding: 104px 0; position: relative; }
/* 交替底色用**显式类**而不是 :nth-child(even)。
   nth-child 是按「元素位置」选择：中间插入一个新 section，后面所有区块的
   索引都会偏移 1，明暗整体翻转——白卡片区块会落到白底上变成「白底白卡」，
   层次全丢。显式类与位置解耦，新增区块不再有副作用。 */
.section-alt {
  background: linear-gradient(180deg, var(--surface) 0%, #FCFDFF 100%);
}
.section-head { text-align: center; max-width: 720px; margin: 0 auto 60px; }
.section-head h2 {
  font-size: 36px; color: var(--ink); font-weight: 600;
  margin: 0 0 18px; letter-spacing: 0.01em; line-height: 1.35;
}
.section-head p { color: var(--muted); font-size: 16.5px; line-height: 1.85; margin: 0; }
.section-head .kicker {
  display: inline-block; font-size: 12.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--teal-deep);
  background: var(--teal-soft);
  border: 1px solid rgba(14, 165, 160, .16);
  padding: 5px 14px; border-radius: 999px;
  margin-bottom: 16px;
}

/* ===== 核心优势 ===== */
/* 刻意不做等高：卡片内容长度天然差 2 倍以上，强行等高只会把短卡撑出大片空白，
   视觉上反而更"挤"（读者看到的是「一块密字 + 一块空」的错位）。让每张卡按内容
   自然高度收口，纵向留白交给 gap。 */
.adv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; align-items: start; }

/* 通用卡片：渐变描边（双层背景法）
   —— 底层 linear-gradient 铺在 border-box 形成边框色，上层纯色铺在 padding-box 盖住中间，
      再配 border: 1px solid transparent。这个做法在 border-radius 下不会出现四角断裂，
      优于「外层 div 加 padding」的老办法。 */
.adv-card {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 36px 34px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, rgba(11, 107, 242, .22), rgba(230, 234, 240, .9) 42%, rgba(14, 165, 160, .16)) border-box;
  box-shadow: var(--shadow-card);
  transition: transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              background var(--t-base) var(--ease);
  overflow: hidden;
}
.adv-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-pop);
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, rgba(11, 107, 242, .45), rgba(14, 165, 160, .3)) border-box;
}
.adv-icon {
  width: 52px; height: 52px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--brand-soft), #DCEBFF);
  color: var(--brand);
  margin-bottom: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 3px 10px rgba(11, 107, 242, .1);
  transition: transform var(--t-base) var(--ease);
}
.adv-card:hover .adv-icon { transform: scale(1.06) rotate(-2deg); }
.adv-icon svg { width: 25px; height: 25px; }
.adv-icon.teal {
  background: linear-gradient(140deg, var(--teal-soft), #D3F0EE);
  color: var(--teal-deep);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 3px 10px rgba(14, 165, 160, .12);
}
.adv-icon.warm {
  background: linear-gradient(140deg, var(--warm-soft), #FFE3D6);
  color: #E85F26;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 3px 10px rgba(255, 122, 69, .12);
}
.adv-card h3 {
  font-size: 19.5px; color: var(--ink); margin: 0 0 14px;
  font-weight: 600; letter-spacing: 0; line-height: 1.5;
}
.adv-card > p { color: var(--muted); font-size: 15px; line-height: 1.9; margin: 0 0 18px; }
.adv-list { display: grid; gap: 2px; }
.adv-list li {
  font-size: 14.5px; color: var(--ink); line-height: 1.75;
  padding: 6px 0 6px 22px; position: relative;
}
.adv-list li::before {
  content: ""; position: absolute; left: 2px; top: 16px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--teal);
  box-shadow: 0 0 0 3px rgba(14, 165, 160, .13);
}
.adv-card .adv-note {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px dashed var(--line);
  font-size: 13px; color: var(--faint); line-height: 1.8;
}

/* 第 7 条：内容最长，改「标签 + 说明」两行式，替掉原来双列塞长文 */
.adv-card.wide { grid-column: 1 / -1; }
.adv-feature-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 16px; margin-top: 4px;
}
.adv-feature {
  background: linear-gradient(160deg, var(--surface-3), var(--surface-2));
  border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 22px 24px;
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.adv-feature:hover { border-color: rgba(11, 107, 242, .3); transform: translateY(-2px); }
.adv-feature h4 {
  font-size: 15.5px; color: var(--ink); margin: 0 0 10px; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.adv-feature h4::before {
  content: ""; width: 3px; height: 15px; border-radius: 2px;
  background: linear-gradient(180deg, var(--brand), var(--teal));
  flex: none;
}
.adv-feature p { font-size: 14px; color: var(--muted); line-height: 1.9; margin: 0; }
.adv-points {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px 28px; margin-top: 18px; padding-top: 18px;
  border-top: 1px dashed var(--line);
}
.adv-points li {
  font-size: 14px; color: var(--muted); line-height: 1.75;
  padding-left: 20px; position: relative;
}
.adv-points li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 7px; height: 7px; border-radius: 50%;
  border: 1.5px solid var(--teal); background: transparent;
}

/* ===== 诊疗项目 ===== */
/* 服务卡结构统一（图标 + 标题 + 描述 + 标签），保留等高让底部标签横向对齐 */
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.service-card {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 34px 30px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, rgba(11, 107, 242, .2), rgba(230, 234, 240, .9) 45%, rgba(14, 165, 160, .16)) border-box;
  box-shadow: var(--shadow-card);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease),
              background var(--t-base) var(--ease);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.service-card::after {
  /* 顶部一道细渐变线，卡片被 hover 时点亮 —— 比整卡变色克制 */
  content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 2px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, var(--brand), var(--teal));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-slow) var(--ease);
}
.service-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-pop);
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, rgba(11, 107, 242, .42), rgba(14, 165, 160, .28)) border-box;
}
.service-card:hover::after { transform: scaleX(1); }
.service-icon {
  width: 50px; height: 50px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--brand-soft), #DCEBFF);
  color: var(--brand); margin-bottom: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 3px 10px rgba(11, 107, 242, .1);
  transition: transform var(--t-base) var(--ease);
}
.service-card:hover .service-icon { transform: scale(1.06) rotate(-2deg); }
.service-icon svg { width: 24px; height: 24px; }
.service-card h3 { font-size: 19px; color: var(--ink); margin: 0 0 12px; font-weight: 600; line-height: 1.5; }
.service-card p { color: var(--muted); font-size: 14.5px; line-height: 1.9; margin: 0 0 18px; }
.service-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.service-tags span {
  font-size: 12.5px; color: var(--brand);
  background: var(--brand-soft);
  border: 1px solid rgba(11, 107, 242, .1);
  padding: 5px 12px; border-radius: 999px; line-height: 1.5;
  transition: background var(--t-fast) var(--ease);
}
.service-card:hover .service-tags span { background: #DCEBFF; }

/* ===== 专家团队 ===== */
.doctor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.doctor-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, rgba(11, 107, 242, .2), rgba(230, 234, 240, .9) 45%, rgba(14, 165, 160, .18)) border-box;
  box-shadow: var(--shadow-card);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease),
              background var(--t-base) var(--ease);
  display: flex; flex-direction: column;
}
.doctor-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-pop);
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, rgba(11, 107, 242, .42), rgba(14, 165, 160, .3)) border-box;
}
.doctor-avatar {
  height: 168px; position: relative; overflow: hidden;
  background:
    radial-gradient(320px 180px at 50% 120%, rgba(11, 107, 242, .18), transparent 70%),
    linear-gradient(160deg, #EEF4FF, #E4F5F3);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand);
}
/* 头像区加一层同心圆纹，避免大面积渐变显得空 */
.doctor-avatar::before {
  content: ""; position: absolute; width: 240px; height: 240px; border-radius: 50%;
  border: 1px solid rgba(11, 107, 242, .09);
  box-shadow: 0 0 0 34px rgba(11, 107, 242, .04), 0 0 0 68px rgba(11, 107, 242, .022);
}
.doctor-avatar svg { width: 64px; height: 64px; opacity: .5; position: relative; }
.doctor-avatar .dept {
  position: absolute; left: 16px; top: 16px;
  font-size: 12.5px; font-weight: 500; color: var(--brand);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 4px 12px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
}
.doctor-body { padding: 24px 26px 28px; flex: 1; display: flex; flex-direction: column; }
.doctor-body h3 { font-size: 20px; margin: 0 0 8px; font-weight: 600; color: var(--ink); }
.doctor-role { font-size: 13.5px; color: var(--teal-deep); font-weight: 500; margin-bottom: 18px; line-height: 1.6; }
.doctor-creds { margin: 0 0 18px; display: grid; gap: 2px; }
.doctor-creds li {
  font-size: 13.5px; color: var(--muted); padding: 4px 0 4px 18px;
  position: relative; line-height: 1.8;
}
.doctor-creds li::before {
  content: ""; position: absolute; left: 0; top: 12px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--faint);
}
.doctor-body p {
  font-size: 13.5px; color: var(--muted); line-height: 1.9;
  margin: auto 0 0; padding-top: 16px; border-top: 1px dashed var(--line);
}

/* ===== 数字化诊疗（深色带） ===== */
.digital-band {
  position: relative; overflow: hidden;
  background:
    radial-gradient(760px 360px at 86% 0%, rgba(14, 165, 160, .26), transparent 60%),
    radial-gradient(680px 340px at 4% 100%, rgba(11, 107, 242, .34), transparent 60%),
    linear-gradient(150deg, var(--brand-ink) 0%, var(--brand-deep) 60%, #073F91 100%);
  color: #fff; padding: 104px 0;
  isolation: isolate;
}
/* 深色带里的网格线：极淡的工程感底纹，暗示「数字化 / 精确」 */
.digital-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  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: 56px 56px;
  mask-image: radial-gradient(700px 400px at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(700px 400px at 50% 40%, #000 20%, transparent 78%);
}
.digital-band .section-head h2 { color: #fff; }
.digital-band .section-head p { color: rgba(255, 255, 255, .74); }
.digital-band .kicker {
  color: #7FE3DA;
  background: rgba(127, 227, 218, .12);
  border-color: rgba(127, 227, 218, .22);
}
/* 2×2 而不是 1×4：四列时单列正文仅约 210px，中文每行只能排 9～10 字，
   折行碎片化严重。两列后单列约 470px，一行可容纳 22 字左右，阅读节奏正常。 */
.digital-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.digital-item {
  background: linear-gradient(150deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .045));
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--radius-md);
  padding: 32px 30px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease),
              background var(--t-base) var(--ease);
}
.digital-item:hover {
  transform: translateY(-4px);
  border-color: rgba(127, 227, 218, .42);
  background: linear-gradient(150deg, rgba(255, 255, 255, .14), rgba(127, 227, 218, .07));
}
.digital-item .num {
  font-size: 12.5px; font-weight: 600; color: #7FE3DA; letter-spacing: .08em;
  margin-bottom: 14px; display: block;
}
.digital-item h3 { font-size: 17.5px; margin: 0 0 12px; font-weight: 600; color: #fff; line-height: 1.5; }
.digital-item p { font-size: 14px; color: rgba(255, 255, 255, .74); margin: 0; line-height: 1.9; }
.digital-note {
  margin-top: 34px; padding: 22px 28px;
  background: rgba(255, 255, 255, .07);
  border-left: 3px solid #7FE3DA;
  border-radius: var(--radius-sm);
  font-size: 14.5px; color: rgba(255, 255, 255, .84); line-height: 1.9;
}

/* ===== 公益义诊 ===== */
.community-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 40px; align-items: start; }
.community-text p { color: var(--muted); font-size: 15.5px; line-height: 1.95; margin: 0 0 22px; }
.community-list { display: grid; gap: 12px; }
.community-list li {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--radius-md); padding: 17px 20px;
  font-size: 14.5px; color: var(--ink); line-height: 1.85;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(120deg, rgba(14, 165, 160, .22), rgba(230, 234, 240, .9) 55%, rgba(11, 107, 242, .16)) border-box;
  box-shadow: var(--shadow-xs);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease);
}
.community-list li:hover { transform: translateX(3px); box-shadow: var(--shadow-card); }
.community-list li svg { width: 18px; height: 18px; color: var(--teal); flex: none; margin-top: 5px; }
.community-list li strong { font-weight: 600; }
.community-cta {
  position: sticky; top: 100px; overflow: hidden;
  background:
    radial-gradient(400px 260px at 100% 0%, rgba(127, 227, 218, .28), transparent 62%),
    linear-gradient(150deg, var(--brand) 0%, #0A8FD8 100%);
  border-radius: var(--radius-xl); padding: 40px 36px; color: #fff;
  box-shadow: 0 20px 50px rgba(11, 107, 242, .26);
}
.community-cta::before {
  content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%;
  right: -90px; bottom: -110px;
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 0 0 40px rgba(255, 255, 255, .07), 0 0 0 80px rgba(255, 255, 255, .04);
  pointer-events: none;
}
.community-cta h3 { position: relative; font-size: 22px; margin: 0 0 14px; font-weight: 600; line-height: 1.45; }
.community-cta p { position: relative; font-size: 14.5px; color: rgba(255, 255, 255, .88); line-height: 1.9; margin: 0 0 26px; }
.community-cta .btn { position: relative; background: #fff; color: var(--brand); box-shadow: 0 8px 22px rgba(0, 0, 0, .14); }
.community-cta .btn:hover { background: #F0F6FF; transform: translateY(-2px); }

/* ===== 就诊流程 ===== */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.process-step {
  position: relative;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--radius-lg); padding: 32px 26px;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(150deg, rgba(11, 107, 242, .2), rgba(230, 234, 240, .9) 50%, rgba(14, 165, 160, .16)) border-box;
  box-shadow: var(--shadow-card);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.process-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); }
/* 步骤之间加连接线，四步的先后关系一眼可见 */
.process-step::after {
  content: ""; position: absolute; right: -15px; top: 48px;
  width: 8px; height: 8px;
  border-top: 2px solid var(--line-strong);
  border-right: 2px solid var(--line-strong);
  transform: rotate(45deg);
}
.process-step:last-child::after { display: none; }
.process-num {
  width: 38px; height: 38px; border-radius: 12px;
  background: linear-gradient(140deg, var(--brand), #0A8FD8);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600; margin-bottom: 18px;
  box-shadow: 0 5px 14px rgba(11, 107, 242, .26);
}
.process-step h3 { font-size: 17px; margin: 0 0 10px; font-weight: 600; color: var(--ink); line-height: 1.5; }
.process-step p { font-size: 14px; color: var(--muted); line-height: 1.9; margin: 0; }

/* ===== FAQ ===== */
.faq-list { display: flex; flex-direction: column; gap: 14px; }
.faq-item {
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  overflow: hidden;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(120deg, rgba(11, 107, 242, .16), rgba(230, 234, 240, .9) 55%, rgba(14, 165, 160, .14)) border-box;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.faq-item:hover { box-shadow: var(--shadow-card); }
.faq-item[open] {
  box-shadow: var(--shadow-card);
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(120deg, rgba(11, 107, 242, .45), rgba(14, 165, 160, .28)) border-box;
}
.faq-item summary {
  cursor: pointer; padding: 22px 58px 22px 26px;
  font-weight: 500; font-size: 16px;
  color: var(--ink); list-style: none; position: relative;
  line-height: 1.7;
  transition: color var(--t-fast) var(--ease);
}
.faq-item summary:hover { color: var(--brand); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; line-height: 24px; text-align: center;
  font-size: 19px; color: var(--brand); font-weight: 400;
  border-radius: 50%; background: var(--brand-soft);
  transition: transform var(--t-base) var(--ease), background var(--t-fast) var(--ease);
}
.faq-item[open] summary::after {
  content: "\2212";
  transform: translateY(-50%) rotate(180deg);
  background: var(--brand); color: #fff;
}
.faq-item p {
  padding: 0 26px 24px; color: var(--muted); font-size: 15px;
  line-height: 1.95; margin: 0; max-width: 68em;
}

/* ===== 关于 + 联系 ===== */
.about-grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 44px; align-items: start; }
.about-text p { color: var(--muted); margin: 0 0 20px; font-size: 15.5px; line-height: 2.0; }
.about-text p strong { color: var(--ink); font-weight: 600; }
.contact-card {
  position: sticky; top: 100px; overflow: hidden;
  background:
    radial-gradient(360px 240px at 100% 0%, rgba(14, 165, 160, .3), transparent 60%),
    linear-gradient(155deg, #101C34 0%, var(--ink) 100%);
  color: #fff; border-radius: var(--radius-xl);
  padding: 38px 34px;
  box-shadow: 0 22px 54px rgba(15, 23, 42, .24);
}
.contact-card h3 { position: relative; font-size: 21px; margin: 0 0 24px; font-weight: 600; letter-spacing: 0.01em; }
.contact-card ul li {
  font-size: 14px; padding: 15px 0; border-bottom: 1px solid rgba(255, 255, 255, .1);
  line-height: 1.8;
}
.contact-card ul li:last-child { border-bottom: none; }
.contact-card ul li span { display: block; font-size: 11.5px; color: rgba(255, 255, 255, .55); margin-bottom: 6px; letter-spacing: .04em; }
.contact-card ul li a { color: #fff; transition: color var(--t-fast) var(--ease); }
.contact-card ul li a:hover { color: #7FE3DA; }
.contact-card .btn { margin-top: 26px; }

/* ===== Footer ===== */
.site-footer {
  position: relative;
  background: linear-gradient(180deg, var(--surface-2) 0%, #F1F5FA 100%);
  padding: 58px 0 34px;
  border-top: 1px solid var(--line);
}
.site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(11, 107, 242, .35), rgba(14, 165, 160, .3), transparent);
}
.footer-grid { display: flex; justify-content: space-between; align-items: flex-start; gap: 36px; flex-wrap: wrap; }
.footer-brand { max-width: 460px; }
.footer-logo { height: 40px; width: auto; margin-bottom: 16px; }
.footer-brand p { font-size: 14px; color: var(--muted); margin: 0 0 14px; line-height: 1.7; }
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-links a { font-size: 13.5px; color: var(--muted); transition: color var(--t-fast) var(--ease); }
.footer-links a:hover { color: var(--brand); }
.footer-meta p { font-size: 13px; color: var(--faint); margin: 0 0 4px; line-height: 1.7; }
.footer-icp { margin-top: 6px; }
.footer-icp a { color: var(--faint); text-decoration: none; margin-right: 12px; }
.footer-icp a:hover { color: var(--brand); text-decoration: underline; }
.footer-disclaimer {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--faint); line-height: 1.7;
}

/* ===== 底部固定操作条 ===== */
.float-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--line);
  display: none;
}
.float-bar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 10px 0;
}
.float-phone { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--brand); }
.float-phone svg { width: 18px; height: 18px; }
.float-actions { display: flex; gap: 10px; }
.float-actions .btn { padding: 11px 20px; font-size: 14px; }

/* ============================================================
   滚动入场动效
   ------------------------------------------------------------
   v1 只有「位移 16px + 淡入」，所有元素一个模子 → 页面滚起来是整齐划一
   的机械感。v2 拆成三级，按内容重要性分配幅度：

     .reveal        默认：位移 22px + 淡入（正文块、列表项）
     .reveal-soft   轻量：位移 12px + 淡入（密集小元素，幅度大反而乱）
     .reveal-scale  强调：位移 26px + 缩放 .97 + 微模糊（卡片，视觉重心）

   全部走 transform / opacity / filter，在合成层完成，不触发重排。
   ============================================================ */
.reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity .62s var(--ease), transform .62s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

.reveal-soft {
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.reveal-soft.in { opacity: 1; transform: none; }

.reveal-scale {
  opacity: 0; transform: translateY(26px) scale(.97);
  filter: blur(3px);
  transition: opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease);
}
.reveal-scale.in { opacity: 1; transform: none; filter: blur(0); }

/* 数字条逐项上浮：stagger 由 JS 写 transitionDelay */
.stats-wrap .stat.reveal-soft { transition-duration: .56s; }

/* 光标跟随光晕（Linear / Vercel 同款）
   —— --mx / --my 由 main.js 写入百分比，这里只做绘制。
      用 radial-gradient 做软光斑，opacity 默认 0，卡片 hover 才点亮。 */
.spotlight { position: relative; }
.spotlight::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(
    360px circle at var(--mx, 50%) var(--my, 50%),
    rgba(11, 107, 242, .10),
    rgba(14, 165, 160, .05) 42%,
    transparent 68%
  );
  transition: opacity var(--t-base) var(--ease);
}
.spotlight:hover::before { opacity: 1; }
.spotlight > * { position: relative; z-index: 1; }

/* ===== 响应式 ===== */
@media (max-width: 980px) {
  .adv-grid, .service-grid, .doctor-grid, .process-grid { grid-template-columns: 1fr 1fr; }
  .digital-grid { grid-template-columns: 1fr 1fr; }
  .community-grid { grid-template-columns: 1fr; gap: 28px; }
  .about-grid { grid-template-columns: 1fr; gap: 28px; }
  .community-cta, .contact-card { position: static; }
  .adv-feature-grid { grid-template-columns: 1fr; }
  .process-step::after { display: none; }
}
@media (max-width: 900px) {
  .container { padding: 0 20px; }
  .topbar-left .topbar-item.optional { display: none; }
  .nav-links { display: none; }
  /* ⛔ 首屏的字号/间距一律由上方 hero 专项响应式块管（第 344 行起）。
     这里曾经复写 .hero h1 / .hero-sub / .stats-bar —— 同属性后出现的规则优先，
     结果把满屏字号压回 34px（占宽仅 47%，等于白做）。
     **同一个组件的响应式只允许出现在一处。** */
  .hero::before, .hero::after { filter: blur(58px); opacity: .8; }
  .stats-wrap { gap: 18px; }
  .section { padding: 60px 0; }
  .section-head h2 { font-size: 27px; }
  .section-head p { font-size: 15px; }
  .float-bar { display: block; }
  body { padding-bottom: 66px; }
}
@media (max-width: 640px) {
  .adv-grid, .service-grid, .doctor-grid, .process-grid, .digital-grid { grid-template-columns: 1fr; }
  .adv-card, .service-card { padding: 28px 24px; }
  .adv-points { grid-template-columns: 1fr; }
  .section { padding: 64px 0; }
  .section-head h2 { font-size: 26px; }
  .topbar-right { display: none; }
  .float-actions .btn-primary { display: none; }
}

/* ===== 无障碍：尊重系统「减少动态效果」 =====
   动效是装饰，不是功能。用户在系统里关掉动画时，所有入场动效直接显示终态。 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal, .reveal-soft, .reveal-scale {
    opacity: 1 !important; transform: none !important; filter: none !important;
  }
  .hero::before, .hero::after { animation: none; }
  /* 色相流转也停掉，并把渐变收成静态单色段 —— 留动画会违背"减少动效"的意愿 */
  .hero h1 { animation: none; background-position: 50% 50%; }
}

/* ===== 打印 ===== */
@media print {
  .site-nav, .float-bar, .topbar, .hero::before, .hero::after, .hero-grain { display: none !important; }
  .reveal, .reveal-soft, .reveal-scale { opacity: 1 !important; transform: none !important; filter: none !important; }
}