/* =========================================================
   欧美斯 OUMAIST 企业官网首页
   风格：简约 / 大气 / 国际化（参考 onmuse / isunon / sunon）
   纯 HTML + CSS 实现，无框架依赖
   ========================================================= */

/* ============ 网页字体（本地自托管，SIL OFL 开源授权） ============
   Archivo —— 标题 / 大字（可变字体，字重 100–900）
   Inter   —— 正文 / 界面（可变字体，字重 100–900）
   均为 latin 子集 woff2，合计约 132KB，不走 Google Fonts CDN
   （国内无法访问 fonts.googleapis.com，会导致字体加载失败）      */
@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("fonts/archivo-var.woff2") format("woff2");
}
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("fonts/inter-var.woff2") format("woff2");
}
@font-face{
  font-family:"Inter";
  font-style:italic;
  font-weight:100 900;
  font-display:swap;
  src:url("fonts/inter-var-italic.woff2") format("woff2");
}

:root{
  --ink:        #141414;
  --text:       #3a3a3a;
  --muted:      #8b8b8b;
  --line:       #e7e7e7;
  --bg:         #ffffff;
  --bg-soft:    #f6f5f2;
  --accent:     #e8760c;
  --accent-dk:  #c85f04;
  --header-h:   76px;
  --radius:     4px;
  --ease:       cubic-bezier(.25,.8,.25,1);
  --shadow:     0 10px 30px rgba(0,0,0,.08);
  --font-body:  "Inter","Microsoft YaHei","Source Han Sans SC",
                -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --font-display:"Archivo","Inter","Microsoft YaHei",
                "Helvetica Neue",Arial,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  color:var(--text);background:var(--bg);
  font-size:15px;line-height:1.75;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none;transition:color .25s var(--ease)}
ul{list-style:none}
h1,h2,h3{font-family:var(--font-display);font-weight:600;color:var(--ink);line-height:1.3}

/* 内容区统一宽度：视口 80% */
.container{width:80%;max-width:1560px;margin-inline:auto}
.center{text-align:center}

/* ============ 顶部导航（悬浮叠加在 Banner 之上） ============ */
.toggle-hook{display:none}

/* 锚点跳转时避开固定导航 */
[id]{scroll-margin-top:calc(var(--header-h) + 12px)}

.site-header{
  --nav-fg:#ffffff;
  --nav-sub:rgba(255,255,255,.74);
  position:fixed;top:0;left:0;right:0;z-index:100;
  color:var(--nav-fg);
  background:transparent;
  border-bottom:1px solid rgba(255,255,255,.16);
  transition:background .35s var(--ease),border-color .35s var(--ease);
}
/* 页面下滚后导航转为实底白底；产品下拉展开时同样强制白底 */
.site-header.is-scrolled,
.site-header.is-forced-solid{
  --nav-fg:var(--ink);
  --nav-sub:var(--muted);
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);
  border-bottom-color:var(--line);
}
.site-header.is-scrolled .logo-img-white,
.site-header.is-forced-solid .logo-img-white{opacity:0}
.site-header.is-scrolled .logo-img-dark,
.site-header.is-forced-solid .logo-img-dark{opacity:1}
/* 页头容器比正文更宽（正文 80%），否则 12 个导航项 + 居中 Logo 在 1440 以下会挤爆 */
.site-header .container{width:94%;max-width:1680px}
.header-inner{
  height:var(--header-h);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(12px,1.2vw,24px);
}
/* Logo 居中：左右两栏等宽 1fr，Logo 固定落在中间那一列。
   grid-row:1 必须显式声明——稀疏自动放置会在 Logo 占了第 1 行第 2 列之后，
   把游标推过中列，导致左导航（第 1 列）被挤到第 2 行。 */
.logo{grid-column:2;grid-row:1;justify-self:center;position:relative;display:block;height:clamp(19px,1.64vw,27px)}
.logo-img{
  display:block;height:clamp(19px,1.64vw,27px);width:auto;
  transition:opacity .3s var(--ease);
}
.logo-img-dark{position:absolute;left:0;top:0;opacity:0}

/* .main-nav 在桌面端只做「透明的容器」：display:contents 让左右两栏直接成为
   .header-inner 的网格项，这样 Logo 才能夹在它们中间成为真正居中；
   窄屏再把它还原成抽屉本体（见文件底部的 @media 块）。 */
.main-nav{display:contents}

/* 左栏：产品与业务 */
.nav-list{grid-column:1;grid-row:1;justify-self:start;display:flex;align-items:center;gap:0}
.nav-list > li{position:relative}
.nav-list > li > a{display:block;white-space:nowrap;padding:8px clamp(5px,.55vw,11px);font-size:clamp(11.5px,.88vw,14px);color:var(--nav-fg);letter-spacing:.01em;}
.nav-list > li > a.active,
.nav-list > li > a:hover{color:var(--accent)}

/* 右栏：可持续 / 服务 / 关于 / 展厅 · 联系 / 搜索 / 语言切换 */
.nav-right{grid-column:3;grid-row:1;justify-self:end;display:flex;align-items:center;gap:clamp(5px,.5vw,12px);}
.nav-right .nav-link{display:block;white-space:nowrap;padding:8px clamp(4px,.45vw,9px);font-size:clamp(11.5px,.88vw,14px);color:var(--nav-fg);letter-spacing:.01em;}
.nav-right .nav-link.active,
.nav-right .nav-link:hover{color:var(--accent)}
/* 右栏里的下拉项（About）：与其它项同为普通链接，只在末尾加一个小指示箭头 */
.nav-right .has-sub{position:relative}
.nav-right .has-sub > .nav-link::after{
  content:"";display:inline-block;width:4.5px;height:4.5px;margin-left:5px;
  border-right:1.3px solid currentColor;border-bottom:1.3px solid currentColor;
  transform:translateY(-2px) rotate(45deg);opacity:.66;
}

