/* ============================================================
   SpaceWall 上海格墙 · 官网原型样式
   设计理念：less is more —— 克制的留白、精确的排版、品牌红点缀
   ============================================================ */

:root {
  --sw-red: #c8102e;
  --sw-red-dark: #9e0d24;
  --sw-ink: #16181c;
  --sw-gray: #5c6068;
  --sw-light-gray: #6d7078;   /* 2026-09-04 无障碍：原 #8a8f98 在白底仅 3.25、浅底 3.00，未达 WCAG AA 4.5；加深后白底 4.92 / 浅底 4.58 */
  --sw-bg: #f6f6f4;
  --sw-line: #e4e4e0;
  --sw-white: #ffffff;
  --font-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Songti SC", "STSong", "SimSun", Georgia, serif;
  --container: 1200px;
  --nav-h: 76px;
  /* ↓↓↓ 滚动淡显：四个参数集中在这里，改一个数就能调全站动效 ↓↓↓ */
  --rv-y: 26px;         /* 上浮距离 */
  --rv-dur: .85s;       /* 单个元素淡入时长 */
  --rv-stagger: 100ms;  /* 同组元素错落间隔 */
  --rv-ease: cubic-bezier(.22,.85,.3,1);
  --cap-delay: .45s;    /* 案例封面后，文字说明再浮出来（画龙点睛） */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  color: var(--sw-ink);
  background: var(--sw-white);
  line-height: 1.75;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

img{display:block;max-width:100%;height:auto}
picture{display:contents}

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

ul { list-style: none; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- 顶部导航 ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sw-line);
  transition: box-shadow .3s ease;
}
.nav.scrolled { box-shadow: 0 2px 16px rgba(0,0,0,.06); }

.nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: 40px; width: auto; }
.brand-name { font-size: 17px; font-weight: 700; letter-spacing: .5px; }
.brand-name small { display: block; font-size: 11px; font-weight: 400; color: var(--sw-gray); letter-spacing: 1px; }

.menu { display: flex; align-items: center; gap: 20px; }
.menu a {
  font-size: 15px;
  color: var(--sw-gray);
  padding: 6px 14px;
  border-radius: 999px;
  transition: color .2s ease, background .2s ease;
}
.menu a:hover { color: var(--sw-ink); background: rgba(0,0,0,.05); }
.menu a.active { color: var(--sw-ink); font-weight: 600; background: rgba(0,0,0,.08); }

.menu .cta-btn {
  background: var(--sw-ink);
  color: #fff;
  padding: 9px 22px;
  border-radius: 2px;
  font-size: 14px;
  letter-spacing: 1px;
  transition: background .2s ease;
}
.menu .cta-btn::after { display: none; }
.menu .cta-btn:hover { background: var(--sw-red); color: #fff; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 40px; height: 40px;
  position: relative;
}
.nav-toggle span {
  display: block;
  width: 22px; height: 2px;
  background: var(--sw-ink);
  margin: 5px auto;
  transition: all .25s ease;
}

/* ---------- 通用章节 ---------- */
.section { padding: 108px 0; }
.section-alt { background: var(--sw-bg); }

