/* ==============================================================
   AUREK · 安睿克智能 — Industrial catalog design system
   European industrial brand aesthetic (Festo / SCHUNK inspired)
   ============================================================== */

:root{
  /* surfaces */
  --bg:        #f4f4f1;          /* warm paper */
  --bg-alt:    #ebebe7;          /* deeper panel */
  --paper:     #ffffff;
  --ink:       #0c1014;          /* near-black */
  --ink-soft:  #20262d;
  --sub:       #545a63;
  --mute:      #8a9099;
  --line:      #d8d6cf;          /* hairline */
  --line-2:    #c4c1b8;
  --line-soft: #e9e7e0;

  /* brand */
  --blue:      #0e3b8c;          /* primary, deep european blue */
  --blue-2:    #1d54c2;          /* hover / link */
  --blue-soft: #e6ebf6;
  --signal:    #ffd000;          /* SCHUNK yellow, used sparingly */

  /* fonts */
  --sans:  "IBM Plex Sans","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --serif: "IBM Plex Serif",ui-serif,Georgia,serif;
  --mono:  "IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  /* layout */
  --container: 1320px;
  --pad: clamp(20px,3.5vw,56px);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  font-feature-settings:"ss01","cv11";
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,textarea,select{ font:inherit; color:inherit; }

.container{
  max-width:var(--container);
  margin:0 auto;
  padding-left:var(--pad);
  padding-right:var(--pad);
}
.mono{ font-family:var(--mono); font-feature-settings:"tnum","zero"; letter-spacing:.01em; }

/* ============================================================
   NAV — thin catalog header
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(244,244,241,.88);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-row{
  display:flex; align-items:center; gap:32px;
  height:64px;
}
.brand{ display:flex; align-items:center; height:100%; }
.brand-logo{
  height:26px; width:auto;
  filter:contrast(1.05);
}
.nav-menu{ display:flex; align-items:center; gap:2px; margin-left:24px; }
.nav-menu a{
  position:relative;
  padding:8px 14px;
  font-size:13.5px;
  color:var(--ink-soft);
  letter-spacing:.01em;
  transition:color .15s;
}
.nav-menu a:hover{ color:var(--blue); }
.nav-menu a.active{ color:var(--blue); }
.nav-menu a.active::after{
  content:""; position:absolute;
  left:14px; right:14px; bottom:-1px; height:2px;
  background:var(--blue);
}
.nav-spec{
  margin-left:auto;
  display:flex; align-items:center; gap:14px;
  font-family:var(--mono); font-size:11.5px;
  color:var(--mute); letter-spacing:.06em; text-transform:uppercase;
}
.nav-spec b{ color:var(--ink); font-weight:600; }
.nav-spec .sep{ width:1px; height:14px; background:var(--line-2); }
.nav-cta{
  display:inline-flex; align-items:center; gap:8px;
  height:36px; padding:0 16px;
  background:var(--ink); color:#fff;
  font-size:13px; font-weight:500;
  border:1px solid var(--ink);
  transition:background .15s;
}
.nav-cta:hover{ background:var(--blue); border-color:var(--blue); }
.nav-cta svg{ width:14px; height:14px; }
.nav-toggle{ display:none; }

/* ============================================================
   SECTION primitives
   ============================================================ */
section{ padding:clamp(72px,9vw,140px) 0; position:relative; }
section + section{ border-top:1px solid var(--line); }
/* ============================================================
   FACILITY photo — top + bottom feather only, full-width band
   ============================================================ */
.facility{
  position:relative;
  margin: 16px calc(-1 * var(--pad)) -40px;
  z-index:0;
  isolation:isolate;
}
.facility > img{
  display:block;
  width:100%;
  height: clamp(320px, 38vw, 500px);
  object-fit:cover;
  object-position: center 38%;
  filter: contrast(1.02) saturate(.92) brightness(1.02);
  /* feather TOP + BOTTOM only — keep left/right sharp */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 70%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 70%, transparent 100%);
  opacity:.92;
}
.facility-cap{
  position:absolute;
  left: calc(var(--pad));
  right: calc(var(--pad));
  bottom: 64px;
  display:flex; align-items:center; gap:10px;
  flex-wrap:wrap;
  font-size:11px;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink);
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(8px);
  padding:8px 14px;
  border:1px solid var(--line-2);
  width:max-content;
  max-width: calc(100% - 2 * var(--pad));
}
.facility-cap .sep{ color:var(--line-2); }

/* About body intro paragraph emphasis */
#about .about-body p:first-of-type{
  font-size:20px;
  line-height:1.55;
  color:var(--ink);
  font-weight:500;
  letter-spacing:-.005em;
}

/* tighten value grid: 2x2 stays, but inner padding tweaks */
.values{
  display:grid; grid-template-columns:1fr 1fr;
  border:1px solid var(--line);
  background:var(--paper);
  box-shadow: 0 1px 0 var(--line-soft);
}

#about .about-grid{
  position:relative;
  z-index:2;
  padding-top:24px;
}

@media(max-width: 720px){
  .facility{ margin-bottom: -20px; }
  .facility-cap{ bottom: 38px; font-size:10px; }
  .facility > img{ height: 260px; }
}

/* ============================================================
   section background image (e.g. factory photo as ABOUT bg)
   ============================================================ */
.has-bg{ position:relative; isolation:isolate; }
.section-bg{
  position:absolute; inset:0;
  background-position:center; background-size:cover;
  z-index:0;
  filter: grayscale(.35) contrast(.95) brightness(1.02);
  opacity:.22;
}
.section-bg-fade{
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(to bottom,
      var(--paper) 0%, rgba(255,255,255,.55) 25%, rgba(255,255,255,.55) 75%, var(--paper) 100%),
    linear-gradient(to right,
      var(--paper) 0%, rgba(255,255,255,0) 10%, rgba(255,255,255,0) 90%, var(--paper) 100%);
}
.has-bg > .container{ position:relative; z-index:2; }

/* ============================================================
   utility — keep alt distinct
   ============================================================ */
