/* 极简、零外部依赖（国内访问 CDN 字体与框架都慢），全部内联在这一份里。 */

/* 配色向「检测报告」靠：冷调白底 + 藏青主色 = 权威，
   青色只做技术点缀（数值、刻度、标签），不喧宾夺主。
   仪表感只给到分数卡那块深色读数屏，正文区一律浅色——
   这份报告要在微信里被转发、截图给老板看，通篇深色在那些场景下
   像极客工具，而不像检测机构出的报告；而且正文有大量要认真读的
   说明文字，密度铺满会让阅读变累。 */
:root {
  --bg: #f1f5fa;
  --card: #ffffff;
  --fg: #0d1a2b;
  --muted: #566a85;
  --line: #d7e1ef;
  --accent: #0b4da2;          /* 藏青：权威 */
  --tech: #0894b3;            /* 青：数据与技术细节 */
  --bad: #c8322a;
  --mid: #b9660a;
  --good: #04794d;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #091420; --card: #0f1e2e; --fg: #e3ecf7; --muted: #8ba2c0;
    --line: #1d3245; --accent: #4d9bf0; --tech: #22c3e0;
    --bad: #f2736b; --mid: #e5a03c; --good: #35c98d;
  }
}

/* 页宽。报告页是长文，太宽会让中文一行超过 55 字、读着累；
   落地页要摆表格和卡片，窄了显空。所以两者分开设，
   页头 / 正文 / 页脚统一读这个变量，不会各改各的对不齐。 */
:root { --page-w: 940px; }
body.landing { --page-w: 1100px; }

/* ── 动效 ──
   克制为准：只做 opacity/transform（不触发重排），时长都在 1s 内，
   且全部尊重 prefers-reduced-motion。检测报告的调性经不起花哨动画。 */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes growBar { from { width: 0; } }
@keyframes pulse   { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.75 system-ui, -apple-system, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
/* 页头吸顶后会盖住锚点目标，跳过去标题正好被压在下面。
   72px ≈ 页头高度 + 一点余量 */
[id] { scroll-margin-top: 72px; }
main { max-width: var(--page-w); margin: 0 auto; padding: 0 20px 64px; }
body.landing main { padding-top: 12px; }
h1, h2, h3 { line-height: 1.35; }
h2 { font-size: 20px; margin: 40px 0 14px; }
a { color: var(--accent); }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); }
th { font-weight: 600; color: var(--muted); font-size: 13px; }
code, pre { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

/* ── 页头（吸顶）── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);        /* 必须不透明，否则滚动的白卡片会透上来 */
  border-bottom: 1px solid var(--line);
}
/* 顶部指示条移到页头上，这样吸顶时它跟着留在视野里，
   放在 body 上的话一滚就没了 */
