/* ==========================================================================
   无锡高科 · 企业官网
   Design system: gaoke-instrument ("instrument datasheet")
   Reference: geaerospace.com — two navies + white, one typeface, huge tight
   display type, photography-led, big navy footer.
   ========================================================================== */

/* ---------- fonts (self-hosted, latin subset) ---------- */
@font-face { font-family:"Space Grotesk"; src:url("../fonts/sg-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Space Grotesk"; src:url("../fonts/sg-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Space Grotesk"; src:url("../fonts/sg-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"JetBrains Mono"; src:url("../fonts/jbm-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"JetBrains Mono"; src:url("../fonts/jbm-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap; }

/* ---------- tokens ---------- */
:root{
  --navy-900:#002A52; --navy-800:#003366; --navy-700:#003C79; --navy-bar:#003D65;
  --cyan:#45B6E8; --blue:#2F83C8; --blue-deep:#1B5E9E;
  --ink:#111417; --body:#4E657F; --mut:#546E88;
  --white:#fff; --paper:#F7FAFC; --pale:#E9F4FB; --pale-2:#F2F8FD;
  --line:#E3E8ED; --line-2:#EDF2F7; --line-blue:#D5E6F5;
  --on-navy:#fff; --on-navy-2:#C9DDF1; --on-navy-3:#8FB4D8;
  --hair-navy:rgba(255,255,255,.16); --hair-navy-2:rgba(255,255,255,.10);

  --font-cjk:"PingFang SC","Microsoft YaHei","Source Han Sans SC","Noto Sans SC","Hiragino Sans GB",sans-serif;
  --font-display:"Space Grotesk",var(--font-cjk);
  --font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;

  --t-display:clamp(2.4rem,5.4vw,4.4rem);
  --t-h1:clamp(1.9rem,3.4vw,2.9rem);
  --t-h2:clamp(1.5rem,2.5vw,2.15rem);
  --t-h3:1.1875rem; --t-h4:1.0625rem;
  --t-body:1rem; --t-sm:.9375rem; --t-xs:.8125rem; --t-label:.75rem;
  --lh-tight:1.1; --lh-snug:1.42; --lh-body:1.85;
  --ls-label:.18em;

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  --section-y:clamp(64px,8vw,120px);
  --container:1240px; --gutter:clamp(20px,4vw,48px);
  --hdr-h:76px;

  --r-1:2px; --r-2:4px;
  --shadow-nav:0 1px 0 var(--line),0 10px 30px rgba(0,42,82,.06);
  --shadow-card:0 1px 2px rgba(0,42,82,.04),0 12px 32px rgba(0,42,82,.07);

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-1:140ms; --dur-2:220ms; --dur-3:420ms; --stagger:60ms;
  --z-nav:100; --z-drawer:200; --z-modal:300;
}

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--font-display); font-size:var(--t-body);
  line-height:var(--lh-body); color:var(--body); background:var(--white);
  font-feature-settings:"tnum" 1; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{ margin:0; color:var(--ink); font-weight:700; line-height:var(--lh-snug); }
h1{ font-size:var(--t-h1); } h2{ font-size:var(--t-h2); }
h3{ font-size:var(--t-h3); } h4{ font-size:var(--t-h4); }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img,svg,video{ max-width:100%; display:block; }
ul,ol{ margin:0; padding:0; list-style:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
::selection{ background:var(--cyan); color:var(--navy-900); }

.skip-link{ position:absolute; left:-9999px; top:0; z-index:var(--z-modal);
  background:var(--navy-900); color:#fff; padding:12px 18px; }
.skip-link:focus{ left:12px; top:12px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- layout ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section-y); }
.section--tight{ padding-block:clamp(48px,5vw,72px); }
.section--paper{ background:var(--paper); }
.section--pale{ background:var(--pale-2); }
.section--navy{ background:var(--navy-900); color:var(--on-navy-2); }
.section--navy h1,.section--navy h2,.section--navy h3{ color:var(--on-navy); }
.hair{ height:1px; background:var(--line); border:0; margin:0; }
.hair--navy{ background:var(--hair-navy); }

/* ---------- type helpers ---------- */
.label{ font-family:var(--font-mono); font-size:var(--t-label); letter-spacing:var(--ls-label);
  text-transform:uppercase; color:var(--blue); font-weight:500; }
.label--navy{ color:var(--cyan); }
.eyebrow{ display:inline-flex; align-items:center; gap:10px; }
.eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--blue); flex:0 0 auto; }
.section--navy .eyebrow::before{ background:var(--cyan); }
.display{ font-size:var(--t-display); line-height:var(--lh-tight); letter-spacing:-.02em; color:var(--ink); }
.sec-head{ max-width:760px; }
.sec-head h2{ margin-top:16px; }
.sec-head p{ margin-top:18px; font-size:var(--t-body); color:var(--body); max-width:62ch; }
.section--navy .sec-head p{ color:var(--on-navy-2); }
.rule{ width:46px; height:4px; background:var(--blue); margin-top:18px; }
.section--navy .rule{ background:var(--cyan); }
.mono{ font-family:var(--font-mono); letter-spacing:.02em; }
.tnum{ font-variant-numeric:tabular-nums; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:46px; padding:0 22px; border:1px solid transparent; border-radius:var(--r-1);
  font-size:var(--t-sm); font-weight:700; cursor:pointer; white-space:nowrap;
  transition:background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out),
             border-color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--blue); color:#fff; }
.btn-primary:hover{ background:var(--blue-deep); }
.btn-ghost{ border-color:var(--line-blue); color:var(--blue-deep); background:#fff; }
.btn-ghost:hover{ border-color:var(--blue); background:var(--pale-2); }
.btn-navy{ background:var(--navy-900); color:#fff; }
.btn-navy:hover{ background:var(--navy-700); }
.btn-onnavy{ border-color:rgba(150,200,245,.5); color:#fff; background:transparent; }
.btn-onnavy:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.btn-sm{ min-height:38px; padding:0 16px; font-size:var(--t-xs); }
.btn-lg{ min-height:54px; padding:0 30px; font-size:var(--t-body); }

/* ---------- header ---------- */
.hdr{ position:fixed; inset:0 0 auto; z-index:var(--z-nav); height:var(--hdr-h);
  display:flex; align-items:center; transition:background-color var(--dur-2) var(--ease-out),
  box-shadow var(--dur-2) var(--ease-out), height var(--dur-2) var(--ease-out); }
.hdr-inner{ display:flex; align-items:center; gap:clamp(16px,2.4vw,40px); }
.brand{ display:flex; align-items:center; flex:0 0 auto; }
.brand img{ height:44px; width:auto; }
.brand .brand-d{ display:none; }
.brand-txt{ display:flex; flex-direction:column; margin-left:12px; line-height:1.15; }
.brand-txt b{ font-size:1rem; font-weight:700; color:#fff; letter-spacing:.04em; }
.brand-txt i{ font-style:normal; font-family:var(--font-mono); font-size:9px; letter-spacing:.22em;
  color:var(--on-navy-3); margin-top:4px; }
.hdr.is-solid .brand-txt b, body.page-inner .brand-txt b{ color:var(--ink); }
.hdr.is-solid .brand-txt i, body.page-inner .brand-txt i{ color:var(--mut); }
.hdr .nav{ display:flex; align-items:center; gap:2px; margin-left:auto; }
.nav-link{ position:relative; display:flex; align-items:center; height:var(--hdr-h);
  padding:0 clamp(8px,1vw,14px); font-size:var(--t-sm); font-weight:500; color:#fff;
  transition:color var(--dur-2) var(--ease-out); }
.nav-link::after{ content:""; position:absolute; left:clamp(8px,1vw,14px); right:clamp(8px,1vw,14px);
  bottom:20px; height:2px; background:var(--cyan); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-2) var(--ease-out); }
.nav-link:hover::after,.nav-item.is-open .nav-link::after,.nav-link[aria-current="page"]::after{ transform:scaleX(1); }
.nav-link[aria-current="page"]{ color:#fff; font-weight:700; }
.hdr-actions{ display:flex; align-items:center; gap:12px; margin-left:8px; }
.burger{ display:none; width:44px; height:44px; border:0; background:transparent; cursor:pointer;
  position:relative; }
.burger span,.burger span::before,.burger span::after{ position:absolute; left:11px; width:22px; height:2px;
  background:#fff; transition:transform var(--dur-2) var(--ease-out), opacity var(--dur-1) linear; }
.burger span{ top:21px; } .burger span::before{ content:""; top:-7px; left:0; }
.burger span::after{ content:""; top:7px; left:0; }

/* header states */
.hdr.is-solid{ background:rgba(255,255,255,.94); backdrop-filter:saturate(140%) blur(10px);
  box-shadow:var(--shadow-nav); }
.hdr.is-solid .nav-link{ color:var(--body); }
.hdr.is-solid .nav-link[aria-current="page"],.hdr.is-solid .nav-link:hover{ color:var(--ink); }
.hdr.is-solid .brand-w{ display:none; } .hdr.is-solid .brand-d{ display:block; }
.hdr.is-solid .burger span,.hdr.is-solid .burger span::before,.hdr.is-solid .burger span::after{ background:var(--ink); }
.hdr.is-solid .brand img{ height:40px; }
.hdr.is-solid .btn-onnavy{ border-color:var(--line-blue); color:var(--blue-deep); }
.hdr.is-solid .btn-onnavy:hover{ border-color:var(--blue); background:var(--pale-2); }
/* inner pages: header starts solid */
body.page-inner .hdr{ background:rgba(255,255,255,.94); backdrop-filter:saturate(140%) blur(10px);
  box-shadow:var(--shadow-nav); }
body.page-inner .nav-link{ color:var(--body); }
body.page-inner .nav-link[aria-current="page"],body.page-inner .nav-link:hover{ color:var(--ink); }
body.page-inner .brand-w{ display:none; } body.page-inner .brand-d{ display:block; }
body.page-inner .brand img{ height:40px; }
body.page-inner .burger span,body.page-inner .burger span::before,body.page-inner .burger span::after{ background:var(--ink); }
body.page-inner .hdr .btn-onnavy{ border-color:var(--line-blue); color:var(--blue-deep); }

/* dropdown */
.nav-item{ position:relative; }
.mega{ position:absolute; top:var(--hdr-h); left:50%; transform:translateX(-50%) translateY(-6px);
  min-width:280px; background:var(--navy-900); padding:20px 8px; opacity:0; visibility:hidden;
  transition:opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility var(--dur-2); }
.nav-item.is-open .mega{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.mega a{ display:block; padding:10px 18px; font-size:var(--t-sm); color:var(--on-navy-2);
  transition:background-color var(--dur-1) linear, color var(--dur-1) linear; }
.mega a:hover{ background:rgba(255,255,255,.07); color:#fff; }
.mega .mega-label{ display:block; padding:6px 18px 10px; font-family:var(--font-mono);
  font-size:var(--t-label); letter-spacing:var(--ls-label); color:var(--cyan); }

/* mobile drawer */
.drawer{ position:fixed; inset:0; z-index:var(--z-drawer); background:var(--navy-900);
  padding:calc(var(--hdr-h) + 12px) var(--gutter) 40px; overflow-y:auto;
  transform:translateY(-8px); opacity:0; visibility:hidden;
  transition:opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility var(--dur-2); }
.drawer.is-open{ opacity:1; visibility:visible; transform:none; }
.drawer a{ display:block; padding:15px 0; border-bottom:1px solid var(--hair-navy);
  font-size:1.0625rem; color:#fff; }
.drawer .drawer-sub a{ padding-left:18px; font-size:var(--t-sm); color:var(--on-navy-2); border-bottom:0; }
.drawer .btn{ margin-top:24px; width:100%; }
body.is-locked{ overflow:hidden; }

/* ---------- hero ---------- */
.hero{ position:relative; background:linear-gradient(180deg,#002A52 0%,#00336A 42%,#003E79 60%,#002E58 100%);
  color:#fff; padding-top:var(--hdr-h); overflow:hidden;
  min-height:max(96vh,820px); display:flex; flex-direction:column; }
.hero-bg{ position:absolute; inset:auto 0 0 0; height:100%;
  background:url("../img/family-hero.webp") bottom center/contain no-repeat; }
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .5s var(--ease-out); }
.hero-video.is-playing{ opacity:1; }
.hero-scrim{ position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg,rgba(0,26,50,.62) 0%,rgba(0,26,50,.26) 44%,rgba(0,26,50,0) 74%); }
.hero-band{ background:linear-gradient(180deg,#002E58,#002A52); color:#fff;
  padding-block:clamp(34px,4vw,54px); }
.hero-band .hero-stats{ margin-top:0; padding-top:0; border-top:0; }
.hero-fam{ display:flex; flex-wrap:wrap; gap:12px 30px; margin-top:30px; padding-top:24px;
  border-top:1px solid var(--hair-navy); }
.hero-fam a{ display:inline-flex; align-items:center; gap:9px; font-size:var(--t-sm);
  color:var(--on-navy-2); transition:color var(--dur-2) var(--ease-out); }
.hero-fam a::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--cyan); flex:0 0 auto; }
.hero-fam a:hover{ color:#fff; }
.hero-deco{ position:absolute; inset:0; pointer-events:none; }
.hero-arcs{ position:absolute; top:-180px; right:-160px; width:820px; height:820px; }
.hero-arcs circle{ fill:none; stroke:#6FA8DC; stroke-width:1.2;
  stroke-dasharray:var(--len); stroke-dashoffset:var(--len);
  animation:arcDraw 1.6s var(--ease-out) forwards; }
.hero-dots{ position:absolute; right:0; top:80px; width:340px; height:70%;
  background-image:radial-gradient(rgba(140,195,240,.30) 1.1px,transparent 1.4px);
  background-size:13px 13px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent); }
.hero-glow{ position:absolute; left:-180px; top:-200px; width:660px; height:660px;
  background:radial-gradient(circle,rgba(56,126,196,.40),rgba(56,126,196,0) 62%); }
.hero-inner{ position:relative; z-index:3; padding-block:clamp(28px,3.6vw,54px) 0; }
.hero-copy{ max-width:780px; }
.hero h1{ font-size:clamp(2.2rem,4.4vw,3.6rem); line-height:1.08; letter-spacing:-.022em;
  color:#fff; margin-top:20px; }
.hero h1 .thin{ font-weight:400; color:var(--on-navy-2); }
.hero-sub{ margin-top:22px; font-size:clamp(1rem,1.2vw,1.0625rem); line-height:1.95;
  color:var(--on-navy-2); max-width:52ch; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.hero-stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--hair-navy); margin-top:clamp(36px,4vw,56px); padding-top:22px; gap:18px; }
.stat b{ display:block; font-family:var(--font-display); font-size:clamp(1.6rem,2.4vw,2.1rem);
  font-weight:700; color:var(--cyan); letter-spacing:-.01em; line-height:1.1; }
.stat span{ display:block; margin-top:8px; font-size:var(--t-xs); color:var(--on-navy-3); line-height:1.7; }

/* hero play affordance */
.hero-play{ position:absolute; right:clamp(16px,4vw,48px); bottom:clamp(16px,3vw,36px); z-index:3;
  display:inline-flex; align-items:center; gap:12px; padding:0; border:0; background:transparent;
  color:#fff; cursor:pointer; font-size:var(--t-sm); }
.hero-play .disc{ width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.42);
  backdrop-filter:blur(4px); transition:background-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.hero-play:hover .disc{ background:rgba(255,255,255,.26); transform:scale(1.06); }
.hero-play .disc svg{ width:16px; height:16px; margin-left:3px; }

/* ---------- product family ---------- */
.fam-flags{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,28px); }
.pcard{ position:relative; display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--line); transition:border-color var(--dur-2) var(--ease-out),
  box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.pcard:hover{ border-color:var(--line-blue); box-shadow:var(--shadow-card); transform:translateY(-3px); }
.pcard-media{ background:linear-gradient(180deg,var(--pale-2),#fff); padding:22px 22px 0;
  display:flex; align-items:flex-end; justify-content:center; min-height:236px; }
.pcard-media img{ width:100%; height:auto; max-height:240px; object-fit:contain; }
.pcard-body{ padding:22px 24px 26px; border-top:1px solid var(--line-2); }
.pcard-code{ font-family:var(--font-mono); font-size:var(--t-xs); letter-spacing:.08em; color:var(--blue); }
.pcard h3{ margin-top:10px; font-size:1.25rem; }
.pcard .pcard-desc{ margin-top:12px; font-size:var(--t-sm); color:var(--body); line-height:1.8; }
.pcard-specs{ margin-top:16px; border-top:1px solid var(--line-2); padding-top:14px; display:grid; gap:8px; }
.pcard-specs div{ display:flex; justify-content:space-between; gap:12px; font-size:var(--t-xs); }
.pcard-specs dt,.pcard-specs span:first-child{ color:var(--mut); }
.pcard-specs span:last-child{ color:var(--ink); font-weight:500; font-variant-numeric:tabular-nums; }
.pcard-link{ margin-top:20px; display:inline-flex; align-items:center; gap:8px;
  font-size:var(--t-sm); font-weight:700; color:var(--blue); }
.pcard-link svg{ width:14px; height:14px; transition:transform var(--dur-2) var(--ease-out); }
.pcard:hover .pcard-link svg{ transform:translateX(4px); }

.fam-rows{ margin-top:clamp(20px,3vw,36px); border-top:1px solid var(--line); }
.frow{ display:grid; grid-template-columns:150px 1.1fr 1.4fr auto; align-items:center; gap:clamp(16px,2vw,32px);
  padding:22px 0; border-bottom:1px solid var(--line); transition:background-color var(--dur-2) var(--ease-out); }
.frow:hover{ background:var(--paper); }
.frow-code{ font-family:var(--font-mono); font-size:var(--t-sm); color:var(--blue); letter-spacing:.06em; }
.frow-name{ font-size:var(--t-h4); font-weight:700; color:var(--ink); }
.frow-desc{ font-size:var(--t-sm); color:var(--body); }
.frow-tag{ justify-self:end; font-size:var(--t-label); font-family:var(--font-mono);
  letter-spacing:.14em; color:var(--mut); border:1px solid var(--line-blue); padding:4px 10px; }

/* ---------- statistics band ---------- */
.stats-band{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(20px,3vw,40px); }
.sband{ border-top:2px solid var(--blue); padding-top:22px; }
.sband b{ display:block; font-size:clamp(2rem,3.4vw,3rem); font-weight:700; color:var(--navy-900);
  line-height:1.05; letter-spacing:-.02em; }
.sband span{ display:block; margin-top:10px; font-size:var(--t-sm); color:var(--body); line-height:1.75; }

/* ---------- technology DNA ---------- */
.tech-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(18px,2.4vw,32px); margin-top:40px; }
.tech{ border-left:2px solid var(--line-blue); padding-left:18px; }
.tech b{ display:block; font-size:var(--t-h4); color:var(--ink); }
.tech span{ display:block; margin-top:8px; font-size:var(--t-sm); color:var(--mut); line-height:1.8; }
.tech em{ display:block; margin-top:10px; font-family:var(--font-mono); font-style:normal;
  font-size:var(--t-label); color:var(--blue); letter-spacing:.06em; }

/* ---------- solutions teaser ---------- */
.sol-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,2vw,22px); margin-top:40px; }
.sol{ position:relative; display:block; padding:26px 22px 30px; background:#fff;
  border:1px solid var(--line); min-height:200px; transition:border-color var(--dur-2) var(--ease-out),
  transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.sol:hover{ border-color:var(--blue); transform:translateY(-3px); box-shadow:var(--shadow-card); }
.sol .sol-n{ font-family:var(--font-mono); font-size:var(--t-label); letter-spacing:var(--ls-label); color:var(--blue); }
.sol h3{ margin-top:14px; font-size:var(--t-h4); }
.sol p{ margin-top:10px; font-size:var(--t-xs); color:var(--mut); line-height:1.8; }

/* ---------- users ---------- */
.users-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(20px,3vw,36px); margin-top:40px; }
/* 服务用户区坐落在深蓝底上，颜色必须按深底给。
   （2026-10-14 审核：此前误用了浅底色 --ink/--body，实测对比度只有 1.28:1 与 2.40:1，
   37 家用户名单基本不可读。） */
.ugroup h3{ font-size:var(--t-h4); color:var(--on-navy); display:flex; align-items:baseline; gap:10px; }
.ugroup h3 em{ font-style:normal; font-family:var(--font-mono); font-size:var(--t-label); color:var(--cyan); }
.ugroup ul{ margin-top:14px; border-top:1px solid var(--hair-navy); }
.ugroup li{ padding:9px 0; border-bottom:1px solid var(--hair-navy-2); font-size:var(--t-xs);
  color:var(--on-navy-2); line-height:1.7; }

/* ---------- split (about / factory) ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:center; }
.split-media{ position:relative; }
.split-media img{ width:100%; height:auto; border:1px solid var(--line); }
.split-media figcaption{ margin-top:12px; font-size:var(--t-xs); color:var(--mut); }
.split-body h2{ margin-top:16px; }
.split-body p{ margin-top:18px; font-size:var(--t-body); color:var(--body); }
.split-list{ margin-top:26px; border-top:1px solid var(--line); }
.split-list li{ display:grid; grid-template-columns:120px 1fr; gap:16px; padding:14px 0;
  border-bottom:1px solid var(--line-2); }
.split-list b{ font-size:var(--t-sm); color:var(--blue-deep); }
.split-list span{ font-size:var(--t-sm); color:var(--body); }

/* ---------- certificate wall ---------- */
.certwall{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.6vw,20px); margin-top:34px; }
.certwall figure{ margin:0; background:#fff; border:1px solid var(--line); padding:8px; }
.certwall img{ width:100%; height:auto; }

/* ---------- spec table ---------- */
.spec{ width:100%; border-collapse:collapse; font-size:var(--t-sm); }
.spec th,.spec td{ text-align:left; padding:13px 16px; border-bottom:1px solid var(--line-2); vertical-align:top; }
.spec thead th{ background:var(--pale); color:var(--blue-deep); font-weight:700; border-bottom:2px solid var(--blue); }
.spec td:first-child{ color:var(--ink); font-weight:700; width:20%; }
.spec td:last-child{ font-variant-numeric:tabular-nums; }
.spec tbody tr:last-child td{ border-bottom:0; }

/* ---------- chips ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.chip{ font-size:var(--t-xs); padding:7px 13px; border:1px solid var(--line-blue); color:var(--blue-deep);
  background:var(--pale-2); }
.chip--solid{ background:var(--blue); border-color:var(--blue); color:#fff; font-weight:700; }

/* ---------- feature list ---------- */
.feats{ display:grid; gap:0; margin-top:8px; }
.feat{ display:grid; grid-template-columns:34px 1fr; gap:16px; padding:18px 0; border-bottom:1px solid var(--line-2); }
.feat:last-child{ border-bottom:0; }
.feat-n{ font-family:var(--font-mono); font-size:var(--t-xs); color:var(--blue); padding-top:3px; }
.feat b{ display:block; font-size:var(--t-h4); color:var(--ink); }
.feat span{ display:block; margin-top:6px; font-size:var(--t-sm); color:var(--body); line-height:1.8; }

/* ---------- CTA band ---------- */
.cta-band{ position:relative; background:linear-gradient(120deg,var(--navy-900),var(--navy-700));
  color:#fff; overflow:hidden; }
.cta-band .cta-inner{ position:relative; display:grid; grid-template-columns:1.3fr auto;
  gap:clamp(24px,4vw,64px); align-items:center; padding-block:clamp(52px,6vw,84px); }
.cta-band h2{ color:#fff; }
.cta-band p{ margin-top:16px; color:var(--on-navy-2); max-width:52ch; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:14px; }

/* ---------- forms ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px 24px; margin-top:32px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field--full{ grid-column:1/-1; }
.field label{ font-size:var(--t-sm); color:var(--ink); font-weight:500; }
.field .req{ color:var(--blue); }
.input,select.input,textarea.input{ width:100%; min-height:48px; padding:12px 14px; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-1); color:var(--ink); font-size:var(--t-sm);
  transition:border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
textarea.input{ min-height:130px; resize:vertical; line-height:1.7; }
.input:focus{ outline:0; border-color:var(--blue); box-shadow:0 0 0 3px rgba(47,131,200,.14); }
.field .hint{ font-size:var(--t-xs); color:var(--mut); }
.field .err{ font-size:var(--t-xs); color:#C0392B; display:none; }
.field.has-error .input{ border-color:#C0392B; }
.field.has-error .err{ display:block; }
.form-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:26px; }
.form-status{ font-size:var(--t-sm); color:var(--blue-deep); }
.form-status.is-error{ color:#C0392B; }
.consent{ display:flex; gap:10px; align-items:flex-start; font-size:var(--t-xs); color:var(--mut); }
.consent input{ margin-top:4px; }

/* ---------- modal ---------- */
.modal{ position:fixed; inset:0; z-index:var(--z-modal); display:grid; place-items:center;
  background:rgba(0,20,40,.72); backdrop-filter:blur(6px); opacity:0; visibility:hidden;
  transition:opacity var(--dur-2) var(--ease-out), visibility var(--dur-2); padding:24px; }
.modal.is-open{ opacity:1; visibility:visible; }
.modal-inner{ position:relative; width:min(1000px,100%); background:var(--navy-900);
  border:1px solid var(--hair-navy); transform:translateY(10px); transition:transform var(--dur-3) var(--ease-out); }
.modal.is-open .modal-inner{ transform:none; }
.modal-media{ position:relative; aspect-ratio:16/9; background:var(--navy-800); display:grid; place-items:center; }
.modal-media img{ width:100%; height:100%; object-fit:contain; opacity:.5; }
.modal-media .modal-note{ position:absolute; text-align:center; color:var(--on-navy-2); font-size:var(--t-sm); padding:20px; }
.modal-media .modal-note b{ display:block; color:#fff; font-size:var(--t-h4); margin-bottom:8px; }
.modal-media video{ width:100%; height:100%; object-fit:contain; background:#001A33; display:block; }
/* 说明放在视频下方而不是压在上面：video 带原生控制条，压上去会盖住播放控件 */
.modal-cap{ margin:0; padding:14px 18px; font-size:var(--t-xs); color:var(--on-navy-2);
  border-top:1px solid var(--hair-navy); }
.modal-close{ position:absolute; top:-46px; right:0; width:40px; height:40px; border:1px solid var(--hair-navy);
  background:transparent; color:#fff; cursor:pointer; font-size:18px; line-height:1; }

/* ---------- footer ---------- */
.ft{ background:var(--navy-900); color:var(--on-navy-2); padding-top:clamp(56px,7vw,88px); }
.ft-top{ display:grid; grid-template-columns:1.4fr repeat(3,1fr) auto; gap:clamp(24px,3vw,48px); }
.ft-brand img{ height:52px; width:auto; }
.ft-brand p{ margin-top:20px; font-size:var(--t-xs); color:var(--on-navy-3); line-height:1.9; max-width:30ch; }
.ft h4{ color:#fff; font-size:var(--t-sm); font-family:var(--font-mono); letter-spacing:var(--ls-label);
  text-transform:uppercase; font-weight:500; }
.ft ul{ margin-top:18px; display:grid; gap:11px; }
.ft a{ font-size:var(--t-xs); color:var(--on-navy-2); transition:color var(--dur-1) linear; }
.ft a:hover{ color:#fff; }
.ft-qr{ text-align:center; }
.ft-qr img{ width:112px; height:112px; background:#fff; padding:7px; }
.ft-qr span{ display:block; margin-top:10px; font-size:var(--t-label); color:var(--on-navy-3); }
.ft-contact{ margin-top:18px; display:grid; gap:10px; font-size:var(--t-xs); }
.ft-contact b{ color:var(--on-navy-3); font-weight:400; display:inline-block; width:44px; }
.ft-bottom{ margin-top:clamp(40px,5vw,64px); border-top:1px solid var(--hair-navy);
  padding-block:22px 26px; display:flex; flex-wrap:wrap; gap:12px 28px; justify-content:space-between;
  font-size:var(--t-label); color:var(--on-navy-3); }

/* ---------- page hero (inner pages) ---------- */
.phero{ background:var(--navy-900); color:#fff; padding-top:calc(var(--hdr-h) + clamp(48px,6vw,84px));
  padding-bottom:clamp(40px,5vw,72px); position:relative; overflow:hidden; }
.phero h1{ color:#fff; margin-top:18px; font-size:var(--t-h1); }
.phero p{ margin-top:18px; color:var(--on-navy-2); max-width:64ch; }
.crumbs{ font-size:var(--t-xs); color:var(--on-navy-3); }
.crumbs a:hover{ color:#fff; }
.crumbs span{ margin-inline:8px; opacity:.6; }

/* ---------- prose ---------- */
.prose{ max-width:70ch; }
.prose p + p{ margin-top:18px; }
.prose h3{ margin-top:34px; }

/* ---------- news ---------- */
.news-list{ border-top:1px solid var(--line); margin-top:36px; }
.news-item{ display:grid; grid-template-columns:150px 1fr auto; gap:clamp(16px,2vw,32px);
  align-items:baseline; padding:24px 0; border-bottom:1px solid var(--line); }
.news-date{ font-family:var(--font-mono); font-size:var(--t-xs); color:var(--mut); }
.news-item h3{ font-size:var(--t-h4); }
.news-item p{ margin-top:8px; font-size:var(--t-sm); color:var(--body); }
.empty-state{ border:1px dashed var(--line-blue); background:var(--pale-2); padding:clamp(28px,4vw,48px);
  margin-top:36px; text-align:center; }
.empty-state b{ display:block; font-size:var(--t-h4); color:var(--ink); }
.empty-state p{ margin-top:12px; font-size:var(--t-sm); color:var(--mut); }

/* ---------- careers ---------- */
.job{ display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center;
  padding:22px 0; border-bottom:1px solid var(--line); }
.job h3{ font-size:var(--t-h4); }
.job .job-meta{ margin-top:8px; font-size:var(--t-xs); color:var(--mut); display:flex; gap:16px; flex-wrap:wrap; }

/* ---------- reveal ---------- */
/* reveal — only hides content when JS is running, so no-JS/print never loses it */
.js .reveal{ opacity:0; transform:translate3d(0,18px,0);
  transition:opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
  transition-delay:calc(var(--i,0) * var(--stagger)); }
.js .reveal.is-in{ opacity:1; transform:none; }

/* ---------- keyframes ---------- */
@keyframes arcDraw{ to{ stroke-dashoffset:0; } }
@keyframes scanSweep{ 0%{ transform:translateX(-4%); opacity:0; }
  10%{ opacity:.9; } 90%{ opacity:.9; } 100%{ transform:translateX(104%); opacity:0; } }
@keyframes heroRise{ from{ opacity:0; transform:translate3d(0,26px,0); } to{ opacity:1; transform:none; } }
@keyframes heroMedia{ from{ opacity:0; transform:translate3d(0,34px,0) scale(.985); }
  to{ opacity:1; transform:none; } }
.anim-rise{ animation:heroRise .72s var(--ease-out) both; }
.anim-media{ animation:heroMedia 1s var(--ease-out) .18s both; }
.anim-d1{ animation-delay:.06s; } .anim-d2{ animation-delay:.14s; } .anim-d3{ animation-delay:.22s; }

/* ---------- text-only product card ---------- */
.pcard--text{ background:var(--paper); }
.pcard--text .pcard-body{ border-top:0; padding:26px 26px 28px; }

/* ---------- download list ---------- */
.dl{ border-top:1px solid var(--line); margin-top:34px; }
.dl a{ display:grid; grid-template-columns:1.1fr 1fr auto; gap:20px; align-items:center;
  padding:22px 6px; border-bottom:1px solid var(--line);
  transition:background-color var(--dur-2) var(--ease-out), padding-left var(--dur-2) var(--ease-out); }
.dl a:hover{ background:var(--paper); padding-left:14px; }
.dl b{ font-size:var(--t-h4); color:var(--ink); font-weight:700; }
.dl span{ font-size:var(--t-xs); color:var(--mut); }
.dl .dl-fmt{ font-family:var(--font-mono); font-size:var(--t-label); letter-spacing:.1em;
  color:var(--blue); border:1px solid var(--line-blue); padding:5px 11px; }

/* ---------- faq ---------- */
.faq{ margin-top:34px; border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ display:flex; justify-content:space-between; align-items:center; gap:24px;
  padding:22px 6px; cursor:pointer; list-style:none;
  font-size:var(--t-h4); font-weight:700; color:var(--ink); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--font-mono); font-size:20px; color:var(--blue);
  transition:transform var(--dur-2) var(--ease-out); }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq .faq-a{ padding:0 6px 24px; font-size:var(--t-sm); color:var(--body); line-height:1.9; max-width:78ch; }

/* ---------- solutions ---------- */
.sol-sec{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,5vw,72px); align-items:start; }
.sol-flow{ margin-top:30px; border-top:1px solid var(--line); }
.sol-step{ display:grid; grid-template-columns:30px 1fr; gap:14px; padding:16px 0;
  border-bottom:1px solid var(--line-2); }
.sol-step .n{ font-family:var(--font-mono); font-size:var(--t-xs); color:var(--blue); padding-top:3px; }
.sol-step b{ font-size:var(--t-sm); color:var(--ink); }
.sol-step span{ display:block; font-size:var(--t-xs); color:var(--mut); margin-top:5px; line-height:1.75; }
.sol-aside{ background:var(--pale-2); border:1px solid var(--line-blue); padding:clamp(22px,2.6vw,30px); }
.sol-aside h3{ font-size:var(--t-h4); }
.sol-aside ul{ margin-top:16px; display:grid; }
.sol-aside li a{ display:block; padding:13px 0 13px 18px; position:relative; font-size:var(--t-sm);
  color:var(--body); border-bottom:1px solid var(--line-blue);
  transition:color var(--dur-2) var(--ease-out), padding-left var(--dur-2) var(--ease-out); }
.sol-aside li:last-child a{ border-bottom:0; }
.sol-aside li a::before{ content:""; position:absolute; left:0; top:20px; width:7px; height:7px;
  border-radius:50%; background:var(--blue); }
.sol-aside li a:hover{ color:var(--blue-deep); padding-left:24px; }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,5vw,72px); align-items:start; }
.info-card{ background:var(--navy-900); color:var(--on-navy-2); padding:clamp(26px,3vw,38px); }
.info-card h3{ color:#fff; }
.info-card .rows{ margin-top:24px; display:grid; gap:18px; }
.info-card .rows div{ display:grid; grid-template-columns:56px 1fr; gap:14px; font-size:var(--t-sm); line-height:1.7; }
.info-card .rows b{ color:var(--on-navy-3); font-weight:400; }
.info-card .qr{ margin-top:30px; padding-top:26px; border-top:1px solid var(--hair-navy);
  display:flex; gap:18px; align-items:center; }
.info-card .qr img{ width:116px; height:116px; background:#fff; padding:7px; flex:0 0 auto; }
.info-card .qr span{ font-size:var(--t-xs); color:var(--on-navy-3); line-height:1.9; }

@media (max-width:1024px){
  .sol-sec,.contact-grid{ grid-template-columns:1fr; }
  .dl a{ grid-template-columns:1fr auto; }
  .dl a span:not(.dl-fmt){ display:none; }
}

/* ==========================================================================
   可读性修正层（2026-10-14 全站审核）
   问题：品牌蓝 #2F83C8 在白底上只有 4.0:1、白字压在它上面同样 4.0:1，
   都达不到 WCAG AA 的 4.5:1；另有锚点被固定顶栏遮挡、点击区偏小、
   顶栏英文行只有 9px。这里统一收敛，装饰性元素（圆点、细线、序号底）不动。
   ========================================================================== */
:root{ --blue-dark:#164E85; }          /* 主按钮按下/悬停的更深一档 */

/* 蓝色文字一律换成 --blue-deep（#1B5E9E，6.6:1）。
   .label--navy 是深底上的青色标签，必须排除，否则会被这条压成深蓝，只剩 1.58:1；
   .req 实际写在 .field 里，选择器要跟上权重，否则压不住原来的 .field .req。 */
.label:not(.label--navy),
.pcard-code, .frow-code, .feat-n, .pcard-link, .dl .dl-fmt, .field .req,
.tech em, .sol-step .n, .certs-cap, .tag{ color:var(--blue-deep); }

/* 填充型控件：底色压深，白字才够对比 */
.btn-primary{ background:var(--blue-deep); }
.btn-primary:hover{ background:var(--blue-dark); }
.chip--solid{ background:var(--blue-deep); border-color:var(--blue-deep); }

/* 面包屑实测 4.45:1（该区有辉光，底色比纯 navy 亮），提一档 */
.crumbs{ color:var(--on-navy-2); }

/* 顶栏英文行原为 9px，低于 12px 可读下限 */
.brand-txt i{ font-size:12px; letter-spacing:.14em; }

/* 锚点跳转不要被 76px 固定顶栏盖住标题 */
[id]{ scroll-margin-top:calc(var(--hdr-h) + 16px); }

/* 文字链接的点击区：桌面靠间距已够，移动端补足高度 */
@media (max-width:1024px){
  .ft a, .hero-fam a, .pcard-link, .crumbs a, .sol-aside li a{
    display:inline-flex; align-items:center; min-height:28px; }
  .ft li{ padding-block:3px; }
}

/* ---------- responsive ---------- */
@media (max-width:1200px){
  .fam-rows .frow{ grid-template-columns:130px 1fr auto; }
  .frow-desc{ display:none; }
}
@media (max-width:1024px){
  .hdr .nav{ display:none; }
  .burger{ display:block; }
  .hdr-actions .btn{ display:none; }
  .fam-flags,.tech-grid,.sol-grid,.users-grid,.stats-band{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .certwall{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .ft-top{ grid-template-columns:1fr 1fr; }
  .ft-qr{ text-align:left; }
  .split{ grid-template-columns:1fr; }
  .hero-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 18px; }
  .hero-video{ display:none; }
  .hero-bg{ background-size:200% auto; background-image:url("../img/family-hero@1150.webp"); }
  .cta-band .cta-inner{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  :root{ --hdr-h:64px; }
  .fam-flags,.tech-grid,.sol-grid,.users-grid,.stats-band,.form-grid{ grid-template-columns:1fr; }
  .certwall{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ft-top{ grid-template-columns:1fr; }
  .fam-rows .frow{ grid-template-columns:1fr auto; gap:8px 16px; }
  .frow-name{ grid-column:1/-1; }
  .news-item,.job{ grid-template-columns:1fr; }
  .hero-copy{ max-width:none; }
  .hero-cta .btn{ flex:1 1 100%; }
  .brand img{ height:38px; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
  .hero-scan{ display:none; }
}