@charset "UTF-8";
/* ============================================================
   HAOYU INDUSTRIAL — Design System v3
   Material 3 色彩体系 · Apple 8pt 网格 · Pinterest 留白美学
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Manrope:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* ---------- Material You 色彩体系 ---------- */
  --primary:#1A1A2E;
  --on-primary:#FFFFFF;
  --primary-container:#E7E7F2;
  --on-primary-container:#1A1A2E;

  --secondary:#16213E;
  --on-secondary:#EDEAF2;
  --secondary-container:#E2E6F0;
  --on-secondary-container:#16213E;

  --tertiary:#FF4B2B;          /* 品牌橙 */
  --on-tertiary:#FFFFFF;
  --tertiary-container:#FFE7E0;
  --on-tertiary-container:#8A1F06;
  --tertiary-soft:#FFA07A;

  --surface:#F8F9FA;           /* 页面底 */
  --surface-1:#FFFFFF;         /* 承载面 */
  --surface-2:#F1F2F5;
  --surface-3:#E8EAEE;
  --surface-inverse:#16213E;

  --on-surface:#1A1A2E;
  --on-surface-variant:#5C6170;
  --on-surface-muted:#6F7480;   /* 小字号辅助文字，白底对比 ≈4.5:1 */

  --outline:#C8CBD3;
  --outline-variant:#E4E6EB;

  --error:#E94560;
  --error-container:#FFE3E8;

  /* ---------- 8pt 间距系统（Apple HIG） ---------- */
  --space-1:4px;   --space-2:8px;   --space-3:12px;  --space-4:16px;
  --space-5:20px;  --space-6:24px;  --space-8:32px;  --space-10:40px;
  --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px;

  /* ---------- 圆角体系 ---------- */
  --radius-xs:6px; --radius-sm:8px; --radius-md:10px; --radius-lg:14px;
  --radius-xl:20px; --radius-full:999px;

  /* ---------- 分层阴影（Material 3 elevation） ---------- */
  --elevation-1:0 1px 2px rgba(26,26,46,.06), 0 1px 3px rgba(26,26,46,.05);
  --elevation-2:0 1px 2px rgba(26,26,46,.06), 0 4px 16px rgba(26,26,46,.08);
  --elevation-3:0 2px 4px rgba(26,26,46,.06), 0 12px 32px rgba(26,26,46,.10);

  /* ---------- 动效 ---------- */
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-standard:cubic-bezier(.2,0,0,1);
  --ease-emphasized:cubic-bezier(.2,0,0,1);
  --ease-decelerate:cubic-bezier(0,0,.2,1);
  --ease-accelerate:cubic-bezier(.3,0,1,1);
  --duration-short4:200ms;
  --duration-medium2:300ms;
  --duration-long1:350ms;
  --duration-extra-long:600ms;

  /* ---------- 字体 ---------- */
  --font-display:"Outfit","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --font-body:"Manrope","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;

  /* ---------- 排版层级（Material 3 Type Scale） ---------- */
  --type-display-large:clamp(40px,5vw,57px);
  --type-display-medium:clamp(32px,4vw,45px);
  --type-headline-large:clamp(24px,3vw,32px);
  --type-headline-medium:clamp(20px,2.5vw,28px);
  --type-title-large:22px;
  --type-title-medium:16px;
  --type-body-large:16px;
  --type-body-medium:14px;
  --type-label-large:14px;
  --type-label-small:11px;

  --wrap:1280px;
  --gut:clamp(20px,4vw,56px);
  --topbar-h:72px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;background:var(--surface);color:var(--on-surface);
  font-family:var(--font-body);font-size:var(--type-body-large);line-height:1.6;
  font-weight:400;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;border:0;}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font:inherit;color:inherit;}
h1,h2,h3,h4,p,ul,ol,figure{margin:0;}
ul,ol{padding:0;list-style:none;}

/* 焦点环：无障碍必备 */
:focus-visible{
  outline:2px solid var(--tertiary);outline-offset:3px;border-radius:var(--radius-xs);
}
:focus:not(:focus-visible){outline:none;}

/* 纸面质感 */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");
}

/* ---------- 布局 ---------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut);}
.section{position:relative;padding-block:var(--space-24);}
.section--tight{padding-block:var(--space-16);}

/* ---------- 排版元件 ---------- */
.eyebrow{
  font-family:var(--font-mono);font-size:var(--type-label-small);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tertiary);
  display:flex;align-items:center;gap:var(--space-3);
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--tertiary);flex:none;}
.eyebrow--mute{color:var(--on-surface-muted);}
.eyebrow--mute::before{background:var(--outline);}

