/* ===========================================================
   Montline Design System — "Deep Tech" (dark-first)
   单一真源：颜色、字号、间距、圆角、阴影全部由 token 管理。
   改配色只需动 :root 与 [data-col]，组件样式无需改动。

   结构：
     1. 原始色阶      2. 语义别名      3. 栏目蓝色系
     4. 字体          5. 字号          6. 间距
     7. 圆角/阴影     8. 动效
   =========================================================== */

:root{
  /* ---------- 1. 原始色阶 ---------- */

  /* 黑色基底（带极微蓝调，避免死黑发灰） */
  --k-1000:#04060A;  /* 页面底：最深 */
  --k-950:#06090F;   /* 页面背景 */
  --k-900:#090D15;   /* 交替区块底 */
  --k-850:#0C1219;   /* 卡片底 surface */
  --k-800:#111925;   /* 抬升面 elevated */
  --k-750:#162030;   /* 表格头 / 代码底 */
  --k-700:#1C2739;   /* 边框 subtle */
  --k-600:#26344A;   /* 边框 default */
  --k-500:#35455E;   /* 边框 strong */

  /* 中性文字（冷调灰蓝） */
  --t-100:#F2F7FD;   /* 强标题 */
  --t-200:#DCE6F2;   /* 次级标题 */
  --t-300:#AEBFD4;   /* 正文 */
  --t-400:#8497B0;   /* 辅助 */
  --t-500:#74869B;   /* 弱化 */
  --t-600:#4A5A6E;   /* 极弱 / 分隔 */

  /* 蓝：深色底上「文字链接」与「实心按钮」需要不同明度 ——
     链接要在黑底上够亮（浅蓝），按钮要能让白字达标（深蓝）。 */
  --b-800:#123F87;   /* 按钮 active */
  --b-700:#17509E;   /* 按钮 hover — 白字 7.7:1 */
  --b-600:#1D63D1;   /* 按钮底 — 白字 5.6:1 */
  --b-500:#4A93FF;   /* 描边 / 装饰 */
  --b-400:#7FB0FF;   /* 卡片强调文字 — 8.6:1 */
  --b-300:#A8C8FF;
  --b-200:#6FA8FF;   /* 正文链接 — 8.4:1 */

  /* 科技青 tech cyan：高光、眉标、网格辉光 */
  --c-600:#0FA9BC;
  --c-500:#22D6E8;   /* 深底对比 6.9:1 */
  --c-400:#5EE6F3;
  --c-300:#9BF1F9;

  /* 语义色（深底版本） */
  --s-info:#5EE6F3;  --s-info-bg:rgba(34,214,232,.08);  --s-info-line:rgba(34,214,232,.28);
  --s-ok:#4ADE80;    --s-ok-bg:rgba(74,222,128,.08);    --s-ok-line:rgba(74,222,128,.28);
  --s-warn:#FBBF24;  --s-warn-bg:rgba(251,191,36,.08);  --s-warn-line:rgba(251,191,36,.30);
  --s-risk:#FB7185;  --s-risk-bg:rgba(251,113,133,.08); --s-risk-line:rgba(251,113,133,.30);

  /* ---------- 2. 语义别名（组件只引别名） ---------- */
  --bg-page:var(--k-950);
  --bg-subtle:var(--k-900);        /* 区块交替底 */
  --bg-surface:var(--k-850);       /* 卡片 */
  --bg-elev:var(--k-800);          /* 抬升：下拉、代码块 */
  --bg-inset:var(--k-750);         /* 表头、内嵌 */

  --text-strong:var(--t-100);      /* 对比 15.4:1 */
  --text-heading:var(--t-200);     /* 对比 12.1:1 */
  --text-body:var(--t-300);        /* 对比  8.3:1 */
  --text-muted:var(--t-400);       /* 对比  5.1:1 */
  --text-faint:var(--t-500);       /* 对比  3.4:1（仅大字号/非关键） */

  --border-subtle:var(--k-700);
  --border-default:var(--k-600);
  --border-strong:var(--k-500);
  --line:var(--k-700);

  /* 品牌：链接用浅蓝、按钮用深蓝，两者分开命名避免对比度顾此失彼 */
  --link:var(--b-200);
  --link-hover:var(--b-300);
  --btn:var(--b-600);
  --btn-hover:var(--b-700);
  --brand:var(--b-600);
  --brand-hover:var(--b-700);
  --brand-tint:var(--b-400);
  --accent:var(--c-500);
  --accent-tint:var(--c-300);
  --accent-soft:rgba(34,214,232,.10);

  /* ---------- 3. 栏目蓝色系 ----------
     栏目页通过 <body data-col="products"> 覆盖这两个变量，
     从而整套 hero / 卡片 / 链接自动切换为该栏目的蓝色。
     --col      饱和蓝，用于渐变、描边、光晕（装饰）
     --col-tint 浅蓝，用于眉标等小字（正文对比度安全）  */
  --col:var(--c-500);
  --col-tint:var(--c-300);
  --col-deep:#062B33;

  /* ---------- 4. 字体 ---------- */
  --font-sans:"Inter","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-mono:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;

  /* ---------- 5. 字号层级 ---------- */
  --fs-display:clamp(2.25rem, 1.4rem + 3.2vw, 3.5rem);
  --fs-h1:clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
  --fs-h2:clamp(1.4rem, 1.1rem + 1.3vw, 1.95rem);
  --fs-h3:clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-h4:1.0625rem;
  --fs-lead:clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  --fs-body:1rem;
  --fs-sm:0.875rem;
  --fs-xs:0.8125rem;
  --fs-overline:0.75rem;

  --lh-tight:1.14; --lh-snug:1.3; --lh-normal:1.65; --lh-relaxed:1.78;
  --ls-tight:-0.022em; --ls-normal:0; --ls-wide:0.02em; --ls-caps:0.12em;

  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;

  /* ---------- 6. 间距 ---------- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
  --sp-9:96px; --sp-10:128px;

  --sect-y:clamp(3.5rem, 2rem + 5vw, 6rem);
  --sect-y-sm:clamp(2.5rem, 1.6rem + 3vw, 3.5rem);
  --gutter:clamp(1.25rem, 0.6rem + 2vw, 2rem);
  --maxw:1200px;  --maxw-text:70ch;

  /* ---------- 7. 圆角与阴影 ---------- */
  --r-xs:4px; --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:999px;

  /* 深色底上阴影无用，改用「发光 + 描边」表达层级 */
  --sh-xs:0 1px 0 rgba(255,255,255,.03) inset;
  --sh-sm:0 1px 0 rgba(255,255,255,.04) inset, 0 2px 8px rgba(0,0,0,.45);
  --sh-md:0 1px 0 rgba(255,255,255,.05) inset, 0 8px 24px rgba(0,0,0,.55);
  --sh-lg:0 1px 0 rgba(255,255,255,.06) inset, 0 20px 48px rgba(0,0,0,.6);
  --sh-brand:0 6px 20px -6px rgba(46,124,246,.55);
  --ring:0 0 0 3px rgba(46,124,246,.35);

  /* ---------- 8. 动效 ---------- */
  --ease:cubic-bezier(.4,0,.2,1);
  --dur-fast:120ms; --dur:200ms; --dur-slow:320ms;

  --header-h:68px;
}

