/* ================================================================
   4F4C 官网样式 style.css
   设计规范依据：design-system.css（冷灰底 + 靛蓝主色设计语言）。
   所有颜色 / 字体 / 圆角 / 阴影 / 间距一律引用 :root 令牌，
   禁止魔法数值。响应式断点：820 / 560 / 400。
   ================================================================ */

/* ================================================================
   01 · 设计令牌 Design Tokens（与 design-system.css 保持一致）
   ================================================================ */
:root {
  /* ── 颜色 · Color ─────────────────────────────────────────── */
  --color-bg: #f5f7fb;               /* 页面底色：浅冷灰，柔和、低干扰 */
  --color-surface: #ffffff;          /* 卡片表面：纯白，与灰底形成层次 */
  --color-surface-hover: #f0f2f8;    /* 表面 hover：比白底略沉，提示可交互 */
  --color-border: #e2e6ef;           /* 细分隔线：行分隔、控件描边 */
  --color-border-strong: #c5cde0;    /* 强边框：次级按钮描边等 */

  /* 文字色阶：由深到浅三级 */
  --color-text: #0f1629;             /* 主文字：近黑藏蓝，用于大标题、强数字 */
  --color-text-muted: #5a6580;       /* 次级文字：描述、说明、元信息 */
  --color-text-dim: #8892a8;         /* 弱化文字：单位、占位 */

  /* 主色（靛蓝）体系 */
  --color-accent: #4d6bfe;           /* 主色：链接、激活态、主按钮 */
  --color-accent-hover: #3b54e0;     /* 主色 hover：加深，强化按压反馈 */
  --color-accent-light: #edf0ff;     /* 主色浅底：胶囊标签、选中底 */
  --color-accent-strong: #1a2b4a;    /* 深藏蓝：大标题、核心数值 */
  --color-accent-gradient: #6b86ff;  /* 主色渐变高亮端 */

  /* 状态与数据色 */
  --color-white: #ffffff;            /* 纯白：按钮文字、反白场景 */
  --color-warning: #f59e0b;          /* 琥珀黄：需关注状态 */
  --color-success: #22a55e;          /* 成功绿：复制成功等正向反馈 */
  --color-success-hover: #1b8a4e;    /* 成功绿 hover：加深一档 */
  --color-success-light: #eaf7f0;    /* 成功绿浅底：成功态底色 */
  --color-low: #6b7280;              /* 评分「低」档：中性灰 */
  --color-mid: #4d6bfe;              /* 评分「中」档：靛蓝 */
  --color-high: #002fa7;             /* 评分「高」档：深蓝 */
  --color-nav-bg: rgba(255, 255, 255, 0.85); /* 导航栏半透明底，配合毛玻璃 */

  /* 历史别名（兼容 design-system.css 旧代码） */
  --bg: var(--color-bg);
  --surface: var(--color-surface);
  --surface-hover: var(--color-surface-hover);
  --border: var(--color-border);
  --border-strong: var(--color-border-strong);
  --text: var(--color-text);
  --text-muted: var(--color-text-muted);
  --text-dim: var(--color-text-dim);
  --accent: var(--color-accent);
  --accent-hover: var(--color-accent-hover);
  --accent-light: var(--color-accent-light);
  --accent-strong: var(--color-accent-strong);
  --low: var(--color-low);
  --mid: var(--color-mid);
  --high: var(--color-high);

  /* ── 字体 · Typography ────────────────────────────────────── */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "SF Mono", SFMono-Regular, ui-monospace, Menlo, Consolas, monospace;

  /* 细粒度字号阶梯 */
  --fs-2xs: 0.7rem;      /* 极小：副标签、XS 屏导航链接 */
  --fs-xs-1: 0.65rem;    /* 极小微章 */
  --fs-xs: 0.75rem;      /* 小标签：移动端胶囊 */
  --fs-xss: 0.72rem;     /* 小徽章文字 */
  --fs-xs-2: 0.78rem;    /* eyebrow / 极弱说明 */
  --fs-sm: 0.8rem;       /* 小号：标签、图例头、区块编号 */
  --fs-sm-2: 0.82rem;    /* 常用小号：胶囊、图例描述、导航链接 */
  --fs-sm-3: 0.84rem;    /* 页脚、次级摘要 */
  --fs-md: 0.88rem;      /* 描述小正文 */
  --fs-md-2: 0.9rem;     /* 列表正文：导航链接、模型标签 */
  --fs-md-3: 0.92rem;    /* 标准正文：卡片摘要 */
  --fs-lg: 0.95rem;      /* 按钮文字 */
  --fs-lg-2: 0.98rem;    /* 手风琴标题 */
  --fs-base: 1rem;       /* 正文基准 */
  --fs-lg-3: 1.05rem;    /* hero 描述 */
  --fs-xl: 1.1rem;       /* 强调数字 */
  --fs-2xl: 1.2rem;      /* 小节标题 */
  --fs-3xl: 1.5rem;      /* 区块标题 */

  /* 流体大字号：随视口在 min→max 间线性缩放。
     先声明固定值兜底，再声明 clamp 覆盖：不支持 clamp() 的旧内核
     使用固定值，支持的使用流体值，两种环境都不出问题 */
  --fs-hero-title: 3rem;
  --fs-hero-title: clamp(2.4rem, 6vw, 4rem);    /* hero 主标题：大屏 38~64px */
  --fs-score-num: 4.3rem;
  --fs-score-num: clamp(3.4rem, 8vw, 5.2rem);   /* 核心评分数字：大屏 54~83px */
  --fs-hero-title-sm: 2.2rem;
  --fs-hero-title-sm: clamp(1.8rem, 10vw, 2.6rem); /* 移动端 hero 标题 */
  --fs-score-num-sm: 3rem;
  --fs-score-num-sm: clamp(2.6rem, 15vw, 3.6rem);  /* 移动端评分数字 */

  /* ── 间距 · Spacing（4px 基准网格） ───────────────────────── */
  --space-0-5: 2px;      /* 发丝级 */
  --space-1-1: 3px;      /* 极窄 */
  --space-1: 4px;        /* 最小节奏：紧密分组 */
  --space-1-2: 5px;      /* 胶囊按钮纵向内衬 */
  --space-1-5: 6px;      /* 细节奏 */
  --space-2: 8px;        /* 常规小间隔 */
  --space-2-5: 10px;     /* 品牌/导航元素间距 */
  --space-3: 12px;       /* 控件内衬 / 紧凑块间距 */
  --space-3-1: 11px;     /* 移动端按钮内衬 */
  --space-3-2: 13px;     /* 分段开关按钮内衬 */
  --space-3-5: 14px;     /* 胶囊内衬横向 */
  --space-4: 16px;       /* 标准内衬：移动端卡片 padding */
  --space-4-5: 18px;     /* 列表行内分组间距 */
  --space-5: 20px;       /* 区块内标题距 / 行距 */
  --space-5-5: 22px;     /* 徽章横向内衬 */
  --space-6: 24px;       /* 大间隔 */
  --space-7: 28px;       /* 卡片内边距 */
  --space-8: 32px;       /* 大区块间距 */
  --space-9: 36px;       /* 区块纵向节奏 */
  --space-10: 40px;      /* hero 上下留白 / 大间距 */
  --space-12: 48px;      /* 容器侧边距 / 页脚底距 */
  --space-14: 56px;      /* hero 顶部留白 */

  /* 间距语义别名 */
  --space-card-pad: var(--space-7);        /* 卡片内边距 */
  --space-card-pad-sm: var(--space-4);     /* 移动端卡片内边距 */
  --space-section-y: var(--space-9);       /* 区块纵向留白节奏 */
  --space-section-y-sm: var(--space-4);    /* 移动端区块纵向留白 */
  --space-gutter: var(--space-12);         /* 容器左右安全边距（桌面） */
  --space-gutter-sm: var(--space-6);       /* 容器安全边距（移动） */
  --space-gutter-xs: var(--space-4);       /* 容器安全边距（小屏） */

  /* ── 圆角 · Radius ────────────────────────────────────────── */
  --radius-card: 14px;        /* 大卡片圆角 */
  --radius-control: 10px;     /* 按钮 / 控件圆角 */
  --radius-full: 999px;       /* 胶囊 / 徽章全圆角 */
  --radius: var(--radius-card);      /* 历史别名 */
  --radius-sm: var(--radius-control); /* 历史别名 */

  /* ── 阴影 · Shadow ────────────────────────────────────────── */
  --shadow-color-a: rgba(15, 22, 41, 0.06);
  --shadow-color-b: rgba(15, 22, 41, 0.08);
  --shadow-color-c: rgba(15, 22, 41, 0.10);
  --shadow-card: 0 1px 3px var(--shadow-color-a), 0 4px 12px var(--shadow-color-a);
  --shadow-card-lg: 0 4px 16px var(--shadow-color-c), 0 12px 40px var(--shadow-color-b);
  --shadow-accent: 0 2px 12px rgba(77, 107, 254, 0.25);
  --glow-match: 0 0 8px rgba(77, 107, 254, 0.3);
  --shadow: var(--shadow-card);      /* 历史别名 */
  --shadow-lg: var(--shadow-card-lg); /* 历史别名 */

  /* ── 尺寸 · Size ──────────────────────────────────────────── */
  --maxw: 1024px;             /* 容器最大宽度 */
  --container-width: 1024px;  /* 容器最大宽度（语义名） */
  --nav-h: 64px;              /* 导航栏高度（桌面） */
  --nav-h-sm: 56px;           /* 导航栏高度（移动） */
  --logo-h: 30px;             /* 品牌 Logo 高度（桌面） */
  --logo-h-sm: 26px;          /* 品牌 Logo 高度（移动） */
  --w-summary: 400px;         /* 摘要段落最大宽度 */

  /* ── 断点 · Breakpoints ───────────────────────────────────── */
  --bp-tablet: 820px;   /* 平板竖屏 / 小桌面：单列布局 */
  --bp-mobile: 560px;   /* 手机：导航收窄、留白收紧 */
  --bp-xs: 400px;       /* 小屏手机：进一步收紧 */

  /* ── 动效 · Motion ────────────────────────────────────────── */
  --dur-fast: 0.15s;    /* hover / 激活：瞬时反馈 */
  --dur-med: 0.2s;      /* 常规过渡：颜色、边框 */
  --dur-med-2: 0.3s;    /* 状态色过渡 */
  --dur-slow: 0.5s;     /* 进度动画 */
}

