/* 老牛专线官网 —— 全站样式
 *
 * 零外部依赖：不引入任何字体 CDN 或图标库。中国大陆访问 Google Fonts 会超时，
 * 一个外链字体能把整页首屏拖到十几秒，观感上直接毁掉"稳定可靠"。
 *
 * 色彩分两层：
 *   1. 品牌层（--navy / --teal 等）是设计基准，取自 App 图标，任何模式下都不改；
 *   2. 语义层（--surface / --brand-ink / --brand-solid 等）才是组件真正引用的东西。
 * 换配色只重新赋值语义层，组件规则一条都不用重写，也就不会出现两套规则漂移的问题。
 *
 * 深色是默认，浅色是可选变体。
 * 我们卖的是网络线路，客户第一眼要读到的是"技术、专业、稳"，深底天然带这三样；
 * 白底加蓝色标题谁都做得出来，看着像通用企业模板。所以 :root 直接给深色值，
 * 浅色整套挪进 @media (prefers-color-scheme: light) —— 两套配色都还在，只是换了谁当默认。
 */

:root {
  /* ── 品牌基准色（勿改） ── */
  --navy:        #0B2E6B;
  --navy-deep:   #071E48;
  --navy-soft:   #14407F;
  --teal:        #12C2B0;
  --teal-deep:   #0E9C8E;

  /* ── 中性色 ── */
  /* 底色不用纯黑，用带一点蓝的深灰，和品牌的海军蓝同一个色系；
     纯黑配浅字在大段中文上眩光很重。所有文字色都按 4.5:1 以上挑过 */
  --ink:         #E7EDF5;
  --ink-2:       #A9B8C8;
  --ink-3:       #7E8FA1;
  --line:        #22303F;
  --line-strong: #35485D;
  --bg:          #0C141D;
  --bg-alt:      #111C27;
  --bg-navy:     #08223F;

  /* ── 语义层：面 ── */
  --surface:     #131F2B;   /* 卡片、输入框、浮层这类"浮起来"的面 */
  --surface-2:   #18242F;   /* 面上的次级分区，比如表头、订单摘要 */
  --header-bg:   rgba(12, 20, 29, .88);

  /* ── 语义层：品牌用法 ── */
  /* 深底上品牌蓝必须整体提亮才读得出来；配白字的实底则往中间走，
     这样"蓝底白字"和"蓝字深底"两种用法各自都过对比度 */
  --brand-ink:    #85B0EC;  /* 底色上的品牌色文字：标题、指标数字、品牌名 */
  --brand-solid:  #2F5FB5;  /* 配白字的品牌色实底：主按钮、步骤序号、套餐标签 */
  --brand-solid-hover: #3A70CE;
  --link:         #8FBBF2;

  /* 强调色分成"文字用"和"实底用"两支：亮青当实底配深墨字最跳，
     当文字色则要按底色调 —— 深底上用提亮的青，浅底上要压深，见 light 那段 */
  --accent-ink:          #2FD8C5;
  --accent-solid:        #12C2B0;
  --accent-solid-hover:  #2FD3C2;
  --accent-solid-ink:    #04241F;

  /* 首屏示意图专用的亮青。首屏在两种模式下都是深蓝底，#12C2B0 画成细线时
     在深底上偏闷，提亮一档线条才立得住。只用在深底上，所以两种模式同值 */
  --teal-lift:           #3FDCCB;

  /* 补偿阶梯的顺序色阶：同一个色相，暗→亮对应"补得越多"。
     用四个变量而不是给青色叠透明度，是因为浅色模式下这条色阶要整个反过来
     （浅底上"更多"应该更深），叠透明度做不到反向 */
  --lad-0: #35485D;
  --lad-1: #17655D;
  --lad-2: #1FA595;
  --lad-3: #4FE3D2;

  --ring:      rgba(133, 176, 236, .75);  /* 键盘焦点圈 */
  --ring-soft: rgba(133, 176, 236, .22);  /* 输入框聚焦的柔光 */
  --scroll-thumb: #33465B;

  --ok:          #35B682;
  --warn:        #D89A3C;

  --notice-err-bg: #2A1618; --notice-err-fg: #FFB4B4; --notice-err-line: #4A2426;
  --notice-ok-bg:  #10251D; --notice-ok-fg:  #74DCAE; --notice-ok-line:  #1E4536;

  /* 首屏底色拆成变量。深色打底时首屏要比正文区更暗一档，
     否则整页最亮的一块反而是首屏，深色的稳重感就没了 */
  --hero-1: #06152E;
  --hero-2: #0A2452;
  --hero-3: #0B2A61;
  --hero-glow: rgba(18, 194, 176, .16);

  /* 点阵世界地图的点色。极淡 —— 它是背景不是内容，一眼扫过去只该留下"有纵深"的印象。
     首屏在两种模式下都是深蓝底，所以这个值不分模式 */
  --hero-dot:  rgba(150, 200, 235, .34);

  --radius:      10px;
  --radius-sm:   8px;
  --radius-lg:   14px;
  /* 深底上的阴影要够黑才看得出层次，偏蓝的柔光在这里等于没有；
     浅色模式那套反过来，见 light 段的说明 */
  --shadow-xs:   0 1px 2px rgba(0, 0, 0, .45);
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .35);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, .5), 0 12px 32px rgba(0, 0, 0, .4);
  --shadow-lg:   0 8px 20px rgba(0, 0, 0, .55), 0 24px 56px rgba(0, 0, 0, .5);

  --maxw:        1140px;
  --header-h:    68px;

  /* 字号阶梯用 clamp 做成连续的，中间尺寸（平板、小笔记本）就不会卡在
     某个断点上突然变丑，也省掉一堆媒体查询里的字号覆盖 */
  --fs-hero:  clamp(2.05rem, 1.35rem + 2.9vw, 3rem);
  --fs-h1:    clamp(1.85rem, 1.42rem + 1.8vw, 2.5rem);
  --fs-h2:    clamp(1.42rem, 1.2rem + .95vw, 1.9rem);
  --fs-h3:    1.14rem;
  --fs-lede:  clamp(1.02rem, .97rem + .22vw, 1.16rem);
  --fs-sm:    .93rem;

  --font-sans:   -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI",
                 "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
                 "Source Han Sans SC", "Noto Sans CJK SC",
                 "Helvetica Neue", Arial, sans-serif;
  --font-mono:   ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* 根字号跟着视口小幅上浮，同时以 rem 为基准，用户在浏览器里调大的字号仍然有效。
     写死 17px 会把用户的字号设置整个盖掉 */
  font-size: clamp(1rem, .97rem + .15vw, 1.0625rem);
  /* 站内锚点（#how、#plans、#contact）会被吸顶页头盖住，滚动时预留出页头高度 */
  scroll-padding-top: calc(var(--header-h) + 20px);
  scrollbar-color: var(--scroll-thumb) transparent;
  background: var(--bg);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  /* 中文没有词间距，靠行距和字距撑出可读性：行高比英文站高一档，
     再补一点点字距，长段落才不会糊成一片 */
  line-height: 1.8;
  letter-spacing: .01em;
  color: var(--ink);
  background: var(--bg);
  /* 中文字形在浅色底上默认偏重，关掉 macOS 的次像素加粗更接近设计稿 */
  -webkit-font-smoothing: antialiased;
  /* 窄卡片里出现长邮箱地址时不撑破布局 */
  overflow-wrap: break-word;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--accent-ink); }