/* ---------- 3b. 栏目蓝色：每个栏目一种蓝，风格统一但可区分 ---------- */
body[data-col="products"]            { --col:#3B82F6; --col-tint:#9CC5FF; --col-deep:#081A2E; }
body[data-col="ai-applications"]     { --col:#22D3EE; --col-tint:#7DEAF7; --col-deep:#05272E; }
body[data-col="custom-engineering"]  { --col:#6366F1; --col-tint:#AEB4FF; --col-deep:#0E1030; }
body[data-col="blog"]                { --col:#38BDF8; --col-tint:#8ED8FF; --col-deep:#062434; }
body[data-col="about"]               { --col:#60A5FA; --col-tint:#BBD9FF; --col-deep:#08182C; }

/* ============================ 基础 ============================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;
     scroll-padding-top:calc(var(--header-h) + 16px); background:var(--bg-page)}
body{
  margin:0; background:var(--bg-page); color:var(--text-body);
  font-family:var(--font-sans); font-size:var(--fs-body);
  line-height:var(--lh-normal); font-weight:var(--fw-regular);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
::selection{background:rgba(46,124,246,.35); color:var(--t-100)}

h1,h2,h3,h4{color:var(--text-strong); font-weight:var(--fw-semibold); margin:0}
h1{font-size:var(--fs-h1); line-height:var(--lh-tight); letter-spacing:var(--ls-tight)}
h2{font-size:var(--fs-h2); line-height:var(--lh-snug); letter-spacing:-0.015em}
h3{font-size:var(--fs-h3); line-height:var(--lh-snug)}
h4{font-size:var(--fs-h4); line-height:var(--lh-snug)}
p{margin:0 0 var(--sp-4)}
a{color:var(--link); text-decoration:none; transition:color var(--dur) var(--ease)}
a:hover{color:var(--link-hover); text-decoration:underline; text-underline-offset:2px}
img,svg{max-width:100%; display:block}
ul{margin:0 0 var(--sp-4); padding-left:1.25em}
li{margin-bottom:var(--sp-2)}
li::marker{color:var(--col)}
strong{color:var(--text-heading); font-weight:var(--fw-semibold)}
code{font-family:var(--font-mono); font-size:.9em; background:var(--bg-inset);
  color:var(--c-300); padding:.15em .4em; border-radius:var(--r-xs);
  border:1px solid var(--border-subtle)}
hr{border:none; border-top:1px solid var(--line); margin:var(--sp-6) 0}

:focus-visible{outline:2px solid var(--c-500); outline-offset:2px; border-radius:var(--r-xs)}

.skip{position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--btn); color:#fff; padding:var(--sp-3) var(--sp-5);
  border-radius:0 0 var(--r-md) 0; font-weight:var(--fw-medium)}
.skip:focus{left:0}

/* ============================ 布局 ============================ */
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.narrow{max-width:820px; margin-inline:auto; padding-inline:var(--gutter)}
.sect{padding-block:var(--sect-y)}
.stack>*+*{margin-top:var(--sp-4)}

/* ============================ 顶部导航 ============================ */
.site-head{
  position:sticky; top:0; z-index:100;
  background:rgba(6,9,15,.78);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--border-subtle);
}
.head-in{
  max-width:var(--maxw); margin-inline:auto; padding:0 var(--gutter);
  min-height:var(--header-h); display:flex; align-items:center; gap:var(--sp-6);
  position:relative;   /* 移动端下拉面板的定位容器 */
}
.brand{
  font-size:1.25rem; font-weight:var(--fw-bold); letter-spacing:-0.03em;
  color:var(--t-100); display:inline-flex; align-items:center; gap:2px;
}
.brand span{color:var(--accent); font-size:1.5rem; line-height:1}
.nav{display:flex; align-items:center; gap:var(--sp-5); margin-left:auto; flex-wrap:wrap}
.nav>a{color:var(--t-300); font-size:var(--fs-sm); font-weight:var(--fw-medium)}
.nav>a:hover{color:var(--c-400); text-decoration:none}
.nav>a[aria-current]{color:var(--c-400)}
/* 语言切换：EN / 中文 两个入口同时列出，当前语言高亮，
   避免只有一个「另一种语言」链接时看不出自己在哪一版。 */
.langs{
  display:inline-flex; align-items:center; gap:var(--sp-3);
  padding-left:var(--sp-4); border-left:1px solid var(--border-subtle);
}
.lang{
  font-size:var(--fs-xs); color:var(--text-muted);
  letter-spacing:.08em; white-space:nowrap;
}
.lang:hover{color:var(--t-100); text-decoration:none}
.lang.is-on{color:var(--c-400); font-weight:var(--fw-medium)}

/* 移动端菜单按钮：桌面端隐藏，≤768px 显示 */
.nav-menu{display:flex; align-items:center; gap:var(--sp-5); flex-wrap:wrap}
.nav-toggle{
  display:none; margin-left:auto; width:40px; height:40px; flex:none;
  align-items:center; justify-content:center; gap:5px; flex-direction:column;
  background:transparent; border:1px solid var(--border-default); border-radius:var(--r-sm);
  cursor:pointer; padding:0;
}
.nav-toggle span{
  display:block; width:18px; height:1.5px; background:var(--t-200); border-radius:2px;
  transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ============================ 按钮 ============================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  padding:.75em 1.6em; border-radius:var(--r-md);
  background:var(--btn); color:#fff;
  font-size:var(--fs-sm); font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-wide); line-height:1.2;
  border:1px solid transparent; cursor:pointer;
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover{background:var(--btn-hover); color:#fff; text-decoration:none;
  transform:translateY(-1px); box-shadow:var(--sh-brand)}
.btn:active{transform:translateY(0); box-shadow:none}
.btn.ghost{
  background:rgba(255,255,255,.03); color:var(--t-200); border-color:var(--border-default);
}
.btn.ghost:hover{background:rgba(46,124,246,.12); border-color:var(--b-500);
  color:#fff; box-shadow:none}

.nav .cta{
  background:var(--btn); color:#fff; padding:.6em 1.15em;
  border-radius:var(--r-sm); font-size:var(--fs-sm); font-weight:var(--fw-semibold);
}
.nav .cta:hover{background:var(--btn-hover); transform:translateY(-1px)}

/* ============================ 通用：技术网格背景 ============================ */
.techgrid::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:56px 56px;
}
.mask-fade{ -webkit-mask-image:radial-gradient(80% 70% at 30% 20%, #000 0%, transparent 78%);
            mask-image:radial-gradient(80% 70% at 30% 20%, #000 0%, transparent 78%); }

/* ============================ 主视觉 Hero（首页） ============================ */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(110% 110% at 14% 0%, rgba(34,214,232,.16) 0%, transparent 55%),
    radial-gradient(90% 90% at 86% 6%, rgba(46,124,246,.22) 0%, transparent 60%),
    linear-gradient(165deg, #070B12 0%, #06090F 45%, #04060A 100%);
  color:var(--text-body);
  border-bottom:1px solid var(--border-subtle);
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.75;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(85% 75% at 28% 18%, #000 0%, transparent 80%);
  mask-image:radial-gradient(85% 75% at 28% 18%, #000 0%, transparent 80%);
}
/* 顶部一条青色扫描线，强化科技感 */
.hero::after{
  content:""; position:absolute; inset:0 0 auto 0; height:1px; z-index:0;
  background:linear-gradient(90deg, transparent, var(--accent), var(--brand), transparent);
  opacity:.5;
}
.hero-in{
  position:relative; z-index:1;
  max-width:var(--maxw); margin-inline:auto;
  padding-block:clamp(3.5rem, 2rem + 7vw, 7.5rem) clamp(3rem, 2rem + 5vw, 5.5rem);
  padding-inline:var(--gutter);
}
.eyebrow{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  margin:0 0 var(--sp-5);
  font-size:var(--fs-overline); font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-caps); text-transform:uppercase;
  color:var(--col-tint);
}
.eyebrow::before{
  content:""; width:24px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--col), transparent);
}
.hero h1{
  font-size:var(--fs-display); color:var(--t-100); font-weight:var(--fw-bold);
  line-height:var(--lh-tight); letter-spacing:-0.028em;
  max-width:21ch; margin:0 0 var(--sp-5);
}
.hero .lede{
  font-size:var(--fs-lead); color:var(--t-300);
  max-width:58ch; margin:0 0 var(--sp-7); line-height:var(--lh-relaxed);
}
.hero .btn.ghost{border-color:var(--border-default); color:var(--t-200)}
.hero .btn.ghost:hover{background:rgba(46,124,246,.12); border-color:var(--b-500); color:#fff}

.hero-meta{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--sp-5) var(--sp-6);
  margin-top:clamp(2.5rem, 1.5rem + 4vw, 4rem);
  padding-top:var(--sp-6); border-top:1px solid var(--border-subtle);
}
.hero-meta div{display:flex; flex-direction:column; gap:2px}
.hero-meta strong{
  font-size:clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight:var(--fw-bold);
  color:var(--t-100); letter-spacing:-0.02em; line-height:1.1;
}
.hero-meta span{font-size:var(--fs-xs); color:var(--t-400); letter-spacing:var(--ls-wide)}

/* ============================ 栏目页 Hero（蓝色主题） ============================ */
.hub-hero{
  position:relative; overflow:hidden; isolation:isolate;
  border-bottom:1px solid var(--border-subtle);
  background:
    radial-gradient(120% 130% at 82% 8%, color-mix(in srgb, var(--col) 22%, transparent) 0%, transparent 58%),
    radial-gradient(100% 110% at 8% 92%, color-mix(in srgb, var(--col) 14%, transparent) 0%, transparent 62%),
    linear-gradient(170deg, #070B12 0%, var(--col-deep) 78%, #05080D 100%);
}
/* 不支持 color-mix 的回退底色 */
@supports not (background: color-mix(in srgb, red 10%, blue)){
  .hub-hero{ background:linear-gradient(170deg, #070B12 0%, var(--col-deep) 80%, #05080D 100%); }
}
.hub-hero::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.6;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(90% 100% at 80% 0%, #000 0%, transparent 78%);
  mask-image:radial-gradient(90% 100% at 80% 0%, #000 0%, transparent 78%);
}
.hub-hero::after{
  content:""; position:absolute; inset:0 0 auto 0; height:2px; z-index:0;
  background:linear-gradient(90deg, transparent, var(--col), transparent);
  opacity:.85;
}
.hub-hero-in{
  position:relative; z-index:1;
  max-width:var(--maxw); margin-inline:auto;
  padding-block:clamp(2.75rem, 1.6rem + 5vw, 5rem) clamp(2.5rem, 1.6rem + 4vw, 4rem);
  padding-inline:var(--gutter);
}
.hub-hero h1{
  font-size:var(--fs-display); color:var(--t-100); font-weight:var(--fw-bold);
  letter-spacing:-0.028em; line-height:var(--lh-tight);
  max-width:22ch; margin:0 0 var(--sp-5);
}
.hub-hero .lede{
  font-size:var(--fs-lead); color:var(--t-300);
  max-width:62ch; margin:0; line-height:var(--lh-relaxed);
}
/* 栏目统计条 */
.hub-stats{
  display:flex; flex-wrap:wrap; gap:var(--sp-6);
  margin-top:var(--sp-7); padding-top:var(--sp-5);
  border-top:1px solid var(--border-subtle);
}
.hub-stats div{display:flex; flex-direction:column; gap:2px}
.hub-stats b{
  font-size:1.375rem; font-weight:var(--fw-bold); color:var(--col-tint);
  letter-spacing:-0.01em; line-height:1.15;
}
.hub-stats span{font-size:var(--fs-xs); color:var(--t-400); letter-spacing:var(--ls-wide)}

/* ============================ 区块与标题 ============================ */
.sect-head{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.sect-head h2{font-size:var(--fs-h2); margin:0 0 var(--sp-3)}
.sect-head p{color:var(--text-muted); font-size:var(--fs-lead); max-width:62ch; margin:0}
.alt{background:var(--bg-subtle); border-block:1px solid var(--border-subtle)}

/* ============================ 卡片 ============================ */
.grid{display:grid; gap:var(--sp-5); margin-top:var(--sp-7)}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
/* 栏目页的 4 个子栏目：固定 2×2，配图才有足够展示面积 */
.g-sub{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:700px){ .g-sub{grid-template-columns:1fr} }

.card{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:var(--bg-surface); border:1px solid var(--border-subtle);
  border-radius:var(--r-lg); padding:var(--sp-5);
  box-shadow:var(--sh-xs);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
/* 顶部高亮线：hover 才出现 */
.card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px; z-index:2;
  background:linear-gradient(90deg, var(--col), transparent);
  opacity:0; transition:opacity var(--dur) var(--ease);
}
a.card:hover{
  border-color:var(--col); box-shadow:var(--sh-md);
  background:var(--bg-elev);
  transform:translateY(-3px); text-decoration:none;
}
a.card:hover::before{opacity:1}
.card h3{margin:0 0 var(--sp-2); font-size:var(--fs-h3)}
.card p{margin:0; color:var(--text-muted); font-size:var(--fs-sm); line-height:var(--lh-normal)}
.card .more{
  margin-top:auto; padding-top:var(--sp-4);
  font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--brand-tint);
}
a.card:hover .more{color:var(--accent-tint)}

/* 状态标签 */
.tag{
  align-self:flex-start; margin-bottom:var(--sp-3);
  font-size:var(--fs-overline); font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-wide); text-transform:uppercase;
  color:var(--col-tint); background:rgba(255,255,255,.04);
  border:1px solid var(--border-default);
  padding:.28em .7em; border-radius:var(--r-pill);
}

/* ============================ 子栏目卡（带配图） ============================ */
.thumb{
  margin:calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-4);
  border-bottom:1px solid var(--border-subtle);
  background:var(--k-900);
}
.thumb img{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
  transition:transform var(--dur-slow) var(--ease)}
/* 图片型卡片：卡片本身不留内边距，内边距交给 .card-body */
.col-card{padding:0}
.col-card .thumb{margin:0}
.col-card .card-body{padding:var(--sp-5); display:flex; flex-direction:column; flex:1}
a.col-card:hover .thumb img{transform:scale(1.04)}

/* ============================ 子栏目页 Hero（左文右图） ============================ */
.sub-hero{
  position:relative; overflow:hidden; isolation:isolate;
  border-bottom:1px solid var(--border-subtle);
  background:
    radial-gradient(110% 120% at 88% 6%, color-mix(in srgb, var(--col) 20%, transparent) 0%, transparent 58%),
    linear-gradient(170deg, #070B12 0%, var(--col-deep) 82%, #05080D 100%);
}
@supports not (background: color-mix(in srgb, red 10%, blue)){
  .sub-hero{ background:linear-gradient(170deg, #070B12 0%, var(--col-deep) 84%, #05080D 100%); }
}
.sub-hero::before{
  content:""; position:absolute; inset:0; z-index:0; opacity:.55; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(90% 100% at 78% 0%, #000 0%, transparent 76%);
  mask-image:radial-gradient(90% 100% at 78% 0%, #000 0%, transparent 76%);
}
.sub-hero::after{
  content:""; position:absolute; inset:0 0 auto 0; height:2px; z-index:1;
  background:linear-gradient(90deg, transparent, var(--col), transparent);
  opacity:.85;
}
.sub-hero-in{
  position:relative; z-index:2;
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  padding-block:clamp(2.75rem, 1.6rem + 4.5vw, 4.5rem);
  display:grid; gap:clamp(1.75rem, 1rem + 3vw, 3rem);
  grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  align-items:center;
}
.sub-hero h1{max-width:22ch; margin:0}
.sub-hero .lede{
  font-size:var(--fs-lead); color:var(--t-300);
  max-width:54ch; margin:var(--sp-5) 0 0; line-height:var(--lh-relaxed);
}
/* 配图面板 */
.sub-art{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--border-default); background:var(--k-900);
  box-shadow:var(--sh-lg), 0 0 0 1px rgba(255,255,255,.03) inset;
}
.sub-art img{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover}
.sub-art::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 100% at 80% 0%, color-mix(in srgb, var(--col) 18%, transparent) 0%, transparent 60%);
}
@supports not (background: color-mix(in srgb, red 10%, blue)){
  .sub-art::after{ background:none; }
}
.sub-art figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:var(--sp-5) var(--sp-5) var(--sp-4);
  background:linear-gradient(to top, rgba(5,8,13,.92) 0%, rgba(5,8,13,.55) 55%, transparent 100%);
  font-size:var(--fs-xs); color:var(--t-400); letter-spacing:var(--ls-wide);
}
.sub-art figcaption b{display:block; color:var(--col-tint); font-weight:var(--fw-semibold);
  font-size:var(--fs-sm); margin-bottom:2px; letter-spacing:var(--ls-normal)}

/* ============================ 面包屑 ============================ */
.crumb{
  max-width:var(--maxw); margin-inline:auto; padding:var(--sp-4) var(--gutter) 0;
  font-size:var(--fs-xs); color:var(--text-muted);
}
.crumb a{color:var(--text-muted)}
.crumb a:hover{color:var(--c-400)}
.crumb span{margin-inline:var(--sp-2); color:var(--t-600)}

/* ============================ 主题清单 ============================ */
.topic-head{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.topic-head h2{font-size:var(--fs-h2); margin:0 0 var(--sp-3)}
.topic-head p{color:var(--text-muted); margin:0; max-width:62ch}
.topic-list{
  max-width:var(--maxw); margin:var(--sp-6) auto 0; padding-inline:var(--gutter);
  display:grid; gap:0 var(--sp-6);
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
}
.topic-list li{
  list-style:none; margin:0;
  padding:var(--sp-3) 0 var(--sp-3) var(--sp-5);
  border-bottom:1px solid var(--border-subtle);
  position:relative; color:var(--text-body); font-size:var(--fs-sm);
  display:flex; align-items:flex-start; gap:var(--sp-3); justify-content:space-between;
  line-height:1.5;
}
.topic-list li::before{
  content:""; position:absolute; left:0; top:calc(var(--sp-3) + .45em);
  width:6px; height:6px; border-radius:2px;
  background:var(--col); opacity:.85;
}
.topic-list li b{font-weight:var(--fw-medium); color:var(--t-200)}
.topic-list li em{
  font-style:normal; font-size:var(--fs-xs); color:var(--t-500);
  letter-spacing:var(--ls-wide); white-space:nowrap; flex:none;
}
.topic-list li.plan b{color:var(--t-300)}
.topic-list li a{color:var(--t-200)}
.topic-list li a:hover{color:var(--c-400)}

/* ============================ 型号索引条（无配图，避免同系列重复用图） ============================ */
.plist{
  display:grid; gap:var(--sp-3);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  margin-top:var(--sp-6);
}
.plist a{
  position:relative; display:block; overflow:hidden;
  padding:var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6);
  background:var(--bg-surface); border:1px solid var(--border-subtle);
  border-radius:var(--r-md); color:var(--t-200);
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease),
             transform var(--dur) var(--ease);
}
.plist a::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--col); opacity:.55;
  transition:opacity var(--dur) var(--ease);
}
.plist a:hover{
  border-color:var(--col); background:var(--bg-elev); color:var(--t-100);
  text-decoration:none; transform:translateY(-2px);
}
.plist a:hover::before{opacity:1}
.plist a b{
  display:block; font-size:var(--fs-h4); font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-tight); color:var(--t-100);
}
.plist a span{
  display:block; margin-top:4px;
  font-size:var(--fs-xs); font-weight:var(--fw-regular); line-height:1.5;
  color:var(--text-muted);
}
.plist a em{
  display:block; margin-top:var(--sp-3); font-style:normal;
  font-size:var(--fs-overline); font-weight:var(--fw-medium);
  letter-spacing:var(--ls-wide); text-transform:uppercase; color:var(--col-tint);
}
.plist a.plist-cta{
  background:transparent; border-style:dashed; border-color:var(--border-default);
}
.plist a.plist-cta::before{background:transparent}
.plist a.plist-cta:hover{border-style:solid}
.plist a.plist-cta em{color:var(--link)}
@media (max-width:480px){
  .plist{grid-template-columns:1fr}
}

/* ============================ 主题页（方法笔记） ============================ */
.t-hero{
  position:relative; padding-block:var(--sect-y-sm);
  border-bottom:1px solid var(--border-subtle);
  background:linear-gradient(180deg,var(--col-deep) 0%,transparent 88%);
  overflow:hidden;
}
.t-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--border-subtle) 1px, transparent 1px),
                   linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
  background-size:56px 56px; opacity:.16;
  -webkit-mask-image:radial-gradient(90% 80% at 20% 0%, #000 0%, transparent 76%);
          mask-image:radial-gradient(90% 80% at 20% 0%, #000 0%, transparent 76%);
}
.t-hero-in{position:relative; z-index:1;
  max-width:var(--maxw-text); margin-inline:auto; padding-inline:var(--gutter)}
.t-hero h1{font-size:var(--fs-h1); margin:0 0 var(--sp-4); max-width:30ch}
.t-hero .lede{font-size:var(--fs-lead); color:var(--text-body);
  line-height:var(--lh-relaxed); margin:0; max-width:64ch}
.t-hero + .sect{padding-block:var(--sp-8) var(--sect-y)}
.t-meta{
  display:flex; flex-wrap:wrap; gap:var(--sp-3) var(--sp-5); margin-top:var(--sp-6);
  font-size:var(--fs-overline); letter-spacing:var(--ls-wide);
  text-transform:uppercase; color:var(--text-muted);
}
.t-meta span{display:inline-flex; align-items:center; gap:var(--sp-2)}
.t-meta span+span::before{
  content:""; width:3px; height:3px; border-radius:50%;
  background:var(--col); opacity:.75; margin-right:var(--sp-3);
}
.t-points{list-style:none; padding:0; margin:var(--sp-6) 0 0}
.t-points li{
  position:relative; padding:var(--sp-5) 0 var(--sp-5) var(--sp-7);
  border-top:1px solid var(--border-subtle);
  color:var(--text-body); line-height:var(--lh-relaxed);
}
.t-points li:last-child{border-bottom:1px solid var(--border-subtle)}
.t-points li::before{
  content:""; position:absolute; left:0; top:calc(var(--sp-5) + .55em);
  width:14px; height:2px; border-radius:2px; background:var(--col);
}
.t-back{
  display:flex; flex-wrap:wrap; gap:var(--sp-4); align-items:center;
  margin-top:var(--sp-8); padding-top:var(--sp-6);
  border-top:1px solid var(--border-subtle);
}
.body .t-back{margin-top:var(--sp-8)}
@media (max-width:600px){
  .t-points li{padding-left:var(--sp-6)}
  .t-back .btn{width:100%; text-align:center}
}

/* ============================ 流程步骤 ============================ */
.steps{
  counter-reset:s; margin-top:var(--sp-7);
  display:grid; gap:var(--sp-4);
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.step{
  position:relative; padding:var(--sp-5) var(--sp-4);
  background:var(--bg-surface); border:1px solid var(--border-subtle);
  border-radius:var(--r-md); box-shadow:var(--sh-xs);
}
.step::before{
  counter-increment:s; content:counter(s,decimal-leading-zero);
  display:block; margin-bottom:var(--sp-3);
  font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:var(--fw-bold);
  color:var(--col-tint); letter-spacing:var(--ls-wide);
}
.step h4{margin:0 0 var(--sp-1); font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--t-100)}
.step p{margin:0; font-size:var(--fs-xs); color:var(--text-muted); line-height:1.55}

/* ============================ 提示条 ============================ */
.note{
  background:var(--s-info-bg); border:1px solid var(--s-info-line);
  border-left:3px solid var(--accent);
  border-radius:var(--r-sm); padding:var(--sp-4) var(--sp-5);
  margin-block:var(--sp-5); font-size:var(--fs-sm); color:var(--t-300);
}
.warn{
  background:var(--s-warn-bg); border:1px solid var(--s-warn-line);
  border-left:3px solid var(--s-warn);
  border-radius:var(--r-sm); padding:var(--sp-4) var(--sp-5);
  margin-block:var(--sp-5); font-size:var(--fs-sm); color:#F5DC97;
}

/* ============================ 表格 ============================ */
table{
  width:100%; border-collapse:collapse; margin-block:var(--sp-5);
  font-size:var(--fs-sm); border:1px solid var(--border-subtle);
  border-radius:var(--r-md); overflow:hidden;
}
th,td{text-align:left; padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--border-subtle)}
tr:last-child td{border-bottom:none}
th{background:var(--bg-inset); color:var(--t-100); font-weight:var(--fw-semibold); width:38%}
tbody tr:nth-child(even){background:rgba(255,255,255,.022)}

/* ============================ 正文区 ============================ */
.body{max-width:var(--maxw-text); margin-inline:auto; padding-inline:var(--gutter)}
.body h2{margin-top:var(--sp-8); font-size:var(--fs-h2)}
.body h3{margin-top:var(--sp-6); font-size:var(--fs-h3)}
.body p{margin:0 0 var(--sp-4)}
/* 手写页：.phead 自带 margin-bottom，正文首个子元素不再叠加 sp-8 */
.body>*:first-child{margin-top:0}
/* .body 是 main 最后一个子元素时（手写页），补一段底部留白再进 CTA 区 */
.body:last-child{padding-bottom:var(--sp-8)}
/* 长串（URL / 型号 / 邮箱）不得把版心撑宽 */
.body{overflow-wrap:break-word}

/* ============================ CTA 区 ============================ */
.cta-band{
  position:relative; overflow:hidden;
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(46,124,246,.20) 0%, transparent 62%),
    linear-gradient(135deg, #06090F, #0A1524 60%, #07131C);
  padding-block:20px; text-align:center;
  border-top:1px solid var(--border-subtle);
}
.cta-band::before{
  content:""; position:absolute; inset:0; opacity:.4;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(70% 100% at 50% 0%, #000, transparent 75%);
  mask-image:radial-gradient(70% 100% at 50% 0%, #000, transparent 75%);
}
.cta-band>.wrap{position:relative}
.cta-band h2{color:var(--t-100); font-size:var(--fs-h2); margin:0 0 var(--sp-3)}
.cta-band p{
  color:var(--t-300); font-size:var(--fs-lead);
  max-width:58ch; margin-inline:auto; margin-bottom:var(--sp-6);
}

/* ============================ 页脚 ============================ */
.site-foot{
  background:#04060A; color:var(--t-400);
  padding-block:var(--sp-8) var(--sp-5); font-size:var(--fs-sm);
  border-top:1px solid var(--border-subtle);
}
.foot-grid{
  display:grid; gap:var(--sp-7) var(--sp-6);
  grid-template-columns:minmax(240px,2fr) repeat(3,minmax(120px,1fr));
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
}
.site-foot h4{
  color:var(--t-100); font-size:var(--fs-xs); font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-caps); text-transform:uppercase;
  margin:0 0 var(--sp-4);
}
.site-foot p{color:var(--t-400); margin:0 0 var(--sp-3)}
.site-foot a{color:var(--t-400); display:block; margin-bottom:var(--sp-2); font-size:var(--fs-sm)}
.site-foot a:hover{color:var(--t-100); text-decoration:none}
.social{display:flex; flex-wrap:wrap; gap:var(--sp-4); margin-top:var(--sp-4)}
.social a{color:var(--c-500); font-size:var(--fs-xs); font-weight:var(--fw-medium); letter-spacing:var(--ls-wide)}
.social a:hover{color:var(--t-100)}
.foot-bot{
  max-width:var(--maxw); margin:var(--sp-7) auto 0; padding:var(--sp-5) var(--gutter) 0;
  border-top:1px solid var(--border-subtle);
  font-size:var(--fs-xs); color:var(--t-500);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-3);
}
.foot-lang{display:inline-flex; flex-wrap:wrap; align-items:center; gap:var(--sp-4)}
.foot-lang a{color:var(--t-400); font-size:var(--fs-xs); font-weight:var(--fw-medium)}
.foot-lang a:hover{color:var(--t-100); text-decoration:none}
.foot-legal{
  max-width:var(--maxw); margin:var(--sp-5) auto 0; padding:0 var(--gutter);
  display:flex; flex-wrap:wrap; gap:var(--sp-5);
  border-top:1px solid var(--border-subtle); padding-top:var(--sp-4);
}
.foot-legal a{color:var(--t-500); font-size:var(--fs-xs); margin:0}
.foot-legal a:hover{color:var(--t-200)}

/* ===== 页面标题块（A1：保证每页唯一 h1）与页面主图（B1） ===== */
.phead{
  padding-block:var(--sp-8) var(--sp-6); border-bottom:1px solid var(--line);
  margin-bottom:var(--sp-7);
}
/* 标题块通栏（分隔线满宽），内容收进与正文同一条 70ch 中轴 */
.phead-in{max-width:var(--maxw-text); margin-inline:auto; padding-inline:var(--gutter)}
.phead h1{
  font-size:clamp(1.9rem, 1.2rem + 2.2vw, 3rem); line-height:1.12;
  letter-spacing:-0.03em; margin:0 0 var(--sp-4); max-width:22ch;
}
.phead .plead{
  font-size:var(--fs-lg); color:var(--text-body); max-width:62ch; margin:0;
}
.pfig{
  margin:0 0 var(--sp-7); border-radius:var(--r-md); overflow:hidden;
  border:1px solid var(--border-subtle); background:var(--bg-surface);
}
.pfig img{display:block; width:100%; height:auto}
.pfig figcaption{
  padding:var(--sp-3) var(--sp-4); font-size:var(--fs-xs); color:var(--text-muted);
  border-top:1px solid var(--border-subtle);
}
@media (max-width:768px){
  .phead{padding-block:var(--sp-6) var(--sp-5)}
  .phead h1{max-width:none}
}

/* ===== 站内搜索 ===== */
.search-box{margin:var(--sp-5) 0 var(--sp-3)}
.search-box input{
  width:100%; box-sizing:border-box; padding:.9em 1.1em; font:inherit;
  font-size:var(--fs-lg); color:var(--t-100);
  background:var(--bg-surface); border:1px solid var(--border-default);
  border-radius:var(--r-md);
}
.search-box input:focus{
  outline:none; border-color:var(--b-500); box-shadow:0 0 0 3px rgba(74,147,255,.18);
}
.search-hint{font-size:var(--fs-xs); color:var(--text-faint); margin:0 0 var(--sp-4)}
.search-count{font-size:var(--fs-xs); color:var(--text-muted); margin:0 0 var(--sp-3)}
.sr-snip{
  display:block; font-size:var(--fs-xs); color:var(--text-faint);
  margin-top:4px; line-height:1.5;
}

/* ===== HTML 站点地图 ===== */
.sitemap, .sitemap ul{list-style:none; margin:0; padding:0}
.sitemap li{margin:0; padding:2px 0}
.sitemap a{color:var(--link); font-size:var(--fs-sm)}
.sitemap a:hover{color:var(--link-hover)}
.sitemap .lvl0>li{margin-top:var(--sp-5)}
.sitemap .lvl0>li>a{font-size:var(--fs-lg); font-weight:var(--fw-semibold); color:var(--t-100)}
.sitemap .lvl1{margin-left:var(--sp-5); padding-left:var(--sp-4); border-left:1px solid var(--line)}
.sitemap .lvl1>li{margin-top:var(--sp-3)}
.sitemap .lvl1>li>a{font-weight:var(--fw-semibold); color:var(--t-200)}
.sitemap .lvl2{margin-left:var(--sp-5); columns:2; column-gap:var(--sp-6)}
.sitemap .sm-label{
  font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--text-muted);
}
@media (max-width:768px){ .sitemap .lvl2{columns:1} }

/* ===== 产品筛选与对比 ===== */
.filters{
  background:var(--bg-surface); border:1px solid var(--border-default);
  border-radius:var(--r-md); padding:var(--sp-5); margin-bottom:var(--sp-6);
}
.filter-row{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-3)}
.filter-label{
  font-size:var(--fs-xs); font-weight:var(--fw-semibold); color:var(--text-muted);
  letter-spacing:var(--ls-wide); min-width:8.5em;
}
.chips{display:flex; flex-wrap:wrap; gap:var(--sp-2)}
.chip{
  font:inherit; font-size:var(--fs-xs); cursor:pointer;
  padding:.5em 1em; border-radius:999px;
  background:transparent; color:var(--t-300);
  border:1px solid var(--border-default);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.chip:hover{border-color:var(--b-500); color:var(--t-100)}
.chip.is-on{background:var(--btn); border-color:var(--btn); color:#fff}
.cmp-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:var(--sp-4)}
.cmp-card{
  background:var(--bg-surface); border:1px solid var(--border-default);
  border-radius:var(--r-md); padding:var(--sp-5);
  display:flex; flex-direction:column; gap:var(--sp-3);
}
.cmp-card.is-on{border-color:var(--b-500); box-shadow:0 0 0 1px var(--b-500) inset}
.cmp-card h3{margin:0; font-size:1.15rem}
.cmp-card dl{margin:0; font-size:var(--fs-xs)}
.cmp-card dt{color:var(--text-faint); letter-spacing:var(--ls-wide); margin-top:var(--sp-2)}
.cmp-card dd{margin:0; color:var(--t-200); line-height:1.5}
.cmp-actions{display:flex; align-items:center; gap:var(--sp-3); margin-top:auto; flex-wrap:wrap}
.cmp-actions .btn{padding:.55em 1em; font-size:var(--fs-xs)}
.cmp-link{font-size:var(--fs-xs); color:var(--link)}
.cmp-link:hover{color:var(--link-hover)}
.cmp-scroll{overflow-x:auto; border:1px solid var(--border-subtle); border-radius:var(--r-md)}
.cmp-table{width:100%; border-collapse:collapse; font-size:var(--fs-sm); min-width:640px}
.cmp-table th, .cmp-table td{
  text-align:left; padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--border-subtle); vertical-align:top; line-height:1.55;
}
.cmp-table thead th{background:var(--bg-inset); color:var(--t-100); position:sticky; top:0}
.cmp-table tbody th{
  color:var(--text-muted); font-weight:var(--fw-medium); width:11em;
  background:var(--bg-subtle);
}
.cmp-table td{color:var(--t-200)}
.cmp-clear{display:flex; align-items:center; gap:var(--sp-4); margin-top:var(--sp-4)}

/* ===== 询盘表单（C1） ===== */
.form-card{
  background:var(--bg-surface); border:1px solid var(--border-default);
  border-radius:var(--r-md); padding:var(--sp-7); margin-block:var(--sp-6);
}
.form-card h2{margin-top:0}
.form-intro{color:var(--text-muted); font-size:var(--fs-sm); margin:0 0 var(--sp-5)}
.form-card .fld{margin-bottom:var(--sp-4)}
.form-card label{
  display:block; font-size:var(--fs-xs); font-weight:var(--fw-semibold);
  color:var(--t-200); letter-spacing:var(--ls-wide); margin-bottom:6px;
}
.form-card .req{color:var(--c-500); font-weight:var(--fw-regular)}
.form-card input[type=text],
.form-card input[type=email],
.form-card textarea{
  width:100%; box-sizing:border-box; padding:.7em .9em;
  background:var(--bg-inset); color:var(--t-100);
  border:1px solid var(--border-default); border-radius:var(--r-sm);
  font:inherit; font-size:var(--fs-sm); line-height:1.5;
}
.form-card input:focus, .form-card textarea:focus{
  outline:none; border-color:var(--b-500); box-shadow:0 0 0 3px rgba(74,147,255,.18);
}
.form-card textarea{resize:vertical; min-height:5.5em}
.fld-consent{margin-top:var(--sp-5)}
.form-card .chk{
  display:flex; gap:var(--sp-3); align-items:flex-start;
  font-weight:var(--fw-regular); color:var(--text-body); letter-spacing:normal;
  font-size:var(--fs-sm); line-height:1.6;
}
.form-card .chk input{margin-top:4px; flex:none; width:16px; height:16px; accent-color:var(--b-600)}
.form-privacy{font-size:var(--fs-xs); color:var(--text-faint); margin:var(--sp-4) 0 0}
.form-err{
  margin:var(--sp-4) 0 0; padding:var(--sp-3) var(--sp-4);
  background:var(--s-risk-bg); border:1px solid var(--s-risk-line);
  border-radius:var(--r-sm); color:var(--s-risk); font-size:var(--fs-sm);
}

/* ---- 字段级校验反馈 ----
   错误不能只靠颜色：色觉障碍用户、单色打印、以及把页面调成高对比度的
   场景都会丢掉「红色」这个信号。所以三路并行：
     1. 左侧竖条（形状，不依赖颜色）
     2. 控件边框变色（颜色）
     3. 字段下方一行文字，写明哪一项、缺什么
   同时配合 aria-invalid + aria-describedby 给屏幕阅读器。 */
.form-card .fld.is-err{
  border-left:3px solid var(--s-risk-line);
  padding-left:var(--sp-4); margin-left:-3px;
}
.form-card .fld.is-err input[type=text],
.form-card .fld.is-err input[type=email],
.form-card .fld.is-err textarea{
  border-color:var(--s-risk-line);
  box-shadow:0 0 0 1px var(--s-risk-line);
}
.form-card .fld.is-err input[type=checkbox]{
  outline:2px solid var(--s-risk-line); outline-offset:2px;
}
.fld-err{
  margin:6px 0 0; font-size:var(--fs-xs); line-height:1.5;
  color:var(--s-risk); font-weight:var(--fw-medium);
}
/* 文字前加一个实心方块：形状标记，不是颜色标记 */
.fld-err::before{
  content:"■"; margin-right:.45em; font-size:.9em; vertical-align:.05em;
}
.form-ok{
  margin:var(--sp-5) 0 0; padding:var(--sp-5);
  background:var(--s-ok-bg); border:1px solid var(--s-ok-line);
  border-radius:var(--r-sm);
}
.form-ok h3{margin:0 0 var(--sp-3); color:var(--s-ok); font-size:1.05rem}
.form-ok p{margin:0 0 var(--sp-2); font-size:var(--fs-sm); color:var(--t-200)}
.form-ok b{color:var(--c-400); letter-spacing:var(--ls-wide)}
.form-actions{display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-5)}
@media (max-width:480px){
  .form-card{padding:var(--sp-5)}
  .form-actions{flex-direction:column}
}

