[hidden] { display: none !important; }

/* ============================================================
   Bastion Rugged — Design System
   Industrial / technical. High information density.
   Tokens first, components second. No framework dependency.
   ============================================================ */

:root {
  /* Colour */
  --ink:        #0B1F2E;
  --ink-2:      #0F2A3F;
  --steel:      #24455E;
  --slate:      #566B7C;
  --muted:      #687D8B;
  --line:       #DCE3E8;
  --line-soft:  #EAEFF2;
  --bg:         #FFFFFF;
  --bg-2:       #F5F7F9;
  --bg-3:       #EDF1F4;
  --accent:     #F26B21;
  --accent-dk:  #C9510C;
  --accent-lt:  #FFF1E8;
  --ok:         #157F5B;
  --ok-lt:      #E8F5F0;
  --warn:       #B4661B;
  --warn-lt:    #FDF3E7;

  /* Type */
  --ff: "Inter", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --ff-mono: "JetBrains Mono", "SF Mono", "Cascadia Mono", ui-monospace, "Menlo", "Consolas", monospace;

  /* Space */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --s9: 96px; --s10: 128px;

  /* Structure */
  --maxw: 1240px;
  --nav-h: 68px;
  --radius: 2px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--ff);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
table { border-collapse: collapse; width: 100%; }
/* safety net: never let any fixed/absolute or long-string element push a
   horizontal scrollbar on phones */
html, body { overflow-x: clip; }

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s5); }
.wrap-narrow { max-width: 820px; margin: 0 auto; padding: 0 var(--s5); }
.section { padding: var(--s9) 0; }
.section-sm { padding: var(--s7) 0; }
.section-alt { background: var(--bg-2); }
.section-dark { background: var(--ink-2); color: #fff; }
.section-dark h2, .section-dark h3 { color: #fff; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.94);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  height: var(--nav-h);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s5);
  height: 100%; display: flex; align-items: center; gap: var(--s6);
}
.brand { display: flex; align-items: center; gap: var(--s3); flex-shrink: 0; }
.brand-mark {
  width: 30px; height: 30px; background: var(--ink-2);
  display: grid; place-items: center;
  font-family: var(--ff-mono); font-size: 13px; font-weight: 700;
  color: var(--accent); letter-spacing: -0.5px;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }
.brand-sub { font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 500; }

.nav-links { display: flex; align-items: center; gap: var(--s5); margin-left: auto; }
.nav-links a {
  font-size: 13.5px; font-weight: 500; color: var(--steel);
  padding: 6px 0; position: relative; white-space: nowrap;
}
.nav-links a:hover { color: var(--accent); }
.nav-links a.is-active { color: var(--ink); font-weight: 600; }
.nav-links a.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--accent);
}
.nav-cta { margin-left: var(--s4); }
.nav-toggle { display: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 12px 22px; border-radius: var(--radius);
  font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  border: 1px solid transparent; transition: all .16s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dk); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: #fff; }
.btn-ghost:hover { border-color: var(--ink); }
.btn-dark { background: var(--ink-2); color: #fff; }
.btn-dark:hover { background: var(--ink); }
.btn-sm { padding: 9px 16px; font-size: 13px; }
.btn-lg { padding: 15px 30px; font-size: 15px; }
.btn-arrow::after { content: "→"; font-size: 15px; transition: transform .16s; }
.btn-arrow:hover::after { transform: translateX(3px); }

/* ---------- Hero ---------- */
.hero { border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.hero-grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--s9);
  align-items: center; padding: var(--s9) 0 var(--s8);
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-dk);
  background: var(--accent-lt); padding: 5px 10px; border-radius: var(--radius);
  margin-bottom: var(--s5);
}
.hero h1 {
  font-size: clamp(36px, 4.4vw, 58px); line-height: 1.06;
  letter-spacing: -0.035em; font-weight: 700; margin-bottom: var(--s5);
}
.hero h1 em { font-style: normal; color: var(--slate); }
.hero-lead {
  font-size: 18px; line-height: 1.62; color: var(--steel);
  max-width: 560px; margin-bottom: var(--s6);
}
.hero-actions { display: flex; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s7); }

.hero-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}
.hero-stat { padding: var(--s4) var(--s4) 0 0; }
.hero-stat + .hero-stat { border-left: 1px solid var(--line); padding-left: var(--s4); }
.hero-stat b {
  display: block; font-family: var(--ff-mono); font-size: 26px; font-weight: 600;
  letter-spacing: -0.03em; color: var(--ink); line-height: 1.1;
}
.hero-stat span { font-size: 12.5px; color: var(--muted); line-height: 1.35; display: block; margin-top: 3px; }

/* Hero visual — spec panel, not a stock photo */
.spec-panel {
  background: var(--ink-2); color: #fff; padding: var(--s6);
  border-radius: var(--radius); position: relative;
}
.spec-panel::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 28px 28px; pointer-events: none;
}
.spec-head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid rgba(255,255,255,.13); padding-bottom: var(--s3);
  margin-bottom: var(--s4); position: relative;
}
.spec-head span:first-child {
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent);
}
.spec-head span:last-child { font-family: var(--ff-mono); font-size: 11px; color: rgba(255,255,255,.45); }
.spec-row {
  display: flex; justify-content: space-between; gap: var(--s4);
  padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.07);
  font-size: 13px; position: relative;
}
.spec-row:last-child { border-bottom: 0; }
.spec-row dt { color: rgba(255,255,255,.52); font-size: 12.5px; }
.spec-panel .spec-row dd { margin: 0; font-family: var(--ff-mono); font-size: 12.5px; color: #fff; text-align: right; }

/* ---------- Section headers ---------- */
.sec-head { margin-bottom: var(--s7); max-width: 720px; }
.sec-tag {
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-dk); margin-bottom: var(--s3);
  display: block;
}
.sec-head h2 { font-size: clamp(26px, 3vw, 38px); margin-bottom: var(--s3); }
.sec-head p { font-size: 16.5px; color: var(--slate); line-height: 1.62; }
.sec-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s6); flex-wrap: wrap; max-width: none; }
.sec-head-row > div { max-width: 720px; }

/* ---------- Card grids ---------- */
.grid { display: grid; gap: var(--s4); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Scenario card */
.scn-card {
  border: 1px solid var(--line); background: #fff;
  display: flex; flex-direction: column; overflow: hidden;
  transition: border-color .16s, box-shadow .16s, transform .16s;
  position: relative; min-height: 220px;
}
.scn-img { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--bg-3); overflow: hidden; }
.scn-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.3,1); }
.scn-card:hover .scn-img img { transform: scale(1.04); }
.scn-body { padding: 20px 24px 18px; display: flex; flex-direction: column; flex: 1; }
.scn-k { font-size: 10px; letter-spacing: .12em; color: var(--muted); margin-bottom: 8px; }
.scn-card:hover {
  border-color: var(--ink-2); box-shadow: 0 8px 28px rgba(15,42,63,.09);
  transform: translateY(-2px);
}
.scn-num {
  position: absolute; left: 12px; top: 12px;
  font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .08em;
  color: #fff; background: rgba(8,24,36,.62); backdrop-filter: blur(3px);
  padding: 3px 7px 2px; border-radius: 1px;
}
.scn-card h3 { font-size: 17.5px; margin-bottom: var(--s2); letter-spacing: -0.015em; }
.scn-card p { font-size: 13.5px; color: var(--slate); line-height: 1.55; flex-grow: 1; }
.scn-foot {
  margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line-soft);
  font-family: var(--ff-mono); font-size: 11px; color: var(--steel);
  display: flex; justify-content: space-between;
}
.scn-card:hover .scn-foot { color: var(--accent-dk); }

/* ---------- Value / differentiation ---------- */
.val-item {
  border-top: 2px solid var(--ink-2); padding-top: var(--s4);
  display: flex; flex-direction: column; gap: var(--s2);
}
.val-item .k {
  font-family: var(--ff-mono); font-size: 11px; color: var(--accent-dk);
  letter-spacing: .1em;
}
.val-item h3 { font-size: 16.5px; }
.val-item p { font-size: 13.5px; color: var(--slate); line-height: 1.6; }

/* ---------- Product cards ---------- */
.prod-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line); border-right: 0; border-bottom: 0;
  background: #fff;
}
.prod-card {
  background: #fff; padding: var(--s5) var(--s4);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  transition: background .14s; display: flex; flex-direction: column;
}
.prod-card:hover { background: var(--bg-2); }
.prod-model { font-family: var(--ff-mono); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 2px; }
.prod-form { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; margin-bottom: var(--s3); }
.prod-spec { font-size: 12.5px; color: var(--steel); line-height: 1.65; }
.prod-spec span { color: var(--muted); }
.prod-tags { margin-top: var(--s3); display: flex; gap: 4px; flex-wrap: wrap; }
.tag {
  font-family: var(--ff-mono); font-size: 10px; padding: 2px 6px;
  background: var(--bg-3); color: var(--steel); letter-spacing: .02em;
}
.tag-accent { background: var(--accent-lt); color: var(--accent-dk); }