.sec-head { max-width: 720px; margin-bottom: 64px; }
.sec-head .kicker {
  font-size: 13px;
  letter-spacing: 4px;
  color: var(--sw-red);
  text-transform: uppercase;
  margin-bottom: 18px;
  font-weight: 600;
}
.sec-head h2 { font-size: 38px; font-weight: 700; letter-spacing: 1px; line-height: 1.3; }
.sec-head p { margin-top: 18px; color: var(--sw-gray); font-size: 16px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
  margin-top: var(--nav-h);
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(10,12,16,.88) 0%, rgba(10,12,16,.62) 45%, rgba(10,12,16,.28) 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  width: 100%;
}
.hero-tag {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 4px;
  color: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.35);
  padding: 7px 18px;
  border-radius: 2px;
  margin-bottom: 34px;
}
.hero h1 {
  font-size: 54px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 2px;
  max-width: 780px;
}
.hero h1 .red { color: #ff4d5e; }
.hero .sub {
  margin-top: 26px;
  font-size: 18px;
  color: rgba(255,255,255,.82);
  max-width: 640px;
  font-weight: 300;
}
.hero-cta { margin-top: 44px; display: flex; gap: 18px; flex-wrap: wrap; }
.btn {
  display: inline-block;
  padding: 14px 38px;
  font-size: 15px;
  letter-spacing: 2px;
  border-radius: 2px;
  border: none;
  cursor: pointer;
  transition: all .25s ease;
}
.btn-solid { background: var(--sw-red); color: #fff; }
.btn-solid:hover { background: var(--sw-red-dark); }
.btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.55); }
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.btn-dark { background: var(--sw-ink); color: #fff; }
.btn-dark:hover { background: var(--sw-red); }

.hero-scroll {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(255,255,255,.7);
  font-size: 12px;
  letter-spacing: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.hero-scroll::after {
  content: "";
  width: 1px; height: 44px;
  background: linear-gradient(rgba(255,255,255,.7), transparent);
}

/* ---------- 数据条 ---------- */
.stats { border-bottom: 1px solid var(--sw-line); }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.stat {
  padding: 56px 32px;
  text-align: center;
  border-right: 1px solid var(--sw-line);
}
.stat:last-child { border-right: none; }
.stat .num {
  font-size: 52px;
  font-weight: 700;
  color: var(--sw-ink);
  line-height: 1.1;
  letter-spacing: -1px;
}
.stat .num em { font-style: normal; font-size: 26px; color: var(--sw-red); }
.stat .label { margin-top: 10px; color: var(--sw-gray); font-size: 14px; letter-spacing: 1px; }

/* ---------- 首页 About 简介 ---------- */
.intro-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 72px;
  align-items: center;
}
.intro-grid .big-words {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 1px;
}
.intro-grid .big-words .red { color: var(--sw-red); }
.intro-grid .desc { margin-top: 26px; color: var(--sw-gray); font-size: 16px; }
.intro-list { margin-top: 30px; display: grid; gap: 14px; }
.intro-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--sw-ink);
  font-size: 15px;
}
.intro-list li::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--sw-red);
  margin-top: 10px;
  flex-shrink: 0;
  border-radius: 50%;
}
.intro-media { position: relative; }
.intro-media img { width: 100%; height: 460px; object-fit: cover; }
.intro-media .tag {
  position: absolute;
  left: -18px; bottom: 28px;
  background: var(--sw-ink);
  color: #fff;
  font-size: 13px;
  letter-spacing: 2px;
  padding: 12px 22px;
}

/* ---------- 产品卡片 ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.product-card {
  background: var(--sw-white);
  border: 1px solid var(--sw-line);
  padding: 42px 36px;
  transition: all .3s ease;
  position: relative;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
  border-color: #cfcfc9;
}
.product-card .no {
  font-size: 13px;
  color: var(--sw-light-gray);
  letter-spacing: 3px;
}
.product-card h3 { margin-top: 14px; font-size: 24px; font-weight: 700; }
.product-card h3 .en {
  display: block;
  font-size: 12px;
  color: var(--sw-light-gray);
  letter-spacing: 2px;
  margin-top: 8px;
  font-weight: 400;
}
.product-card p { margin-top: 16px; color: var(--sw-gray); font-size: 15px; }
.product-card .tag-line {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--sw-line);
  font-size: 13px;
  color: var(--sw-red);
  letter-spacing: 1px;
}
.product-card .fire {
  position: absolute;
  top: 26px; right: 26px;
  font-size: 11px;
  letter-spacing: 1px;
  background: var(--sw-red);
  color: #fff;
  padding: 4px 10px;
  border-radius: 2px;
}

/* ---------- 案例网格 ---------- */
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.case-item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  cursor: pointer;
}
.case-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.case-item:hover img { transform: scale(1.06); }
.case-item .mask {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,0) 55%);
  display: flex;
  align-items: flex-end;
  padding: 26px;
  opacity: 1;
  transition: opacity .3s ease;
}
.case-item .mask h4 { color: #fff; font-size: 19px; font-weight: 600; letter-spacing: 1px; }
.case-item .mask p { color: rgba(255,255,255,.75); font-size: 13px; margin-top: 4px; }

/* ---------- 荣誉区 ---------- */
.honor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.honor-card {
  border: 1px solid var(--sw-line);
  padding: 40px 34px;
  background: var(--sw-white);
  transition: all .3s ease;
}
.honor-card:hover { box-shadow: 0 14px 34px rgba(0,0,0,.07); }
.honor-card--muted { background: transparent; border-style: dashed; border-color: var(--sw-line); }
.honor-card--muted:hover { box-shadow: none; }
.honor-card .icon { font-size: 34px; }
.honor-card h3 { margin-top: 18px; font-size: 18px; font-weight: 700; }
.honor-card p { margin-top: 12px; color: var(--sw-gray); font-size: 14px; }
.honor-card .date {
  display: inline-block;
  margin-top: 16px;
  font-size: 12px;
  color: var(--sw-red);
  letter-spacing: 1px;
  border: 1px solid rgba(200,16,46,.35);
  padding: 3px 10px;
  border-radius: 2px;
}

/* ---------- CTA ---------- */
.cta-band {
  background: var(--sw-ink);
  color: #fff;
  text-align: center;
  padding: 110px 32px;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sw-red) 0%, transparent 70%);
}
.cta-band h2 { font-size: 36px; font-weight: 700; letter-spacing: 2px; }
.cta-band p { margin-top: 18px; color: rgba(255,255,255,.7); font-size: 16px; }
.cta-band .hero-cta { justify-content: center; }