.sub-menu{
  position:absolute;top:calc(100% + 10px);left:50%;
  transform:translate(-50%,8px);
  min-width:148px;background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow);border-radius:var(--radius);
  padding:8px 0;opacity:0;visibility:hidden;
  transition:all .28s var(--ease);
}
/* 桌面宽屏：hover / 键盘聚焦展开。
   必须限制在宽屏，否则下面的 translate(-50%) 会泄漏到移动端的静态定位子菜单上，
   把子菜单整体左移半个宽度。 */
@media (min-width:1141px){
  .has-sub:hover .sub-menu,
  .has-sub:focus-within .sub-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
}
.sub-menu a{display:block;padding:8px 18px;font-size:13.5px;color:var(--text);text-align:center}
.sub-menu a:hover{color:var(--accent);background:var(--bg-soft)}

/* 搜索入口：点击热区做大一些（图标本体只有 19px，点偏一点就没反应）。
   热区必须是方形矩形——圆角（border-radius:50%）会让四角不参与命中测试，
   点在图标斜上方就会落到 .nav-right 上，表现为「点了没反应」。 */
.search-btn{
  display:flex;cursor:pointer;color:var(--nav-fg);
  padding:11px;border-radius:8px;
  transition:color .25s var(--ease),background .25s var(--ease);
}
.search-btn:hover{color:var(--accent);background:rgba(255,255,255,.16)}
.site-header.is-scrolled .search-btn:hover{background:rgba(0,0,0,.06)}
/* 移动端页头右侧的搜索快捷入口，桌面端隐藏 */
.search-btn-mobile{display:none}