.display{
  font-family:var(--font-display);font-weight:700;
  line-height:1.06;letter-spacing:-.028em;text-transform:uppercase;
}
.d1{font-size:var(--type-display-large);}
.d2{font-size:var(--type-display-medium);}
.d3{font-size:var(--type-headline-large);}
.outline{
  color:transparent;-webkit-text-stroke:1.4px var(--on-surface-muted);
  paint-order:stroke fill;
}
.accent{color:var(--tertiary);}
.lede{
  font-size:var(--type-body-large);color:var(--on-surface-variant);
  line-height:1.75;max-width:60ch;
}
.mono{font-family:var(--font-mono);}
.num{font-family:var(--font-mono);font-size:var(--type-label-small);color:var(--on-surface-muted);}

/* 章节头 */
.sec-head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.75fr);
  gap:var(--space-12);align-items:end;
  padding-bottom:var(--space-8);border-bottom:1px solid var(--outline-variant);
  margin-bottom:var(--space-16);
}
.sec-head h2{margin-top:var(--space-5);}
.sec-head p{padding-bottom:2px;}

/* ---------- 顶栏 ---------- */
.topbar{
  position:fixed;inset:0 0 auto 0;z-index:100;
  background:rgba(248,249,250,.86);backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid transparent;transition:background var(--duration-medium2) var(--ease-standard),
    border-color var(--duration-medium2) var(--ease-standard);
}
.topbar.stuck{background:rgba(248,249,250,.96);border-bottom-color:var(--outline-variant);}
.topbar__in{display:flex;align-items:center;gap:var(--space-10);height:var(--topbar-h);
  transition:height var(--duration-medium2) var(--ease-standard);}
.topbar.stuck .topbar__in{height:62px;}

.logo{display:flex;align-items:center;gap:10px;flex:none;}
.logo__mark{
  width:30px;height:30px;flex:none;background:var(--tertiary);position:relative;
  clip-path:polygon(0 0,100% 0,100% 70%,70% 100%,0 100%);
}
.logo__mark::after{content:"";position:absolute;inset:8px 8px 12px 8px;background:var(--surface-1);}
.logo__txt{display:flex;flex-direction:column;line-height:1;}
.logo__en{
  font-family:var(--font-display);font-weight:700;font-size:19px;
  letter-spacing:-.01em;text-transform:uppercase;color:var(--on-surface);
}
.logo__cn{font-size:10px;color:var(--on-surface-muted);letter-spacing:.3em;margin-top:4px;}

.nav{display:flex;align-items:center;gap:var(--space-8);margin-left:auto;}
.nav a{
  font-size:var(--type-body-medium);font-weight:500;color:var(--on-surface-variant);
  position:relative;padding:8px 0;transition:color var(--duration-short4) var(--ease-standard);
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:4px;width:100%;height:1.5px;background:var(--tertiary);
  transform:scaleX(0);transform-origin:right;border-radius:1px;
  transition:transform var(--duration-medium2) var(--ease-emphasized);
}
.nav a:hover{color:var(--on-surface);}
.nav a:hover::after{transform:scaleX(1);transform-origin:left;}
.nav a.on{color:var(--on-surface);font-weight:600;}
.nav a.on::after{transform:scaleX(1);}

/* 按钮系统：Filled > Filled Tonal > Outlined > Text */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:44px;padding:0 24px;border-radius:var(--radius-md);
  font-family:var(--font-body);font-size:var(--type-body-large);font-weight:600;
  letter-spacing:-.01em;border:1.5px solid transparent;cursor:pointer;
  transition:background var(--duration-short4) var(--ease-standard),
             color var(--duration-short4) var(--ease-standard),
             border-color var(--duration-short4) var(--ease-standard),
             transform var(--duration-short4) var(--ease-standard),
             filter var(--duration-short4) var(--ease-standard);
  white-space:nowrap;
}
.btn:active{transform:scale(.97);}
.btn--primary{background:var(--primary);color:var(--on-primary);}
.btn--primary:hover{filter:brightness(1.35);transform:translateY(-1px);}
.btn--primary:active{transform:scale(.97);filter:brightness(1.2);}
.btn--accent{background:var(--tertiary);color:var(--on-tertiary);}
.btn--accent:hover{filter:brightness(1.08);transform:translateY(-1px);}
.btn--accent::before{content:"";width:6px;height:6px;background:currentColor;border-radius:1px;
  transition:transform var(--duration-medium2) var(--ease-spring);}
.btn--accent:hover::before{transform:rotate(45deg) scale(1.15);}
.btn--tonal{background:var(--tertiary-container);color:var(--on-tertiary-container);}
.btn--tonal:hover{background:var(--tertiary-soft);}
.btn--outlined{background:transparent;color:var(--on-surface);border-color:var(--outline);}
.btn--outlined:hover{border-color:var(--on-surface);background:var(--surface-2);}
.btn--inverse{background:var(--on-primary);color:var(--primary);}
.btn--inverse:hover{filter:brightness(.94);transform:translateY(-1px);}

