/* ==========================================================================
   YUNA 浴纳 · 设计令牌（唯一真源）  design-spec.md v2.0 定稿
   --------------------------------------------------------------------------
   依据：《YUNA-VIS 品牌视觉识别系统》
       A-04 品牌标准色彩 / A-07 标志安全距离与最小应用尺寸
       A-09 中文字体 / A-12·A-13 品牌辅助图形
   色彩铁律：全站仅黑 / 灰 / 白及其明度派生阶，禁止任何彩色。
   本文件是全站唯一样式真源；改这里即改全站。
   ========================================================================== */

/* ==========================================================================
   0. 全局盒模型 reset（必须放在 :root 之前）
   --------------------------------------------------------------------------
   为什么必须：CSS 默认 content-box，.container 的 width:100% 与
   padding-inline:16px 会分别计算，375px 视口下实际渲染宽度 = 375+32 = 407px，
   造成移动端全站横向溢出（可横向拖动出现右侧空白）。
   border-box 让 width 包含 padding，全站尺寸口径与设计稿一致。
   注意：此处覆盖全站盒模型，任何新组件都不得再依赖 content-box 行为。
   ========================================================================== */
*,*::before,*::after{
  box-sizing:border-box;
}

:root {

  /* ==========================================================================
     1. 品牌三色（VIS A-04，不得变更）
     ========================================================================== */
  --c-black:#000000;        /* 浴纳黑 RGB 0/0/0 */
  --c-grey:#B1B1B1;         /* 浴纳灰 RGB 181/181/182 · VIS 印刷 hex */
  --c-white:#FFFFFF;        /* 浴纳白 RGB 255/255/255 */

  /* ==========================================================================
     2. 灰阶派生 11 阶（VIS A-04「品牌辅助色」色条实测值）
     数字越大越深。这 11 阶是全站允许的唯一派生范围。
     ========================================================================== */
  --c-g1000:#000000;        /* step01 浴纳黑 */
  --c-g900:#3D3939;         /* step02 */
  --c-g800:#585656;         /* step03 白底次级正文 7.29:1 */
  --c-g700:#717070;         /* step04 白底辅助文字 / 占位符 4.94:1 */
  --c-g600:#858585;         /* step05 仅禁用态 */
  --c-g500:#9B9C9C;         /* step06 占位块，不承载文字 */
  --c-g400:#B0B0B1;         /* step07 纯装饰边框 */
  --c-g300:#C5C5C5;         /* step08 卡片描边 */
  --c-g200:#D7D9D9;         /* step09 表格斑马纹 */
  --c-g100:#EBEBEB;         /* step10 交替区块底 / 表头底 */
  --c-g050:#F3F3F3;         /* step11 页面级浅底 */

  /* ==========================================================================
     3. 语义层
     ========================================================================== */
  --c-bg-page:#FFFFFF;
  --c-bg-section:#F3F3F3;
  --c-bg-card:#FFFFFF;
  --c-bg-inverse:#000000;

  --c-text-primary:#000000;
  --c-text-secondary:#585656;      /* 浅底上必须用这个（7.29:1 白 / 6.57:1 浅） */
  --c-text-tertiary:#717070;       /* ⚠ 仅限纯白底；在 #F3F3F3 上只有 4.45:1 FAIL */
  --c-text-disabled:#858585;       /* ⚠ 仅限 disabled，禁用控件豁免 */
  --c-text-inverse:#FFFFFF;
  --c-text-inverse-2:#C5C5C5;      /* 深底次级 12.17:1 */
  --c-text-placeholder:#717070;    /* 占位符是真实文字，必须 4.5:1 */

  --c-border:#C5C5C5;
  --c-border-strong:#585656;       /* 输入框等承担信息的边框，7.29:1 */
  --c-divider:#EBEBEB;
  --c-focus:#000000;               /* 焦点环，禁止蓝色 */

  /* logo 墙专用（VIS 禁止彩色 logo，统一灰阶单色） */
  --c-logo-wall:#717070;
  --c-logo-wall-hover:#000000;

  /* ==========================================================================
     4. 状态语义（灰阶：靠边框粗细 + 图标形状 + 文案，不靠色相）
     ========================================================================== */
  --st-success-bg:#F3F3F3;
  --st-warn-bg:#EBEBEB;
  --st-error-bg:#F3F3F3;
  --st-info-bg:#F3F3F3;
  --st-border:#000000;
  --st-icon-size:20px;

  /* ==========================================================================
     5. 字体（VIS A-09 方正兰亭黑 PRC W2 → Noto Sans SC）
     ========================================================================== */
  --font-cn:"Noto Sans SC","Source Han Sans SC",-apple-system,"PingFang SC",
            "Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",sans-serif;
  --font-en:"Inter","Helvetica Neue",Arial,sans-serif;
  --font-model:var(--font-en);

  /* 字重映射：VIS 仅提供 W2（≈400）。向上借重，不向下借 */
  --fw-regular:400;    /* ≈ 方正兰亭黑 W2 */
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;       /* 仅 Hero H1 与数据锚点 */

  /* ---- 桌面字号阶梯 ---- */
  --fs-display:70px;   --lh-display:1.14;   --ls-display:-0.02em;  /* Hero 主标题 */
  --fs-h1:52px;        --lh-h1:1.19;       --ls-h1:-0.02em;       /* 内页 H1 */
  --fs-h2:38px;        --lh-h2:1.21;       --ls-h2:-0.015em;      /* 区块标题 */
  --fs-h3:27px;        --lh-h3:1.30;       --ls-h3:-0.01em;       /* 子区块 / 系统卡标题 */
  --fs-h4:19px;        --lh-h4:1.42;       --ls-h4:0;             /* 卡片标题 */
  --fs-h5:16px;        --lh-h5:1.50;       --ls-h5:0;
  --fs-h6:14px;        --lh-h6:1.50;       --ls-h6:0.02em;
  --fs-lead:18px;      --lh-lead:1.72;     --ls-lead:0;
  --fs-body:16px;      --lh-body:1.75;     --ls-body:0;
  --fs-small:14px;     --lh-small:1.71;    --ls-small:0;
  --fs-caption:13px;   --lh-caption:1.62;  --ls-caption:0.01em;
  --fs-micro:12px;     --lh-micro:1.50;    --ls-micro:0.04em;
  --fs-model:15px;     --lh-model:1.40;    --ls-model:0.06em;
  --fs-data:48px;      --lh-data:1.08;     --ls-data:-0.02em;     /* 数据锚点数字 */
  --fs-hero-sub:20px;  --lh-hero-sub:1.70; --ls-hero-sub:0;       /* Hero 副标题 */

  /* ==========================================================================
     6. 间距（8px 基准，含 4px 半步；禁止刻度外数值）
     ========================================================================== */
  --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;

  --section-y-mobile:48px;
  --section-y-tablet:64px;
  --section-y-desktop:96px;
  --section-y-accent-desktop:128px;
  --hero-y-desktop:96px;
  --hero-y-mobile:48px;

  /* ==========================================================================
     7. 容器与栅格
     ========================================================================== */
  --container:1280px;
  --measure:720px;
  --grid-cols:12;
  --gutter:24px;
  --gutter-mobile:16px;
  --pad-x:32px;
  --pad-x-mobile:16px;

  /* ==========================================================================
     8. 圆角：VIS 无圆角语言，取 0 / 2px 极小值
     ========================================================================== */
  --radius-sm:2px;      /* 标签、输入框、logo 墙单元格 */
  --radius-md:0px;      /* 卡片、按钮、图块：硬边工业感 */
  --radius-full:999px;  /* 仅颜色圆点 */

  /* ==========================================================================
     9. 阴影：灰阶、低强度，仅浮层使用
     ========================================================================== */
  --shadow-none:none;
  --shadow-sm:0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 2px 8px rgba(0,0,0,.08);
  --shadow-lg:0 8px 28px rgba(0,0,0,.14);

  /* ==========================================================================
     10. 边框
     ========================================================================== */
  --bw-hairline:1px;
  --bw-thick:2px;

  /* ==========================================================================
     11. LOGO 尺寸（VIS A-07：限制区域宽高 ≥ 0.25X，X = LOGO 高度）
     前端只设 height，width:auto 让 SVG 自身比例生效，禁止写死宽度。
     ========================================================================== */
  --logo-nav-h:44px;
  --logo-nav-h-mobile:36px;
  --logo-footer-h:56px;
  --logo-favicon:32px;
  --logo-clear-nav:11px;        /* 44 × 0.25 */
  --logo-clear-nav-mobile:9px;   /* 36 × 0.25 */
  --logo-clear-footer:14px;     /* 56 × 0.25 */

  /* ==========================================================================
     12. 辅助图形（VIS A-12/A-13，仅背景装饰）
     ========================================================================== */
  --geo-stroke:1px;
  --geo-color:#B1B1B1;
  --geo-opacity:0.10;        /* 浅底上限；深底用 --geo-opacity-inverse */
  --geo-opacity-inverse:0.08;
  --geo-cell:96px;
  --geo-gap:8px;

  /* ==========================================================================
     13. 图片：真实资产比例（asset-manifest.md 实测）
     产品图比例跨度0.562–1.975，必须 contain 不得裁切
     ========================================================================== */
  --product-ratio:4/3;
  --product-fit:contain;
  --product-bg:#F3F3F3;
  --banner-ratio:16/9;       /* hero / system / brand 系列横幅，实测均 1.777-1.779 */
  --banner-fit:cover;
  --logo-wall-h:28px;        /* logo 统一高度 */
  --logo-wall-gap:24px;

  /* ==========================================================================
     14. 层级 z-index
     ========================================================================== */
  --z-base:0;
  --z-geo:0;             /* 纹样层：与内容同层基准，靠 DOM 顺序压在下 */
  --z-content:1;         /* 文字层 */
  --z-raised:10;
  --z-sticky:100;        /* 吸底条 */
  --z-header:200;
  --z-drawer:300;
  --z-modal:400;
  --z-toast:500;
  --z-skip:600;

  /* ==========================================================================
     15. 动效：克制、专业，无弹跳
     ========================================================================== */
  --dur-1:120ms;
  --dur-2:200ms;
  --dur-3:320ms;
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(0,0,.2,1);
  --ease-in:cubic-bezier(.4,0,1,1);
  --transition-color:var(--dur-1) var(--ease);
  --transition-opacity:var(--dur-2) var(--ease);
  --transition-transform:var(--dur-2) var(--ease-out);

  /* ==========================================================================
     16. 断点（与 site-spec F10 的 375/768/1440 对齐）
     ========================================================================== */
  --bp-mobile-max:639px;
  --bp-tablet-min:640px;    --bp-tablet-max:1023px;
  --bp-desktop-min:1024px;
  --bp-wide-min:1280px;

  /* ==========================================================================
     17. 可点击区域最小尺寸（WCAG 2.2 AA 2.5.8）
     ========================================================================== */
  --tap-min:44px;
}

