/* 2026-11-10 · 视觉加强（方案 B）
 *
 * 只做 token 与"表面/层级"三件事，避免逐页重写：
 *   1) 说明文字与描边加深（现状偏淡，正文可读性差）
 *   2) 卡片加白底 + 描边 + 大范围柔和投影（浮起来，层级清楚）
 *   3) 区块小标签用主红（每块有视觉锚点）
 *
 * 通过 <link> 在每页 </head> 前最后加载：同优先级下后加载生效，
 * 因此不需要改各页原有内联样式表。
 */

:root{
  --muted: oklch(0.30 0.012 264);
  --line: oklch(0.14 0 0 / 0.24);
  --line-strong: oklch(0.14 0 0 / 0.60);
  --surface: #fff;
  --elev: 0 40px 80px -30px oklch(0.14 0.02 264 / .66), 0 14px 28px -14px oklch(0.14 0.02 264 / .32), 0 1px 0 oklch(0.14 0 0 / .10);
}

/* 1) 文字：不再发灰 */
.micro,.tpl-note,.note,.meta,.mailnote,.plan-sub,.card-meta p,.glance-foot span,.inc-c p{
  color: var(--ink, currentColor);
  opacity: .78;
}
.lede2,.lede,.foot p,.foot-legal{ color: var(--ink, currentColor); opacity: .88; }

/* 3) 区块小标签：主红锚点（仅区块级，不动卡片内部的档位标签） */
.sect-head .lbl,section > .shell > .lbl,.sec-head .lbl{ color: var(--accent); }

/* 2) 卡片：白底 + 描边 + 投影（覆盖各页不同的卡片类名） */
.card,.plan,.tpl,.tier,.bundle,.case-card,.ex-card,.free-card,.ov-card,.contact-cards > *,.glance,
.ladder-card,.inc-c,.panel,.rm-panel,.mnav-panel,.ai-card,.ba-card{
  background: var(--surface);
  border-color: var(--line-strong);
  box-shadow: var(--elev);
  transition: box-shadow .22s cubic-bezier(.22,1,.36,1), transform .22s cubic-bezier(.22,1,.36,1);
}
.card:hover,.plan:hover,.tpl:hover,.tier:hover,.glance:hover,.ladder-card:hover{ box-shadow: 0 56px 110px -44px oklch(0.12 0.02 264 / .92), 0 4px 0 oklch(0.14 0 0 / .10); transform: translateY(-2px); }
.plans{ border-top-color: var(--line-strong); border-bottom-color: var(--line-strong); }

/* 规格行：实线分隔 + 值加粗，数字一眼能扫 */
.plan-specs li{ border-top: 1px solid var(--line); padding: 8px 0; }
.plan-specs li:first-child{ border-top: 0; }
.plan-specs li > span{ color: var(--ink, currentColor); opacity: .70; }
.plan-specs li > b{ font-weight: 700; }
.plan .price .amt,.tier .price b,.tpl .price{ font-weight: 700; }

/* 表格：表头更实、数值更重、斑马纹防串行 */
.cmp thead th{ background: oklch(0.93 0.008 264); color: var(--ink); }
.cmp th[scope="colgroup"]{ background: oklch(0.90 0.012 264); color: var(--ink); }
.cmp th[scope="row"]{ color: var(--ink); }
.cmp td.num{ font-weight: 700; }
.cmp tbody tr:nth-child(even) td,.cmp tbody tr:nth-child(even) th[scope="row"]{ background: oklch(0.975 0.004 264); }
.tbl-scroll{ border-width: 2px; }

/* 按钮：字重与内高光，主按钮更"硬" */
.btn{ font-weight: 600; }
.btn:not(.ghost){ box-shadow: inset 0 1px 0 oklch(1 0 0 / .18); }

/* 减少动效偏好：不改变静态观感 */
@media (prefers-reduced-motion: reduce){ .card,.plan,.tpl,.tier{ transition: none !important; } }

/* 2026-11-10 · 粒子只在"页边"出现，中间内容区留白
 * 之前用毛玻璃面板压粒子，看起来发灰（脏）。改成给画布加径向遮罩：
 * 中间 46% 完全透明 → 文字区没有任何粒子；外圈逐渐显现，保留动效。
 */