/* ================================================================
   02 · 基础元素 Base
   ================================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button {
  font: inherit;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ================================================================
   03 · 布局组件 Layout
   ================================================================ */

/* 容器：居中限宽，左右留出安全边距。
   用 max-width + 左右 padding 实现（不用 min()），
   兼容不支持 min() 的旧内核；box-sizing: border-box 下
   视觉与 min(100% - 边距, 最大宽) 等价 */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--space-gutter);
  padding-right: var(--space-gutter);
}

/* 通用区块：页面里每个独立内容块的外层 */
.section {
  padding: var(--space-section-y) 0;
}

/* 区块头部：标题 + 副描述的组合容器 */
.section-head {
  margin-bottom: var(--space-7);
}

.section-head p {
  color: var(--color-text-muted);
  margin: var(--space-1-5) 0 0;
  max-width: 640px;
}

/* 区块编号：「01」「02」式小标记，置于标题上方 */
.section-num {
  color: var(--color-accent);
  font-weight: 700;
  font-size: var(--fs-sm-2);
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: var(--space-1);
}

.section-head h2 {
  margin: 0;
  font-size: var(--fs-3xl);
  font-weight: 700;
  letter-spacing: -0.03em;
}

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

.footer {
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-4);
}

.footer__inner {
  padding: var(--space-7) 0 var(--space-12);
}