/* 兼容旧类名 */
.cta{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:44px;padding:0 22px;border-radius:var(--radius-md);
  font-family:var(--font-body);font-size:var(--type-body-medium);font-weight:600;
  letter-spacing:-.01em;cursor:pointer;white-space:nowrap;
  transition:all var(--duration-short4) var(--ease-standard);
}
.cta::before{content:"";width:6px;height:6px;background:currentColor;border-radius:1px;
  transition:transform var(--duration-medium2) var(--ease-spring);}
.cta:hover::before{transform:rotate(45deg) scale(1.15);}
.cta:active{transform:scale(.97);}
.cta--solid{background:var(--tertiary);color:var(--on-tertiary);}
.cta--solid:hover{filter:brightness(1.08);transform:translateY(-1px);}
.cta--ghost{background:transparent;color:var(--on-surface);border:1.5px solid var(--outline);}
.cta--ghost:hover{border-color:var(--on-surface);background:var(--surface-2);}
.cta--primary{background:var(--primary);color:var(--on-primary);}
.cta--primary:hover{filter:brightness(1.35);transform:translateY(-1px);}
.topbar .cta{flex:none;}

.burger{display:none;width:44px;height:44px;border:none;background:var(--surface-2);
  border-radius:var(--radius-md);cursor:pointer;position:relative;margin-left:auto;}
.burger span{position:absolute;left:12px;right:12px;height:1.8px;background:var(--on-surface);
  border-radius:2px;transition:transform var(--duration-medium2) var(--ease-spring),opacity var(--duration-short4);}
.burger span:nth-child(1){top:17px;}
.burger span:nth-child(2){top:22px;}
.burger span:nth-child(3){top:27px;}
.burger.on span:nth-child(1){transform:translateY(5px) rotate(45deg);}
.burger.on span:nth-child(2){opacity:0;}
.burger.on span:nth-child(3){transform:translateY(-5px) rotate(-45deg);}

/* ---------- HERO ---------- */
.hero{
  position:relative;padding-top:calc(var(--topbar-h) + var(--space-16));
  padding-bottom:var(--space-12);overflow:hidden;
}
.hero__grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right,var(--outline-variant) 1px,transparent 1px),
    linear-gradient(to bottom,var(--outline-variant) 1px,transparent 1px);
  background-size:88px 88px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 0%,transparent 70%);
          mask-image:radial-gradient(120% 90% at 50% 0%,#000 0%,transparent 70%);
  opacity:.75;
}
.hero__glow{
  position:absolute;left:50%;top:-30%;width:min(1000px,110vw);aspect-ratio:1;translate:-50% 0;
  background:radial-gradient(circle,rgba(255,75,43,.09),transparent 62%);filter:blur(40px);
  pointer-events:none;
}
.hero__in{position:relative;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:var(--space-16);align-items:center;}
.hero h1{margin:var(--space-6) 0 var(--space-8);}
.hero h1 .ln{display:block;overflow:hidden;}
.hero h1 .ln>span{display:block;transform:translateY(105%);
  animation:rise var(--duration-extra-long) var(--ease-decelerate) forwards;}
.hero h1 .ln:nth-child(2)>span{animation-delay:80ms;}
.hero h1 .ln:nth-child(3)>span{animation-delay:160ms;}
@keyframes rise{to{transform:translateY(0);}}
.hero__body{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-8);align-items:center;}
.hero__meta{display:flex;gap:var(--space-8);flex-wrap:wrap;margin-top:var(--space-10);}
.hero__meta div{padding-left:var(--space-4);border-left:2px solid var(--outline-variant);}
.hero__meta b{display:block;font-family:var(--font-display);font-size:20px;font-weight:600;
  color:var(--on-surface);letter-spacing:-.02em;}
.hero__meta span{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;
  color:var(--on-surface-muted);text-transform:uppercase;}

/* HERO 产品舞台 */
.stage{position:relative;height:clamp(320px,38vw,470px);}
.stage__plate{
  position:absolute;inset:0;border-radius:var(--radius-xl);
  border:1px solid var(--outline-variant);background:var(--surface-1);overflow:hidden;
  box-shadow:var(--elevation-2);
}
.stage__plate::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(to right,var(--outline-variant) 1px,transparent 1px),
                   linear-gradient(to bottom,var(--outline-variant) 1px,transparent 1px);
  background-size:44px 44px;opacity:.9;
}
.stage__cross{position:absolute;width:12px;height:12px;}
.stage__cross::before,.stage__cross::after{content:"";position:absolute;background:var(--tertiary);opacity:.85;}
.stage__cross::before{left:0;right:0;top:5.5px;height:1.5px;border-radius:1px;}
.stage__cross::after{top:0;bottom:0;left:5.5px;width:1.5px;border-radius:1px;}
.stage__cross.tl{top:16px;left:16px;}
.stage__cross.tr{top:16px;right:16px;}
.stage__cross.bl{bottom:16px;left:16px;}
.stage__cross.br{bottom:16px;right:16px;}