.alt{ background:var(--paper); }
.dark{ background:var(--ink); color:#e7e7e3; }
.dark .sub-ink{ color:#a8aab0; }

/* section header */
.shead{
  display:grid;
  grid-template-columns: 1fr;
  gap:24px;
  margin-bottom:56px;
  padding-bottom:24px;
  border-bottom:1px solid var(--line);
}
@media(min-width:900px){
  .shead{ grid-template-columns: 220px 1fr 320px; gap:48px; align-items:end; }
}
.shead-num{
  font-family:var(--mono); font-size:12px;
  color:var(--mute); letter-spacing:.1em; text-transform:uppercase;
}
.shead-num b{ color:var(--ink); font-weight:600; display:block; font-size:13px; margin-top:4px; }
.shead-title h2{
  font-family:var(--sans); font-weight:500;
  font-size:clamp(30px,4vw,46px);
  line-height:1.08;
  letter-spacing:-.02em;
  margin:0;
  color:var(--ink);
}
.shead-title h2 em{
  font-style:normal; color:var(--blue);
}
.shead-lede{
  font-size:14px;
  color:var(--sub);
  line-height:1.65;
  border-left:1px solid var(--line-2);
  padding-left:20px;
}

/* eyebrow */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11.5px;
  color:var(--blue); letter-spacing:.12em; text-transform:uppercase;
}
.eyebrow::before{
  content:""; width:18px; height:1px; background:currentColor;
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  padding-top:32px;
  padding-bottom:0;
  border-bottom:1px solid var(--line);
  position:relative;
  overflow:hidden;
}
.hero-meta-row{
  display:flex; align-items:center; gap:20px;
  padding-bottom:18px;
  margin-bottom:32px;
  border-bottom:1px dashed var(--line-2);
  font-family:var(--mono); font-size:11.5px;
  color:var(--mute); letter-spacing:.08em; text-transform:uppercase;
}
.hero-meta-row b{ color:var(--ink); font-weight:600; }
.hero-meta-row .sep{ width:14px; height:1px; background:var(--line-2); }

/* hero-stage: positioned container that holds GIF (absolute, behind)
   + headline (relative, on top). GIF acts as the headline's background. */
.hero-stage{
  position:relative;
  /* full-bleed across hero width */
  margin-left: calc(-1 * var(--pad));
  margin-right: calc(-1 * var(--pad));
  padding: clamp(48px, 7vw, 96px) calc(var(--pad)) clamp(56px, 7vw, 96px);
  overflow:hidden;
  isolation:isolate;
}

/* headline content on top */
.hero-lead{
  position:relative;
  z-index:2;
  max-width: 1100px;
  margin: 0;
}

/* sub copy + CTAs sit BELOW the GIF stage, back inside container */
.hero-lead-row{
  display:grid; gap:32px;
  grid-template-columns:1fr;
  align-items:end;
  margin-top:36px;
}
@media(min-width:900px){
  .hero-lead-row{
    grid-template-columns: 1.4fr 1fr;
    gap:64px;
  }
}
.hero-lead-row .hero-sub{
  margin-bottom:0;
  max-width:none;
}
.hero-lead-row .hero-actions{
  margin-bottom:0;
  justify-content:flex-start;
}

/* hero 4-up traits row — plain row below the stage */
.hero-traits{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin-top:48px;
  background:var(--paper);
}
@media(min-width:900px){
  .hero-traits{ grid-template-columns:repeat(4,1fr); }
}
@media(min-width:900px){
  .hero-traits{ grid-template-columns:repeat(4,1fr); }
}
.trait{
  padding:28px 26px 32px;
  border-right:1px solid var(--line);
  position:relative;
}
.trait:last-child{ border-right:0; }
@media(max-width:899px){
  .trait:nth-child(2n){ border-right:0; }
  .trait:nth-child(-n+2){ border-bottom:1px solid var(--line); }
}
.trait-num{
  font-family:var(--mono); font-size:11px;
  color:var(--blue); letter-spacing:.1em;
  margin-bottom:14px;
}
.trait-mark{
  width:38px; height:38px;
  border:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink);
  margin-bottom:18px;
}
.trait-mark svg{ width:20px; height:20px; }
.trait h4{
  font-size:18px; font-weight:600;
  margin:0 0 8px;
  letter-spacing:-.005em;
  color:var(--ink);
}
.trait p{
  font-size:13px; color:var(--sub); line-height:1.55;
  margin:0;
}

.hero-eyebrow{
  font-family:var(--mono); font-size:12px;
  color:var(--blue); letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:20px;
  display:flex; align-items:center; gap:14px;
}
.hero-eyebrow::before{ content:""; width:32px; height:1px; background:var(--blue); }

h1.hero-h{
  font-family:var(--sans);
  font-weight:500;
  font-size:clamp(40px,6vw,84px);
  line-height:.98;
  letter-spacing:-.035em;
  margin:0 0 24px;
  color:var(--ink);
}
h1.hero-h em{
  font-style:normal;
  color:var(--blue);
  display:inline-block;
}
h1.hero-h .ko{
  display:block;
  font-family:var(--mono); font-weight:400;
  font-size:.22em; letter-spacing:.12em;
  color:var(--mute); margin-top:24px;
  text-transform:uppercase;
}

.hero-sub{
  font-size:16px; line-height:1.6;
  color:var(--sub);
  max-width:540px;
  margin:0 0 40px;
}

.hero-actions{
  display:flex; gap:12px; flex-wrap:wrap;
  margin-bottom:56px;
}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  height:48px; padding:0 22px;
  font-size:14px; font-weight:500;
  letter-spacing:.005em;
  border:1px solid var(--ink);
  transition:all .18s;
}
.btn svg{ width:14px; height:14px; transition:transform .18s; }
.btn:hover svg{ transform:translateX(3px); }
.btn-primary{ background:var(--ink); color:#fff; }
.btn-primary:hover{ background:var(--blue); border-color:var(--blue); }
.btn-ghost{ background:transparent; color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:#fff; }

/* hero spec stats */
.hero-stats{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--line);
}
@media(min-width:560px){
  .hero-stats{ grid-template-columns:repeat(4,1fr); }
}
.hero-stats .s{
  padding:24px 0;
  border-right:1px solid var(--line);
}
.hero-stats .s:last-child{ border-right:0; }
@media(max-width:559px){
  .hero-stats .s:nth-child(2n){ border-right:0; }
  .hero-stats .s:nth-child(1),
  .hero-stats .s:nth-child(2){ border-bottom:1px solid var(--line); }
}
.hero-stats .n{
  font-family:var(--sans); font-weight:500;
  font-size:36px; line-height:1;
  letter-spacing:-.025em;
  color:var(--ink);
  margin-bottom:8px;
}
.hero-stats .n span{
  font-size:14px; color:var(--mute); margin-left:4px;
  font-weight:400;
}
.hero-stats .l{
  font-family:var(--mono); font-size:11.5px;
  color:var(--mute); letter-spacing:.06em; text-transform:uppercase;
}

/* hero visual */
.hero-visual{
  position:relative;
  background:var(--paper);
  border:1px solid var(--line);
  aspect-ratio:1/1.1;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.hero-visual::before,
.hero-visual::after{
  content:""; position:absolute;
  inset:0;
  background-image:
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity:.6;
  pointer-events:none;
}
.hero-visual::after{
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 200px 200px;
  opacity:.5;
}
.hero-visual .product-img{
  position:relative; z-index:2;
  max-height:84%;
  width:auto;
  object-fit:contain;
}
.hero-corner{
  position:absolute; z-index:3;
  width:14px; height:14px;
  border:1px solid var(--blue);
}
.hero-corner.tl{ top:14px; left:14px; border-right:0; border-bottom:0; }
.hero-corner.tr{ top:14px; right:14px; border-left:0; border-bottom:0; }
.hero-corner.bl{ bottom:14px; left:14px; border-right:0; border-top:0; }
.hero-corner.br{ bottom:14px; right:14px; border-left:0; border-top:0; }

.hero-load-badge{
  position:absolute; z-index:4;
  top:14px; right:14px;
  background:var(--ink); color:#fff;
  padding:14px 18px;
  display:flex; align-items:baseline; gap:6px;
  border:1px solid var(--ink);
}
.hero-load-badge .l{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.1em; text-transform:uppercase;
  color:#999; writing-mode:vertical-rl;
  transform:rotate(180deg);
  margin-right:4px;
}
.hero-load-badge .n{
  font-family:var(--sans); font-weight:500;
  font-size:34px; line-height:1; letter-spacing:-.02em;
}
.hero-load-badge .u{
  font-family:var(--mono); font-size:11px;
  color:#bbb;
}

.hero-spec-card{
  position:absolute; z-index:4;
  bottom:14px; left:14px;
  background:var(--paper);
  border:1px solid var(--ink);
  padding:14px 18px;
  min-width:240px;
  font-size:12px;
}
.hero-spec-card dt{
  font-family:var(--mono); font-size:10.5px;
  color:var(--mute); letter-spacing:.1em; text-transform:uppercase;
  padding-bottom:8px; margin-bottom:8px;
  border-bottom:1px solid var(--line);
}
.hero-spec-card .row{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:12px; padding:3px 0;
}
.hero-spec-card .row span{
  color:var(--sub); font-size:11.5px;
  flex-shrink:0;
}
.hero-spec-card .row b{
  font-family:var(--mono); font-weight:500;
  font-size:12px; color:var(--ink);
  text-align:right;
}
.hero-spec-card .row .leader{
  flex:1; border-bottom:1px dotted var(--line-2);
  margin:0 4px 4px;
  min-width:20px;
}

/* ============================================================
   HERO-BG — GIF positioned BEHIND the headline (background of text)
   ============================================================ */
.hero-bg{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  background:var(--bg-alt);
}
.hero-bg > img,
.hero-bg > video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  filter:contrast(1.04) saturate(.95);
}
.hero-bg-placeholder{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:14px;
  color:var(--mute);
  background:var(--bg-alt);
}
.hero-bg-placeholder .ph-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(31,31,31,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(31,31,31,.05) 1px, transparent 1px);
  background-size:48px 48px;
}
.hero-bg-placeholder::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(31,31,31,.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(31,31,31,.09) 1px, transparent 1px);
  background-size:240px 240px;
}
.hero-bg-placeholder .ph-icon{
  position:relative; z-index:2;
  width:42px; height:42px;
  color:var(--ink-soft);
  opacity:.45;
  margin-top:0;
}
.hero-bg-placeholder .ph-text{
  position:relative; z-index:2;
  font-size:11px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--mute);
  opacity:.7;
  margin-top:0;
}
/* fade ALL edges so GIF feels like a soft background behind text */
.hero-bg-fade{
  position:absolute; inset:0;
  pointer-events:none; z-index:3;
  background:
    linear-gradient(to bottom,
      var(--bg) 0%,
      rgba(244,244,241,0) 18%,
      rgba(244,244,241,0) 82%,
      var(--bg) 100%),
    linear-gradient(to right,
      var(--bg) 0%,
      rgba(244,244,241,0) 12%,
      rgba(244,244,241,0) 88%,
      var(--bg) 100%);
}
.hero-bg-meta{
  position:absolute; z-index:4;
  bottom:14px; right:calc(var(--pad));
  display:flex; align-items:center; gap:12px;
  font-size:11px; letter-spacing:.1em;
  color:var(--ink); text-transform:uppercase;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(6px);
  padding:6px 12px;
  border:1px solid var(--line-2);
}
.hero-bg-meta b{ color:var(--blue); font-weight:600; }
.hero-bg-meta .sep{ width:1px; height:11px; background:var(--line-2); }