.footer p {
  margin: 0;
  color: var(--color-text-dim);
  font-size: var(--fs-sm-3);
}

/* 页脚社群链接：muted 灰小字，hover 转主色（与导航链接同风格） */
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-3);
}

.footer__links a {
  color: var(--color-text-muted);
  font-size: var(--fs-sm-3);
  font-weight: 500;
  transition: color var(--dur-fast);
}

.footer__links a:hover {
  color: var(--color-accent);
}

/* ── 间距工具类 ──────────────────────────────────────────────── */
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-4 { margin-bottom: var(--space-4); }

/* ================================================================
   04 · 导航组件 Navigation
   顶部粘性导航栏，毛玻璃质感（半透明白 + blur）。
   ================================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-nav-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-border);
  height: var(--nav-h);
}

.nav__inner {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 品牌区：Logo + 文字并排，间距 10px */
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
}

/* 圆形图标：固定 30px 方形裁成圆形，大图素材自动缩放到此尺寸；
   图标缺失时用主色浅底兜底 */
.brand__logo {
  width: var(--logo-h);
  height: var(--logo-h);
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-accent-light);
}

.brand__text {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: -0.01em;
}

.brand__text strong {
  color: var(--color-accent);
  font-weight: 700;
}

.nav__links {
  display: flex;
  gap: var(--space-5);
  margin-left: auto;
  margin-right: var(--space-5);
}