.stage__items{position:absolute;inset:0;}
.stage__item{
  position:absolute;display:flex;align-items:center;justify-content:center;
  animation:float 7s var(--ease-standard) infinite;
}
.stage__item img{
  max-width:100%;max-height:100%;object-fit:contain;
  filter:drop-shadow(0 14px 20px rgba(26,26,46,.14));
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.stage__tag{
  position:absolute;left:0;bottom:0;background:var(--primary);color:var(--on-primary);
  font-size:var(--type-label-small);font-weight:600;letter-spacing:.06em;
  padding:8px 14px;border-radius:0 var(--radius-xl) 0 var(--radius-md);
}

/* ---------- 指标条 ---------- */
.stats{border-block:1px solid var(--outline-variant);background:var(--surface-1);}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);}
.stats__cell{padding:var(--space-10) var(--space-8);border-right:1px solid var(--outline-variant);}
.stats__cell:last-child{border-right:0;}
.stats__cell b{
  display:block;font-family:var(--font-display);font-weight:600;font-size:var(--type-headline-large);
  line-height:1.1;letter-spacing:-.025em;color:var(--on-surface);
}
.stats__cell span{
  display:block;margin-top:var(--space-2);font-size:var(--type-label-small);
  letter-spacing:.1em;text-transform:uppercase;color:var(--on-surface-muted);
}

/* ---------- 品类矩阵 ---------- */
.cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5);}
.cat{
  position:relative;grid-column:auto;background:var(--surface-1);
  border:1px solid var(--outline-variant);border-radius:var(--radius-lg);
  display:flex;flex-direction:column;overflow:hidden;
  transition:transform var(--duration-medium2) var(--ease-spring),
             box-shadow var(--duration-medium2) var(--ease-standard),
             border-color var(--duration-medium2) var(--ease-standard);
}
.cat:hover{transform:translateY(-4px);box-shadow:var(--elevation-3);
  border-color:var(--outline);}

/* 分类图区：白底，图片完整等比显示。
   图片必须用显式宽高（绝对定位 + calc），原因：
   1) <img> 是 replaced element，width:auto 会取内在尺寸（未加载时 0、加载后原图宽），
      0 尺寸会让 lazy 图片永远不进视口 → 永不加载的死锁；
   2) 显式 100% 又会把 aspect-ratio 撑开导致裁切。 */
.cat__media{
  position:relative;aspect-ratio:16/10;background:#fff;overflow:hidden;
  border-bottom:1px solid var(--outline-variant);
}
.cat__img{
  position:absolute;
  top:var(--space-5);left:var(--space-5);
  width:calc(100% - var(--space-5) * 2);
  height:calc(100% - var(--space-5) * 2);
  object-fit:contain;object-position:center;
  transition:transform var(--duration-long1) var(--ease-spring);
}
.cat:hover .cat__img{transform:scale(1.05);}
.cat__media--empty{background:var(--surface-2);}
.cat__media--empty span{
  font-family:var(--font-display);font-size:52px;font-weight:700;
  color:var(--outline);text-transform:uppercase;line-height:1;
}

.cat__body{
  padding:var(--space-5) var(--space-5) var(--space-5);
  display:flex;flex-direction:column;flex:1;
}
.cat__idx{font-family:var(--font-mono);font-size:var(--type-label-small);color:var(--tertiary);
  letter-spacing:.08em;}
.cat__name{
  font-family:var(--font-display);font-weight:600;font-size:var(--type-title-large);
  line-height:1.2;text-transform:uppercase;letter-spacing:-.01em;
  margin:var(--space-2) 0 var(--space-1);color:var(--on-surface);
}
.cat__en{font-size:var(--type-body-small,13px);color:var(--on-surface-muted);margin-bottom:auto;}
.cat__sub{
  list-style:none;margin:var(--space-4) 0 0;padding:0;display:grid;gap:5px;
  max-height:126px;overflow:auto;
}
.cat__sub li{font-size:12.5px;line-height:1.45;}
.cat__sub a{
  color:var(--on-surface-variant);display:flex;justify-content:space-between;gap:8px;
  padding:3px 6px;margin:0 -6px;border-radius:var(--radius-xs);
  transition:background var(--duration-short4) var(--ease-standard),color var(--duration-short4) var(--ease-standard);
}
.cat__sub a:hover{background:var(--surface-2);color:var(--tertiary);}
.cat__foot{
  margin-top:var(--space-5);display:flex;align-items:center;justify-content:space-between;
  border-top:1px solid var(--outline-variant);padding-top:var(--space-4);
}
.cat__count{font-family:var(--font-mono);font-size:11px;color:var(--on-surface-variant);letter-spacing:.06em;}
.cat__go{
  font-size:var(--type-label-small);font-weight:600;letter-spacing:.04em;
  color:var(--tertiary);display:flex;align-items:center;gap:6px;
}
.cat__go i{font-style:normal;transition:transform var(--duration-medium2) var(--ease-spring);}
.cat:hover .cat__go i{transform:translateX(5px);}