/* hero loses its bottom border because hero-bg now closes it visually */
.hero{ border-bottom:0; padding-bottom:0; }

/* ============================================================
   MARQUEE (subtle catalog rail)
   ============================================================ */
.rail{
  background:var(--ink);
  color:#e7e7e3;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  overflow:hidden;
  padding:18px 0;
}
.rail-track{
  display:flex; gap:48px;
  animation:slide 50s linear infinite;
  white-space:nowrap;
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.rail-track span{ display:inline-flex; align-items:center; gap:48px; }
.rail-track i{
  font-style:normal; color:var(--signal);
  margin-right:14px;
}
.rail-track em{
  font-style:normal; color:#5a5e64;
}
@keyframes slide{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ============================================================
   ABOUT — values
   ============================================================ */
.about-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:48px;
}
@media(min-width:900px){
  .about-grid{ grid-template-columns: 1fr 1fr; gap:80px; align-items:start; }
}
.about-body p{
  font-size:15.5px; color:var(--sub); line-height:1.75;
  margin:0 0 18px;
}
.about-body p:first-of-type{
  font-size:18px; color:var(--ink); line-height:1.6;
  font-weight:500;
}

.values{
  display:grid; grid-template-columns:1fr 1fr;
  border:1px solid var(--line);
  background:var(--paper);
}
.values .v{
  padding:24px 22px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.values .v:nth-child(2n){ border-right:0; }
.values .v:nth-last-child(-n+2){ border-bottom:0; }
.values .v .num{
  font-family:var(--mono); font-size:11px;
  color:var(--blue); letter-spacing:.1em;
  margin-bottom:14px;
}
.values .v h4{
  font-size:18px; font-weight:600;
  margin:0 0 8px; color:var(--ink);
  letter-spacing:-.005em;
}
.values .v p{
  font-size:13px; color:var(--sub); line-height:1.55;
  margin:0;
}

/* ============================================================
   PROCESS — 4 step
   ============================================================ */
.proc-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:0;
  border:1px solid var(--line);
  background:var(--paper);
}
@media(min-width:720px){
  .proc-grid{ grid-template-columns:repeat(4,1fr); }
}
.proc{
  padding:40px 32px 44px;
  border-right:1px solid var(--line);
  position:relative;
}
.proc:last-child{ border-right:0; }
@media(max-width:719px){
  .proc{ border-right:0; border-bottom:1px solid var(--line); }
  .proc:last-child{ border-bottom:0; }
}
.proc-num{
  font-family:var(--mono); font-size:12px;
  color:var(--mute); letter-spacing:.1em;
  margin-bottom:24px;
  display:flex; align-items:center; gap:10px;
}
.proc-num b{ color:var(--blue); font-weight:600; font-size:14px; }
.proc-icon{
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg);
  border:1px solid var(--line);
  margin-bottom:20px;
  color:var(--blue);
}
.proc-icon svg{ width:22px; height:22px; }
.proc h4{
  font-size:20px; font-weight:600;
  margin:0 0 8px;
  letter-spacing:-.01em;
}
.proc p{
  font-size:13.5px; color:var(--sub); line-height:1.6;
  margin:0;
}

/* ============================================================
   ARK PRODUCT MATRIX — naming legend + 10 product cards
   ============================================================ */
.naming{
  background:var(--ink);
  color:#d4d4cf;
  border:1px solid var(--ink);
  margin-bottom:32px;
}
.naming-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 18px;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  border-bottom:1px solid #232830;
  color:#a8aab0;
}
.naming-head b{ color:var(--signal); font-weight:600; letter-spacing:.05em; }
.naming-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
}
@media(min-width:560px){ .naming-grid{ grid-template-columns:repeat(5,1fr); } }
@media(min-width:1024px){ .naming-grid{ grid-template-columns:repeat(10,1fr); } }
.naming-grid .nx{
  display:flex; flex-direction:column;
  padding:14px 16px;
  border-right:1px solid #232830;
  border-bottom:1px solid #232830;
  gap:2px;
}
.naming-grid .nx:last-child{ border-right:0; }
@media(min-width:560px) and (max-width:1023px){
  .naming-grid .nx:nth-child(5n){ border-right:0; }
  .naming-grid .nx:nth-last-child(-n+5){ border-bottom:0; }
}
@media(max-width:559px){
  .naming-grid .nx:nth-child(2n){ border-right:0; }
  .naming-grid .nx:nth-last-child(-n+2){ border-bottom:0; }
}
.naming-grid .nx b{
  font-size:20px; color:var(--signal); font-weight:600;
  font-family:var(--mono);
  letter-spacing:.02em;
  margin-bottom:4px;
}
.naming-grid .nx span{
  font-family:var(--mono); font-size:10px;
  color:#7d818a; letter-spacing:.08em; text-transform:uppercase;
}
.naming-grid .nx i{
  font-style:normal; font-size:13px;
  color:#dcdcd8; margin-top:2px;
}