.nav__links a {
  color: var(--color-text-muted);
  font-size: var(--fs-md-2);
  font-weight: 500;
  padding: var(--space-1-5) 0;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}

.nav__links a:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* ================================================================
   05 · 按钮组件 Buttons
   ================================================================ */

/* 主按钮：主色实心，用于最高优先级操作 */
.btn-primary {
  background: var(--color-accent);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-control);
  padding: var(--space-3) var(--space-7);
  font-weight: 600;
  font-size: var(--fs-lg);
  transition: background var(--dur-fast), transform 0.1s;
}

.btn-primary:hover {
  background: var(--color-accent-hover);
}

.btn-primary:active {
  transform: scale(0.98);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* 次按钮：白底描边，用于次要/并列操作 */
.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  padding: var(--space-3) var(--space-5);
  font-weight: 500;
  font-size: var(--fs-lg);
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}

.btn-secondary:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ================================================================
   06 · 通用卡片配方
   白底 + 14px 圆角 + 双层轻阴影 + 28px 内衬（design-system.css
   卡片配方原样应用，新卡片一律套此配方）。
   ================================================================ */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-card-pad);
  margin: 0 0 var(--space-section-y);
}

/* 骨架占位说明文字 */
.card__placeholder {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-md-3);
}

/* ── 整合包下载行（新增组件） ──────────────────────────────── */
/* 每行 = 内容（名称+版本徽章+描述） + 元信息（大小/日期） + 下载按钮；
   行间细分隔线（仿 scan-row / address-row） */

.pack-row {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}

.pack-row:last-child {
  border-bottom: none;
}

.pack-row__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}

.pack-row__top {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  flex-wrap: wrap;
}

/* 整合包名称：1rem、600 权重，是行内最强文字 */
.pack-row__name {
  font-size: var(--fs-base);
  font-weight: 600;
}

/* 版本徽章：细描边 + 弱化灰字小胶囊 */
.pack-row__weight {
  font-size: var(--fs-xs-1);
  color: var(--color-text-dim);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 1px var(--space-2);
  font-weight: 500;
}

.pack-row__desc {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-md);
  max-width: 66ch;
}

/* 元信息：等宽字体小字，右对齐纵向堆叠 */
.pack-row__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
}

.pack-row__meta span {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  color: var(--color-text-dim);
  white-space: nowrap;
}

/* 下载按钮：主按钮缩小版（a 标签需要行内弹性居中） */
.btn-primary--sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4-5);
  font-size: var(--fs-sm-2);
}

/* ================================================================
   07 · 首屏 Hero 与地址列表
   ================================================================ */

/* Hero 区块：左文右视觉，栅格右列 auto 宽度贴合视觉元素 */
.hero {
  padding: var(--space-14) 0 var(--space-10);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-10);
  align-items: end;
}

/* 眉题：主色小号全大写宽字距，置于标题上方 */
.hero__kicker {
  color: var(--color-accent);
  font-size: var(--fs-xs-2);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 var(--space-4);
}

