/* 湖北萍安管业 官网样式
   纯静态，无外部依赖，无网络字体 */

/* ==========================================================================
   配色令牌：Radix UI Colors v3（slate 中性 / indigo 品牌 / orange 强调）
   阶位语义按 Radix 官方定义，组件一律不写死十六进制：
     1–2  页面底、浅底区块      3–5  组件底与 hover
     6–8  描边、分隔线、焦点环  9–10 实色填充（按钮底）
     11   次级文字/品牌文字色   12   高对比文字
   深色区块用 Radix dark 阶，1 最深 → 3 稍亮，与浅色阶不混用。
   ========================================================================== */
:root {
  /* slate */
  --slate-1: #fcfcfd;  --slate-2: #f9f9fb;  --slate-3: #f0f0f3;
  --slate-4: #e8e8ec;  --slate-5: #e0e1e6;  --slate-6: #d9d9e0;
  --slate-7: #cdced6;  --slate-8: #b9bbc6;  --slate-9: #8b8d98;
  --slate-10: #80838d; --slate-11: #60646c; --slate-12: #1c2024;

  /* indigo */
  --indigo-3: #edf2fe; --indigo-4: #e1e9ff; --indigo-5: #d2deff;
  --indigo-6: #c1d0ff; --indigo-8: #8da4ef; --indigo-9: #3e63dd;
  --indigo-10: #3358d4; --indigo-11: #3a5bc7; --indigo-12: #1f2d5c;

  /* orange */
  --orange-2: #fff7ed; --orange-3: #ffefd6; --orange-6: #ffc182;
  --orange-9: #f76b15; --orange-10: #ef5f00; --orange-11: #cc4e00;
  --orange-12: #582d1d;

  /* 微信绿：官方 #07C160 配白字只有 2.4:1，按 10.5px 小字压到 6 阶才够 4.5:1 */
  --wx-9: #058245; --wx-10: #046c39;

  /* dark 阶：只用于深色区块 */
  --indigo-d1: #11131f; --indigo-d2: #141726; --indigo-d3: #182449;
  --slate-d9: #696e77;  --slate-d11: #b0b4ba; --slate-d12: #edeef0;
  --orange-d11: #ffa057;

  /* ---------- 语义层：组件只引用下面这些 ---------- */
  --brand-ink: var(--indigo-12);        /* 标题与品牌文字 */
  --surface-hero: var(--indigo-d3);     /* 首屏、内页头 */
  --surface-dark: var(--indigo-d2);     /* 深色内容区块 */
  --surface-deep: var(--indigo-d1);     /* 顶条、页脚 */

  --ink: var(--slate-12);               /* 正文 */
  --ink-2: var(--slate-11);             /* 次级说明 */
  --ink-3: var(--slate-9);              /* 序号、弱标记 */
  --ink-inv: #fff;                      /* 深底正文 */
  --ink-inv-2: var(--slate-d11);        /* 深底次级 */
  --ink-inv-3: var(--slate-d9);         /* 深底弱标记 */

  --line: var(--slate-6);
  --line-soft: var(--slate-4);
  --paper: var(--slate-2);

  --accent: var(--orange-11);           /* CTA 底、强调文字 */
  --accent-hover: var(--orange-10);
  --accent-on-dark: var(--orange-d11);  /* 深底上的强调 */

  /* ---------- 动效令牌：时长与曲线全站只用这五个 ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);     /* 入场、退出 */
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);  /* 视野内位移 */
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);    /* 长时长柔和过渡 */
  --t-press: 140ms;    /* 按下反馈 */
  --t-hover: 180ms;    /* 悬停、焦点 */
  --t-ui: 240ms;       /* 导航、面板开合 */
  --t-reveal: 700ms;   /* 区块入场 */
  --t-page: 300ms;     /* 页面切换 */

  /* ---------- 兼容旧变量名 ---------- */
  --navy: var(--brand-ink);
  --navy-d: var(--surface-dark);
  --navy-x: var(--surface-deep);
  --slate: var(--ink-2);
  --accent-d: var(--accent-hover);

  --w: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.35; }

.wrap { width: min(100% - 44px, var(--w)); margin: 0 auto; }

