/* GONGDA ZHONGJIE — English site prototype
   Shared stylesheet. Industrial B2B, clean, technical.
   Brand: navy #082442 / blue #17558f / teal #5B6CF0

   Layout rhythm follows the reference set (wide container, generous vertical
   spacing, 16px card radius, pill buttons, Inter first in the stack with the
   system stack as fallback so no webfont request is made). */

:root{
  --navy:#071BC8;
  --blue:#17558f;
  --blue2:#2a6fb8;
  --teal:#5B6CF0;
  --teal-d:#1527D2;
  --ink:#16202e;
  --muted:#5b6878;
  --line:#e2e8f0;
  --line2:#d3dde9;          /* card edges that must read against --bg */
  --bg:#eef3f9;
  --card:#ffffff;
  --shadow:0 1px 2px rgba(7,27,200,.04),0 10px 26px rgba(7,27,200,.06);
  --shadow-lift:0 4px 10px rgba(7,27,200,.10),0 22px 48px rgba(7,27,200,.22);
  --warn:#b45309;
  --warnbg:#fff7ed;
  --warnline:#fed7aa;
  --maxw:1200px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.75;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

/* ---------- header / nav ---------- */
.site-head{
  background:var(--navy);
  color:#fff;
  position:sticky;top:0;z-index:50;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:20px;min-height:64px;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff;}
.brand .mark{
  width:34px;height:34px;border-radius:8px;flex:0 0 34px;
  background:linear-gradient(135deg,var(--teal),var(--blue2));
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:14px;letter-spacing:.02em;color:#06203a;
}
.brand .nm{font-weight:700;font-size:15.5px;letter-spacing:.03em;line-height:1.25;}
.brand .nm small{display:block;font-weight:400;font-size:11.5px;
  color:#9fbcd8;letter-spacing:.06em;margin-top:1px;}
nav.main{display:flex;gap:18px;flex-wrap:wrap;margin-left:auto;}
nav.main a{
  color:#c3d6ec;text-decoration:none;font-size:14px;font-weight:500;
  padding:6px 0;border-bottom:2px solid transparent;transition:.15s;
}
nav.main a:hover{color:#fff;border-bottom-color:var(--teal);}
nav.main a.on{color:#fff;border-bottom-color:var(--teal);}
/* ru / ar / vi carry longer nav labels than English — tighten so the
   language selector stays on the same row instead of wrapping below. */
html[lang="ru"] nav.main,html[lang="ar"] nav.main,html[lang="vi"] nav.main{gap:12px;}
html[lang="ru"] nav.main a,html[lang="ar"] nav.main a,html[lang="vi"] nav.main a{
  font-size:13.2px;white-space:nowrap;}

/* ---------- language selector (top right of the header) ---------- */
.lang{position:relative;flex:0 0 auto;}
.lang-btn{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.24);
  color:#dbe7f4;border-radius:8px;padding:6px 10px;
  font-family:inherit;font-size:13px;font-weight:600;letter-spacing:.04em;
  line-height:1;transition:.15s;
}
.lang-btn:hover{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.4);}
.lang-btn .globe{flex:0 0 auto;}
.lang-btn .chev{transition:transform .18s;flex:0 0 auto;}
.lang.open .lang-btn{background:rgba(255,255,255,.18);color:#fff;}
.lang.open .lang-btn .chev{transform:rotate(180deg);}
.lang-menu{
  position:absolute;right:0;top:calc(100% + 9px);z-index:70;
  min-width:214px;margin:0;padding:6px;list-style:none;
  background:#fff;border:1px solid var(--line2);border-radius:12px;
  box-shadow:var(--shadow-lift);
  display:none;
}
.lang-menu::before{
  content:"";position:absolute;right:16px;top:-7px;width:12px;height:12px;
  background:#fff;border-left:1px solid var(--line2);border-top:1px solid var(--line2);
  transform:rotate(45deg);border-radius:2px 0 0 0;
}
.lang.open .lang-menu{display:block;}
.lang-menu li{margin:0;}
.lang-menu a,.lang-menu .soon{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:9px 12px;border-radius:7px;font-size:14px;line-height:1.35;
  color:var(--ink);text-decoration:none;white-space:nowrap;
}
.lang-menu a:hover{background:#eef4fb;color:var(--blue);}
.lang-menu a.on{background:#eef4fb;color:var(--blue);font-weight:650;}
.lang-menu .soon{color:#9aa8b8;cursor:default;}
.lang-menu .soon em{
  font-style:normal;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:#a9b6c5;border:1px solid var(--line);border-radius:4px;padding:1px 6px;
}
.lang-menu .tick{color:var(--teal-d);font-weight:700;flex:0 0 auto;}
/* ---------- mobile nav toggle (2026-10-14) ----------
   Below 880px the six nav labels used to wrap onto three or four rows inside
   the sticky header — around a quarter of the viewport before any content.
   The nav now collapses behind this button, so the header keeps a single
   row. Hidden above the breakpoint; the markup still carries a plain
   <nav>, so with JS off the links stay reachable via the fallback below. */
.nav-toggle{
  display:none;align-items:center;justify-content:center;
  width:38px;height:38px;flex:0 0 38px;padding:0;cursor:pointer;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.24);
  border-radius:8px;color:#dbe7f4;transition:.15s;
}
.nav-toggle:hover{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.4);}
.nav-toggle:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
.nav-toggle .bars{
  position:relative;display:block;width:17px;height:2px;border-radius:2px;
  background:currentColor;transition:background .18s;
}
.nav-toggle .bars::before,.nav-toggle .bars::after{
  content:"";position:absolute;left:0;width:17px;height:2px;border-radius:2px;
  background:currentColor;transition:top .18s,transform .18s;
}
.nav-toggle .bars::before{top:-5.5px;}
.nav-toggle .bars::after{top:5.5px;}
.site-head.nav-open .nav-toggle .bars{background:transparent;}
.site-head.nav-open .nav-toggle .bars::before{top:0;transform:rotate(45deg);}
.site-head.nav-open .nav-toggle .bars::after{top:0;transform:rotate(-45deg);}

@media(max-width:880px){
  /* brand, language chip and the toggle share one row */
  .site-head .wrap{display:grid;grid-template-columns:1fr auto auto;align-items:center;
    gap:8px 10px;padding-top:9px;padding-bottom:9px;min-height:0;}
  .brand{grid-column:1;grid-row:1;min-width:0;}
  .lang{grid-column:2;grid-row:1;justify-self:end;}
  .nav-toggle{grid-column:3;grid-row:1;display:inline-flex;}
  /* the language panel hangs off the chip; anchor it right so a 214px
     panel cannot run off the edge of a narrow screen */
  .lang-menu{right:0;left:auto;max-width:calc(100vw - 28px);}

  /* nav unfolds as a panel under the bar; bounded and scrollable so a long
     menu can never push past the viewport */
  nav.main{
    grid-column:1 / -1;grid-row:2;margin-left:0;
    display:none;flex-direction:column;flex-wrap:nowrap;gap:0;
    /* 76px = the bar (57) + margin-top (8) + hairline (1) + padding (4) +
       a little air, so bar + panel never exceed the viewport */
    max-height:calc(100vh - 76px);max-height:calc(100dvh - 76px);
    overflow-y:auto;overscroll-behavior:contain;
    margin-top:8px;padding-top:4px;
    border-top:1px solid rgba(255,255,255,.12);
  }
  .site-head.nav-open nav.main{display:flex;}
  nav.main > a,nav.main > .prod{
    display:block;width:100%;padding:12px 2px;
    border-bottom:1px solid rgba(255,255,255,.09);
  }
  .site-head nav.main > a.on{color:#fff;border-bottom-color:rgba(255,255,255,.09);font-weight:650;}
  .prod-btn{
    display:flex;width:100%;justify-content:space-between;
    padding:12px 2px;border-bottom:none;
  }
  /* the products panel stops floating and unfolds inside the nav panel */
  .site-head nav.main .prod-menu{
    position:static;left:auto;right:auto;min-width:0;max-width:none;
    max-height:none;overflow:visible;box-shadow:none;background:transparent;
    border:none;border-radius:0;margin:0;padding:0 0 6px 2px;
  }
  .site-head nav.main .prod-menu::before{display:none;}
  .site-head nav.main .prod-menu .grp{padding:10px 0 4px;color:#9DB0FF;}
  .site-head nav.main .prod-menu .sep{background:rgba(255,255,255,.12);margin:7px 0;}
  .site-head nav.main .prod-menu a{
    color:#c3d6ec;padding:9px 0;border-radius:0;white-space:normal;
  }
  .site-head nav.main .prod-menu a:hover{background:transparent;color:#fff;}
  .site-head nav.main .prod-menu a.on{background:transparent;color:#fff;}
  /* the desktop type-tightening for the long-label languages exists only to
     keep one row; in a vertical column it just makes the text small */
  html[lang] .site-head nav.main a{font-size:15.5px;white-space:normal;}
  html[lang] .site-head nav.main .prod-menu a{font-size:14.5px;}
  html[lang] .site-head nav.main .prod-btn{font-size:15.5px;white-space:normal;}
}

/* Narrow phones: logo + language chip + toggle have to share 360px, which
   used to break "GONGDA ZHONGJIE" onto two lines. Trim the pieces so the
   brand name stays on one line. */
@media(max-width:430px){
  .site-head .wrap{padding-left:15px;padding-right:15px;gap:8px;}
  .brand{gap:9px;}
  .brand .mark-img{width:34px;height:34px;flex:0 0 34px;}
  .brand .nm{font-size:13.5px;letter-spacing:.02em;white-space:nowrap;}
  .nav-toggle{width:36px;height:36px;flex:0 0 36px;}
}

/* ---------- products dropdown (2026-10-12) ----------
   The catalogue outgrew a flat nav, so products collapse into one
   dropdown grouped by product line. Mirrors the language selector so
   the two menus feel like the same control.

   2026-10-13: the panel was white-on-near-white and dissolved into the
   page. It now carries a deeper hairline plus a two-part shadow (a tight
   contact shadow under the edge, a wide soft one for depth) so it reads
   as a lifted layer rather than a hole in the page. */
.prod{position:relative;display:inline-flex;}
.prod-btn{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  background:none;border:none;font-family:inherit;
  color:#c3d6ec;font-size:14px;font-weight:500;
  padding:6px 0;border-bottom:2px solid transparent;transition:.15s;
}
.prod-btn:hover{color:#fff;border-bottom-color:var(--teal);}
.prod.open .prod-btn{color:#fff;border-bottom-color:var(--teal);}
.prod-btn .chev{transition:transform .18s;flex:0 0 auto;}
.prod.open .prod-btn .chev{transform:rotate(180deg);}
.prod-menu{
  position:absolute;left:0;top:calc(100% + 9px);z-index:70;
  min-width:268px;margin:0;padding:8px;list-style:none;
  background:#fff;border:1px solid var(--line2);border-radius:12px;
  box-shadow:var(--shadow-lift);
  display:none;
}
/* the hairline that ties the panel back to its trigger */
.prod-menu::before{
  content:"";position:absolute;left:14px;top:-7px;width:12px;height:12px;
  background:#fff;border-left:1px solid var(--line2);border-top:1px solid var(--line2);
  transform:rotate(45deg);border-radius:2px 0 0 0;
}
html[dir="rtl"] .prod-menu::before{left:auto;right:14px;border-left:none;border-right:1px solid var(--line2);border-radius:0 2px 0 0;}
.prod.open .prod-menu{display:block;}
.prod-menu .grp{
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--teal-d);font-weight:700;padding:11px 12px 5px;
}
.prod-menu .grp:first-child{padding-top:5px;}
.prod-menu .sep{height:1px;background:var(--line);margin:7px 6px;}
.prod-menu li{margin:0;}
/* the panel lives inside <nav class="main">, so every rule that targets the
   top-level nav links also lands on these. Re-state them at nav.main scope
   or the menu inherits the nav's pale blue and 6px-0 padding. */
nav.main .prod-menu a{
  display:block;padding:8px 12px;border-radius:7px;
  font-size:14px;line-height:1.35;color:var(--ink);text-decoration:none;
  white-space:nowrap;border-bottom:none;font-weight:500;
}
nav.main .prod-menu a:hover{background:#eef4fb;color:var(--blue);border-bottom-color:transparent;}
nav.main .prod-menu a.on{background:#eef4fb;color:var(--blue);font-weight:650;border-bottom-color:transparent;}
html[dir="rtl"] .prod-menu{left:auto;right:0;}
@media(max-width:880px){
  .prod{width:100%;}
  .prod-menu{left:0;right:auto;min-width:min(300px,84vw);max-height:70vh;overflow-y:auto;}
  html[dir="rtl"] .prod-menu{left:auto;right:0;}
}

/* ---------- hero ---------- */
.hero{
  background:linear-gradient(140deg,#082442 0%,#123f6d 52%,#1d5f9e 100%);
  color:#fff;padding:88px 0 78px;position:relative;overflow:hidden;
}
.hero::after{
  content:"";position:absolute;right:-140px;top:-120px;width:460px;height:460px;
  border-radius:50%;background:radial-gradient(circle,rgba(91,108,240,.16),transparent 68%);
}
.hero .wrap{position:relative;z-index:1;}
.eyebrow{
  display:inline-block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal);border:1px solid rgba(91,108,240,.45);
  border-radius:999px;padding:4px 14px;margin-bottom:20px;
}
.hero h1{margin:0 0 20px;font-size:44px;line-height:1.18;font-weight:700;letter-spacing:-.022em;}
.hero h1 em{font-style:normal;color:var(--teal);}
.hero .sub{font-size:18.5px;color:#dbe8fa;max-width:700px;margin:0 0 32px;}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;}

.btn{
  display:inline-block;text-decoration:none;font-weight:600;font-size:15px;
  padding:13px 28px;border-radius:999px;transition:.16s;border:1px solid transparent;
}
.btn-p{background:var(--teal);color:#06233c;}
.btn-p:hover{background:#9DB0FF;}
.btn-g{border-color:rgba(255,255,255,.35);color:#fff;}
.btn-g:hover{background:rgba(255,255,255,.1);}

/* ---------- generic ---------- */
main{padding:0 0 88px;}
section{padding:72px 0;}
section.tight{padding:48px 0;}
h2{font-size:31px;line-height:1.3;margin:0 0 18px;font-weight:700;letter-spacing:-.018em;}
h3{font-size:20px;margin:0 0 10px;font-weight:650;letter-spacing:-.008em;}
h4{font-size:16px;margin:22px 0 8px;font-weight:650;color:var(--blue);}
p{margin:0 0 15px;}
.lead-p{font-size:18px;color:#33445a;}
.muted{color:var(--muted);font-size:14.5px;}
a.link{color:var(--blue2);text-decoration:none;border-bottom:1px solid rgba(42,111,184,.3);}
a.link:hover{border-bottom-color:var(--blue2);}
.sect-label{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal-d);font-weight:700;margin-bottom:10px;
}

/* ---------- cards ---------- */
.grid{display:grid;gap:20px;}
.g3{grid-template-columns:repeat(3,1fr);}
.g2{grid-template-columns:repeat(2,1fr);}
@media(max-width:880px){.g3,.g2{grid-template-columns:1fr;}}

.card{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:28px 28px 26px;display:flex;flex-direction:column;
}
.card .tag{
  display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--blue2);background:#eef4fb;
  border-radius:999px;padding:3px 11px;margin-bottom:14px;align-self:flex-start;
}
.card h3{margin-bottom:8px;}
.card p{font-size:15px;color:#3d4c60;margin-bottom:12px;}
.card ul{margin:0 0 14px;padding-left:19px;font-size:14.5px;color:#3d4c60;}
.card li{margin-bottom:6px;}
.card .foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--muted);}

/* ---------- citable fact block ---------- */
.fact{
  background:var(--card);border:1px solid var(--line);border-left:5px solid var(--teal);
  border-radius:0 12px 12px 0;padding:24px 28px;margin:20px 0;
}
.fact .h{
  font-size:15.5px;font-weight:700;color:var(--navy);margin:0 0 12px;
  display:flex;align-items:center;gap:9px;
}
.fact .h::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--teal);
  flex:0 0 7px;
}
.fact p{font-size:15.5px;color:#33445a;margin:0 0 12px;}
.fact p:last-child{margin-bottom:0;}
.fact .rule{
  font-size:13.5px;color:var(--muted);font-style:italic;
  border-top:1px dashed var(--line);padding-top:11px;margin-top:14px;
}

/* ---------- table ---------- */
.tbl-wrap{overflow-x:auto;margin:20px 0;border-radius:12px;border:1px solid var(--line);}
table{width:100%;border-collapse:collapse;background:var(--card);font-size:14.8px;min-width:600px;}
th,td{padding:12px 15px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);}
th{background:#f0f4f9;color:var(--navy);font-weight:650;font-size:13.8px;
  letter-spacing:.01em;white-space:nowrap;}
tr:last-child td{border-bottom:none;}
td b{color:var(--navy);}

/* ---------- notes ---------- */
.note{border-radius:10px;padding:18px 22px;margin:20px 0;font-size:15px;}
.note p:last-child{margin-bottom:0;}
.note .t{font-weight:700;display:block;margin-bottom:7px;}
.note.warn{background:var(--warnbg);border:1px solid var(--warnline);}
.note.warn .t{color:var(--warn);}
.note.info{background:#eef4fb;border:1px solid #cfe0f2;}
.note.info .t{color:var(--blue);}

/* ---------- cta band ---------- */
.band{
  background:linear-gradient(135deg,#0b2c4f,#17558f);color:#fff;
  border-radius:14px;padding:40px 40px;margin:44px 0 0;
}
.band h3{font-size:22px;color:#fff;margin-bottom:10px;}
.band p{color:#c3d6ec;margin-bottom:22px;max-width:620px;}

/* ---------- footer ---------- */
.site-foot{
  background:var(--navy);color:#93aecb;padding:48px 0 34px;font-size:14.2px;
}
.site-foot a{color:#c3d6ec;text-decoration:none;}
.site-foot a:hover{color:#fff;}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr .95fr 1fr;gap:30px;}
@media(max-width:980px){.foot-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:880px){.foot-grid{grid-template-columns:1fr;}}
.site-foot h5{color:#fff;font-size:14px;margin:0 0 13px;font-weight:650;
  letter-spacing:.03em;}
.site-foot ul{list-style:none;padding:0;margin:0;}
.site-foot li{margin-bottom:8px;}
.foot-base{
  margin-top:36px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);
  font-size:13px;color:#7a96b4;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
}

/* ---------- misc ---------- */
.kv{display:grid;grid-template-columns:150px 1fr;gap:9px 18px;font-size:15px;}
.kv dt{color:var(--muted);}
.kv dd{margin:0;}
@media(max-width:620px){.kv{grid-template-columns:1fr;gap:2px 0;}.kv dd{margin-bottom:11px;}}

.proto-note{
  background:#1a2433;color:#c3d6ec;font-size:13px;padding:11px 22px;
  text-align:center;letter-spacing:.02em;
}
.proto-note b{color:var(--teal);}

/* ================= photos & figures (2026-10-10) ================= */
.hero.hero-photo{
  background-image:
    linear-gradient(140deg,rgba(7,27,200,.93) 0%,rgba(18,63,109,.87) 52%,rgba(29,95,158,.79) 100%),
    url("img/membrane-rack.jpg");
  background-size:cover,cover;
  background-position:center,center 38%;
}

.fig{margin:24px 0;}
.fig img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line);background:#fff;}
.fig figcaption{font-size:13.5px;color:var(--muted);margin-top:10px;line-height:1.6;}
.fig-sm{max-width:540px;}

.split{display:grid;grid-template-columns:1.05fr 1fr;gap:34px;align-items:center;}
.split.rev > *:first-child{order:2;}
@media(max-width:880px){/* minmax(0,1fr) 而不是 1fr：1fr 的最小值是 min-content，里面 580px 的
   示意图会把整列撑到 626px，手机端整页横向溢出。 */
.split{grid-template-columns:minmax(0,1fr);gap:24px;}.split.rev > *:first-child{order:0;}}

/* ================= photo band: image + caption side by side =================
   Side-by-side rather than overlaid, so a photo is never reduced to an
   unreadable horizontal slice of itself. */
.photo-band{
  display:grid;grid-template-columns:1.2fr 1fr;align-items:stretch;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:#fff;margin:0;
}
.photo-band img{display:block;width:100%;height:340px;object-fit:cover;object-position:center;}
.photo-band .cap{
  padding:28px 32px;background:#f2f6fa;border-left:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:center;
}
.photo-band .cap b{display:block;font-size:18.5px;color:var(--navy);margin-bottom:8px;line-height:1.35;}
.photo-band .cap span{font-size:14.5px;color:var(--muted);display:block;line-height:1.62;}
@media(max-width:880px){
  .photo-band{grid-template-columns:1fr;}
  .photo-band img{height:250px;}
  .photo-band .cap{border-left:none;border-top:1px solid var(--line);padding:22px 24px;}
}

/* renders on a white background: show the whole unit instead of cropping it */
.photo-band.render img{object-fit:contain;background:#fff;padding:14px;}

/* full-bleed strip variant (wide banner, caption bar underneath) */
.photo-band.strip{display:block;}
.photo-band.strip img{height:auto;}
.photo-band.strip .cap{border-left:none;border-top:1px solid var(--line);padding:20px 26px 22px;justify-content:flex-start;}

.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:26px 0;}
.gallery figure{margin:0;}
.gallery img{display:block;width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;
  border-radius:10px;border:1px solid var(--line);background:#eef4fb;}
.gallery figcaption{font-size:13px;color:var(--muted);margin-top:9px;line-height:1.55;}
@media(max-width:880px){.gallery{grid-template-columns:1fr 1fr;}}

/* catalogue renders: the product sits on a white field, so the tile is made a
   white surface too - the image and the card become one piece and no white
   rectangle is left floating on the tinted page. A deeper hairline and a soft
   shadow, rather than a tint, are what lift it off the background. */
.gallery.renders img{
  object-fit:contain;background:#fff;padding:12px;
  border:1px solid var(--line2);border-radius:12px;box-shadow:var(--shadow);
}
.gallery.renders figure{transition:transform .18s,box-shadow .18s;}
.gallery figcaption b{display:block;color:var(--navy);font-size:13.5px;margin-bottom:2px;font-weight:650;}
.gallery.two{grid-template-columns:repeat(2,1fr);}
@media(max-width:880px){.gallery.two{grid-template-columns:1fr;}}

.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:26px 0 6px;}
.stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 20px 18px;}
.stat b{display:block;font-size:25px;color:var(--navy);line-height:1.15;letter-spacing:-.015em;}
.stat span{font-size:13.5px;color:var(--muted);display:block;margin-top:7px;line-height:1.5;}
@media(max-width:880px){.stat-row{grid-template-columns:1fr 1fr;}}

.brand .mark-img{width:38px;height:38px;flex:0 0 38px;display:block;border-radius:50%;}

/* ---------- model code ---------- */
.code-strip{display:flex;flex-wrap:wrap;gap:9px;margin:24px 0 8px;}
.code-seg{border-radius:10px;padding:14px 16px;color:#fff;flex:1 1 128px;min-width:118px;}
.code-seg b{display:block;font-size:19px;letter-spacing:.05em;line-height:1.2;}
.code-seg span{display:block;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.8;margin-top:3px;}
.code-seg i{display:block;font-style:normal;font-size:12.5px;line-height:1.55;margin-top:9px;color:rgba(255,255,255,.9);}
.code-strip + p.muted{margin-top:14px;}

/* ================= page head (sub-pages with a photo header) ================= */
.page-head{
  position:relative;color:#fff;padding:56px 0 46px;overflow:hidden;
  background-image:
    linear-gradient(140deg,rgba(7,27,200,.95) 0%,rgba(18,63,109,.9) 55%,rgba(29,95,158,.84) 100%),
    url("img/membrane-rack.jpg");
  background-size:cover,cover;
  background-position:center,center 45%;
}
.page-head .wrap{position:relative;z-index:1;}
.page-head h1{font-size:31px;line-height:1.28;margin:0 0 14px;font-weight:700;letter-spacing:-.01em;}
.page-head p{color:#dbe8fa;max-width:720px;margin:0;font-size:16.5px;}
.page-head .eyebrow{margin-bottom:16px;}

/* ================= diagrams ================= */
.diagram{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:22px 22px 16px;margin:26px 0;overflow-x:auto;
}
.diagram svg{display:block;width:100%;height:auto;}
.diagram figcaption{font-size:13.5px;color:var(--muted);margin-top:14px;line-height:1.6;}
/* a flow diagram shrunk to a phone width becomes unreadable; let it scroll
   sideways instead */
@media(max-width:620px){
  .diagram svg{min-width:580px;}
  .diagram figcaption{position:sticky;left:0;min-width:calc(100vw - 90px);}
}

/* ================= honour / milestone list ================= */
.honors{display:grid;gap:14px;margin:24px 0;}
.honor{
  display:grid;grid-template-columns:96px 1fr;gap:20px;align-items:start;
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 24px;
}
.honor .yr{
  font-size:21px;font-weight:750;color:var(--blue2);line-height:1.2;letter-spacing:-.01em;
  border-right:2px solid #cfe0f2;padding-right:16px;
}
.honor b{display:block;font-size:16.5px;color:var(--navy);margin-bottom:6px;}
.honor p{margin:0;font-size:14.8px;color:#3d4c60;}
@media(max-width:620px){.honor{grid-template-columns:1fr;gap:8px;}
  .honor .yr{border-right:none;border-bottom:2px solid #cfe0f2;padding:0 0 8px;}}

/* ================= two-col media/text row ================= */
.media-row{
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:24px 0;
}
.media-row figure{margin:0;}
.media-row img{display:block;width:100%;height:300px;object-fit:cover;border-radius:12px;border:1px solid var(--line);background:#eef4fb;}
.media-row figcaption{font-size:13px;color:var(--muted);margin-top:9px;line-height:1.55;}
@media(max-width:880px){.media-row{grid-template-columns:1fr;}.media-row img{height:230px;}}
/* arrangement drawings: fit the whole unit in, do not crop it */
.media-row.renders img{object-fit:contain;padding:12px;}
/* portrait site photos: a 300px band would slice them to the middle third */
.media-row.tall img{height:440px;}
@media(max-width:880px){.media-row.tall img{height:330px;}}

/* ================= spec strip (compact key/value row) ================= */
.spec-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:22px 0;}
.spec-row .s{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px;}
.spec-row .s b{display:block;font-size:21px;color:var(--navy);line-height:1.2;}
.spec-row .s span{display:block;font-size:13.5px;color:var(--muted);margin-top:6px;line-height:1.5;}
@media(max-width:880px){.spec-row{grid-template-columns:1fr;}}

/* ================= inline text link list ================= */
.inline-links{font-size:15px;color:var(--muted);margin:18px 0 0;}
.inline-links a{margin-right:6px;}

/* ================= certificate display ================= */
.cert-frame{
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;
  box-shadow:0 10px 30px rgba(7,27,200,.10);margin:0;
}
.cert-frame img{display:block;width:100%;height:auto;border-radius:6px;}
.cert-frame figcaption{font-size:13px;color:var(--muted);margin-top:12px;line-height:1.62;padding:0 2px;}

/* ================= document availability list ================= */
.doc-list{list-style:none;padding:0;margin:22px 0 0;}
.doc-list li{
  background:var(--card);border:1px solid var(--line);border-left:4px solid var(--warn);
  border-radius:0 10px 10px 0;padding:15px 22px;margin-bottom:11px;
  font-size:14.8px;color:#3d4c60;line-height:1.68;
}
.doc-list li b{display:block;color:var(--navy);font-size:15.5px;margin-bottom:4px;}
.doc-list li.have{border-left-color:var(--teal-d);}

/* ================= RTL (Arabic / ar) =================
   The Arabic pages are served with dir="rtl" on <html>. Grid and flex
   already mirror themselves; only the hard-coded left/right edges below
   need to be swapped by hand. */
html[dir="rtl"] nav.main{margin-left:0;margin-right:auto;}
html[dir="rtl"] .card ul{padding-left:0;padding-right:19px;}
html[dir="rtl"] th,html[dir="rtl"] td{text-align:right;}
html[dir="rtl"] .fact{
  border-left:1px solid var(--line);border-right:5px solid var(--teal);
  border-radius:12px 0 0 12px;}
html[dir="rtl"] .photo-band .cap{
  border-left:none;border-right:1px solid var(--line);}
html[dir="rtl"] .photo-band.strip .cap{
  border-right:none;border-top:1px solid var(--line);}
html[dir="rtl"] .honor .yr{
  border-right:none;border-left:2px solid #cfe0f2;
  padding-right:0;padding-left:16px;}
html[dir="rtl"] .inline-links a{margin-right:0;margin-left:6px;}
html[dir="rtl"] .doc-list li{
  border-left:1px solid var(--line);border-right:4px solid var(--warn);
  border-radius:10px 0 0 10px;}
html[dir="rtl"] .doc-list li.have{border-right-color:var(--teal-d);}
@media(max-width:880px){
  html[dir="rtl"] nav.main{margin-right:0;}
  html[dir="rtl"] .photo-band .cap{border-right:none;border-top:1px solid var(--line);}
}
@media(max-width:620px){
  html[dir="rtl"] .honor .yr{border-left:none;border-bottom:2px solid #cfe0f2;padding-left:0;}
}

/* ================= surface polish (2026-10-13) =================
   The page background was darkened a step so that white cards and white
   product renders stop dissolving into it. Every card surface now carries
   the same edge + soft shadow so the whole site reads as one system. */
.card,.stat,.spec-row .s,.cert-frame,.code-strip + .card{
  border-color:var(--line2);
  box-shadow:var(--shadow);
}
.card:hover,.stat:hover,.spec-row .s:hover{box-shadow:0 2px 4px rgba(7,27,200,.05),0 14px 32px rgba(7,27,200,.09);}
.card,.stat,.spec-row .s{transition:box-shadow .2s;}
.photo-band{border-color:var(--line2);box-shadow:var(--shadow);}
table{background:var(--card);}
.tbl-wrap{border-color:var(--line2);}
.media-row.renders img,.fig img{
  border-color:var(--line2);box-shadow:var(--shadow);
}
/* the "renders" mat is white, matching the product field inside it */
.media-row.renders img{background:#fff;}

/* ================= pilot request form (2026-10-21) =================
   Used only on pilot-testing. No backend: the submit handler builds a
   mailto: URL in the visitor's own mail client, so the page stays static
   and works on any host. */
.pilot-form{
  display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;
  margin-top:22px;padding:24px;max-width:780px;
  background:var(--card);border:1px solid var(--line2);border-radius:12px;
  box-shadow:var(--shadow);
}
.pilot-form .pf{display:flex;flex-direction:column;}
.pilot-form label{
  font-size:12px;font-weight:600;letter-spacing:.02em;
  color:var(--muted);margin-bottom:6px;
}
.pilot-form input{
  width:100%;box-sizing:border-box;padding:9px 11px;
  font:inherit;font-size:14px;color:var(--ink);
  background:#fff;border:1px solid var(--line2);border-radius:7px;
}
.pilot-form input::placeholder{color:#9aa7b6;}
.pilot-form input:focus{
  outline:none;border-color:var(--blue2);
  box-shadow:0 0 0 3px rgba(42,111,184,.12);
}
.pilot-form .btn{grid-column:1 / -1;justify-self:start;margin-top:6px;}
.pilot-form .note{grid-column:1 / -1;margin:0;font-size:12.5px;}
@media (max-width:720px){
  .pilot-form{grid-template-columns:1fr;padding:18px;}
}

/* ================= layout rhythm v2 (2026-10-29) =================
   Visual language borrowed from the reference set: wide container, generous
   vertical spacing, one consistent radius scale, pill buttons and pill tags.
   Everything adjustable is collected in this block on purpose — the rules
   above stay as they were, so a future change to the rhythm is one edit here.

   This layer is presentation only. It does not touch heading levels, reading
   order or structured data, so nothing in the SEO / GEO layer moves. */
.card,.stat,.spec-row .s,.tbl-wrap,.fig img,.media-row img,
.cert-frame,.note,.band,.pilot-form,.prod-menu{border-radius:16px;}
.fact{border-radius:0 16px 16px 0;}
.btn,.eyebrow,.card .tag{border-radius:999px;}
.fact{padding:26px 30px;}
.band{padding:44px 46px;margin:48px 0 0;}
.tbl-wrap{margin:24px 0;}
.lead-p{font-size:18px;line-height:1.66;color:#2c3d52;}
/* 首屏之后的第一个栅格多留一点呼吸，和宽容器配合 */
section > .wrap > .grid:first-of-type{margin-top:32px;}

/* ================= homepage v3 (2026-10-29) =================
   首页专用版式：纯色首屏 + 底部业务导航带、圆形图卡、裸数字、
   深色区块做节奏分隔。目的是把信息密度降下来 —— 表格与编码条
   移回各自的详情页，首页只承担「你是做什么的」和「往哪走」。

   只在首页用，类名统一前缀 h-，不影响其它页面。 */

/* ---------- 1. 首屏：纯色，不要照片叠底 ---------- */
.hero.hero-solid{
  background:var(--navy);
  padding:84px 0 0;
}
.hero.hero-solid::after{display:none;}
/* 左文右示意图。文字块不再被挤成窄条 —— 之前 h1 在 "feeds" 处断成孤行。 */
/* 右栏从 396 放到 430：动态示意图比静态图需要更多面积才看得出在动，
   腾出来的空间靠收 gap（76→56）补，左栏仍有 746px，h1 不会被挤断。 */
.hero.hero-solid > .wrap{
  display:grid;grid-template-columns:minmax(0,1fr) 430px;
  gap:56px;align-items:center;padding-bottom:74px;
}
.hero.hero-solid h1{max-width:16em;margin-bottom:20px;}
.hero.hero-solid .sub{max-width:34em;font-size:17px;color:#dbe8fa;margin-bottom:32px;}
.h-diagram{margin:0;}
.h-diagram svg{width:100%;height:auto;display:block;}
.h-diagram figcaption{margin-top:14px;font-size:12.5px;line-height:1.55;color:#b8cde8;}

/* 首屏底部的业务导航带 —— 一眼看到四条线，点得进去 */
.h-herobar{border-top:1px solid rgba(255,255,255,.14);}
.h-herobar .wrap{display:flex;align-items:stretch;padding-top:0;padding-bottom:0;}
.h-herobar a{
  flex:1 1 0;display:block;text-decoration:none;
  padding:24px 26px 24px 0;
  border-right:1px solid rgba(255,255,255,.1);transition:.15s;
}
.h-herobar a:last-child{border-right:none;}
.h-herobar a:hover span{color:var(--teal);}
.h-herobar a b{display:block;font-size:11px;font-weight:700;color:var(--teal);
  letter-spacing:.16em;margin-bottom:10px;}
.h-herobar a span{display:block;font-size:16.5px;font-weight:600;color:#fff;line-height:1.25;transition:.15s;}
.h-herobar a em{display:block;font-style:normal;font-size:13px;color:#8ba7c2;
  margin-top:7px;line-height:1.4;}

/* ---------- 2. 主营业务：四块白底产品图，等宽等高 ---------- */
.h-biz{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;}
.h-biz > a{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;}
.h-biz .pic{
  width:100%;aspect-ratio:4/3;border-radius:14px;overflow:hidden;
  background:#f2f6fa;margin-bottom:20px;
}
.h-biz .pic img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);}
.h-biz > a:hover .pic img{transform:scale(1.035);}
.h-biz .num{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--teal-d);}
.h-biz h3{margin:8px 0 10px;font-size:19px;}
.h-biz p{font-size:14.5px;color:#4a5b6e;line-height:1.6;margin-bottom:14px;}
.h-biz .go{font-size:14px;color:var(--blue2);font-weight:600;margin-top:auto;}

/* ---------- 3. 关于：左图右文 + 裸数字 ---------- */
.h-about{display:grid;grid-template-columns:1.05fr 1fr;gap:52px;align-items:center;}
.h-about .pic{border-radius:20px;overflow:hidden;background:#e8eef5;}
.h-about .pic img{width:100%;display:block;object-fit:cover;}
.h-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:52px;
  border-top:1px solid var(--line);padding-top:34px;}
.h-nums > div{padding-right:20px;}
.h-nums b{display:block;font-size:40px;line-height:1.05;font-weight:700;
  color:var(--navy);letter-spacing:-.03em;}
.h-nums span{display:block;margin-top:9px;font-size:13.5px;color:var(--muted);line-height:1.5;}

/* ---------- 4. 技术区块：深底，三列 ---------- */
.h-dark{background:var(--navy);color:#fff;}
.h-dark .sect-label{color:var(--teal);}
.h-dark h2{color:#fff;}
.h-dark .lead-p{color:#a9c3dd;}
.h-tech{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:44px;
  border-top:1px solid rgba(255,255,255,.16);}
.h-tech > div{padding:34px 30px 0 0;}
.h-tech > div + div{padding-left:30px;border-left:1px solid rgba(255,255,255,.12);}
.h-tech .num{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--teal);}
.h-tech h3{color:#fff;margin:12px 0 10px;font-size:19px;}
.h-tech p{color:#9fb8d2;font-size:14.5px;line-height:1.65;margin:0;}

/* ---------- 5. 案例：三张大图卡 ---------- */
.h-cases{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;}
.h-case{text-decoration:none;color:inherit;display:block;
  border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;
  transition:box-shadow .2s,border-color .2s;}
.h-case:hover{box-shadow:var(--shadow-lift);border-color:var(--line2);}
.h-case .pic{aspect-ratio:4/3;overflow:hidden;background:#e8eef5;}
.h-case .pic img{width:100%;height:100%;object-fit:cover;display:block;}
.h-case .bd{padding:20px 22px 22px;}
.h-case h3{font-size:17px;margin:0 0 7px;}
.h-case .cap{font-size:13.5px;color:var(--muted);line-height:1.5;margin-bottom:14px;}
.h-case .go{font-size:13.5px;font-weight:600;color:var(--blue2);}

/* ---------- 5b. 环境照宽幅带：一张实景照片，压深色蒙版 ---------- */
.h-band{position:relative;background:var(--navy);color:#fff;padding:104px 0;
  overflow:hidden;isolation:isolate;}
.h-band > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:72% 55%;opacity:.58;z-index:-2;}
.h-band::before{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(7,27,200,.97) 0%,rgba(7,27,200,.90) 42%,rgba(7,27,200,.30) 100%);}
.h-band .sect-label{color:var(--teal);}
.h-band h2{color:#fff;max-width:18em;}
.h-band p{color:#bdd2e6;max-width:38em;font-size:17px;margin:0;}

/* ---------- 6. 资料：左列表 + 右深蓝卡 ---------- */
.h-res{display:grid;grid-template-columns:1fr 1.02fr;gap:56px;align-items:start;}
.h-res ul{list-style:none;margin:22px 0 0;padding:0;}
.h-res li{border-top:1px solid var(--line);}
.h-res li a{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;padding:15px 2px;text-decoration:none;color:inherit;font-size:15.5px;transition:.15s;}
.h-res li a:hover{color:var(--blue2);}
.h-res li span{font-size:13px;color:var(--muted);flex:none;}
.h-rescard{background:var(--navy);border-radius:20px;padding:38px 38px 40px;color:#fff;}
.h-rescard h3{color:#fff;font-size:21px;margin:0 0 12px;}
.h-rescard p{color:#a9c3dd;font-size:14.5px;line-height:1.65;margin-bottom:24px;}

/* ---------- 7. 收尾 CTA ---------- */
/* margin-bottom 吃掉 main 的 88px 底部留白（见上 main{padding:0 0 88px}），
   否则页脚前会露出一条浅色空带。 */
.h-cta{background:var(--navy);color:#fff;padding:78px 0 82px;margin-bottom:-88px;}
.h-cta h2{color:#fff;max-width:20em;font-size:32px;}
.h-cta p{color:#c5d8ee;max-width:44em;margin-bottom:30px;}

/* ================= 视觉密度对齐（2026-10-29） =================
   实测对照 www.plumem.com 首页：
     容器 1376px / h1 53.3px·字距 -1.86 / h2 48px / 区块留白 112px / 按钮 8px 线框
   本站此前：
     容器 1200px / h1 44px·字距 -0.97 / h2 31px / 区块留白 72px / 按钮 999px 胶囊
   差距落在「字太小、留白太紧、按钮太重」这三件事上，不在结构。
   这一段只调参数，不动任何标记、文案与语义层级。 */

:root{--maxw:1280px;}

/* 标题层级拉开。h2 原 31px 与 h1 44px 落差不足，整页读起来是一堆
   中等大小的字，没有「大标题 + 留白」的呼吸。 */
h2{font-size:30px;line-height:1.26;letter-spacing:-.02em;}
/* 内页页面标题在 15 个生成脚本里写死了 32px 内联样式，与 h2 同级 ——
   层级是倒挂的（h2 改大后比 h1 还大）。用属性选择器精确覆盖，
   只命中这些内联 32px 的 h1，不必去动 15 个脚本。 */
main h1[style*="font-size:32px"]{font-size:40px!important;line-height:1.2!important;
  letter-spacing:-.024em!important;margin-bottom:18px!important;}
.h-sec h2,.h-about h2,.h-band h2,.h-dark h2,.h-res h2,.h-cta h2{
  font-size:46px;line-height:1.16;letter-spacing:-.03em;margin-bottom:20px;
}
.h-biz h3{font-size:21px;}
/* 52px 时 "feeds" 被挤成孤行（左栏 760px 放不下），落回 46px 恰好两行 */
.hero.hero-solid h1{font-size:46px;line-height:1.14;letter-spacing:-.03em;max-width:19em;}

/* 区块留白 72 → 96。普朗 112，但它每屏只放一件事，我们内容密度更高，
   96 是能兼顾节奏与长度的值。 */
section{padding:96px 0;}
.h-band{padding-top:104px;padding-bottom:104px;}
.h-cta{padding-top:96px;padding-bottom:96px;}

/* 按钮：999px 胶囊 → 8px 线框。胶囊在深色底上视觉重量过大，
   四个并排就把版面吵满了；8px 方角更像设备样本。 */
.btn{border-radius:8px;}

/* 深色区块顶部大圆角 —— 普朗用 96px 让色块「浮」在浅底上，
   边界从硬切变柔和。我们取 72px，因为我们区块更多、太圆会腻。 */
.h-dark,.h-band{border-radius:72px 72px 0 0;}
.h-cta{padding-bottom:72px;}

/* ---------- 响应式 ---------- */
@media(max-width:1100px){
  .hero.hero-solid > .wrap{grid-template-columns:minmax(0,1fr) 316px;gap:48px;}
}
@media(max-width:980px){
  .h-biz{grid-template-columns:repeat(2,1fr);gap:26px 20px;}
  .h-band{padding:72px 0;}
  .h-about{grid-template-columns:1fr;gap:32px;}
  .h-nums{grid-template-columns:repeat(2,1fr);gap:26px 0;}
  .h-tech{grid-template-columns:1fr;}
  .h-tech > div{padding:26px 0 0;}
  .h-tech > div + div{padding-left:0;border-left:none;border-top:1px solid rgba(255,255,255,.12);}
  .h-cases{grid-template-columns:1fr;}
  .h-res{grid-template-columns:1fr;gap:32px;}
  .hero.hero-solid > .wrap{grid-template-columns:1fr;gap:36px;padding-bottom:56px;}
  .h-diagram{max-width:340px;}
  .h-herobar .wrap{flex-wrap:wrap;}
  .h-herobar a{flex:1 1 46%;border-right:none;border-bottom:1px solid rgba(255,255,255,.1);padding:18px 0;}
  .hero.hero-solid h1{font-size:34px;}
  .hero.hero-solid .sub{font-size:15.5px;}
  /* 平板：大标题与大圆角都要收，46px 在 768 宽下会断成三行 */
  .h-sec h2,.h-about h2,.h-band h2,.h-dark h2,.h-res h2,.h-cta h2{font-size:32px;}
  h2{font-size:27px;}
  main h1[style*="font-size:32px"]{font-size:32px!important;}
  .h-dark,.h-band{border-radius:40px 40px 0 0;}
  section{padding:64px 0;}
  .h-band{padding:64px 0;}
}
@media(max-width:620px){
  .hero.hero-solid{padding-top:52px;}
  .hero.hero-solid > .wrap{padding-bottom:44px;gap:28px;}
  .hero.hero-solid h1{font-size:27px;line-height:1.28;}
  .h-sec h2,.h-about h2,.h-band h2,.h-dark h2,.h-res h2,.h-cta h2{font-size:26px;}
  h2{font-size:23px;}
  main h1[style*="font-size:32px"]{font-size:27px!important;line-height:1.24!important;}
  .h-dark,.h-band{border-radius:28px 28px 0 0;}
  .hero.hero-solid h1 br{display:none;}
  /* 手机端原来直接 display:none —— 这行现在是资质信息（产品线/南工大/产业园），
     小屏藏掉等于把最有说服力的一行藏了。放开显示，字号降一档、字距收紧，
     允许折成两行（balance 让两行长度接近）。 */
  .hero.hero-solid .eyebrow{display:inline-flex;font-size:11.5px;letter-spacing:.10em;line-height:1.7;margin-bottom:20px;}
  .h-herobar a{flex:1 1 100%;}
}

/* ==================================================================
   ART DIRECTION 2026-10-30  —  "instrument"
   ------------------------------------------------------------------
   The previous skin was a corporate template: blue field, rounded
   cards, pill buttons, three equal columns, a small-caps eyebrow over
   every block. It read as a LinkedIn post, not as a manufacturer.

   This layer replaces the tokens and the component shapes rather than
   adding a second skin on top. Same class names, so the 146 generated
   pages inherit it without being touched:

     · one warm bone ground instead of three blues
     · display type at poster scale, tracking closed to -.035em
     · square corners, hairline rules, no card borders or shadows
     · buttons are plates, not pills
     · sections breathe at 120px, not 72px

   Loaded last on purpose: every rule below is meant to win against the
   legacy block above it, including its media queries. Anything with a
   breakpoint of its own is repeated at the bottom of this file.
   ================================================================== */

:root{
  /* 2026-10-30 二次调色：原来的 #0516A8 是墨绿，压得住但发闷，读起来像
     一池待处理的水。整体往「清水」方向提亮一档、降饱和、色相偏冷，
     深色底仍然够深（正文对比度 6:1 以上），但不再是黑绿。 */
  --ink:#071BC8;
  --ink-2:#1527D2;
  --ink-3:#2A3BE0;
  --bone:#F5F7FE;
  --paper:#FFFFFF;
  --jade:#071BC8;
  --jade-b:#5B6CF0;
  --jade-d:#0516A8;
  --text:#0A1030;
  --muted:#4A5878;
  --line:rgba(7,27,200,.15);
  --line-2:rgba(7,27,200,.08);
  --line-inv:rgba(245,247,254,.15);
  --line-inv-2:rgba(245,247,254,.07);
  --maxw:1300px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  background:var(--bone);
  color:var(--text);
  font-size:16.5px;
  line-height:1.66;
  letter-spacing:-.005em;
}
.wrap{max-width:var(--maxw);padding:0 40px;}

::selection{background:var(--jade);color:var(--bone);}

/* ---------- header ------------------------------------------------ */
.site-head{
  background:rgba(7,27,200,.97);
  border-bottom:1px solid var(--line-inv-2);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  backdrop-filter:saturate(140%) blur(14px);
}
.site-head .wrap{min-height:74px;gap:26px;}
.brand{gap:12px;}
/* logo 放大：28px 在 74px 高的头部里偏小，字标压过了图形。
   38px 让图形和 GONGDA ZHONGJIE 两个字标重量相当。 */
.brand .mark-img{width:38px;height:38px;flex:0 0 38px;border-radius:0;}
.brand .mark{
  width:28px;height:28px;flex:0 0 28px;border-radius:0;
  background:none;color:var(--jade-b);font-size:13px;letter-spacing:0;
  border:1px solid var(--line-inv);
}
.brand .nm{
  font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  line-height:1.2;color:var(--bone);
}
.brand .nm small{
  display:none;
}
nav.main{gap:26px;}
nav.main a{
  color:rgba(245,247,254,.62);font-size:13.5px;font-weight:450;
  letter-spacing:.01em;padding:4px 0;border-bottom:1px solid transparent;
}
nav.main a:hover{color:var(--bone);border-bottom-color:var(--jade-b);}
nav.main a.on{color:var(--bone);border-bottom-color:var(--jade-b);}
html[lang="ru"] nav.main,html[lang="ar"] nav.main,html[lang="vi"] nav.main{gap:16px;}
html[lang="ru"] nav.main a,html[lang="ar"] nav.main a,html[lang="vi"] nav.main a{font-size:12.8px;}

.prod-btn{color:rgba(245,247,254,.62);font-size:13.5px;font-weight:450;}
.prod-btn:hover,.prod.open .prod-btn{color:var(--bone);border-bottom-color:var(--jade-b);}
.prod-menu{
  border-radius:0;border:1px solid var(--line-inv);
  background:var(--ink-2);box-shadow:0 30px 60px rgba(0,0,0,.5);
}
.prod-menu::before{display:none;}
.prod-menu .grp{color:rgba(245,247,254,.38);letter-spacing:.16em;font-size:10px;}
.prod-menu a{color:rgba(245,247,254,.8);}
.prod-menu a:hover{background:rgba(245,247,254,.07);color:var(--jade-b);}
.prod-menu .sep{background:var(--line-inv-2);}

.lang-btn{
  border-radius:0;border:1px solid var(--line-inv);
  background:none;color:rgba(245,247,254,.72);
  font-size:11.5px;letter-spacing:.14em;padding:7px 11px;
}
.lang-btn:hover{background:rgba(245,247,254,.08);color:var(--bone);border-color:rgba(245,247,254,.3);}
.lang-menu{border-radius:0;border:1px solid var(--line);box-shadow:0 24px 50px rgba(0,0,0,.28);}
.lang-menu::before{display:none;}
.lang-menu a:hover{background:rgba(21,39,210,.08);color:var(--jade);}
.lang-menu a.on{background:rgba(21,39,210,.1);color:var(--jade);}

.nav-toggle{border-radius:0;border-color:var(--line-inv);}

/* ---------- type -------------------------------------------------- */
h1,h2,h3,h4{color:var(--text);}
h2{
  font-size:clamp(32px,3.5vw,54px);
  line-height:1.05;letter-spacing:-.032em;font-weight:600;
  margin:0 0 22px;max-width:22em;
}
h3{font-size:19px;line-height:1.3;letter-spacing:-.014em;font-weight:600;margin:0 0 10px;}
p{margin:0 0 16px;}
a{color:var(--jade);}

.sect-label{
  display:flex;align-items:center;gap:12px;
  font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin-bottom:22px;padding:0;background:none;border:0;
  border-radius:0;
}
.sect-label::before{
  content:"";width:26px;height:1px;background:currentColor;opacity:.5;flex:0 0 26px;
}
.lead-p{font-size:18px;line-height:1.62;color:#2E3A52;max-width:60ch;}

/* ---------- sections ---------------------------------------------- */
section{padding:120px 0;}
section.tight{padding:84px 0;}
section > .wrap > .grid:first-of-type{margin-top:44px;}

/* ---------- buttons ----------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  border-radius:2px;border:1px solid transparent;
  padding:16px 26px;font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;line-height:1;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.btn-p{background:var(--bone);color:var(--ink);border-color:var(--bone);}
.btn-p:hover{background:var(--jade-b);border-color:var(--jade-b);color:#fff;}
.btn-g{border-color:rgba(245,247,254,.34);color:var(--bone);background:none;}
.btn-g:hover{background:rgba(245,247,254,.1);border-color:rgba(245,247,254,.6);}
/* 主按钮必须白底宝蓝字。
   原来这里是「--jade-b 亮蓝紫底 + --ink 宝蓝字」——换成宝蓝皮肤之后，
   两个蓝的明度几乎一样，字直接糊在底上（2026-11-02 截图确认）。
   白底是这块宝蓝上唯一能拉开 8:1 以上对比的解法，也正是普朗的做法。 */
.hero-cta .btn-p{background:#FFFFFF;border-color:#FFFFFF;color:var(--ink);}
.hero-cta .btn-p:hover{background:var(--jade-b);border-color:var(--jade-b);color:#fff;}

.link{
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--jade);text-decoration:none;border-bottom:1px solid rgba(21,39,210,.35);
  padding-bottom:3px;transition:border-color .2s;
}
.link:hover{border-bottom-color:var(--jade);}

/* ---------- 深色底上的强调色 ------------------------------------- */
/* 换到 #071BC8 之后，--teal(#5B6CF0) 落在这块蓝上只有 1.9:1 ——
   小标题、序号、分隔线全部糊掉（2026-11-02 截图确认）。
   不能直接提亮 --teal：它在浅色底上还要用（卡片左边框、表格右沿、小圆点），
   提亮了那些地方就淡得看不见。所以在深色容器里局部覆盖，
   浅色区域继续用原值。 */
.hero,
.page-head,
.h-dark,
.h-cta,
.site-head,
.h-diagram{
  --teal:#9DB0FF;
  --jade-b:#9DB0FF;
}
/* herobar 的说明行在宝蓝上原为 44% 白，读起来发灰 */
.h-herobar a em{color:rgba(245,247,254,.62);}

/* ---------- hero --------------------------------------------------- */
.hero{background:var(--ink);color:var(--bone);}
.hero::after{display:none;}
.hero.hero-solid{
  background:
    radial-gradient(126% 100% at 78% 10%, #2A3BE0 0%, #2A3BE0 34%, #1527D2 68%, #0516A8 100%);
  padding:0;overflow:hidden;position:relative;
}
.hero.hero-solid > .wrap{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:36px;align-items:center;
  min-height:640px;
  padding-top:78px;padding-bottom:96px;
}
.hero h1{
  font-size:clamp(38px,4.3vw,64px);
  line-height:1.02;letter-spacing:-.036em;font-weight:600;
  color:var(--bone);margin:0 0 26px;max-width:15em;text-wrap:balance;
}
.hero h1 em{font-style:normal;color:#BFD4FF;}
.hero .eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  /* 10.5px 是当初给「管式膜 · 折叠滤芯 · 南京制造」定的，纯装饰。
     现在这行承担资质信息（产品线 + 南工大 + 产业园），12px 才读得动。
     字距同时从 .2em 收到 .15em —— 字号变大之后 .2em 在拉丁文里会散架；
     .15em 也是全站小标签的统一值。 */
  /* 12px 用户还是觉得「不够明显」，提到 13px、字距收到 .13em 换回宽度；
     颜色从 .66 提到 .82 —— 宝蓝底上 .66 只有 2.4:1，读得出但立不住。 */
  font-size:13px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  /* .5 的透明度落在宝蓝上只有 1.9:1 —— 这行原来只是「南京制造」这类装饰字，
     读不清也无所谓；换成「管式超滤 · 南京工大 · 膜科技产业园」之后它承担了
     资质信息，再压到读不出来就不合适了。提到 .66。 */
  color:rgba(245,247,254,.82);margin-bottom:30px;
  background:none;border:0;border-radius:0;padding:0;
  /* 窄屏（1100 上下）这行还是放不下，会折成两行。balance 让两行长度接近，
     不然第二行只剩一两个词，看着像排坏了。 */
  text-wrap:balance;
}
.hero .eyebrow::before{content:"";width:26px;height:1px;background:var(--jade-b);}
.hero .sub{
  font-size:17px;line-height:1.62;color:rgba(245,247,254,.62);
  max-width:44ch;margin:0 0 40px;
}

/* the 3D stage */
.h-diagram{
  position:relative;margin:0;display:flex;flex-direction:column;
  height:min(62vh,560px);min-height:380px;
  margin-right:calc(-1 * ((100vw - var(--maxw)) / 2) - 40px);
}
.h-diagram canvas{display:block;width:100%;flex:1 1 auto;min-height:0;}
.h-diagram figcaption{
  position:static;left:auto;bottom:auto;margin-top:14px;
  display:flex;flex-wrap:wrap;gap:6px 22px;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(245,247,254,.42);margin:0;
}
.h-diagram figcaption span{display:inline-flex;align-items:flex-start;gap:8px;}
.h-diagram figcaption i{
  width:5px;height:5px;border-radius:50%;background:var(--jade-b);
  font-style:normal;flex:0 0 5px;margin-top:.5em;
}

/* herobar: four lines, numbered, on a hairline */
.h-herobar{border-top:1px solid var(--line-inv);}
.h-herobar .wrap{display:grid;grid-template-columns:repeat(4,1fr);padding:0 40px;}
.h-herobar a{
  padding:26px 26px 30px 0;border-right:1px solid var(--line-inv-2);
  text-decoration:none;display:block;transition:background .25s var(--ease);
}
.h-herobar a:hover{background:rgba(245,247,254,.04);}
.h-herobar a:last-child{border-right:none;}
.h-herobar a b{
  display:block;font-size:10px;font-weight:600;letter-spacing:.16em;
  color:var(--jade-b);margin-bottom:12px;
}
.h-herobar a span{
  display:block;font-size:15px;font-weight:500;color:var(--bone);
  line-height:1.3;letter-spacing:-.01em;margin-bottom:6px;
}
.h-herobar a em{
  display:block;font-style:normal;font-size:12.5px;line-height:1.45;
  color:rgba(245,247,254,.44);
}

/* 悬停出产品照片：图片铺满整块铭牌，文字浮在上面。
   上一版是「从下沿升起一张 120px 的小卡片」——两个毛病：
   ① 卡片只有 120px 高、宽度还让出 26px，照片被 cover 裁得只剩一条，
      用户的原话是「图片展示不全」；
   ② clip-path 自下而上揭开 + 三层投影，观感像抽屉弹出来，不像照片。
   现在改成把图片当这块铭牌的底：铺满、淡入、压一层暗保证白字可读。
   手机上悬停不存在，直接不显示。 */
.h-herobar a{
  position:relative;overflow:hidden;
  padding:26px 26px 30px 0;border-right:1px solid var(--line-inv-2);
  text-decoration:none;display:block;transition:background .25s var(--ease);
}
.h-herobar a:hover{background:rgba(245,247,254,.04);}
.h-herobar a:last-child{border-right:none;}

/* 底图：铺满整块铭牌，75% 不透明 —— 透出一点 hero 的深绿，照片不发死 */
.h-herobar .peek{
  position:absolute;inset:0;display:block;margin:0;
  opacity:0;pointer-events:none;z-index:0;
  transition:opacity .40s var(--ease);
}
.h-herobar .peek img{
  width:100%;height:100%;object-fit:cover;display:block;
  /* 主体偏右保留：四张图的主体（管束端面、膜组件、滤芯）都在画面右侧，
     默认居中裁会把主体切掉一半。 */
  object-position:68% 50%;
  transform:scale(1.05);
  /* 压一档亮度再上遮罩。四张图里 MBR 那张是整张白膜组件，75% 透明之后
     底色接近白，白字压上去只剩 1.6:1 —— 遮罩再怎么加左侧也救不到右半边。
     照片先自己暗到 .74，遮罩才有余量留给「右透」。
     别往回调亮：试过 .82，管束端面那张的亮度正好贴到 hero 蓝上，
     照片整块糊成一片浅蓝，反而看不见了 —— 深色照片要靠「比底色暗」才成形。 */
  filter:brightness(.88) saturate(1.14) contrast(1.10);
  transition:transform 1.6s cubic-bezier(.22,1,.36,1);
}
/* 遮罩走「左暗右透」：文字全在左侧，右侧留给照片。
   均匀压暗（上一版）会把整块压成灰绿色，照片既看不清、字也没变清楚。 */
.h-herobar .peek::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  /* 2026-11-02 晚：用户说「图片不明显」。上一版左侧压到 .95，
     照片在左边那 42% 基本等于没有，整块读作一片深蓝。改成 .80 → .22
     的通透渐变，四张图从左边就能看出是什么。字靠 text-shadow 托住，
     不靠遮罩 —— 遮罩是均匀的，字却只在左半边，用遮罩保字就等于牺牲半张图。 */
  background:linear-gradient(90deg,
    rgba(5,16,132,.74) 0%,
    rgba(5,16,132,.64) 40%,
    rgba(5,16,132,.40) 78%,
    rgba(5,16,132,.20) 100%);
}
/* 75%：用户点名要的透明度。 */
.h-herobar a:hover .peek,
.h-herobar a:focus-visible .peek{opacity:.90;}
.h-herobar a:hover .peek img,
.h-herobar a:focus-visible .peek img{transform:scale(1);}

/* 文字必须压在图上 */
.h-herobar a b,
.h-herobar a span,
.h-herobar a em{position:relative;z-index:2;}
/* 说明行（em）最长，会伸到遮罩最薄的那一段。给它一层贴地阴影，
   照片再亮也托得住，不用继续加深遮罩把照片压没。 */
.h-herobar a:hover b,
.h-herobar a:hover em,
.h-herobar a:focus-visible b,
.h-herobar a:focus-visible em{text-shadow:0 1px 3px rgba(3,10,70,.95),0 0 16px rgba(3,10,70,.60);}
.h-herobar a:hover b,
.h-herobar a:focus-visible b{color:var(--bone);}
.h-herobar a:hover em,
.h-herobar a:focus-visible em{color:rgba(245,247,254,.86);}
@media(hover:none){.h-herobar .peek{display:none;}}

/* ---------- inner page head ---------------------------------------- */
.page-head{
  background:linear-gradient(160deg,#1527D2 0%,#071BC8 50%,#0516A8 100%);
  color:var(--bone);
  padding:96px 0 76px;border:0;
}
.page-head h1{
  font-size:clamp(32px,3.6vw,54px);line-height:1.04;letter-spacing:-.034em;
  font-weight:600;color:var(--bone);margin:0 0 20px;max-width:20em;
}
.page-head p{color:rgba(245,247,254,.80);font-size:17px;max-width:62ch;margin:0;}
.page-head .eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(245,247,254,.70);margin-bottom:24px;background:none;border:0;padding:0;
}
.page-head .eyebrow::before{content:"";width:26px;height:1px;background:var(--jade-b);}
main h1[style*="font-size:32px"]{
  font-size:clamp(32px,3.6vw,52px)!important;line-height:1.05!important;
  letter-spacing:-.034em!important;margin-bottom:20px!important;font-weight:600!important;
}

/* ---------- cards -------------------------------------------------- */
.grid{gap:2px;background:var(--line-2);border:0;}
.g3{grid-template-columns:repeat(3,minmax(0,1fr));}
.g2{grid-template-columns:repeat(2,minmax(0,1fr));}
.card{
  background:var(--paper);border:0;border-radius:0;box-shadow:none;
  padding:34px 32px 32px;
}
.card:hover{box-shadow:none;background:#fff;}
.card .tag{
  border-radius:0;background:none;border:0;padding:0;
  font-size:10px;letter-spacing:.18em;color:var(--jade);font-weight:600;
  margin-bottom:14px;
}
.card h3{font-size:20px;}
.card p{font-size:15px;line-height:1.62;color:#3A4763;}
.card ul{font-size:14.5px;color:#3A4763;}
.card .foot{border-top:1px solid var(--line-2);padding-top:16px;margin-top:22px;}

/* ---------- stats / specs ------------------------------------------ */
.stat-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:40px 0 8px;
  border-top:1px solid var(--line);}
.stat{background:none;border:0;border-radius:0;box-shadow:none;
  padding:26px 26px 26px 0;border-right:1px solid var(--line-2);}
.stat:last-child{border-right:none;}
.stat b{
  display:block;font-size:34px;line-height:1.02;letter-spacing:-.03em;
  font-weight:500;color:var(--text);font-variant-numeric:tabular-nums;
}
.stat span{font-size:13px;color:var(--muted);margin-top:10px;line-height:1.5;}

.spec-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:32px 0;
  border-top:1px solid var(--line);}
.spec-row .s{background:none;border:0;border-radius:0;box-shadow:none;
  padding:26px 26px 26px 0;border-right:1px solid var(--line-2);}
.spec-row .s:last-child{border-right:none;}
.spec-row .s b{font-size:26px;font-weight:500;letter-spacing:-.028em;color:var(--text);}
.spec-row .s span{font-size:13px;color:var(--muted);}

/* ---------- table -------------------------------------------------- */
.tbl-wrap{
  border:0;border-radius:0;border-top:1px solid var(--line);
  box-shadow:none;margin:32px 0;background:none;
}
table{border-collapse:collapse;width:100%;font-size:14.5px;}
thead th{
  background:none;color:var(--muted);
  font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);
  white-space:nowrap;
}
tbody td{padding:15px 18px;border-bottom:1px solid var(--line-2);vertical-align:top;}
tbody tr:nth-child(even){background:rgba(5,22,168,.022);}
tbody tr:hover{background:rgba(21,39,210,.05);}

/* ---------- notes / fact ------------------------------------------- */
.note{
  border-radius:0;padding:26px 30px;margin:32px 0;font-size:15px;
  background:rgba(21,39,210,.055);border:0;border-left:2px solid var(--jade);
}
.note.warn{background:rgba(180,83,9,.07);border-left-color:#B45309;}
.note.warn .t{color:#8A4207;}
.note.info{background:rgba(5,22,168,.04);border-left-color:var(--ink-3);}
.note.info .t{color:var(--text);}
.note .t{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:10px;}

.fact{
  background:none;border:0;border-left:2px solid var(--jade);
  border-radius:0;padding:8px 0 8px 28px;margin:32px 0;
}
.fact .h{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--jade);}
.fact p{font-size:16px;color:#2C3850;}

/* ---------- band / cta --------------------------------------------- */
.band{
  background:var(--ink);border-radius:0;padding:56px 52px;margin:56px 0 0;
}
.band h3{color:var(--bone);font-size:26px;letter-spacing:-.02em;}
.band p{color:rgba(245,247,254,.6);}

/* ---------- figures ------------------------------------------------ */
.fig img,.media-row img,.gallery img,.photo-band,.cert-frame,.h-case .pic{
  border-radius:0;border:0;box-shadow:none;
}
.fig img{background:#E9E6DC;}
.fig figcaption,.media-row figcaption,.gallery figcaption,.diagram figcaption{
  font-size:12.5px;line-height:1.55;color:var(--muted);margin-top:12px;
}
.photo-band{border:0;background:var(--ink-2);}
.photo-band img{height:420px;}
.photo-band .cap{
  border-left:1px solid var(--line);padding:34px 40px;background:var(--paper);
}
.photo-band .cap b{color:var(--text);font-size:19px;letter-spacing:-.015em;}

/* ---------- footer -------------------------------------------------- */
.site-foot{
  background:var(--ink);color:rgba(245,247,254,.6);
  border-top:1px solid var(--line-inv);padding-top:76px;
}
.site-foot h5{
  font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(245,247,254,.42);margin:0 0 18px;
}
.site-foot a{color:rgba(245,247,254,.68);}
.site-foot a:hover{color:var(--jade-b);}
.site-foot li{margin-bottom:11px;font-size:14px;}
.foot-base{border-top:1px solid var(--line-inv-2);color:rgba(245,247,254,.34);font-size:12px;}

/* ---------- misc ---------------------------------------------------- */
.kv dt{color:var(--muted);font-size:13px;letter-spacing:.02em;}
.kv dd{font-size:15px;}
.honor{background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:20px 0;}
.honor b{color:var(--text);}
.doc-list li{border-top:1px solid var(--line);}
.doc-list li b{color:var(--text);}
.code-seg{border-radius:0;}
.diagram{background:none;border:0;border-radius:0;padding:0;}
.pilot-form input{border-radius:0;border:1px solid var(--line);background:var(--paper);}
.pilot-form input:focus{border-color:var(--jade);box-shadow:none;}
.pilot-form label{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.proto-note{background:rgba(21,39,210,.06);border-radius:0;}

/* ==================================================================
   HOMEPAGE
   ================================================================== */

/* what we make: four plates, image first, hairline under each */
.h-biz{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;background:var(--line-2);}
.h-biz > a{
  background:var(--bone);padding:0 0 30px;display:flex;flex-direction:column;
  text-decoration:none;color:inherit;transition:background .3s var(--ease);
}
.h-biz > a:hover{background:#fff;}
.h-biz .pic{
  aspect-ratio:4/3;overflow:hidden;background:#E7E3D8;border-radius:0;margin-bottom:26px;
}
.h-biz .pic img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ease);filter:saturate(.94);}
.h-biz > a:hover .pic img{transform:scale(1.04);}
.h-biz .num{
  font-size:10px;font-weight:600;letter-spacing:.16em;color:var(--jade);
  padding:0 24px;margin-bottom:10px;
}
.h-biz h3{font-size:22px;letter-spacing:-.022em;padding:0 24px;margin:0 0 10px;}
.h-biz p{font-size:14.5px;line-height:1.6;color:#46536E;padding:0 24px;margin-bottom:18px;}
.h-biz .go{
  font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--jade);padding:0 24px;margin-top:auto;
}

/* about */
.h-about{grid-template-columns:1.08fr 1fr;gap:72px;}
.h-about .pic{border-radius:0;background:#E7E3D8;}
.h-about p{color:#3A4763;font-size:16px;max-width:46ch;}
.h-nums{
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:72px;border-top:1px solid var(--line);
}
.h-nums > div{padding:28px 28px 0 0;border-right:1px solid var(--line-2);}
.h-nums > div:last-child{border-right:none;}
.h-nums b{
  font-size:clamp(28px,2.6vw,40px);font-weight:500;letter-spacing:-.032em;
  line-height:1.02;color:var(--text);font-variant-numeric:tabular-nums;
}
.h-nums span{font-size:13px;color:var(--muted);margin-top:12px;line-height:1.5;}

/* dark statement block */
.h-dark{background:var(--ink);color:var(--bone);border-radius:0;}
.h-dark h2{color:var(--bone);max-width:20em;}
.h-dark .sect-label{color:rgba(245,247,254,.45);}
.h-dark .lead-p{color:rgba(245,247,254,.58);}
.h-tech{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:64px;
  border-top:1px solid var(--line-inv);}
.h-tech > div{padding:36px 40px 0 0;}
.h-tech > div + div{padding-left:40px;border-left:1px solid var(--line-inv-2);}
.h-tech .num{font-size:10px;letter-spacing:.18em;color:var(--jade-b);font-weight:600;}
.h-tech h3{color:var(--bone);font-size:21px;margin:14px 0 12px;}
.h-tech p{color:rgba(245,247,254,.52);font-size:14.5px;line-height:1.62;}

/* cases */
.h-cases{grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:var(--line-2);
  margin-top:52px;border:0;}
.h-case{
  background:var(--bone);border:0;border-radius:0;box-shadow:none;
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  padding-bottom:28px;transition:background .3s var(--ease);
}
.h-case:hover{background:#fff;box-shadow:none;border-color:transparent;}
.h-case .pic{aspect-ratio:4/3;overflow:hidden;background:#E7E3D8;}
.h-case .pic img{transition:transform .8s var(--ease);filter:saturate(.94);}
.h-case:hover .pic img{transform:scale(1.04);}
.h-case .bd{padding:26px 26px 0;}
.h-case h3{font-size:20px;letter-spacing:-.02em;margin:0 0 9px;}
.h-case .cap{font-size:13.5px;color:var(--muted);line-height:1.55;margin-bottom:16px;}
.h-case .go{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--jade);font-weight:600;}

/* photo band */
.h-band{
  background:var(--ink);border-radius:0;padding:150px 0;margin:0;
}
.h-band h2{color:var(--bone);max-width:17em;}
.h-band p{color:rgba(245,247,254,.6);font-size:17px;max-width:40ch;}
.h-band .sect-label{color:rgba(245,247,254,.45);}
.h-band > img{opacity:.62;filter:saturate(.55) contrast(1.05);}

/* resources */
.h-res{grid-template-columns:1fr .82fr;gap:88px;}
.h-res ul{margin:30px 0 0;}
.h-res li{border-top:1px solid var(--line);}
.h-res li a{
  padding:20px 0;font-size:16px;font-weight:500;letter-spacing:-.012em;
  color:var(--text);transition:color .2s,padding-left .25s var(--ease);
}
.h-res li a:hover{color:var(--jade);padding-left:8px;}
.h-res li span{font-size:12.5px;color:var(--muted);letter-spacing:.02em;}
.h-rescard{
  background:var(--ink);border-radius:0;padding:48px 44px 46px;color:var(--bone);
}
.h-rescard h3{color:var(--bone);font-size:26px;letter-spacing:-.024em;margin-bottom:16px;}
.h-rescard p{color:rgba(245,247,254,.58);font-size:15px;margin-bottom:30px;}

/* closing cta */
.h-cta{
  background:var(--ink);color:var(--bone);
  padding:130px 0 140px;margin-bottom:0;border-radius:0;
}
.h-cta h2{
  color:var(--bone);font-size:clamp(34px,4.2vw,62px);line-height:1.03;
  letter-spacing:-.036em;max-width:16em;margin-bottom:28px;
}
.h-cta p{color:rgba(245,247,254,.58);max-width:48ch;font-size:17px;margin-bottom:40px;}
.h-cta .btn-p{background:var(--jade-b);border-color:var(--jade-b);color:var(--ink);}
.h-cta .btn-p:hover{background:var(--bone);border-color:var(--bone);}

/* ==================================================================
   BREAKPOINTS  (repeated here so the layer above does not leak)
   ================================================================== */
@media(max-width:1100px){
  .wrap{padding:0 32px;}
  .h-herobar .wrap{padding:0 32px;}
  .h-about{gap:48px;}
  .h-res{gap:56px;}
  .h-diagram{margin-right:-32px;}
}

@media(max-width:980px){
  section{padding:88px 0;}
  section.tight{padding:64px 0;}
  .hero.hero-solid > .wrap{
    grid-template-columns:minmax(0,1fr);
    gap:8px;min-height:0;padding-top:64px;padding-bottom:56px;
  }
  .hero h1{max-width:18em;}
  .h-diagram{height:340px;min-height:0;margin:8px -32px 0;order:2;}
  .h-diagram figcaption{position:static;margin-top:14px;padding:0 32px;}
  .h-herobar .wrap{grid-template-columns:1fr 1fr;}
  .h-herobar a{padding:22px 20px 24px 0;}
  .h-herobar a:nth-child(2n){border-right:none;}
  .h-herobar a:nth-child(-n+2){border-bottom:1px solid var(--line-inv-2);}
  .h-biz{grid-template-columns:1fr 1fr;}
  .h-about{grid-template-columns:minmax(0,1fr);gap:36px;}
  .h-nums{grid-template-columns:1fr 1fr;margin-top:48px;}
  .h-nums > div{padding:24px 20px 24px 0;border-bottom:1px solid var(--line-2);}
  .h-nums > div:nth-child(2n){border-right:none;}
  .h-tech{grid-template-columns:minmax(0,1fr);margin-top:44px;}
  .h-tech > div{padding:28px 0 0;}
  .h-tech > div + div{padding-left:0;border-left:none;border-top:1px solid var(--line-inv-2);margin-top:28px;}
  .h-cases{grid-template-columns:1fr 1fr;}
  .h-res{grid-template-columns:minmax(0,1fr);gap:40px;}
  .h-band{padding:104px 0;}
  .h-cta{padding:92px 0 100px;}
  .stat-row{grid-template-columns:1fr 1fr;}
  .stat{padding:22px 20px 22px 0;}
  .stat:nth-child(2n){border-right:none;}
  .spec-row{grid-template-columns:minmax(0,1fr);}
  .spec-row .s{border-right:none;border-bottom:1px solid var(--line-2);padding:22px 0;}
  .g3,.g2{grid-template-columns:minmax(0,1fr);}
  .page-head{padding:72px 0 56px;}
  .photo-band img{height:300px;}
  .photo-band .cap{padding:26px 0;border-left:none;border-top:1px solid var(--line);}
}

@media(max-width:620px){
  .wrap{padding:0 22px;}
  .h-herobar .wrap{padding:0 22px;}
  body{font-size:16px;}
  section{padding:68px 0;}
  section.tight{padding:52px 0;}
  h2{font-size:28px;letter-spacing:-.026em;margin-bottom:16px;}
  .lead-p{font-size:16.5px;}
  .hero h1{font-size:34px;letter-spacing:-.03em;}
  .hero .sub{font-size:15.5px;}
  .h-diagram{height:310px;margin:4px -22px 0;}
  .h-diagram figcaption{padding:0 22px;font-size:9.5px;gap:4px 14px;}
  .h-herobar .wrap{grid-template-columns:minmax(0,1fr);}
  .h-herobar a{border-right:none;border-bottom:1px solid var(--line-inv-2);padding:18px 0;}
  .h-herobar a:last-child{border-bottom:none;}
  .h-biz{grid-template-columns:minmax(0,1fr);}
  .h-biz .num,.h-biz h3,.h-biz p,.h-biz .go{padding:0 22px;}
  .h-biz > a{padding-bottom:24px;}
  .h-biz .pic{margin-bottom:20px;}
  .h-nums b{font-size:28px;}
  .h-cases{grid-template-columns:minmax(0,1fr);}
  .h-case .bd{padding:20px 22px 0;}
  .stat-row{grid-template-columns:minmax(0,1fr);}
  .stat{border-right:none;border-bottom:1px solid var(--line-2);}
  .btn{padding:14px 20px;font-size:11px;}
  .band{padding:36px 26px;}
  .h-band{padding:80px 0;}
  .h-cta{padding:72px 0 80px;}
  .h-cta h2{font-size:30px;}
  .h-rescard{padding:34px 26px;}
  .page-head h1{font-size:28px;}
  main h1[style*="font-size:32px"]{font-size:27px!important;}
  .h-diagram{min-height:0;}
  .photo-band img{height:230px;}
}

/* ---------- legacy page heads -------------------------------------
   Fifteen generator scripts write the page title into a plain
   <section> with an inline padding-top, so those pages opened on a
   flat bone field while the newer ones opened on ink. This gives every
   page the same dark threshold without touching a single generator. */
main > section:first-of-type:has(> .wrap > h1){
  background:linear-gradient(160deg,#1527D2 0%,#071BC8 50%,#0516A8 100%);
  padding:104px 0 88px !important;
}
main > section:first-of-type:has(> .wrap > h1) h1{
  color:var(--bone)!important;
  font-size:clamp(32px,3.6vw,52px)!important;
  line-height:1.04!important;letter-spacing:-.034em!important;
  font-weight:600!important;margin-bottom:20px!important;max-width:20em;
}
main > section:first-of-type:has(> .wrap > h1) .lead-p{
  color:rgba(245,247,254,.62);max-width:64ch;
}
main > section:first-of-type:has(> .wrap > h1) .lead-p b{color:var(--bone);font-weight:600;}
main > section:first-of-type:has(> .wrap > h1) .sect-label{color:rgba(245,247,254,.45);}
main > section:first-of-type:has(> .wrap > h1) .muted{color:rgba(245,247,254,.45);}

/* the band photo needs a dark veil, not the old navy one */
.h-band::before{
  background:linear-gradient(180deg,rgba(7,27,200,.58),rgba(5,22,168,.90))!important;
}
.h-band h2{max-width:19em;}
.h-cta{margin-bottom:-88px;}

@media(max-width:980px){
  main > section:first-of-type:has(> .wrap > h1){padding:72px 0 60px !important;}
}
@media(max-width:620px){
  main > section:first-of-type:has(> .wrap > h1){padding:56px 0 48px !important;}
  main > section:first-of-type:has(> .wrap > h1) h1{font-size:27px!important;}
}

/* Chinese and Japanese do not break on a balance heuristic without
   splitting a phrase; the hand-placed <br> in the copy wins instead. */
html[lang="zh"] .hero h1{text-wrap:wrap;}
/* generators write style="background:#fff" on alternating sections;
   pull that pure white back onto the warm paper tone. */
section[style*="background:#fff"],div[style*="background:#fff"]{background:var(--paper)!important;}

/* Several generator scripts still carry an inline min-width on diagram
   SVGs, which pushes them out of a 346 px phone column. An SVG scales
   its own labels, so letting it shrink costs nothing. */
.diagram svg{min-width:0!important;max-width:100%;}
@media(max-width:620px){
  .h-diagram{height:300px;}
}

/* Five of the seven language homepages still open on a photo hero with
   the old navy veil baked into a background-image. Rebuild the veil in
   ink so they match the English and Chinese pages. */
.hero.hero-photo{
  background-image:
    linear-gradient(155deg,rgba(7,27,200,.93) 0%,rgba(21,39,210,.84) 46%,rgba(42,59,224,.76) 100%),
    url("img/membrane-rack.jpg");
  background-size:cover,cover;
  background-position:center,center 38%;
  padding:158px 0 136px;
  min-height:0;
}
.hero.hero-photo h1{max-width:18em;}
.hero.hero-photo .sub{color:rgba(245,247,254,.66);}
.proto-note{background:var(--ink-2);color:rgba(245,247,254,.55);}
.proto-note b{color:var(--jade-b);}
@media(max-width:980px){
  .hero.hero-photo{padding:104px 0 88px;}
}
@media(max-width:620px){
  .hero.hero-photo{padding:76px 0 64px;}
}

/* ---------- 中文站局部覆盖 ------------------------------------------
   全站小标签统一大写、字距 .14em，那是给拉丁字母定的规则。中文一被
   text-transform:uppercase 处理，单位 mm 就成了 MM —— 页面上真的印着
   "6～25MM"。中文标签一律不做大小写变换，字距也收窄。 */
html[lang="zh"] .h-diagram figcaption{text-transform:none;letter-spacing:.04em;font-size:11px;}
html[lang="zh"] .h-herobar a b{letter-spacing:.06em;}

/* ---------- 浮层：产品下拉 ------------------------------------------
   2026-10-30 第二次修。上一版把面板设成 --ink-2（深绿），而页头背景
   也是深绿，两者只差一条 1px 边框 —— 面板读起来不像浮层，像在页头上
   挖了个洞。更糟的是 nav.main .prod-menu a 把文字又染回 --ink，深绿压
   深绿，条目几乎看不见。

   改成浅底深字。深色页头 + 白色浮层，是这套设计里对比最强的一对，
   也符合「浮层比背景亮」的直觉：凡是盖在别的东西上面的，都该更亮。 */
.prod-menu{
  background:#fff;
  border:1px solid rgba(7,27,200,.10);
  box-shadow:0 20px 44px rgba(3,14,120,.24),0 2px 6px rgba(3,14,120,.10);
  padding:9px;
}
.prod-menu .grp{color:rgba(7,27,200,.40);}
.prod-menu .sep{background:rgba(7,27,200,.10);margin:7px 8px;}
nav.main .prod-menu a{color:#0A1030;padding:9px 12px;}
nav.main .prod-menu a:hover{background:rgba(7,27,200,.09);color:var(--jade);}
nav.main .prod-menu a.on{background:rgba(7,27,200,.11);color:var(--jade);font-weight:650;}

/* ---------- 手机端：logo 回落到 32px --------------------------------
   ART DIRECTION 段里的 .brand .mark-img{38px} 排在文件最后、又不带断点，
   所以它把上面 @media 里的 34px 盖掉了 —— 手机上 38px 的图形 + 15.5px
   字标 + 语言选择 + 汉堡挤在同一行，"GONGDA ZHONGJIE" 已经贴到 EN 框。
   38px 是桌面尺寸（74px 高的页头），手机页头只有 60px，按比例应回 32px。
   断点必须写在这里，写到前面去一样会被盖掉。 */
@media(max-width:620px){
  .brand .mark-img{width:32px;height:32px;flex:0 0 32px;}
  .brand .nm{font-size:14px;}
  .site-head .wrap{gap:10px;}

  /* 示意图容器上还有一条 max-width:340px，是 SVG 时代的遗留。
     换成 canvas 之后它只会把画布卡窄、靠左留一条 50px 的空白，
     于是「浓水」标签离右边缘比「进水」离左边缘远得多，一行标签读起来是歪的。
     去掉上限让它按 margin:-22px 全幅铺满，两端正好落在正文栏边上。 */
  .h-diagram{max-width:none;}
}

/* 中文这行用 .18em 的字距太散 —— 拉丁文靠字距撑开是排版，汉字靠字距撑开是「没排好」。
   收到 .09em，字号 13.5px（汉字比拉丁字母矮，同字号看着更小）。 */
html[lang="zh"] .hero .eyebrow{font-size:13.5px;letter-spacing:.09em;}

/* 越南语 / 马来语 / 印尼语这三行特别长（三个机构名都摊开写），.13em 的字距会让
   它们在自己的栏宽里折行 —— 折出来第二行只剩「TEKNOLOGI MEMBRAN」这种孤字，很难看。
   这三种语言单独收到 .085em，用字距换一行，不改文案。 */
html[lang="vi"] .hero .eyebrow,
html[lang="ms"] .hero .eyebrow,
html[lang="id"] .hero .eyebrow{letter-spacing:.085em;}

/* 字号提到 13px 之后，1200 宽的窄桌面栏只有 552px，俄/越/马/印尼四行各差 1~25px 就折行。
   这一段只收字距、不动字号 —— 1440 上仍然保持 .13em 的舒展度。 */
@media(max-width:1300px){
  .hero .eyebrow{letter-spacing:.10em;}
  html[lang="ru"] .hero .eyebrow{letter-spacing:.09em;}
  html[lang="zh"] .hero .eyebrow{letter-spacing:.09em;}
  html[lang="vi"] .hero .eyebrow,
  html[lang="ms"] .hero .eyebrow,
  html[lang="id"] .hero .eyebrow{letter-spacing:.06em;}
}

/* 手机端（≤620px）中文这条权重最高，必须放最后兜底，
   否则会被上面 (0,3,1) 的规则顶成 13.5px，折成三行。 */
@media(max-width:620px){
  html[lang="zh"] .hero .eyebrow{font-size:11.5px;letter-spacing:.06em;}
}

/* ==================================================================
   2026-11-03  导航放大
   ------------------------------------------------------------------
   原来头部跟正文一样宽（--maxw 1300），1440 屏上导航项挤在中间一条，
   两边各留 70px 空白，整体读起来「缩」在页面里。现在头部单独放到 1560，
   比正文宽出一截，logo 38→46、字标 13→14.5、导航 13.5→15，
   视觉重量才配得上首屏那行大标题。
   注意：这一段必须排在 ART DIRECTION 之后（它排全文件最后），
   否则会被前面不带断点的 .brand .mark-img{38px} / nav.main a{13.5px} 盖掉。
   ================================================================== */
.site-head .wrap{max-width:1560px;min-height:88px;padding:0 44px;gap:30px;}
.brand{gap:14px;}
.brand .mark-img{width:46px;height:46px;flex:0 0 46px;}
.brand .nm{font-size:14.5px;letter-spacing:.14em;}
nav.main{gap:34px;}
nav.main a,.prod-btn{font-size:15px;}
/* 俄/阿/越三语种词更长，原来单独收到 12.8px，跟着提到 14px */
html[lang="ru"] nav.main a,
html[lang="ar"] nav.main a,
html[lang="vi"] nav.main a{font-size:14px;}
html[lang="ru"] nav.main,
html[lang="ar"] nav.main,
html[lang="vi"] nav.main{gap:26px;}
.lang-btn{font-size:12px;padding:8px 13px;letter-spacing:.11em;}

/* 平板：宽度还给窗口，避免 1560 在 1024 上把语言框和汉堡挤出去 */
@media(max-width:1080px){
  .site-head .wrap{max-width:none;min-height:80px;padding:0 26px;gap:20px;}
  .brand .mark-img{width:40px;height:40px;flex:0 0 40px;}
  .brand .nm{font-size:13.5px;letter-spacing:.12em;}
  nav.main{gap:22px;}
  nav.main a,.prod-btn{font-size:13.5px;}
  html[lang="ru"] nav.main a,
  html[lang="ar"] nav.main a,
  html[lang="vi"] nav.main a{font-size:12.8px;}
  .lang-btn{font-size:11.5px;padding:7px 11px;}
}

/* 手机：导航是抽屉，链接字号由前面 .site-head nav.main a 的 15.5px 决定（权重更高），
   这里只把头部尺寸收回原值 —— 46px 的 logo 在 60px 高的页头里会顶到边。 */
@media(max-width:620px){
  .site-head .wrap{max-width:none;min-height:64px;padding:0 15px;gap:10px;}
  .brand{gap:9px;}
  .brand .mark-img{width:34px;height:34px;flex:0 0 34px;}
  .brand .nm{font-size:14px;letter-spacing:.02em;}
}