/* 左列内容包裹：min-width 防止长内容撑破栅格 */
.hero__content {
  min-width: 0;
}

/* 主标题：流体字号、800 权重、负字距、深藏蓝 */
.hero__title {
  font-size: var(--fs-hero-title);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin: 0;
  color: var(--color-accent-strong);
}

/* 副描述：muted 灰、1.05rem、行高 1.6 */
.hero__desc {
  margin: var(--space-5) 0 0;
  color: var(--color-text-muted);
  font-size: var(--fs-lg-3);
  line-height: 1.6;
}

/* ── 服务器地址列表（新增组件） ──────────────────────────────── */
/* 每行 = 标签 + 等宽网址 + 复制按钮；行间细分隔线（仿 scan-row） */

.address-list {
  margin-top: var(--space-6);
  max-width: 520px;
}

.address-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.address-row:first-child {
  padding-top: 0;
}

.address-row:last-child {
  border-bottom: none;
}

/* 标签：小号灰色说明（仿 scorecard__label 风格） */
.address-row__label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
}

/* 网址：等宽字体，长串不换行破坏栅格 */
.address-row__addr {
  font-family: var(--mono);
  font-size: var(--fs-md-3);
  color: var(--color-text);
  word-break: break-all;
}

/* 复制按钮：次级按钮缩小版，打勾 SVG 绝对定位覆盖文字 */
.address-row__copy {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  padding: var(--space-2) var(--space-4-5);
  font-size: var(--fs-sm-2);
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}

.address-row__copy:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* 按钮文字：成功时淡出，让绿勾顶替显示 */
.copy-label {
  transition: opacity var(--dur-fast);
}

/* 打勾图标：绝对定位居中叠在文字上，默认完全隐藏（不占位） */
.copy-check {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  opacity: 0;
  transition: opacity var(--dur-fast), stroke-dashoffset var(--dur-med-2);
}

/* 复制成功态：按钮整体转绿，文字淡出，绿勾描边「画出」覆盖在文字位置 */
.address-row__copy.is-copied {
  background: var(--color-success-light);
  border-color: var(--color-success);
  color: var(--color-success);
}

.address-row__copy.is-copied .copy-label {
  opacity: 0;
}

.address-row__copy.is-copied .copy-check {
  opacity: 1;
  stroke-dashoffset: 0;
}

/* ── Hero 标签区 ─────────────────────────────────────────────── */

.hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

/* 胶囊标签：主色浅底 + 主色字 */
.hero__tags span {
  background: var(--color-accent-light);
  color: var(--color-accent);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3-5);
  font-size: var(--fs-sm-2);
  font-weight: 600;
}

/* ── 视觉列与展示图占位 ─────────────────────────────────────── */

.hero__visual {
  display: flex;
  align-items: end;
  /* 关键：栅格子项默认 min-width: auto，会被内部内容的最小宽度撑开；
     设为 0 后列宽只由栅格决定，窄屏下不会横向溢出 */
  min-width: 0;
}

/* 展示图容器：固定宽度 420px（hero 栅格右列随之固定）。
   超出视口时按容器收缩（max-width），不使用 min()，
   避免在 auto 栅格列中宽度解析失败被图片撑开 */
.gallery {
  width: 420px;
  max-width: 100%;
}

.gallery__item {
  background: var(--color-bg);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-card);
  overflow: hidden;
}

/* 展示图：宽度填满容器，高度按原图比例自动伸缩；
   max-width 双保险，图片任何尺寸都不会撑破布局 */
.gallery__item img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* ================================================================
   08 · 响应式 Responsive
   三档断点：平板 820 / 移动 560 / 小屏 400。
   ================================================================ */