/* ---------- 顶部信息条 ---------- */
.topbar { background: var(--navy-x); color: var(--ink-inv-2); font-size: 13px; }
.topbar .wrap {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 38px; gap: 24px; flex-wrap: wrap; padding: 6px 0;
}
.topbar .tb-left { display: flex; gap: 26px; flex-wrap: wrap; }
.topbar a:hover { color: #fff; }
.topbar .dot { color: var(--ink-inv-3); }

/* ---------- 站头 ---------- */
.site-head {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(1.15) blur(6px);
}
.head-in {
  display: flex; align-items: center; justify-content: space-between;
  height: 78px; gap: 28px;
}
.brand { display: flex; align-items: center; gap: 13px; }
.brand svg { width: 42px; height: 42px; flex: 0 0 auto; }
.brand b { display: block; font-size: 19.5px; letter-spacing: 0.08em; color: var(--navy); font-weight: 700; }
.brand span { display: block; font-size: 11.5px; letter-spacing: 0.03em; color: var(--slate); margin-top: 1px; }

.nav ul { display: flex; gap: 36px; list-style: none; margin: 0; padding: 0; font-size: 15.5px; }
.nav a { position: relative; display: inline-block; padding: 5px 0; color: var(--ink); }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-hover) var(--ease-out);
}
.nav a:hover::after,
.nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--navy); font-weight: 600; }

.head-act { display: flex; align-items: center; gap: 12px; }

.nav-toggle {
  display: none; width: 44px; height: 44px; border: 1px solid var(--line);
  background: #fff; border-radius: 2px; cursor: pointer; padding: 0;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.nav-toggle i { display: block; width: 18px; height: 1.6px; background: var(--navy); }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border: 1px solid transparent; border-radius: 2px;
  font-size: 15px; font-family: inherit; line-height: 1.2;
  cursor: pointer;
  transition:
    background-color var(--t-hover) ease,
    border-color var(--t-hover) ease,
    color var(--t-hover) ease,
    transform var(--t-press) var(--ease-out);
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent); filter: brightness(0.92); }
.btn-primary:active { filter: brightness(0.86); }
.btn-ghost { border-color: var(--slate-8); background: #fff; color: var(--navy); }
.btn-ghost:hover { border-color: var(--navy); }
.btn-light { border-color: rgba(255, 255, 255, 0.32); color: #fff; }
.btn-light:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.6); }

/* ---------- 首屏 ---------- */
.hero { position: relative; background: var(--surface-hero); color: #fff; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 15px);
  pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; right: -140px; top: -160px; width: 620px; height: 620px;
  border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 50%; pointer-events: none;
}
.hero-in {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.06fr 0.94fr; gap: 60px;
  align-items: center; padding: 88px 0 92px;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12.5px; letter-spacing: 0.22em; color: var(--ink-inv-2); text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 30px; height: 1px; background: var(--accent); }

.hero h1 {
  font-size: clamp(30px, 3.5vw, 46px); margin: 20px 0 22px; letter-spacing: 0.01em;
}
.hero h1 em { font-style: normal; color: var(--accent-on-dark); }
.hero-lead { color: var(--ink-inv-2); font-size: 16.5px; max-width: 31em; margin-bottom: 34px; }
.hero-act { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-facts {
  display: flex; gap: 46px; margin-top: 56px; padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.14); flex-wrap: wrap;
}
.hero-facts dt { font-size: 12.5px; letter-spacing: 0.12em; color: var(--ink-inv-2); margin-bottom: 4px; }
.hero-facts dd { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: 0.02em; }