/* 中英语言切换（分段控件） */
.lang-switch{
  display:flex;align-items:center;
  border:1px solid rgba(255,255,255,.34);border-radius:999px;overflow:hidden;
  transition:border-color .35s var(--ease);
}
.site-header.is-scrolled .lang-switch{border-color:#d8d5d0}
.lang-btn{
  border:0;background:transparent;cursor:pointer;color:var(--nav-sub);
  font-family:inherit;font-size:clamp(11px,.8vw,12.5px);letter-spacing:.04em;
  padding:4px clamp(6px,.5vw,10px);line-height:1.5;
  transition:color .25s var(--ease),background .25s var(--ease);
}
.lang-btn:hover{color:var(--nav-fg)}
.lang-btn.is-active{background:var(--accent);color:#fff}

.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px}
.burger span{width:22px;height:2px;background:var(--nav-fg);transition:.3s}

/* 站内搜索：点击页头搜索图标弹出一个居中的搜索窗口。
   注意必须挂在 <body> 下而不是 <header> 里——header 滚动后带 backdrop-filter，
   会成为 fixed 后代的 containing block，把全屏浮层压扁。 */
.search-modal{
  position:fixed;inset:0;z-index:120;
  display:flex;align-items:flex-start;justify-content:center;
  padding:clamp(64px,15vh,168px) 20px 40px;
  opacity:0;visibility:hidden;
  transition:opacity .28s var(--ease),visibility .28s;
}
#searchToggle:checked ~ .search-modal{opacity:1;visibility:visible}
.search-modal-backdrop{
  position:absolute;inset:0;cursor:pointer;
  background:rgba(10,10,10,.5);backdrop-filter:blur(3px);
}
.search-panel{
  position:relative;width:min(720px,100%);
  background:#fff;color:var(--text);border-radius:12px;
  padding:32px 32px;
  box-shadow:0 30px 80px rgba(0,0,0,.34);
  transform:translateY(-18px) scale(.985);
  transition:transform .36s var(--ease);
}
#searchToggle:checked ~ .search-modal .search-panel{transform:none}

/* 右侧留 40px 给面板右上角的关闭键，避免 Search 按钮与它挤在一起 */
.search-form{display:flex;align-items:center;gap:14px;padding:0 40px 0 0}
.search-form-icon{flex:0 0 auto;color:var(--muted)}
.search-form input{
  flex:1;min-width:0;border:0;border-bottom:2px solid var(--ink);outline:none;
  font-size:clamp(16px,1.5vw,19px);padding:10px 2px;background:transparent;color:var(--ink);
  font-family:inherit;
}
.search-form input::placeholder{color:#b5b2ad}
.search-form button{
  flex:0 0 auto;border:0;background:var(--ink);color:#fff;padding:11px 30px;
  font-size:13.5px;letter-spacing:.2em;cursor:pointer;border-radius:var(--radius);
  font-family:inherit;
}
.search-form button:hover{background:var(--accent)}
/* 搜索校验提示：默认占位为 0，有文字时才出现 */
.search-hint{
  margin:0;padding:0 40px 0 36px;
  max-height:0;overflow:hidden;
  font-size:13px;line-height:1.55;letter-spacing:.01em;
  color:#c0392b;
  transition:max-height .2s,margin-top .2s;
}
.search-hint:not(:empty){max-height:60px;margin-top:10px}
.search-form input.is-invalid{border-bottom-color:#c0392b}
/* 关闭按钮：固定在面板右上角 */
.search-close{
  position:absolute;right:14px;top:14px;z-index:2;
  display:flex;cursor:pointer;color:var(--muted);
  padding:7px;border-radius:50%;
  transition:color .25s,background .25s;
}
.search-close:hover{color:var(--ink);background:var(--bg-soft)}
/* 注意：搜索窗口打开时**刻意不锁页面滚动**。锁定会让滚动条消失、可用宽度变大，
   整页内容横向跳一下（移位）；这个浮层很轻，保持滚动条不动更稳。 */

/* ============ 第一屏 hero 轮播 ============
   两种运行模式：
   A. 无 JS：纯 CSS 自动轮播（下方 keyframes，时序已对齐为无缝交叉淡入）
   B. 有 JS：加 .is-js 后关闭 CSS 动画，改由 .is-active / .is-out 两个状态类控制，
      支持圆点/箭头切换、悬停暂停、触摸滑动、键盘方向键
   ============================================ */
.hero{
  position:relative;height:100vh;min-height:620px;max-height:960px;
  overflow:hidden;background:#0d0d0d;color:#fff;
}

/* —— A 模式：纯 CSS 自动轮播 —— */
.slide{position:absolute;inset:0;opacity:0;animation:slideFade 21s infinite}
.slide:nth-child(1){animation-delay:0s}
.slide:nth-child(2){animation-delay:7s}
.slide:nth-child(3){animation-delay:14s}
.hero:hover .slide{animation-play-state:paused}

/* 每张图在其 7s 档期内完整显示，首尾各留 1.2s 做交叉淡入，
   淡出与下一张的淡入时间窗完全重合（33.33% -> 39.05%），因此不会出现黑场 */
@keyframes slideFade{
  0%     {opacity:0;transform:scale(1)}
  5.71%  {opacity:1}
  33.33% {opacity:1;transform:scale(1.07)}
  39.05% {opacity:0;transform:scale(1.07)}
  100%   {opacity:0;transform:scale(1.07)}
}

/* —— B 模式：JS 控制 —— */
.hero.is-js .slide{animation:none;opacity:0;z-index:0;transition:opacity 1s var(--ease)}
/* 上一张始终保持不透明垫在下方，避免交叉淡入时透出底色造成发暗 */
.hero.is-js .slide.is-out{opacity:1;z-index:1;transition:none}
.hero.is-js .slide.is-active{opacity:1;z-index:2}
/* 缓慢推近：用 transition 而非 animation，
   这样离场时缩放不会瞬间归位、在背后闪一下（7s 内仅回退约 1%） */
.hero.is-js .slide img{transform:scale(1);transition:transform 8s ease-out}
.hero.is-js .slide.is-active img{transform:scale(1.07)}

/* 文案与图片分开过渡：旧文案先快速退场，避免与下一张的文案重叠发虚；
   新文案等图片淡入过半后再上浮出现，节奏更干净 */
.hero.is-js .slide-inner{
  opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.hero.is-js .slide.is-out .slide-inner{
  opacity:0;transform:translateY(0);
  transition:opacity .28s ease,transform .28s ease;
}
.hero.is-js .slide.is-active .slide-inner{
  opacity:1;transform:translateY(0);
  transition:opacity .6s var(--ease) .34s,transform .6s var(--ease) .34s;
}

.slide img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
}
.slide::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(10,10,10,.52) 0%,rgba(10,10,10,.12) 22%,rgba(10,10,10,0) 34%),
    linear-gradient(90deg,rgba(10,10,10,.62) 0%,rgba(10,10,10,.28) 46%,rgba(10,10,10,.12) 100%);
}
.slide-inner{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;justify-content:center;
  padding-bottom:6vh;
}
.eyebrow{
  font-size:13px;letter-spacing:.42em;color:rgba(255,255,255,.72);
  text-transform:uppercase;margin-bottom:10px;
}
.display{
  font-size:clamp(64px,11.5vw,164px);font-weight:900;letter-spacing:.04em;
  color:#fff;line-height:.95;margin-bottom:18px;
  font-family:var(--font-display);
}
.slide-lead{font-size:clamp(18px,2.1vw,27px);color:#fff;font-weight:400;letter-spacing:.02em;font-style:italic}
.slide-sub{margin-top:8px;font-size:clamp(13px,1.3vw,16px);color:rgba(255,255,255,.78);letter-spacing:.08em}
.slide-cta{display:flex;gap:14px;margin-top:34px}

.dots{
  position:absolute;left:50%;bottom:34px;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;z-index:4;
}
.dots button{
  width:26px;height:3px;padding:0;border:0;border-radius:2px;cursor:pointer;
  background:rgba(255,255,255,.4);
  transition:background .3s var(--ease),width .35s var(--ease);
  animation:dotActive 21s infinite;   /* A 模式：与轮播同步 */
}
.dots button:nth-child(2){animation-delay:7s}
.dots button:nth-child(3){animation-delay:14s}
@keyframes dotActive{
  0%,6.9%{background:rgba(255,255,255,.4)}
  7%,31%{background:#fff;width:38px}
  32%,100%{background:rgba(255,255,255,.4);width:26px}
}
/* B 模式：状态由 .is-active 驱动 */
.hero.is-js .dots button{animation:none}
.hero.is-js .dots button.is-active{background:#fff;width:38px}
.hero .dots button:hover{background:rgba(255,255,255,.78)}

/* 左右切换箭头 */
.hero-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:52px;height:52px;border-radius:50%;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:#fff;border:1px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.12);backdrop-filter:blur(4px);
  opacity:0;transition:opacity .3s var(--ease),background .3s,color .3s,border-color .3s;
}
.hero:hover .hero-nav,.hero-nav:focus-visible{opacity:1}
.hero-nav:hover{background:#fff;color:var(--ink);border-color:#fff}
.hero-nav.prev{left:3%}
.hero-nav.next{right:3%}
/* 触屏设备没有 hover，直接常显 */
@media (hover:none){ .hero-nav{opacity:1} }

.scroll-hint{
  position:absolute;left:50%;bottom:70px;transform:translateX(-50%);z-index:3;
  color:rgba(255,255,255,.75);animation:bob 2.2s infinite;
}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* ============ 通用按钮 ============ */
.btn{
  display:inline-block;padding:13px 38px;font-size:14px;letter-spacing:.14em;
  border-radius:var(--radius);transition:all .3s var(--ease);cursor:pointer;
}
.btn-solid{background:var(--accent);color:#fff;border:1px solid var(--accent)}
.btn-solid:hover{background:var(--accent-dk);border-color:var(--accent-dk);transform:translateY(-2px)}
.btn-ghost{color:#fff;border:1px solid rgba(255,255,255,.6)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.12)}
.btn-line{color:var(--ink);border:1px solid #cfcfcf;background:transparent}
.btn-line:hover{border-color:var(--ink);background:var(--ink);color:#fff}

/* ============ 通用版块 ============ */
.section{padding:96px 0}
.section-soft{background:var(--bg-soft)}
.section-head{text-align:center;margin-bottom:52px}
.section-head.sub{margin-top:88px}
.section-en{
  font-size:12px;letter-spacing:.5em;color:var(--accent);text-transform:uppercase;
  margin-bottom:10px;
}
.section-title{font-size:clamp(24px,3vw,34px);font-weight:600;letter-spacing:.06em}
.section-desc{margin-top:14px;color:var(--muted);font-size:14.5px}

/* —— 产品分类 —— */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-bottom:44px}
.cat-card{
  position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:var(--radius);
  background:#ddd;display:block;
}
.cat-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.cat-card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.55) 100%);
}
.cat-card:hover img{transform:scale(1.06)}
.cat-name{
  position:absolute;left:20px;bottom:16px;z-index:2;
  color:#fff;font-size:18px;font-weight:600;letter-spacing:.08em;
  font-family:var(--font-display);
}

/* —— 新品预览 —— */
.new-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-bottom:44px}
.new-card .pic{aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius);background:#eee}
.new-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.new-card:hover img{transform:scale(1.05)}
.new-card h3{
  margin-top:18px;text-align:center;font-size:17px;letter-spacing:.08em;
  border-bottom:1px solid transparent;display:inline-block;
}
.new-card:hover h3{color:var(--accent)}
.new-card h3 i{font-style:normal;font-weight:400;color:var(--muted);font-size:14px;margin-left:6px}
.new-card{text-align:center}

/* —— 明星产品 —— */
.star-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.star-card{overflow:hidden;border-radius:var(--radius);aspect-ratio:16/10;background:#eee}
.star-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.star-card:hover img{transform:scale(1.04)}
.star-text{max-width:760px;margin:40px auto 0;text-align:center}
.star-text h3{font-size:clamp(19px,2.2vw,25px);margin-bottom:16px}
.star-text p{color:var(--text);font-size:14.5px}
.star-text .btn{margin-top:26px}

/* —— 第三屏：项目案例 横向手风琴（通栏 100%，悬停/点击展开） —— */
.cases-accordion{
  display:flex;width:100%;
  height:clamp(440px,72vh,720px);
  background:#0f0f0f;overflow:hidden;
}
.acc-panel{
  position:relative;flex:1 1 0;min-width:0;overflow:hidden;
  background:#0f0f0f;
  cursor:pointer;
  transition:flex-grow .8s cubic-bezier(.22,.61,.36,1);
}
.acc-panel.is-active{flex-grow:4.4}
.acc-panel:focus-within{box-shadow:inset 0 0 0 3px var(--accent)}

.acc-hit{position:absolute;inset:0;z-index:2;border:0;background:transparent;cursor:pointer}

.acc-panel img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.55) brightness(.7);
  transition:transform 1.2s cubic-bezier(.22,.61,.36,1),filter .6s var(--ease);
}
.acc-panel.is-active img{transform:scale(1.04);filter:grayscale(0) brightness(.94)}

.acc-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(6,6,6,.88) 0%,rgba(6,6,6,.42) 40%,rgba(6,6,6,0) 74%);
}