/* 正文里的链接加下划线：只靠颜色区分链接，对色觉障碍用户等于没区分。
   导航、按钮、页脚目录不在此列，那些位置本来就摆明是可点的 */
:where(p, .prose li, .plan__sub, dd) a:not(.btn) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
}
:where(p, .prose li, .plan__sub, dd) a:not(.btn):hover {
  text-decoration-color: currentColor;
}

/* 键盘焦点必须看得见。默认轮廓在深底上会消失，所以深色区块单独换成青色 */
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
.hero :focus-visible,
.section--navy :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--teal);
}

::selection { background: var(--teal); color: var(--accent-solid-ink); }

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  font-weight: 600;
  /* 方块字之间本来就没有空隙，再做负字距会让相邻两字粘连。
     紧排是拉丁字母标题的做法，中文标题一律不做 */
  letter-spacing: normal;
  /* 两行标题的断点更均衡，避免出现"末行只剩两个字"的孤字 */
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: 1.28; }
h2 { font-size: var(--fs-h2); line-height: 1.35; }
h3 { font-size: var(--fs-h3); line-height: 1.55; }
h4 { font-size: 1rem; line-height: 1.6; }
p  { margin: 0 0 1em; }

strong { font-weight: 600; color: var(--ink); }

.num { font-variant-numeric: tabular-nums; }

/* ── 布局 ─────────────────────────────────────────── */

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 3.2vw, 28px); }

/* 分区留白也用 clamp 连续变化，中间尺寸不会出现"上下压得慌"的段落 */
.section { padding: clamp(56px, 6.4vw, 88px) 0; }
.section--alt { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section--navy { background: var(--bg-navy); color: #fff; }
.section--tight { padding: clamp(40px, 4.4vw, 56px) 0; }

.section-head { max-width: 760px; margin: 0 0 clamp(32px, 3.6vw, 48px); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head .eyebrow {
  display: inline-block; margin-bottom: 14px;
  font-size: .8rem; font-weight: 600; letter-spacing: .14em;
  color: var(--accent-ink); text-transform: uppercase;
}
/* 眉标前的短横线：纯 CSS 的一个锚点，让小标题不至于像漂在空中的一行小字 */
.section-head .eyebrow::before {
  content: ""; display: inline-block;
  width: 18px; height: 2px; border-radius: 2px;
  margin-right: 10px; vertical-align: middle; margin-top: -.16em;
  background: currentColor; opacity: .6;
}
.section--navy .section-head .eyebrow { color: var(--teal); }
.section-head h2 { margin-bottom: .42em; }
.section-head p {
  color: var(--ink-2); font-size: var(--fs-lede); line-height: 1.85;
  margin-bottom: 0; text-wrap: pretty;
}
.section--navy .section-head p { color: rgba(255,255,255,.78); }

.grid { display: grid; gap: clamp(18px, 2vw, 24px); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ── 页头 ─────────────────────────────────────────── */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 32px; height: var(--header-h); }
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 1.06rem; letter-spacing: .02em;
  color: var(--brand-ink);
}
.brand:hover { color: var(--brand-ink); }
.brand img { width: 30px; height: 30px; border-radius: 7px; }

.nav { display: flex; gap: 28px; margin-left: auto; }
.nav a { position: relative; color: var(--ink-2); font-size: .95rem; }
.nav a:hover, .nav a.is-active { color: var(--brand-ink); }
.nav a.is-active { font-weight: 600; }

.header-cta { margin-left: 8px; }

.nav-toggle {
  display: none; margin-left: auto; width: 40px; height: 40px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  cursor: pointer; padding: 0; color: var(--brand-ink);
  transition: border-color .15s ease, background-color .15s ease;
}
.nav-toggle:hover { border-color: var(--line-strong); }
.nav-toggle svg { width: 22px; height: 22px; margin: 0 auto; }

/* ── 按钮 ─────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border-radius: var(--radius);
  font-size: .96rem; font-weight: 600; font-family: inherit; letter-spacing: .01em;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease,
              color .15s ease, box-shadow .15s ease, transform .1s ease;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
/* 按下去要有反馈。1px 的下沉比任何缩放动画都克制，也不会让布局抖 */
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--brand-solid); color: #fff; box-shadow: var(--shadow-xs); }
.btn--primary:hover { background: var(--brand-solid-hover); color: #fff; box-shadow: var(--shadow-sm); }
.btn--teal { background: var(--accent-solid); color: var(--accent-solid-ink); box-shadow: var(--shadow-xs); }
.btn--teal:hover { background: var(--accent-solid-hover); color: var(--accent-solid-ink); box-shadow: var(--shadow-sm); }
.btn--ghost { background: var(--surface); color: var(--brand-ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--brand-ink); color: var(--brand-ink); background: var(--surface); box-shadow: var(--shadow-xs); }
.btn--on-navy { background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.34); }
.btn--on-navy:hover { background: rgba(255,255,255,.18); color: #fff; }
.btn--sm { padding: 8px 16px; font-size: .9rem; }
.btn--lg { padding: 14px 30px; font-size: 1.02rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; box-shadow: none; }
.btn[disabled]:active { transform: none; }

/* ── 首屏 ─────────────────────────────────────────── */

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  /* 三层叠底：右上角一团克制的青色光晕定调，左下角一层同色系的蓝提亮，
     底下再压一层斜向渐变。这是底，氛围层（点阵地图 + 链路曲线）铺在它上面 */
  background:
    radial-gradient(900px 420px at 82% -12%, var(--hero-glow), transparent 62%),
    radial-gradient(760px 520px at 4% 112%, rgba(20,64,127,.55), transparent 64%),
    linear-gradient(166deg, var(--hero-1) 0%, var(--hero-2) 58%, var(--hero-3) 100%);
  color: #fff;
  padding: clamp(56px, 6.4vw, 88px) 0 clamp(64px, 7.4vw, 100px);
}

/* ── 首屏氛围层 ──
 *
 * 整屏铺开的背景，不是装在框里的插图。两件东西叠出"全球链路"的感觉：
 * 底下一层点阵世界地图，上面几条贯穿画面的链路曲线。
 *
 * 全部是纯 CSS 和内联 SVG，零外部图片 —— 中国大陆访问外链图片会超时，
 * 一张挂掉的背景图比没有背景图更伤观感。
 *
 * 静止的。不做粒子、不做呼吸光、不做流动线：客户是来判断"这家靠不靠谱"的，
 * 会动的背景只会把注意力从文案上拽走，也削弱专业感。
 */
.hero__bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  /* 整层往下淡出：文案区还留得住氛围，接近底部时收干净，
     和下面的指标条之间不至于出现一条脏边 */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 96%);
}