/* ---------- Table ---------- */
.tbl { font-size: 13.5px; border: 1px solid var(--line); }
.tbl th {
  background: var(--bg-2); text-align: left; padding: 11px var(--s3);
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tbl td { padding: 12px var(--s3); border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: var(--bg-2); }
.tbl .mono { font-family: var(--ff-mono); font-size: 12.5px; }
.tbl-wrap { overflow-x: auto; }

/* ---------- Prose (articles / solution pages) ---------- */
.prose { font-size: 16.5px; line-height: 1.75; color: var(--ink); }
.prose > * + * { margin-top: var(--s4); }
.prose h2 { font-size: 26px; margin-top: var(--s7); letter-spacing: -0.025em; }
.prose h3 { font-size: 19px; margin-top: var(--s6); }
.prose p { color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-top: var(--s2); }
.prose li::marker { color: var(--accent); }
.prose blockquote {
  margin: var(--s5) 0; padding: var(--s4) var(--s5);
  border-left: 3px solid var(--accent); background: var(--bg-2);
  font-size: 16px; color: var(--steel);
}
.prose table { margin: var(--s5) 0; font-size: 13.5px; }
.prose th { background: var(--bg-2); text-align: left; padding: 10px 12px; border: 1px solid var(--line); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.prose td { padding: 10px 12px; border: 1px solid var(--line); }
.prose code {
  font-family: var(--ff-mono); font-size: 0.88em; background: var(--bg-3);
  padding: 1px 5px; border-radius: 2px;
}
.prose a { color: var(--accent-dk); border-bottom: 1px solid rgba(201,81,12,.3); }
.prose a:hover { border-bottom-color: var(--accent-dk); }

/* ---------- Page header ---------- */
.page-head { border-bottom: 1px solid var(--line); padding: var(--s8) 0 var(--s7); background: var(--bg-2); }
.breadcrumb {
  font-family: var(--ff-mono); font-size: 11px; color: var(--muted);
  margin-bottom: var(--s4); display: flex; gap: var(--s2); flex-wrap: wrap;
}
.breadcrumb a:hover { color: var(--accent-dk); }
.page-head h1 { font-size: clamp(30px, 3.6vw, 46px); letter-spacing: -0.03em; margin-bottom: var(--s3); max-width: 900px; }
.page-head .lead { font-size: 17.5px; color: var(--slate); max-width: 760px; line-height: 1.62; }

/* ---------- Data flow diagram ---------- */
.flow { display: flex; align-items: stretch; gap: 1px; background: var(--line); border: 1px solid var(--line); margin: var(--s6) 0; }
.flow-step { background: #fff; padding: var(--s4); flex: 1; min-width: 0; }
.flow-step .n {
  font-family: var(--ff-mono); font-size: 10px; color: var(--accent-dk);
  letter-spacing: .1em; margin-bottom: var(--s2);
}
.flow-step b { display: block; font-size: 13.5px; margin-bottom: 4px; }
.flow-step span { font-size: 12px; color: var(--slate); line-height: 1.45; display: block; }

/* ---------- Matrix / spec sheet ---------- */
.spec-sheet { border: 1px solid var(--line); }
.spec-sheet .row { display: grid; grid-template-columns: 200px 1fr; border-bottom: 1px solid var(--line-soft); }
.spec-sheet .row:last-child { border-bottom: 0; }
.spec-sheet dt { padding: 11px var(--s4); background: var(--bg-2); font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.spec-sheet dd { margin: 0; padding: 11px var(--s4); font-size: 13.5px; }
.spec-sheet dd.mono { font-family: var(--ff-mono); font-size: 12.5px; }

/* ---------- Selector tool ---------- */
.selector { border: 1px solid var(--line); background: #fff; }
.sel-step { padding: var(--s5); border-bottom: 1px solid var(--line-soft); }
.sel-step:last-of-type { border-bottom: 0; }
.sel-label {
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: var(--s3);
  display: flex; align-items: center; gap: var(--s2);
}
.sel-label b { color: var(--accent-dk); }
.chips { display: flex; gap: var(--s2); flex-wrap: wrap; }
.chip {
  border: 1px solid var(--line); background: #fff; padding: 9px 14px;
  font-size: 13px; color: var(--steel); border-radius: var(--radius);
  transition: all .14s;
}
.chip:hover { border-color: var(--steel); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink-2); border-color: var(--ink-2); color: #fff; }
.sel-result { background: var(--bg-2); padding: var(--s5); border-top: 1px solid var(--line); }
.sel-result .hit { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); gap: var(--s4); }
.sel-result .hit:last-child { border-bottom: 0; }
.sel-result .hit b { font-family: var(--ff-mono); font-size: 14px; }
.sel-result .hit span { font-size: 12.5px; color: var(--slate); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--ink-2); color: #fff; padding: var(--s8) 0; }
.cta-band h2 { font-size: clamp(24px, 3vw, 34px); margin-bottom: var(--s3); color: #fff; }
.cta-band p { color: rgba(255,255,255,.68); font-size: 16px; max-width: 620px; }
.cta-band .row { display: flex; justify-content: space-between; align-items: center; gap: var(--s6); flex-wrap: wrap; }
.cta-actions { display: flex; gap: var(--s3); flex-wrap: wrap; }
.btn-on-dark { border: 1px solid rgba(255,255,255,.28); color: #fff; background: transparent; }
.btn-on-dark:hover { border-color: #fff; background: rgba(255,255,255,.06); }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: rgba(255,255,255,.6); padding: var(--s8) 0 var(--s5); font-size: 13.5px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s6); padding-bottom: var(--s7); border-bottom: 1px solid rgba(255,255,255,.1); }
.footer h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.42); margin-bottom: var(--s3); font-weight: 600; }
.footer a { display: block; padding: 4px 0; color: rgba(255,255,255,.72); font-size: 13.5px; }
.footer a:hover { color: var(--accent); }
.footer .brand-name { color: #fff; }
.footer .brand-sub { color: rgba(255,255,255,.4); }
.footer-note { display: flex; justify-content: space-between; padding-top: var(--s5); gap: var(--s5); flex-wrap: wrap; font-size: 12px; color: rgba(255,255,255,.4); }

/* ---------- Article list ---------- */
.post-row {
  display: grid; grid-template-columns: 150px 1fr auto; gap: var(--s5);
  padding: var(--s5) 0; border-bottom: 1px solid var(--line);
  align-items: start; transition: .14s;
}
.post-row:hover { background: var(--bg-2); }
.post-row .p-cat { font-family: var(--ff-mono); font-size: 11px; color: var(--accent-dk); letter-spacing: .06em; text-transform: uppercase; }
.post-row h3 { font-size: 18px; margin-bottom: 6px; line-height: 1.35; }
.post-row p { font-size: 13.5px; color: var(--slate); line-height: 1.55; }
.post-row .p-meta { font-family: var(--ff-mono); font-size: 11px; color: var(--muted); white-space: nowrap; }

/* ---------- Misc ---------- */
.notice {
  border: 1px solid var(--warn); background: var(--warn-lt); color: #7A4510;
  padding: var(--s4); font-size: 13.5px; border-radius: var(--radius);
}
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; padding: 4px 9px;
  background: var(--ok-lt); color: var(--ok);
}
.pill::before { content: ""; width: 5px; height: 5px; background: currentColor; border-radius: 50%; }
.mono { font-family: var(--ff-mono); }
.muted { color: var(--muted); }
.divider { height: 1px; background: var(--line); margin: var(--s7) 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s7); padding: var(--s7) 0; }
  .grid-4, .prod-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-toggle {
    display: block; margin-left: auto; background: none; border: 1px solid var(--line);
    padding: 7px 12px; font-size: 13px; border-radius: var(--radius);
  }
  .nav-links.is-open {
    display: flex; position: absolute; top: var(--nav-h); left: 0; right: 0;
    background: #fff; flex-direction: column; align-items: stretch;
    padding: var(--s4) var(--s5); gap: var(--s3);
    border-bottom: 1px solid var(--line); box-shadow: 0 12px 24px rgba(0,0,0,.08);
  }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: 1fr; }
  .hero-stat + .hero-stat { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: var(--s3); }
  .flow { flex-direction: column; }
  .spec-sheet .row { grid-template-columns: 1fr; }
  .spec-sheet dt { padding-bottom: 4px; }
  .post-row { grid-template-columns: 1fr; gap: var(--s2); }
  .section { padding: var(--s7) 0; }
}
@media (max-width: 560px) {
  .grid-4, .prod-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-actions .btn { flex: 1; }
}

/* ---------- Print ---------- */
@media print {
  .nav, .footer, .cta-band, .nav-toggle { display: none; }
  body { font-size: 11pt; }
  .section { padding: 16pt 0; }
}

/* model row sub-label and dimmed (not fit for purpose) rows */
.cell-sub { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.3; }
.tbl tr.is-dim td { background: #FDF3EE; }
.tbl tr.is-dim td, .tbl tr.is-dim td a b { color: #8A6A58; }

/* Four-up stat strip (marine landing page): overrides the 3-up default and collapses on small screens */
.stat-row { grid-template-columns: repeat(4, 1fr); border-top: 0; }
@media (max-width: 900px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .stat-row .hero-stat:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 560px) {
  .stat-row { grid-template-columns: 1fr; }
  .stat-row .hero-stat + .hero-stat { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: var(--s3); }
}\n
/* ---------- Hazardous-area certification notice ---------- */
.cert-note {
  margin-top: 22px; border-left: 3px solid var(--line); background: var(--surface);
  padding: 14px 18px; max-width: 760px;
}
.cert-note .cert-flag {
  display: inline-block; font-size: 10.5px; letter-spacing: .1em; font-weight: 700;
  padding: 3px 8px; border-radius: 2px; margin-right: 10px; vertical-align: 2px;
}
.cert-note .cert-mark { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.cert-note p { font-size: 13px; line-height: 1.55; color: var(--slate); margin: 8px 0 0; }
.cert-note.is-cert { border-left-color: var(--ok); }
.cert-note.is-cert .cert-flag { background: var(--ok); color: #fff; }
.cert-note.is-none { border-left-color: var(--warn); }
.cert-note.is-none .cert-flag { background: var(--warn); color: #fff; }

/* ---------------- start-here picks (home) ---------------- */
.pick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
.pick-card {
  border: 1px solid var(--line); background: #fff; border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; text-decoration: none;
  transition: border-color .14s, transform .14s;
}
.pick-card:hover { border-color: var(--steel); transform: translateY(-2px); }
.pick-imgs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px;
  aspect-ratio: 16 / 9; background: #fff; padding: 9px; position: relative;
}
.pick-imgs img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pick-badge {
  position: absolute; top: 7px; right: 7px; background: var(--accent); color: #fff;
  font-size: 10px; line-height: 1; padding: 4px 8px; border-radius: 999px;
  box-shadow: 0 2px 6px rgba(11,31,46,.18);
}
.pick-body { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 14px; }
.pick-body b { font-size: 14.5px; color: var(--ink); }
.pick-body span { font-size: 12px; color: var(--slate); line-height: 1.45; }
.pick-go { margin-top: auto; padding-top: 6px; font-size: 10.5px; color: var(--accent-dk); letter-spacing: .08em; font-weight: 600; }
.scene-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: var(--s5); }
.scene-chip {
  position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 3px; text-decoration: none; background: var(--ink-2);
  box-shadow: 0 2px 10px rgba(11,31,46,.08);
}
.scene-chip img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  display: block; filter: saturate(.94); transition: transform .35s ease, filter .35s ease;
}
.scene-chip:hover img { transform: scale(1.045); filter: saturate(1.05); }
.scene-num {
  position: absolute; top: 14px; left: 14px; z-index: 1; padding: 4px 8px;
  color: #fff; background: rgba(11,31,46,.56); border: 1px solid rgba(255,255,255,.28);
  font-size: 12px; line-height: 1.2; letter-spacing: .08em; backdrop-filter: blur(5px);
}
.scene-copy {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 64px 20px 20px; color: #fff;
  background: linear-gradient(180deg, rgba(5,19,29,.04) 24%, rgba(5,19,29,.34) 52%, rgba(5,19,29,.94) 100%);
}
.scene-copy b {
  display: block; max-width: 95%; color: #fff; font-size: 22px; font-weight: 650;
  line-height: 1.16; letter-spacing: -.018em; text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.scene-go {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,.34);
  color: rgba(255,255,255,.9); font-size: 13px; font-weight: 500; line-height: 1.3;
  letter-spacing: .025em;
}
.scene-go i { color: #fff; font-size: 21px; font-style: normal; line-height: 1; transition: transform .18s; }
.scene-chip:hover .scene-go i { transform: translateX(4px); color: #FF9A5C; }
.scene-chip:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.quick-row {
  margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
}
.quick-label { font-size: 10px; letter-spacing: .12em; color: var(--muted); white-space: nowrap; }
.quick-tags { display: flex; gap: var(--s2); flex-wrap: wrap; }
.chip-link { text-decoration: none; }
.chip-link:hover { border-color: var(--accent); color: var(--accent-dk); }

.quick-panel {
  margin-top: var(--s5); border: 1px solid var(--line); background: #fff;
  padding: 18px 20px 6px; box-shadow: 0 2px 12px rgba(11,31,46,.05);
}
.quick-panel .quick-row { margin-top: 0; padding-top: 12px; border-top: 0; }
.quick-panel .quick-row + .quick-row { border-top: 1px solid var(--line-soft); margin-top: 12px; }
.quick-panel .quick-label { min-width: 118px; }
.quick-panel .quick-tags { gap: 8px; }

@media (max-width: 640px) {
  .quick-panel { padding: 14px 16px 2px; }
  .quick-panel .quick-label { min-width: 100%; }
}

/* ---------------- product finder note (products) ---------------- */
.finder-note {
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  background: var(--bg-2); padding: 14px 18px; margin-bottom: 18px;
  display: flex; justify-content: space-between; align-items: center; gap: var(--s4); flex-wrap: wrap;
}
.finder-note p { margin: 0; font-size: 13px; color: var(--steel); max-width: 640px; line-height: 1.55; }

/* ---------------- product visual (detail) ---------------- */
.prod-visual { margin: 0 0 28px; border: 1px solid var(--line); background: var(--bg-3); }
.prod-visual img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; display: block; }
.prod-visual figcaption {
  font-size: 10px; letter-spacing: .1em; color: var(--muted);
  padding: 8px 12px; border-top: 1px solid var(--line); background: #fff;
}

/* ---------------- hazardous-area finder ---------------- */
.hz-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.hz-tier { border: 1px solid var(--line); background: #fff; padding: 22px 24px; border-top: 3px solid var(--line); }
.hz-tier h3 { font-size: 15.5px; margin: 10px 0 8px; }
.hz-tier p { font-size: 12.5px; color: var(--slate); line-height: 1.6; margin: 0; }
.hz-tier.is-cert { border-top-color: var(--ok); }
.hz-tier.is-gb { border-top-color: var(--warn); }
.hz-tier.is-none { border-top-color: var(--accent); }
.hz-flag {
  display: inline-block; font-size: 10px; letter-spacing: .1em; padding: 3px 8px; border: 1px solid;
}
.hz-tier.is-cert .hz-flag { color: var(--ok); border-color: var(--ok); background: var(--ok-lt); }
.hz-tier.is-gb .hz-flag { color: var(--warn); border-color: var(--warn); background: var(--warn-lt); }
.hz-tier.is-none .hz-flag { color: var(--accent-dk); border-color: var(--accent); background: var(--accent-lt); }
.hz-step { margin-bottom: var(--s6); }
.hz-step-head { display: flex; align-items: baseline; gap: var(--s3); margin-bottom: 12px; }
.hz-step-head .mono { font-size: 10.5px; letter-spacing: .12em; color: var(--accent-dk); }
.hz-step-head h3 { font-size: 17px; margin: 0; }
.hz-chip { padding: 11px 16px; font-size: 13.5px; }
.hz-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.hz-ind-note {
  margin-top: 12px; padding: 10px 14px; border-left: 3px solid var(--steel);
  background: var(--bg-2); font-size: 12.5px; color: var(--steel); line-height: 1.55;
}
.hz-result {
  background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--ink-2);
  padding: var(--s5); min-height: 72px;
}
.hz-result .hit {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s4);
  padding: 14px 0; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap;
}
.hz-result .hit:last-child { border-bottom: 0; }
.hz-result .hit b { font-family: var(--ff-mono); font-size: 15px; }
.hz-badge { font-size: 9.5px; letter-spacing: .1em; padding: 3px 8px; border: 1px solid; vertical-align: 2px; }
.hz-badge.is-cert { color: var(--ok); border-color: var(--ok); background: var(--ok-lt); }
.hz-badge.is-gb { color: var(--warn); border-color: var(--warn); background: var(--warn-lt); }
.hz-badge.is-none { color: var(--accent-dk); border-color: var(--accent); background: var(--accent-lt); }
.hz-warn {
  border: 1px solid var(--warn); border-left: 3px solid var(--warn); background: var(--warn-lt);
  padding: 12px 16px; font-size: 13px; color: var(--warn); line-height: 1.6; margin-bottom: 14px;
}

@media (max-width: 1080px) {
  .pick-grid { grid-template-columns: repeat(3, 1fr); }
  .scene-strip { grid-template-columns: repeat(2, 1fr); }
  .scene-chip { aspect-ratio: 16 / 9; }
  .hz-tiers { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pick-grid { grid-template-columns: 1fr; }
  .scene-strip { grid-template-columns: 1fr; gap: 12px; }
  .scene-chip { aspect-ratio: 16 / 10; }
}

/* ---------------- product gallery (detail) ---------------- */
.gal { margin-bottom: 30px; }
.gal-stage {
  position: relative; border: 1px solid var(--line); background: #0F2A3F;
  overflow: hidden;
}
.gal-stage img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; cursor: zoom-in; }
.gal-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.35);
  background: rgba(15,42,63,.72); color: #fff; font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background .14s;
}
.gal-nav:hover { background: var(--accent); border-color: var(--accent); }
.gal-prev { left: 12px; }
.gal-next { right: 12px; }
.gal-caption { border: 1px solid var(--line); border-top: 0; background: #fff; padding: 12px 16px; }
.gal-capline { display: flex; align-items: center; gap: 10px; }
.gal-capline b { font-size: 13.5px; color: var(--ink); letter-spacing: .02em; }
.gal-captext { display: block; font-size: 12px; color: var(--slate); margin-top: 4px; line-height: 1.5; }
.gal-badge {
  font-size: 9px; letter-spacing: .12em; padding: 3px 7px; border: 1px solid var(--ok);
  color: var(--ok); background: var(--ok-lt); white-space: nowrap;
}
.gal-badge.is-card { border-color: var(--accent); color: var(--accent-dk); background: var(--accent-lt); }
.gal-thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 8px; }
.gal-shot {
  padding: 0; border: 2px solid var(--line); background: #0F2A3F; cursor: pointer;
  overflow: hidden; transition: border-color .12s;
}
.gal-shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; opacity: .82; }
.gal-shot:hover img { opacity: 1; }
.gal-shot.is-on { border-color: var(--accent); }
.gal-shot.is-on img { opacity: 1; }
.gal-note { font-size: 10.5px; color: var(--muted); margin: 12px 0 0; letter-spacing: .04em; }

/* lightbox */
.lb {
  position: fixed; inset: 0; background: rgba(8,20,30,.92); display: none;
  align-items: center; justify-content: center; z-index: 90; cursor: zoom-out; padding: 4vh 4vw;
}
.lb.is-open { display: flex; }
.lb img { max-width: 100%; max-height: 92vh; border: 1px solid rgba(255,255,255,.2); }

/* product card thumbnail */
.prod-thumb { background: #0F2A3F; border-bottom: 1px solid var(--line); }
.prod-thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.prod-card { padding: 0; }
.prod-body { padding: 14px 16px 16px; }
.prod-card .prod-model { margin-bottom: 2px; }

@media (max-width: 900px) {
  .gal-thumbs { grid-template-columns: repeat(3, 1fr); }
}

/* ---------------- homepage scene-led visual pass ---------------- */
.hero-home {
  border-bottom: 0; color: #fff; background-color: var(--ink);
  position: relative;
  background-image:
    linear-gradient(90deg, rgba(4,18,29,.94) 0%, rgba(4,18,29,.79) 36%, rgba(4,18,29,.25) 70%, rgba(4,18,29,.30) 100%),
    linear-gradient(0deg, rgba(4,18,29,.62) 0%, transparent 52%),
    url("../img/guide/bastion-scene-warehouse.webp");
  background-position: center, center, center;
  background-size: cover, cover, cover;
  background-repeat: no-repeat;
}
.hero-home-grid {
  grid-template-columns: minmax(0, 760px); gap: 0; align-content: start;
  min-height: 660px; padding: 84px 0 0;
}
.hero-home-grid > div { max-width: 760px; }
.hero-home h1 {
  max-width: 750px; color: #fff; font-size: clamp(44px, 5vw, 68px);
  line-height: 1.04; text-shadow: 0 2px 12px rgba(0,0,0,.22);
}
.hero-home .hero-eyebrow {
  color: #fff; background: rgba(11,31,46,.58); border: 1px solid rgba(255,255,255,.25);
  padding: 7px 11px; backdrop-filter: blur(5px);
}
.hero-home .hero-lead {
  max-width: 650px; color: rgba(255,255,255,.9); font-size: 19px; line-height: 1.62;
  text-shadow: 0 1px 5px rgba(0,0,0,.28);
}
.hero-home .hero-actions { margin-bottom: 52px; }
.hero-home .btn-ghost {
  color: #fff; background: rgba(11,31,46,.44); border-color: rgba(255,255,255,.55);
  backdrop-filter: blur(4px);
}
.hero-home .btn-ghost:hover { color: #fff; background: rgba(11,31,46,.72); border-color: #fff; }
.hero-home .hero-stats {
  background: rgba(7,26,39,.68); border-top: 1px solid rgba(255,255,255,.32);
  padding: 20px 22px; backdrop-filter: blur(7px);
}
.hero-home .hero-stat { padding-top: 0; }
.hero-home .hero-stat + .hero-stat { border-left-color: rgba(255,255,255,.24); }
.hero-home .hero-stat b { color: #fff; font-size: 30px; }
.hero-home .hero-stat span { color: rgba(255,255,255,.8); font-size: 14px; }

/* The background photo is an application scene, so it carries a caption that
   names the site, the shift and the device — not a decorative alt-text. */
.hero-note {
  position: absolute; right: max(32px, calc((100vw - 1240px) / 2));
  bottom: 56px; width: 320px; display: flex; flex-direction: column; gap: 7px;
  padding: 18px 20px 16px; text-decoration: none; color: #fff;
  background: rgba(7,26,39,.72); border: 1px solid rgba(255,255,255,.26);
  border-left: 3px solid var(--accent); backdrop-filter: blur(9px);
  transition: background .16s, border-color .16s;
}
.hero-note:hover { background: rgba(7,26,39,.86); border-color: rgba(255,255,255,.5); }
.hero-note-tag {
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); 
}
.hero-note b { font-size: 17px; line-height: 1.25; }
.hero-note > span:not(.hero-note-tag):not(.hero-note-go) {
  font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.78);
}
.hero-note-go { font-size: 11px; letter-spacing: .06em; color: #fff; margin-top: 2px; }
@media (max-width: 1180px) { .hero-note { display: none; } }

/* Larger, higher-contrast type for the main browsing paths. */
body { font-size: 17px; }
.brand-name { font-size: 16px; }
.brand-sub { font-size: 10px; }
.nav-links a { font-size: 14.5px; }
.btn { font-size: 15px; }
.btn-sm { font-size: 14px; }
.btn-lg { font-size: 16px; }
.hero-eyebrow { font-size: 12px; }
.sec-tag { font-size: 12px; }
.sec-head h2 { font-size: clamp(30px, 3vw, 42px); }
.sec-head p { font-size: 18px; line-height: 1.62; }
.pick-body { padding: 16px 17px 18px; gap: 6px; }
.pick-body b { font-size: 18px; }
.pick-body span { font-size: 14px; line-height: 1.5; }
.pick-body .pick-go { margin-top: 8px; font-size: 12px; }
.scn-card h3 { font-size: 20px; }
.scn-card p { font-size: 15px; }
.scn-foot { font-size: 12px; }
.val-item h3 { font-size: 18px; }
.val-item p { font-size: 15px; }
.prod-model { font-size: 16px; }
.prod-form { font-size: 12px; }
.prod-spec { font-size: 14px; }
.tag { font-size: 11px; }
.quick-label { font-size: 11px; }
.chip { font-size: 14px; }
.post-row h3 { font-size: 20px; }
.post-row p { font-size: 15px; }

@media (max-width: 1080px) {
  .hero-home-grid { min-height: 630px; padding: 70px 0 0; }
}
@media (max-width: 640px) {
  .hero-home {
    background-image:
      linear-gradient(90deg, rgba(4,18,29,.94) 0%, rgba(4,18,29,.72) 68%, rgba(4,18,29,.48) 100%),
      linear-gradient(0deg, rgba(4,18,29,.72) 0%, transparent 58%),
      url("../img/guide/bastion-scene-warehouse.webp");
    background-position: center, center, 61% center;
  }
  .hero-home-grid { min-height: 0; padding: 56px 0 0; }
  .hero-home h1 { font-size: clamp(38px, 10.5vw, 50px); }
  .hero-home .hero-lead { font-size: 17px; }
  .hero-home .hero-actions { margin-bottom: 38px; }
  .hero-home .hero-stats { grid-template-columns: 1fr; padding: 8px 18px; }
  .hero-home .hero-stat { padding: 13px 0; }
  .hero-home .hero-stat + .hero-stat {
    border-left: 0; border-top: 1px solid rgba(255,255,255,.2); padding-left: 0;
  }
  .hero-home .hero-stat span { font-size: 14px; }
  .scene-copy b { font-size: 23px; }
  .sec-head p { font-size: 17px; }
}

/* ============================================================
   Catalogue page — right-hand facet rail + family blocks
   ============================================================ */
.cat-head { padding-bottom: 0; }
.cat-head-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px;
  align-items: end; margin-bottom: 32px;
}
.cat-head h1 { max-width: 760px; }
.cat-kpi { display: flex; gap: 0; margin: 0; border: 1px solid var(--line); background: #fff; }
.cat-kpi > div { padding: 14px 22px; min-width: 96px; }
.cat-kpi > div + div { border-left: 1px solid var(--line); }
.cat-kpi dt { font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cat-kpi dd { margin: 4px 0 0; font-size: 26px; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; }
.cat-pills { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 24px; }
.cat-pill {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); background: #fff; padding: 9px 14px;
  font-size: 14px; color: var(--steel); border-radius: var(--radius);
}
.cat-pill span { font-family: var(--ff-mono); font-size: 11px; color: var(--muted); }
.cat-pill:hover { border-color: var(--ink-2); color: var(--ink); }

.cat-shell { display: grid; grid-template-columns: minmax(0, 1fr) 314px; gap: 48px; align-items: start; }
.cat-main { min-width: 0; }

/* --- facet rail (right, sticky, foreign-market habit) --- */
.facet {
  position: sticky; top: calc(var(--nav-h) + 20px);
  border: 1px solid var(--line); background: #fff; padding: 20px 20px 22px;
  max-height: calc(100vh - var(--nav-h) - 40px); overflow-y: auto;
}
.facet-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.facet-head h2 { font-size: 20px; letter-spacing: -0.02em; margin: 0; }
.facet-clear {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-size: 12px; color: var(--accent-dk); text-decoration: underline; text-underline-offset: 3px;
}
.facet-count { font-size: 12.5px; color: var(--muted); margin-bottom: 16px; }
.facet-count b { color: var(--ink); font-family: var(--ff-mono); }
.facet-search { display: block; margin-bottom: 6px; }
.facet-search span {
  display: block; font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.facet-search input {
  width: 100%; padding: 9px 11px; font: inherit; font-size: 14px;
  border: 1px solid var(--line); background: var(--bg-2); color: var(--ink);
}
.facet-search input:focus { outline: 2px solid var(--accent); outline-offset: -1px; background: #fff; }
.facet-group { padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--line-soft); }
.facet-group h3 { font-size: 14px; margin: 0 0 10px; letter-spacing: 0; color: var(--ink); }
.fx-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.fx { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--steel); cursor: pointer; padding: 5px 0; }
.fx input { position: absolute; opacity: 0; width: 0; height: 0; }
.fx-box {
  width: 15px; height: 15px; border: 1px solid #B9C6CF; background: #fff; flex: none;
  display: inline-flex; align-items: center; justify-content: center; transition: all .12s;
}
.fx input:checked + .fx-box { background: var(--ink-2); border-color: var(--ink-2); }
.fx input:checked + .fx-box::after {
  content: ""; width: 7px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: translateY(-1px) rotate(-45deg);
}
.fx input:focus-visible + .fx-box { outline: 2px solid var(--accent); outline-offset: 2px; }
.fx:hover .fx-text { color: var(--ink); }
.fx-text { flex: 1; }
.fx-n { font-family: var(--ff-mono); font-size: 10.5px; color: var(--muted); }
.fx.is-quiet { opacity: 0.42; }
.fx.is-quiet .fx-text { text-decoration: line-through; text-decoration-color: var(--line); }
.facet-foot { font-size: 12px; color: var(--muted); line-height: 1.6; margin: 18px 0 0; }

/* --- family blocks --- */
.cat-block { padding-bottom: 46px; margin-bottom: 46px; border-bottom: 1px solid var(--line); }
.cat-block:last-child { border-bottom: 0; margin-bottom: 0; }
.cat-block-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 20px; }
.cat-block-head h2 { font-size: 26px; letter-spacing: -0.025em; margin: 0 0 6px; display: flex; align-items: baseline; gap: 10px; }
.cat-count { font-family: var(--ff-mono); font-size: 12px; color: var(--muted); font-weight: 400; }
.cat-block-head p { font-size: 14.5px; color: var(--slate); max-width: 620px; line-height: 1.6; margin: 0; }
.cat-all { font-size: 13px; color: var(--accent-dk); white-space: nowrap; }
.cat-all:hover { color: var(--ink); }
.cat-note { font-family: var(--ff-mono); font-size: 11px; color: var(--warn); margin-bottom: 12px; }
.cat-more-btn {
  margin-top: 14px; width: 100%; padding: 13px; cursor: pointer;
  border: 1px dashed var(--line); background: var(--bg-2);
  font-family: var(--ff-mono); font-size: 12px; letter-spacing: .04em; color: var(--steel);
}
.cat-more-btn:hover { border-color: var(--ink-2); color: var(--ink); background: #fff; }
.cat-more-btn span { color: var(--accent-dk); margin-left: 6px; }
.cat-empty { border: 1px solid var(--line); background: var(--bg-2); padding: 24px; font-size: 15px; color: var(--slate); }

/* --- product cards on the catalogue --- */
.prod-grid { grid-template-columns: repeat(3, 1fr); }
.prod-card { background: #fff; position: relative; }
.prod-card:hover { background: #fff; }
.prod-card:hover .prod-thumb img { transform: scale(1.03); }
.prod-thumb {
  background: #fff;
  border-bottom: 1px solid var(--line-soft); position: relative; overflow: hidden;
}
.prod-thumb img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: contain; display: block;
  padding: 14px; transition: transform .25s ease;
}
.prod-card:not(.has-photo) .prod-thumb { background: var(--ink-2); }
.cat-block { scroll-margin-top: calc(var(--nav-h) + 16px); }
.prod-card:not(.has-photo) .prod-thumb img { object-fit: cover; padding: 0; }

/* --- family banner: the picture carries the family, the copy carries the use --- */
.cat-feature { margin: 0 0 32px; }
.cf-fig {
  display: block; position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: 14px; background: var(--ink-2);
  box-shadow: 0 20px 44px -30px rgba(11, 31, 46, .6);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.cf-fig:hover { border-color: var(--steel); box-shadow: 0 22px 48px -30px rgba(11, 31, 46, .72); }
.cf-fig img { display: block; width: 100%; height: auto; }
.cf-fig picture { display: block; }
.cf-body { margin-top: 22px; }
.cf-kicker {
  display: block; font-family: var(--ff-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-dk); margin-bottom: 9px;
}
.cf-lead h3 { font-size: 22px; line-height: 1.25; letter-spacing: -.02em; margin: 0 0 9px; }
.cf-lead p { font-size: 14.5px; line-height: 1.65; color: var(--slate); max-width: 72ch; margin: 0; }
.cf-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 22px;
  background: var(--line-soft); border: 1px solid var(--line-soft);
  border-radius: 12px; overflow: hidden;
}
.cf-item { background: #fff; padding: 20px 22px 22px; }
.cf-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px; margin-bottom: 12px;
  background: var(--accent-lt); color: var(--accent-dk);
}
.cf-ico svg { width: 18px; height: 18px; }
.cf-item h4 { font-size: 14.5px; letter-spacing: -.01em; margin: 0 0 6px; }
.cf-item p { font-size: 13.5px; line-height: 1.6; color: var(--slate); margin: 0; }
.cf-more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  font-size: 13.5px; font-weight: 600; color: var(--accent-dk);
}
.cf-more:hover { color: var(--ink); }
.cf-more span { transition: transform .15s ease; }
.cf-more:hover span { transform: translateX(3px); }
.cat-feature + .cat-feature { margin-top: 46px; padding-top: 46px; border-top: 1px solid var(--line-soft); }
.cf-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cf-cta {
  display: flex; flex-direction: column; justify-content: center;
  background: linear-gradient(160deg, #fdf3f0 0%, #f8f4f2 100%);
  text-decoration: none; color: var(--ink);
}
.cf-cta h4 { color: var(--accent-dk); }
.cf-cta-go {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  font-size: 13px; font-weight: 600; color: var(--accent-dk);
}
.cf-cta:hover .cf-cta-go span { transform: translateX(3px); }
.cf-cta-go span { transition: transform .15s ease; }
.cf-cta {
  display: flex; flex-direction: column; justify-content: center;
  background: linear-gradient(160deg, #fdf3f0 0%, #f8f4f2 100%);
  text-decoration: none; color: var(--ink);
}
.cf-cta h4 { color: var(--accent-dk); }
.cf-cta-go {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  font-size: 13px; font-weight: 600; color: var(--accent-dk);
}
.cf-cta:hover .cf-cta-go span { transform: translateX(3px); }
.cf-cta-go span { transition: transform .15s ease; }
.cf-chips {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px;
}
.cf-chip {
  display: inline-flex; align-items: center; height: 28px; padding: 0 11px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff;
  font-size: 11.5px; letter-spacing: .04em; color: var(--slate); white-space: nowrap;
}

/* --- model poster: the OEM one-pager, kept whole instead of cropped --- */
.pd-poster { padding: 26px 0 8px; }
.pd-poster figure { margin: 0; }
.pd-poster img {
  display: block; width: 100%; height: auto; border-radius: 12px;
  border: 1px solid var(--line-soft); background: #f6f7f8;
}

@media (max-width: 1080px) {
  .cf-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .cf-lead h3 { font-size: 19px; }
  .cf-grid, .cf-grid-3 { grid-template-columns: 1fr; }
  .cf-item { padding: 18px 18px 20px; }
  .cat-feature + .cat-feature { margin-top: 34px; padding-top: 34px; }
  .cf-chips { gap: 6px; }
  .pd-poster { padding: 14px 0 4px; }
}

/* Phones get a portrait crop of the handsets (served via <picture>), because the
   banner's baked-in headline turns to mush below 640 px. */

.prod-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.prod-model { font-size: 16.5px; }
.prod-form { margin-bottom: 6px; }
.prod-name { font-size: 13.5px; color: var(--slate); line-height: 1.5; margin-bottom: 10px; }
.prod-go {
  margin-top: auto; padding-top: 12px; font-size: 12px; letter-spacing: .04em;
  color: var(--accent-dk); opacity: 1; transition: opacity .15s;
}
.prod-card:hover .prod-go, .prod-card:focus-visible .prod-go { opacity: 1; }
.prod-go span { display: inline-block; transition: transform .15s; }
.prod-card:hover .prod-go span { transform: translateX(3px); }

/* ============================================================
   Product detail — wide gallery + wide parameter sheet
   ============================================================ */
.pd-head { padding-bottom: 34px; }
.pd-head-row { display: flex; justify-content: space-between; gap: 32px; align-items: flex-end; flex-wrap: wrap; }
.pd-head h1 { margin: 0 0 8px; }
.pd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; align-items: center; }
.pd-main { padding-top: 40px; }
.pd-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 48px; align-items: start; }
.pd-media { min-width: 0; }
.pd-side { position: sticky; top: calc(var(--nav-h) + 20px); }
.pd-hook { font-size: 18px; line-height: 1.6; color: var(--ink); margin: 0 0 22px; }
.pd-box { list-style: none; margin: 0; padding: 18px 20px; background: var(--bg-2); border: 1px solid var(--line); }
.pd-box li { position: relative; padding-left: 18px; font-size: 13px; color: var(--slate); line-height: 1.6; }
.pd-box li + li { margin-top: 8px; }
.pd-box li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; background: var(--accent); }

.pd-hl-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.hl-card { background: #fff; padding: 22px 22px 24px; }
.hl-ico { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border: 1px solid var(--line); color: var(--accent-dk); margin-bottom: 14px; }
.hl-ico svg { width: 20px; height: 20px; }
.hl-k { display: block; font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.hl-card b { display: block; font-size: 19px; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 6px; }
.hl-card p { font-size: 13px; color: var(--slate); line-height: 1.6; margin: 0; }

/* wide parameter sheet, grouped */
.spec-group { margin-bottom: 30px; }
.spec-group h3 {
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-dk); margin: 0 0 10px;
}
.spec-table { border: 1px solid var(--line); background: #fff; }
.spec-table .spec-row {
  display: grid; grid-template-columns: 260px minmax(0, 1fr);
  border-bottom: 1px solid var(--line-soft);
  padding: 0; font-size: 14.5px;
}
.spec-table .spec-row:last-child { border-bottom: 0; }
.spec-table .spec-row:nth-child(odd) { background: #FBFCFD; }
.spec-table .spec-row dt {
  padding: 14px 22px; font-size: 13px; color: var(--muted);
  border-right: 1px solid var(--line-soft);
}
.spec-table .spec-row dd {
  margin: 0; padding: 14px 24px; font-size: 14.5px; line-height: 1.6;
  color: var(--ink); text-align: left; font-family: var(--ff);
}
.pd-fit { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.pd-fit h3 { font-size: 18px; margin: 8px 0 12px; }
.pd-scn { display: flex; flex-wrap: wrap; gap: 8px; }

/* product prev / next pager — explicit forward/back cue for mobile */
.pd-pager-in { display: flex; gap: 14px; }
.pd-pn {
  flex: 1; display: flex; align-items: center; gap: 14px; min-width: 0;
  padding: 16px 20px; border: 1px solid var(--line); background: #fff;
  border-radius: var(--radius); text-decoration: none;
}
.pd-pn-r { justify-content: flex-end; text-align: right; }
.pd-pn-ar { font-size: 22px; line-height: 1; color: var(--accent-dk); flex-shrink: 0; }
.pd-pn-txt { display: flex; flex-direction: column; min-width: 0; }
.pd-pn-txt b { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pd-pn-m { font-size: 15px; color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-pn:hover { border-color: var(--steel); }
@media (max-width: 560px) {
  .pd-pager-in { flex-direction: column; }
  .pd-pn-r { justify-content: flex-start; text-align: left; }
}

/* gallery: white stage, full product visible */
.gal-stage { background: #fff; }
.gal-stage img { aspect-ratio: 16 / 11; object-fit: contain; padding: 10px; background: transparent; }
.gal-shot { background: #fff; }
.gal-shot img { object-fit: contain; padding: 6px; background: #fff; opacity: .75; }
.gal-shot:hover img, .gal-shot.is-on img { opacity: 1; }
.gal-nav { background: rgba(255,255,255,.9); color: var(--ink); border-color: var(--line); }
.gal-nav:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.gal-thumbs { grid-template-columns: repeat(5, 1fr); }

@media (max-width: 1180px) {
  .cat-shell { grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; }
  .prod-grid { grid-template-columns: repeat(2, 1fr); }
  .hl-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1000px) {
  .cat-shell { grid-template-columns: 1fr; }
  .facet { position: static; order: -1; max-height: none; }
  .fx-list { grid-template-columns: repeat(3, 1fr); }
  .pd-grid { grid-template-columns: 1fr; gap: 32px; }
  .pd-side { position: static; }
  .pd-fit { grid-template-columns: 1fr; gap: 28px; }
  .cat-head-row { grid-template-columns: 1fr; gap: 24px; }
  .spec-table .spec-row { grid-template-columns: 200px minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .prod-grid { grid-template-columns: 1fr; }
  .fx-list { grid-template-columns: 1fr 1fr; }
  .hl-grid { grid-template-columns: 1fr; }
  .spec-table .spec-row { grid-template-columns: 1fr; }
  .spec-table .spec-row dt { border-right: 0; padding-bottom: 0; background: var(--bg-2); }
  .spec-table .spec-row dd { padding-top: 6px; }
  .cat-kpi { width: 100%; }
  .cat-kpi > div { flex: 1; min-width: 0; padding: 12px; }
  .cat-kpi dd { font-size: 22px; }
}

/* ============================================================
   Home page — eight flagship cards
   ============================================================ */
.hc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 8px; }
.hc {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--line); color: inherit; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hc:hover {
  transform: translateY(-3px); border-color: #C3D0D9;
  box-shadow: 0 22px 44px -28px rgba(11,31,46,.55);
}
.hc-img { display: block; background: linear-gradient(165deg, #F8FAFB 0%, #E9EEF2 100%); padding: 18px 16px; }
.hc-img img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; display: block; transition: transform .3s ease; }
.hc:hover .hc-img img { transform: scale(1.04); }
.hc-img.is-card { background: var(--ink-2); padding: 0; }
.hc-img.is-card img { aspect-ratio: 4 / 3; object-fit: cover; }
.hc-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; border-top: 1px solid var(--line-soft); }
.hc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.hc-top b { font-family: var(--ff-mono); font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.hc-top em { font-style: normal; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.hc-name { font-size: 13.5px; color: var(--slate); line-height: 1.45; }
.hc-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.hc-chips span {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: .02em;
  padding: 3px 7px; background: var(--bg-3); color: var(--steel);
}
.hc:hover .hc-chips span:first-child { background: var(--accent-lt); color: var(--accent-dk); }

@media (max-width: 1180px) {
  .hc-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .hc-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 540px) {
  .hc-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Product page — application band, software fit, compliance,
   accessories, film. Added for the second revision of the PDP.
   ============================================================ */

/* --- application band: why the model exists + three deployments --- */
.app-band { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.app-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 48px; align-items: end; margin-bottom: 40px;
}
.app-head h2 { font-size: clamp(26px, 3vw, 38px); margin: 8px 0 0; letter-spacing: -0.025em; }
.app-why {
  font-size: 15px; line-height: 1.7; color: var(--slate); margin: 0;
  border-left: 2px solid var(--accent); padding-left: 18px;
}
.app-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.app-card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--line); overflow: hidden;
}
.app-img { position: relative; background: var(--bg-3); }
.app-img img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.app-n {
  position: absolute; left: 0; bottom: 0; background: var(--ink-2); color: #fff;
  font-size: 11px; letter-spacing: .08em; padding: 5px 9px;
}
.app-body { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.app-body h3 { font-size: 17.5px; line-height: 1.3; margin: 0; letter-spacing: -0.015em; }
.app-job { font-size: 13.5px; line-height: 1.65; color: var(--steel); margin: 0; }
.app-meta { border-top: 1px solid var(--line-soft); padding-top: 12px; }
.app-mk { display: block; font-size: 9.5px; letter-spacing: .1em; color: var(--accent-dk); margin-bottom: 5px; }
.app-meta p { font-size: 12.5px; line-height: 1.6; color: var(--slate); margin: 0; }
.app-fit {
  font-size: 10px; letter-spacing: .03em; color: var(--muted);
  background: var(--bg-2); border: 1px solid var(--line-soft); padding: 6px 8px; line-height: 1.5;
}
.app-go {
  margin-top: auto; font-size: 12.5px; font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--line); padding-bottom: 6px; align-self: flex-start;
}
.app-go:hover { color: var(--accent-dk); border-bottom-color: var(--accent); }

/* --- software fit: what the client needs from the box --- */
.sw-wrap { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.sw-table { border-top: 1px solid var(--line); margin-top: 24px; }
.sw-row {
  display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 24px;
  padding: 16px 0; border-bottom: 1px solid var(--line-soft);
}
.sw-row dt {
  font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--accent-dk); padding-top: 2px;
}
.sw-row dd { margin: 0; font-size: 14px; line-height: 1.65; color: var(--steel); }
.sw-side {
  background: var(--ink-2); color: #fff; padding: 28px 26px 30px;
  position: sticky; top: calc(var(--nav-h) + 24px);
}
.sw-side h3 { font-size: 20px; line-height: 1.3; margin: 10px 0 12px; color: #fff; }
.sw-side p { font-size: 13.5px; line-height: 1.7; color: rgba(255,255,255,.72); margin: 0 0 18px; }
.sw-side .sec-tag { background: rgba(242,107,33,.16); color: #FFA771; }

/* --- compliance marks above the parameter sheet --- */
.cert-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 14px 18px; background: var(--bg-2); border: 1px solid var(--line);
  margin-bottom: 32px;
}
.cert-lbl { font-size: 10px; letter-spacing: .1em; color: var(--muted); }
.cert-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cert-badge {
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  padding: 5px 10px; background: #fff; border: 1px solid var(--ink-2); color: var(--ink);
}
.cert-src {
  flex: 1 1 260px; font-size: 11.5px; color: var(--muted);
  border-left: 1px solid var(--line); padding-left: 14px; line-height: 1.5;
}

/* --- accessories --- */
.acc-band { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.acc-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.acc-list { list-style: none; margin: 0; padding: 0; }
.acc-list li {
  display: flex; gap: 12px; align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid var(--line);
  font-size: 14.5px; color: var(--ink); line-height: 1.5;
}
.acc-tick { font-family: var(--ff-mono); color: var(--accent); font-weight: 600; flex-shrink: 0; }
.acc-note { border-left: 2px solid var(--ink-2); padding-left: 20px; }
.acc-note p { font-size: 14px; line-height: 1.7; color: var(--slate); margin: 0 0 14px; }
.acc-mini { font-size: 10.5px !important; letter-spacing: .08em; color: var(--accent-dk) !important; }

/* --- film --- */
.video-band { background: #fff; }
.pd-video {
  display: block; width: 100%; background: #000; border: 1px solid var(--line);
  aspect-ratio: 16 / 9; object-fit: contain;
}
/* Poster first, controls on demand — the native control bar would otherwise sit
   on top of the film's own footer. */
.vd { position: relative; background: #0b1a24; }
.vd-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  gap: 14px; border: 0; background: rgba(6,18,26,.28); color: #fff; cursor: pointer;
  transition: background .18s;
}
.vd-play:hover { background: rgba(6,18,26,.44); }
.vd-tri {
  width: 0; height: 0; border-left: 18px solid var(--accent);
  border-top: 12px solid transparent; border-bottom: 12px solid transparent;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
}
.vd-lbl {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(6,18,26,.7); padding: 9px 14px; border: 1px solid rgba(255,255,255,.3);
}
.vd.is-playing .vd-play { display: none; }

@media (max-width: 1180px) {
  .app-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  .app-head { grid-template-columns: 1fr; gap: 20px; align-items: start; }
  .app-why { border-left: 0; border-top: 2px solid var(--accent); padding: 16px 0 0; }
  .sw-wrap, .acc-grid { grid-template-columns: 1fr; gap: 32px; }
  .sw-side { position: static; }
}
@media (max-width: 680px) {
  .app-grid { grid-template-columns: 1fr; }
  .sw-row { grid-template-columns: 1fr; gap: 6px; }
  .cert-src { border-left: 0; padding-left: 0; }
}

/* Filtered catalogue: drop the container frame so a half-full row does not
   leave an empty bordered cell, and collapse the double card borders. */
#grid.is-filtered .prod-grid { border: 0; }
#grid.is-filtered .prod-card { border: 1px solid var(--line); margin: 0 -1px -1px 0; }/* ============================================================
   Chrome v2 — utility bar, megamenu, WhatsApp float
   ============================================================ */
.topbar {
  background: var(--ink);
  color: rgba(255,255,255,.72);
  font-size: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.topbar-in {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s5);
  height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.tb-left b { color: #fff; font-weight: 600; letter-spacing: .01em; }
.tb-right { display: flex; align-items: center; gap: 18px; }
.tb-right a { color: rgba(255,255,255,.74); }
.tb-right a:hover { color: #fff; }
.tb-wa { display: inline-flex; align-items: center; gap: 6px; color: #9FE3C0 !important; }

/* nav item + megamenu */
.nav-links > a, .nav-top {
  font-size: 13.5px; font-weight: 500; color: var(--steel);
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 0; white-space: nowrap;
}
.nav-links > a:hover, .nav-top:hover { color: var(--accent); }
.nav-top svg { width: 9px; height: 6px; opacity: .55; transition: transform .18s; }
.nav-item:hover .nav-top svg, .nav-item.is-open .nav-top svg { transform: rotate(180deg); }
.nav-item.is-mega.is-active .nav-top { color: var(--ink); font-weight: 600; }
.nav-item { display: flex; align-items: center; }

.mega {
  position: fixed; top: var(--nav-h); left: 50%; transform: translateX(-50%) translateY(-6px);
  width: min(1160px, calc(100vw - 40px));
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 26px 60px -18px rgba(11,31,46,.28), 0 2px 0 rgba(11,31,46,.02);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 120;
}
/* invisible hover bridge: closes the gap between the nav bar and the panel so
   the cursor can travel into the dropdown without the menu collapsing */
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -46px; height: 46px; }
.nav-item:hover .mega, .nav-item:focus-within .mega, .nav-item.is-open .mega {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.mega-in { padding: 26px 28px 0; }
.mega-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 4px 30px; }
.mega-cat { padding-bottom: 18px; }
.mega-cat-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em;
  padding-bottom: 7px; margin-bottom: 6px; border-bottom: 1px solid var(--line-soft);
}
.mega-cat-h span { font-family: var(--ff-mono); font-size: 10.5px; color: var(--muted); font-weight: 500; }
.mega-cat-h:hover { color: var(--accent); }
.mega-link {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 12.5px; color: var(--slate); padding: 4px 0; line-height: 1.35;
  white-space: normal; min-width: 0;
}
.mega-link i { font-family: var(--ff-mono); font-style: normal; font-size: 10.5px; color: #A7B5BF; }
.mega-link:hover { color: var(--accent); }
.mega-link:hover i { color: var(--accent); }
.mega-cols { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 18px; padding-bottom: 6px; }
.mega-col-h { display: block; font-size: 10px; letter-spacing: .12em; color: var(--muted); margin-bottom: 10px; }
.mega-col .mega-link { font-size: 13px; }
.nav-links .mega a { white-space: normal; }
.mega-link { align-items: flex-start; }
.mega-foot {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 -28px; padding: 13px 28px; background: var(--bg-2); border-top: 1px solid var(--line-soft);
}
.mega-foot > span { font-size: 12.5px; color: var(--muted); margin-right: auto; }
.mega-cta { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.mega-cta:hover { color: var(--accent); }
.mega-cta-alt { color: var(--muted); font-weight: 500; }

.nav-mobile { display: none; }
.nav-mobile a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; border-bottom: 1px solid var(--line-soft); font-size: 14px; color: var(--ink);
}
.nav-mobile a i { font-family: var(--ff-mono); font-style: normal; font-size: 11px; color: var(--muted); }
.nm-h { display: block; padding: 16px 20px 8px; font-size: 10px; letter-spacing: .12em; color: var(--muted); }

/* WhatsApp float */
.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 140;
  display: flex; align-items: center; gap: 10px;
  background: #1EBE5D; color: #fff; padding: 12px 18px 12px 14px;
  border-radius: 999px; font-size: 13.5px; font-weight: 600;
  box-shadow: 0 14px 30px -8px rgba(20,120,70,.55);
  transition: transform .16s ease, box-shadow .16s ease;
}
.wa-float:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -8px rgba(20,120,70,.6); }
.wa-float svg { width: 20px; height: 20px; }
.wa-float b { font-weight: 700; }
/* 2026-11-03 修复：mega 面板的“静态化”断点原为 980px，但主导航收起抽屉的断点是
   860px。861–980px 区间（手机横屏 / 平板竖屏 / 分屏窗口）时水平导航仍在，mega 却已
   变成 static，于是整个下拉被塞进横向导航条里 —— 面板变窄、单列堆叠、背景透明、
   压在页面内容上。这里把面板静态化对齐到 860px，与抽屉断点一致。 */
@media (max-width: 980px) {
  .topbar { display: none; }
}

@media (max-width: 860px) {
  /* 移动端抽屉里的 mega 面板必须取消桌面端的居中 transform，
     否则 .nav-item.is-open .mega 的 translateX(-50%) 会把整个面板推出屏幕左侧（标签被裁只剩数字） */
  .nav-item.is-open .mega, .nav-item:hover .mega, .nav-item:focus-within .mega { transform: none; }
  .mega { position: static; transform: none; width: auto; max-height: none; box-shadow: none; border: 0; display: none; opacity: 1; visibility: visible; pointer-events: auto; }
  .nav-item { display: block; }
  .nav-item.is-open .mega { display: block; }
  .nav-links.is-open .nav-item .nav-top { font-size: 15px; padding: 13px 0; width: 100%; justify-content: space-between; border-bottom: 1px solid var(--line-soft); }
  .nav-links.is-open { display: block; position: absolute; top: 100%; left: 0; right: 0; background: #fff; padding: 8px 20px 20px; border-bottom: 1px solid var(--line); max-height: 78vh; overflow: auto; }
  .nav-links.is-open > a { display: block; padding: 13px 0; font-size: 15px; border-bottom: 1px solid var(--line-soft); }
  .nav-links.is-open .nav-cta { margin: 16px 0 0; width: 100%; }
  .mega-in { padding: 6px 0 0; }
  .mega-grid, .mega-cols { grid-template-columns: 1fr; gap: 0; }
  .mega-foot { display: none; }
  .wa-float { right: 14px; bottom: 14px; padding: 12px; }
  .wa-float span { display: none; }
}

/* Second-level taxonomy pills on the catalogue page */
.cat-sub { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 20px; }
.sub-pill {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); background: #fff; color: var(--steel);
  padding: 7px 12px; font-size: 12.5px; border-radius: 999px;
  transition: all .15s ease;
}
.sub-pill i { font-family: var(--ff-mono); font-style: normal; font-size: 10.5px; color: var(--muted); }
.sub-pill:hover { border-color: var(--accent); color: var(--accent-dk); background: var(--accent-lt); }
.sub-pill:hover i { color: var(--accent-dk); }/* ============================================================
   Range band, application cases, FAQ, company blocks
   ============================================================ */

/* ---- orange range band ---- */
.stage-band {
  position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(120% 140% at 8% 12%, #F0703A 0%, #E1501A 42%, #CE3F11 100%);
}
.stage-in {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 40px; align-items: center; padding: 54px 0 54px;
}
.stage-copy { position: relative; z-index: 2; }
.stage-tag {
  display: inline-block; font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: #FFD9C6; border: 1px solid rgba(255,255,255,.35);
  padding: 5px 10px; margin-bottom: 18px;
}
.stage-copy h2 { font-size: clamp(27px, 2.9vw, 40px); line-height: 1.1; letter-spacing: -0.03em; }
.stage-copy p { margin-top: 16px; font-size: 14.5px; line-height: 1.62; color: rgba(255,255,255,.88); max-width: 430px; }
.stage-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.stage-actions .btn-primary { background: #fff; color: #B93F0C; }
.stage-actions .btn-primary:hover { background: #FFE9DE; }
.stage-actions .btn-ghost { border-color: rgba(255,255,255,.5); color: #fff; background: transparent; }
.stage-actions .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.1); }
.stage-facts { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 30px; }
.stage-facts div { border-left: 1px solid rgba(255,255,255,.3); padding-left: 13px; }
.stage-facts b { display: block; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
.stage-facts span { font-size: 11.5px; color: rgba(255,255,255,.74); }

.stage-visual { position: relative; }
.stage-visual img { width: 100%; height: auto; display: block; }
@media (max-width: 1080px) {
  .stage-in { grid-template-columns: 1fr; padding: 40px 0 0; gap: 10px; }
  .stage-visual { margin: 0 -20px; }
  .stage-visual img { -webkit-mask-image: none; mask-image: none; }
}

/* ---- application cases ---- */
.case-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.case-card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  overflow: hidden; transition: border-color .16s, transform .16s, box-shadow .16s;
}
.case-card:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 18px 34px -22px rgba(11,31,46,.4); }
.case-img { position: relative; aspect-ratio: 16 / 10; background: var(--bg-3); overflow: hidden; }
.case-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case-metric {
  position: absolute; left: 10px; bottom: 10px;
  background: rgba(11,31,46,.86); color: #fff; font-family: var(--ff-mono);
  font-size: 11px; letter-spacing: .02em; padding: 5px 9px;
}
.case-body { padding: 14px 15px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.case-sector { font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-dk); }
.case-card h3 { font-size: 14.5px; line-height: 1.3; }
.case-card p { font-size: 13px; color: var(--slate); line-height: 1.5; }
.case-kit { margin-top: auto; padding-top: 8px; font-size: 11.5px; color: var(--muted); border-top: 1px solid var(--line-soft); }

/* ---- FAQ ---- */
.faq-band { background: var(--bg); }
.faq-wrap { display: grid; grid-template-columns: 340px minmax(0,1fr); gap: 64px; align-items: start; }
.faq-eyebrow { color: var(--accent-dk); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; }
.faq-h { font-size: clamp(32px, 3.4vw, 46px); letter-spacing: -0.035em; margin: 10px 0 16px; }
.faq-lead { font-size: 15px; color: var(--slate); line-height: 1.6; }
.faq-more { margin-top: 22px; display: inline-flex; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex; gap: 16px; align-items: flex-start; padding: 22px 0; cursor: pointer;
  list-style: none; font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; margin-left: auto; font-weight: 400; font-size: 20px; color: var(--muted); line-height: 1;
}
.faq-item[open] summary::after { content: "–"; color: var(--accent); }
.faq-item summary:hover { color: var(--accent-dk); }
.faq-a { padding: 0 40px 24px 0; font-size: 15px; line-height: 1.68; color: var(--slate); }
.faq-n { font-family: var(--ff-mono); font-size: 11px; color: var(--accent-dk); padding-top: 4px; }

/* ---- company / who we are ---- */
.who-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.who-media { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.who-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.who-media .is-wide { grid-column: span 2; aspect-ratio: 16/9; }
.who-media.is-stack { grid-template-columns: 1fr; }
.who-media .is-tall { aspect-ratio: 3/4; }
.who-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; border-top: 1px solid var(--line); padding-top: 22px; }
.who-stats b { display: block; font-size: 26px; letter-spacing: -0.03em; }
.who-stats span { font-size: 12px; color: var(--muted); }
.logo-batl { height: 26px; width: auto; opacity: .9; }

/* ---- OEM steps ---- */
.oem { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 1px solid var(--line); }
.oem-step { padding: 22px 18px 22px 0; border-right: 1px solid var(--line); }
.oem-step:last-child { border-right: 0; }
.oem-step .n { font-family: var(--ff-mono); font-size: 11px; color: var(--accent-dk); }
.oem-step b { display: block; margin: 8px 0 6px; font-size: 14.5px; }
.oem-step span { font-size: 12.5px; color: var(--slate); line-height: 1.5; }

/* ---- contact block ---- */
.contact-card { background: var(--bg-2); border: 1px solid var(--line); padding: 30px; }
.contact-row { display: flex; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.contact-row:last-child { border-bottom: 0; }
.contact-row dt { width: 96px; flex-shrink: 0; font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .1em; color: var(--muted); padding-top: 3px; }
.contact-row dd { margin: 0; color: var(--ink); line-height: 1.5; }
.qr-box { display: flex; gap: 18px; align-items: center; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.qr-box img { width: 108px; height: 108px; border: 1px solid var(--line); background: #fff; padding: 6px; }
.qr-box b { display: block; font-size: 14px; }
.qr-box span { font-size: 12.5px; color: var(--slate); }

@media (max-width: 1080px) {
  .case-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .faq-wrap { grid-template-columns: 1fr; gap: 30px; }
  .who-grid { grid-template-columns: 1fr; gap: 34px; }
  .oem { grid-template-columns: repeat(2, 1fr); }
  .oem-step { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 620px) {
  .case-grid { grid-template-columns: 1fr; }
  .stage-in { padding: 64px 0 68px; }
  .stage-facts { gap: 18px; }
  .stage-facts b { font-size: 18px; }
}

/* ============================================================
   Product page — dark product hero
   ============================================================ */
.pd-hero {
  background:
    radial-gradient(90% 120% at 88% 8%, rgba(242,107,33,.18) 0%, rgba(242,107,33,0) 55%),
    linear-gradient(180deg, #0C2233 0%, #0A1B29 100%);
  color: #fff; padding: 16px 0 54px;
}
.pd-hero .breadcrumb { color: rgba(255,255,255,.34); font-size: 11.5px; }
.pd-hero .breadcrumb a { color: rgba(255,255,255,.6); }
.pd-hero .breadcrumb a:hover { color: #fff; }
.pd-hero-grid {
  display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: 48px; align-items: start; margin-top: 22px;
}
.pd-cat { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #F59B6B; }
.pd-hero h1 { font-size: clamp(46px, 5.2vw, 74px); line-height: .98; letter-spacing: -0.045em; margin-top: 10px; }
.pd-tag { color: var(--accent); font-size: clamp(17px, 1.5vw, 21px); font-weight: 600; margin-top: 12px; letter-spacing: -0.01em; }
.pd-intro { color: rgba(255,255,255,.74); font-size: 15px; line-height: 1.66; margin-top: 14px; max-width: 470px; }
.pd-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.pd-chip {
  border: 1px solid rgba(255,255,255,.26); border-radius: 999px; padding: 7px 13px;
  font-size: 12.5px; color: rgba(255,255,255,.92);
}
.pd-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.btn-line { border-color: rgba(255,255,255,.42); color: #fff; }
.btn-line:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.pd-meta {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 20px; font-size: 12px; color: rgba(255,255,255,.58);
}
.pd-dot { width: 6px; height: 6px; border-radius: 50%; background: #37C97E; box-shadow: 0 0 0 3px rgba(55,201,126,.18); }
.pd-hero .cert-note { margin-top: 18px; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }
.pd-hero .cert-note p { color: rgba(255,255,255,.72); }
.pd-hero .cert-note.is-cert { background: rgba(55,201,126,.1); }
.pd-hero .gal { margin: 0; }
.pd-hero .gal-stage { background: #fff; border: 0; }
.pd-hero .gal-stage img { aspect-ratio: 1 / 1; padding: 22px; }.pd-hero .gal-caption { color: rgba(255,255,255,.72); }
.pd-hero .gal-captext { color: rgba(255,255,255,.55); }
.pd-hero .gal-thumbs { border-top-color: rgba(255,255,255,.14); }
.pd-hero .gal-shot { background: #fff; }
.pd-hero .gal-note { color: rgba(255,255,255,.42); }

/* ---- product spec bar -------------------------------------------------
   One definition, one grid. Equal cells with the 1px rules drawn by the
   grid gap, so the row reads the same on every product page and wraps to
   2x2 on phones without any stray borders.
   --------------------------------------------------------------------- */
.pd-strip {
  background: linear-gradient(180deg, #fbfcfd 0%, #ffffff 100%);
  border-bottom: 1px solid var(--line);
}
.pd-strip-in {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 44px; padding: 0;
}
.pd-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 1px; margin: 0; padding: 0; background: var(--line-soft); border: 0;
}
.pd-facts > div { background: #fff; padding: 19px 21px 21px; min-width: 0; border: 0; }
.pd-facts dt {
  display: block; margin: 0 0 8px; padding: 0; text-align: left;
  font-family: var(--ff-mono); font-size: 10px; line-height: 1;
  letter-spacing: .16em; text-transform: uppercase; color: var(--slate);
  font-weight: 500;
}
.pd-facts dd {
  margin: 0; font-size: 16px; line-height: 1.3; font-weight: 600;
  letter-spacing: -.008em; color: var(--ink); text-align: left;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.pd-strip-act {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 10px; padding: 18px 0; max-width: 292px;
}
.pd-strip-note {
  margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); max-width: 262px;
}

@media (max-width: 1180px) {
  .pd-strip-in { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pd-strip-act {
    flex-direction: row; align-items: center; justify-content: space-between;
    max-width: none; width: 100%; padding: 18px 21px;
    border-top: 1px solid var(--line-soft);
  }
  .pd-strip-note { max-width: 320px; text-align: right; }
}
@media (max-width: 760px) {
  .pd-facts { grid-template-columns: 1fr 1fr; }
  .pd-facts > div { padding: 14px 15px 16px; }
  .pd-facts dt { font-size: 9.5px; margin-bottom: 7px; }
  .pd-facts dd { font-size: 14px; }
  .pd-strip-act { flex-direction: column; align-items: stretch; gap: 11px; padding: 15px; }
  .pd-strip-note { max-width: none; text-align: left; }
  .pd-strip-act .btn { width: 100%; justify-content: center; }
}
@media (max-width: 980px) {
  .pd-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .pd-hero { padding-bottom: 32px; }
}


/* ---- solution hero ---- */
.sol-hero { position: relative; min-height: 440px; display: flex; align-items: flex-end; color: #fff; overflow: hidden; }
.sol-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sol-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,24,36,.32) 0%, rgba(8,24,36,.72) 62%, rgba(8,24,36,.92) 100%);
}
.sol-hero-in { position: relative; z-index: 2; padding: 90px 0 44px; width: 100%; }
.sol-hero .breadcrumb { color: rgba(255,255,255,.5); font-size: 11.5px; margin-bottom: 18px; }
.sol-hero .breadcrumb a { color: rgba(255,255,255,.72); }
.sol-hero h1 { font-size: clamp(34px, 4vw, 54px); letter-spacing: -0.035em; margin: 10px 0 12px; max-width: 780px; }
.sol-hero .lead { color: rgba(255,255,255,.82); max-width: 640px; font-size: 16px; line-height: 1.6; }

/* ============================================================
   Usage scenario — wide photograph, then four groups of field detail
   ============================================================ */
.scen-band .sec-head p { max-width: 760px; }

.scen-wide { margin: 40px 0 0; position: relative; overflow: hidden; border-radius: var(--radius); }
.scen-wide img {
  width: 100%; aspect-ratio: 21 / 9; object-fit: cover;
  object-position: center 42%; background: var(--bg-3);
  transition: transform .8s cubic-bezier(.2,.7,.3,1);
}
.scen-wide:hover img { transform: scale(1.015); }
.scen-wide figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: baseline; gap: 14px;
  padding: 40px 26px 18px; color: #fff; font-size: 13.5px;
  background: linear-gradient(180deg, rgba(8,24,36,0) 0%, rgba(8,24,36,.78) 100%);
}
.scen-wide .mono {
  font-size: 10px; letter-spacing: .14em; color: #FFB98F;
  border: 1px solid rgba(255,185,143,.4); padding: 3px 7px 2px;
}

.scen-groups {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px;
  margin-top: 46px;
}
.scen-g { padding: 24px 0 20px; border-top: 1px solid var(--line); }
.scen-g:nth-child(1), .scen-g:nth-child(2) { border-top: 2px solid var(--ink); }
.scen-g h3 {
  font-size: 17px; line-height: 1.35; margin-bottom: 6px; letter-spacing: -0.01em;
}
.scen-g h3 .mono {
  display: block; font-size: 11px; color: var(--accent);
  letter-spacing: .1em; margin-bottom: 9px; font-weight: 500;
}
.scen-k {
  display: block; font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 12px;
}
.scen-g ul { margin: 0; padding: 0; list-style: none; }
.scen-g li {
  position: relative; padding-left: 16px; margin-bottom: 7px;
  font-size: 14px; line-height: 1.55; color: var(--slate);
}
.scen-g li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; background: var(--accent); opacity: .55;
}

@media (max-width: 980px) {
  .scen-wide img { aspect-ratio: 3 / 2; }
  .scen-wide figcaption {
    flex-direction: column; align-items: flex-start; gap: 7px;
    padding: 44px 16px 14px; font-size: 12.5px; line-height: 1.4;
  }
  .scen-wide .mono { white-space: nowrap; }
  .scen-groups { grid-template-columns: 1fr; gap: 0; margin-top: 32px; }
  .scen-g:nth-child(2) { border-top: 1px solid var(--line); }
}

/* ---------- responsive two-column splits (inline grid styles broke at 390px) ---------- */
.split { display: grid; align-items: start; gap: var(--split-gap, 48px); }
.split--14  { grid-template-columns: 1.4fr 1fr;  --split-gap: 64px; }
.split--125 { grid-template-columns: 1.25fr 1fr; }
.split--125b{ grid-template-columns: 1.25fr .75fr; --split-gap: 64px; }
.split--2   { grid-template-columns: 1fr 1fr; --split-gap: 56px; }
.split--2b  { grid-template-columns: 1fr 1fr; }
.aside-rule { border-left: 1px solid var(--line); padding-left: 32px; }
.who-media.is-stack { grid-template-columns: 1fr 1fr; gap: 14px; }

@media (max-width: 980px) {
  .split { grid-template-columns: 1fr; --split-gap: 32px; }
  .aside-rule { border-left: 0; padding-left: 0; padding-top: 26px; border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .who-media.is-stack { grid-template-columns: 1fr; }
}

/* ---------- FAQ closing block ---------- */
.ask-facts { margin: 30px 0 0; padding: 0; }
.ask-facts div {
  display: grid; grid-template-columns: 92px 1fr; gap: 14px;
  padding: 12px 0; border-top: 1px solid var(--line);
}
.ask-facts dt { font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-dk); padding-top: 2px; }
.ask-facts dd { margin: 0; font-size: 14px; color: var(--slate); }

/* hero crop keeps the subject, not the frame edge */
.sol-hero-img.is-right { object-position: 70% center; }
@media (max-width: 980px) { .sol-hero-img.is-right { object-position: 62% center; } }

/* keep the working line in frame rather than the desk clutter */
.sol-hero-img.is-top { object-position: center 26%; }
@media (max-width: 980px) { .sol-hero-img.is-top { object-position: center 34%; } }

/* ============================================================
   Contact & QR — dual-channel scan block, footer strip
   ============================================================ */
.qr-duo { display: flex; gap: 18px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.qr-item {
  flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0;
  background: #fff; border: 1px solid var(--line); padding: 12px; text-decoration: none;
  transition: border-color .15s;
}
.qr-item:hover { border-color: var(--accent); }
.qr-item img { width: 92px; height: 92px; flex-shrink: 0; background: #fff; }
.qr-cap b { display: block; font-size: 13.5px; color: var(--ink); }
.qr-cap i { display: block; font-style: normal; font-size: 11.5px; color: var(--muted); margin-top: 3px; }

.qr-hero { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px; }
.qr-hero-card {
  background: #fff; border: 1px solid var(--line); padding: 26px 26px 22px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  text-decoration: none; transition: border-color .15s, transform .15s;
}
.qr-hero-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.qr-hero-card img { width: 190px; height: 190px; object-fit: contain; background: #fff; padding: 10px; }
.qr-hero-app { margin-top: 14px; }
.qr-hero-app b { display: block; font-size: 16px; color: var(--ink); }
.qr-hero-app i { display: block; font-style: normal; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.qr-hero-hint { font-size: 12px; color: var(--slate); line-height: 1.6; margin-top: 12px; }
.qr-hero-side { border-left: 1px solid var(--line); padding-left: 22px; align-self: center; }
.qr-side-row { display: grid; grid-template-columns: 62px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; align-items: baseline; }
.qr-side-row:last-of-type { border-bottom: 0; }
.qr-side-row .mono { font-size: 10.5px; letter-spacing: .1em; color: var(--muted); }
.qr-side-row a { color: var(--accent-dk); }

.footer-qr {
  display: flex; align-items: center; gap: 20px;
  border-top: 1px solid rgba(255,255,255,.1); margin-top: 34px; padding-top: 26px;
}
.fq-item { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.fq-item img { width: 84px; height: 84px; background: #fff; padding: 5px; border-radius: 4px; }
.fq-item span { font-size: 11px; color: rgba(255,255,255,.6); letter-spacing: .06em; }
.fq-note b { display: block; color: #fff; font-size: 14px; }
.fq-note span { display: block; color: rgba(255,255,255,.55); font-size: 12.5px; margin-top: 4px; }

@media (max-width: 980px) {
  .qr-hero { grid-template-columns: 1fr; }
  .qr-hero-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 18px; }
  .qr-duo { flex-direction: row; }
  .footer-qr { flex-wrap: wrap; }
}

/* breathing room inside bordered boxes — text no longer hugs the rule */
.hit { padding-left: 18px; }
.contact-card { padding: 30px 34px 28px; }
.faq-item summary { padding: 15px 40px 15px 18px; }
.ask-card { padding: 26px 28px; }

/* ---------- ocean-fishing band on the catalogue ---------- */
.marine-band .sec-head p { max-width: 720px; }
.marine-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 26px 0 30px; }
.marine-col { background: #fff; border: 1px solid var(--line); padding: 24px 26px 22px; }
.marine-col .mono { font-size: 10.5px; letter-spacing: .12em; color: var(--accent-dk); }
.marine-col h3 { font-size: 17px; margin: 8px 0 10px; }
.marine-col p { font-size: 13.5px; color: var(--slate); line-height: 1.65; margin: 0 0 12px; }
.marine-col a { font-size: 13px; font-weight: 600; color: var(--ink); }
.marine-col a:hover { color: var(--accent); }
.marine-foot { font-size: 13px; color: var(--muted); margin-top: 18px; }
.marine-foot a { color: var(--accent-dk); }
@media (max-width: 980px) { .marine-cols { grid-template-columns: 1fr; } }

/* ---------- line pages ---------- */
.split-cards { display: flex; flex-direction: column; gap: 12px; }
.line-cat {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "b i" "s s";
  gap: 2px 12px; background: #fff; border: 1px solid var(--line); padding: 16px 20px;
  text-decoration: none; transition: border-color .15s;
}
.line-cat:hover { border-color: var(--accent); }
.line-cat b { grid-area: b; font-size: 15px; color: var(--ink); }
.line-cat i { grid-area: i; font-family: var(--ff-mono); font-style: normal; font-size: 11px; color: var(--muted); }
.line-cat span { grid-area: s; font-size: 12.5px; color: var(--slate); line-height: 1.55; }/* ---------- insights blog cards & tag nav ---------- */
.tag-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.tag-nav .chip-link { font-size: 12.5px; padding: 7px 14px; }
.post-group { margin-bottom: 40px; }
.post-group-h { font-size: 11px; letter-spacing: .12em; color: var(--muted); margin: 0 0 16px; }
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.post-card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  text-decoration: none; overflow: hidden; transition: border-color .15s, transform .15s;
}
.post-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.post-card-img { display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--bg-2); }
.post-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; }
.post-card-body h3 { font-size: 15.5px; line-height: 1.4; margin: 0; color: var(--ink); }
.post-card-body p { font-size: 12.5px; color: var(--slate); line-height: 1.6; margin: 0; }
.post-card-body .p-meta { font-size: 11px; color: var(--muted); font-family: var(--ff-mono); }
@media (max-width: 980px) { .post-grid { grid-template-columns: 1fr; } }

/* ---------- tech rail ---------- */
.tech-rail { border-left: 1px solid var(--line); padding-left: 22px; display: flex; flex-direction: column; gap: 22px; }
.rail-block h3 { font-size: 13px; margin: 10px 0 8px; color: var(--ink); }
.rail-link { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--slate); padding: 7px 0; border-bottom: 1px solid var(--line-soft); text-decoration: none; line-height: 1.45; }
.rail-link:hover { color: var(--accent); }
.rail-link i { font-family: var(--ff-mono); font-style: normal; font-size: 10.5px; color: var(--muted); flex-shrink: 0; padding-top: 2px; }
.rail-more { color: var(--accent-dk); font-weight: 600; }
.rail-contact { background: var(--bg-2); border: 1px solid var(--line); padding: 16px 18px; }
.rail-contact h3 { margin-top: 0; }
.rail-contact p { font-size: 12.5px; color: var(--slate); margin: 4px 0 12px; }
@media (max-width: 980px) { .tech-rail { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 20px; } }

/* ---------- grid children must be allowed to shrink (390px overflow) ---------- */
.split > * { min-width: 0; }
.contact-row dd, .qr-cap b, .qr-cap i, .ask-facts dd { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .qr-duo { flex-direction: column; }
  .contact-card { padding: 24px 20px 22px; }
  .qr-item img { width: 76px; height: 76px; }
}
@media (max-width: 640px) {
  .qr-duo { flex-direction: column; }}

/* ---------- facet quick picks ---------- */
.facet-presets { padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
.facet-presets h3 { font-size: 14px; margin: 0 0 10px; color: var(--ink); }
.preset-list { display: flex; flex-wrap: wrap; gap: 6px; }
.preset {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--steel);
  background: #fff; border: 1px solid var(--line); border-radius: 2px;
  padding: 6px 11px; transition: border-color .15s, color .15s;
}
.preset:hover { border-color: var(--accent); color: var(--ink); }
.preset i { font-family: var(--ff-mono); font-style: normal; font-size: 10px; color: var(--muted); }
.preset.is-on { background: var(--ink-2); border-color: var(--ink-2); color: #fff; }
.preset.is-on i { color: rgba(255,255,255,.65); }/* tech 页等纯文字卡片上的角标：改为文档流内联，避免绝对定位压住标题（用户反馈 #8） */
.scn-num--flow { position: static; display: inline-block; margin: 0 0 10px; }



/* ---- 卡片文字与框线的呼吸空间（用户反馈 #45）----
   tech 页等直接把内容放进 .scn-card 的卡片没有 .scn-body 包裹，文字贴边；
   给这类裸卡片统一兜底内边距（有图的卡片仍由 .scn-img 负边距抵消，不受影响）。 */
.scn-card > .scn-num--flow:first-child { margin: 18px 22px 0; }
.scn-card > h3, .scn-card > p { margin-left: 22px; margin-right: 22px; }
.scn-card > .scn-foot { margin: 14px 22px 16px; }
.scn-card > h3:first-of-type { margin-top: 10px; }

/* ==========================================================================
   响应式统一修复 · 2026-11-01
   问题来源：① iPad 横屏 1024px 主导航横向溢出 27px（桌面断点 980 太早，
   导航内容在 1024 放不下）；② 全站 68 页存在 9~10.5px 小字，手机上过小；
   ③ iOS 安全区 / 表单自动缩放与安卓表现不一致。
   ========================================================================== */

/* ---- ① 平板横屏 & 小笔记本：压缩主导航，消除 header 溢出 ---- */
@media (min-width: 981px) and (max-width: 1180px) {
  .wrap { padding: 0 18px; }
  .nav-inner { gap: 12px; }
  .nav-links { gap: 15px; margin-left: 12px; }
  .nav-links a { font-size: 13px; }
  .nav-top { font-size: 13px; }
  .btn-nav, .nav .btn, .nav-inner > .btn { padding: 8px 13px; font-size: 13px; }
  .btn-sm { padding: 8px 13px; font-size: 13px; }
  .brand-name { font-size: 16px; }
}
/* 更窄的平板竖屏 / 大手机横屏：再压一档 */
@media (min-width: 981px) and (max-width: 1040px) {
  .nav-links { gap: 11px; }
  .nav-links a, .nav-top { font-size: 12.5px; }
  .brand-sub { display: none; }
}

/* ---- ② 小字号提升（平板 ≤1024 起，手机再提一档）---- */
@media (max-width: 1024px) {
  .brand-sub, .scn-k, .hl-k, .app-mk, .case-sector, .pd-cat,
  .gal-note, .gal-badge, .app-fit, .quick-label, .hz-badge, .pick-go,
  .mono { font-size: 11px; }
  .gal-badge, .hz-badge { letter-spacing: .08em; }
}
@media (max-width: 640px) {
  .brand-sub, .scn-k, .hl-k, .app-mk, .case-sector, .pd-cat,
  .gal-note, .gal-badge, .app-fit, .quick-label, .hz-badge, .pick-go { font-size: 11.5px; letter-spacing: .06em; }
  /* 数据表格：允许横向滚动而不是被裁掉，并给一条可视提示 */
  .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tbl-wrap::after {
    content: ""; display: block; height: 1px;
  }
  .tbl { min-width: 540px; }
  /* 长串（型号、频段、邮箱）在窄屏可断行 */
  .mono, .pd-facts dd, .sw-row dd { overflow-wrap: anywhere; }
}

/* ---- ③ iOS 安全区（刘海 / 底部横条）---- */
@supports (padding: env(safe-area-inset-bottom)) {
  .nav { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .nav-fab, .fab, .to-top, .float-cta {
    right: calc(22px + env(safe-area-inset-right));
    bottom: calc(22px + env(safe-area-inset-bottom));
  }
  .site-footer, footer { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .section, .section-sm { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}
@media (max-width: 640px) {
  body > .float-cta, body > .nav-fab, body > .to-top {
    bottom: calc(20px + env(safe-area-inset-bottom));
  }
}
/* iOS 地址栏导致的 100vh 抖动：优先用 dvh */
@supports (height: 100dvh) {
  .nav-menu-scroll, .drawer, .mega { max-height: calc(100dvh - var(--nav-h) - 20px); }
}

/* ---- ④ 表单控件 ≥16px，避免 iOS 聚焦自动放大页面 ---- */
input, textarea, select {
  font-size: max(16px, 1em);
  font-family: inherit;
}
@media (max-width: 640px) {
  input, textarea, select { font-size: 16px; }
}

/* ---- ⑤ 通用健壮性：任何网格/弹性子项都允许收缩 ---- */
.wrap > *, .split > *, .grid-2 > *, .grid-3 > *, .grid-4 > *,
.app-grid > *, .post-grid > *, .acc-grid > *, .sw-wrap > * { min-width: 0; }
img, video, canvas, svg { max-width: 100%; }

/* ---- ②b 补漏：定义列表标签与各类 mono 小标签 ---- */
@media (max-width: 1024px) {
  .cat-kpi dt, .pd-facts dt, .spec-table .spec-row dt, .sw-row dt,
  .contact-row dt, .ask-facts dt, .acc-mini, .stage-tag,
  .scn-num--flow, .hl-v, .kpi-k { font-size: 11px; }
  .cat-kpi dt, .ask-facts dt, .acc-mini { letter-spacing: .08em; }
}
@media (max-width: 640px) {
  .cat-kpi dt, .pd-facts dt, .spec-table .spec-row dt, .sw-row dt,
  .contact-row dt, .ask-facts dt, .acc-mini, .stage-tag,
  .scn-num--flow { font-size: 11.5px; letter-spacing: .05em; }
}
@media (max-width: 640px) {
  .cat-kpi dt, .pd-facts dt, .spec-table .spec-row dt, .sw-row dt,
  .contact-row dt, .ask-facts dt, .acc-mini, .stage-tag,
  .scn-num--flow { font-size: 11.5px; letter-spacing: .05em; }
}

/* ==========================================================================
   产品页 · Where it deploys 板块（每款产品专属：用途/市场/频段/准备）
   ========================================================================== */
.dep-band { background: var(--bg-2); }
.dep-role {
  font-size: 19px; line-height: 1.6; color: var(--ink);
  max-width: 980px; margin: 4px 0 30px; padding-left: 16px;
  border-left: 3px solid var(--accent);
}
.dep-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 44px; }
.dep-h {
  font-size: 11.5px; letter-spacing: .14em; color: var(--accent-dk);
  margin: 0 0 12px; font-weight: 600;
}
.dep-col .dep-h + .dep-list { margin: 0 0 26px; }
.dep-col .dep-h:not(:first-child) { margin-top: 4px; }
.dep-list { list-style: none; margin: 0 0 26px; padding: 0; }
.dep-li {
  position: relative; padding: 9px 0 9px 22px; color: var(--steel);
  font-size: 15px; line-height: 1.6; border-bottom: 1px dashed var(--line);
}
.dep-li:last-child { border-bottom: 0; }
.dep-li::before {
  content: "+"; position: absolute; left: 2px; top: 9px;
  color: var(--accent); font-weight: 700; font-family: var(--ff-mono);
}
.dep-markets { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin-bottom: 26px; }
.dep-mkt {
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 15px;
}
.dep-mkt b { display: block; font-size: 14.5px; margin-bottom: 3px; }
.dep-mkt p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.dep-bands { margin-bottom: 26px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.dep-bandrow { display: grid; grid-template-columns: 128px 1fr; }
.dep-bandrow + .dep-bandrow { border-top: 1px solid var(--line); }
.dep-bk {
  padding: 10px 12px; background: var(--bg-2); font-size: 11px; letter-spacing: .06em;
  color: var(--muted); text-transform: uppercase; border-right: 1px solid var(--line);
  display: flex; align-items: center;
}
.dep-bv { padding: 10px 14px; font-size: 13.5px; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }
.dep-note { margin-top: 26px; font-size: 11.5px; color: var(--muted); letter-spacing: .04em; }

@media (max-width: 980px) {
  .dep-grid { grid-template-columns: 1fr; gap: 8px; }
  .dep-role { font-size: 17px; margin-bottom: 24px; }
}
@media (max-width: 640px) {
  .dep-markets { grid-template-columns: 1fr; }
  .dep-bandrow { grid-template-columns: 1fr; }
  .dep-bk { border-right: 0; border-bottom: 1px dashed var(--line); padding-bottom: 4px; }
  .dep-bv { padding-top: 6px; }
  .dep-li { font-size: 14.5px; }
}

/* ---- ②c 终补：复合选择器权重覆盖 ---- */
@media (max-width: 1024px) {
  p.mono.acc-mini, span.mono, span.pill, .pill, span.gal-badge { font-size: 11px; }
}
@media (max-width: 640px) {
  p.mono.acc-mini, span.pill { font-size: 11.5px; }
}

/* ---- explosion-proof whitepaper + real-vs-fake ---- */
.exmark {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 14px; font-size: 13px; color: var(--ink); display: block;
  white-space: pre-wrap; line-height: 1.7; margin: 0;
}
.exmark b { color: var(--accent-dk); }
.excmp { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: var(--s4); }
.excmp .excol { border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; background: #fff; }
.excmp .excol.good { border-left: 4px solid #2e9e5b; }
.excmp .excol.bad { border-left: 4px solid #d1453b; }
.excmp .excol h4 { margin: 0 0 8px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.excmp .excol.good h4 { color: #1f7a45; }
.excmp .excol.bad h4 { color: #b0332b; }
.excmp .excol ul { margin: 0; padding-left: 18px; }
.excmp .excol li { font-size: 13px; color: var(--slate); margin: 4px 0; line-height: 1.5; }
.exflag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .06em;
  padding: 3px 8px; border-radius: 999px; }
.exflag.ok { background: #e6f5ec; color: #1f7a45; }
.exflag.no { background: #fbe8e6; color: #b0332b; }
.exsteps { counter-reset: exs; list-style: none; padding: 0; margin: 0; }
.exsteps li { counter-increment: exs; position: relative; padding: 0 0 14px 40px; font-size: 14px; color: var(--ink); }
.exsteps li::before { content: counter(exs); position: absolute; left: 0; top: -2px;
  width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.exsteps li b { color: var(--ink); }
@media (max-width: 720px) { .excmp { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  p.mono.acc-mini, span.pill { font-size: 11.5px; }
}@media (max-width: 720px) { .excmp { grid-template-columns: 1fr; } }

/* ---- banner figure (product / about) ---- */
.banner-fig { position: relative; margin: 0; overflow: hidden; border-radius: 14px; background: #0d2233; }
.banner-fig img { width: 100%; height: auto; display: block; aspect-ratio: 21 / 9; object-fit: cover; }
.banner-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 30px;
  background: linear-gradient(to top, rgba(7,22,35,.84), rgba(7,22,35,0)); color: #fff; }
.banner-cap h3 { color: #fff; margin: 0 0 6px; font-size: 22px; }
.banner-cap p { color: rgba(255,255,255,.9); margin: 0 0 14px; max-width: 640px; font-size: 14.5px; line-height: 1.5; }
.banner-cap .btn-light { background: #fff; color: #0d2233; border-color: #fff; }
.banner-cap .btn-light:hover { background: #ffe9d6; }

/* ---- hero carousel ---- */
.hero-carousel { position: relative; overflow: hidden; background: #0d2233; }
.hc-track { display: flex; transition: transform .6s ease; }
.hc-slide { position: relative; min-width: 100%; }
.hc-slide img { width: 100%; height: clamp(260px, 42vw, 520px); object-fit: cover; display: block; }
.hc-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 44px;
  background: linear-gradient(to top, rgba(7,22,35,.86), rgba(7,22,35,0)); color: #fff; }
.hc-cap h3 { color: #fff; margin: 0 0 6px; font-size: clamp(20px, 2.4vw, 30px); }
.hc-cap p { color: rgba(255,255,255,.92); margin: 0 0 14px; max-width: 660px; font-size: 15px; line-height: 1.55; }
.hc-cap .btn-light { background: #fff; color: #0d2233; border-color: #fff; }
.hc-cap .btn-light:hover { background: #ffe9d6; }
.hc-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(7,22,35,.5);
  color: #fff; font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.hc-arrow:hover { background: rgba(7,22,35,.82); }
.hc-prev { left: 16px; } .hc-next { right: 16px; }
.hc-dots { position: absolute; bottom: 16px; right: 20px; z-index: 3; display: flex; gap: 8px; }
.hc-dot { width: 10px; height: 10px; border-radius: 50%; border: 0; background: rgba(255,255,255,.45); cursor: pointer; padding: 0; }
.hc-dot.is-on { background: #fff; }
@media (max-width: 640px) {
  .hc-cap { padding: 16px 18px; }
  .hc-cap p { display: none; }
  .hc-cap .btn-light { font-size: 12px; padding: 8px 12px; }
  .hc-arrow { width: 36px; height: 36px; font-size: 18px; }
  .hc-slide img { height: 210px; }
  .hc-dots { bottom: 10px; right: 12px; }
  .banner-cap { padding: 16px 18px; }
  .banner-cap p { display: none; }
  .banner-cap h3 { font-size: 18px; }
}

/* ==========================================================================
   2026-11 修复：导航点击被桥接层拦截 / 画廊留白 / 参数条居中 / 头部搜索
   ========================================================================== */

/* ① 取消 mega 面板上方的透明「悬停桥接层」：它向上覆盖了导航链接本身，
      导致点击 Products/Solutions 时命中的是这层透明 div，链接点不动。
      间隙改由 JS 悬停意图(is-open)接管，键盘 :focus-within 仍然有效。 */
.nav-item.is-mega .mega::before { content: none; display: none; }

/* ② 产品画廊：横图产品照在 1:1 方框里上下留出大片白。改成 4:3 舞台 +
      contain 居中，横图只留少量边；竖图/方图左右留白，整体不再撑高 hero。 */
.pd-hero .gal-stage { aspect-ratio: 4 / 3; }
.pd-hero .gal-stage img {
  aspect-ratio: auto; width: 100%; height: 100%;
  object-fit: contain; padding: 16px; background: transparent;
}
@media (max-width: 640px) {
  .pd-hero .gal-stage { aspect-ratio: 1 / 1; }
  .pd-hero .gal-stage img { padding: 10px; }
}

/* ④ 头部产品搜索：默认只露一个放大镜，点开向右展开浮层，避免挤压导航 */
.nav-search { position: relative; display: flex; align-items: center; margin-left: 12px; }
.ns-btn {
  width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: #fff; border-radius: 999px; cursor: pointer;
  color: var(--steel); transition: color .15s, border-color .15s, background .15s;
}
.ns-btn:hover, .ns-btn[aria-expanded="true"] { color: #fff; background: var(--ink); border-color: var(--ink); }
.ns-btn svg { width: 17px; height: 17px; }
.ns-panel {
  position: absolute; right: 0; top: calc(100% + 12px); z-index: 130;
  width: min(430px, 88vw); background: #fff; border: 1px solid var(--line);
  box-shadow: 0 24px 54px -18px rgba(11,31,46,.30); padding: 12px;
}
.ns-panel[hidden] { display: none; }
.ns-input {
  width: 100%; border: 1px solid var(--line); background: var(--bg-2);
  padding: 11px 13px; font-size: 14px; color: var(--ink); border-radius: 4px; outline: none;
}
.ns-input:focus { border-color: var(--accent); background: #fff; }
.ns-results { margin-top: 8px; max-height: 52vh; overflow: auto; }
.ns-row {
  display: flex; align-items: baseline; gap: 10px; padding: 9px 10px; border-radius: 4px;
  color: var(--ink); border-bottom: 1px solid var(--line-soft);
}
.ns-row:last-child { border-bottom: 0; }
.ns-row:hover, .ns-row.is-on { background: var(--bg-2); }
.ns-row b { font-size: 13.5px; letter-spacing: .01em; }
.ns-row span { font-size: 12px; color: var(--slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ns-row i { margin-left: auto; font-family: var(--ff-mono); font-style: normal; font-size: 10.5px; color: var(--muted); text-transform: uppercase; }
.ns-empty { padding: 12px 10px; font-size: 13px; color: var(--muted); }
.ns-hint { padding: 10px; font-size: 11.5px; color: var(--muted); font-family: var(--ff-mono); letter-spacing: .04em; }
@media (max-width: 980px) {
  .nav-search { margin-left: auto; }
  .ns-panel { position: fixed; left: 12px; right: 12px; width: auto; top: calc(var(--nav-h) + 8px); }
}

/* ==========================================================================
   2026-11 修复②：产品网格孤行。移动端保持一行两个，总数奇数时最后一张
   跨满两列、按半宽居中，不再右侧留半边空白。桌面 3 列同理处理余 1 张。
   ========================================================================== */
@media (max-width: 1180px) {
  .prod-grid:has(> .prod-card:last-child:nth-child(odd)) > .prod-card:last-child {
    grid-column: 1 / -1; justify-self: center; width: calc(50% - 1px);
  }
}
@media (min-width: 1181px) {
  .prod-grid:has(> .prod-card:last-child:nth-child(3n+1)) > .prod-card:last-child {
    grid-column: 1 / -1; justify-self: center; width: calc(33.3333% - 1px);
  }
}

/* 手机端由 1 列改回 2 列（用户要求一行两个），仅极窄屏降为单列 */
@media (max-width: 640px) {
  .prod-grid { grid-template-columns: repeat(2, 1fr); }
  .prod-grid .prod-thumb img { padding: 8px; }
  .prod-grid .prod-body { padding: 10px 10px 12px; }
  .prod-grid .prod-model { font-size: 14px; }
  .prod-grid .prod-name { font-size: 12px; margin-bottom: 6px; }
  .prod-grid .prod-form { font-size: 10px; letter-spacing: .04em; margin-bottom: 4px; }
  .prod-grid .prod-go { font-size: 11px; padding-top: 8px; }
  .prod-grid .tag { font-size: 9px; padding: 1px 4px; }
}
@media (max-width: 330px) {
  .prod-grid { grid-template-columns: 1fr; }
  .prod-grid:has(> .prod-card:last-child:nth-child(odd)) > .prod-card:last-child {
    width: 100%;
  }
}

/* ==========================================================================
   2026-11 视觉升级：产品卡（参考同行范式）
   全站大面积白 + 白底产品图 = 没有层次。改为浅灰渐变图区 + multiply 融合，
   产品从底色里"浮"出来；规格做成 pill 标签，主操作保持品牌橙。
   ========================================================================== */
.prod-grid { background: transparent; border-color: var(--line); }

.prod-card {
  background: #fff;
  transition: transform .2s ease, box-shadow .2s ease, background .2s;
}
.prod-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -22px rgba(11, 31, 46, .38);
  z-index: 2;
}

/* 图区：浅灰冷调渐变。multiply 让纯白底"溶解"进底色，产品边缘带上淡影。 */
.prod-thumb {
  background: linear-gradient(168deg, #fbfcfd 0%, #f2f4f7 46%, #e6eaef 100%);
  border-bottom: 0;
  isolation: isolate;
}
.prod-thumb img {
  mix-blend-mode: multiply;
  padding: 18px;
  filter: drop-shadow(0 10px 14px rgba(11, 31, 46, .10));
}
.prod-card:hover .prod-thumb img { transform: scale(1.035); }
.prod-card:not(.has-photo) .prod-thumb { background: linear-gradient(168deg, #f7f8fa, #e4e9ee); }

/* 卡片正文 */
.prod-body { padding: 15px 17px 17px; background: #fff; border-top: 1px solid var(--line-soft); }
.prod-model { font-size: 16px; letter-spacing: -.015em; }
.prod-form { color: var(--muted); margin-bottom: 8px; }

/* 规格 pill：第一个走强调色，其余中性 */
.prod-tags { gap: 5px; margin-top: 10px; }
.prod-tags .tag {
  border-radius: 999px; padding: 3px 8px; font-size: 10px;
  background: #eef1f5; color: #46586a; border: 1px solid #e2e7ec;
}
.prod-tags .tag:first-child {
  background: rgba(232, 93, 20, .10); color: #b34a0c; border-color: rgba(232, 93, 20, .22);
}

/* 查看规格：橙字 + 下划线动画 */
.prod-go { color: var(--accent-dk); font-weight: 600; }
.prod-go span { transition: transform .2s; display: inline-block; }
.prod-card:hover .prod-go span { transform: translateX(4px); }

@media (max-width: 640px) {
  .prod-thumb img { padding: 10px; filter: drop-shadow(0 6px 9px rgba(11,31,46,.09)); }
  .prod-body { padding: 11px 11px 13px; }
}

/* ==========================================================================
   Dark-render models (BX6000, BR-A8)
   Two factory posters are shot on black. Instead of forcing them onto a light
   plate, the tile takes the photo's own edge colour (--tile, set inline per
   model) so the shot bleeds into the surface without a visible box.
   ========================================================================== */
.prod-thumb { position: relative; }
.prod-thumb.is-dark { background: var(--tile, #1A1A1A); }
.prod-thumb.is-dark img {
  mix-blend-mode: normal; filter: none; padding: 0;
}
.prod-thumb.is-dark::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}

.pd-hero .gal-stage.is-dark { background: var(--tile, #1A1A1A); }
.pd-hero .gal-stage.is-dark img { mix-blend-mode: normal; filter: none; padding: 0; }


/* ==========================================================================
   2026-11-03 修复：大图裁切 + 产品网格孤行
   1) 轮播与横幅图源已统一为 16:9（1672×941）。容器沿用同一比例，
      object-fit:cover 不再有裁切；之前 clamp(260px,42vw,520px) 在桌面
      实际约 2.8:1，把 1.78 的图上下裁掉三成，这是"显示不全"的根因。
   2) 产品网格：删掉"最后一张半宽居中"，改为整行横排宽卡，
      既不留白也不居中；对任意筛选结果（奇数张）都成立。
   ========================================================================== */

.hc-slide img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.banner-fig img { aspect-ratio: 16 / 9; }

/* 移动端：保持 16:9 完整画面，不再压成 210px 的条 */
@media (max-width: 760px) {
  .hc-slide img { height: auto; aspect-ratio: 16 / 9; }
  .hc-cap { padding: 14px 16px; }
  .hc-cap h3 { font-size: 17px; }
}

/* --- 产品网格孤行：整行横排宽卡（<=1180px 两列 / 桌面三列） --- */
@media (max-width: 1180px) {
  .prod-grid:has(> .prod-card:last-child:nth-child(odd)) > .prod-card:last-child {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
    align-items: center;
  }
  .prod-grid:has(> .prod-card:last-child:nth-child(odd)) > .prod-card:last-child .prod-thumb {
    border-bottom: 0;
    border-right: 1px solid var(--line-soft);
    height: 100%;
    display: flex;
    align-items: center;
  }
  .prod-grid:has(> .prod-card:last-child:nth-child(odd)) > .prod-card:last-child .prod-thumb img {
    aspect-ratio: 4 / 3;
  }
}

@media (min-width: 1181px) {
  .prod-grid:has(> .prod-card:last-child:nth-child(3n+1)) > .prod-card:last-child {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
    align-items: center;
  }
  .prod-grid:has(> .prod-card:last-child:nth-child(3n+1)) > .prod-card:last-child .prod-thumb {
    border-bottom: 0;
    border-right: 1px solid var(--line-soft);
    height: 100%;
    display: flex;
    align-items: center;
  }
  .prod-grid:has(> .prod-card:last-child:nth-child(3n+1)) > .prod-card:last-child .prod-thumb img {
    aspect-ratio: 4 / 3;
  }
}


/* ==========================================================================
   2026-11-03 新增：配件（Accessories）图文卡片
   产品详情页用，数据来自 data/accessories.json，图片为实拍配件图。
   ========================================================================== */
.acc-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 4px;
}
.acc-card {
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.acc-card:hover {
  border-color: #c9d5de;
  box-shadow: 0 16px 32px -24px rgba(11, 31, 46, .5);
  transform: translateY(-2px);
}
.acc-fig {
  background: linear-gradient(180deg, #f8fafb 0%, #eef2f6 100%);
  padding: 16px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.acc-fig img { width: 100%; height: 100%; object-fit: contain; display: block; }
.acc-card figcaption {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.acc-card b { font-size: 14px; color: var(--ink); line-height: 1.35; }
.acc-tag {
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  align-self: flex-start;
}
.acc-tag.is-std { background: var(--ok-lt); color: var(--ok); }
.acc-tag.is-opt { background: var(--accent-lt); color: var(--accent-dk); }
.acc-card em {
  font-style: normal;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}

@media (max-width: 1024px) {
  .acc-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 760px) {
  .acc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .acc-fig { padding: 12px; }
  .acc-card b { font-size: 13px; }
  .acc-card em { display: none; }
}
/* 无实拍图的配件（RFID 手持机源站只给文字）：用标签条，不硬凑占位图 */
.acc-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.acc-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff;
}
.acc-chip b { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.acc-chip em {
  font-style: normal; font-family: var(--ff-mono); font-size: 9.5px;
  letter-spacing: .07em; text-transform: uppercase;
}
.acc-chip.is-std em { color: var(--ok); }
.acc-chip.is-opt em { color: var(--accent-dk); }
.acc-note {
  margin: 22px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.6;
  padding-left: 14px; border-left: 2px solid var(--line);
}



/* ==========================================================================
   2026-11-03 修复：861–980px 区间的导航坍塌
   历史遗留：主导航收起成汉堡的断点是 860px，但导航内容在 861–980px 已放不下，
   横向导航会挤压溢出。这里把“收起抽屉”统一提前到 980px，与 mega 面板静态化
   断点保持一致（见上方 max-width:860px 的 mega 规则）。981px 以上才是横向导航。
   ========================================================================== */
@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-toggle {
    display: block; margin-left: auto; background: none; border: 1px solid var(--line);
    padding: 7px 12px; font-size: 13px; border-radius: var(--radius);
  }
  .nav-links.is-open {
    display: block; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; padding: 8px 20px 20px;
    border-bottom: 1px solid var(--line); max-height: 78vh; overflow: auto; z-index: 60;
  }
  .nav-links.is-open > a {
    display: block; padding: 13px 0; font-size: 15px; border-bottom: 1px solid var(--line-soft);
  }
  .nav-links.is-open .nav-cta { margin: 16px 0 0; width: 100%; }
  .nav-links.is-open .nav-item .nav-top {
    font-size: 15px; padding: 13px 0; width: 100%;
    justify-content: space-between; border-bottom: 1px solid var(--line-soft);
  }
}

/* ==========================================================================
   2026-11-03 新增：首页产品阵列（The line-up）
   原先这里是一张压平的 9 机拼图，想加机型就得重画。改成 HTML 机架：
   真实产品图按底座对齐、可点、可标 New，条数与排序改 build.py 的 LINEUP 即可。
   ========================================================================== */
/* 2026-11-03 背景：浅灰 → 品牌淡橙（--accent-lt）。
   纯橙 #F26B21 会把产品图的暗色机身压成剪影，细节全丢；淡橙只上 8% 的暖度，
   既能接住品牌色，又不影响 11 张产品图的辨识度。 */
.lineup-band { background: var(--accent-lt); border-top: 1px solid #FFD9C2; }
/* 通栏机架：占满视口宽度（比 .wrap 宽），10 款才排得开；
   overflow-x:auto 让小屏退化为可横向滑动，而不是把最后一款裁掉。 */
.lu-rail {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: clamp(6px, 0.85vw, 14px);
  padding: 40px 0 24px; margin: 8px 0 0;
  border-bottom: 3px solid var(--ink);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.lu-item {
  flex: 0 0 auto; scroll-snap-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center; padding: 0 2px 0;
  transition: transform .18s ease;
}
.lu-item:hover { transform: translateY(-6px); }
.lu-fig {
  position: relative;
  height: calc(var(--h) * var(--lu-scale, .84));
  display: flex; align-items: flex-end; justify-content: center;
  margin-bottom: 14px;
}
.lu-fig img {
  height: 100%; width: auto; display: block;
  /* 产品图为白底，multiply 让白底在浅灰底面上消失，边缘比抠图更自然 */
  mix-blend-mode: multiply;
  transition: filter .18s ease;
}
.lu-item:hover .lu-fig img { filter: drop-shadow(0 10px 14px rgba(11,31,46,.18)); }
.lu-item b {
  font-size: 12.5px; font-weight: 700; color: var(--ink);
  letter-spacing: -0.01em; line-height: 1.2;
}
.lu-item em {
  font-style: normal; font-size: 10.5px; color: var(--muted);
  line-height: 1.3; max-width: 78px;
}
.lu-facts {
  display: flex; gap: 40px; flex-wrap: wrap; margin-top: 22px;
}
.lu-facts > div { display: flex; flex-direction: column; gap: 2px; }
.lu-facts b {
  font-size: 22px; line-height: 1; color: var(--ink);
  letter-spacing: -0.03em; font-weight: 700;
}
.lu-facts span {
  font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}

/* 11 款排下来总宽约 1260px，1300px 以下先缩比例 */
@media (max-width: 1300px) {
  .lu-rail { --lu-scale: .74; }
}
/* 平板 / 手机：横向长条要一路划才看得完，改成上下叠加的清单。
   一行一台机器 —— 缩略图在左、型号与尺寸在右，用分隔线替代底座横线；
   1180px 以下两列，620px 以下一列。 */
@media (max-width: 1180px) {
  .lu-rail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 32px;
    overflow: visible;
    border-bottom: 0;
    padding: 6px 0 0; margin-top: 2px;
    scroll-snap-type: none;
  }
  .lu-item {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 16px;
    width: 100%; text-align: left;
    padding: 10px 0;
    border-bottom: 1px solid var(--line-soft);
    scroll-snap-align: none;
  }
  .lu-item:hover { transform: none; }
  /* 图占左侧两行，型号与尺寸在右侧上下排 —— 不这么写 b/em 会掉到第二行去 */
  .lu-fig { grid-column: 1; grid-row: 1 / span 2; height: 62px; margin: 0; justify-content: flex-start; }
  .lu-fig img { height: 100%; width: auto; max-width: 100%; }
  .lu-item b { grid-column: 2; grid-row: 1; align-self: end; font-size: 13.5px; }
  .lu-item em {
    grid-column: 2; grid-row: 2; align-self: start;
    display: block; font-size: 11.5px; max-width: none; margin-top: 2px;
  }
  .lu-facts { gap: 26px; margin-top: 20px; }
  .lu-facts b { font-size: 18px; }
}
@media (max-width: 620px) {
  .lu-rail { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lu-item { grid-template-columns: 84px minmax(0, 1fr); padding: 11px 0; }
  .lu-fig { height: 66px; }
  .lu-item b { font-size: 14px; }
}

/* 新款角标：产品卡 / 首页卡 / 详情页标题共用 */
.new-flag {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  font-family: var(--ff-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--accent); color: #fff;
  padding: 3px 7px; border-radius: 999px; line-height: 1.3;
  box-shadow: 0 4px 10px -4px rgba(242,107,33,.8);
}
.new-flag.is-big {
  position: static; display: inline-block; vertical-align: middle;
  margin-left: 12px; transform: translateY(-6px);
  font-size: 11px; padding: 4px 10px; letter-spacing: .12em;
}
.prod-thumb, .hc-img { position: relative; }

/* ==========================================================================
   2026-11-03 新增：产品页「Design & build」参数条
   数据全部来自参数表（尺寸/重量/电池/屏幕），每款产品因此有自己的一组数字，
   不再靠人工给每款写“设计语言”。
   ========================================================================== */
.pd-design {
  padding: 40px 0 34px; border-top: 1px solid var(--line-soft); background: var(--bg);
}
.dd-head { max-width: 640px; }
.dd-head h2 {
  font-size: clamp(20px, 2vw, 26px); letter-spacing: -0.02em; line-height: 1.2; margin: 10px 0 8px;
}
.dd-head p { font-size: 14px; line-height: 1.6; color: var(--muted); }
.dd-slim {
  display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px;
  background: var(--accent-lt); color: var(--accent-dk);
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; vertical-align: 1px;
}
.dd-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; margin-top: 22px; background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.dd {
  background: #fff; padding: 16px 18px 18px;
  display: flex; flex-direction: column; gap: 4px;
}
.dd span {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.dd b { font-size: 22px; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); }
.dd em {
  font-style: normal; font-size: 11.5px; color: var(--muted); line-height: 1.4;
}
@media (max-width: 760px) {
  .dd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dd b { font-size: 18px; }
}

/* ============================================================
   Developers / integration page
   ============================================================ */
.dev-head .lead { max-width: 760px; }

.dev-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); }
.dev-card-box { padding: 34px 32px; background: var(--bg); }
.dev-card-box + .dev-card-box { border-left: 1px solid var(--line); }
.dev-card-box.is-project { background: var(--bg-2); }
.dev-card-box h2 { font-size: 24px; margin: 10px 0 6px; letter-spacing: -0.02em; }
.dev-sub { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 0 0 18px; max-width: 440px; }

.dev-list { list-style: none; margin: 0; padding: 0; }
.dev-list li { padding: 13px 0; border-top: 1px solid var(--line-soft); font-size: 14px; line-height: 1.55; color: var(--slate); }
.dev-list li:first-child { border-top: 0; padding-top: 0; }
.dev-list b { display: block; color: var(--ink); font-weight: 600; font-size: 14px; margin-bottom: 2px; }

.dev-tbl td { font-size: 13.5px; }
.dev-note { font-size: 13px; color: var(--muted); line-height: 1.65; margin-top: 16px; max-width: 820px; }

.dev-req { border: 1px solid var(--line); background: var(--bg); padding: 28px 26px; }
.dev-req h3 { font-size: 19px; margin: 8px 0 16px; }
.dev-ol { margin: 0 0 16px; padding-left: 18px; color: var(--slate); font-size: 14px; line-height: 1.75; }

.dev-contact { margin-top: 26px; display: grid; gap: 10px; }
.dev-contact div { display: flex; gap: 14px; align-items: baseline; font-size: 14px; }
.dev-contact .mono { font-size: 10.5px; letter-spacing: .1em; color: var(--muted); min-width: 74px; }
.dev-contact a { color: var(--ink); border-bottom: 1px solid var(--line); }

.dev-form { border: 1px solid var(--line); background: var(--bg); padding: 28px 26px; display: grid; gap: 16px; }
.dev-field { display: grid; gap: 6px; }
.dev-field label { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--ink); }
.dev-field input, .dev-field select, .dev-field textarea {
  width: 100%; padding: 11px 12px; border: 1px solid var(--line); background: #fff;
  font: inherit; font-size: 14px; color: var(--ink); border-radius: 0;
}
.dev-field input:focus, .dev-field select:focus, .dev-field textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.dev-field textarea { resize: vertical; }
.dev-submit { width: 100%; }
.dev-form-note { font-size: 11.5px; color: var(--muted); line-height: 1.55; margin: 0; text-align: center; }

.dev-faq { border-top: 1px solid var(--line); }
.dev-faq-item { padding: 22px 0; border-bottom: 1px solid var(--line); }
.dev-faq-item h3 { font-size: 16.5px; margin: 0 0 8px; }
.dev-faq-item p { font-size: 14.5px; color: var(--slate); line-height: 1.7; margin: 0; }

.dev-band {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin-top: 26px; padding: 24px 26px; border: 1px solid var(--line); background: var(--bg-2);
}
.dev-band h3 { font-size: 19px; margin: 6px 0 6px; }
.dev-band p { font-size: 13.5px; color: var(--slate); line-height: 1.6; margin: 0; max-width: 620px; }
.dev-band .btn { flex: none; }

@media (max-width: 900px) {
  .dev-split { grid-template-columns: 1fr; }
  .dev-card-box + .dev-card-box { border-left: 0; border-top: 1px solid var(--line); }
  .dev-band { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   Datasheet (print-ready)
   ============================================================ */
.ds-head { padding: 34px 0 26px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.ds-title { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: 16px; flex-wrap: wrap; }
.ds-rev { font-size: 10.5px; letter-spacing: .12em; color: var(--accent-dk); }
.ds-title h1 { font-size: clamp(32px, 4vw, 46px); letter-spacing: -0.035em; margin: 6px 0 4px; }
.ds-sub { font-size: 15px; color: var(--slate); margin: 0; }
.ds-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ds-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 22px; }
.ds-fact { background: #fff; padding: 14px 16px; }
.ds-fact span { display: block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.ds-fact b { font-size: 16px; font-family: var(--ff-mono); font-weight: 500; }
.ds-marks { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.ds-mark { font-size: 10.5px; padding: 4px 8px; border: 1px solid var(--line); background: #fff; color: var(--slate); letter-spacing: .04em; }

.ds-body { padding: 40px 0 60px; }
.ds-top { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; margin-bottom: 36px; }
.ds-fig { margin: 0; border: 1px solid var(--line); background: #fff; display: flex; align-items: center; justify-content: center; padding: 18px; }
.ds-fig img { max-width: 100%; height: auto; max-height: 340px; object-fit: contain; }
.ds-side h2 { font-size: 18px; margin: 0 0 10px; }
.ds-side p { font-size: 14px; color: var(--slate); line-height: 1.7; margin: 0 0 12px; }
.ds-points { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--line); }
.ds-points li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; color: var(--slate); }
.ds-points b { color: var(--ink); font-weight: 600; }

.ds-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ds-tbl thead th { text-align: left; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 0 0 8px; border-bottom: 1px solid var(--ink); }
.ds-tbl td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; line-height: 1.55; }
.ds-tbl td:first-child { width: 34%; color: var(--muted); }
.ds-tbl tr.ds-group th { padding: 20px 0 8px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-dk); border-bottom: 1px solid var(--line); text-align: left; }

.ds-order { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 44px; padding-top: 28px; border-top: 2px solid var(--ink); }
.ds-order h2 { font-size: 16px; margin: 0 0 12px; }
.ds-order ul { margin: 0; padding-left: 16px; font-size: 13.5px; color: var(--slate); line-height: 1.75; }
.ds-order li { margin-bottom: 8px; }
.ds-order b { color: var(--ink); }
.ds-foot { font-size: 12px; color: var(--muted); margin-top: 14px; line-height: 1.6; }

@media (max-width: 820px) {
  .ds-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-top, .ds-order { grid-template-columns: 1fr; gap: 24px; }
}

@media print {
  @page { size: A4; margin: 14mm 12mm; }
  .nav, .topbar, .footer, .wa-float, .breadcrumb, .cta-band, .nav-search,
  .pd-pager, .ds-actions, .qr-hero, .section-alt { display: none !important; }
  body { background: #fff !important; color: #000 !important; font-size: 10.5pt; }
  .ds-head { background: #fff !important; border-bottom: 1.5px solid #000; padding: 0 0 8mm; }
  .ds-head .wrap, .ds-body .wrap { max-width: none; padding: 0; }
  .ds-body { padding: 6mm 0 0; }
  .ds-title h1 { font-size: 26pt; }
  .ds-facts { border: 1px solid #999; background: #fff; }
  .ds-fact { background: #fff !important; }
  .ds-fact b { font-size: 11pt; }
  .ds-mark { border-color: #999; }
  .ds-fig { border: 1px solid #ccc; max-height: 62mm; overflow: hidden; }
  .ds-fig img { max-height: 56mm; }
  .ds-top { gap: 8mm; margin-bottom: 6mm; }
  .ds-tbl { font-size: 9pt; }
  .ds-tbl td { padding: 1.6mm 2mm 1.6mm 0; }
  .ds-tbl tr { page-break-inside: avoid; }
  .ds-tbl tr.ds-group th { page-break-after: avoid; }
  .ds-order { margin-top: 8mm; padding-top: 4mm; page-break-inside: avoid; }
  a { color: #000 !important; text-decoration: none !important; }
}

/* 无配图场景的深色占位：渐变 + 细网纹，保持工业感，不借用不相干的现场照片 */
.scn-img.is-plain { background: linear-gradient(145deg, #123449 0%, #0B1F2E 58%, #16394e 100%); }
.scn-img.is-plain::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 34px 34px;
}
.scn-img.is-plain .scn-num { color: rgba(255,255,255,.35); }
.post-card-img.is-plain {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #123449 0%, #0B1F2E 60%, #16394e 100%);
}
.post-card-mono { color: rgba(255,255,255,.32); font-size: 10px; letter-spacing: .2em; }
.sol-hero.is-plain { background: radial-gradient(120% 130% at 14% 12%, #16405a 0%, #0C2231 46%, #07141c 100%); }
.sol-hero.is-plain::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 56px 56px;
}
.form-fallback { font-size: 12px; color: var(--muted); margin: 10px 0 0; line-height: 1.55; }
.form-fallback a { color: var(--accent-dk); border-bottom: 1px solid currentColor; }
.ds-deploy { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); }
.ds-deploy h2 { font-size: 16px; margin: 0 0 8px; }
.ds-deploy p { font-size: 13.5px; color: var(--slate); line-height: 1.65; margin: 0 0 16px; max-width: 720px; }
.ds-scn-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.ds-scn { background: #fff; padding: 14px 16px; font-size: 13.5px; color: var(--ink); font-weight: 600; display: grid; gap: 3px; }
.ds-scn span { font-weight: 400; font-size: 11.5px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.ds-scn:hover { background: var(--accent-lt); }
@media (max-width: 820px) { .ds-scn-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media print {
  .ds-scn-row { grid-template-columns: repeat(4, 1fr); }
  .ds-scn { background: #fff !important; font-size: 8.5pt; padding: 2mm 2.5mm; }
  .ds-deploy { page-break-inside: avoid; }
}
.ds-deploy { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); }
.ds-deploy h2 { font-size: 16px; margin: 0 0 8px; }
.ds-deploy p { font-size: 13.5px; color: var(--slate); line-height: 1.65; margin: 0 0 16px; max-width: 720px; }
.ds-scn-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.ds-scn { background: #fff; padding: 14px 16px; font-size: 13.5px; color: var(--ink); font-weight: 600; display: grid; gap: 3px; }
.ds-scn span { font-weight: 400; font-size: 11.5px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.ds-scn:hover { background: var(--accent-lt); }
@media (max-width: 820px) { .ds-scn-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media print {
  .ds-scn-row { grid-template-columns: repeat(4, 1fr); }
  .ds-scn { background: #fff !important; font-size: 8.5pt; padding: 2mm 2.5mm; }
  .ds-deploy { page-break-inside: avoid; }
}
@media print {
  /* 打印时不要在 794px 视口下塌成单栏：A4 有足够宽度放两列 */
  .ds-facts { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .ds-top { grid-template-columns: 1fr 1fr !important; }
  .ds-order { grid-template-columns: 1fr 1fr !important; }
  .ds-head { padding-top: 0; }
  .ds-title h1 { margin-top: 2mm; }
}
@media print {
  /* 打印时不要在 794px 视口下塌成单栏：A4 有足够宽度放两列 */
  .ds-facts { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .ds-top { grid-template-columns: 1fr 1fr !important; }
  .ds-order { grid-template-columns: 1fr 1fr !important; }
  .ds-head { padding-top: 0; }
  .ds-title h1 { margin-top: 2mm; }
}