/* 收起态：竖排标题 */
.acc-vert{
  position:absolute;z-index:3;left:50%;bottom:36px;transform:translateX(-50%);
  writing-mode:vertical-rl;
  font-size:11.5px;letter-spacing:.22em;color:#fff;white-space:nowrap;
  text-transform:uppercase;font-weight:500;font-family:var(--font-display);
  text-shadow:0 2px 14px rgba(0,0,0,.75);pointer-events:none;
  transition:opacity .35s var(--ease);
}
/* 展开态：横向文案 */
.acc-body{
  position:absolute;z-index:3;left:clamp(26px,4vw,66px);right:clamp(26px,4vw,66px);
  bottom:clamp(32px,5vh,58px);color:#fff;
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .4s .16s var(--ease),transform .7s .16s cubic-bezier(.22,.61,.36,1);
}
.acc-body b{display:block;font-size:clamp(21px,2.1vw,32px);font-weight:600;letter-spacing:.06em;font-family:var(--font-display)}
.acc-body i{
  display:block;margin-top:11px;font-style:normal;
  font-size:13.5px;letter-spacing:.2em;color:rgba(255,255,255,.68);
}
.acc-more{
  display:inline-block;margin-top:24px;pointer-events:auto;
  font-size:13px;letter-spacing:.22em;color:#fff;
  padding-bottom:5px;border-bottom:1px solid rgba(255,255,255,.5);
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.acc-more:hover{color:var(--accent);border-bottom-color:var(--accent)}

.acc-panel.is-active .acc-vert{opacity:0}
.acc-panel.is-active .acc-body{opacity:1;transform:none}

/* 桌面端：鼠标悬停即展开（触屏设备不触发）。特定性均比 .is-active 高一档，
   所以悬停时「选中项」会让位给「悬停项」，不会两块同时展开。 */
@media (hover:hover) and (min-width:1081px){
  .cases-accordion:hover .acc-panel{flex-grow:1}
  .cases-accordion:hover .acc-panel:hover{flex-grow:4.4}
  .cases-accordion:hover .acc-panel img{transform:none;filter:grayscale(.55) brightness(.7)}
  .cases-accordion:hover .acc-panel:hover img{transform:scale(1.04);filter:grayscale(0) brightness(.94)}
  .cases-accordion:hover .acc-panel .acc-vert{opacity:1}
  .cases-accordion:hover .acc-panel:hover .acc-vert{opacity:0}
  .cases-accordion:hover .acc-panel .acc-body{opacity:0;transform:translateY(16px)}
  .cases-accordion:hover .acc-panel:hover .acc-body{opacity:1;transform:none}
}
.center .btn{margin-top:44px}

/* —— 解决方案：6 列混合栅格（.mix-grid 为通用栅格，供解决方案板块使用） —— */
.mix-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:22px}
.mix-item{
  position:relative;overflow:hidden;border-radius:var(--radius);
  aspect-ratio:4/3;background:#ddd;display:block;
}
.mix-item.span3{grid-column:span 3}
.mix-item.span2{grid-column:span 2}
.mix-item img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.mix-item:hover img{transform:scale(1.06)}
.mix-mask{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-start;
  gap:4px;
  background:rgba(12,12,12,.44);
  color:#fff;
  text-align:left;
  padding: 40px;
  transition:background .35s var(--ease);
}
.mix-item:hover .mix-mask{background:rgba(12,12,12,.58)}
.mix-mask b{font-size:clamp(17px,1.8vw,23px);font-weight:600;letter-spacing: .05em;}
.mix-mask i{font-style:normal;font-size:12.5px;letter-spacing:.14em;opacity:.78;text-transform:uppercase}