/* 点阵世界地图。
 * 点阵本身就是一张平铺的 radial-gradient，一个点一格；
 * 大陆的形状靠遮罩切出来 —— 若干个椭圆软遮罩并在一起，近似等距投影下的
 * 北美、南美、欧洲、非洲、亚洲、东南亚、大洋洲。
 * 多个 mask-image 图层默认就是相加合成，不用写 mask-composite。
 *
 * 用遮罩而不是画一张真地图，是因为真地图要么是外链图片（禁止），
 * 要么是几十 KB 的内联路径（首屏字节数不值当）。背景只要读出"世界"就够了。
 */
.hero__map {
  /* 不能写 inset: 0。首屏高度是内容撑出来的（一千多像素），
     铺满就等于把等距投影的 2:1 拉成了近似正方形，大陆全被抻成竖条，
     再多的点也读不出"世界"。锁死 2.1:1、宽度略微出血，形状才对得上 */
  position: absolute; left: -3%; right: -3%; top: 2%;
  height: auto; aspect-ratio: 2.1 / 1;
  background-image: radial-gradient(var(--hero-dot) 1.05px, transparent 1.35px);
  background-size: 15px 15px;
  --continents:
    radial-gradient(19% 25% at 18% 33%, #000 52%, transparent 100%),
    radial-gradient( 7% 10% at 30% 15%, #000 52%, transparent 100%),
    radial-gradient( 9% 23% at 29% 67%, #000 52%, transparent 100%),
    radial-gradient( 9% 12% at 48% 27%, #000 52%, transparent 100%),
    radial-gradient(11% 25% at 53% 58%, #000 52%, transparent 100%),
    radial-gradient(20% 19% at 69% 29%, #000 52%, transparent 100%),
    radial-gradient( 9% 12% at 71% 50%, #000 52%, transparent 100%),
    radial-gradient( 8%  6% at 78% 61%, #000 52%, transparent 100%),
    radial-gradient( 8% 11% at 85% 72%, #000 55%, transparent 100%);
  -webkit-mask-image: var(--continents);
  mask-image: var(--continents);
}

/* 链路曲线。三条贝塞尔横贯画面，描边走渐变、两端淡出，
   所以它们看着像"路过"，而不是像三条被画上去的线 */
.hero__arcs {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: .85;
}

/* 底部收口，首屏和下面的区块之间不至于硬切一刀 */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px;
  z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .35));
}
.hero .wrap { position: relative; z-index: 1; }

/* 居中构图：badge、标题、正文、按钮都压在中轴上，两侧留白对称。
   左对齐是"文档"的读法，居中是"发布会"的读法 —— 首屏要的是后者 */
.hero__grid { display: grid; gap: clamp(30px, 4vw, 44px); justify-items: center; text-align: center; }
/* 不写这条，justify-items:center 会把文案块收成 fit-content，
   下面那几个 max-width 就失去了参照，换行位置全看内容长度 */
.hero__copy { width: 100%; }
.hero h1 {
  font-size: var(--fs-hero); line-height: 1.24; margin-bottom: 22px;
  max-width: 18em; margin-inline: auto;
}
/* 标题第二行换强调色。两行一冷一亮，视线自然从"谁"落到"得到什么"。
   #12C2B0 落在首屏那几档深蓝上是 5.2:1 到 8.1:1，大字要求 3:1，留足了余量 */
.hero h1 .accent { color: var(--teal); }
.hero .lede {
  font-size: var(--fs-lede); line-height: 1.85;
  color: rgba(255,255,255,.82); max-width: 34em; margin: 0 auto 34px;
  /* 居中的两行字用 balance 而不是 pretty：pretty 只管最后一行不落单字，
     balance 会把两行拉成差不多长，居中排版下这个差别一眼就看得见 */
  text-wrap: balance;
}
.hero .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
/* 原来是 .55 的白，在深蓝上只有 4.9:1，这行写的是付款方式和交付方式，
   属于客户真会读的信息，提到 .62 留出余量 */
.hero .hero-note { margin: 26px 0 0; font-size: .9rem; color: rgba(255,255,255,.62); }

.badge-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; justify-content: center; }
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px; border-radius: 999px;
  font-size: .84rem; font-weight: 500; letter-spacing: .015em;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.90);
  border: 1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); flex: none; }

/* ── 指标条 ───────────────────────────────────────── */

/* 裸数字排一行，不做卡片。
 *
 * 原来是带外框和分隔线的网格，五个承诺被切成五个"格子"，每个格子都在争一份注意力，
 * 结果一个都没记住。去掉框之后数字自己就是分隔 —— 留白够宽，眼睛不会串行，
 * 省下来的视觉预算全给了字号：数字大一档，扫一眼只剩下 99.5、30、2、0、4。
 */
.stats {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: clamp(24px, 3vw, 40px) clamp(20px, 2.6vw, 34px);
  background: none; border: none; border-radius: 0; box-shadow: none;
}
.stat { background: none; padding: 0; }
.stat .v {
  font-size: clamp(2.05rem, 1.55rem + 1.7vw, 2.85rem); font-weight: 600;
  color: var(--brand-ink); line-height: 1.15;
  font-variant-numeric: tabular-nums; letter-spacing: -.015em;
}
/* 单位不跟着数字放大：放大的是"99.5"，不是"%"。
   inline-block 防止单位跟数字在窄屏上一起换行 */
.stat .v small {
  display: inline-block;
  font-size: .95rem; font-weight: 500; color: var(--ink-2);
  margin-left: 3px; letter-spacing: normal;
}
.stat .k { font-size: .86rem; line-height: 1.65; color: var(--ink-2); margin-top: 8px; }

/* ── 卡片 ─────────────────────────────────────────── */

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(22px, 2.4vw, 28px);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card h3 { margin-bottom: 10px; color: var(--brand-ink); }
.card p { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.85; margin-bottom: 0; }
.card .icon {
  width: 42px; height: 42px; border-radius: 10px; margin-bottom: 18px;
  display: grid; place-items: center;
  background: rgba(18,194,176,.14); color: var(--accent-ink);
  box-shadow: inset 0 0 0 1px rgba(18,194,176,.26);
  transition: background-color .18s ease;
}
.card:hover .icon { background: rgba(18,194,176,.20); }
.card .icon svg { width: 21px; height: 21px; }

/* card--flat 原本的底色和 .section--alt 完全一致，卡片等于隐形，
   一整排功能点看起来只是几段散落的文字。改成白面加发丝边，
   "flat" 的语义保留为静止时不带阴影 */
.card--flat { background: var(--surface); border-color: var(--line); box-shadow: none; }
.card--flat:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }

/* ── 步骤 ─────────────────────────────────────────── */

.steps { counter-reset: step; display: grid; gap: 28px; }
.step { position: relative; padding-left: 60px; counter-increment: step; }
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 2px;
  width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--brand-solid); color: #fff;
  font-size: .92rem; font-weight: 600; font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-xs);
}
/* 序号之间连一条竖线，四个步骤才读得出"这是一条流程"而不是四段并列文案 */
.step::after {
  content: ""; position: absolute; left: 18px; top: 46px; bottom: -30px; width: 2px;
  background: linear-gradient(to bottom, var(--line-strong), var(--line));
  border-radius: 2px;
}
.step:last-child::after { display: none; }
.step h3 { margin-bottom: 6px; color: var(--ink); }
.step p { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.85; margin-bottom: 0; }

