/* ============================================================
   PHPTS 多语言官网样式（自包含，不依赖任何外部主题 CSS）

   面向 41 种语言（含 ar / he / fa 的 RTL 与 de / fi / ru 的长词膨胀），
   四条硬约束：
   1) 方向相关属性一律用 CSS 逻辑属性（inline / block），RTL 自动镜像；
   2) 尺寸交给 flex / grid + clamp()，文案膨胀时换行而不是溢出、绝不重叠；
   3) 字体栈按文字系统用 :lang() 分派，覆盖 CJK / 天城 / 孟加拉 / 泰 / 老 / 缅 / 阿 / 希；
   4) 复杂文字单独抬高行高（--lh-*），避免上下文种被行框裁切。
   ============================================================ */

/* ---------------------------------------------------------- 1. 设计令牌 */
:root {
  --green: #009b4c;
  --green-dark: #007e3e;
  --ink: #232629;
  --ink-soft: #3c4247;
  --muted: #6b7178;
  --line: #e4e7ea;
  --bg: #f2f3f5;
  --bg-card: #fff;
  --footer-bg: #1f2326;
  --footer-fg: #b9bec3;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow-md: 0 4px 18px rgba(0, 0, 0, .07);
  --shadow-lg: 0 10px 34px rgba(0, 0, 0, .10);

  --gutter: clamp(16px, 3vw, 24px);
  --maxw: 1170px;

  /* 行高：默认面向拉丁/西里尔；复杂文字在下面按语种抬高 */
  --lh-base: 1.7;
  --lh-tight: 1.28;

  /* 字体栈：先给通用回退，再按语种覆盖 */
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, Tahoma, "Noto Sans", sans-serif;
}

/* ---------------------------------------------------------- 2. 各文字系统的字体栈与行高 */
html:lang(zh-CN) {
  --font-ui: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB",
    "Noto Sans SC", system-ui, sans-serif;
  --lh-base: 1.85;
  --lh-tight: 1.35;
}

html:lang(zh-TW) {
  --font-ui: "Microsoft JhengHei UI", "Microsoft JhengHei", "PingFang TC",
    "Noto Sans TC", system-ui, sans-serif;
  --lh-base: 1.85;
  --lh-tight: 1.35;
}

html:lang(ja) {
  --font-ui: "Yu Gothic UI", "Meiryo", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
    "Microsoft YaHei UI", system-ui, sans-serif;
  --lh-base: 1.85;
  --lh-tight: 1.35;
}

html:lang(ko) {
  --font-ui: "Malgun Gothic", "Noto Sans KR", "Microsoft YaHei UI", system-ui, sans-serif;
  --lh-base: 1.8;
  --lh-tight: 1.35;
}

/* 天城文（hi）与孟加拉文（bn）：元音符号上下都占空间，行高必须放宽 */
html:lang(hi) {
  --font-ui: "Nirmala UI", "Mangal", "Noto Sans Devanagari", "Segoe UI", sans-serif;
  --lh-base: 1.95;
  --lh-tight: 1.62;
}

html:lang(bn) {
  --font-ui: "Nirmala UI", "Vrinda", "Noto Sans Bengali", "Segoe UI", sans-serif;
  --lh-base: 2;
  --lh-tight: 1.65;
}

/* 泰文 / 老挝文：叠置元音与声调符号 */
html:lang(th) {
  --font-ui: "Leelawadee UI", "Tahoma", "Noto Sans Thai", "Segoe UI", sans-serif;
  --lh-base: 2;
  --lh-tight: 1.65;
}

html:lang(lo) {
  --font-ui: "Leelawadee UI", "Lao UI", Tahoma, "Noto Sans Lao", "Segoe UI", sans-serif;
  --lh-base: 2.1;
  --lh-tight: 1.7;
}