/* ---------- 产品网格 ---------- */
.grid-p{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4);}
.grid-p--3{grid-template-columns:repeat(3,minmax(0,1fr));}

.card{
  position:relative;background:var(--surface-1);border:1px solid var(--outline-variant);
  border-radius:var(--radius-lg);display:flex;flex-direction:column;overflow:hidden;
  transition:transform var(--duration-medium2) var(--ease-spring),
             box-shadow var(--duration-medium2) var(--ease-standard),
             border-color var(--duration-medium2) var(--ease-standard);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--elevation-3);border-color:var(--outline);}
.card__media{
  position:relative;aspect-ratio:4/3;display:grid;place-items:center;
  padding:var(--space-4);background:#fff;overflow:hidden;
}
.card__media::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--outline-variant);
}
.card__media img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;object-position:center;
  transition:transform var(--duration-long1) var(--ease-spring);
}
.card:hover .card__media img{transform:scale(1.05);}
.card__no{
  position:absolute;top:12px;left:14px;font-family:var(--font-mono);font-size:10px;
  color:var(--on-surface-muted);letter-spacing:.08em;z-index:2;
}
.card__model{
  position:absolute;top:10px;right:14px;font-family:var(--font-mono);font-size:10.5px;
  color:var(--tertiary);letter-spacing:.04em;z-index:2;
}
.card__body{padding:var(--space-5) var(--space-5) var(--space-6);display:flex;flex-direction:column;flex:1;}
.card__name{
  font-size:var(--type-body-large);font-weight:600;line-height:1.4;color:var(--on-surface);
  margin-bottom:var(--space-2);transition:color var(--duration-short4) var(--ease-standard);
}
.card:hover .card__name{color:var(--tertiary);}
.card__spec{
  margin-top:auto;padding-top:var(--space-3);border-top:1px solid var(--outline-variant);
  display:flex;gap:var(--space-3);flex-wrap:wrap;
  font-family:var(--font-mono);font-size:10.5px;color:var(--on-surface-muted);letter-spacing:.04em;
}
.card__spec b{color:var(--on-surface-variant);font-weight:500;}
.card--wide{grid-column:span 2;}

.pill{
  display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--radius-full);
  border:1px solid var(--outline);font-size:var(--type-label-small);font-weight:500;
  color:var(--on-surface-variant);transition:all var(--duration-short4) var(--ease-standard);
}
a.pill:hover{border-color:var(--tertiary);color:var(--tertiary);background:var(--tertiary-container);}
.pill--on{background:var(--tertiary);border-color:var(--tertiary);color:var(--on-tertiary);}

/* 实拍图沿用同样的白底展示，保留图本身的矩形边界更真实 */
.card__media--photo{background:#fff;padding:var(--space-4);}
.card__media--photo::after{display:none;}
.pd__media--photo{background:#fff;}

/* ---------- 能力区 ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--space-16);align-items:start;}
.cap{display:grid;grid-template-columns:auto 1fr;gap:var(--space-6);
  padding:var(--space-6) 0;border-top:1px solid var(--outline-variant);}
.cap__n{font-family:var(--font-mono);font-size:var(--type-label-small);color:var(--tertiary);
  padding-top:4px;letter-spacing:.06em;}
.cap h3{font-family:var(--font-display);font-weight:600;font-size:var(--type-title-large);
  text-transform:uppercase;letter-spacing:-.012em;margin-bottom:var(--space-2);color:var(--on-surface);}
.cap p{font-size:var(--type-body-medium);color:var(--on-surface-variant);line-height:1.72;}

/* ---------- 列表页头部 ---------- */
.pagehead{
  padding-top:calc(var(--topbar-h) + var(--space-12));
  padding-bottom:var(--space-10);border-bottom:1px solid var(--outline-variant);
  position:relative;overflow:hidden;
}
.pagehead::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(to right,var(--outline-variant) 1px,transparent 1px);
  background-size:88px 100%;
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 62%);
          mask-image:linear-gradient(90deg,#000,transparent 62%);
}
.pagehead__in{position:relative;}
.crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:var(--type-label-small);color:var(--on-surface-muted);}
.crumbs a{color:var(--on-surface-muted);transition:color var(--duration-short4) var(--ease-standard);}
.crumbs a:hover{color:var(--tertiary);}
.crumbs span{opacity:.55;}
.pagehead h1{margin:var(--space-6) 0 var(--space-5);}
.pagehead .lede{margin-bottom:var(--space-6);}

/* 工具条 */
.toolbar{display:flex;gap:var(--space-4);align-items:center;flex-wrap:wrap;margin-top:var(--space-6);}
.search{position:relative;flex:1;min-width:220px;max-width:360px;}
.search input{
  width:100%;height:44px;background:var(--surface-1);border:1.5px solid var(--outline);
  border-radius:var(--radius-md);padding:0 14px 0 40px;
  font-family:var(--font-body);font-size:var(--type-body-medium);
  transition:border-color var(--duration-short4) var(--ease-standard);
}
.search input::placeholder{color:var(--on-surface-muted);}
.search input:focus{outline:0;border-color:var(--tertiary);
  box-shadow:0 0 0 3px var(--tertiary-container);}