/* ── 套餐 ─────────────────────────────────────────── */

/* stretch 让三张卡等高，底部按钮才在同一条线上；原来的 start 会让按钮参差 */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2vw, 24px); align-items: stretch; }
.plan {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 30px 28px; display: flex; flex-direction: column; position: relative;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.plan:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
/* 突出"最受欢迎"用三件事叠加：外圈实色描边、顶部色条、更重的投影。
   用 box-shadow 画第二圈描边而不是加粗 border，卡片内容不会因此位移 */
.plan--featured {
  border-color: var(--brand-solid);
  box-shadow: 0 0 0 1px var(--brand-solid), var(--shadow-md);
  padding-top: 34px;
}
.plan--featured:hover {
  border-color: var(--brand-solid);
  box-shadow: 0 0 0 1px var(--brand-solid), var(--shadow-lg);
}
.plan--featured::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--brand-solid);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.plan__tag {
  position: absolute; top: -12px; left: 28px;
  padding: 4px 13px; border-radius: 999px;
  background: var(--brand-solid); color: #fff;
  font-size: .78rem; font-weight: 600; letter-spacing: .04em;
  box-shadow: var(--shadow-xs);
}
.plan__name { font-size: 1.14rem; font-weight: 600; color: var(--brand-ink); margin-bottom: 6px; }
.plan__desc { font-size: .9rem; line-height: 1.75; color: var(--ink-2); min-height: 44px; margin-bottom: 20px; }
.plan__price { display: flex; align-items: baseline; gap: 3px; margin-bottom: 4px; }
.plan__price .cur { font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.plan__price .amt {
  font-size: clamp(2.05rem, 1.7rem + 1.1vw, 2.45rem); font-weight: 600; color: var(--ink);
  line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.plan__price .per { font-size: .95rem; color: var(--ink-2); }
.plan__sub { font-size: .86rem; color: var(--ink-3); margin-bottom: 22px; min-height: 22px; font-variant-numeric: tabular-nums; }
/* 价格和权益之间加一条发丝线，视线有个明确的落点 */
.plan__features {
  list-style: none; margin: 0 0 26px; padding: 20px 0 0; flex: 1;
  border-top: 1px solid var(--line);
}
.plan__features li { position: relative; padding-left: 26px; margin-bottom: 11px; font-size: .93rem; line-height: 1.7; color: var(--ink-2); }
.plan__features li::before {
  content: ""; position: absolute; left: 2px; top: .58em;
  width: 11px; height: 6px; border-left: 2px solid var(--accent-ink); border-bottom: 2px solid var(--accent-ink);
  transform: rotate(-45deg);
}

/* ── 表格 ─────────────────────────────────────────── */

.table-wrap {
  overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow-xs);
  scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent;
}
.table-wrap::-webkit-scrollbar { height: 8px; }
.table-wrap::-webkit-scrollbar-track { background: transparent; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 999px; }

table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 560px; background: var(--surface); }
table.data th, table.data td { padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.75; }
table.data th { background: var(--surface-2); font-weight: 600; color: var(--brand-ink); white-space: nowrap; letter-spacing: .02em; }
table.data tr:last-child td { border-bottom: none; }
table.data td { color: var(--ink-2); }
/* 对比表的第一列是行标题，加重之后横向读一行不容易串行 */
table.data tbody td:first-child { color: var(--ink); font-weight: 600; }
table.data tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--bg-alt) 62%, var(--surface)); }
table.data tbody tr:hover td { background: color-mix(in srgb, var(--teal) 7%, var(--surface)); }