/* ==========================================================================
   移动端字号下调（仅大字号；正文及以下不缩放）
   ========================================================================== */
@media (max-width:639px){
  :root{
    --fs-display:40px; --lh-display:1.20;
    --fs-h1:34px;      --lh-h1:1.24;
    --fs-h2:28px;      --lh-h2:1.29;
    --fs-h3:20px;      --lh-h3:1.40;
    --fs-h4:17px;      --lh-h4:1.47;
    --fs-h5:15px;      --lh-h5:1.53;
    --fs-lead:17px;    --lh-lead:1.71;
    --fs-caption:12px; --lh-caption:1.67;
    --fs-micro:11px;   --lh-micro:1.55;
    --fs-model:15px;   --lh-model:1.40;
    --fs-data:28px;    --lh-data:1.18;
    --fs-hero-sub:16px;--lh-hero-sub:1.75;

    --section-y-mobile:48px;
    --gutter:var(--gutter-mobile);
    --pad-x:var(--pad-x-mobile);
    --logo-nav-h:var(--logo-nav-h-mobile);
    --logo-clear-nav:var(--logo-clear-nav-mobile);
    --logo-wall-h:22px;
    --logo-wall-gap:12px;
  }
}

/* ==========================================================================
   无障碍：尊重系统减少动效偏好
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ==========================================================================
   焦点态：统一 2px 黑环 + 2px 偏移，任何可交互元素不可移除
   ========================================================================== */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:var(--bw-thick) solid var(--c-focus);
  outline-offset:2px;
}
.on-inverse :where(a,button,[tabindex]):focus-visible{
  outline-color:var(--c-white);
}