.search::before{
  content:"";position:absolute;left:15px;top:50%;width:11px;height:11px;margin-top:-7px;
  border:1.5px solid var(--on-surface-muted);border-radius:50%;pointer-events:none;
}
.search::after{
  content:"";position:absolute;left:25px;top:calc(50% + 4px);width:6px;height:1.5px;
  background:var(--on-surface-muted);transform:rotate(45deg);pointer-events:none;
}
.chipbar{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center;}
.chipbar__label{font-size:var(--type-label-small);letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-surface-muted);margin-right:var(--space-1);}
.chip{
  height:36px;padding:0 14px;border-radius:var(--radius-full);border:1px solid var(--outline-variant);
  font-size:var(--type-body-medium);color:var(--on-surface-variant);cursor:pointer;
  background:var(--surface-1);transition:all var(--duration-short4) var(--ease-standard);
}
.chip:hover{border-color:var(--outline);color:var(--on-surface);background:var(--surface-2);}
.chip:active{transform:scale(.97);}
.chip.on{background:var(--primary);border-color:var(--primary);color:var(--on-primary);}
.count-note{font-family:var(--font-mono);font-size:var(--type-label-small);color:var(--on-surface-muted);}

/* ---------- 产品详情 ---------- */
.pd{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:var(--space-16);align-items:start;}
.pd__media{
  position:sticky;top:96px;background:#fff;border:1px solid var(--outline-variant);
  border-radius:var(--radius-xl);aspect-ratio:4/3;display:grid;place-items:center;
  padding:6%;overflow:hidden;box-shadow:var(--elevation-1);
}
.pd__media img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;object-position:center;
}
.pd__tagline{
  position:absolute;left:0;top:0;background:var(--tertiary);color:var(--on-tertiary);
  font-size:var(--type-label-small);font-weight:600;letter-spacing:.04em;
  padding:8px 14px;border-radius:var(--radius-xl) 0 var(--radius-md) 0;
}
.pd__title{font-family:var(--font-display);font-weight:700;font-size:var(--type-display-medium);
  line-height:1.08;text-transform:uppercase;letter-spacing:-.025em;
  margin:var(--space-5) 0 var(--space-4);color:var(--on-surface);}
.pd__model{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:var(--type-body-medium);
  color:var(--tertiary);background:var(--tertiary-container);padding:6px 12px;
  border-radius:var(--radius-sm);
}
.spec{width:100%;border-collapse:collapse;margin:var(--space-8) 0;
  border-top:1px solid var(--outline-variant);}
.spec tr{border-bottom:1px solid var(--outline-variant);}
.spec th,.spec td{text-align:left;padding:13px 4px;vertical-align:top;font-weight:400;}
.spec th{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-surface-muted);width:150px;white-space:nowrap;
}
.spec td{font-family:var(--font-mono);font-size:var(--type-body-medium);color:var(--on-surface);}
.prose{font-size:var(--type-body-large);line-height:1.78;color:var(--on-surface-variant);}
.prose strong{color:var(--on-surface);font-weight:600;}
.prose ul{margin:var(--space-4) 0 var(--space-6);display:grid;gap:9px;}
.prose li{position:relative;padding-left:22px;}
.prose li::before{
  content:"";position:absolute;left:0;top:10px;width:9px;height:1.5px;background:var(--tertiary);
  border-radius:1px;
}
.prose p{margin:0 0 12px;}
.prose a{color:var(--tertiary);}
.pd__actions{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-8);}
.pd__note{
  margin-top:var(--space-6);padding:14px 16px;border-radius:var(--radius-sm);
  border-left:3px solid var(--tertiary);background:var(--tertiary-container);
  font-size:var(--type-body-medium);color:var(--on-tertiary-container);line-height:1.7;
}

.keyfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--outline-variant);border:1px solid var(--outline-variant);
  border-radius:var(--radius-lg);overflow:hidden;margin:var(--space-8) 0;}
.keyfacts div{background:var(--surface-1);padding:var(--space-5);}
.keyfacts b{display:block;font-family:var(--font-mono);font-size:var(--type-body-medium);
  color:var(--on-surface);font-weight:500;letter-spacing:.01em;}
.keyfacts span{display:block;margin-top:6px;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-surface-muted);}