/* ── 常见问题 ─────────────────────────────────────── */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  padding: 20px 52px 20px 0; cursor: pointer; position: relative;
  font-weight: 600; color: var(--ink); list-style: none;
  transition: color .15s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brand-ink); }
.faq details[open] summary { color: var(--brand-ink); }
/* 箭头外面套一个圆底，展开控件才像个可点的控件，而不是一个孤零零的角标 */
.faq summary::before {
  content: ""; position: absolute; right: 0; top: 50%;
  width: 30px; height: 30px; margin-top: -15px; border-radius: 50%;
  background: var(--surface-2);
  transition: background-color .18s ease;
}
.faq summary:hover::before { background: var(--line); }
.faq summary::after {
  content: ""; position: absolute; right: 10px; top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2);
  transform: translateY(-72%) rotate(45deg);
  transition: transform .22s ease, border-color .18s ease;
}
.faq details[open] summary::after { transform: translateY(-28%) rotate(-135deg); border-color: var(--brand-ink); }
.faq details p { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.9; padding-right: 40px; }
.faq details p:last-child { margin-bottom: 20px; }

/* details 展开的高度过渡。新版浏览器支持给 ::details-content 做插值，
   不支持的浏览器直接瞬开，功能不受影响，所以不需要 JS 兜底 */
@supports (interpolate-size: allow-keywords) and selector(::details-content) {
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content {
    block-size: 0; overflow: clip;
    transition: block-size .26s ease, content-visibility .26s allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; }
}

/* ── 表单 ─────────────────────────────────────────── */

.field { margin-bottom: 18px; }
.field label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: 8px; color: var(--ink); }
.field .hint { font-size: .85rem; line-height: 1.7; color: var(--ink-3); margin-top: 7px; }
.input {
  width: 100%; padding: 12px 14px; font-size: .98rem; font-family: inherit;
  color: var(--ink);
  /* 输入框比卡片再深一档，凹陷感才对得上"可以往里填东西"。
     浅色模式反过来，输入框是整页最白的一块 */
  background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:hover { border-color: var(--line-strong); }
/* 聚焦不用系统轮廓，改成描边加柔光——但这一圈必须足够明显，
   否则等于把键盘用户的焦点提示删掉了 */
.input:focus { outline: none; border-color: var(--brand-solid-hover); box-shadow: 0 0 0 3px var(--ring-soft); }
.input::placeholder { color: var(--ink-3); }

.notice {
  padding: 14px 18px; border-radius: var(--radius); font-size: .92rem; line-height: 1.75;
  margin-bottom: 18px; border: 1px solid transparent; border-left-width: 3px;
}
.notice--err  { background: var(--notice-err-bg); color: var(--notice-err-fg); border-color: var(--notice-err-line); border-left-color: var(--notice-err-fg); }
.notice--ok   { background: var(--notice-ok-bg); color: var(--notice-ok-fg); border-color: var(--notice-ok-line); border-left-color: var(--notice-ok-fg); }
.notice--info { background: var(--bg-alt); color: var(--ink-2); border-color: var(--line); border-left-color: var(--line-strong); }
.notice[hidden] { display: none; }

/* ── 支付方式标 ───────────────────────────────────── */

.paylogos { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.paylogo {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: .85rem; color: var(--ink-2); background: var(--surface);
  transition: border-color .15s ease, color .15s ease;
}
.paylogo:hover { border-color: var(--line-strong); color: var(--ink); }
.paylogo svg { width: 16px; height: 16px; flex: none; }

/* ── 购买浮层 ─────────────────────────────────────── */

.buy-panel {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: 24px;
  background: rgba(2, 8, 18, .70);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: panel-fade .16s ease;
}
.buy-panel[hidden] { display: none; }
.buy-panel__box {
  width: 100%; max-width: 440px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 30px 28px 26px; box-shadow: var(--shadow-lg);
  max-height: calc(100vh - 48px); overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent;
  animation: panel-rise .2s cubic-bezier(.2, .7, .3, 1);
}
@keyframes panel-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes panel-rise { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
.buy-panel__title { font-size: 1.2rem; font-weight: 600; color: var(--brand-ink); margin: 0 0 20px; }
.buy-panel__summary {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 15px 16px; margin-bottom: 22px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
}
.buy-panel__summary .plan-name { font-weight: 600; color: var(--ink); font-size: .96rem; }
.buy-panel__summary .plan-amount {
  font-size: 1.45rem; font-weight: 600; color: var(--brand-ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.buy-panel__actions { display: flex; gap: 10px; margin-top: 22px; }
.buy-panel__actions .btn { flex: 1; }
.buy-panel__fine { margin: 16px 0 0; font-size: .82rem; color: var(--ink-3); line-height: 1.7; }

/* ── 订单信息卡（支付结果页） ─────────────────────── */

.result { max-width: 620px; margin: 0 auto; text-align: center; }
.result__icon {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 24px;
  display: grid; place-items: center;
}
.result__icon--ok   { background: rgba(53,182,130,.14); color: var(--ok); box-shadow: inset 0 0 0 1px rgba(53,182,130,.28); }
.result__icon--warn { background: rgba(216,154,60,.14); color: var(--warn); box-shadow: inset 0 0 0 1px rgba(216,154,60,.28); }
.result__icon svg { width: 30px; height: 30px; }

.order-card {
  text-align: left; border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; margin: 32px 0; background: var(--surface); box-shadow: var(--shadow-xs);
}
.order-card dl { margin: 0; }
.order-card .row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 14px 20px; border-bottom: 1px solid var(--line);
  font-size: .94rem;
}
/* 隔行浅底：订单信息是要逐条核对的，斑马纹比全白更不容易看错行 */
.order-card .row:nth-child(even) { background: var(--surface-2); }
.order-card .row:last-child { border-bottom: none; }
.order-card dt { color: var(--ink-2); margin: 0; }
.order-card dd { margin: 0; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }

/* ── 长文（条款类页面） ───────────────────────────── */

.prose { max-width: 780px; }
/* 条款页每节前加一条发丝线：这类文档是拿来定位查条款的，
   靠留白分节在长页面上根本看不出来 */
.prose h2 {
  font-size: 1.34rem; line-height: 1.5; color: var(--ink);
  margin-top: 2.4em; padding-top: 1.4em; border-top: 1px solid var(--line);
}
.prose h2:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.prose h3 { font-size: 1.05rem; margin-top: 1.8em; color: var(--ink); }
.prose p, .prose li { color: var(--ink-2); font-size: 1rem; line-height: 1.95; }
.prose ul, .prose ol { padding-left: 22px; margin-bottom: 1.2em; }
.prose li { margin-bottom: 10px; }
.prose li::marker { color: var(--ink-3); }
.prose .meta { font-size: .9rem; color: var(--ink-3); border-bottom: 1px solid var(--line); padding-bottom: 20px; margin-bottom: 36px; }

.page-head {
  /* 从浅灰渐到页面底色，页头和正文之间有个自然的过渡，不再是一块生硬的灰条 */
  background: linear-gradient(180deg, var(--bg-alt) 0%, var(--surface) 100%);
  border-bottom: 1px solid var(--line);
  padding: clamp(40px, 5vw, 60px) 0;
}
.page-head h1 { font-size: var(--fs-h1); margin-bottom: 10px; color: var(--brand-ink); }
.page-head p { color: var(--ink-2); font-size: var(--fs-lede); line-height: 1.85; margin-bottom: 0; max-width: 680px; text-wrap: pretty; }

/* ── 页脚 ─────────────────────────────────────────── */

.site-footer { background: var(--bg-navy); color: rgba(255,255,255,.66); padding: clamp(48px, 5.4vw, 64px) 0 32px; font-size: .92rem; }
.site-footer a { color: rgba(255,255,255,.74); }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 44px; }
.footer-brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 600; font-size: 1.05rem; letter-spacing: .02em; margin-bottom: 14px; }
.footer-brand img { width: 28px; height: 28px; border-radius: 7px; }
.footer-col h4 { color: #fff; font-size: .9rem; letter-spacing: .05em; margin-bottom: 16px; font-weight: 600; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12); padding-top: 24px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: .87rem; line-height: 1.7;
  /* 原来的 .45 白只有 4.3:1，这里放的是版权和合规声明，压不得 */
  color: rgba(255,255,255,.58);
}

/* ── 配图与示意图 ─────────────────────────────────── */

/* 全站零外部图片这条不变：除了那张真机截图，所有配图都是内联 SVG。
 *
 * 选内联而不是 <img src="/assets/xx.svg">，是因为示意图必须跟着深色模式换色，
 * 而外链 SVG 读不到页面的 CSS 变量，颜色只能写死在文件里，等于放弃深色模式。
 * 代价是这几张图不能被单独缓存 —— 但每张图只出现在一个页面上，
 * 单独缓存本来也省不下什么。
 *
 * 图里的标注文字尽量少：能写在 HTML 里的说明一律放 figcaption，
 * 那部分字号跟着用户的浏览器设置走，而 SVG 里的字是按 viewBox 缩放的。
 */

/* SVG 里的字号按 viewBox 单位写，图被拉宽多少字就跟着放大多少。
   所以每张图都配一个等于 viewBox 宽度的 max-width，把放大封顶在 1:1，
   否则在大屏上会出现"示意图的标注比正文标题还大" */
.dg { display: block; width: 100%; height: auto; margin: 0 auto; font-family: var(--font-sans); }
.dg text { letter-spacing: .01em; }

/* ── 首屏主视觉 ── */

/* width 这一条不能省：这个 div 是 grid 子项，一旦写了 margin:0 auto，
   grid 就不再把它拉满栏宽，改用内容宽度 —— 而内联 SVG 只有 viewBox、没有固有宽度，
   内容宽度会退回浏览器给替换元素的默认 300px，图直接缩掉一半 */
.hero__art { width: 100%; max-width: 560px; margin: 0 auto; }
/* 让示意图浮在氛围背景上，而不是像贴在上面的一块贴纸。
   投影是唯一的"托起"手段 —— 加底色或加外框都会重新把它关回盒子里 */
.hero__art .dg { filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .38)); }