/* ==========================================================================
   跳转链接（键盘用户第一个可聚焦元素）
   ========================================================================== */
.skip-link{
  position:absolute; left:var(--sp-4); top:var(--sp-4);
  z-index:var(--z-skip);
  padding:var(--sp-3) var(--sp-5);
  background:var(--c-black); color:var(--c-white);
  font:var(--fw-medium) var(--fs-small)/1.4 var(--font-cn);
  transform:translateY(-200%);
  transition:transform var(--transition-transform);
}
.skip-link:focus{ transform:translateY(0); }

/* ==========================================================================
   排版基线
   ========================================================================== */
body{
  margin:0;
  background:var(--c-bg-page);
  color:var(--c-text-primary);
  font:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-cn);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6{ margin:0; font-weight:var(--fw-semibold); }
p{ margin:0; }
img{ display:block; max-width:100%; height:auto; }
ul,ol{ margin:0; padding:0; }

/* 型号 / 数字：等宽数字，小数点纵向对齐 */
.model,.tabular{
  font-family:var(--font-model);
  font-feature-settings:"tnum"1;
  font-variant-numeric:tabular-nums;
  letter-spacing:var(--ls-model);
}

/* 容器与栅格 */
.container{ width:100%; max-width:var(--container); margin-inline:auto;
  padding-inline:var(--pad-x); }
.grid{ display:grid; grid-template-columns:repeat(var(--grid-cols),1fr);
  gap:var(--gutter); }