#fx-particles{
  -webkit-mask-image: radial-gradient(120% 95% at 50% 42%, transparent 0 46%, #000 82%);
  mask-image: radial-gradient(120% 95% at 50% 42%, transparent 0 46%, #000 82%);
}
@media (max-width: 640px){
  /* 手机上内容铺满，边缘遮罩会更窄，避免中间出现粒子 */
  #fx-particles{
    -webkit-mask-image: radial-gradient(120% 80% at 50% 40%, transparent 0 60%, #000 92%);
    mask-image: radial-gradient(120% 80% at 50% 40%, transparent 0 60%, #000 92%);
  }
}

/* 2026-11-10 · 多列内容块卡片化
 * 这些区块原本只是用分隔线切开的文字列（GEO/SEO/AIO、流程四步等），
 * 在视觉上不像独立模块。统一给它们卡片表面：白底 + 描边 + 投影 + 内边距，
 * 同时去掉相邻分隔线，避免"卡片里还有竖线"的脏感。
 */
.pillars{gap:18px;border-top:0;border-bottom:0}
.pillars > .pillar{
  background:#fff;border:1px solid var(--line-strong);border-right:1px solid var(--line-strong);
  padding:26px 24px 24px;box-shadow:var(--elev);
}
.pillars > .pillar:last-child{border-right:1px solid var(--line-strong)}
.steps{gap:18px;border-top:0;border-bottom:0}
.steps > div,.steps > article{
  background:#fff;border:1px solid var(--line-strong);padding:22px 20px;box-shadow:var(--elev);
}
.pillars > .pillar:hover,.steps > div:hover,.steps > article:hover,.sol-grid > *:hover,
.credit-grid > *:hover,.faq details:hover,.flow > div:hover,.doc-grid > *:hover,
.inc-c:hover,.case-grid > div:hover,.tpl:hover,.tier:hover{
  box-shadow: 0 56px 110px -44px oklch(0.12 0.02 264 / .92), 0 4px 0 oklch(0.14 0 0 / .10);
  transform: translateY(-3px);
}
.pillar .viz{border-top:1px solid var(--line)}
.pillar ul li{border-top:1px solid var(--line)}
.sol-grid{gap:18px}
.sol-grid > *{background:#fff;border:1px solid var(--line-strong);padding:22px 20px;box-shadow:var(--elev)}
.credit-grid > *{background:#fff;border:1px solid var(--line-strong);padding:22px 20px;box-shadow:var(--elev)}
@media (max-width: 900px){
  .pillars > .pillar,.steps > div,.steps > article{box-shadow:0 14px 34px -20px oklch(0.16 0.02 264 / .5)}
}

/* 2026-11-10 · 全站区块卡片化（FAQ / 流程 / 文档页 / 包含项 / 案例 / 方案段）
 * 原则：只要是一块"可独立阅读的内容介绍"，就给它独立表面（白底 + 描边 + 投影），
 * 不再靠分隔线把整页切成条。列表/表格内部不加卡片，避免一层套一层。
 */
.faq{display:grid;gap:14px}
.faq details{
  background:#fff;border:1px solid var(--line-strong);box-shadow:var(--elev);
  padding:20px 22px;transition:box-shadow .22s cubic-bezier(.22,1,.36,1),transform .22s cubic-bezier(.22,1,.36,1);
}
.faq details[open]{border-color:oklch(0.14 0 0 / .68)}
.faq details summary{padding:0}
.faq details .ans{margin-top:12px}
.flow{display:grid;gap:14px}
.flow > div{
  background:#fff;border:1px solid var(--line-strong);box-shadow:var(--elev);
  padding:20px 22px;transition:box-shadow .22s cubic-bezier(.22,1,.36,1),transform .22s cubic-bezier(.22,1,.36,1);
}
.doc-grid{gap:16px}
.doc-grid > *{
  background:#fff;border:1px solid var(--line-strong);box-shadow:var(--elev);padding:22px 24px;
}
.inc{gap:16px}
.inc-c{
  background:#fff;border:1px solid var(--line-strong);box-shadow:var(--elev);padding:20px 22px;
  transition:box-shadow .22s cubic-bezier(.22,1,.36,1),transform .22s cubic-bezier(.22,1,.36,1);
}
.case-grid > div{
  background:#fff;border:1px solid var(--line-strong);box-shadow:var(--elev);padding:20px 22px;
  transition:box-shadow .22s cubic-bezier(.22,1,.36,1),transform .22s cubic-bezier(.22,1,.36,1);
}
.sol{
  background:#fff;border:1px solid var(--line-strong);box-shadow:var(--elev);
  padding:26px 26px 30px;
}
.sol + .sol{margin-top:22px}
@media (max-width: 900px){
  .faq details,.flow > div,.inc-c,.case-grid > div,.sol{box-shadow:0 16px 36px -22px oklch(0.16 0.02 264 / .5)}
}
@media (prefers-reduced-motion: reduce){
  .faq details,.flow > div,.inc-c,.case-grid > div,.pillars > .pillar,.steps > div,.sol-grid > *{transition:none}
  .faq details:hover,.flow > div:hover,.inc-c:hover,.case-grid > div:hover,.pillars > .pillar:hover,.steps > div:hover,.sol-grid > *:hover{transform:none}
}

/* 2026-11-10 · 逐页补全卡片化（按各页真实类名）
 * 这一步把"看着像栏目、其实没有表面"的块全部变成卡片：
 * contact 流程 / 邮件前准备，privacy·terms 文档格与提示，geo·aio 面板，
 * audit 六层，research 规格块，solutions 栏目，templates 模板卡，index 引擎面板。
 */
.flow > div,.ct-row > div,.prep > li,
.doc-grid > *,.callout,
.panel,.layers > .layer,.layer,
.spec,.spec-body,.dl-item,
.sol-col,
.tpl,
.engine,
.inc-c,.bundle,.glance,.ladder-card,
.files > *,.req{
  background:#fff;
  border:1px solid var(--line-strong);
  box-shadow:var(--elev);
}
.flow > div,.ct-row > div,.doc-grid > *,.callout,.layer,.spec,.dl-item,.sol-col,.engine{
  padding:20px 22px;
}
.prep > li{padding:14px 16px;margin:0}
.prep{display:grid;gap:12px}
.files{display:grid;gap:14px}
.files > *{padding:18px 20px}
.dl{display:grid;gap:12px}
.flow,.ct-row,.doc-grid{gap:16px}
.layers{gap:16px}
/* 卡片内不再出现第二条分隔线，避免"框中框" */
.flow > div,.ct-row > div,.doc-grid > *,.layer,.spec,.sol-col,.engine{padding-top:20px}


/* 2026-11-10 D8 · RTL（阿拉伯语/希伯来语）：镜像方向性元素
 * 只覆盖真正有方向的样式（左红条、箭头、内边距），几何居中/网格不需要改。 */
[dir="rtl"] .lbl,[dir="rtl"] .lede2,[dir="rtl"] .card p,[dir="rtl"] .faq details{ text-align: right }
[dir="rtl"] .pillar ul li,[dir="rtl"] .quote,[dir="rtl"] .answer{ border-left: 0; border-right: 2px solid var(--accent); padding-left: 0; padding-right: 12px }
[dir="rtl"] .more i,[dir="rtl"] .btn i{ transform: scaleX(-1); display: inline-block }
[dir="rtl"] .lang-switch{ margin-left: 0; margin-right: 18px }
[dir="rtl"] .hero-copy,[dir="rtl"] .sect-head > div:first-child{ text-align: right }
[dir="rtl"] .plan-specs li,[dir="rtl"] .cmp td,[dir="rtl"] .cmp th{ text-align: right }

/* 2026-11-10 F4 · 窄屏表格横向滚动
 * 德语词更长（"Tracking-Fragen, transparent bepreist"），定价对比表在 360px
 * 会撑出 547px 宽导致整页横向滚动。这里让表格自己滚，页面不滚。 */
@media (max-width: 640px){
  .cmp, table, .tbl-wrap table{
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .cmp th, .cmp td{ white-space: nowrap }
  html, body{ max-width: 100%; overflow-x: hidden }
}
/* 长单词（德语复合词）不要撑破容器 */
h1, h2, h3, .lede2, .card p, .pillar li{ overflow-wrap: anywhere; word-break: normal; hyphens: auto }

/* 2026-11-11 · 页头语言切换改为下拉（语言会持续增加，横向平铺会挤爆页头）
 * 纯 <details>/<summary>：无 JS 可展开、可键鼠操作、菜单内是真实 <a href>（SEO 不受影响） */
/* 2026-11-11 · 页头语言切换：下拉式（窄、紧凑；语言增多也不挤页头） */
.lang-dd{
  position:relative;display:inline-block;margin-left:16px;vertical-align:middle;
}
.lang-dd > summary{
  list-style:none;cursor:pointer;user-select:none;
  display:inline-flex;align-items:center;gap:6px;
  height:30px;padding:0 9px 0 8px;
  border:1px solid var(--line-strong);border-radius:6px;background:#fff;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);
  transition:border-color .18s cubic-bezier(.22,1,.36,1),box-shadow .18s cubic-bezier(.22,1,.36,1),background .18s cubic-bezier(.22,1,.36,1);
}
.lang-dd > summary::-webkit-details-marker{display:none}
.lang-dd > summary::marker{content:""}
.lang-dd > summary:hover{border-color:oklch(0.55 0.01 264);background:oklch(0.985 0.004 264)}
.lang-dd > summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lang-dd[open] > summary{border-color:var(--accent)}
.lang-dd-globe{flex:0 0 auto;opacity:.62}
.lang-dd-cur{white-space:nowrap}
.lang-dd > summary::after{
  content:"";width:5px;height:5px;margin-left:1px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-1px);opacity:.55;
  transition:transform .18s cubic-bezier(.22,1,.36,1);
}
.lang-dd[open] > summary::after{transform:rotate(-135deg) translateY(-1px);opacity:.9}

.lang-dd-menu{
  position:absolute;top:calc(100% + 6px);left:0;z-index:60;
  width:max-content;min-width:140px;max-width:min(240px, calc(100vw - 24px));
  margin:0;padding:5px;list-style:none;
  background:#fff;border:1px solid var(--line-strong);border-radius:10px;
  box-shadow:0 18px 40px -26px oklch(0.18 0.02 264 / .55), 0 3px 10px -6px oklch(0.18 0.02 264 / .28);
}
.lang-dd-menu::before{
  content:"Language";display:block;
  padding:3px 7px 7px;margin:0 -5px 5px;
  border-bottom:1px solid var(--line);
  font-family:var(--font-mono);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);
}
.lang-dd-menu li{margin:0}
.lang-dd-menu a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:6px 7px;border-radius:6px;text-decoration:none;
  font-size:12.5px;line-height:1.15;color:var(--ink);
  transition:background .15s cubic-bezier(.22,1,.36,1),color .15s cubic-bezier(.22,1,.36,1);
}
.lang-dd-menu a:hover{background:oklch(0.968 0.006 264)}
.lang-dd-menu a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.lang-dd-menu a.is-on{color:var(--accent);font-weight:650;background:color-mix(in oklab, var(--accent) 7%, #fff)}
.lang-dd-menu a.is-on::after{content:"";flex:0 0 auto;width:5px;height:5px;background:var(--accent)}
[dir="rtl"] .lang-dd{margin-left:0;margin-right:16px}
[dir="rtl"] .lang-dd-menu{left:auto;right:0}
@media (max-width: 900px){
  .lang-dd{margin-left:10px}
  .lang-dd > summary{height:28px;padding:0 8px;font-size:9.5px;gap:5px}
  .lang-dd-menu{min-width:132px}
}
@media (max-width: 640px){
  .lang-dd{margin-left:8px}
  .lang-dd-cur{display:none}
  .lang-dd > summary{padding:0 7px;gap:5px}
  .lang-dd-menu{min-width:126px;max-width:calc(100vw - 16px)}
}