/* 首屏是深蓝底，浅色深色两种模式下都是。所以这张图的颜色不跟随语义层
   （语义层是按"当前页面底色"定义的），直接按深底来配 */
.hero__art .dg-box    { fill: rgba(255,255,255,.045); stroke: rgba(255,255,255,.14); }
.hero__art .dg-box-hi { fill: rgba(18,194,176,.11);   stroke: var(--teal-lift); }
.hero__art .dg-ln     { stroke: rgba(255,255,255,.30); }
.hero__art .dg-ln-hi  { stroke: var(--teal-lift); }
.hero__art .dg-ar     { fill: rgba(255,255,255,.30); }
.hero__art .dg-ar-hi  { fill: var(--teal-lift); }
.hero__art .dg-ic     { stroke: rgba(255,255,255,.78); }
.hero__art .dg-ic-hi  { stroke: var(--teal-lift); }
.hero__art .dg-tx     { fill: rgba(255,255,255,.93); }
/* 这几行是"别人的账号"那一路，要弱下去但仍然读得清。
   .58 在首屏底色上约 5.3:1，再淡就掉到 4.5 以下了 */
.hero__art .dg-tx-dim { fill: rgba(255,255,255,.58); }
.hero__art .dg-tx-hi  { fill: var(--teal-lift); }

/* ── 对比示意图（左右两张小图 + 文字说明） ── */