/* ---------- 页脚 ---------- */
.footer { background: #101114; color: #9a9ea6; padding: 76px 0 0; }
.footer-grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: 56px;
  padding-bottom: 60px;
}
.footer h5 {
  color: #fff;
  font-size: 15px;
  letter-spacing: 2px;
  margin-bottom: 22px;
  font-weight: 600;
}
.footer p, .footer li { font-size: 14px; line-height: 2.1; }
.footer .brand img { height: 34px; margin-bottom: 18px;width:auto;}
.footer a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  max-width: var(--container);
  margin: 0 auto;
  padding: 22px 32px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: #7d8188;   /* 2026-09-04 无障碍：原 #6d7178 在深底 #101114 上仅 3.85，未达 AA 4.5；调亮后 4.83 */
}

/* ---------- 内页页头：深墨块 ----------
   使用者：产品系列、OS 本源系统、关于我们 三页。
   2026-09-03 慧民定：这三页页头保持原样，不做统一改动。   */
.page-hero {
  position: relative;
  overflow: hidden;
  margin-top: var(--nav-h);
  background: var(--sw-ink);
  padding: 96px 0 88px;
  color: #fff;
}
/* 右上角一点红：跟品牌色呼应，不抢字 */
.page-hero::before {
  content: "";
  position: absolute;
  top: -180px;
  right: -120px;
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, rgba(200,16,46,.35) 0%, transparent 70%);
  pointer-events: none;
}
.page-hero .kicker {
  display: block;
  font-size: 13px;
  letter-spacing: 4px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 18px;
  color: #ff6474;
}
.page-hero h1 {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #fff;
}
.page-hero p {
  margin-top: 16px;
  max-width: 760px;
  font-size: 16px;
  color: rgba(255,255,255,.72);
}

/* ---------- 页头：浅底 + 悬浮卡片 ----------
   使用者：经典案例一页（2026-09-03 慧民定的新排版：只放标题 + 一句话）。
   产品系列 / OS 本源系统 / 关于我们 用上面的深墨块（.page-hero）；
   首页 / 循环利用 / 公司动态 用深底全屏图（.hero）。三套并存，各管各的。   */
.page-head {
  margin-top: var(--nav-h);
  background: var(--sw-bg);
  padding: 48px 0 44px;
}
.ph-card {
  background: var(--sw-white);
  border: 1px solid rgba(22, 24, 28, .06);
  border-radius: 18px;
  box-shadow:
    0 26px 60px -30px rgba(22, 24, 28, .26),
    0 6px 18px rgba(22, 24, 28, .05);
  padding: 38px 46px 36px;
  transition: box-shadow .45s var(--rv-ease), transform .45s var(--rv-ease);
}
.ph-card:hover {
  box-shadow:
    0 34px 74px -30px rgba(22, 24, 28, .30),
    0 8px 22px rgba(22, 24, 28, .06);
  transform: translateY(-2px);
}
.ph-card .kicker {
  display: block;
  font-size: 13px;
  letter-spacing: 4px;
  color: var(--sw-red);
}
.ph-card h1 {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: 2px;
}
.cc-intro {
  margin-top: 16px;
  color: var(--sw-gray);
  max-width: 760px;
  font-size: 16px;
}

/* ---------- 项目实景：一张接一张 ----------
   慧民定：不要缩略图条、不要小标题，页头下面直接就是照片 */
.shots-section { padding-top: 40px; }
.shot-tail { margin-top: 56px; text-align: center; color: var(--sw-gray); font-size: 14px; }