/* 缅文：字形在垂直方向堆叠最狠，行高取最大 */
html:lang(my) {
  --font-ui: "Myanmar Text", "Myanmar3", "Padauk", "Noto Sans Myanmar", "Segoe UI", sans-serif;
  --lh-base: 2.15;
  --lh-tight: 1.75;
}

/* 阿拉伯 / 波斯 / 希伯来：连写与上下标音 */
html:lang(ar),
html:lang(fa),
html:lang(he) {
  --font-ui: "Segoe UI", Tahoma, "Noto Naskh Arabic", "Noto Sans Hebrew",
    "Arial", sans-serif;
  --lh-base: 1.95;
  --lh-tight: 1.5;
}

/* ---------------------------------------------------------- 3. 基础与重置 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--font-ui);
  line-height: var(--lh-base);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-size: 16px;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* 技术串（路径/版本号/邮箱/电话/URL）在 RTL 下保持 LTR，否则斜杠与点号会错位 */
html[dir="rtl"] :is(code, kbd, samp, .mono, .btn-sub, .lang-cur, .tel, a[href^="mailto:"], a[href^="http"]) {
  direction: ltr;
  unicode-bidi: isolate;
}

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  line-height: var(--lh-tight);
  color: var(--ink);
  font-weight: 700;
}

p {
  margin: 0 0 1em;
}

p:last-child {
  margin-block-end: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  border: 0;
}

a {
  color: var(--green);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 3px;
}

/* 显式跳过翻译/不需要阅读的内容 */
[hidden] {
  display: none !important;
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------------------------------------------------------- 4. 按钮 */
.btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  max-width: 100%;
  padding: 12px 26px;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 16px;
  line-height: var(--lh-tight);
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.btn:hover {
  text-decoration: none;
}

.btn-lg {
  padding: 15px 32px;
  font-size: 17px;
}

.btn-primary {
  background: var(--green);
  color: #fff;
}

.btn-primary:hover {
  background: var(--green-dark);
  color: #fff;
}

.btn-ghost {
  background: transparent;
  color: var(--green);
  border-color: currentColor;
}

/* 悬停必须连 color 一起写：只写 background 的话，一旦元素同时带了 .btn-primary，
   它的 :hover 会把 color 定成白色，浅绿底 + 白字就看不清了（两者特异性相同，
   谁生效取决于书写顺序，不能依赖）。这里写成自足的，不依赖类组合。 */
.btn-ghost:hover {
  background: rgba(0, 155, 76, .07);
  color: var(--green);
}

.btn-sub {
  font-size: 12px;
  font-weight: 400;
  opacity: .85;
}

/* ---------------------------------------------------------- 5. 顶部导航 */
/* 导航不固定：随页面滚动一起走（原来 position: sticky 会一直压在顶部、
   在窄屏展开菜单时还会遮住正文）。若将来要恢复固定，注意给 .nav-collapse
   展开态留出高度，否则移动端菜单会被导航自身裁掉。 */
.site-nav {
  position: relative;
  z-index: 100;
  background: #fff;
  border-block-end: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.nav-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  min-height: 68px;
  padding-block: 8px;
}

/* 品牌：非中文页用纯文字标识，避免图片里的中文出现在外语页面 */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  color: var(--ink);
  text-decoration: none;
}

.brand:hover {
  text-decoration: none;
}

/* 应用图标（绿色圆角方图，1024×1024 原图，交给浏览器缩放） */
.brand-icon {
  display: block;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 9px;
}

.brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.brand-name {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .4px;
  line-height: 1.15;
}

.brand-sub {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.2;
  direction: ltr;
  unicode-bidi: isolate;
}

.brand-logo {
  display: block;
  height: 42px;
  width: auto;
}