.cmp { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2vw, 24px); margin-bottom: clamp(28px, 3vw, 40px); }
.cmp figure {
  margin: 0; padding: clamp(18px, 2vw, 24px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  transition: border-color .18s ease;
}
.cmp figure:hover { border-color: var(--line-strong); }
.cmp .dg { max-width: 520px; }
.cmp figcaption { margin-top: 16px; font-size: var(--fs-sm); line-height: 1.8; color: var(--ink-2); }
.cmp figcaption b { display: block; margin-bottom: 4px; color: var(--ink); font-weight: 600; }

/* 出问题的那一侧用警示色，做对的那一侧用品牌青。两侧的线宽、盒子样式完全一致，
   差别只在颜色和走线，读者的注意力才会落在"线怎么走"上，而不是"哪张画得更花" */
.cmp .dg-box  { fill: none; stroke: var(--line-strong); }
.cmp .dg-ic   { stroke: var(--ink-2); }
.cmp .dg-tx   { fill: var(--ink); }
.cmp .dg-tx-s { fill: var(--ink-2); }
.cmp--bad  .dg-ln, .cmp--bad  .dg-box-k { stroke: var(--warn); }
.cmp--bad  .dg-ar { fill: var(--warn); }
.cmp--good .dg-ln, .cmp--good .dg-box-k { stroke: var(--accent-ink); }
.cmp--good .dg-ar { fill: var(--accent-ink); }

/* ── 客户端截图 ── */

/* 手机外框纯 CSS：多加一张边框图就多一个请求，而这层外框只是圆角、描边和阴影 */
.phone {
  position: relative; width: 100%; max-width: 272px; margin: 0 auto;
  padding: 10px; border-radius: 30px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lg);
}
.phone img {
  display: block; width: 100%; height: auto;
  /* 截图是 544×1100。写死宽高比给它占位，图还没下载完页面也不会往下抖一跳 */
  aspect-ratio: 544 / 1100;
  border-radius: 21px;
  /* 加载完成前先铺品牌深蓝，比一块空白更接近最终样子 */
  background: var(--bg-navy);
}

/* 截图那一栏窄一些：手机外框本来就只有 272px 宽，给它一半版面纯属浪费，
   省下来的宽度留给右边的说明文字 */
.client-grid { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(28px, 4vw, 56px); align-items: center; }

.chiprow { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 999px;
  font-size: .86rem; font-weight: 500;
  color: var(--ink-2); background: var(--surface); border: 1px solid var(--line);
}
.chip svg { width: 14px; height: 14px; flex: none; color: var(--accent-ink); }

/* ── 补偿阶梯 ── */

.ladder-fig { margin: 0 0 clamp(24px, 2.8vw, 34px); }
.ladder-fig .dg { max-width: 720px; }
.ladder-fig figcaption { margin-top: 12px; text-align: center; font-size: .85rem; color: var(--ink-3); }
/* 柱子填的是色阶，标注一律走文字色 —— 让标注跟着柱子变色，
   浅色那两档的字就会掉到读不出来 */
.ladder-fig .dg-tx  { fill: var(--ink); }
.ladder-fig .dg-tx-s{ fill: var(--ink-2); }
.ladder-fig .dg-base{ stroke: var(--line-strong); }
.ladder-fig .lad-0 { fill: var(--lad-0); }
.ladder-fig .lad-1 { fill: var(--lad-1); }
.ladder-fig .lad-2 { fill: var(--lad-2); }
.ladder-fig .lad-3 { fill: var(--lad-3); }

/* ── 品牌区块 ── */

.brandmark { display: flex; align-items: center; gap: clamp(16px, 2vw, 22px); flex-wrap: wrap; }
.brandmark img { width: 62px; height: 62px; border-radius: 15px; flex: none; box-shadow: var(--shadow-sm); }
.brandmark__name { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.62rem); font-weight: 600; color: var(--brand-ink); line-height: 1.3; letter-spacing: .02em; }
.brandmark__sub { margin: 5px 0 0; font-size: var(--fs-sm); line-height: 1.7; color: var(--ink-2); }

/* ── 滚动淡入 ─────────────────────────────────────── */

/* 滚动淡入。
 *
 * 默认必须是「可见」，动画只在 JS 确实起来之后才启用（app.js 会给 <html> 加 .js）。
 * 反过来写（默认 opacity:0，靠 JS 显示）看着一样，但多一个致命失效模式：
 * app.js 加载失败时整页内容永久不可见 —— 大陆网络下这不是小概率事件，
 * 而我们卖的正是「稳定可靠」。内容的可见性不能押在一个 JS 文件上。 */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  /* 位移、缩放、展开这类动作全部关掉，只保留颜色过渡 */
  .card:hover, .plan:hover { transform: none; }
  .btn:active { transform: none; }
  .buy-panel, .buy-panel__box { animation: none; }
  .faq summary::after { transition: none; }
  .faq details::details-content { transition: none; }
}

/* ── 响应式 ───────────────────────────────────────── */