/* ── 平板竖屏 / 小桌面（≤820px）────────────────────────────── */
@media (max-width: 820px) {
  /* Hero 转单列：视觉元素移到标题下方 */
  .hero {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .hero__visual {
    align-items: start;
  }

  /* 展示图在单列下放宽：宽度跟随列宽（上限 520px），
     不用固定宽度，避免窄屏栅格被内容撑爆 */
  .gallery {
    width: 100%;
    max-width: 520px;
  }
}

/* ── 移动竖屏（≤560px）─────────────────────────────────────── */
@media (max-width: 560px) {
  /* 导航高度收窄到 56px */
  :root {
    --nav-h: var(--nav-h-sm);
  }

  /* 容器安全边距收紧到 24px */
  .wrap {
    padding-left: var(--space-gutter-sm);
    padding-right: var(--space-gutter-sm);
  }

  /* 品牌文字隐藏：小屏只留 Logo */
  .brand__text {
    display: none;
  }

  /* 圆形图标在移动端同步缩小到 26px */
  .brand__logo {
    width: var(--logo-h-sm);
    height: var(--logo-h-sm);
  }

  .nav__links a {
    font-size: var(--fs-sm-2);
    padding: var(--space-1) 0;
  }

  /* Hero 顶部留白大幅收紧 */
  .hero {
    padding: var(--space-5) 0 var(--space-4);
    gap: var(--space-3);
  }

  .hero__kicker {
    font-size: var(--fs-2xs);
    margin-bottom: var(--space-2-5);
  }

  .hero__title {
    font-size: var(--fs-hero-title-sm);
  }

  .hero__desc {
    font-size: var(--fs-md-3);
    margin-top: var(--space-3);
  }

  .hero__tags {
    margin-top: var(--space-3-5);
    gap: var(--space-1-5);
  }

  .hero__tags span {
    font-size: var(--fs-xs);
    padding: var(--space-1) var(--space-2-5);
  }

  /* 地址列表收紧 */
  .address-list {
    margin-top: var(--space-3-5);
  }

  .address-row {
    gap: var(--space-2-5);
    padding: var(--space-2-5) 0;
  }

  .address-row__label {
    font-size: var(--fs-xs-2);
  }

  .address-row__addr {
    font-size: var(--fs-sm);
  }

  .address-row__copy {
    padding: var(--space-1-5) var(--space-3);
    font-size: var(--fs-xs);
  }

  /* 按钮统一内衬，保证触控目标 */
  .btn-primary,
  .btn-secondary {
    padding: var(--space-3-1) var(--space-4-5);
    font-size: var(--fs-md-2);
  }

  /* 卡片统一收紧：padding 16px、下距 16px */
  .card {
    padding: var(--space-card-pad-sm);
    margin: 0 0 var(--space-4);
  }

  /* 下载行转纵向堆叠：内容、元信息、按钮逐层排列 */
  .pack-row {
    flex-wrap: wrap;
    gap: var(--space-2-5);
    padding: var(--space-3) 0;
  }

  .pack-row__meta {
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
  }

  .pack-row__name {
    font-size: var(--fs-md-2);
  }

  .pack-row__desc {
    font-size: var(--fs-sm);
  }

  /* 区块纵向节奏收紧 */
  .section {
    padding: var(--space-section-y-sm) 0;
  }

  .section-head {
    margin-bottom: var(--space-4);
  }

  .section-head h2 {
    font-size: var(--fs-2xl);
  }

  .section-head p {
    font-size: var(--fs-md);
  }

  /* 页脚收紧 */
  .footer__inner {
    padding: var(--space-5) 0 var(--space-8);
  }

  .footer p {
    font-size: var(--fs-xs-2);
  }

  .footer__links a {
    font-size: var(--fs-xs-2);
  }
}

/* ── 小屏手机（≤400px）─────────────────────────────────────── */
@media (max-width: 400px) {
  /* 容器安全边距进一步收紧到 16px */
  .wrap {
    padding-left: var(--space-gutter-xs);
    padding-right: var(--space-gutter-xs);
  }

  .nav__links {
    gap: var(--space-2);
  }

  .nav__links a {
    font-size: var(--fs-xs);
  }

  /* 标题固定 1.6rem，避免流体字号在极窄屏下过大 */
  .hero__title {
    font-size: 1.6rem;
  }

  /* 所有卡片内衬收紧到 12px */
  .card {
    padding: var(--space-3);
  }
}