/* ---------- 服务客户 LOGO 带（照片区之后）---------- */
.clients-band { background: var(--sw-bg); padding: 84px 0 92px; }
.band-note {
  margin: 0 0 34px;
  text-align: center;
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--sw-light-gray);
}

/* LOGO 阵列：深色剪影，5 列 × 5 排 */
.clients-logos {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 34px 24px;
  align-items: center;
  margin: 0;
  padding: 0;
}
.clients-logos li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 30px;
}
/* width 用 <img> 上的 width/height 属性（等比装框后的 CSS 像素尺寸），
   这里只写 height:auto + max-width —— 一旦写 width:auto，
   浏览器会改用 3 倍图的原始像素（如 312px）去算，LOGO 就被撑大了。 */
.clients-logos img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  opacity: .68;
  transition: opacity .35s ease, transform .35s var(--rv-ease);
}
.clients-logos img:hover { opacity: 1; transform: translateY(-2px); }

/* ---------- 技术指标 ---------- */
.tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tech-cell {
  border: 1px solid var(--sw-line);
  padding: 38px 32px;
  background: var(--sw-white);
}
.tech-cell .big { font-size: 40px; font-weight: 700; color: var(--sw-red); }
.tech-cell .big em { font-style: normal; font-size: 20px; }
.tech-cell h3 { margin-top: 12px; font-size: 16px; font-weight: 700; }
.tech-cell p { margin-top: 8px; color: var(--sw-gray); font-size: 14px; }

/* ---------- 时间线 ---------- */
.timeline { position: relative; padding-left: 40px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 10px; top: 6px; bottom: 6px;
  width: 1px;
  background: var(--sw-line);
}
.tl-item { position: relative; padding: 0 0 44px 30px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: "";
  position: absolute;
  left: -33px; top: 8px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--sw-white);
  border: 3px solid var(--sw-red);
}
.tl-item .year { font-size: 14px; letter-spacing: 2px; color: var(--sw-red); font-weight: 600; }
.tl-item h3 { margin-top: 6px; font-size: 19px; font-weight: 700; }
.tl-item p { margin-top: 8px; color: var(--sw-gray); font-size: 15px; max-width: 640px; }