/* product grid */
.ark-grid{
  display:grid; gap:0;
  grid-template-columns:1fr;
  border:1px solid var(--line);
  background:var(--paper);
}
@media(min-width:760px){ .ark-grid{ grid-template-columns:repeat(3,1fr); } }

.ark{
  position:relative;
  background:var(--paper);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:flex; flex-direction:column;
  transition:background .15s;
}
.ark:hover{ background:var(--bg); }
.ark.featured::before{
  content:""; position:absolute; top:0; left:0; right:0;
  height:3px; background:var(--blue); z-index:2;
}

.ark-head{
  padding:18px 20px 14px;
  border-bottom:1px solid var(--line-soft);
}
.ark-code{
  font-size:24px; letter-spacing:.02em;
  display:flex; align-items:center; gap:6px;
  margin-bottom:6px;
  color:var(--ink);
}
.ark-code b{ color:var(--ink); font-weight:500; }
.ark-code .sep{ color:var(--line-2); font-weight:300; }
.ark-code em{
  font-style:normal; font-weight:600;
  color:var(--blue);
  font-size:28px;
}
.ark-type{
  font-size:10.5px;
  color:var(--mute); letter-spacing:.08em;
  text-transform:uppercase;
}

.ark-vis{
  position:relative;
  background:
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px) 0 0/32px 32px,
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px) 0 0/32px 32px,
    var(--bg);
  aspect-ratio: 4/3;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.ark-vis img{
  max-height:88%; width:auto;
  object-fit:contain;
}
.ark-vis-placeholder{
  width:80%; height:80%;
  display:flex; align-items:center; justify-content:center;
  color:var(--mute);
}
.ark-vis-placeholder svg{
  width:100%; height:auto; max-width:120px;
  color:var(--ink-soft);
  opacity:.7;
}
.ark-cap{
  position:absolute;
  bottom:8px; left:12px;
  font-size:10px;
  color:var(--mute);
  letter-spacing:.1em; text-transform:uppercase;
}

.ark-body{
  padding:18px 20px 22px;
  flex:1;
  display:flex; flex-direction:column;
  gap:12px;
}
.ark-body h4{
  font-size:16px; font-weight:600;
  margin:0;
  letter-spacing:-.005em;
}
.ark-body p{
  font-size:13px; color:var(--sub); line-height:1.55;
  margin:0;
  flex:1;
}
.ark-spec{
  display:grid;
  grid-template-columns: auto 1fr;
  gap:6px 12px;
  margin:0;
  padding-top:12px;
  border-top:1px solid var(--line-soft);
}
.ark-spec dt{
  font-family:var(--mono); font-size:10.5px;
  color:var(--mute); letter-spacing:.06em; text-transform:uppercase;
}
.ark-spec dd{
  font-family:var(--mono); font-size:12px;
  color:var(--ink); margin:0; font-weight:500;
}

.naming-footnote{
  margin-top:20px;
  padding:14px 18px;
  font-size:11.5px;
  color:var(--mute);
  background:var(--bg);
  border:1px dashed var(--line-2);
  letter-spacing:.02em;
}
.naming-footnote b{
  color:var(--blue); font-weight:600;
  background:var(--blue-soft);
  padding:1px 5px;
  margin: 0 1px;
}

/* ============================================================
   PRODUCT SERIES — LKU 三系列 (centerpiece)
   ============================================================ */
.series-grid{
  display:grid; gap:24px;
  grid-template-columns:1fr;
}
@media(min-width:900px){
  .series-grid{ grid-template-columns:repeat(3,1fr); gap:24px; }
}
.series{
  background:var(--paper);
  border:1px solid var(--line);
  display:flex; flex-direction:column;
  position:relative;
  transition:border-color .2s;
}
.series:hover{ border-color:var(--ink); }
.series.featured{
  border-color:var(--ink);
}
.series.featured::before{
  content:"RECOMMENDED";
  position:absolute; top:-1px; left:-1px;
  background:var(--ink); color:var(--signal);
  font-family:var(--mono); font-size:10px;
  letter-spacing:.14em; padding:5px 10px;
  z-index:2;
}
.series-head{
  padding:24px 24px 18px;
  border-bottom:1px solid var(--line);
}
.series-id{
  font-family:var(--mono); font-size:11.5px;
  color:var(--mute); letter-spacing:.1em; text-transform:uppercase;
  margin-bottom:14px;
  display:flex; align-items:center; gap:10px;
}
.series-id b{ color:var(--ink); font-weight:600; }
.series-id .pill{
  font-family:var(--mono); font-size:10px;
  background:var(--blue-soft); color:var(--blue);
  padding:3px 8px; letter-spacing:.08em;
}
.series h3{
  font-size:26px; font-weight:600;
  margin:0 0 6px;
  letter-spacing:-.015em;
}
.series .type{
  font-family:var(--mono); font-size:12px;
  color:var(--sub); letter-spacing:.02em;
}
.series-img{
  background:
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px) 0 0/40px 40px,
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px) 0 0/40px 40px,
    var(--bg);
  aspect-ratio: 5/4;
  display:flex; align-items:center; justify-content:center;
  position:relative;
  overflow:hidden;
}
.series-img img{
  max-height:90%; width:auto;
  object-fit:contain;
}
.series-img .cap{
  position:absolute; bottom:10px; left:14px;
  font-family:var(--mono); font-size:10.5px;
  color:var(--mute); letter-spacing:.08em; text-transform:uppercase;
}
.series-body{
  padding:22px 24px 24px;
  display:flex; flex-direction:column;
  gap:18px;
  flex:1;
}
.series-spec{
  display:grid; grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.series-spec .ss{
  background:var(--paper);
  padding:12px 14px;
}
.series-spec .ss .l{
  font-family:var(--mono); font-size:10.5px;
  color:var(--mute); letter-spacing:.08em; text-transform:uppercase;
  margin-bottom:4px;
}
.series-spec .ss .v{
  font-family:var(--sans); font-weight:500;
  font-size:18px; color:var(--ink);
  letter-spacing:-.01em;
}
.series-spec .ss .v span{
  font-size:11.5px; color:var(--mute); margin-left:2px;
  font-weight:400;
}
.series-feats{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column;
  border-top:1px solid var(--line-soft);
  padding-top:16px;
}
.series-feats li{
  display:flex; align-items:flex-start; gap:10px;
  padding:5px 0;
  font-size:13px; color:var(--sub); line-height:1.5;
}
.series-feats li::before{
  content:"+"; color:var(--blue); font-weight:600;
  margin-top:0; flex-shrink:0; width:12px;
  font-family:var(--mono); font-size:14px;
}

/* ============================================================
   SPEC TABLE — full comparison
   ============================================================ */
.spec-table-wrap{
  background:var(--paper);
  border:1px solid var(--ink);
  overflow-x:auto;
}
.spec-meta{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 20px;
  background:var(--ink); color:#dcdcd8;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase;
}
.spec-meta b{ color:var(--signal); font-weight:600; }
.spec-table{
  width:100%; border-collapse:collapse;
  font-size:14px;
  min-width:640px;
}
.spec-table thead th{
  text-align:left;
  font-family:var(--mono); font-size:11px;
  color:var(--mute); letter-spacing:.1em; text-transform:uppercase;
  font-weight:500;
  padding:18px 20px;
  border-bottom:1px solid var(--line);
}
.spec-table thead th.col{
  color:var(--ink);
  font-family:var(--sans); font-weight:600;
  font-size:14px; letter-spacing:-.005em;
  text-transform:none;
}
.spec-table thead th.col .id{
  display:block;
  font-family:var(--mono); font-size:11px;
  color:var(--mute); letter-spacing:.08em; text-transform:uppercase;
  font-weight:500;
  margin-bottom:4px;
}
.spec-table tbody tr{ border-bottom:1px solid var(--line-soft); }
.spec-table tbody tr:hover{ background:var(--bg); }
.spec-table tbody tr:last-child{ border-bottom:0; }
.spec-table td{
  padding:14px 20px;
  vertical-align:top;
}
.spec-table td.lab{
  color:var(--sub);
  font-size:13px;
  width:30%;
}
.spec-table td.lab b{
  color:var(--ink); font-weight:500;
  display:block; font-size:14px;
}
.spec-table td.val{
  font-family:var(--mono); font-size:13.5px;
  color:var(--ink); font-weight:500;
}
.spec-table td.val .u{
  color:var(--mute); font-size:11px; margin-left:2px;
}
.spec-table tfoot td{
  padding:14px 20px;
  font-family:var(--mono); font-size:11px;
  color:var(--mute); letter-spacing:.02em;
  background:var(--bg);
  border-top:1px solid var(--line);
}

/* ============================================================
   MOUNTING — 3 install types
   ============================================================ */
.mount-grid{
  display:grid; gap:0;
  grid-template-columns:1fr;
  border:1px solid var(--line);
  background:var(--paper);
}
@media(min-width:780px){
  .mount-grid{ grid-template-columns:repeat(3,1fr); }
}
.mount{
  padding:32px 28px 36px;
  border-right:1px solid var(--line);
}
.mount:last-child{ border-right:0; }
@media(max-width:779px){
  .mount{ border-right:0; border-bottom:1px solid var(--line); }
  .mount:last-child{ border-bottom:0; }
}
.mount-vis{
  height:160px;
  background:var(--bg);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:24px;
  position:relative;
  overflow:hidden;
}
.mount-vis::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size:24px 24px; opacity:.4;
}
.mount-vis svg{ position:relative; z-index:2; height:90%; width:auto; }
.mount-id{
  font-family:var(--mono); font-size:11.5px;
  color:var(--blue); letter-spacing:.1em; text-transform:uppercase;
  margin-bottom:10px;
}
.mount h4{
  font-size:20px; font-weight:600;
  margin:0 0 8px; letter-spacing:-.01em;
}
.mount p{
  font-size:13.5px; color:var(--sub); line-height:1.6;
  margin:0;
}