/* ============================ 响应式 ============================ */
@media (max-width:1024px){
  .nav{gap:var(--sp-4)}
  .nav>a:not(.cta):not(.lang){font-size:var(--fs-xs)}
}
@media (max-width:900px){
  .sub-hero-in{grid-template-columns:1fr; gap:var(--sp-6)}
  .sub-hero h1{max-width:none}
}
@media (max-width:768px){
  .head-in{gap:var(--sp-3)}
  /* 旧规则是「隐藏导航且不给替代入口」，已替换为下拉菜单 */
  .nav-toggle{display:inline-flex}
  .nav{margin-left:0; gap:var(--sp-3)}
  .nav .cta{margin-left:auto}
  .nav-menu{
    display:none; position:absolute; top:100%; right:var(--gutter); left:var(--gutter);
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--bg-elev); border:1px solid var(--border-default);
    border-radius:var(--r-md); padding:var(--sp-2) 0;
    box-shadow:0 18px 40px rgba(0,0,0,.45);
  }
  .nav.is-open .nav-menu{display:flex}
  .nav-menu>a{
    padding:.85em var(--sp-5); font-size:var(--fs-sm); color:var(--t-200);
    border-bottom:1px solid var(--border-subtle);
  }
  .nav-menu>a:last-child{border-bottom:none}
  .nav-menu>a:hover{background:rgba(46,124,246,.10); color:var(--t-100)}
  .nav-menu>a[aria-current]{color:var(--c-400)}
  .nav-menu .langs{
    padding:var(--sp-4) var(--sp-5); border-left:none; border-top:1px solid var(--border-subtle);
  }
  .hero-meta{grid-template-columns:repeat(2,1fr); gap:var(--sp-5)}
  .foot-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .sect{padding-block:var(--sect-y-sm)}
}
@media (max-width:480px){
  .hero-meta{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .btn{width:100%}
  .hero .btn{width:100%}
  .btn.ghost{margin-top:var(--sp-3)}
  .foot-bot{flex-direction:column; gap:var(--sp-2)}
  .topic-list li{flex-direction:column; gap:2px}
}

/* ============================ 无障碍偏好 ============================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  a.card:hover{transform:none}
  .btn:hover{transform:none}
  .thumb img{transition:none}
  a.col-card:hover .thumb img{transform:none}
}
@media print{
  .site-head,.cta-band,.site-foot{display:none}
  body{background:#fff; color:#000}
}

/* 统计同意条 */
#ml-consent{position:fixed;left:0;right:0;bottom:0;z-index:300;
  background:#0C1219;border-top:1px solid #26344A;
  padding:14px 20px;display:flex;flex-wrap:wrap;gap:12px;
  align-items:center;justify-content:center;
  font-size:13px;color:#AEBFD4;box-shadow:0 -8px 24px rgba(0,0,0,.45)}
#ml-consent p{margin:0;flex:1 1 320px;min-width:220px}
#ml-consent .mlc-btns{display:flex;gap:10px}
#ml-consent .btn{cursor:pointer;font:inherit;font-size:13px;
  border-radius:8px;padding:8px 16px;border:1px solid #1D63D1;
  background:#1D63D1;color:#fff}
#ml-consent .btn.ghost{background:transparent;color:#A8C8FF;border-color:#35455E}
@media(max-width:520px){#ml-consent{flex-direction:column;align-items:stretch}}

/* FAQ 区块（与 FAQPage 结构化数据配套；用 details/summary，无 JS 依赖）
   注意：区块插在 </main> 之前，不在 .body 容器内，所以必须自带与 .body
   一致的宽度约束，否则会撑满整屏——之前修过的「页面超宽」就是这个成因。 */
.ml-faq{max-width:var(--maxw-text);margin-inline:auto;padding-inline:var(--gutter);
  margin-top:var(--sp-9);padding-top:var(--sp-6);border-top:1px solid var(--border-subtle)}
.ml-faq h2{font-size:var(--fs-h3);line-height:var(--lh-snug);margin:0 0 var(--sp-5)}
.ml-faq details{border-bottom:1px solid var(--border-subtle);padding:var(--sp-4) 0}
.ml-faq details:last-of-type{border-bottom:none}
.ml-faq summary{cursor:pointer;font-weight:var(--fw-medium);color:var(--t-100);
  font-size:var(--fs-body);line-height:var(--lh-snug)}
.ml-faq summary::marker{color:var(--t-500)}
.ml-faq details p{margin:var(--sp-3) 0 0;color:var(--t-400);
  font-size:var(--fs-body);line-height:var(--lh-relaxed);max-width:var(--maxw-text)}