.nav-toggle {
  display: none;
  margin-inline-start: auto;
  padding: 9px 10px;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.nav-toggle .bar {
  display: block;
  width: 20px;
  height: 2px;
  margin-block: 4px;
  background: var(--ink);
}

.nav-collapse {
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 4px;
}

.nav-list > li {
  position: relative;
}

.nav-list a {
  display: inline-block;
  padding: 10px 12px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.4;
  text-decoration: none;
  white-space: normal;
}

.nav-list a:hover {
  color: var(--green);
  text-decoration: none;
}

/* 下拉：默认收起，hover / 键盘聚焦 / 触屏点击展开 */
.nav-dd-toggle::after {
  content: "▾";
  margin-inline-start: 6px;
  font-size: 10px;
  color: var(--muted);
}

.submenu {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  z-index: 110;
  min-width: 230px;
  max-width: min(90vw, 340px);
  padding: 8px 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

.nav-dd:hover > .submenu,
.nav-dd:focus-within > .submenu,
.nav-dd.open > .submenu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.submenu li {
  position: relative;
}

.submenu a {
  display: block;
  padding: 8px 16px;
  font-size: 14px;
  white-space: normal;
}

.submenu .nav-dd-toggle::after {
  content: "▸";
}

html[dir="rtl"] .submenu .nav-dd-toggle::after {
  content: "◂";
}

/* 二级下拉向左展开，避免贴到视口右侧被裁掉 */
.submenu .submenu {
  inset-block-start: -9px;
  inset-inline-start: 100%;
}

/* ---------------------------------------------------------- 6. 语言选择器 */
.lang-form {
  margin: 0;
  flex: none;
}

.lang-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: min(260px, 60vw);
  padding: 7px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
}

.lang-pill:hover {
  border-color: var(--green);
  color: var(--green);
}

.lang-globe,
.lang-caret {
  flex: none;
}

/* 语言名按语种膨胀（「Bahasa Indonesia」远长于「English」），一律省略号收口 */
.lang-cur {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 透明原生 select 覆盖整个胶囊：选项列表交给系统绘制，任何语言都不溢出、可键盘操作 */
.lang-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.lang-fallback {
  display: none;
  margin-block-start: 8px;
}

/* ---------------------------------------------------------- 7. 首屏 */
/* 背景是「白 → 浅灰 → 白」的三段渐变，不是「白 → 浅灰」：
   下一区块（.section-plain）是纯白，若首屏以灰色收尾，两者就在分界处硬碰成一条直线，
   看起来像图片被切掉。现在底部渐隐回白，同时留出下内边距让背景延伸到图片下方，
   过渡就化开了。灰色峰值取 52%，正好落在选项卡与截图那一带的背后。 */
.hero {
  padding-block: clamp(40px, 7vw, 72px) clamp(48px, 7vw, 88px);
  background: linear-gradient(#fff 0%, var(--bg) 52%, #fff 100%);
}

.hero-text {
  max-width: 880px;
  margin-inline: auto;
  text-align: center;
}

.hero h1 {
  font-size: clamp(27px, 4.6vw, 46px);
  margin-block-end: .4em;
}

.lead {
  font-size: clamp(15px, 1.7vw, 18px);
  color: var(--muted);
  margin-inline: auto;
  margin-block-end: 1.6em;
}

.lead .hl {
  color: var(--green);
  font-weight: 700;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

/* ---------------------------------------------------------- 8. 图文分栏（全宽截图 + 下方横向选项卡） */
/* 截图占满整行，与顶部导航内容同宽；文字选项移到截图下方做成选项卡。
   选项卡用 grid 而不是居中的 flex-wrap：这些标签本身是整句，de/ru/fi 等语言膨胀后
   居中换行会退化成一行一个（俄语实测 5 行），grid 的列宽固定，换行发生在列内，
   行数可预测（一般 2 行），也更整齐。 */
.showcase {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.4vw, 26px);
  margin-block-start: clamp(32px, 5vw, 56px);
}

.showcase-tabs {
  width: 100%;
  min-width: 0;
}

.tab-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 8px;
}

.tab-strip li a {
  display: block;
  height: 100%;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
}

.tab-strip li a:hover {
  border-color: var(--green);
  color: var(--green);
  text-decoration: none;
}

.tab-strip li.active a {
  background: rgba(0, 155, 76, .08);
  border-color: var(--green);
  color: var(--green);
}

/* 当前选项的说明段落。
   不设 max-width：要与上方选项卡、下方截图同宽（此前限宽 920px 居中，
   两侧比选项卡窄出一截，看起来像「文字块被缩进去了」）。 */
.tab-panels {
  margin-block-start: clamp(16px, 2vw, 22px);
}

.tab-panels p {
  display: none;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  text-align: start;
}

.tab-panels p.active {
  display: block;
}

/* 截图卡：图片按原始比例铺满整宽。
   这里**不能**给 .shot-frame 设固定 aspect-ratio：几张界面截图比例并不一致
   （1.30 ~ 1.65），固定 3:2 + object-fit:contain 会在顶栏下方留出一条浅色空带
   （看起来像「横框下有空隙」）。改为由图片自身决定高度，既无留白也不裁内容。
   选项与说明都在图片**上方**，所以切换选项时行高变化不会带动选项位置。 */
.shot {
  width: 100%;
  overflow: hidden;
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.shot-chrome {
  display: flex;
  gap: 5px;
  padding: 11px 14px;
  border-block-end: 1px solid var(--line);
}

.shot-chrome span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #dfe2e5;
}

.shot-frame {
  background: var(--bg-card);
  line-height: 0;
}

.shot-frame img {
  display: none;
  width: 100%;
  height: auto;
}

.shot-frame img.active {
  display: block;
}

/* ---------------------------------------------------------- 9. 区块与卡片网格 */
.section {
  padding-block: clamp(44px, 6vw, 72px);
}

.section-alt {
  background: var(--bg);
}

.section-plain {
  background: #fff;
}

.section-head {
  max-width: 820px;
  margin-inline: auto;
  margin-block-end: clamp(28px, 4vw, 44px);
  text-align: center;
}

.section-head h2 {
  font-size: clamp(23px, 3vw, 32px);
  margin-block-end: .35em;
}

.section-head .lead {
  font-size: 17px;
  margin-block-end: 0;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(18px, 2.4vw, 28px);
}

.card {
  padding: 26px 20px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}

.card h3 {
  font-size: 18px;
  margin-block: 14px 8px;
}

.card p {
  color: var(--muted);
  font-size: 14.5px;
  margin: 0;
}

.card img {
  border-radius: 8px;
}

/* 图标 + 文字的横向卡片（内置工具区 / 左右分栏列表） */
.card-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  text-align: start;
}

.card-row > img {
  flex: none;
}

.card-row h3 {
  margin-block-start: 0;
}

/* 内置工具：左图右列表 */
.tools {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(20px, 3.4vw, 36px);
}

.tools-media {
  flex: 1 1 460px;
  min-width: 0;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.tools-list {
  flex: 1 1 380px;
  min-width: 0;
  display: grid;
  gap: 18px;
}

/* 内置客户端截图：框内轮播。四张界面图共用一屏，每 3 秒自动切换（见 template.php 底部脚本），
   鼠标悬停时暂停以免「正要点击时图被换走」，点击图片可放大。 */
.carousel {
  position: relative;
  line-height: 0;
}

.carousel img {
  display: none;
  width: 100%;
  height: auto;
  cursor: zoom-in;
}

.carousel img.active {
  display: block;
}

/* 进度点：既是位置指示，也可直接跳到某一张 */
.carousel-dots {
  position: absolute;
  inset-block-end: 10px;
  inset-inline: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  line-height: 0;
}

.carousel-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .8);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
  cursor: pointer;
}