/* ============================================================
   STRUCTURE diagram (10 parts)
   ============================================================ */
.diagram-shell{
  background:var(--paper);
  border:1px solid var(--ink);
  padding:0;
  position:relative;
  overflow:hidden;
}
.diagram-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 20px;
  background:var(--ink); color:#dcdcd8;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase;
}
.diagram-head b{ color:var(--signal); }
.diagram-stage{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
}
@media(min-width:900px){
  .diagram-stage{ grid-template-columns: 1fr 1.4fr 1fr; }
}
.part-col{
  display:flex; flex-direction:column;
  padding:32px 20px;
}
.part-col.left{ border-right:1px solid var(--line); }
.part-col.right{ border-left:1px solid var(--line); }
.part{
  display:flex; align-items:center; gap:14px;
  padding:14px 6px;
  border-bottom:1px dashed var(--line-2);
  transition:color .15s;
}
.part:last-child{ border-bottom:0; }
.part:hover{ color:var(--blue); }
.part-col.right .part{ flex-direction:row-reverse; text-align:right; }
.part-num{
  font-family:var(--mono); font-size:11px;
  color:var(--mute); letter-spacing:.08em;
  width:36px; flex-shrink:0;
  border:1px solid var(--line-2);
  text-align:center; padding:3px 0;
  background:var(--bg);
}
.part:hover .part-num{ background:var(--blue); color:#fff; border-color:var(--blue); }
.part-txt{
  font-size:14px; color:var(--ink);
}
.diagram-img{
  padding:24px;
  display:flex; align-items:center; justify-content:center;
  min-height:420px;
  background:
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px) 0 0/40px 40px,
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px) 0 0/40px 40px,
    var(--paper);
  position:relative;
}
.diagram-img::before,
.diagram-img::after{
  content:""; position:absolute;
  width:24px; height:1px; background:var(--ink);
}
.diagram-img::before{ top:50%; left:14px; }
.diagram-img::after{ top:50%; right:14px; }
.diagram-img img{ max-height:560px; width:auto; }

/* ============================================================
   STRUCTURE SECTION — Interactive Diagram Module (Light Theme)
   ============================================================ */
.structure-section{
  background:#0a0a0a;
  color:#fff;
  padding:80px 0 0;
  overflow:hidden;
}
/* Light theme override */
.structure-section.structure-light{
  background:#f8f8f6;
  color:#1a1a1a;
}
.structure-container{
  max-width:1400px;
  margin:0 auto;
  padding:0 24px;
}

/* Header */
.structure-header{
  margin-bottom:48px;
}
.structure-header-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:24px;
  flex-wrap:wrap;
  gap:12px;
}
.structure-tag{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  color:rgba(255,255,255,.5);
  text-transform:uppercase;
}
.structure-light .structure-tag{
  color:rgba(0,0,0,.4);
}
.structure-tag-right{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.05em;
  color:rgba(255,255,255,.4);
}
.structure-light .structure-tag-right{
  color:rgba(0,0,0,.35);
}
.structure-title{
  font-size:clamp(32px, 6vw, 56px);
  font-weight:300;
  letter-spacing:-.02em;
  margin:0 0 16px;
  line-height:1.1;
}
.structure-title em{
  font-style:normal;
  color:#d4a84b;
}
.structure-light .structure-title em{
  color:#b8860b;
}
.structure-desc{
  font-size:15px;
  line-height:1.7;
  color:rgba(255,255,255,.6);
  max-width:600px;
  margin:0;
}
.structure-light .structure-desc{
  color:rgba(0,0,0,.55);
}

/* Main Layout */
.structure-main{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
}
@media(min-width:1024px){
  .structure-main{
    grid-template-columns:1fr 380px;
    gap:48px;
  }
}

/* Diagram Area */
.structure-diagram{
  background:#fff;
  border:1px solid rgba(0,0,0,.1);
  border-radius:2px;
  overflow:hidden;
  box-shadow:0 4px 24px rgba(0,0,0,.06);
}
.structure-diagram-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 20px;
  background:#1a1a1a;
  border-bottom:1px solid #1a1a1a;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.05em;
  color:rgba(255,255,255,.6);
}
.structure-diagram-header b{
  color:rgba(255,255,255,.8);
  font-weight:500;
}

/* Product Diagram Container - SVG-based precise positioning */
.product-diagram{
  position:relative;
  width:100%;
  aspect-ratio:1400/900; /* Match image aspect ratio */
  background:
    linear-gradient(to right, rgba(0,0,0,.04) 1px, transparent 1px) 0 0/40px 40px,
    linear-gradient(to bottom, rgba(0,0,0,.04) 1px, transparent 1px) 0 0/40px 40px,
    #fafafa;
  overflow:visible;
}
.product-diagram-img{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
}