/* ---------- 特性列表 ---------- */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 30px;
}
.feature-row li {
  background: var(--sw-bg);
  padding: 22px 26px;
  font-size: 15px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.feature-row li::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--sw-red);
  border-radius: 50%;
  margin-top: 9px;
  flex-shrink: 0;
}
/* ---------- 大图表块（对比） ---------- */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--sw-line);
}
.compare .col { padding: 48px 44px; }
.compare .col.world { background: var(--sw-bg); }
.compare .col.os { background: var(--sw-ink); color: #fff; }
.compare h3 { font-size: 20px; font-weight: 700; }
.compare .num { font-size: 64px; font-weight: 700; margin-top: 24px; line-height: 1; }
.compare .world .num { color: var(--sw-light-gray); }
.compare .os .num { color: #ff6474; }
.compare p { margin-top: 16px; font-size: 15px; line-height: 2; }
.compare .world p { color: var(--sw-gray); }
.compare .os p { color: rgba(255,255,255,.78); }

/* ---------- 产品详情 ---------- */
.product-detail {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 56px;
  align-items: center;
  padding: 56px 0;
  border-bottom: 1px solid var(--sw-line);
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.product-detail:last-child { border-bottom: none; }
.product-detail .pic { overflow: hidden; }
.product-detail .pic img { width: 100%; height: 400px; object-fit: cover; transition: transform .5s ease; }
.product-detail:hover .pic img { transform: scale(1.04); }
.product-detail .info .no { font-size: 13px; letter-spacing: 3px; color: var(--sw-light-gray); }
.product-detail .info h2 { font-size: 28px; font-weight: 700; margin-top: 10px; }
.product-detail .info h2 .en { display: block; font-size: 13px; color: var(--sw-light-gray); letter-spacing: 2px; font-weight: 400; margin-top: 8px; }
.product-detail .info .verse { font-family: var(--font-serif); font-size: 14px; color: var(--sw-red); margin-top: 14px; letter-spacing: 1px; }
.product-detail .info p.desc { margin-top: 18px; color: var(--sw-gray); }
.product-detail .info .specs { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.product-detail .info .specs li { font-size: 14px; color: var(--sw-ink); display: flex; gap: 8px; }
.product-detail .info .specs li::before { content: "·"; color: var(--sw-red); font-weight: 700; }

/* ---------- 案例页筛选 ---------- */
.case-filter { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; }
.case-filter button {
  border: 1px solid var(--sw-line);
  background: var(--sw-white);
  padding: 9px 22px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 2px;
  color: var(--sw-gray);
  transition: all .2s ease;
  font-family: inherit;
}
.case-filter button:hover { border-color: var(--sw-ink); color: var(--sw-ink); }
.case-filter button.active { background: var(--sw-ink); color: #fff; border-color: var(--sw-ink); }

/* ---------- 关于页 ---------- */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.about-media img { width: 100%; height: 520px; object-fit: cover; }
.about-detail h3 { font-size: 22px; font-weight: 700; margin-top: 34px; }
.about-detail h3:first-child { margin-top: 0; }
.about-detail p { margin-top: 14px; color: var(--sw-gray); }
.about-detail ul { margin-top: 16px; display: grid; gap: 10px; }
.about-detail ul li { font-size: 15px; display: flex; gap: 10px; }
.about-detail ul li::before { content: "—"; color: var(--sw-red); }

.contact-box {
  border: 1px solid var(--sw-line);
  padding: 44px 40px;
  background: var(--sw-bg);
  margin-top: 40px;
}
.contact-box h3 { font-size: 18px; font-weight: 700; margin-bottom: 20px; }
.contact-box .row { display: grid; gap: 8px; }
.contact-box .row span { color: var(--sw-gray); font-size: 13px; letter-spacing: 1px; }
.contact-box .row p { font-size: 16px; }

/* ---------- 滚动动画 ----------
   全部挂 .rv-on 前缀：.rv-on 由页面 <head> 里的脚本添加。
   脚本不执行 → 元素不会被隐藏 → 内容照常完整显示。 */
.rv-on .reveal { opacity: 0; transform: translateY(var(--rv-y)); transition: opacity var(--rv-dur) var(--rv-ease), transform var(--rv-dur) var(--rv-ease); transition-delay: calc(var(--rv-i, 0) * var(--rv-stagger)); }
.rv-on .reveal.in { opacity: 1; transform: none; }

/* 尊重系统「减弱动态效果」设置 */
@media (prefers-reduced-motion: reduce) {
  .rv-on .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: none; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--sw-line); }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .honor-grid { grid-template-columns: repeat(2, 1fr); }
  .intro-grid, .about-grid, .product-detail { grid-template-columns: 1fr; gap: 44px; }
  .tech-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: 42px; }
  .page-hero { padding: 76px 0 68px; }
  .page-hero h1 { font-size: 36px; }
  .page-head { padding: 40px 0 36px; }
  .ph-card { padding: 32px 34px 30px; }
  .ph-card h1 { font-size: 34px; }
  .shots-section { padding-top: 34px; }
  .clients-band { padding: 68px 0 74px; }
  .clients-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 18px; }
}

@media (max-width: 768px) {
  :root { --rv-y: 18px; --rv-stagger: 80ms; }
  .nav-inner { padding: 0 20px; }
  .nav-toggle { display: block; }
  .menu {
    position: fixed;
    top: var(--nav-h); left: 0; right: 0;
    background: var(--sw-white);
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 32px 34px;
    gap: 20px;
    border-bottom: 1px solid var(--sw-line);
    /* 完全收入视口上方，并把 visibility 也关掉，免得最后一项文字残留 */
    transform: translateY(calc(-100% - var(--nav-h) - 6px));
    visibility: hidden;
    transition: transform .3s ease, visibility 0s linear .3s;
    box-shadow: 0 20px 40px rgba(0,0,0,.08);
  }
  .menu.open { transform: none; visibility: visible; transition: transform .3s ease, visibility 0s linear 0s; }
  .menu a { font-size: 17px; }
  .container, .footer-grid, .footer-bottom { padding-left: 20px; padding-right: 20px; }
  .section { padding: 76px 0; }
  .sec-head h2 { font-size: 30px; }
  .hero { min-height: 86vh; }
  .hero h1 { font-size: 32px; }
  .hero .sub { font-size: 16px; }
  .case-grid, .product-grid, .honor-grid, .tech-grid, .feature-row { grid-template-columns: 1fr; }
  .compare { grid-template-columns: 1fr; }
  .compare .col { padding: 36px 28px; }
  .page-head { padding: 30px 0 28px; }
  .ph-card { padding: 24px 22px 22px; border-radius: 14px; }
  .ph-card h1 { font-size: 27px; letter-spacing: 1px; }
  .page-hero { padding: 58px 0 52px; }
  .page-hero h1 { font-size: 32px; letter-spacing: 1px; }
  .page-hero p { font-size: 15px; margin-top: 12px; }
  .cc-intro { font-size: 15px; margin-top: 12px; }
  .shots-section { padding-top: 28px; }
  .shot-tail { margin-top: 40px; font-size: 13px; }
  .clients-band { padding: 52px 0 58px; }
  .band-note { margin-bottom: 24px; letter-spacing: 2px; }
  .clients-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 12px; }
  .stat .num { font-size: 40px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* 窄屏：LOGO 改两列，保证每个都不被压扁 */
@media (max-width: 480px) {
  .clients-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
}

/* ============================================================
   案例页 · 缩略图导航 + 大图舞台
   ============================================================ */

/* ---- 缩略图导航：14 张按明度 / 冷暖排序，整排呈渐变 ---- */
.thumb-nav {
  display: flex;
  gap: 6px;
  margin-bottom: 24px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.thumb-nav::-webkit-scrollbar { display: none; }

.tn-item {
  position: relative;
  flex: 1 1 0;
  min-width: 56px;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 0;
  background: var(--sw-line);
  overflow: hidden;
  border-radius: 3px;
  cursor: pointer;
  scroll-snap-align: start;
  opacity: .45;
  transition: opacity .35s var(--rv-ease), transform .35s var(--rv-ease);
}
.tn-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tn-item:hover { opacity: .8; }
.tn-item.is-on { opacity: 1; transform: translateY(-3px); }
.tn-item.is-on::after {
  content: "";
  position: absolute; inset: 0;
  border: 2px solid var(--sw-ink);
  border-radius: 3px;
  pointer-events: none;
}
.tn-item:focus-visible { outline: 2px solid var(--sw-red); outline-offset: 2px; }

/* ---- 大图舞台 ---- */
.stage {
  position: relative;
  margin: 0;
  overflow: hidden;
  /* 兜底比例；JS 会按每张原图真实比例覆盖 → 照片既不被裁、也不留白。
     慧民定的原则：照片一张一张、原比例完整展示，绝不裁切。 */
  aspect-ratio: 16 / 9;
  transition: aspect-ratio .45s var(--rv-ease);
  background: var(--sw-bg);
  border-radius: 4px;
}
.stage-shot {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; padding: 0; background: none;
  display: block; cursor: zoom-in;
}
/* contain 而非 cover：即使 JS 没跑（兜底 16:9），也只留白、不裁照片 */
.stage-shot img { width: 100%; height: 100%; object-fit: contain; display: block; }
.stage-shot:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

/* 底部渐变压暗，保证文字可读 */
.stage::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 58%;
  background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.18) 52%, rgba(0,0,0,0) 100%);
  pointer-events: none;
  z-index: 1;
}