/* 区块纵向节奏 */
.section{ padding-block:var(--section-y-desktop); }
.section--tight{ padding-block:var(--section-y-tablet); }
.section--accent{ padding-block:var(--section-y-accent-desktop); }
.section--alt{ background:var(--c-bg-section); }

@media (max-width:1023px){
  .section{ padding-block:var(--section-y-tablet); }
  .section--accent{ padding-block:var(--section-y-desktop); }
}
@media (max-width:639px){
  .section{ padding-block:var(--section-y-mobile); }
  .section--accent{ padding-block:var(--section-y-mobile); }
}

/* ==========================================================================
   Hero：方案 A 定稿 —— 纯排版 + 几何线框纹样（白底，不用实拍图）
   纹样层 z-index:0 且 pointer-events:none；文字层 z-index:1
   ========================================================================== */
.hero{
  position:relative;
  overflow:hidden;
  background:var(--c-bg-page);
  padding-block:var(--hero-y-desktop);
}
/* 纹样层：绝对定位铺满，永远在内容之下，不拦截任何点击 */
.hero__geo{
  position:absolute; inset:0;
  z-index:var(--z-geo);
  pointer-events:none;
  opacity:var(--geo-opacity);
  background-repeat:repeat;
}
/* 文字层 */
.hero__inner{ position:relative; z-index:var(--z-content); }
.hero__title{
  font:var(--fw-bold) var(--fs-display)/var(--lh-display) var(--font-cn);
  letter-spacing:var(--ls-display);
  color:var(--c-text-primary);
  max-width:16em;
}
.hero__sub{
  margin-top:var(--sp-5);
  font:var(--fw-regular) var(--fs-hero-sub)/var(--lh-hero-sub) var(--font-cn);
  color:var(--c-text-secondary);
  max-width:var(--measure);
}
.hero__actions{ margin-top:var(--sp-6); display:flex;
  flex-wrap:wrap; gap:var(--sp-4); }
.hero__trust{
  margin-top:var(--sp-5);
  font:var(--fw-regular) var(--fs-caption)/var(--lh-caption) var(--font-cn);
  color:var(--c-text-tertiary);
}
@media (max-width:639px){
  .hero{ padding-block:var(--hero-y-mobile); }
  .hero__title{ max-width:none; }
  .hero__sub{ max-width:none; }
}

/* ==========================================================================
   横幅（内页用图，非首屏）
   实测 hero / system / brand 系列横幅比例 1.777–1.779，统一 16/9
   ========================================================================== */
.banner{
  position:relative; overflow:hidden;
  aspect-ratio:var(--banner-ratio);
  background:var(--c-bg-section);
}
.banner img{ width:100%; height:100%; object-fit:var(--banner-fit); }
/* 横幅上的文字层：深色蒙版 + 反白 */
.banner__overlay{
  position:absolute; inset:0; z-index:var(--z-content);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--sp-7) var(--sp-6);
  background:linear-gradient(to top,rgba(0,0,0,.62) 0%,rgba(0,0,0,.18) 55%,rgba(0,0,0,0) 100%);
}
.banner__title{ color:var(--c-text-inverse);
  font:var(--fw-bold) var(--fs-h2)/var(--lh-h2) var(--font-cn);
  letter-spacing:var(--ls-h2); }
.banner__sub{ margin-top:var(--sp-2); color:var(--c-text-inverse-2);
  font:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-cn); }

/* ==========================================================================
   logo 墙（VIS 禁彩色 → 统一灰阶单色）
   实测 partners/ 目录当前为空，必须有文字降级
   ========================================================================== */
.logo-wall{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:var(--logo-wall-gap);
  align-items:center;
}
.logo-wall__item{
  display:flex; align-items:center; justify-content:center;
  min-height:56px;
  padding:var(--sp-2);
  background:var(--c-bg-card);
  border:var(--bw-hairline) solid var(--c-divider);
  border-radius:var(--radius-sm);
  overflow:hidden;
}
.logo-wall__item img{
  max-height:var(--logo-wall-h); width:auto;
  filter:grayscale(1);
  opacity:.85;
  transition:opacity var(--transition-opacity);
}
.logo-wall__item:hover img{ opacity:1; }
/* 文字降级：无 logo 文件时显示品牌名，不留空位、不显示破碎图标 */
.logo-wall__text{
  font:var(--fw-medium) var(--fs-small)/1.2 var(--font-en);
  color:var(--c-logo-wall);
  white-space:nowrap;
  transition:color var(--transition-opacity);
}
.logo-wall__item:hover .logo-wall__text{ color:var(--c-logo-wall-hover); }
@media (max-width:1023px){ .logo-wall{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:639px){ .logo-wall{ grid-template-columns:repeat(2,1fr); } }