/* SVG Lines Overlay */
.diagram-svg-overlay{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:5;
}
.diagram-svg-overlay line{
  stroke:#1a1a1a;
  stroke-width:0.15;
  opacity:0.4;
  transition:opacity .2s, stroke .2s;
}
.diagram-svg-overlay line.active{
  stroke:#b8860b;
  opacity:1;
  stroke-width:0.2;
}
.diagram-svg-overlay circle{
  fill:#1a1a1a;
  opacity:0.45;
  transition:opacity .2s, fill .2s, r .2s;
}
.diagram-svg-overlay circle.active{
  fill:#b8860b;
  opacity:1;
}

/* Labels Overlay */
.diagram-labels-overlay{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:10;
}
.diagram-label{
  position:absolute;
  transform:translate(-50%, -50%);
  pointer-events:auto;
  cursor:pointer;
  z-index:10;
}
.diagram-label-text{
  display:block;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.02em;
  color:#1a1a1a;
  white-space:nowrap;
  padding:6px 12px;
  background:#fff;
  border:1px solid rgba(0,0,0,.15);
  border-radius:2px;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  transition:all .2s;
}
.diagram-label:hover .diagram-label-text,
.diagram-label.active .diagram-label-text{
  background:#1a1a1a;
  color:#fff;
  border-color:#1a1a1a;
}

/* Mobile dots overlay */
.diagram-dots-overlay{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:10;
  display:none;
}
.diagram-dot{
  position:absolute;
  transform:translate(-50%, -50%);
  width:24px;
  height:24px;
  background:#1a1a1a;
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--mono);
  font-size:10px;
  font-weight:500;
  cursor:pointer;
  pointer-events:auto;
  transition:all .2s;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.diagram-dot:hover,
.diagram-dot.active{
  background:#b8860b;
  transform:translate(-50%, -50%) scale(1.15);
}

/* Responsive: hide labels on mobile, show dots */
@media(max-width:899px){
  .diagram-labels-overlay,
  .diagram-svg-overlay{
    display:none;
  }
  .diagram-dots-overlay{
    display:block;
  }
}
@media(min-width:900px){
  .diagram-dots-overlay{
    display:none;
  }
}

/* Info Card */
.structure-info{
  display:flex;
  flex-direction:column;
  gap:24px;
}
.structure-info-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.1);
  border-radius:2px;
  padding:32px;
  transition:border-color .3s;
  box-shadow:0 4px 24px rgba(0,0,0,.06);
}
.structure-info-card:hover{
  border-color:rgba(184,134,11,.3);
}
.structure-info-num{
  font-family:var(--mono);
  font-size:48px;
  font-weight:200;
  color:rgba(0,0,0,.08);
  line-height:1;
  margin-bottom:16px;
}
.structure-info-title{
  font-size:24px;
  font-weight:500;
  margin:0 0 12px;
  color:#1a1a1a;
}
.structure-info-desc{
  font-size:14px;
  line-height:1.7;
  color:rgba(0,0,0,.55);
  margin:0 0 24px;
}
.structure-info-specs{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding-top:20px;
  border-top:1px solid rgba(0,0,0,.08);
}
.spec-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.spec-label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.05em;
  color:rgba(0,0,0,.4);
  text-transform:uppercase;
}
.spec-value{
  font-size:13px;
  color:rgba(0,0,0,.75);
}