.carousel-dots button.active {
  background: var(--green);
  box-shadow: 0 0 0 1px var(--green);
}

/* 放大层：点击轮播图后全屏查看，点任意处或按 Esc 关闭 */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 40px);
  background: rgba(0, 0, 0, .86);
  cursor: zoom-out;
  line-height: 0;
}

.lightbox.open {
  display: flex;
}

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}

.lightbox-close {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-end: 16px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 22px;
  line-height: 40px;
  cursor: pointer;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, .3);
}

/* ---------------------------------------------------------- 10. 用户评价 */
.quote {
  padding: 28px 22px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}

.quote img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
}

.quote blockquote {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 15px;
}

.quote cite {
  display: block;
  margin-block-start: 12px;
  color: var(--ink);
  font-style: normal;
  font-weight: 600;
}

.quote cite span {
  display: block;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 400;
}

/* ---------------------------------------------------------- 11. 底部行动区 */
.cta-band {
  padding-block: clamp(40px, 5vw, 56px);
  background: var(--green);
  color: #fff;
  text-align: center;
}

.cta-band h2 {
  max-width: 900px;
  margin-inline: auto;
  margin-block-end: 1.2em;
  color: #fff;
  font-size: clamp(19px, 2.6vw, 26px);
  font-weight: 500;
}