/* 说明文字：图先出，文字后浮（画龙点睛） */
.stage-cap {
  position: absolute;
  left: 36px; right: 132px; bottom: 30px;
  z-index: 2;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.stage-title {
  display: block;
  font-size: 21px; font-weight: 600; letter-spacing: 1.5px;
  margin-bottom: 8px;
}
.stage-title::before {
  content: ""; display: inline-block;
  width: 22px; height: 1px; background: rgba(255,255,255,.85);
  vertical-align: middle; margin-right: 14px;
}
.stage-desc {
  display: block;
  font-size: 15px; line-height: 1.8; letter-spacing: .5px;
  max-width: 660px;
  padding-left: 36px;
}

/* 切换动画：图先淡入，文字延迟浮出 */
@keyframes stageImgIn { from { opacity: 0; transform: scale(1.025); } to { opacity: 1; transform: none; } }
@keyframes stageTxtIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.stage.is-swap .stage-shot img { animation: stageImgIn .75s var(--rv-ease) both; }
.stage.is-swap .stage-title { animation: stageTxtIn .75s var(--rv-ease) both; animation-delay: var(--cap-delay); }
.stage.is-swap .stage-desc  { animation: stageTxtIn .75s var(--rv-ease) both; animation-delay: calc(var(--cap-delay) + .13s); }

/* 计数 */
.stage-count {
  position: absolute; right: 26px; bottom: 32px; z-index: 2;
  color: rgba(255,255,255,.92); font-size: 13px; letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}
.stage-count i { font-style: normal; opacity: .5; margin: 0 5px; }

/* 放大镜提示 */
.zoom-hint {
  position: absolute;
  top: 18px; right: 18px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .3s ease, transform .3s ease;
}
.zoom-hint::before {
  content: ""; width: 14px; height: 14px;
  border: 1.5px solid var(--sw-ink); border-radius: 50%;
  margin-right: -4px;
}
.zoom-hint::after {
  content: ""; position: absolute; right: 8px; bottom: 8px;
  width: 6px; height: 1.5px; background: var(--sw-ink);
  transform: rotate(45deg);
}
.stage:hover .zoom-hint,
.stage:focus-within .zoom-hint { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .stage.is-swap .stage-shot img,
  .stage.is-swap .stage-title,
  .stage.is-swap .stage-desc { animation: none; }
  .tn-item { transition: none; }
}

/* ============================================================
   Lightbox · 就地放大
   ============================================================ */
.lb {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: lbFade .25s ease;
}
.lb[hidden] { display: none; }
@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }
.lb-backdrop { position: absolute; inset: 0; cursor: zoom-out; }
.lb-stage {
  position: relative; max-width: min(92vw, 1400px); max-height: 88vh;
  display: flex; flex-direction: column; align-items: center;
  margin: 0; pointer-events: auto;
}
.lb-stage img {
  max-width: 100%; max-height: 76vh;
  object-fit: contain; display: block;
  border-radius: 2px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  animation: lbImg .3s var(--rv-ease);
}
@keyframes lbImg { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
.lb-caption {
  margin-top: 22px; color: #fff; text-align: center;
  max-width: 720px;
}
.lb-caption h4 { font-size: 18px; font-weight: 500; letter-spacing: 1px; }
.lb-caption p { font-size: 14px; color: rgba(255,255,255,.78); line-height: 1.7; margin-top: 8px; }
.lb-caption .lb-count {
  display: inline-block; margin-top: 14px;
  font-size: 12px; color: rgba(255,255,255,.55);
  letter-spacing: 2px; font-feature-settings: "tnum";
}
.lb-close, .lb-prev, .lb-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  font-size: 26px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, transform .2s ease;
  font-family: inherit;
}
.lb-close { top: 28px; right: 28px; transform: none; font-size: 22px; }
.lb-prev { left: 28px; }
.lb-next { right: 28px; }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: rgba(255,255,255,.22); }
.lb-prev:hover { transform: translateY(-50%) translateX(-2px); }
.lb-next:hover { transform: translateY(-50%) translateX(2px); }
.lb-close:focus-visible, .lb-prev:focus-visible, .lb-next:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ============================================================
   案例页 · 移动端
   ============================================================ */