/* 照片占位 */
.shot {
  position: relative; background: var(--surface-hero); border: 1px solid rgba(255, 255, 255, 0.16);
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 13px);
  display: grid; place-items: center; overflow: hidden;
}
.shot-hero { aspect-ratio: 4 / 3.15; }
/* 这张厂门图招牌在左侧，容器比原图方，靠左取景免得把「湖北萍安」裁断 */
.shot-hero img { object-position: 26% center; }
.shot-tag {
  font-size: 12px; letter-spacing: 0.18em; color: var(--ink-inv-2);
  border: 1px solid rgba(255, 255, 255, 0.14); padding: 8px 16px; background: rgba(8, 24, 38, 0.5);
}
/* 照片落到 .shot 里：铺满裁切；二维码这类不能裁的用 .shot-fit 完整显示 */
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shot-fit img { object-fit: contain; background: #fff; padding: 14%; }
.shot::after {
  content: ""; position: absolute; inset: 12px; border: 1px solid rgba(255, 255, 255, 0.07); pointer-events: none;
}

/* ---------- 通用区块 ---------- */
.sec { padding: 88px 0; }
.sec-paper { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec-dark { background: var(--navy-d); color: #fff; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 34px; margin-bottom: 46px; flex-wrap: wrap; }
.sec-head h2 { font-size: clamp(24px, 2.3vw, 32px); color: var(--navy); letter-spacing: 0.01em; }
.sec-dark .sec-head h2 { color: #fff; }
.kicker { font-size: 12.5px; letter-spacing: 0.2em; color: var(--accent); font-weight: 600; margin-bottom: 12px; }
.sec-head p { color: var(--slate); font-size: 15.5px; max-width: 44em; margin: 12px 0 0; }
.sec-dark .sec-head p { color: var(--ink-inv-2); }

/* 产品栅格 */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }

.cell {
  background: #fff; padding: 36px 32px 38px; position: relative;
  transition: background-color var(--t-hover) ease, box-shadow var(--t-hover) ease;
}
.cell:hover { background: var(--slate-2); box-shadow: inset 0 -3px 0 var(--accent); }
.cell .idx { display: block; font-size: 11.5px; letter-spacing: 0.16em; color: var(--ink-2); margin-bottom: 20px; }
.cell h3 { font-size: 19px; color: var(--navy); margin-bottom: 11px; }
.cell p { color: var(--slate); font-size: 14.6px; margin: 0; }
.cell .spec { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: 13.4px; color: var(--ink-2); }

/* 待补充标记 */
.todo {
  color: var(--orange-11); border-bottom: 1px dashed var(--orange-6);
  font-size: 0.94em; white-space: nowrap; font-weight: 500;
}

/* 优势列表 */
.why { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 56px; }
.why-item { padding: 26px 0; border-top: 1px solid var(--line); display: flex; gap: 18px; }
.why-item:nth-child(-n + 2) { border-top: none; }
.why-num { font-size: 12px; letter-spacing: 0.14em; color: var(--accent); padding-top: 5px; min-width: 26px; font-weight: 600; }
.why-item h3 { font-size: 17.5px; color: var(--navy); margin-bottom: 7px; }
.why-item p { margin: 0; color: var(--slate); font-size: 14.8px; }

/* 应用场景 */
.apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.apps h3 { font-size: 16.5px; margin-bottom: 9px; color: #fff; }
.apps p { font-size: 14.2px; color: var(--ink-inv-2); margin: 0; }
.apps .cell-dark { border-top: 2px solid var(--accent); padding-top: 22px; }

/* 关于 */
.about-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 64px; align-items: start; }
.about-grid h2 { font-size: clamp(24px, 2.3vw, 32px); color: var(--navy); margin-bottom: 22px; }
.about-grid p { color: var(--ink-2); font-size: 15.5px; }
.fact-list { list-style: none; margin: 30px 0 0; padding: 0; border-top: 1px solid var(--line); }
.fact-list li { display: flex; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14.6px; }
.fact-list b { min-width: 88px; color: var(--navy); font-weight: 600; flex: 0 0 auto; }
.fact-list span { color: var(--slate); }

/* 联系 */
.contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.cc h3 { font-size: 13px; letter-spacing: 0.16em; color: var(--accent); margin-bottom: 12px; font-weight: 600; }
.cc p { font-size: 15.5px; margin: 0; color: var(--ink); }
.cc .big { font-size: 21px; font-weight: 700; color: var(--navy); letter-spacing: 0.02em; }

/* 页脚 */
.foot { background: var(--navy-x); color: var(--ink-inv-2); font-size: 14px; padding: 56px 0 30px; }
.foot-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; padding-bottom: 38px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.foot b { color: #fff; font-size: 16.5px; display: block; margin-bottom: 12px; letter-spacing: 0.04em; }
.foot p { margin: 0 0 6px; }
.foot-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 24px; flex-wrap: wrap; font-size: 13px; color: var(--ink-inv-2); }
.foot a:hover { color: #fff; }

/* ---------- 内页头 ---------- */
.page-head { background: var(--surface-hero); color: #fff; position: relative; overflow: hidden; }
.page-head::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 15px);
}
.page-head .wrap { position: relative; z-index: 2; padding: 62px 0 58px; }
.page-head h1 { font-size: clamp(26px, 3vw, 38px); margin-bottom: 14px; }
.page-head p { color: var(--ink-inv-2); max-width: 46em; margin: 0; font-size: 15.5px; }
.crumb { font-size: 13px; color: var(--ink-inv-2); margin-bottom: 18px; letter-spacing: 0.04em; }
.crumb a:hover { color: #fff; }

/* 产品详情块 */
.pblock { padding: 52px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 0.78fr 1.22fr; gap: 58px; }
.pblock:last-child { border-bottom: none; }
.pblock h2 { font-size: 24px; color: var(--navy); margin-bottom: 8px; }
.pblock .pnum { font-size: 12px; letter-spacing: 0.16em; color: var(--accent); margin-bottom: 14px; font-weight: 600; }
.pblock .shot { aspect-ratio: 3 / 2; }
.pblock h4 { font-size: 14px; color: var(--navy); margin: 22px 0 8px; letter-spacing: 0.04em; }
.pblock ul { margin: 0; padding-left: 18px; color: var(--slate); font-size: 15px; }
.pblock li { margin-bottom: 6px; }
.spec-table { width: 100%; border-collapse: collapse; margin-top: 22px; font-size: 14.4px; }
.spec-table th, .spec-table td { text-align: left; padding: 11px 14px; border: 1px solid var(--line); }
.spec-table th { background: var(--paper); color: var(--navy); font-weight: 600; width: 34%; }

/* 提示条 */
.note {
  background: var(--orange-2); border: 1px solid var(--orange-6); border-left: 3px solid var(--accent);
  padding: 18px 22px; font-size: 14.4px; color: var(--orange-12); margin: 0 0 40px;
}
.note b { color: var(--orange-12); }

/* 移动端 */
@media (max-width: 980px) {
  .hero-in { grid-template-columns: 1fr; gap: 44px; padding: 60px 0 66px; }
  .shot-hero { aspect-ratio: 16 / 10; }
  .grid-3, .grid-4, .contact-cards, .apps { grid-template-columns: repeat(2, 1fr); }
  .about-grid, .pblock { grid-template-columns: 1fr; gap: 34px; }
  .why { grid-template-columns: 1fr; gap: 0; }
  .why-item:nth-child(2) { border-top: 1px solid var(--line); }
  .sec { padding: 62px 0; }
}

@media (max-width: 720px) {
  .wrap { width: calc(100% - 36px); }
  .topbar { display: none; }
  .head-in { height: 66px; }
  .brand b { font-size: 17.5px; }
  .brand span { font-size: 10.5px; }
  .head-act .btn { display: none; }
  .nav-toggle { display: flex; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px rgba(12, 33, 53, 0.09);
  }
  .nav.open { display: block; }
  .nav ul { flex-direction: column; gap: 0; padding: 8px 0 14px; }
  .nav li { border-bottom: 1px solid var(--slate-4); }
  .nav li:last-child { border-bottom: none; }
  .nav a { display: block; padding: 15px 22px; font-size: 16px; }
  .nav a::after { display: none; }
  .nav a[aria-current="page"] { color: var(--accent); }
  .grid-3, .grid-4, .contact-cards, .apps, .grid-2, .foot-top { grid-template-columns: 1fr; }
  .hero-facts { gap: 26px 34px; margin-top: 42px; }
  .hero h1 { font-size: 28px; }
  .sec-head { margin-bottom: 34px; }
  .cell { padding: 28px 24px 30px; }
  .hero-act .btn { flex: 1 1 auto; }
}

/* ===== 电话链接：不改变原有文字外观 ===== */
.tel { color: inherit; text-decoration: none; }
.tel:hover { color: var(--accent); }

/* ===== 厂区实拍图墙：手机上也保持两列，四张竖排太长 ===== */
@media (max-width: 720px) {
  .gallery { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ===== 规格表页（pe-spec.html） ===== */
.ptabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; }
.ptab-btn {
  font: inherit; font-size: 14.5px; letter-spacing: 0.02em;
  padding: 9px 18px; cursor: pointer;
  border: 1px solid var(--slate-8); background: #fff; color: var(--navy); border-radius: 2px;
  transition:
    background-color var(--t-hover) ease,
    border-color var(--t-hover) ease,
    color var(--t-hover) ease,
    transform var(--t-press) var(--ease-out);
}
.ptab-btn:hover { border-color: var(--navy); }
.ptab-btn[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.ptab-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ptab-panel[hidden] { display: none; }
.spec-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); background: #fff;
}
.spec-big { width: 100%; border-collapse: collapse; font-size: 14.2px; min-width: 560px; }
.spec-big thead th {
  background: var(--navy); color: #fff; font-weight: 600;
  text-align: right; padding: 12px 16px; white-space: nowrap;
}
.spec-big thead th:first-child { text-align: left; }
.spec-big td {
  padding: 9px 16px; text-align: right; border-top: 1px solid var(--line);
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.spec-big td:first-child { text-align: left; font-weight: 600; color: var(--navy); }
.spec-big tbody tr:nth-child(even) { background: var(--paper); }
.spec-big tbody tr:hover { background: var(--slate-3); }
.sp-na { color: var(--ink-2); }

/* 超出工厂自有产线口径的规格：数据保留作询价参考，视觉降权 */
.spec-big tr.is-over td { color: var(--ink-2); }
.spec-big tr.is-over td:first-child { color: var(--ink-2); font-weight: 500; }
.sp-tag {
  display: inline-block; margin-left: 6px; padding: 0 5px;
  font-size: 11px; font-weight: 500; line-height: 1.6;
  color: var(--orange-12); background: var(--orange-2);
  border: 1px solid var(--orange-6); border-radius: 3px;
  vertical-align: 1px; white-space: nowrap;
}

.spec-foot { margin-top: 22px; font-size: 14px; color: var(--slate); line-height: 1.9; }
.spec-foot p { margin: 0 0 6px; }
.spec-foot b { color: var(--navy); }

@media (max-width: 720px) {
  .ptab-btn { flex: 1 1 auto; padding: 9px 10px; font-size: 13.5px; }
  .spec-big { font-size: 13px; }
  .spec-big thead th, .spec-big td { padding: 8px 12px; }
}

.spec-more { margin-top: 20px; }

/* 窄屏：规格表首列吸附 + 滑动提示 */
.spec-big { min-width: 480px; }.spec-tip { display: none; }
@media (max-width: 720px) {
  .spec-tip { display: block; font-size: 12.5px; color: var(--ink-2); margin: 0 0 10px; }
  .spec-big td:first-child {
    position: sticky; left: 0; background: #fff;
    box-shadow: 1px 0 0 var(--line);
  }
  .spec-big tbody tr:nth-child(even) td:first-child { background: var(--paper); }
  .spec-big thead th:first-child { position: sticky; left: 0; z-index: 2; }
}

/* ==========================================================================
   动效层
   分层（由快到慢，越靠下越少触发）：
     L1 反馈  140–180ms  按下、悬停、焦点        每次操作都发生，必须快
     L2 状态  240ms      菜单开合、面板切换      偶发，允许小位移
     L3 入场  700–900ms  首屏与区块进场          每次访问一次，允许慢
     L4 换页  300ms      页面之间的交接          每次导航一次
   原则：只动 transform / opacity / clip-path；所有隐藏态挂在 .js 下，
   脚本没跑或 prefers-reduced-motion 时直接是完成态，内容永远可见。
   ========================================================================== */

/* ---------- L4 页面切换：同源跨页交叉淡入（不支持的浏览器自动跳过） ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out var(--t-page) var(--ease-out) both; }
::view-transition-new(root) { animation: vt-in var(--t-page) var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- L3 签名动效：首屏标题按行遮罩升起 ---------- */
.lines .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.lines .line > span { display: block; }
@keyframes line-up { to { transform: none; } }
@keyframes rise { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  .js .lines .line > span {
    transform: translateY(105%);
    animation: line-up 900ms var(--ease-out) forwards;
    animation-delay: calc(var(--i, 0) * 90ms + 140ms);
  }
  /* 首屏其余元素：错峰 90ms，只给三个，不做一长串 */
  .js [data-rise] {
    opacity: 0; transform: translateY(16px);
    animation: rise var(--t-reveal) var(--ease-out) forwards;
    animation-delay: calc(var(--i, 0) * 90ms + 120ms);
  }
}

/* ---------- L3 区块入场：滚动进入视口时一次，不重播 ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0; transform: translateY(18px);
    transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out);
    transition-delay: calc(var(--i, 0) * 55ms);
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }

  /* 图片：滚到时从下沿开帘，内部轻微回落 —— 全站只用在这一类大图 */
  .js .shot[data-shutter] { clip-path: inset(0 0 100% 0); transition: clip-path 900ms var(--ease-in-out); }
  .js .shot[data-shutter] img { transform: scale(1.06); transition: transform 1100ms var(--ease-soft); }
  .js .shot[data-shutter].is-in { clip-path: inset(0); }
  .js .shot[data-shutter].is-in img { transform: none; }

  /* 图片解码完成再显影，避免渐进式加载的灰块 */
  .js .shot img { opacity: 0; transition: opacity 420ms ease; }
  .js .shot img.is-loaded { opacity: 1; }

  /* 保险丝：万一观察器没回调，8 秒后内容自己出现。
     元素已进场时这两条动画不产生任何视觉变化。 */
  .js [data-reveal] { animation: reveal-failsafe 1ms 8s forwards; }
  .js .shot[data-shutter] { animation: shutter-failsafe 1ms 8s forwards; }
}

@keyframes reveal-failsafe { to { opacity: 1; transform: none; } }
@keyframes shutter-failsafe { to { clip-path: inset(0); } }

/* ---------- L3 首屏图片：进场即开帘 ---------- */
@keyframes shutter { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes settle { from { transform: scale(1.06); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .js .hero .img-shutter { animation: shutter 1000ms var(--ease-in-out) 180ms both; }
  .js .hero .img-shutter img { animation: settle 1200ms var(--ease-soft) 180ms both; }
}

/* ---------- L1 / L2 交互反馈：过渡声明写在各自组件规则里，这里只管按下与焦点 ---------- */
.btn:active { transform: scale(0.98); }
.ptab-btn:active { transform: scale(0.985); }

/* 规格表行：悬停底色变化走过渡，不闪 */
.spec-big tbody tr { transition: background-color var(--t-hover) ease; }

/* 规格压力档切换：面板内容淡入，不做横向滑动 */
@keyframes panel-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: no-preference) {
  .js .ptab-panel:not([hidden]) { animation: panel-in var(--t-ui) var(--ease-out) both; }
}

/* 全站焦点环：键盘操作才出现，用品牌靛蓝 8 阶保证可见 */
:focus-visible { outline: 2px solid var(--indigo-8); outline-offset: 2px; }
.btn:focus-visible, .nav-toggle:focus-visible { outline-offset: 3px; }

@media (hover: hover) and (pointer: fine) {
  /* 悬停只做一件事：图片轻微推进，不做位移与放大卡片 */
  .shot img { transition: transform 900ms var(--ease-soft), opacity 420ms ease; }
  .shot:hover img { transform: scale(1.02); }
}

/* ---------- 移动端导航：开合面板 ---------- */
@media (max-width: 720px) {
  .nav {
    display: block;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition:
      opacity var(--t-ui) var(--ease-out),
      transform var(--t-ui) var(--ease-out),
      visibility 0s linear var(--t-ui);
  }
  .nav.open {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition-delay: 0s;
  }
}

/* ---------- 降级：减少动态偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
  .shot img { opacity: 1 !important; }
  .shot[data-shutter] { clip-path: none !important; }
}

/* ---------- 官方渠道提示 ---------- */
.site-note {
  margin: 26px 0 0; padding: 15px 20px;
  border-left: 3px solid var(--accent);
  background: var(--slate-2);
  font-size: 14px; line-height: 1.75; color: var(--ink-2);
}
.site-note b { color: var(--brand-ink); font-weight: 600; }
.site-note a { color: var(--brand-ink); }

/* ---------- 营业执照照片 ---------- */
.lic-grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
.lic-grid .cell { padding: 32px 30px 34px; }
.lic-docs { background: #fff; }
.lic-docs .doc { padding: 24px 30px 26px; border-bottom: 1px solid var(--line); }
.lic-docs .doc:last-child { border-bottom: 0; }
.lic-docs .doc .idx {
  display: block; font-size: 11.5px; letter-spacing: 0.16em;
  color: var(--ink-2); margin-bottom: 10px;
}
.lic-docs .doc h3 { font-size: 16.5px; color: var(--navy); margin-bottom: 7px; }
.lic-docs .doc p { margin: 0; color: var(--slate); font-size: 14px; }
.lic {
  display: block; margin-top: 12px; overflow: hidden;
  border: 1px solid var(--line); background: #fff;
}
.lic img { display: block; width: 100%; height: auto; }
.lic-cap { margin-top: 10px; font-size: 12.5px; color: var(--ink-2); }

@media (max-width: 900px) {
  .lic-grid { grid-template-columns: 1fr; }
}

/* ---------- 厂址地图 ---------- */
.map-shell {
  position: relative; height: 380px; overflow: hidden;
  border: 1px solid var(--line); background: var(--surface-dark);
}
.map-shell #map { width: 100%; height: 100%; }
.map-fallback {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 24px; text-align: center;
  background: var(--surface-dark); color: var(--ink-inv);
  transition: opacity var(--t-ui) var(--ease-out), visibility 0s linear var(--t-ui);
}
.map-fallback.is-off { opacity: 0; visibility: hidden; pointer-events: none; }
.map-fallback h3 { font-size: 19px; font-weight: 600; color: var(--ink-inv); }
.map-fallback p { margin: 0; font-size: 14px; color: var(--ink-inv-2); max-width: 34em; }
.map-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

@media (max-width: 720px) {
  .map-shell { height: 300px; }
}

/* ==========================================================================
   浮动询盘栏（.qrail）＋ 询盘抽屉（.qdrawer）＋ 二维码弹窗（.qmodal）
   结构由 assets/js/inquiry.js 注入，这里只管外观与位移。
   层次：qrail 70 < qmask 90 < qdrawer/qmodal 100（站头是 60）
   ========================================================================== */

.qrail {
  position: fixed; right: 12px; top: 50%;
  transform: translateY(-50%);
  z-index: 70;
  display: flex; flex-direction: column; gap: 5px;
  padding: 5px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 5px;
  box-shadow: 0 10px 26px -14px rgba(17, 19, 31, 0.4);
}

.qrail-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  width: 58px; height: 58px; padding: 0;
  border: 0; border-radius: 3px;
  font: inherit; font-size: 10.5px; line-height: 1.2; letter-spacing: 0.02em;
  color: #fff; cursor: pointer;
  transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.qrail-btn svg { width: 20px; height: 20px; flex: 0 0 auto; }
.qrail-btn:active { transform: scale(0.96); }
.qrail-btn:focus-visible { outline: 2px solid var(--indigo-8); outline-offset: 2px; }

.qrail-inquiry { background: var(--indigo-9); }
.qrail-inquiry:hover { background: var(--indigo-10); }
.qrail-tel { background: var(--surface-deep); }
.qrail-tel:hover { background: var(--indigo-d3); }
.qrail-wx { background: var(--wx-9); }
.qrail-wx:hover { background: var(--wx-10); }

/* ---------- 抽屉 / 弹窗共用的遮罩 ---------- */
.qmask {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(17, 19, 31, 0.52);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--t-ui) var(--ease-out), visibility 0s linear var(--t-ui);
}
.qmask.is-open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition-delay: 0s;
}

/* ---------- 询盘抽屉 ---------- */
.qdrawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 100;
  display: flex; flex-direction: column;
  width: min(430px, 100%);
  background: #fff;
  border-left: 1px solid var(--line);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--t-ui) var(--ease-out), visibility 0s linear var(--t-ui);
}
.qdrawer.is-open {
  transform: none; visibility: visible;
  transition-delay: 0s;
}
.qdrawer:focus, .qmodal:focus { outline: none; }

.qdr-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 26px 26px 18px; border-bottom: 1px solid var(--line-soft);
}
.qdr-head h2 { font-size: 21px; color: var(--brand-ink); letter-spacing: 0.01em; }
.qdr-head p { margin: 7px 0 0; font-size: 13.5px; color: var(--ink-2); }

.qclose {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin: -4px -4px 0 0; padding: 0;
  border: 1px solid var(--line); border-radius: 3px;
  background: #fff; color: var(--ink-2); cursor: pointer;
  transition: border-color var(--t-hover) ease, color var(--t-hover) ease;
}
.qclose:hover { border-color: var(--slate-8); color: var(--ink); }
.qclose svg { width: 15px; height: 15px; }

.qdr-body {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  padding: 22px 26px 28px;
}

/* ---------- 表单 ---------- */
.qfield { margin-bottom: 17px; }
.qfield label {
  display: block; margin-bottom: 7px;
  font-size: 13.5px; font-weight: 600; color: var(--brand-ink);
}
.qfield .req { color: var(--orange-11); margin-left: 2px; }
.qfield input,
.qfield textarea {
  display: block; width: 100%;
  padding: 11px 13px;
  font: inherit; font-size: 15px; line-height: 1.5;
  color: var(--ink); background: #fff;
  border: 1px solid var(--slate-7); border-radius: 3px;
  transition: border-color var(--t-hover) ease, box-shadow var(--t-hover) ease;
}
.qfield textarea { min-height: 96px; resize: vertical; }
.qfield input::placeholder,
.qfield textarea::placeholder { color: var(--slate-9); }
.qfield input:focus,
.qfield textarea:focus {
  outline: none;
  border-color: var(--indigo-8);
  box-shadow: 0 0 0 3px var(--indigo-4);
}
.qfield.has-err input,
.qfield.has-err textarea { border-color: var(--orange-9); }
.qfield .qerr {
  display: none; margin-top: 6px;
  font-size: 12.5px; color: var(--orange-11);
}
.qfield.has-err .qerr { display: block; }

.qsubmit { width: 100%; font-size: 15.5px; padding: 13px 22px; }
.qsubmit[disabled] { opacity: 0.62; cursor: default; }

.qhint {
  margin: 14px 0 0; font-size: 13px; color: var(--ink-2);
}
.qhint b { color: var(--brand-ink); font-weight: 600; }
.qhint a { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- 提交成功态 ---------- */
.qdone { display: none; }
.qdrawer.is-done .qform { display: none; }
.qdrawer.is-done .qdone { display: block; }
.qdone-ico {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 16px;
  border-radius: 50%; background: var(--indigo-3); color: var(--indigo-9);
}
.qdone-ico svg { width: 24px; height: 24px; }
.qdone h3 { font-size: 18px; color: var(--brand-ink); margin-bottom: 8px; }
.qdone p { font-size: 14px; color: var(--ink-2); }
.qdone-txt {
  margin: 16px 0; padding: 14px 16px;
  background: var(--paper); border: 1px solid var(--line-soft); border-radius: 3px;
  font-size: 13.5px; line-height: 1.85; color: var(--ink);
  white-space: pre-wrap; word-break: break-word;
  max-height: 210px; overflow-y: auto;
}
.qdone-act { display: flex; flex-direction: column; gap: 10px; }
.qdone-act .btn { width: 100%; }

/* ---------- 二维码弹窗 ---------- */
.qmodal {
  position: fixed; left: 50%; top: 50%; z-index: 100;
  width: min(320px, calc(100% - 40px));
  padding: 26px 24px 24px;
  background: #fff; border: 1px solid var(--line); border-radius: 5px;
  text-align: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%, -50%) scale(0.97);
  transition:
    opacity var(--t-ui) var(--ease-out),
    transform var(--t-ui) var(--ease-out),
    visibility 0s linear var(--t-ui);
}
.qmodal.is-open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
  transition-delay: 0s;
}
.qmodal .qclose {
  position: absolute; top: 10px; right: 10px; margin: 0;
}
.qmodal img {
  width: 216px; height: 216px; margin: 0 auto 16px;
  border: 1px solid var(--line-soft);
}
.qmodal h3 { font-size: 16.5px; color: var(--brand-ink); margin-bottom: 6px; }
.qmodal p { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.qmodal .qwxid {
  margin-top: 10px; font-size: 14px; color: var(--brand-ink); font-weight: 600;
  letter-spacing: 0.02em;
}

/* ---------- 窄屏：竖排浮栏改成底部固定条 ---------- */
@media (max-width: 980px) {
  .qrail {
    top: auto; right: 0; bottom: 0; left: 0;
    transform: none;
    flex-direction: row; gap: 0;
    padding: 0 0 env(safe-area-inset-bottom, 0);
    border: 0; border-top: 1px solid var(--line); border-radius: 0;
    box-shadow: 0 -3px 18px -8px rgba(17, 19, 31, 0.3);
  }
  .qrail-btn {
    flex: 1 1 0; width: auto; height: 56px;
    flex-direction: row; gap: 8px;
    border-radius: 0; font-size: 13px;
  }
  .qrail-btn svg { width: 19px; height: 19px; }
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0)); }
}

@media (max-width: 420px) {
  .qrail-btn { font-size: 12px; gap: 6px; }
  .qdr-head { padding: 20px 20px 15px; }
  .qdr-body { padding: 18px 20px 24px; }
}

@media print {
  .qrail, .qmask, .qdrawer, .qmodal { display: none !important; }
  body { padding-bottom: 0 !important; }
}