/* ---------- 询盘 CTA ---------- */
.cta-band{position:relative;background:var(--primary);color:var(--on-primary);overflow:hidden;}
.cta-band::before{
  content:"";position:absolute;inset:0;opacity:.14;
  background-image:repeating-linear-gradient(-45deg,transparent 0 16px,rgba(255,255,255,.5) 16px 17px);
}
.cta-band__in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:var(--space-8);align-items:center;padding-block:var(--space-16);}
.cta-band h2{font-family:var(--font-display);font-weight:700;font-size:var(--type-display-medium);
  line-height:1.08;letter-spacing:-.025em;text-transform:uppercase;}
.cta-band p{margin-top:var(--space-4);font-size:var(--type-body-large);opacity:.82;max-width:54ch;}
.btn-white{
  display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 28px;
  border-radius:var(--radius-md);background:#fff;color:var(--primary);
  font-size:var(--type-body-large);font-weight:600;transition:all var(--duration-short4) var(--ease-standard);
}
.btn-white::before{content:"";width:6px;height:6px;background:currentColor;border-radius:1px;}
.btn-white:hover{filter:brightness(.95);transform:translateY(-2px);box-shadow:var(--elevation-3);}

/* ---------- 表单 ---------- */
.form{display:grid;gap:var(--space-4);}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);}
.field{position:relative;}
.field label{
  display:block;font-size:var(--type-label-small);letter-spacing:.08em;
  text-transform:uppercase;color:var(--on-surface-muted);margin-bottom:7px;font-weight:500;
}
.field input,.field textarea,.field select{
  width:100%;height:48px;background:var(--surface-1);border:1.5px solid var(--outline);
  border-radius:var(--radius-md);padding:0 14px;
  font-family:var(--font-body);font-size:var(--type-body-large);color:var(--on-surface);
  transition:border-color var(--duration-short4) var(--ease-standard),
             box-shadow var(--duration-short4) var(--ease-standard);
}
.field textarea{height:auto;padding:14px;line-height:1.6;resize:vertical;}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:0;border-color:var(--tertiary);box-shadow:0 0 0 3px var(--tertiary-container);
}
.field input::placeholder,.field textarea::placeholder{color:var(--on-surface-muted);}
.field__err{color:var(--error);font-size:var(--type-label-small);margin-top:6px;display:none;}
.field.bad input,.field.bad textarea{border-color:var(--error);}
.field.bad .field__err{display:block;}
.req{color:var(--tertiary);}

/* ---------- 内容页 ---------- */
.doc{max-width:72ch;}
.doc h2{
  font-family:var(--font-display);font-weight:600;font-size:var(--type-headline-large);
  text-transform:uppercase;letter-spacing:-.02em;margin:var(--space-12) 0 var(--space-4);
}
.doc h2:first-child{margin-top:0;}
.doc h3{font-size:var(--type-title-large);font-weight:600;margin:var(--space-8) 0 var(--space-3);}
.doc p{color:var(--on-surface-variant);line-height:1.8;margin-bottom:var(--space-4);}
.doc ul{display:grid;gap:10px;margin:var(--space-4) 0 var(--space-8);}
.doc li{position:relative;padding-left:24px;color:var(--on-surface-variant);line-height:1.75;}
.doc li::before{content:"";position:absolute;left:0;top:11px;width:10px;height:1.5px;
  background:var(--tertiary);border-radius:1px;}
.doc li strong{color:var(--on-surface);font-weight:600;}
.note-block{
  border:1px solid var(--outline-variant);border-left:3px solid var(--tertiary);
  background:var(--surface-1);border-radius:var(--radius-md);
  padding:var(--space-6);margin:var(--space-8) 0;
}
.note-block h4{font-size:var(--type-label-small);letter-spacing:.12em;text-transform:uppercase;
  color:var(--tertiary);margin-bottom:var(--space-3);font-weight:600;}
.note-block p{color:var(--on-surface-variant);font-size:var(--type-body-medium);margin:0;}
.note-block p+p{margin-top:9px;}

.dtable{width:100%;border-collapse:collapse;margin:var(--space-6) 0;font-size:var(--type-body-medium);}
.dtable th,.dtable td{border:1px solid var(--outline-variant);padding:12px 14px;
  text-align:left;vertical-align:top;}
.dtable th{background:var(--surface-2);font-size:var(--type-label-small);letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-surface-muted);font-weight:600;}
.dtable td{color:var(--on-surface-variant);}

/* ---------- 页脚（反色区块） ---------- */
.foot{background:var(--surface-inverse);color:var(--on-secondary);padding-top:var(--space-16);}
.foot__grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:var(--space-12);padding-bottom:var(--space-12);}
.foot h4{font-size:var(--type-label-small);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(237,234,242,.5);margin-bottom:var(--space-4);font-weight:600;}
.foot li{margin-bottom:10px;}
.foot li a{font-size:var(--type-body-medium);color:rgba(237,234,242,.74);
  transition:color var(--duration-short4) var(--ease-standard);display:inline-block;}