@media (max-width: 768px) {
  .thumb-nav { gap: 5px; margin-bottom: 16px; }
  .tn-item { min-width: 64px; opacity: .6; }
  .tn-item.is-on { transform: translateY(-2px); }

  .stage { aspect-ratio: 4 / 3; }
  .stage-cap { left: 18px; right: 18px; bottom: 18px; }
  .stage-title { font-size: 17px; margin-bottom: 6px; }
  .stage-title::before { width: 16px; margin-right: 10px; }
  .stage-desc { font-size: 13px; line-height: 1.7; padding-left: 26px; }
  .stage-count { right: auto; left: 18px; bottom: auto; top: 16px; font-size: 12px; }
  .stage .zoom-hint { opacity: 1; transform: none; top: 12px; right: 12px; width: 32px; height: 32px; }

  .lb-stage img { max-height: 64vh; }
  .lb-caption h4 { font-size: 16px; }
  .lb-caption p { font-size: 13px; }
  .lb-close { top: 16px; right: 16px; width: 44px; height: 44px; }
  .lb-prev, .lb-next { width: 44px; height: 44px; font-size: 22px; }
  .lb-prev { left: 12px; }
  .lb-next { right: 12px; }
}

/* ============================================================
   客户内容已并入「经典案例」页（cases.html）
   新版式：白底 + 悬浮卡片 + 25 个深色 LOGO
   样式见本文件前半部分「客户页头：白底 + 悬浮卡片」一节
   2026-09-03：clients.html 撤销，导航栏 7 项 → 6 项
   ============================================================ */

/* ---- 项目实景：竖向长卷，一张接一张 ---- */
.shot-seq { display: flex; flex-direction: column; gap: 104px; }
.shot { margin: 0; }