.topbar::before {
  content: ""; display: block; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--tech));
}
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
  max-width: var(--page-w); margin: 0 auto; padding: 14px 20px;
}
.brand {
  display: flex; align-items: center; gap: 9px;
  font-weight: 700; text-decoration: none; color: var(--fg);
}
.logo { flex: none; display: block; }
.brand-name { font-size: 17px; }
.tag {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; color: var(--tech); letter-spacing: .14em; text-transform: uppercase;
  font-weight: 400;
}
.nav { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.nav a { color: var(--muted); text-decoration: none; font-size: 14px; }
.nav a:hover { color: var(--fg); }
.nav .nav-cta {
  padding: 7px 15px; border-radius: 7px;
  background: var(--fg); color: var(--bg); font-weight: 600;
}
.nav .nav-cta:hover { background: var(--accent); color: #fff; }

/* ── 页脚 ── */
.foot {
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: 13px;
  background: var(--card);
}
.foot-main {
  display: flex; gap: 40px; flex-wrap: wrap;
  max-width: var(--page-w); margin: 0 auto; padding: 32px 20px 24px;
}
.foot-brand { flex: 1 1 340px; }
.foot-logo {
  display: flex; align-items: center; gap: 9px;
  font-weight: 700; color: var(--fg); font-size: 15px; margin-bottom: 10px;
}
.foot-brand p { margin: 8px 0; }
.foot-method { font-size: 12px; opacity: .85; }
/* 法人实体信息：对国内企业客户，有没有这一段直接影响「敢不敢付钱」 */
.foot-corp { font-size: 12px; line-height: 1.9; }
.foot-corp a { color: var(--muted); }
.foot-links { display: flex; flex-direction: column; gap: 9px; flex: 0 0 auto; }
.foot-links a { color: var(--muted); text-decoration: none; font-size: 13px; }
.foot-links a:hover { color: var(--accent); }
.copyright {
  max-width: var(--page-w); margin: 0 auto; padding: 14px 20px 32px;
  border-top: 1px solid var(--line); text-align: center; font-size: 12px;
}
@media (max-width: 860px) {
  .hero { padding: 48px 20px 72px; }
  .hero h1 { font-size: 40px; }
  .hero .lede { font-size: 16px; }
}
@media (max-width: 560px) {
  .hero { padding: 34px 20px 60px; }
  .hero h1 { font-size: 30px; letter-spacing: -.01em; }
  .pill { font-size: 12px; margin-bottom: 20px; }
  .chips { margin: 24px 0 0; }
  /* 吸顶之后页头每一像素都在占用阅读区，窄屏要压到最紧 */
  .top { padding: 10px 20px 12px; gap: 10px; }
  .tag { display: none; }
  .brand-name { font-size: 16px; }
  .nav { gap: 14px; width: 100%; }
  .nav a { font-size: 13px; }
  .nav .nav-cta { padding: 6px 12px; }
  [id] { scroll-margin-top: 104px; }   /* 窄屏页头是两行，更高 */
  .foot-main { gap: 22px; }
  .foot-links { flex-direction: row; flex-wrap: wrap; gap: 8px 18px; }
}

/* ── 首页正文通用 ──
   宽屏下要靠多栏用掉横向空间，单纯把段落拉长只会更难读：
   连续文本一律限宽到 760px 以内（中文约 42 字/行）。 */
.lede, .note { max-width: 760px; }
.check { display: flex; gap: 10px; margin: 26px 0 8px; flex-wrap: wrap; max-width: 720px; }
.check input {
  flex: 1 1 260px; padding: 13px 15px; font-size: 16px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--fg);
}
.check input:focus { outline: 2px solid var(--accent); border-color: transparent; }
.check button {
  padding: 13px 26px; font-size: 16px; font-weight: 600; cursor: pointer;
  border: 0; border-radius: 8px; background: var(--accent); color: #fff;
}
.check button:hover { background: #0a4189; }
.err { color: var(--bad); font-size: 14px; margin: 6px 0; }
.hint { color: var(--muted); font-size: 13px; }
.note { color: var(--muted); font-size: 14px; }
/* 好/坏两列用颜色区分，扫一眼就知道差距在哪 */
.cmp td.good { color: var(--good); }
.cmp td.bad { color: var(--bad); font-weight: 600; }

/* ── 首屏 ──
   浅青蓝渐变 + 顶部光晕。之前是深色，视觉冲击强但压抑，
   而且跟下面浅色内容区割成两截；转浅之后整页是一体的，
   层次靠光晕、网格和字号拉开，不靠明暗对比。 */
.hero-wrap {
  background:
    radial-gradient(1100px 420px at 50% -14%, rgba(8, 148, 179, .16), transparent 68%),
    linear-gradient(180deg, #e7f2f7 0%, var(--bg) 78%);
  border-bottom: 1px solid var(--line);
  position: relative; overflow: hidden;
}
.hero-wrap::after {          /* 极淡的坐标网格，检测仪器的底子 */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(11, 77, 162, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 77, 162, .045) 1px, transparent 1px);
  background-size: 30px 30px;
}
.hero {
  position: relative; z-index: 1; text-align: center;
  max-width: var(--page-w); margin: 0 auto; padding: 72px 20px 84px;
}
/* 首屏元素依次入场。backwards 保证动画开始前就处于初始态，不会先闪一下 */
.hero > * { animation: fadeUp .7s cubic-bezier(.2, .7, .3, 1) backwards; }
.hero .pill  { animation-delay: .04s; }
.hero h1     { animation-delay: .12s; }
.hero .lede  { animation-delay: .20s; }
.hero .check { animation-delay: .28s; }
.hero .hint  { animation-delay: .34s; }
.hero .chips { animation-delay: .40s; }

.pill {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 30px;
  padding: 6px 16px; border-radius: 999px; font-size: 13px;
  background: var(--card); border: 1px solid var(--line);
  color: var(--muted); text-decoration: none;
  transition: border-color .2s, color .2s, transform .2s;
}
.pill:hover { border-color: var(--tech); color: var(--accent); transform: translateY(-1px); }
.pill .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--tech);
  animation: pulse 2.4s ease-in-out infinite;
}
.hero h1 {
  font-size: 60px; line-height: 1.16; letter-spacing: -.025em; font-weight: 700;
  margin: 0 auto 22px; color: var(--fg);
}
.hero h1 .hl {
  background: linear-gradient(96deg, #0894b3, #0b4da2);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .lede {
  color: var(--muted); font-size: 18px; line-height: 1.75;
  max-width: 30em; margin: 0 auto 32px;
}
.hero .lede strong { color: var(--fg); }
.hero .check { justify-content: center; margin: 0 auto 12px; max-width: 620px; }
.hero .check input { background: var(--card); }
.hero .hint { text-align: center; }
/* 检测项做成 chip，比塞进句子里更快被扫到 */
.chips { margin: 34px 0 0; }
.chip {
  display: inline-block; margin: 5px 4px; padding: 4px 11px;
  border-radius: 6px;
  background: var(--card); border: 1px solid var(--line);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px; color: var(--muted);
}

.items {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0 36px;
}
.items li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.items b { display: block; }
.items span { color: var(--muted); font-size: 14px; }

/* ── 常见问题（折叠）──
   单列 + 默认收起。两列折叠会显得碎，单列的问题清单更整齐好扫。 */
.faq-list { max-width: 780px; display: grid; gap: 8px; }
.faq-item {
  border-radius: 10px;
  background: var(--card); border: 1px solid var(--line);
}
.faq-item summary {
  cursor: pointer; padding: 14px 18px; font-weight: 600; font-size: 15px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  list-style: none;                       /* 去掉默认三角，换成右侧的 +/− */
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; flex: none;
  color: var(--muted); font-size: 18px; font-weight: 400; line-height: 1;
  transition: transform .2s ease, color .2s ease;
}
.faq-item[open] summary::after { content: "−"; color: var(--accent); }
.faq-item summary:hover { color: var(--accent); }
.faq-item summary:hover::after { color: var(--accent); }
.faq-item p {
  margin: 0; padding: 0 18px 16px; font-size: 14.5px; color: var(--muted);
  max-width: 62ch;
}

/* 章节自动编号，像检测报告的条目号 */
.report { counter-reset: sec; }
.report > section > h2::before {
  counter-increment: sec;
  content: counter(sec, decimal-leading-zero) " / ";
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px; color: var(--tech); font-weight: 400;
}

/* ── 分数卡 = 仪器读数屏 ──
   全站唯一的深色区域。仪表感集中在「读数」上，正文区保持浅色——
   报告有大量需要认真读的说明文字，密度铺满会让阅读变累，
   而且它要能转发、截图给非技术的人看。 */
.score-card {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  margin: 20px 0 8px; padding: 26px; border-radius: 12px;
  background: linear-gradient(155deg, #12304f 0%, #0a1a2b 100%);
  border: 1px solid #1e4066; border-left: 6px solid var(--muted);
  color: #e8f1fb;
}
.score-card::after {           /* 屏内细网格，只在这块深色区域里 */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 18px 18px;
}
.score-card > * { position: relative; z-index: 1; }
.score-card.sev-bad { border-left-color: var(--bad); }
.score-card.sev-mid { border-left-color: var(--mid); }
.score-card.sev-good { border-left-color: var(--good); }
.score-card h1 { color: #fff; }
.score-card .headline { color: #a3bcd8; }
.score-card .num span,
.score-card .gauge-marks,
.score-card .gauge-legend { color: #85a2c2; }
.score-main { text-align: center; }
.num b {
  font-size: 56px; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.num span { color: var(--muted); font-size: 16px; margin-left: 4px; }
.grade { margin-top: 6px; font-weight: 600; }
/* 深底上要提亮，藏青配暗红读不出来 */
.sev-bad .num b, .sev-bad .grade { color: #ff8079; }
.sev-mid .num b, .sev-mid .grade { color: #f2b544; }
.sev-good .num b, .sev-good .grade { color: #3ddb9d; }
.score-side { flex: 1 1 300px; }
.score-side h1 { font-size: 22px; margin: 0 0 6px; word-break: break-all; }
.headline { margin: 0; color: var(--muted); }

/* 分数刻度条：仪表读数的感觉，同时把行业基准标在同一根轴上 */
.gauge { margin-top: 16px; }
.gauge-track {
  position: relative; height: 8px; border-radius: 4px;
  background: rgba(255, 255, 255, .13);
}
.gauge-track .fill {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px;
  background: var(--muted);
  /* 从 0 长到 inline style 里的目标宽度，仪表指针归位的感觉。
     纯 CSS，不需要 JS 参与 */
  animation: growBar 1.1s .3s cubic-bezier(.2, .7, .3, 1) backwards;
}
.sev-bad .fill { background: #ff8079; }
.sev-mid .fill { background: #f2b544; }
.sev-good .fill { background: #3ddb9d; }
.gauge-track .mark {
  position: absolute; top: -5px; bottom: -5px; width: 2px;
  background: #cfe0f2; opacity: .8; border-radius: 1px;
}
.gauge-marks {
  display: flex; justify-content: space-between; margin-top: 5px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px; color: var(--muted); font-style: normal;
}
.gauge-marks i { font-style: normal; }
.gauge-legend { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.summary { font-size: 15px; }
.bench tr.me { font-weight: 600; }
.bench tr.me td { background: color-mix(in srgb, var(--accent) 8%, transparent); }

/* ── 问题卡 ── */
.finding {
  margin: 14px 0; padding: 18px 20px; border-radius: 10px;
  background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--line);
}
.finding.sev-blocker { border-left-color: var(--bad); }
.finding.sev-high { border-left-color: var(--mid); }
.finding.sev-medium { border-left-color: var(--muted); }
.fhead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fhead h3 { margin: 0; font-size: 17px; flex: 1 1 auto; }
/* 严重度走终端风的方括号，不用色块——色块在一页里出现五六次太吵 */
.sev {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: var(--muted); white-space: nowrap;
}
.sev::before { content: "["; }
.sev::after  { content: "]"; }
.sev-blocker .sev { color: var(--bad); }
.sev-high .sev { color: var(--mid); }
.lost { font-size: 13px; color: var(--muted); white-space: nowrap; }
/* 实测证据：等宽 + 青色标记线，和主观论述明确区分开——
   报告的可信度就建立在「这是测出来的，不是我说的」 */
.evidence {
  font-size: 13px; color: var(--muted); margin: 8px 0;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  border-left: 2px solid var(--tech); padding-left: 9px;
  word-break: break-all;
}
.plain { margin: 10px 0; }
.impact, .fix { font-size: 15px; margin: 10px 0; }
.impact b, .fix b {
  display: inline-block; margin-right: 8px; font-size: 12px; letter-spacing: .05em;
  color: var(--muted); vertical-align: 1px;
}
.fix { color: var(--fg); }
details summary { cursor: pointer; font-size: 14px; color: var(--accent); margin-top: 6px; }
.code { position: relative; }
.code pre {
  overflow-x: auto; padding: 14px; border-radius: 7px; font-size: 13px;
  background: var(--bg); border: 1px solid var(--line);
}
.copy, .share, .btn {
  font: inherit; font-size: 14px; padding: 9px 16px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--card); color: var(--fg);
  cursor: pointer; text-decoration: none; display: inline-block;
}
.copy { position: absolute; top: 8px; right: 8px; padding: 4px 10px; font-size: 12px; }
.share { background: var(--accent); color: #fff; border-color: transparent; }

/* ── 其余分区 ── */
.passed ul { list-style: none; padding: 0; }
.passed li { padding: 7px 0 7px 26px; position: relative; font-size: 15px; }
.passed li::before { content: "✓"; position: absolute; left: 0; color: var(--good); font-weight: 700; }
.facts td:first-child { color: var(--muted); width: 42%; }
/* 检测读数一律等宽：数字对齐，看起来才像仪器出的数而不是手写的 */
.facts td:last-child, .bench td:not(:first-child), .cmp td:not(:first-child) {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13.5px; font-variant-numeric: tabular-nums;
}
.cta {
  position: relative;
  margin-top: 44px; padding: 24px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--line);
}
/* 取景框角标。只做左上右下两个角，四个角会显得刻意 */
.cta::before, .cta::after {
  content: ""; position: absolute; width: 14px; height: 14px;
  border: 2px solid var(--tech); opacity: .55; pointer-events: none;
}
/* 角标要跟着卡片圆角走，否则直角 L 压在弧线上会显得错位 */
.cta::before {
  top: -1px; left: -1px; border-right: 0; border-bottom: 0;
  border-top-left-radius: 12px;
}
.cta::after {
  bottom: -1px; right: -1px; border-left: 0; border-top: 0;
  border-bottom-right-radius: 12px;
}
.cta h2 { margin-top: 0; }
.contact { font-weight: 600; margin: 0 0 6px; }

/* 联系方式：全宽独立一区，二维码在左文字在右。窄屏下改为竖排居中 */
.contact-box {
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  margin: 18px 0; padding: 16px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.contact-box .qr {
  width: 150px; height: 150px; flex: none; border-radius: 7px;
  background: #fff;                 /* 深色模式下二维码必须保持白底才扫得出来 */
  padding: 6px; border: 1px solid var(--line);
}
.contact-text { flex: 1 1 200px; min-width: 0; }
.contact-text p { font-size: 14px; margin: 6px 0; }
@media (max-width: 480px) {
  .contact-box { justify-content: center; text-align: center; }
}
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 4px; }

/* 两条路径并列：自己找人改 / 我们代改。后者是接单入口，视觉上要更重。
   二维码不放在卡片里——它是联系方式，不属于某一条路径，
   塞进窄卡片会把右边撑高一大截，左边只能空着。移到下方全宽区。 */
.paths { display: flex; gap: 16px; flex-wrap: wrap; margin: 18px 0; }
.path {
  flex: 1 1 260px; padding: 18px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg);
  display: flex; flex-direction: column;      /* 两卡等高时按钮贴底对齐 */
}
.path.primary { border-color: var(--accent); border-width: 2px; }
.path h3 { margin: 0 0 8px; font-size: 16px; }
.path p { font-size: 14px; margin: 8px 0; }
.path .btn { margin-top: auto; align-self: flex-start; }
.path .contact { margin-top: auto; padding-top: 8px; }

/* ── 等待页 ──
   列出真正在抓的 8 个 URL，抓完一个亮一个。进度来自后端回调，
   不是定时器伪造的——假进度条骗不了人，还会砸掉「可复核」这块招牌。 */
.pending { padding: 48px 0 40px; max-width: 620px; margin: 0 auto; }
.pending h1 { font-size: 24px; margin: 0 0 8px; }
.pending .dom {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--accent); word-break: break-all;
}
.steps { list-style: none; padding: 0; margin: 26px 0; }
.steps li {
  display: flex; align-items: baseline; gap: 10px; position: relative;
  padding: 11px 0 11px 30px; border-bottom: 1px solid var(--line);
  color: var(--muted); font-size: 14px;
  transition: color .3s ease;
}
.steps li::before {          /* 未完成：转着的小圈；完成后换成对勾 */
  content: ""; position: absolute; left: 4px; top: 15px;
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--tech);
  animation: spin 900ms linear infinite;
}
.steps li b { font-weight: 600; color: var(--fg); opacity: .55; transition: opacity .3s ease; }
.steps li.done { color: var(--muted); }
.steps li.done b { opacity: 1; }
.steps li.done::before {
  content: "✓"; border: 0; animation: none;
  left: 3px; top: 10px; width: auto; height: auto;
  color: var(--good); font-weight: 700; font-size: 14px;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }

/* ── 滚动入场 ──
   .js 类由脚本加上：没有 JS 时这些规则不生效，内容照常可见。
   这条对我们尤其重要——卖 GEO 的站，内容不能依赖 JS 才出现。 */
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.in {
  opacity: 1; transform: none;
  transition: opacity .6s cubic-bezier(.2, .7, .3, 1), transform .6s cubic-bezier(.2, .7, .3, 1);
}

/* hover 微交互：只给可点击的东西，幅度压到 1-2px */
.check button, .btn, .share, .copy, .nav-cta {
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
}
.check button:hover, .btn:hover, .share:hover, .nav-cta:hover { transform: translateY(-1px); }
.check button:active, .btn:active, .share:active, .nav-cta:active { transform: translateY(0); }
.finding, .faq-item, .path {
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.finding:hover, .faq-item:hover {
  box-shadow: 0 8px 24px -14px rgba(13, 26, 43, .3);
}
.chip { transition: border-color .2s ease, color .2s ease; }
.chip:hover { border-color: var(--tech); color: var(--accent); }
.items li { transition: color .2s ease; }
.foot-links a, .nav a { transition: color .2s ease; }

/* ── 落地页的分区层次 ──
   问题：几个 section 平铺在同一个底色上，没有边界，整页糊成一片。
   做法：每个 section 包成一张白卡浮在浅蓝灰底上，卡与卡之间留缝。
   卡内的条目一律只用分隔线、不再套卡片——否则就是卡片套卡片。 */
body.landing main > section {
  margin: 0 0 26px;
  padding: 32px 34px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
}
body.landing main > section > h2 { margin-top: 0; margin-bottom: 18px; }
body.landing main > section:first-child { margin-top: 26px; }
body.landing main > section:last-child { margin-bottom: 40px; }

/* 卡内条目降级为分隔线样式 */
body.landing .faq-item {
  background: none; border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0;
}
body.landing .faq-list { gap: 0; }
body.landing .faq-item:last-child { border-bottom: 0; }
body.landing .faq-item summary { padding: 14px 2px; }
body.landing .faq-item p { padding: 0 2px 16px; }
/* 表格在白卡里不需要再自带一层底色 */
body.landing .cmp table { background: none; }

@media (max-width: 560px) {
  body.landing main > section { padding: 22px 18px; margin-bottom: 18px; }
}