.foot li a:hover{color:#fff;}
.foot__desc{font-size:var(--type-body-medium);color:rgba(237,234,242,.66);line-height:1.78;
  max-width:44ch;margin-top:var(--space-4);}
.foot__bot{
  border-top:1px solid rgba(237,234,242,.14);padding-block:var(--space-5);
  display:flex;gap:var(--space-4);justify-content:space-between;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:10.5px;color:rgba(237,234,242,.58);letter-spacing:.08em;
}
.foot__bot a:hover{color:#fff;}
/* 反色区块内的 logo 文字必须换成亮色，否则 on-surface 深色字在深底上不可见 */
.foot .logo__en{color:#fff;}
.foot .logo__cn{color:rgba(237,234,242,.62);}
.foot .logo__mark::after{background:var(--surface-inverse);}

/* ---------- 进场动画（交错淡入） ---------- */
/* 渐进增强：默认可见，只有 JS 成功就绪（html.js-reveal）时才启用入场动画。
   这样即使脚本失败或观察器未触发，内容也不会整片消失。 */
.reveal{opacity:1;transform:none;}
html.js-reveal .reveal:not(.in){
  opacity:0;transform:translateY(16px);
  transition:opacity var(--duration-extra-long) var(--ease-decelerate),
             transform var(--duration-extra-long) var(--ease-decelerate);
}
html.js-reveal .reveal.in{
  opacity:1;transform:none;
  transition:opacity var(--duration-extra-long) var(--ease-decelerate),
             transform var(--duration-extra-long) var(--ease-decelerate);
}
@media (prefers-reduced-motion:reduce){
  .reveal,html.js-reveal .reveal:not(.in){opacity:1;transform:none;transition:none;}
  .hero h1 .ln>span{animation:none;transform:none;}
  .stage__item{animation:none;}
  *{scroll-behavior:auto;}
}

/* ---------- 空状态 ---------- */
.empty{padding:72px 24px;text-align:center;border:1px dashed var(--outline);
  border-radius:var(--radius-lg);color:var(--on-surface-muted);font-size:var(--type-body-medium);}

/* ---------- 分页 ---------- */
.pager{display:flex;gap:var(--space-2);justify-content:center;align-items:center;
  margin-top:var(--space-12);flex-wrap:wrap;}
.pager a,.pager span{
  min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);border:1px solid var(--outline-variant);
  font-size:var(--type-body-medium);padding:0 12px;color:var(--on-surface-variant);
  background:var(--surface-1);transition:all var(--duration-short4) var(--ease-standard);
}
.pager a:hover{border-color:var(--tertiary);color:var(--tertiary);}
.pager .on{background:var(--primary);border-color:var(--primary);color:var(--on-primary);}

/* ---------- 响应式（clamp 优先 + 必要结构断点） ---------- */
@media (max-width:1100px){
  .grid-p{grid-template-columns:repeat(3,minmax(0,1fr));}
  .cats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .foot__grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:960px){
  .sec-head{grid-template-columns:1fr;align-items:start;gap:var(--space-5);}
  .hero__in{grid-template-columns:1fr;gap:var(--space-10);}
  .stage{height:clamp(280px,48vw,380px);order:-1;}
  .hero__body{grid-template-columns:1fr;}
  .pd{grid-template-columns:1fr;}
  .pd__media{position:relative;top:0;max-width:520px;aspect-ratio:4/3;}
  .split{grid-template-columns:1fr;gap:var(--space-10);}
  .stats__grid{grid-template-columns:1fr 1fr;}
  .stats__cell:nth-child(2n){border-right:0;}
  .stats__cell:nth-child(-n+2){border-bottom:1px solid var(--outline-variant);}
}
@media (max-width:760px){
  .nav{
    position:fixed;inset:var(--topbar-h) 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(248,249,250,.99);border-bottom:1px solid var(--outline-variant);
    padding:var(--space-3) var(--gut) var(--space-6);
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:opacity var(--duration-medium2) var(--ease-standard),
               transform var(--duration-medium2) var(--ease-standard);
  }
  .nav.on{transform:translateY(0);opacity:1;pointer-events:auto;}
  .nav a{padding:14px 0;border-bottom:1px solid var(--outline-variant);
    min-height:44px;display:flex;align-items:center;}
  .nav a::after{display:none;}
  .burger{display:block;}
  .topbar .cta{display:none;}
  .grid-p,.grid-p--3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);}
  .cat__body{padding:var(--space-4);}
  .cta-band__in{grid-template-columns:1fr;}
  .form__row{grid-template-columns:1fr;}
  .foot__grid{grid-template-columns:1fr;}
  .spec th{width:108px;font-size:10px;}
  .card__name{font-size:var(--type-body-medium);}
}
@media (max-width:480px){
  .grid-p,.grid-p--3{grid-template-columns:1fr;}
  .cats{grid-template-columns:1fr;}
  .stats__grid{grid-template-columns:1fr;}
  .stats__cell{border-right:0;border-bottom:1px solid var(--outline-variant);}
  .stats__cell:last-child{border-bottom:0;}
}