.cta-band .btn-ghost {
  color: #fff;
  border-color: #fff;
}

.cta-band .btn-ghost:hover {
  background: rgba(255, 255, 255, .14);
  color: #fff;
}

/* ---------------------------------------------------------- 12. 页脚 */
.site-footer {
  padding-block: clamp(40px, 5vw, 56px) 24px;
  background: var(--footer-bg);
  color: var(--footer-fg);
  font-size: 14.5px;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 32px;
}

.site-footer h3 {
  margin-block-end: 1em;
  color: #fff;
  font-size: 16px;
}

.site-footer li {
  margin-block-end: 9px;
}

.site-footer a {
  color: var(--footer-fg);
  text-decoration: none;
}

.site-footer a:hover {
  color: #fff;
}

.footer-about p {
  margin-block-end: 0;
}

.footer-about :is(a, code, .tel) {
  unicode-bidi: isolate;
}

.copyright {
  margin-block-start: 36px;
  padding-block-start: 20px;
  border-block-start: 1px solid #34393d;
  color: #82888e;
  text-align: center;
}

/* ---------------------------------------------------------- 13. RTL 修正 */
html[dir="rtl"] .submenu {
  text-align: start;
}

/* ---------------------------------------------------------- 14. 响应式 */
@media (max-width: 900px) {
  .nav-toggle {
    display: block;
  }

  /* 折叠面板：展开后占满整行，纵向排列，避免横向挤压重叠 */
  .nav-collapse {
    display: none;
    flex-basis: 100%;
    justify-content: flex-start;
    padding-block-end: 12px;
  }

  .nav-collapse.open {
    display: flex;
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .nav-list a {
    display: block;
  }

  /* 触屏没有 hover：改为点击展开的静态列表 */
  .submenu {
    position: static;
    max-width: none;
    margin-inline-start: 14px;
    padding: 0;
    border: 0;
    border-inline-start: 2px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
  }

  .nav-dd.open > .submenu {
    display: block;
  }

  .nav-dd:hover > .submenu {
    display: none;
  }

  .nav-dd.open:hover > .submenu {
    display: block;
  }

  .nav-lang {
    margin-block-start: 8px;
  }

  .lang-pill {
    max-width: 100%;
  }
}

@media (max-width: 520px) {
  .brand-logo {
    height: 34px;
  }

  .brand-icon {
    width: 34px;
    height: 34px;
  }

  .btn {
    width: 100%;
  }

  .hero-actions {
    gap: 10px;
  }
}

/* ---------------------------------------------------------- 15. 无障碍与降级 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-nav,
  .cta-band {
    display: none;
  }

  .section {
    padding-block: 12px;
  }

  body {
    color: #000;
  }
}