/* 小笔记本 / 横屏平板：三栏太挤但还不至于要塞成一栏 */
@media (max-width: 1040px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .plans { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; }
  /* 五项排一行需要每格 200px 上下，不然"没达标按天补"这种标签会碎成三行 */
  .stats { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .grid--2 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .hero h1 { max-width: none; }

  .nav-toggle { display: block; }
  .nav {
    display: none; position: absolute; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; gap: 0; padding: 8px clamp(20px, 3.2vw, 28px) 16px;
    background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md);
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .nav a:last-child { border-bottom: none; }
  .header-cta { display: none; }
}

/* 竖屏平板 / 大屏手机：到这里两栏才真的排不下 */
@media (max-width: 680px) {
  .grid--3, .grid--4, .plans { grid-template-columns: 1fr; }
  .plan--featured { margin-top: 12px; }
  .section-head { margin-bottom: 28px; }

  .cmp { grid-template-columns: 1fr; }
  .client-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  /* 补偿阶梯的标注按 viewBox 缩放，到这个宽度已经缩到看不清了。
     紧接着的那张补偿表内容完全一样，图撤掉不丢任何信息 */
  .ladder-fig { display: none; }
}

@media (max-width: 520px) {
  /* 数字不带外框之后，两列并排也读得清，不用一项占一屏 */
  .stats { grid-template-columns: repeat(2, 1fr); gap: 22px 18px; }
  .stat .v { font-size: 1.95rem; }
  .footer-grid { grid-template-columns: 1fr; }
  /* 点阵在窄屏上会挤成一团灰。把格距放大、点压淡，
     背景退回成一层若有若无的纹理，不跟标题抢 */
  .hero__map { background-size: 19px 19px; opacity: .6; }
  .hero__arcs { opacity: .5; }
  .step { padding-left: 52px; }
  .plan { padding: 26px 22px; }
  .plan--featured { padding-top: 30px; }
  .buy-panel { padding: 16px; }
  .buy-panel__box { padding: 24px 20px 22px; }
  .faq details p { padding-right: 0; }
  .btn--lg { padding: 13px 24px; }
  .hero .hero-actions .btn { flex: 1 1 auto; }

  /* 主视觉里的标注再缩就糊了。与其给一张看不清的图占掉半屏，
     不如收起来 —— 图上说的事，首屏正文已经写全了 */
  .hero__art { display: none; }
}

/* help.html 的页内 <style> 直接拿 --navy 当文字色用，深底上会糊成一团。
   那个文件归文案组，这里用更高的优先级把颜色接回语义层 ——
   浅色模式下 --brand-ink 恰好就等于 --navy，所以这条不用分模式写两遍 */
a.contact-mail { color: var(--brand-ink); }
a.contact-mail:hover { color: var(--accent-ink); }

/* ── 浅色模式 ─────────────────────────────────────── */

/* 深色是默认（见文件顶部 :root）。这一段给明确把系统调成浅色的用户。
   同样只重写语义层，组件规则一条不改。所有文字色都按 4.5:1 以上挑过 */
@media (prefers-color-scheme: light) {
  :root {
    --ink:         #1C2733;
    --ink-2:       #5A6B7C;
    /* 原来的 #8A99A8 在白底上只有 2.9:1，而它承担的是"折合每月""填写提示"这类
       真要读的信息，不是装饰。压到 4.6:1，仍然比正文浅一档，层次没丢 */
    --ink-3:       #66778A;
    --line:        #E3E9F0;
    --line-strong: #C9D6E4;
    --bg:          #FFFFFF;
    --bg-alt:      #F6F9FC;
    --bg-navy:     #071E48;

    --surface:     #FFFFFF;
    --surface-2:   #F6F9FC;
    --header-bg:   rgba(255, 255, 255, .92);

    --brand-ink:   #0B2E6B;
    --brand-solid: #0B2E6B;
    --brand-solid-hover: #14407F;
    --link:        #14407F;

    /* #0E9C8E 配白字只有 3.4:1，达不到正文 4.5:1；#12C2B0 当文字色在白底上更不够。
       所以白底上的强调文字用压深的青，实底按钮仍然是亮青配深墨字 */
    --accent-ink:  #0A7A6D;
    --accent-solid: #12C2B0;
    --accent-solid-hover: #2FD3C2;
    --accent-solid-ink: #04241F;

    --ring:      rgba(20, 64, 127, .55);
    --ring-soft: rgba(20, 64, 127, .12);
    --scroll-thumb: #C6D2E0;

    --ok:   #1F9D6B;
    --warn: #C2761B;

    /* 阶梯色阶在浅色模式下整个反向：深底上"补得多"是更亮的青，
       浅底上必须是更深的青，否则最重的那一档反而最看不见 */
    --lad-0: #C9D6E4;
    --lad-1: #9BE0D6;
    --lad-2: #45CCBC;
    --lad-3: #0E9C8E;

    --notice-err-bg: #FDF2F2; --notice-err-fg: #A32020; --notice-err-line: #F5D2D2;
    --notice-ok-bg:  #F0FAF5; --notice-ok-fg:  #14724E; --notice-ok-line:  #CCEBDC;

    /* 首屏在两种模式下都是深蓝底。浅色模式的页面主体是白的，
       首屏可以比深色模式亮一档，对比反而更好看 */
    --hero-1: #071E48;
    --hero-2: #0B2E6B;
    --hero-3: #0D3576;
    --hero-glow: rgba(18, 194, 176, .18);

    /* 阴影一律偏蓝、偏散，别用纯黑。纯黑阴影在浅蓝灰底上会显脏 */
    --shadow-xs: 0 1px 2px rgba(11, 46, 107, .05);
    --shadow-sm: 0 1px 2px rgba(11, 46, 107, .06), 0 2px 8px rgba(11, 46, 107, .05);
    --shadow-md: 0 4px 12px rgba(11, 46, 107, .08), 0 12px 32px rgba(11, 46, 107, .07);
    --shadow-lg: 0 8px 20px rgba(11, 46, 107, .10), 0 24px 56px rgba(11, 46, 107, .12);
  }

  /* 浅色模式下输入框是整页最白的一块，比卡片底更亮才像"能往里填东西" */
  .input { background: var(--surface); }
  .card .icon { background: rgba(18,194,176,.10); box-shadow: inset 0 0 0 1px rgba(18,194,176,.20); }
  .card:hover .icon { background: rgba(18,194,176,.16); }
  .badge { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); }
  /* 首屏底下接的是白色区块，收口用偏蓝的深色比纯黑更接得上 */
  .hero::after { background: linear-gradient(to bottom, transparent, rgba(3, 14, 36, .40)); }
  .buy-panel { background: rgba(7, 30, 72, .58); }
  .result__icon--ok { background: rgba(31,157,107,.10); box-shadow: inset 0 0 0 1px rgba(31,157,107,.22); }
  .result__icon--warn { background: rgba(194,118,27,.10); box-shadow: inset 0 0 0 1px rgba(194,118,27,.22); }
}

/* ── 桌面端细节 ───────────────────────────────────── */

/* 导航当前项的下划线只在桌面横排时出现；移动端导航是竖排带分隔线的列表，
   再加一条下划线只会打架 */
@media (min-width: 901px) {
  .nav a { padding: 6px 0; }
  .nav a.is-active::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
    height: 2px; border-radius: 2px; background: var(--accent-ink);
  }
}

/* 首屏在宽屏上是居中单栏，示意图排在文案下面。
   原来这里是"左文右图"两栏，改居中之后标题能占满整幅宽度，
   字号也就不用再为半幅栏宽降一档 */
@media (min-width: 981px) {
  .hero__grid { gap: clamp(40px, 4.6vw, 60px); }
  /* 标题居中占满整幅宽度之后，字号上限可以往上提一档：
     原来的 3rem 是为半幅栏宽定的，在整幅宽度里显得小 */
  .hero h1 { font-size: clamp(2.5rem, 1.5rem + 3.2vw, 3.4rem); }
  .hero .lede { max-width: 26em; }
}