/* —— 新闻资讯 —— */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-bottom:8px}
.news-card .pic{aspect-ratio:16/10;overflow:hidden;border-radius:var(--radius);background:#eee}
.news-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.news-card:hover img{transform:scale(1.05)}
.news-body{padding:20px 2px 0}
.news-card h3{
  font-size:16.5px;font-weight:500;line-height:1.6;min-height:3.2em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.news-card:hover h3{color:var(--accent)}
.news-card .meta{
  margin-top:14px;display:flex;align-items:center;justify-content:space-between;
  font-size:12.5px;color:var(--muted);
}
.news-card .tag{
  border:1px solid var(--line);border-radius:999px;padding:2px 12px;
  font-size:12px;color:var(--text);
}

/* ============ 第六屏：联系我们 ============ */
/* 联系我们上方的视频版块：内容宽度（80%）、圆角、上下留白，静音循环自动播放（无控件）
   上方留白来自上一屏（news）自身的下内边距，故此处只补下方间距，视觉上下对称 */
.video-band{
  padding:0 0 88px;
  background:var(--bg-soft);
}
.video-band-frame{
  position:relative;
  width:92%;max-width:none;margin-inline:auto;   /* 宽度 92% */
  height:auto;aspect-ratio:1774/700;             /* 固定比例 1774:700 */
  overflow:hidden;border-radius:12px;background:#0b0b0b;
}
.video-band-media{
  display:block;width:100%;height:100%;
  object-fit:cover;               /* 铺满并裁切，不留黑边 */
  pointer-events:none;            /* 装饰性背景视频，不拦截点击 */
}

.contact{background:#141414;color:#cfcfcf;padding:100px 0}
.contact-wrap{display:grid;grid-template-columns:5fr 6fr;gap:64px;align-items:start}
.contact-en{font-size:clamp(30px,4vw,46px);font-weight:900;letter-spacing:.06em;color:#fff;font-family:var(--font-display);margin-bottom:8px}
.contact-info h2{color:#fff;font-size:20px;letter-spacing:.3em;margin-bottom:34px}
.contact-info ul{display:grid;gap:18px}
.contact-info li{display:flex;flex-direction:column;border-left:2px solid var(--accent);padding-left:16px}
.contact-info li span{font-size:12.5px;color:#8f8f8f;letter-spacing:.14em}
.contact-info li strong{color:#fff;font-weight:500;font-size:16px;letter-spacing:.04em}

.contact-form{background:#1b1b1b;border:1px solid #2d2d2d;border-radius:var(--radius);padding:40px 38px;color:#cfcfcf}
.contact-form h3{font-size:20px;letter-spacing:.14em;margin-bottom:26px;color:#fff}
.contact-form label{display:block;font-size:13px;color:#9a9a9a;margin-bottom:18px;letter-spacing:.06em}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.contact-form input,.contact-form textarea{
  display:block;width:100%;margin-top:8px;padding:11px 2px;
  border:0;border-bottom:1px solid #3a3a3a;outline:none;background:transparent;
  font-size:15px;color:#fff;font-family:inherit;
  transition:border-color .25s;
}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#6f6f6f}
.contact-form input:-webkit-autofill{-webkit-text-fill-color:#fff;-webkit-box-shadow:0 0 0 1000px #1b1b1b inset;transition:background-color 9999s}
.contact-form input:focus,.contact-form textarea:focus{border-bottom-color:var(--accent)}
.contact-form textarea{resize:vertical}
.contact-form .btn{width:100%;margin-top:6px}

/* ============ 网站底部 ============ */
.site-footer{background:#0d0d0d;color:#8f8f8f;font-size:13.5px}
.footer-top{
  display:grid;grid-template-columns:3.5fr 6.5fr;gap:52px;
  padding:64px 0 48px;border-bottom:1px solid #232323;
}

/* 品牌 logo 图片：反相 + screen 混合，让黑字白底在深色页脚上呈现为纯白字 */
.footer-logo-img{
  width:156px;height:auto;
}
/* 海外常用社交入口（href 先占位，拿到官方主页地址后替换） */
.footer-social{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.footer-social a{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid #2c2c2c;border-radius:50%;color:#b3b3b3;transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);}
.footer-social a:hover{color:#fff;border-color:var(--accent);background:var(--accent)}
.footer-social svg{width:17px;height:17px;fill:currentColor}
.footer-social img{ max-width: 18px;fill:currentColor}

/* 页脚导航：分组 + 子项的二级结构 */
.footer-nav > ul{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:32px 22px}
.footer-nav .fnav-t{
  display:block;margin-bottom:14px;color:#fff;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;
}
.footer-nav .fnav-t:hover{color:var(--accent)}
.footer-nav ul ul{display:flex;flex-direction:column;gap:10px}
.footer-nav ul ul a{color:#8f8f8f;font-size:13.5px;letter-spacing:.02em}
.footer-nav ul ul a:hover{color:#fff}
/* 末列：Projects / Service / Sustainability / Showroom / Contact Us
   这 5 项是一级栏目，不再归到 Explore 之下，但在同一列里竖排 */
.footer-nav .fnav-flat{display:flex;flex-direction:column;align-items:flex-start;gap:15px}
.footer-nav .fnav-flat .fnav-t{margin-bottom:0}

.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 0;color:#6d6d6d;font-size:12.5px;letter-spacing:.04em;
}
.banav{color:#9a9a9a;}
.banav:hover{color:#fff}
.banav:not(:last-child):after{display: inline-block;content: '';width: 1px;height: 0.12rem;background: rgba(255,255,255,0.2);margin: 0 0.15rem;vertical-align: middle;}

.to-top{color:#9a9a9a;letter-spacing:.1em}
.to-top:hover{color:#fff}

/* ============ 右侧悬浮快捷入口 ============ */
.float-bar{
  position:fixed;right:0;top:50%;transform:translateY(-50%);
  z-index:90;display:flex;flex-direction:column;align-items:flex-end;gap:8px;
}
.float-btn{
  display:flex;align-items:center;justify-content:flex-end;
  width:46px;height:46px;padding:0 13px;
  background:#141414;color:#fff;border:0;cursor:pointer;
  font-family:inherit;border-radius:6px 0 0 6px;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  transition:width .32s var(--ease),background .25s var(--ease);
}
.float-btn svg{width:20px;height:20px;flex:0 0 auto}
.float-btn:hover{width:134px;background:var(--accent)}
/* 文字标签：默认收成 0 宽度，悬停时向左展开 */
.float-label{
  max-width:0;overflow:hidden;opacity:0;white-space:nowrap;
  font-size:12.5px;letter-spacing:.06em;
  transition:max-width .32s var(--ease),opacity .25s var(--ease),padding-right .32s var(--ease);
}
.float-btn:hover .float-label{max-width:112px;opacity:1;padding-right:9px}
/* 置顶按钮默认收起在右侧屏外，滚动一段距离后滑出 */
.float-top{
  opacity:0;visibility:hidden;transform:translateX(100%);
  transition:opacity .3s var(--ease),visibility .3s,transform .3s var(--ease),
             width .32s var(--ease),background .25s var(--ease);
}
.float-top.is-show{opacity:1;visibility:visible;transform:none}

/* =========================================================
   响应式自适应：平板 / 手机
   ========================================================= */
/* 导航在 1140px 以下切为抽屉：左 7 + 右 5 共 12 项的宽栏结构放不下 */
@media (max-width:1140px){
  .site-header .container{width:90%}

  /* 窄屏页头只剩：汉堡 / 居中 Logo / 搜索 */
  .burger{display:flex;grid-column:1;justify-self:start}
  .search-btn-mobile{display:flex;grid-column:3;justify-self:end}

  .main-nav{
    /* 注意：不能用 position:fixed —— header 滚动后带 backdrop-filter，
       会成为 fixed 后代的 containing block，导致抽屉高度塌陷。
       header 本身是 fixed，抽屉用 absolute 挂在它下面即可全高跟随。 */
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;top:100%;right:0;
    height:calc(100vh - var(--header-h));
    height:calc(100dvh - var(--header-h));
    width:min(340px,86vw);background:#fff;z-index:99;
    padding:18px 26px 40px;overflow-y:auto;
    box-shadow:-12px 0 34px rgba(0,0,0,.12);
    transform:translateX(100%);transition:transform .35s var(--ease);
  }
  #navToggle:checked ~ .site-header .main-nav{transform:translateX(0)}

  /* 抽屉打开：页面遮罩 + 汉堡变 ✕ + 锁定背景滚动 */
  .nav-backdrop{
    position:fixed;inset:0;z-index:98;
    background:rgba(10,10,10,.45);
    opacity:0;visibility:hidden;cursor:pointer;
    transition:opacity .3s var(--ease),visibility .3s;
  }
  #navToggle:checked ~ .nav-backdrop{opacity:1;visibility:visible}
  #navToggle:checked ~ .site-header .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  #navToggle:checked ~ .site-header .burger span:nth-child(2){opacity:0}
  #navToggle:checked ~ .site-header .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  /* 锁定背景滚动：锁在根滚动元素上（只锁 body 在部分浏览器会留下可滚动的 html） */
  html:has(#navToggle:checked),body:has(#navToggle:checked){overflow:hidden}

  /* 左栏一级项 */
  .nav-list{display:block}
  .nav-list > li > a{padding:15px 4px;font-size:16px;letter-spacing:0;border-bottom:1px solid var(--line);color:var(--ink);}
  .nav-list > li > a.active{ color: var(--accent);}
  .nav-list > li.has-sub > a,
  .nav-right .has-sub > .nav-link{position:relative;padding-right:24px}
  .nav-list > li.has-sub > a::after,
  .nav-right .has-sub > .nav-link::after{content:"";position:absolute;right:4px;top:50%;margin:0;width:7px;height:7px;opacity:1;display:block;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-70%) rotate(45deg);transition:transform .25s var(--ease);}
  .nav-list > li.has-sub.open > a::after,
  .nav-right .has-sub.open > .nav-link::after{transform:translateY(-30%) rotate(-135deg)}

  /* 右栏在抽屉里成为第二组竖排链接 */
  .nav-right{display:block;/* margin-top:16px;padding-top:10px;border-top:1px solid #e8e5e0; */}
  .nav-right .nav-link{display:block;padding:15px 4px;font-size:16px;letter-spacing:0;border:0;border-bottom:1px solid var(--line);border-radius:0;color:var(--ink);}
  .nav-right .nav-link.active{ color: var(--accent);}
  .nav-right .has-sub > .nav-link{padding-right:24px}
  .nav-right .search-btn{display:none}      /* 搜索入口已在页头右侧 */
  .nav-right .lang-switch{margin-top:20px;width:max-content;border-color:#d8d5d0}
  /* 抽屉是白底：未选中的语言按钮不能用页头透出态的白色系 */
  .lang-btn{font-size:14px;padding:7px 18px;color:var(--muted)}
  .lang-btn:hover{color:var(--ink)}

  .sub-menu{
    position:static;transform:none;opacity:1;visibility:visible;
    border:0;box-shadow:none;border-radius:0;
    padding:0 0 10px 14px;display:none;
  }
  /* 移动端子菜单只认 .open 一个状态，由 JS 切换。
     不能再留 :hover / :focus-within —— 触屏点击会把 :hover「粘住」，
     链接获得焦点又会让 :focus-within 常驻，两者都会让子菜单点开后收不起来。 */
  .has-sub.open > .sub-menu{display:block;margin-left:2px;border-left:1px solid var(--line)}
  .sub-menu a{text-align:left;padding:9px 0;font-size:14px}

  /* 悬浮按钮在窄屏收紧一点，避免压住内容 */
  .float-bar{gap:6px}
  .float-btn{width:42px;height:42px;padding:0 11px}
  .float-btn svg{width:18px;height:18px}
  .float-btn:hover{width:118px}
}

@media (max-width:1080px){
  :root{--header-h:64px}
  .container{width:90%}
  .logo{height:22px}
  .logo-img{height:22px}

  .section{padding:72px 0}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .new-grid,.news-grid{grid-template-columns:repeat(2,1fr)}
  .mix-item.span3{grid-column:span 3}
  .mix-item.span2{grid-column:span 3}

  /* 案例手风琴：窄屏改为竖向折叠 */
  .cases-accordion{flex-direction:column;height:auto}
  .acc-panel{
    flex:0 0 auto;height:94px;
    transition:height .6s var(--ease);
  }
  .acc-panel.is-active{height:clamp(320px,58vh,470px)}
  .acc-panel img{filter:brightness(.78)}
  .acc-panel.is-active img{transform:scale(1.03);filter:brightness(.95)}
  .acc-scrim{background:linear-gradient(90deg,rgba(6,6,6,.84) 0%,rgba(6,6,6,.34) 58%,rgba(6,6,6,0) 100%)}
  .acc-panel.is-active .acc-scrim{background:linear-gradient(to top,rgba(6,6,6,.88) 0%,rgba(6,6,6,.4) 46%,rgba(6,6,6,0) 80%)}
  .acc-vert{
    writing-mode:horizontal-tb;left:24px;right:24px;top:50%;bottom:auto;
    transform:translateY(-50%);font-size:15px;letter-spacing:.14em;
  }
  .acc-body{left:24px;right:24px;bottom:28px}
  .acc-body b{font-size:20px}
  .acc-body i{margin-top:8px;font-size:12.5px;letter-spacing:.16em}
  .acc-more{margin-top:16px;font-size:12px}
  .contact-wrap{grid-template-columns:1fr;gap:44px}
  /* 视频版块：窄屏保持内容宽度，高度改为 16:9，避免又窄又高 */
  .video-band{padding-bottom:72px}
  .video-band-frame{height:auto;aspect-ratio:16/9}
  .footer-top{grid-template-columns:1fr;gap:44px;padding:52px 0 40px}
  .footer-nav > ul{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 20px}
}

@media (max-width:640px){
  .hero{min-height:520px}
  .display{font-size:clamp(52px,17vw,88px)}
  .slide-cta{flex-wrap:wrap}
  /* 小屏：箭头缩小、圆点下移，避免与文字/箭头挤在一起 */
  .hero-nav{width:40px;height:40px;top:auto;bottom:78px;transform:none}
  .hero-nav.prev{left:6%}
  .hero-nav.next{right:6%}
  .dots{bottom:26px;gap:8px}
  .dots button{width:20px}
  .hero.is-js .dots button.is-active{width:30px}
  .scroll-hint{display:none}
  .section{padding:58px 0}
  .video-band{padding-bottom:58px}
  .section-head{margin-bottom:36px}
  .section-head.sub{margin-top:60px}
  .cat-grid{gap:14px}
  .cat-name{font-size:16px;left:14px;bottom:12px}
  .new-grid,.news-grid{grid-template-columns:1fr}
  .star-grid{grid-template-columns:1fr}
  .mix-item,.mix-item.span2,.mix-item.span3{grid-column:span 6}
  .form-row{grid-template-columns:1fr}
  .contact-form{padding:30px 22px}
  .footer-bottom{flex-direction:column;gap:10px}
  .footer-nav > ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* 手机上搜索窗口：面板收窄内边距，输入框独占一行，Search 与关闭键同行 */
  .search-modal{padding:clamp(46px,11vh,104px) 16px 24px}
  .search-panel{padding:20px;border-radius:10px}
  .search-form-icon{display:none}
  .search-form{flex-wrap:wrap;gap:12px}
  .search-form input{flex:1 1 100%;font-size:16px}
  .search-form button{flex:1 1 auto;padding:11px 24px;letter-spacing:.14em}
  .search-hint{padding:0}
}

/* 减少动效偏好 */
@media (prefers-reduced-motion:reduce){
  .slide,.dots button,.scroll-hint{animation:none}
  .slide:nth-child(1){opacity:1}
  .hero.is-js .slide{transition:none}
  .hero.is-js .slide img,
  .hero.is-js .slide.is-active img{transition:none;transform:none}
  .hero.is-js .slide-inner{opacity:1;transform:none;transition:none}
  .acc-panel,.acc-panel img,.acc-vert,.acc-body{transition:none}
  .scroll-hint{display:none}
  html{scroll-behavior:auto}
}

/* =========================================================
   顶部产品导航 Mega Menu（Office Systems / Seating /
   Partitions / Acoustic Pods 四个一级项共用结构）
   布局：左侧「CATEGORIES + 一级类别 + 二级列表」，
         右侧「图片 + 标题」产品卡，默认 8 个，点二级切换
   ========================================================= */

/* 一级项加个小箭头，提示可展开（样式与右栏 About 一致） */
.nav-list .has-mega > a::after{
  content:"";display:inline-block;width:4.5px;height:4.5px;margin-left:5px;
  border-right:1.3px solid currentColor;border-bottom:1.3px solid currentColor;
  transform:translateY(-2px) rotate(45deg);opacity:.66;
}

/* 透明桥：一级链接在页头里垂直居中，链接底边与面板顶边之间
   隔着约 20px 的页头空白——鼠标往下滑经过这里会触发 mouseleave，
   面板还没碰到就收起了。用一段透明的悬停区把两者接起来。 */
@media (min-width:1141px){
  .nav-list .has-mega::before{
    content:"";position:absolute;left:-8px;right:-8px;top:100%;height:38px;
  }
}

/* 通栏面板：挂在 li 内，用 fixed 铺满视口宽度、贴在页头下沿。
   未滚动时相对视口定位（页头就在顶部）；
   滚动后页头带 backdrop-filter 成为 containing block，
   坐标同样落在页头底沿，两种状态表现一致。 */
.mega-menu{
  position:fixed;top:var(--header-h);left:0;right:0;z-index:99;
  background:#fff;color:var(--text);
  border-top:1px solid var(--line);
  box-shadow:0 30px 60px rgba(0,0,0,.14);
  opacity:0;visibility:hidden;transform:translateY(12px);
  height: calc(100vh - var(--header-h));
  overflow-y: scroll;
  /* 收起态不拦截鼠标：否则淡出期间面板仍悬在页面上方，
     会出现「移走收不回去 / 两层面板同时打开」 */
  pointer-events:none;
}
/* 展开由 JS 加 .is-open 控制（互斥，同时只开一个）：
   展开有过渡，收起瞬时完成——淡出期间面板会截获鼠标导致收不回去 */
@media (min-width:1141px){
  .has-mega.is-open .mega-menu,
  .has-mega:focus-within .mega-menu{
    opacity:1;visibility:visible;transform:none;pointer-events:auto;
    transition:opacity .3s var(--ease),transform .3s var(--ease);
  }
}
.mega-inner{
  width:94%;max-width:1680px;margin-inline:auto;
  display:grid;grid-template-columns:230px minmax(0,1fr);
  gap:clamp(28px,3.2vw,72px);
  padding:36px 0 44px;
}

/* 面板右上角关闭按钮：展开时出现，点击收起面板 */
.mega-close{
  position:absolute;top:14px;right:22px;z-index:2;
  width:34px;height:34px;padding:0;
  display:none;align-items:center;justify-content:center;
  border:0;border-radius:50%;background:transparent;color:inherit;
  cursor:pointer;opacity:.6;transition:opacity .2s,background .2s;
}
.mega-close:hover{opacity:1;background:rgba(0,0,0,.06)}
.has-mega.is-open .mega-close,
.has-mega:focus-within .mega-close{display:flex}

/* —— 左栏：类别导航 —— */
.mega-eyebrow{
  font-size:11px;letter-spacing:.4em;color:var(--muted);
  text-transform:uppercase;margin-bottom:16px;
}
.mega-cat{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-weight:600;font-size:17px;
  color:var(--ink);letter-spacing:.02em;margin-bottom:18px;
}
.mega-cat svg{color:var(--muted);transition:transform .25s var(--ease),color .25s var(--ease)}
.mega-cat:hover{color:var(--accent)}
.mega-cat:hover svg{transform:rotate(180deg);color:var(--accent)}
.mega-subs{display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--line);padding-left:0}
.mega-subs li{margin-left:-1px}
.mega-sub{
  display:block;width:100%;text-align:left;
  background:none;border:0;border-left:2px solid transparent;cursor:pointer;
  padding:6px 0 6px 14px;
  font-family:inherit;font-size:13.5px;letter-spacing:.02em;
  color:var(--muted);
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.mega-sub:hover{color:var(--ink)}
.mega-sub.is-active{color:var(--ink);font-weight:600;border-left-color:var(--accent)}

/* —— 右栏：产品卡片网格（默认 8 个，4 列 × 2 行） —— */
.mega-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:30px 22px;align-content:start;
}
.mega-card{display:block;min-width:0}
.mega-card.is-hidden{display:none}
.mega-pic{
  display:block;aspect-ratio:4/3;overflow:hidden;
  background:#f4f3f1;border-radius:var(--radius);
}
.mega-pic img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.mega-card:hover .mega-pic img{transform:scale(1.05)}
.mega-name{
  display:block;margin-top:12px;
  font-size:13.5px;font-weight:600;letter-spacing:.02em;color:var(--ink);
  transition:color .2s var(--ease);
}
.mega-card:hover .mega-name{color:var(--accent)}

/* 窄屏抽屉模式下不渲染面板：4 个一级项保持普通链接直接跳分类页 */
@media (max-width:1140px){
  .mega-menu{display:none}
  .nav-list .has-mega > a::after{display:none}
}

/* 中屏收为 3 列 / 2 列，避免卡片过挤 */
@media (min-width:1141px) and (max-width:1500px){
  .mega-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1141px) and (max-width:1320px){
  .mega-inner{grid-template-columns:200px minmax(0,1fr)}
}

/* 减少动效偏好：下拉直接显隐 */
@media (prefers-reduced-motion:reduce){
  .mega-menu{transition:none;transform:none}
  .mega-pic img{transition:none}
}