/* 照片：原比例完整呈现，不裁切 */
.shot-img {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--sw-line);
  border-radius: 4px;
  overflow: hidden;
  cursor: zoom-in;
}
.shot-img img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .9s var(--rv-ease);
}
.shot-img:hover img { transform: scale(1.018); }
.shot-img:focus-visible { outline: 2px solid var(--sw-red); outline-offset: 3px; }

/* 悬停浮出的放大提示 */
.shot-img::after {
  content: "";
  position: absolute;
  top: 16px; right: 16px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(22, 24, 28, .42) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
  backdrop-filter: blur(4px);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.shot-img:hover::after { opacity: 1; transform: none; }

/* 图注：标题与说明并排，主次分明 */
.shot-cap { display: flex; align-items: baseline; gap: 26px; margin-top: 24px; }
.shot-cap-t {
  flex: 0 0 auto;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--sw-ink);
  white-space: nowrap;
}
.shot-cap-t::before {
  content: "";
  display: inline-block;
  width: 22px; height: 2px;
  background: var(--sw-red);
  vertical-align: middle;
  margin-right: 12px;
}
.shot-cap-d { flex: 1 1 auto; font-size: 15px; color: var(--sw-gray); line-height: 1.85; }

/* 图先落定，文字再浮出（节奏由 --cap-delay 统一控制） */
.rv-on .shot .shot-cap-t,
.rv-on .shot .shot-cap-d { opacity: 0; }
.rv-on .shot.in .shot-cap-t { animation: shotTxtIn .8s var(--rv-ease) both; animation-delay: var(--cap-delay); }
.rv-on .shot.in .shot-cap-d { animation: shotTxtIn .8s var(--rv-ease) both; animation-delay: calc(var(--cap-delay) + .13s); }
@keyframes shotTxtIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rv-on .shot .shot-cap-t,
  .rv-on .shot .shot-cap-d { opacity: 1; }
  .rv-on .shot.in .shot-cap-t,
  .rv-on .shot.in .shot-cap-d { animation: none; }
  .shot-img img { transition: none; }
  .shot-img::after { transition: none; }
}

/* ---------- 照片内编号：1 / 2 / 3 循环，滚动进入时淡入上滑 ---------- */
/* 照片下方的图注已按慧民要求移除，标题与说明改在点开灯箱时呈现 */
.shot { position: relative; }
.shot-idx {
  --idx-size: 46px;      /* 数字大小 */
  --idx-gap:  22px;      /* 距照片左／下边缘 */
  position: absolute;
  left: var(--idx-gap);
  bottom: var(--idx-gap);
  font-size: var(--idx-size);
  font-weight: 700;
  line-height: 1;
  color: #fff;
  letter-spacing: 1px;
  pointer-events: none;
  text-shadow: 0 2px 10px rgba(0,0,0,.28);
}
/* 未进入视口时隐身，进入后浮起淡入（节奏与照片 reveal 同步） */
.rv-on .shot .shot-idx { opacity: 0; }
.rv-on .shot.in .shot-idx { animation: shotIdxIn .68s cubic-bezier(.22,.61,.36,1) .12s both; }
@keyframes shotIdxIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rv-on .shot .shot-idx { opacity: 1; }
  .rv-on .shot.in .shot-idx { animation: none; }
}

/* ---------- 项目实景长卷 · 响应式（原客户页用，保留备用） ---------- */
@media (max-width: 1024px) {
  .shot-seq { gap: 80px; }
  .shot-cap { gap: 20px; }
  .shot-idx { --idx-size: 40px; --idx-gap: 18px; }
}
@media (max-width: 768px) {
  .shot-seq { gap: 60px; }
  /* 手机上照片出血到屏幕两边：横构图在竖屏里本来就矮，
     再被 container 的 20px 留白削一圈就太小了。图注仍在留白内，文字照常对齐。 */
  .shot-img {
    margin-left: -20px;
    margin-right: -20px;
    width: calc(100% + 40px);
    border-radius: 0;
  }
  .shot-cap { display: block; margin-top: 18px; }
  .shot-cap-t { font-size: 16px; }
  .shot-cap-d { margin-top: 8px; font-size: 14px; line-height: 1.8; }
  /* 照片左右各出血 20px：左边距用 -4px 补偿，保证离照片边缘仍是 16px；
     下边距不能为负，否则数字底部会掉出照片、白字压到白底上看不见 */
  .shot-idx { --idx-size: 34px; --idx-gap: 16px; left: -4px; }
  .shot-img::after { opacity: 1; transform: none; top: 10px; right: 10px; width: 32px; height: 32px; }
}