/* Parts Navigation */
.structure-parts-nav{
  background:#fff;
  border:1px solid rgba(0,0,0,.1);
  border-radius:2px;
  padding:20px;
  flex:1;
  overflow:hidden;
  box-shadow:0 4px 24px rgba(0,0,0,.06);
}
.parts-nav-title{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  color:rgba(0,0,0,.4);
  text-transform:uppercase;
  margin-bottom:16px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.parts-nav-list{
  display:flex;
  flex-direction:column;
  gap:4px;
  max-height:300px;
  overflow-y:auto;
}
.part-btn{
  background:transparent;
  border:none;
  padding:10px 12px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.02em;
  color:rgba(0,0,0,.5);
  text-align:left;
  cursor:pointer;
  border-radius:2px;
  transition:background .2s, color .2s;
}
.part-btn:hover{
  background:rgba(0,0,0,.04);
  color:rgba(0,0,0,.8);
}
.part-btn.active{
  background:rgba(184,134,11,.1);
  color:#8b6914;
}

/* Bottom Tags Bar */
.structure-tags-bar{
  margin-top:32px;
  padding:20px 0 40px;
  border-top:1px solid rgba(0,0,0,.08);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.structure-tags-bar::-webkit-scrollbar{
  display:none;
}
.structure-tags-scroll{
  display:flex;
  gap:8px;
  min-width:max-content;
}
.structure-tag-item{
  padding:8px 16px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.04em;
  color:rgba(0,0,0,.5);
  background:rgba(0,0,0,.03);
  border:1px solid rgba(0,0,0,.1);
  border-radius:2px;
  cursor:pointer;
  white-space:nowrap;
  transition:all .2s;
}
.structure-tag-item:hover{
  background:rgba(0,0,0,.06);
  color:rgba(0,0,0,.8);
}
.structure-tag-item.active{
  background:#1a1a1a;
  border-color:#1a1a1a;
  color:#fff;
}
.diagram-part-item{
  flex:1 1 auto;
  min-width:120px;
  padding:12px 16px;
  font-size:12px;
  font-family:var(--mono);
  letter-spacing:.04em;
  color:var(--sub);
  text-align:center;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  transition:background .2s, color .2s;
}
.diagram-part-item:hover{
  background:var(--ink);
  color:#fff;
}
@media(min-width:640px){
  .diagram-part-item{
    min-width:auto;
    flex:1;
    border-bottom:none;
  }
  .diagram-part-item:last-child{
    border-right:none;
  }
}

/* ============================================================
   INDUSTRIES grid
   ============================================================ */
.ind-grid{
  display:grid; gap:1px;
  grid-template-columns:1fr;
  background:var(--line);
  border:1px solid var(--line);
}
@media(min-width:640px){ .ind-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px){ .ind-grid{ grid-template-columns:repeat(3,1fr); } }
.ind{
  position:relative;
  background:var(--paper);
  aspect-ratio:4/3;
  overflow:hidden;
  cursor:pointer;
  display:block;
}
.ind .img{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transition:transform .6s ease;
  filter:saturate(.7) contrast(1.05);
}
.ind:hover .img{ transform:scale(1.04); }
.ind::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(12,16,20,0) 0%,
    rgba(12,16,20,0) 40%,
    rgba(12,16,20,.88) 100%);
}
.ind-id{
  position:absolute; top:18px; left:18px; z-index:2;
  font-family:var(--mono); font-size:11px;
  color:#fff; letter-spacing:.1em; text-transform:uppercase;
  background:rgba(12,16,20,.6);
  backdrop-filter:blur(8px);
  padding:5px 9px;
  border:1px solid rgba(255,255,255,.18);
}
.ind-arrow{
  position:absolute; top:18px; right:18px; z-index:2;
  width:32px; height:32px;
  background:rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink);
  transition:background .15s, color .15s;
}
.ind-arrow svg{ width:14px; height:14px; }
.ind:hover .ind-arrow{ background:var(--blue); color:#fff; }
.ind-meta{
  position:absolute; left:22px; right:22px; bottom:22px; z-index:2;
  color:#fff;
}
.ind-meta .e{
  font-family:var(--mono); font-size:11px;
  color:rgba(255,255,255,.7); letter-spacing:.1em; text-transform:uppercase;
  margin-bottom:8px;
}
.ind-meta h3{
  font-size:22px; font-weight:600;
  margin:0 0 6px;
  letter-spacing:-.01em;
}
.ind-meta p{
  font-size:13px; color:rgba(255,255,255,.78);
  margin:0; line-height:1.5;
}

/* ============================================================
   CASES — horizontal scroll
   ============================================================ */
.case-scroll{
  position:relative;
  /* full-bleed so the track can run edge-to-edge */
  margin-left: calc(-1 * var(--pad));
  margin-right: calc(-1 * var(--pad));
}
.case-scroll-track{
  display:flex;
  gap:24px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type: x proximity;
  scroll-behavior:smooth;
  padding: 4px var(--pad) 28px;
  /* hide native scrollbar — we render our own progress bar below */
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.case-scroll-track::-webkit-scrollbar{ display:none; }

.case-scroll-track .case{
  flex: 0 0 clamp(280px, 32vw, 380px);
  scroll-snap-align: start;
  background:var(--paper);
  border:1px solid var(--line);
  display:flex; flex-direction:column;
  transition: border-color .15s;
}
.case-scroll-track .case:hover{ border-color: var(--ink); }

/* placeholder visual */
.case.is-placeholder .case-img{
  background:var(--bg);
}
.case.is-placeholder{
  border-style:dashed;
  border-color: var(--line-2);
}
.case-placeholder{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:12px;
  color:var(--mute);
  background-image:
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size: 28px 28px;
}
.case-placeholder svg{
  width:44px; height:44px;
  color:var(--ink-soft);
  opacity:.55;
}
.case-placeholder .ph-cap{
  font-size:10px;
  color:var(--blue);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.case-body .ph-title{
  color:var(--mute);
  font-style:italic;
  font-weight:500;
}
.case-spec dd.ph,
.case-feat .ph{
  color:var(--mute);
  font-style:italic;
}

/* scroll bar + nav strip */
.case-scroll-bar{
  margin: 0 var(--pad);
  height:2px;
  background:var(--line);
  position:relative;
  overflow:hidden;
}
.case-scroll-progress{
  position:absolute;
  top:0; left:0;
  height:100%;
  background:var(--blue);
  width:0%;
  transition: width .12s ease;
}
/* Navigation arrows */
.case-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--paper);
  border:1px solid var(--line);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10;
  transition:all .2s ease;
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
}
.case-nav:hover{
  background:var(--ink);
  border-color:var(--ink);
}
.case-nav:hover svg{
  stroke:var(--paper);
}
.case-nav svg{
  width:20px;
  height:20px;
  stroke:var(--ink);
  transition:stroke .2s ease;
}
.case-nav-prev{
  left:8px;
}
.case-nav-next{
  right:8px;
}
@media(min-width:768px){
  .case-nav{
    width:56px;
    height:56px;
  }
  .case-nav svg{
    width:24px;
    height:24px;
  }
  .case-nav-prev{
    left:16px;
  }
  .case-nav-next{
    right:16px;
  }
}
.case-scroll-nav{
  display:flex; align-items:center;
  justify-content:flex-end;
  gap:16px;
  margin: 18px var(--pad) 0;
}
.case-scroll-count{
  font-size:11px;
  color:var(--mute);
  letter-spacing:.06em; text-transform:uppercase;
}
.case-scroll-count span{ color:var(--ink); font-weight:600; }
.case-scroll-count b{ color:var(--ink); font-weight:600; }
.case-scroll-btns{
  display:flex; gap:8px;
}
.case-btn{
  width:40px; height:40px;
  border:1px solid var(--line-2);
  background:var(--paper);
  color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition: background .15s, color .15s, border-color .15s;
}
.case-btn:hover{
  background:var(--ink);
  color:#fff;
  border-color:var(--ink);
}
.case-btn:disabled{
  opacity:.3;
  cursor:not-allowed;
}
.case-btn:disabled:hover{
  background:var(--paper);
  color:var(--ink);
  border-color:var(--line-2);
}
.case-btn svg{ width:14px; height:14px; }

/* ============================================================
   CASES (legacy grid — kept for compatibility, not used now)
   ============================================================ */
.case-grid{
  display:grid; gap:24px;
  grid-template-columns:1fr;
}
@media(min-width:780px){ .case-grid{ grid-template-columns:repeat(3,1fr); } }
.case{
  background:var(--paper);
  border:1px solid var(--line);
  display:flex; flex-direction:column;
}
.case-img{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.case-img img{ width:100%; height:100%; object-fit:cover; filter:saturate(.85); }
.case-tag{
  position:absolute; top:14px; left:14px;
  font-family:var(--mono); font-size:11px;
  background:var(--ink); color:#fff;
  padding:4px 9px; letter-spacing:.1em;
}
.case-body{ padding:24px 24px 26px; }
.case-body h3{
  font-size:18px; font-weight:600;
  margin:0 0 16px;
  letter-spacing:-.005em;
}
.case-spec{
  margin:0 0 16px; padding:0;
  display:grid; grid-template-columns:60px 1fr;
  gap:6px 14px;
}
.case-spec dt{
  font-family:var(--mono); font-size:11px;
  color:var(--mute); letter-spacing:.08em; text-transform:uppercase;
  padding-top:2px;
}
.case-spec dd{
  margin:0; font-size:13.5px; color:var(--ink-soft);
}
.case-feat{
  padding-top:14px;
  border-top:1px solid var(--line-soft);
  font-size:13px; color:var(--sub); line-height:1.6;
}
.case-feat b{
  color:var(--blue); font-weight:600;
  display:block; margin-bottom:4px;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.08em; text-transform:uppercase;
}

/* ============================================================
   OTHER products (悬臂吊 / 智能提升机 / 工业机器人 / 框架)
   ============================================================ */
.other-grid {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: var(--paper);
}

@media (min-width: 760px) {
  .other-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .other-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.other {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.other:hover {
  box-shadow: inset 0 0 0 1px var(--ink);
}

.other-img {
  width: 100%;
  height: 220px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

@media (min-width: 1100px) {
  .other-img {
    height: 200px;
  }
}

.other-body {
  padding: 24px 24px 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.other-id {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--blue);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.other h4 {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 10px 0;
}

.other p {
  font-size: 13px;
  color: var(--sub);
  line-height: 1.6;
  margin: 0;
}

/* ============================================================
   WHY (advantages) — dark section
   ============================================================ */
.dark .shead-title h2{ color:#fff; }
.dark .shead-title h2 em{ color:var(--signal); }
.dark .shead{ border-color:#232830; }
.dark .shead-lede{ color:#a8aab0; border-color:#2d333c; }
.dark .shead-num{ color:#6c7079; }
.dark .shead-num b{ color:#dcdcd8; }
.dark .eyebrow{ color:var(--signal); }

.why-grid{
  display:grid; gap:0;
  grid-template-columns:1fr;
  border:1px solid #232830;
  background:#11161c;
}
@media(min-width:780px){ .why-grid{ grid-template-columns:repeat(2,1fr); } }
.why-item{
  padding:36px 32px 40px;
  border-right:1px solid #232830;
  border-bottom:1px solid #232830;
}
.why-item:nth-child(2n){ border-right:0; }
.why-item:nth-last-child(-n+2){ border-bottom:0; }
@media(max-width:779px){
  .why-item{ border-right:0; }
  .why-item:nth-last-child(-n+2){ border-bottom:1px solid #232830; }
  .why-item:last-child{ border-bottom:0; }
}
.why-num{
  font-family:var(--mono); font-size:13px;
  color:var(--signal); letter-spacing:.08em;
  margin-bottom:18px;
}
.why-item h4{
  font-size:21px; font-weight:600;
  margin:0 0 10px;
  letter-spacing:-.01em;
  color:#fff;
}
.why-item p{
  font-size:14px; color:#a8aab0; line-height:1.65;
  margin:0;
}

/* ============================================================
   CTA SECTION - 准备好提升生产效率了吗
   ============================================================ */
.cta-section{
  padding:96px 0 120px;
  background:var(--bg);
}
.cta-card{
  position:relative;
  border:1px solid var(--ink);
  background:var(--paper);
  overflow:hidden;
}
.cta-spotlight{
  position:absolute;
  inset:0;
  opacity:0.08;
  pointer-events:none;
  transition:opacity .3s;
}
.cta-content{
  position:relative;
  z-index:10;
  display:flex;
  flex-direction:column;
  padding:48px 32px;
  gap:48px;
}
@media(min-width:1024px){
  .cta-content{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    padding:80px 64px;
    gap:64px;
  }
}
.cta-left{
  flex:1;
  max-width:640px;
}
.cta-title{
  font-size:clamp(36px,5vw,60px);
  font-weight:500;
  line-height:0.95;
  letter-spacing:-0.025em;
  margin:0 0 32px;
  color:var(--ink);
}
.cta-desc{
  font-size:18px;
  line-height:1.65;
  color:var(--sub);
  margin:0 0 40px;
  max-width:520px;
}
.cta-buttons{
  display:flex;
  flex-direction:column;
  gap:16px;
}
@media(min-width:560px){
  .cta-buttons{
    flex-direction:row;
    align-items:center;
  }
}
.btn-cta-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:var(--ink);
  color:#fff;
  padding:18px 32px;
  font-size:15px;
  font-weight:500;
  border-radius:50px;
  border:none;
  cursor:pointer;
  transition:background .2s, transform .2s;
}
.btn-cta-primary:hover{
  background:#333;
}
.btn-cta-primary svg{
  width:16px;
  height:16px;
  transition:transform .2s;
}
.btn-cta-primary:hover svg{
  transform:translateX(4px);
}
.btn-cta-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:transparent;
  color:var(--ink);
  padding:18px 32px;
  font-size:15px;
  font-weight:500;
  border-radius:50px;
  border:1px solid var(--line-2);
  cursor:pointer;
  transition:background .2s, border-color .2s;
}
.btn-cta-outline:hover{
  background:var(--bg);
  border-color:var(--ink);
}
.btn-cta-outline svg{
  width:16px;
  height:16px;
}
.cta-note{
  margin-top:32px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.05em;
  color:var(--mute);
}
.cta-right{
  display:none;
}
@media(min-width:1024px){
  .cta-right{
    display:flex;
    align-items:center;
    justify-content:center;
    width:500px;
    height:500px;
    margin-right:-64px;
  }
}
.cta-canvas{
  width:100%;
  height:100%;
  display:block;
}
.cta-corner{
  position:absolute;
  width:80px;
  height:80px;
}
.cta-corner-tr{
  top:0;
  right:0;
  border-bottom:1px solid var(--line);
  border-left:1px solid var(--line);
}
.cta-corner-bl{
  bottom:0;
  left:0;
  border-top:1px solid var(--line);
  border-right:1px solid var(--line);
}

/* ============================================================
   FOOTER — New design with wave animation
   ============================================================ */
.footer{
  position:relative;
  background:var(--paper);
  color:var(--sub);
  border-top:1px solid var(--line);
  font-size:14px;
  line-height:1.6;
  overflow:hidden;
}
.footer-wave{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:320px;
  opacity:0.25;
  pointer-events:none;
  overflow:hidden;
}
.wave-canvas{
  width:100%;
  height:100%;
  display:block;
}
.footer-container{
  position:relative;
  z-index:10;
}
.footer-main{
  display:grid;
  grid-template-columns:1fr;
  gap:48px;
  padding:56px 0 40px;
  border-bottom:1px solid var(--line);
}
@media(min-width:780px){
  .footer-main{
    grid-template-columns:2fr 3fr;
    gap:48px;
  }
}
.footer-brand-col{
  max-width:320px;
}
.footer-logo{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:16px;
}
.footer-logo-text{
  font-size:20px;
  font-weight:500;
  color:var(--ink);
  letter-spacing:-.01em;
}
.footer-brand-desc{
  font-size:13px;
  color:var(--mute);
  line-height:1.7;
  margin:0 0 20px;
}
.footer-contact-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.footer-contact-item{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:12px;
  color:var(--mute);
  transition:color .15s;
}
a.footer-contact-item:hover{
  color:var(--ink);
}
.footer-contact-item svg{
  width:14px;
  height:14px;
  margin-top:2px;
  flex-shrink:0;
  stroke:var(--mute);
}
a.footer-contact-item:hover svg{
  stroke:var(--ink);
}
.footer-links{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:32px 24px;
}
@media(min-width:980px){
  .footer-links{
    grid-template-columns:repeat(4,1fr);
    gap:24px;
  }
}
.footer-col h5{
  font-size:12px;
  font-weight:500;
  color:var(--ink);
  margin:0 0 16px;
}
.footer-col a{
  display:block;
  font-size:12px;
  color:var(--mute);
  padding:4px 0;
  transition:color .15s;
}
.footer-col a:hover{
  color:var(--ink);
}
.footer-col a.with-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.footer-col .badge{
  font-size:10px;
  padding:2px 8px;
  background:var(--ink);
  color:var(--paper);
  border-radius:20px;
  font-weight:500;
}
.footer-bottom{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:20px 0;
  text-align:center;
  font-size:12px;
  border-top:1px solid var(--line);
}
@media(min-width:780px){
  .footer-bottom{
    flex-direction:row;
    justify-content:space-between;
    text-align:left;
  }
}
.footer-bottom-left{
  display:flex;
  align-items:center;
  gap:8px;
}
.footer-company{
  color:var(--ink);
}
.footer-sep{
  color:var(--line-2);
}
.footer-company-en{
  color:var(--mute);
}
.footer-copyright{
  color:var(--mute);
  margin:0;
}
.footer-icp{
  color:var(--mute);
  transition:color .15s;
}
.footer-icp:hover{
  color:var(--ink);
}
  margin-right:4px;
  opacity:.7;
}

/* ============================================================
   Reveal on scroll
   ============================================================ */
.reveal{
  opacity:0; transform:translateY(20px);
  transition:opacity .9s ease, transform .9s ease;
}
.reveal.in{ opacity:1; transform:none; }

/* ============================================================
   Responsive — mobile nav
   ============================================================ */
@media(max-width:920px){
  .nav-menu{
    position:fixed; top:64px; left:0; right:0;
    background:var(--paper);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    flex-direction:column; align-items:stretch;
    padding:8px 0;
    transform:translateY(-110%);
    transition:transform .25s;
    margin:0;
  }
  .nav-menu.open{ transform:translateY(0); }
  .nav-menu a{ padding:14px var(--pad); border-bottom:1px solid var(--line-soft); }
  .nav-menu a.active::after{ display:none; }
  .nav-spec{ display:none; }
  .nav-toggle{
    display:flex; align-items:center; justify-content:center;
    width:36px; height:36px;
    margin-left:auto;
    border:1px solid var(--line-2);
  }
  .nav-toggle span,
  .nav-toggle span::before,
  .nav-toggle span::after{
    content:""; display:block;
    width:16px; height:1.5px; background:var(--ink);
    position:relative;
  }
  .nav-toggle span::before{ position:absolute; top:-5px; left:0; }
  .nav-toggle span::after{ position:absolute; top:5px; left:0; }
  .nav-cta{ display:none; }
}