/* ═══════════════════════════════════════════════════════════════════════════
   阡视科技 QIANSHI TECH — Landing Page
   Design language: Deep-space precision. Slate-navy void, mint signal.
   Palette derived from the brand marks:
     · #222E3A  corporate mark ink      → surface family
     · #7F9EB1 → #AEBECC mark gradient  → steel neutrals
     · #8AEFDC  WYLON accent dot        → signature accent
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────── TOKENS ───────────────────────────────── */
:root {
  /* surfaces */
  --void:       #05080d;
  --bg:         #070b11;
  --surface:    #0a1018;
  --panel:      #0e1621;
  --card:       #121b27;
  --card-hi:    #18232f;

  /* hairlines */
  --hair:       rgba(var(--steel-rgb), .10);
  --hair-2:     rgba(var(--steel-rgb), .17);
  --hair-3:     rgba(var(--steel-rgb), .28);

  /* ink */
  --ink:        #eef3f9;
  --ink-2:      #9dadc0;
  --ink-3:      #64748b;

  /* brand */
  --mint:       #8aefdc;
  --mint-deep:  #34c9ac;
  --steel:      #a8bfd0;
  --steel-dim:  #7f9eb1;
  --blue:       #3d7bff;
  --blue-hi:    #6b9bff;

  /* type */
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'HarmonyOS Sans SC',
          'Source Han Sans SC', 'Noto Sans SC', 'Microsoft YaHei', 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
          'Liberation Mono', monospace;

  /* rhythm */
  --gut:        clamp(20px, 4vw, 48px);
  --maxw:       1440px;   /* matches wylon.cn */
  --sec-y:      clamp(88px, 11vw, 168px);
  --r-sm:       4px;
  --r:          8px;
  --r-lg:       14px;

  /* triplets so every rgba(...) below can flip with the theme */
  --mint-rgb:   138, 239, 220;
  --steel-rgb:  160, 190, 214;
  --blue-rgb:   61, 123, 255;
  --tint-rgb:   255, 255, 255;   /* the "lift" overlay: white on dark, ink on light */
  --shadow-rgb: 0, 0, 0;

  --ease:       cubic-bezier(.22, 1, .36, 1);

  /* where an anchored heading should land, measured from the viewport top
     (68px nav + 28px breathing room) */
  --anchor-y:   96px;
  --cta-y:      clamp(88px, 10vw, 150px);
}


/* ═══════════════════════════════ LIGHT THEME ══════════════════════════════
   Same structure, inverted ground. Only tokens change — every component reads
   from them, so no component rules are duplicated here.
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  --void:       #eef1f6;
  --bg:         #f6f8fb;
  --surface:    #ffffff;
  --panel:      #f4f7fa;
  --card:       #ffffff;
  --card-hi:    #eef3f8;

  --hair:       rgba(19, 42, 71, .12);
  --hair-2:     rgba(19, 42, 71, .20);
  --hair-3:     rgba(19, 42, 71, .32);

  --ink:        #0c1722;
  --ink-2:      #45586d;
  --ink-3:      #6f8296;

  /* the signature mint is far too light on white — darken it for anything that
     has to read as text or a line, and keep a bright one for glows/fills */
  --mint:       #0b8f74;
  --mint-rgb:   11, 143, 116;
  --mint-deep:  #06705b;
  --steel:      #4a6076;
  --steel-dim:  #5d7288;
  --steel-rgb:  74, 100, 130;
  --blue:       #2563eb;
  --blue-hi:    #1d4ed8;
  --blue-rgb:   37, 99, 235;

  /* overlays darken instead of lifting, and shadows go slate rather than black */
  --tint-rgb:   16, 34, 56;
  --shadow-rgb: 24, 45, 74;

  color-scheme: light;
}

[data-theme="light"] .ab-geo__dots { content: url('../img/china-dots-light.svg'); }
[data-theme="light"] .line__shot--split .line__half:first-child,
[data-theme="light"] .fam__card .fam__shot img[src*="cloud-token-factory"] { content: url('../img/products/cloud-token-factory-light.svg'); }
/* product renders are dark hardware on transparent — give them a soft plate
   so they do not float unanchored on white */
[data-theme="light"] .line__shot::after,
[data-theme="light"] .fam__shot::after,
[data-theme="light"] .spec__shot::after {
  background: radial-gradient(closest-side, rgba(var(--shadow-rgb), .16), transparent 74%);
}
/* pieces that are explicitly "glow on a dark ground" need a light counterpart */
[data-theme="light"] body { background: var(--bg); }
[data-theme="light"] .hero {
  background:
    radial-gradient(120% 80% at 78% 30%, rgba(var(--blue-rgb), .10) 0%, transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #f4f8fc 55%, var(--bg) 100%);
}
[data-theme="light"] .page-hero {
  background:
    radial-gradient(90% 120% at 22% 0%, rgba(var(--blue-rgb), .10) 0%, transparent 58%),
    radial-gradient(60% 90% at 88% 30%, rgba(var(--mint-rgb), .10) 0%, transparent 62%),
    linear-gradient(180deg, #ffffff, var(--surface));
}
[data-theme="light"] .cta {
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(var(--blue-rgb), .10) 0%, transparent 58%),
    radial-gradient(60% 80% at 78% 110%, rgba(var(--mint-rgb), .09) 0%, transparent 60%),
    var(--surface);
}
[data-theme="light"] .nav.is-stuck { background: rgba(255,255,255,.82); }
[data-theme="light"] .mobile-menu { background: rgba(255,255,255,.97); }
[data-theme="light"] .submenu,
[data-theme="light"] .jd {
  background: linear-gradient(180deg, #ffffff, #f4f7fa);
  border-color: rgba(19,42,71,.16);
  box-shadow: 0 30px 70px -28px rgba(var(--shadow-rgb), .28), 0 1px 0 rgba(255,255,255,.9) inset;
}
[data-theme="light"] .trust { background: rgba(255,255,255,.62); }
[data-theme="light"] .pillar__viz { background: rgba(19,42,71,.035); }
[data-theme="light"] .vinds li { background: var(--card); }
[data-theme="light"] .rack__chrome::before {
  background: radial-gradient(58% 58% at 50% 45%, rgba(var(--mint-rgb), .16), transparent 72%);
}
[data-theme="light"] .foot { background: var(--void); }
/* the saturated royal blue reads loud against a soft light ground; on white the
   primary action goes to the brand mark's own slate ink (#222E3A family), which
   keeps the mint free to stay the one accent */
[data-theme="light"] .btn--primary {
  color: #fff;
  background: linear-gradient(180deg, #2a3f55, #1a2c3e);
  box-shadow: 0 1px 0 rgba(255,255,255,.16) inset, 0 6px 18px -8px rgba(26,44,62,.55);
}
[data-theme="light"] .btn--primary:hover {
  background: linear-gradient(180deg, #334b63, #223649);
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 10px 26px -8px rgba(26,44,62,.65);
}
/* keep the hero highlight gradient on blue — it is type, not a control */
[data-theme="light"] .grad {
  background: linear-gradient(96deg, var(--mint) 0%, #2f7fb8 52%, #2b4d7e 100%);
  -webkit-background-clip: text; background-clip: text;
}
/* vendor marks are solid black artwork — do not invert them on a light ground */
[data-theme="light"] .eco__logos img { filter: none; opacity: .55; }
[data-theme="light"] .eco__logos li:hover img { opacity: 1; }
/* the corporate mark is white artwork; swap to the dark-ink version */
[data-theme="light"] .nav__brand img,
[data-theme="light"] .foot__brand img { content: url('../img/logos/qianshi-on-light.png'); }

/* ────────────────────────────────── RESET ───────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--void);
}

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
sup { font-size: .5em; vertical-align: super; line-height: 0; letter-spacing: 0; }
/* the ® must not inherit the wide tracking of mono runs */
.mono sup, .tag sup, .btn sup,
.mm__sub a sup, .submenu__t sup, .eco__sys b sup { font-size: .6em; margin-left: -.14em; margin-right: .06em; }

::selection { background: rgba(var(--mint-rgb), .24); color: #fff; }

:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 999;
  padding: 10px 18px; background: var(--mint); color: #04120f;
  font-weight: 600; border-radius: var(--r-sm);
  transform: translateY(-160%); transition: transform .2s var(--ease);
}
.skip-link:focus { transform: none; }


/* ─────────────────────────────── PRIMITIVES ─────────────────────────────── */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.section   {
  padding-block: var(--sec-y); position: relative;
  scroll-margin-top: calc(var(--anchor-y) - var(--sec-y));
}

.mono {
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-feature-settings: 'ss01';
}

.h2 {
  font-size: clamp(2rem, 3.9vw, 3.4rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.022em;
  color: var(--ink);
}
/* status qualifier inside a display heading — at full h2 size it would read as
   part of the product name rather than a state */
.h2__status {
  font-size: .4em; font-weight: 600; letter-spacing: 0;
  vertical-align: .22em; margin-left: .18em;
  color: var(--steel-dim);
}
.h2__status--ship { color: var(--mint); }

.h3 {
  font-size: clamp(1.25rem, 1.9vw, 1.75rem);
  font-weight: 700; line-height: 1.35; letter-spacing: -.015em;
  color: var(--ink);
}
.lede {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--ink-2);
  max-width: 60ch;
  margin-top: 22px;
  text-wrap: pretty;          /* avoids single-word orphans on the last line */
}
.lede--sm { font-size: .9375rem; color: var(--ink-3); margin-top: 16px; }
.grad {
  background: linear-gradient(96deg, var(--mint) 0%, #b9e4ff 48%, var(--blue-hi) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.sec-head { margin-bottom: clamp(48px, 6vw, 76px); }
.sec-head--center { text-align: center; margin-inline: auto; max-width: 780px; }
/* centred copy is short enough for the balancer — evens the ragged last line */
.sec-head--center .lede { margin-inline: auto; text-wrap: balance; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  height: 46px; padding-inline: 24px;
  font-size: .9375rem; font-weight: 600; letter-spacing: .01em;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background .22s var(--ease), border-color .22s var(--ease),
              color .22s var(--ease), box-shadow .28s var(--ease), transform .22s var(--ease);
}
.btn svg { width: 15px; height: 15px; transition: transform .28s var(--ease); }
.btn:hover svg { transform: translateX(3px); }

.btn--primary {
  background: linear-gradient(180deg, #4b86ff, var(--blue));
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 6px 20px -8px rgba(var(--blue-rgb), .7);
}
.btn--primary:hover {
  background: linear-gradient(180deg, #5c91ff, #3f7dff);
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 10px 30px -8px rgba(var(--blue-rgb), .85);
  transform: translateY(-1px);
}
.btn--ghost {
  border-color: var(--hair-2);
  color: var(--ink);
  background: rgba(var(--tint-rgb), .02);
}
.btn--ghost:hover {
  border-color: rgba(var(--mint-rgb), .5);
  background: rgba(var(--mint-rgb), .06);
  color: #fff;
}
.btn--sm { height: 36px; padding-inline: 16px; font-size: .8125rem; }
.btn--lg { height: 54px; padding-inline: 32px; font-size: 1rem; }

/* chips / tags */
.tag {
  display: inline-block; padding: 4px 9px;
  border: 1px solid var(--hair-2); border-radius: 3px;
  color: var(--steel-dim); background: rgba(var(--tint-rgb), .02);
}
.tag--accent { color: var(--mint); border-color: rgba(var(--mint-rgb), .32); background: rgba(var(--mint-rgb), .06); }

.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
.chips li {
  font-size: .75rem; font-weight: 500; color: var(--steel-dim);
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--hair); background: rgba(var(--tint-rgb), .02);
}

/* reveal */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.in {
  opacity: 1; transform: none;
  transition: opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
}

/* ────────────────────────────────── NAV ─────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 100;
  transition: background .35s var(--ease), backdrop-filter .35s var(--ease),
              border-color .35s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(7, 11, 17, .78);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom-color: var(--hair);
}
.nav__inner {
  max-width: var(--maxw); margin-inline: auto;
  padding: 0 var(--gut);
  height: 68px;
  /* 1fr | auto | 1fr keeps the links dead-centre in the viewport whatever the
     brand mark and CTA measure — a flex row would centre them between the two. */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
}
.nav__brand img { height: 26px; width: auto; }
.nav__brand { flex: none; opacity: .96; transition: opacity .2s; }
.nav__brand:hover { opacity: 1; }

.nav__links { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 2.2vw, 32px); }
.nav__item, .nav__trigger {
  position: relative; display: inline-flex; align-items: center; gap: 5px;
  font-size: .875rem; font-weight: 500; color: var(--ink-2);
  padding-block: 6px; white-space: nowrap;
  transition: color .2s var(--ease);
}
.nav__item::after, .nav__trigger::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--mint);
  transform: scaleX(0); transform-origin: left;
  transition: transform .34s var(--ease);
}
a.nav__item:hover, .nav__trigger:hover { color: var(--ink); }
a.nav__item:hover::after, .nav__trigger:hover::after,
.nav__item--has-menu.is-open .nav__trigger::after { transform: scaleX(1); }
.nav__item[aria-current="page"] { color: var(--ink); }
.nav__item[aria-current="page"]::after { transform: scaleX(1); background: var(--hair-3); }
/* 解决方案 / 公司动态 have no destination yet — present, but not pretending */
.nav__item--static { color: var(--ink-3); cursor: default; }
.nav__item--static::after { display: none; }

.nav__trigger svg { width: 9px; height: 6px; opacity: .7; transition: transform .3s var(--ease); }
/* the wrapper is a div around the trigger button — if it keeps .nav__item
   padding it stacks on the button's own and the item sits 6px taller than
   its siblings, pushing its underline out of line */
.nav__item--has-menu { position: relative; padding: 0; }
.nav__item--has-menu::after { display: none; }
.nav__item--has-menu.is-open .nav__trigger svg { transform: rotate(180deg); }

.submenu {
  position: absolute; top: calc(100% + 18px); left: 50%;
  transform: translate(-50%, -6px);
  min-width: 384px; padding: 10px;
  border: 1px solid rgba(var(--steel-rgb), .22); border-radius: var(--r-lg);
  /* a clearly lighter panel — at rgba(10,16,24,.96) it read as a hole in the
     page rather than a surface floating above it */
  background: linear-gradient(180deg, rgba(32, 46, 62, .97), rgba(23, 34, 47, .97));
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  box-shadow: 0 30px 70px -28px rgba(var(--shadow-rgb), .9), 0 1px 0 rgba(var(--tint-rgb), .06) inset;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .24s var(--ease), transform .24s var(--ease), visibility .24s;
}
.nav__item--has-menu.is-open .submenu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
/* keeps the pointer inside the item while travelling down to the panel */
.nav__item--has-menu::before {
  content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 20px;
}
.submenu a {
  display: block; padding: 14px 18px; border-radius: var(--r);
  transition: background .2s var(--ease);
}
.submenu a:hover { background: rgba(var(--mint-rgb), .10); }
.submenu__t { display: block; font-size: .9375rem; font-weight: 600; color: var(--ink); }
.submenu__d { display: block; margin-top: 5px; font-size: .8125rem; line-height: 1.55; color: var(--ink-2); }
.submenu a:hover .submenu__t { color: var(--mint); }

.nav__actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
/* secondary entry — sits with the CTA, not in the main nav */
.nav__aux {
  position: relative; font-size: .875rem; font-weight: 500; color: var(--ink-2);
  padding-block: 6px; white-space: nowrap; transition: color .2s var(--ease);
}
.nav__aux::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--mint); transform: scaleX(0); transform-origin: left;
  transition: transform .34s var(--ease);
}
.nav__aux:hover { color: var(--ink); }
.nav__aux:hover::after, .nav__aux[aria-current="page"]::after { transform: scaleX(1); }
.nav__aux[aria-current="page"] { color: var(--ink); }


/* ── theme toggle ───────────────────────────────────────────────────────── */
.themetog {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; border-radius: var(--r-sm);
  color: var(--ink-2); background: transparent;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.themetog:hover { color: var(--mint); background: rgba(var(--mint-rgb), .07); }
.themetog svg { width: 16px; height: 16px; grid-area: 1 / 1; transition: opacity .2s var(--ease), transform .3s var(--ease); }
.themetog__sun  { opacity: 0; transform: rotate(-40deg) scale(.7); }
.themetog__moon { opacity: 1; }
[data-theme="light"] .themetog__sun  { opacity: 1; transform: none; }
[data-theme="light"] .themetog__moon { opacity: 0; transform: rotate(40deg) scale(.7); }
@media (max-width: 620px) { .themetog { width: 30px; height: 30px; } }

.nav__toggle {
  display: none; width: 40px; height: 40px;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
  margin-right: -8px;
}
.nav__toggle span {
  display: block; width: 20px; height: 1.5px; background: var(--ink);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

.nav__progress {
  height: 1px; width: 100%;
  background: linear-gradient(90deg, var(--mint), var(--blue));
  transform: scaleX(0); transform-origin: left;
}

/* mobile menu */
[hidden] { display: none !important; }
.mobile-menu {
  position: fixed; inset: 68px 0 0; z-index: 99;
  background: rgba(5, 8, 13, .97);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  padding: 40px var(--gut) 32px;
  display: flex; flex-direction: column; justify-content: space-between;
  animation: mmIn .3s var(--ease);
}
@keyframes mmIn { from { opacity: 0; transform: translateY(-8px); } }
.mobile-menu nav { display: flex; flex-direction: column; }
.mobile-menu a {
  display: flex; align-items: baseline; gap: 16px;
  padding: 20px 0;
  font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink);
  border-bottom: 1px solid var(--hair);
}
.mm__idx { font-family: var(--mono); font-size: .6875rem; color: var(--mint); letter-spacing: .12em; }
.mobile-menu .mm__static {
  display: flex; align-items: baseline; gap: 16px; padding: 20px 0;
  font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink-3);
  border-bottom: 1px solid var(--hair);
}
.mm__sub { display: flex; flex-direction: column; padding: 4px 0 14px 38px; }
.mobile-menu .mm__sub a {
  padding: 9px 0; font-size: .9375rem; font-weight: 500;
  color: var(--ink-2); border-bottom: 0;
}
.mobile-menu .mm__sub a:hover { color: var(--mint); }
.mobile-menu__foot { display: flex; justify-content: space-between; color: var(--ink-3); }

/* ────────────────────────────────── HERO ────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: 104px;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 78% 30%, rgba(21, 42, 66, .55) 0%, transparent 62%),
    linear-gradient(180deg, #060a10 0%, #070c13 55%, var(--bg) 100%);
}
/* The fabric is dimmed — not erased — behind the headline: it keeps the depth
   without ever competing with the type for contrast. */
.hero__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  mask-image: linear-gradient(92deg, transparent 2%, rgba(var(--shadow-rgb), .28) 26%, #000 54%);
  -webkit-mask-image: linear-gradient(92deg, transparent 2%, rgba(var(--shadow-rgb), .28) 26%, #000 54%);
}
.hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(var(--steel-rgb), .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--steel-rgb), .045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(110% 85% at 50% 35%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(110% 85% at 50% 35%, #000 20%, transparent 78%);
}
.hero__glow {
  position: absolute; left: -12%; top: 4%;
  width: 780px; height: 780px; max-width: 90vw;
  background: radial-gradient(circle, rgba(var(--blue-rgb), .16) 0%, transparent 66%);
  filter: blur(20px);
  pointer-events: none;
}
.hero__scanline {
  position: absolute; inset-inline: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--mint-rgb), .5), transparent);
  animation: scan 9s linear infinite;
  opacity: .55;
}
@keyframes scan { 0% { transform: translateY(6vh); } 100% { transform: translateY(94vh); } }

.hero__inner {
  position: relative; z-index: 2;
  /* Centred, then biased upward by the extra bottom padding — the block reads
     as sitting in the upper-middle of the frame rather than resting on the
     trust strip. */
  padding-bottom: clamp(24px, 4vh, 52px);
  flex: 1; display: flex; flex-direction: column; justify-content: center;
}
.hero__title {
  font-size: clamp(2.6rem, 6.4vw, 5.4rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.032em;
  color: var(--ink);
  max-width: 17ch;
  text-wrap: balance;
}
.hero__lede {
  margin-top: 28px;
  font-size: clamp(1rem, 1.28vw, 1.1875rem);
  line-height: 1.8;
  color: var(--ink-2);
  max-width: 56ch;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }

/* trust strip */
.trust {
  position: relative; z-index: 2;
  border-top: 1px solid var(--hair);
  background: rgba(5, 8, 13, .5);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.trust__inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px clamp(24px, 4vw, 56px);
  padding-block: 20px;
}
.trust__item {
  display: flex; align-items: center; gap: 10px;
  font-size: .8125rem; color: var(--ink-2); letter-spacing: .01em;
}
.trust__item b { color: var(--ink); font-weight: 600; }
.trust__ico { width: 17px; height: 17px; color: var(--mint); flex: none; }
.trust__item--iso { margin-left: auto; gap: 8px; }
.trust__item--iso .mono { color: var(--ink-3); font-size: .625rem; letter-spacing: .1em; }
.trust__item--iso .mono + .mono::before { content: '·'; margin-right: 8px; opacity: .55; }

/* ──────────────────────────────── FLAGSHIP ──────────────────────────────── */
.flagship { background: var(--surface); border-top: 1px solid var(--hair); }
.flagship::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(70% 46% at 80% 6%, rgba(52, 201, 172, .07), transparent 68%);
  pointer-events: none;
}
.flagship .container { position: relative; }
.flagship .sec-head .h2 {
  font-size: clamp(1.9rem, 6.4vw, 4rem);
  letter-spacing: -.035em;
  /* keep-all stops the CJK product name splitting mid-word — on a 360px screen
     it otherwise broke as「超节点系」/「统」, orphaning a single character.
     A break may now only fall on the space after the wordmark. */
  word-break: keep-all;
}

.flagship__body {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 4.5vw, 72px);
  /* stretch, not start: the rack grows to meet the taller spec column so the
     two halves finish level instead of leaving a ragged step */
  align-items: stretch;
}

/* rack */
.rack { display: flex; flex-direction: column; }
/* No card: the die field reads as part of the section itself, lit from within. */
.rack__chrome {
  flex: 1; display: flex; flex-direction: column;
  position: relative;
  padding: 0;
}
.rack__chrome::before {
  content: ''; position: absolute; inset: -6% -4% 14%;
  background: radial-gradient(58% 58% at 50% 45%, rgba(var(--mint-rgb), .10), transparent 72%);
  filter: blur(12px); pointer-events: none;
}

.rack__die {
  display: grid;
  position: relative;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(6px, .85vw, 11px);
  padding: 0;
  flex: 1;                 /* absorbs the slack; tiles stay square, block centres */
  align-content: center;
}
.rack__die i {
  position: relative;
  aspect-ratio: 1;
  border-radius: 3px;
  background: rgba(var(--mint-rgb), .05);
  border: 1px solid rgba(var(--mint-rgb), .13);
  transition: background .55s var(--ease), border-color .55s var(--ease),
              box-shadow .55s var(--ease), transform .55s var(--ease);
}
.rack__die i::after {
  content: ''; position: absolute; inset: 3px;
  border-radius: 2px;
  background: rgba(var(--mint-rgb), .08);
  transition: background .55s var(--ease), opacity .55s var(--ease);
}
.rack__die i.hot {
  background: rgba(var(--mint-rgb), .26);
  border-color: rgba(var(--mint-rgb), .8);
  box-shadow: 0 0 18px rgba(var(--mint-rgb), .4), 0 0 44px rgba(var(--mint-rgb), .16);
  transform: scale(1.04);
}
.rack__die i.hot::after { background: var(--mint); opacity: .9; }

.rack__bus { display: flex; flex-direction: column; gap: 4px; padding: 22px 0 18px; }
.rack__bus span {
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--mint-rgb), .35), transparent);
  background-size: 220% 100%;
  animation: bus 3.4s linear infinite;
}
.rack__bus span:nth-child(2) { animation-duration: 4.6s; animation-delay: -1.2s; opacity: .7; }
.rack__bus span:nth-child(3) { animation-duration: 5.8s; animation-delay: -2.4s; opacity: .45; }
@keyframes bus { from { background-position: 120% 0; } to { background-position: -120% 0; } }

.rack__meta {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hair);
  padding-top: 14px;
}
.rack__meta > div { padding-inline: 0; }
.rack__meta > div + div { border-left: 1px solid var(--hair); padding-left: 18px; }
.rack__meta dt { color: var(--ink-3); font-size: .5625rem; letter-spacing: .13em; }
.rack__meta dd { margin-top: 5px; font-size: .8125rem; font-weight: 600; color: var(--ink); }

/* specs */
.specs { display: grid; gap: 2px; align-content: start; }
/* homepage flagship rows. Renamed off .spec because the product pages use
   that name too, and the two rule sets were clobbering each other in both
   directions (.spec h3 even beat .spec__name on specificity). */
.fspec {
  position: relative;
  padding: 26px 26px 26px 0;
  border-top: 1px solid var(--hair);
  display: grid; grid-template-columns: 46px 1fr; column-gap: 4px;
}
.fspec:last-child { border-bottom: 1px solid var(--hair); }
.fspec__idx { grid-row: span 2; color: var(--mint); opacity: .8; padding-top: 4px; font-size: .625rem; }
.fspec h3 { font-size: 1.0625rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.fspec p { grid-column: 2; margin-top: 8px; font-size: .875rem; line-height: 1.75; color: var(--ink-3); }

/* pareto */
.pareto {
  margin-top: clamp(56px, 7vw, 96px);
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  /* the chart carries its own frame — a second one around the whole block
     would read as a card inside a card */
  padding: 0;
}
.pareto__copy p { font-size: .9375rem; line-height: 1.8; color: var(--ink-2); margin-top: 16px; }
.pareto__copy b { color: var(--ink); font-weight: 600; }


/* ── frontier chart ─────────────────────────────────────────────────────────
   Same reading as wylon.cn's 帕累托前沿 panel: three curves, the WYLON pair
   pushed out beyond the baseline, with the gap annotated as a multiplier.  */
.frontier {
  position: relative;
  padding: 26px clamp(18px, 2.4vw, 30px) 22px;
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  background:
    radial-gradient(circle at 82% 16%, rgba(var(--mint-rgb), .09), transparent 34%),
    linear-gradient(145deg, rgba(var(--mint-rgb), .03), transparent 62%),
    var(--card);
  overflow: hidden;
}
.frontier::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, rgba(var(--mint-rgb), .05) 1px, transparent 1px),
    linear-gradient(to top,   rgba(var(--mint-rgb), .04) 1px, transparent 1px);
  background-size: 96px 100%, 100% 64px;
  opacity: .55;
}
.frontier > * { position: relative; z-index: 1; }
.frontier__title {
  text-align: center; color: var(--ink);
  font-size: clamp(.9375rem, 1.35vw, 1.125rem); font-weight: 700; letter-spacing: -.015em;
  margin-bottom: 6px;
}
.frontier__chart { width: 100%; height: auto; overflow: visible; }

.fr-axis, .fr-grid, .fr-boost, .fr-tick { fill: none; }
.fr-axis  { stroke: rgba(var(--steel-rgb), .34); stroke-width: 1.15; }
.fr-grid  { stroke: rgba(var(--steel-rgb), .10); stroke-width: 1; }
.fr-tick  { stroke: rgba(var(--steel-rgb), .3); stroke-width: 1; }
.fr-arrow { fill: rgba(var(--steel-rgb), .5); }
.fr-area  { fill: url(#frArea); }

.fr-curve { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fr-curve--base { stroke: rgba(var(--steel-rgb), .5); stroke-width: 1.5; }
.fr-curve--q32  { stroke: #7882ff; stroke-width: 2.15; opacity: .9; }
.fr-curve--q72  {
  stroke: url(#frQ72); stroke-width: 3.2;
  filter: drop-shadow(0 6px 14px rgba(var(--mint-rgb), .28));
}

.fr-pt { fill: var(--card); stroke-width: 1.7; }
.fr-pt--base { stroke: rgba(var(--steel-rgb), .6); }
.fr-pt--q32  { stroke: #7882ff; }
.fr-pt--q72  { stroke: var(--mint); }

.fr-boost { stroke: var(--mint); stroke-width: 1.35; stroke-dasharray: 4 5; opacity: .72; }

.fr-mult {
  fill: var(--ink); font-size: 14px; font-weight: 700; letter-spacing: -.03em;
  paint-order: stroke; stroke: var(--card); stroke-width: 5px; stroke-linejoin: round;
}
.fr-mult--em { fill: var(--mint); font-size: 18px; }
.fr-axis-t { fill: var(--ink-3); font-size: 10.5px; letter-spacing: .02em; }

/* draw-in, keyed off the reveal state of the surrounding panel */
.fr-curve { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 920ms cubic-bezier(.16,1,.3,1); }
.fr-area, .fr-pt, .fr-boost, .fr-mult { opacity: 0; transition: opacity 420ms ease-out; }
.pareto.in .fr-curve { stroke-dashoffset: 0; }
.pareto.in .fr-curve--base { transition-delay: 160ms; }
.pareto.in .fr-curve--q32  { transition-delay: 340ms; }
.pareto.in .fr-curve--q72  { transition-delay: 460ms; }
.pareto.in .fr-area  { opacity: 1; transition-delay: 780ms; }
.pareto.in .fr-pt    { opacity: 1; transition-delay: 1000ms; }
.pareto.in .fr-boost { opacity: .72; transition-delay: 1180ms; }
.pareto.in .fr-mult  { opacity: 1; transition-delay: 1300ms; }

.frontier__legend {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px;
  margin-top: 14px; font-size: .8125rem; color: var(--ink-3);
}
.frontier__legend li { display: flex; align-items: center; gap: 8px; }
.frontier__legend i { width: 18px; height: 2.5px; border-radius: 2px; flex: none; }
.is-base i { background: rgba(var(--steel-rgb), .5); }
.is-q32  i { background: #7882ff; }
.is-q72  i { background: linear-gradient(90deg, var(--mint), #8a82ff); }

/* ──────────────────────────────── TRINITY ───────────────────────────────── */
.trinity { background: var(--bg); border-top: 1px solid var(--hair); }
/* the OS card spans the full width and sits above the two hardware axes it drives */
.trinity__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 1.8vw, 26px); }
.pillar--os {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(24px, 3.6vw, 56px); align-items: center;
}
/* beats the plain .pillar__viz height further down the sheet */
.pillar__viz.pillar__viz--wide {
  height: auto; aspect-ratio: 520 / 116; margin: 0;
}
.pillar--os__copy .chips { margin-top: 18px; }

.pillar {
  position: relative;
  padding: 30px;
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(var(--tint-rgb), .022), transparent 40%), var(--card);
  transition: border-color .35s var(--ease), transform .35s var(--ease), background .35s var(--ease);
  overflow: hidden;
}
.pillar::after {
  content: ''; position: absolute; inset-inline: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--mint-rgb), .7), transparent);
  opacity: 0; transition: opacity .4s var(--ease);
}
.pillar:hover { border-color: var(--hair-2); transform: translateY(-3px); background: linear-gradient(180deg, rgba(var(--tint-rgb), .03), transparent 40%), var(--card-hi); }
.pillar:hover::after { opacity: 1; }

.pillar__viz {
  height: 130px; margin: -8px -8px 22px;
  border-radius: var(--r);
  background: rgba(5,8,13,.5);
  border: 1px solid var(--hair);
  display: grid; place-items: center;
  color: var(--mint);
  overflow: hidden;
}
.viz { width: 100%; height: 100%; }
.viz--mesh  { color: var(--mint); }
.mesh-halo { animation: meshBreathe 4.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes meshBreathe {
  0%, 100% { opacity: .5; transform: scale(.9); }
  50%      { opacity: 1;  transform: scale(1.06); }
}
/* a light pulse runs the length of a link, then hands off to the next */
.viz-beams path {
  stroke: var(--mint); stroke-width: 1.6;
  stroke-dasharray: 14 200; stroke-dashoffset: 14;
  filter: drop-shadow(0 0 4px rgba(var(--mint-rgb), .7));
  animation: meshBeam 1.6s linear infinite;
}
@keyframes meshBeam { to { stroke-dashoffset: -200; } }
.viz-nodes circle { transition: r .35s var(--ease), opacity .35s var(--ease); }
.viz-nodes circle.lit { opacity: 1; }
.viz-nodes circle { transform-box: fill-box; transform-origin: center; }
.viz-core   { color: var(--mint); }
.viz-core-t { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; fill: currentColor; }
/* HitenOS: model workload on top, hardware below, the OS binding the two */
.viz--os { color: var(--mint); }
.os-cap  { font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; fill: var(--ink-3); text-transform: uppercase; }
.os-task rect { fill: rgba(var(--steel-rgb), .06); stroke: var(--hair-2); stroke-width: 1; }
.os-task text { font-size: 9px; fill: var(--ink-2); text-anchor: middle; font-weight: 500; }
.os-band { stroke: rgba(var(--mint-rgb), .34); stroke-width: 1; }
.os-name { font-size: 16px; font-weight: 800; letter-spacing: -.02em; fill: var(--ink); }
.os-sub  { font-size: 9px; fill: var(--steel-dim); }
.os-rule { stroke: rgba(var(--mint-rgb), .28); stroke-width: 1; }
.os-fn text { font-size: 9.5px; fill: var(--ink-2); }
.os-flow rect { animation: osDrop 2.4s var(--ease) infinite; }
.os-flow rect:nth-child(2) { animation-delay: .3s; }
.os-flow rect:nth-child(3) { animation-delay: .6s; }
.os-flow rect:nth-child(4) { animation-delay: .9s; }
@keyframes osDrop {
  0%        { transform: translateY(0);   opacity: 0; }
  25%       { opacity: 1; }
  70%, 100% { transform: translateY(16px); opacity: 0; }
}

.viz--layer .viz-flow rect { animation: sink 3.6s var(--ease) infinite; }
@keyframes sink {
  0%, 12%   { transform: translateY(0);   opacity: 1; }
  33%, 45%  { transform: translateY(28px); opacity: .85; }
  66%, 78%  { transform: translateY(56px); opacity: .6; }
  92%, 100% { transform: translateY(84px); opacity: 0; }
}
.viz--hub .viz-core { animation: coreGlow 3s ease-in-out infinite; }
@keyframes coreGlow { 0%,100% { opacity: .6; } 50% { opacity: 1; } }

.pillar__idx { display: block; color: var(--mint); opacity: .75; margin-bottom: 10px; font-size: .625rem; }
.pillar h3 { font-size: 1.25rem; font-weight: 700; color: var(--ink); letter-spacing: -.015em; }
.pillar p  { margin-top: 12px; font-size: .875rem; line-height: 1.8; color: var(--ink-3); }

/* ──────────────────────────────── PRODUCTS ──────────────────────────────── */
.products { background: var(--surface); border-top: 1px solid var(--hair); }
.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* two product lines — used on the home page and on products.html */
.lines__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 28px); }
.line {
  position: relative; display: flex; flex-direction: column;
  padding: 32px 32px 28px;
  border: 1px solid var(--hair); border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(var(--tint-rgb), .022), transparent 38%), var(--card);
  overflow: hidden;
  transition: border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.line::before {
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0;
  background: radial-gradient(85% 55% at 50% 0%, rgba(var(--mint-rgb), .10), transparent 62%);
  transition: opacity .4s var(--ease);
}
.line:hover { transform: translateY(-4px); border-color: var(--hair-2); box-shadow: 0 28px 64px -42px rgba(var(--shadow-rgb), .95); }
.line:hover::before { opacity: 1; }
.line--local { border-color: rgba(var(--mint-rgb), .2); }
.line__head { position: relative; }
.line__head h3 { margin-top: 16px; font-size: clamp(1.375rem, 2.1vw, 1.75rem); font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.line__kind {
  margin-top: 10px; font-size: .9375rem; font-weight: 600; letter-spacing: -.005em;
  color: var(--mint);
}

.line__shot { position: relative; display: grid; place-items: center; height: clamp(150px, 15vw, 210px); margin: 22px 0 20px; }
.line__shot::after {
  content:''; position:absolute; z-index: 0; left:50%; bottom:6%; width:76%; height:26%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(var(--mint-rgb), .16), transparent 74%);
  filter: blur(12px);
}
/* Fill the box absolutely rather than relying on max-height:100% — the grid's
   implicit row is auto-sized, so the percentage resolved against the row the
   image itself had already grown, and the render spilled over the chips. */
.line__shot img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
/* 新云 is a service riding on hardware — show both halves */
.line__shot--split { display: flex; align-items: center; gap: 10px; padding-right: 9%; }
.line__shot--split .line__half { position: relative; inset: auto; z-index: 1; flex: 1 1 0; min-width: 0; height: 100%; object-fit: contain; }
.line__shot--split .line__half:last-child { flex: 0 0 34%; }

.line__models { display: flex; flex-wrap: wrap; gap: 8px; }
.line__models li {
  padding: 6px 13px; border-radius: 999px;
  font-size: .8125rem; font-weight: 600; color: var(--mint);
  border: 1px solid rgba(var(--mint-rgb), .28); background: rgba(var(--mint-rgb), .06);
}
.line__uses { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hair); display: grid; gap: 8px; }
.line__uses li { position: relative; padding-left: 17px; font-size: .875rem; color: var(--ink-2); }
.line__uses li::before {
  content:''; position:absolute; left:0; top:.6em; width:5px; height:5px;
  border-radius:1px; background: var(--mint); opacity:.7; transform: rotate(45deg);
}
.line__aud { margin-top: 18px; font-size: .8125rem; color: var(--steel-dim); }
.line__go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 24px; font-size: .8125rem; font-weight: 600; color: var(--ink); }
.line__go svg { width: 14px; height: 14px; color: var(--mint); transition: transform .3s var(--ease); }
.line:hover .line__go svg { transform: translateX(4px); }

/* ── solutions teaser (home) ─────────────────────────────────────────────── */
.sol-teaser { background: var(--bg); border-top: 1px solid var(--hair); }
.stz { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.8vw, 24px); }
.stz__card {
  display: flex; flex-direction: column; padding: 30px;
  border: 1px solid var(--hair); border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(var(--tint-rgb), .022), transparent 40%), var(--card);
  transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.stz__card:hover { border-color: rgba(var(--mint-rgb), .32); transform: translateY(-3px); }
.stz__k { color: var(--mint); opacity: .8; font-size: .625rem; }
.stz__card h3 { margin-top: 12px; font-size: 1.25rem; font-weight: 700; color: var(--ink); letter-spacing: -.015em; }
.stz__card ul { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.stz__card ul li {
  padding: 4px 11px; border-radius: 999px; font-size: .75rem; color: var(--ink-2);
  border: 1px solid var(--hair-2); background: rgba(var(--tint-rgb), .02);
}
.stz__card > p { margin-top: 16px; font-size: .8125rem; line-height: 1.8; color: var(--ink-3); }
.stz__go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 22px; font-size: .8125rem; font-weight: 600; color: var(--ink); }
.stz__go svg { width: 14px; height: 14px; color: var(--mint); transition: transform .3s var(--ease); }
.stz__card:hover .stz__go svg { transform: translateX(4px); }

@media (max-width: 940px) {
  .lines__grid { grid-template-columns: 1fr; }
  .stz { grid-template-columns: 1fr; }
}


/* ─────────────────────────────── ECOSYSTEM ──────────────────────────────── */
.eco { background: var(--bg); border-top: 1px solid var(--hair); }
.eco__logos {
  margin-top: 8px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  background: var(--hair);
  overflow: hidden;
}
.eco__logos li {
  display: grid; place-items: center;
  padding: 34px 26px;
  background: var(--panel);
  transition: background .3s var(--ease);
}
.eco__logos li:hover { background: var(--card-hi); }
.eco__logos img {
  width: auto; max-width: 100%;
  filter: brightness(0) invert(1);   /* every mark is solid black → uniform white */
  opacity: .42;
  transition: opacity .3s var(--ease);
}
/* Optical sizing: these lockups differ in aspect and in how much of the box the
   wordmark occupies, so a single height would make them read at unequal weight. */
.eco__logos img[data-v="cambricon"] { height: 42px; }
.eco__logos img[data-v="metax"]     { height: 27px; }
.eco__logos img[data-v="biren"]     { height: 38px; }
.eco__logos img[data-v="sunrise"]   { height: 27px; }
/* two-line lockups need more height for their latin row to match the others */
.eco__logos img[data-v="moorethreads"] { height: 38px; }
.eco__logos img[data-v="hygon"]        { height: 42px; }
.eco__logos li:hover img { opacity: .95; }

.eco__stack { display: grid; gap: 8px; margin-bottom: 24px; }
.eco__layer {
  /* empty third column mirrors the label so the tag row centres on the card,
     not on the space left over beside the label */
  display: grid; grid-template-columns: 116px minmax(0, 1fr) 116px;
  align-items: center; gap: clamp(14px, 2.4vw, 32px);
  padding: 18px clamp(18px, 2.4vw, 28px);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--panel);
}
.eco__layer__k {
  display: flex; flex-direction: column; gap: 4px;
  color: var(--ink-3); font-size: .5625rem; letter-spacing: .16em;
}
.eco__layer__k em {
  font-style: normal; font-family: var(--sans);
  font-size: .8125rem; font-weight: 600; letter-spacing: 0;
  color: var(--ink-2); text-transform: none;
}

.eco__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px clamp(7px, 1vw, 14px); }
.eco__tags li {
  font-size: .8125rem; font-weight: 500; color: var(--ink-2);
  padding: 5px 13px; border-radius: 999px;
  border: 1px solid var(--hair-2);
  background: rgba(var(--tint-rgb), .022);
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.eco__layer:hover .eco__tags li { border-color: var(--hair-3); }

/* the system row is the one WYLON actually ships — give it the accent */
.eco__layer--os {
  border-color: rgba(var(--mint-rgb), .3);
  background: linear-gradient(100deg, rgba(var(--mint-rgb), .08), transparent 62%), var(--card);
  padding-block: 22px;
}
.eco__layer--os .eco__layer__k { color: var(--mint); }
.eco__layer--os .eco__layer__k em { color: var(--ink); }
.eco__sys { display: grid; justify-items: center; gap: 12px; text-align: center; }
.eco__sys b {
  font-size: 1rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em;
}
.eco__tags--os li {
  color: var(--mint); border-color: rgba(var(--mint-rgb), .28);
  background: rgba(var(--mint-rgb), .06);
}

/* ────────────────────────────────── NEWS ────────────────────────────────── */
.nw { background: var(--bg); }
.nw + .nw { border-top: 1px solid var(--hair); }

/* shared card chrome — the featured item and the grid items differ only in scale */
.nw__card {
  display: grid; gap: 18px; align-content: start;
  color: inherit; text-decoration: none;
}
.nw__shot {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--hair); border-radius: var(--r-lg);
  background: var(--panel);
}
.nw__shot img {
  width: 100%; height: 100%; display: block; object-fit: cover;
  transition: transform .6s var(--ease);
}
.nw__card:hover .nw__shot { border-color: var(--hair-3); }
.nw__card:hover .nw__shot img { transform: scale(1.035); }

.nw__txt { display: grid; gap: 12px; align-content: start; }
.nw__meta { display: flex; align-items: center; gap: 12px; }
.nw__cat {
  font-size: .625rem; letter-spacing: .14em; color: var(--mint);
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid rgba(var(--mint-rgb), .28); background: rgba(var(--mint-rgb), .06);
}
.nw__date { font-size: .75rem; color: var(--ink-3); }
.nw__card h3 {
  font-size: 1.0625rem; font-weight: 700; line-height: 1.65;
  letter-spacing: -.01em; color: var(--ink);
  transition: color .2s var(--ease);
}
.nw__card:hover h3 { color: var(--mint); }
.nw__deck { font-size: .875rem; line-height: 1.85; color: var(--ink-2); }
.nw__go { display: inline-flex; align-items: center; gap: 7px; font-size: .8125rem; color: var(--mint); }
.nw__go svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.nw__card:hover .nw__go svg { transform: translateX(3px); }

/* featured: image beside the copy, everything one step larger */
.nw__lead { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(26px, 3.4vw, 56px); align-items: center; }
.nw__lead .nw__shot { aspect-ratio: 16 / 10; }
.nw__lead h3 { font-size: clamp(1.375rem, 2.2vw, 1.875rem); line-height: 1.45; font-weight: 800; }
.nw__lead .nw__deck { font-size: .9375rem; }

.nw__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 34px); }

/* index list: one bookmark-style card per item, newest first. A row scales to
   any number of entries, which a 3-up grid does not — four items would leave
   one stranded on its own row. */
/* no section heading above the list, so the full section padding would read as
   a hole between the hero and the first card */
.nw--flush { padding-top: clamp(40px, 4vw, 64px); }
.nw__list { display: grid; gap: clamp(14px, 1.8vw, 22px); list-style: none; }
.nw__row {
  display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 40px); align-items: center;
  padding: clamp(14px, 1.6vw, 20px);
  border: 1px solid var(--hair); border-radius: var(--r-lg); background: var(--panel);
  color: inherit; text-decoration: none;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.nw__row:hover { border-color: var(--hair-3); background: var(--card-hi); }
.nw__row .nw__shot { border: 0; }          /* the card already carries the frame */
.nw__row:hover .nw__shot img { transform: scale(1.035); }
.nw__row h3 { font-size: 1.125rem; }
.nw__row:hover h3 { color: var(--mint); }

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

/* ── article ─────────────────────────────────────────────────────────────── */
.art { background: var(--bg); }
/* a comfortable measure for long-form Chinese copy, centred in the container */
.art__wrap { width: min(100%, 760px); margin-inline: auto; }
.art__fig { margin-bottom: clamp(28px, 3.4vw, 46px); }
.art__fig img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--hair); border-radius: var(--r-lg); background: var(--panel);
}
.art__cap { margin-top: 12px; font-size: .75rem; color: var(--ink-3); text-align: center; }
/* figures set between paragraphs need air on both sides */
.art__body .art__fig { margin: clamp(28px, 3.4vw, 44px) 0; }
/* a portrait shot at full column width would run ~1140px tall and swamp the
   copy — cap the height and centre it instead */
.art__fig--tall img { max-height: 620px; width: auto; margin-inline: auto; }
.art__body p { font-size: 1rem; line-height: 2.05; color: var(--ink-2); }
.art__body p + p,
.art__body blockquote + p { margin-top: 1.35em; }
.art__quote {
  display: block; margin-top: 1.35em;
  padding: 22px clamp(20px, 2.4vw, 30px);
  border-left: 2px solid rgba(var(--mint-rgb), .5); border-radius: 0 var(--r) var(--r) 0;
  background: rgba(var(--mint-rgb), .045);
}
.art__quote p { color: var(--ink); font-size: 1.0625rem; line-height: 1.95; }
.art__who { margin-top: 12px; font-size: .8125rem; color: var(--ink-3); }
.art__body h2 {
  margin-top: clamp(34px, 3.6vw, 52px);
  font-size: clamp(1.125rem, 1.7vw, 1.375rem); font-weight: 800;
  line-height: 1.5; letter-spacing: -.015em; color: var(--ink);
  padding-left: 14px; border-left: 3px solid var(--mint);
}
.art__body h2 + p { margin-top: 1.1em; }
.art__link {
  margin-top: clamp(26px, 3vw, 40px); padding-top: 20px; border-top: 1px solid var(--hair);
  font-size: .875rem; color: var(--ink-3);
}
.art__link a { color: var(--mint); word-break: break-all; }
.art__link a:hover { text-decoration: underline; }

.art__head { display: grid; gap: 16px; }
.art__title { font-size: clamp(1.75rem, 3.4vw, 2.75rem); font-weight: 800; line-height: 1.32; letter-spacing: -.02em; color: var(--ink); }
.art__deck { font-size: 1.0625rem; line-height: 1.85; color: var(--ink-2); max-width: 60ch; }

@media (max-width: 1000px) {
  .nw__lead { grid-template-columns: 1fr; }
  .nw__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .nw__grid { grid-template-columns: 1fr; }
}

/* ── pagination ──────────────────────────────────────────────────────────── */
/* real paged URLs rather than a JS toggle: each page is crawlable, linkable,
   and works with scripting off */
.pager {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px; margin-top: clamp(28px, 3.2vw, 44px);
}
.pager__btn, .pager__num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 14px;
  border: 1px solid var(--hair); border-radius: var(--r-sm);
  font-size: .8125rem; color: var(--ink-2); background: var(--panel);
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
a.pager__btn:hover, a.pager__num:hover { color: var(--ink); border-color: var(--hair-3); background: var(--card-hi); }
.pager__num.is-on {
  color: var(--mint); border-color: rgba(var(--mint-rgb), .4);
  background: rgba(var(--mint-rgb), .07); cursor: default;
}
.pager__btn.is-off { color: var(--ink-3); opacity: .45; cursor: default; }
.pager__sep { width: 6px; }

/* ───────────────────────────────── ABOUT ────────────────────────────────── */
.about { background: var(--bg); border-top: 1px solid var(--hair); }
.about__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 84px);
}
.creds { display: grid; gap: 2px; align-content: start; }
.cred {
  display: grid; grid-template-columns: 108px 1fr; gap: 18px; align-items: baseline;
  padding: 22px 0;
  border-top: 1px solid var(--hair);
}
.cred:last-child { border-bottom: 1px solid var(--hair); }
.cred__val {
  font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em;
  color: var(--mint);
  font-variant-numeric: tabular-nums;
}
.cred b { display: block; font-size: .9375rem; font-weight: 600; color: var(--ink); }
.cred p { margin-top: 5px; color: var(--ink-3); font-size: .5625rem; letter-spacing: .1em; }

/* ────────────────────────────────── CTA ─────────────────────────────────── */
.cta {
  position: relative; overflow: hidden;
  scroll-margin-top: calc(var(--anchor-y) - var(--cta-y));
  padding-block: var(--cta-y);
  border-top: 1px solid var(--hair);
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(var(--blue-rgb), .13) 0%, transparent 58%),
    radial-gradient(60% 80% at 78% 110%, rgba(var(--mint-rgb), .08) 0%, transparent 60%),
    var(--surface);
  text-align: center;
}
.cta__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(var(--steel-rgb), .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--steel-rgb), .05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent 75%);
}
.cta__inner { position: relative; z-index: 1; }
.cta__title { font-size: clamp(2.1rem, 4.6vw, 3.75rem); letter-spacing: -.03em; }
.cta .lede { margin-inline: auto; }
.cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 40px; }

/* ───────────────────────────────── FOOTER ───────────────────────────────── */
.foot { background: var(--void); border-top: 1px solid var(--hair); padding-top: clamp(56px, 6vw, 80px); }
.foot__inner {
  display: flex; justify-content: flex-end;
  padding-bottom: clamp(44px, 5vw, 64px);
}
.foot__brand { max-width: 46ch; text-align: right; }
.foot__brand img { height: 28px; width: auto; opacity: .85; margin-left: auto; }
.foot__brand p { margin-top: 20px; font-size: .8125rem; line-height: 1.8; color: var(--ink-3); }

.foot__bottom {
  /* copyright left, filing info right; both fall back to left once they wrap */
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: 10px 22px;
  padding-block: 24px;
  border-top: 1px solid var(--hair);
  font-size: .75rem; color: var(--ink-3); text-align: left;
}
.foot__icp { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; justify-content: flex-end; text-align: right; }
.foot__icp a { transition: color .2s; }
.foot__icp a:hover { color: var(--ink-2); }
/* the 公安备案 emblem is an official colour mark — never invert or tint it */
.foot__gov { display: inline-flex; align-items: center; gap: 6px; }
.foot__gov img { width: 18px; height: 20px; flex: none; }
@media (max-width: 620px) {
  /* stacked on phones — keep both lines on the same left edge */
  .foot__bottom { justify-content: flex-start; }
  .foot__icp { justify-content: flex-start; text-align: left; }
}



.vcaps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.vcap { padding: 26px 24px; border: 1px solid var(--hair); border-radius: var(--r-lg); background: var(--card); }
.vcap h3 { font-size: 1rem; font-weight: 700; color: var(--ink); }
.vcap p { margin-top: 10px; font-size: .8125rem; line-height: 1.75; color: var(--ink-3); }

/* ── vertical-agent stack (solutions) ───────────────────────────────────── */
.vstack { display: grid; gap: 0; }
.vlayer {
  display: grid; grid-template-columns: 210px minmax(0, 1fr);
  gap: clamp(18px, 2.6vw, 36px); align-items: center;
  padding: clamp(22px, 2.6vw, 30px) clamp(20px, 2.6vw, 32px);
  border: 1px solid var(--hair); border-radius: var(--r-lg); background: var(--panel);
}
.vlayer__side > .mono { display: block; color: var(--ink-3); font-size: .625rem; letter-spacing: .14em; }
.vlayer__side b { display: block; margin-top: 8px; font-size: 1.125rem; font-weight: 700; color: var(--ink); letter-spacing: -.015em; }

/* the industry layer is what the customer buys — give it the weight */
.vlayer--apps {
  border-color: rgba(var(--mint-rgb), .34);
  background: linear-gradient(120deg, rgba(var(--mint-rgb), .10), transparent 58%), var(--card-hi);
}
.vlayer--apps .vlayer__side > .mono { color: var(--mint); }
.vlayer--apps .vlayer__side b { font-size: 1.375rem; font-weight: 800; }
.vinds { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: var(--r); overflow: hidden; }
.vinds li { padding: 16px 14px; background: rgba(18,27,39,.94); transition: background .3s var(--ease); }
.vinds li:hover { background: var(--card-hi); }
.vinds b { display: block; font-size: .9375rem; font-weight: 700; color: var(--ink); }
.vinds span { display: block; margin-top: 6px; font-size: .6875rem; line-height: 1.6; color: var(--ink-3); }
.vinds__more b { color: var(--steel-dim); }

.vlayer--os { border-color: rgba(var(--mint-rgb), .22); background: linear-gradient(100deg, rgba(var(--mint-rgb), .06), transparent 60%), var(--card); }
.vlayer--os .vlayer__side > .mono { color: var(--mint); }
.vcaps2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 20px; }
.vcaps2 b { display: block; font-size: .875rem; font-weight: 700; color: var(--ink); }
.vcaps2 span { display: block; margin-top: 5px; font-size: .75rem; line-height: 1.65; color: var(--ink-3); }

.vhw { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 20px; }
.vhw b { display: block; font-size: .875rem; font-weight: 700; color: var(--ink); }
.vhw span { display: block; margin-top: 5px; font-size: .75rem; line-height: 1.65; color: var(--ink-3); }

/* connector between layers */
.vflow { display: flex; justify-content: center; gap: 8px; padding: 10px 0; }
.vflow span { width: 5px; height: 5px; border-radius: 50%; background: var(--mint); opacity: .35; animation: vflow 1.8s ease-in-out infinite; }
.vflow span:nth-child(2) { animation-delay: .2s; }
.vflow span:nth-child(3) { animation-delay: .4s; }
@keyframes vflow { 0%,100% { opacity: .2; transform: translateY(-2px); } 50% { opacity: 1; transform: translateY(2px); } }


/* outbound link inside the workbench endpoints */
.wb__link-out { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font-size: .75rem; font-weight: 600; color: var(--mint); }
.wb__link-out svg { width: 13px; height: 13px; transition: transform .3s var(--ease); }
.wb__link-out:hover svg { transform: translateX(3px); }

@media (max-width: 1000px) {
  .vlayer { grid-template-columns: 1fr; gap: 16px; }
  .vinds { grid-template-columns: repeat(2, 1fr); }
  .vcaps2, .vhw { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .vinds { grid-template-columns: 1fr; } }

/* ═══════════════════════════ PRODUCTS PAGE ════════════════════════════════ */
.page-hero--lean { padding-block: calc(68px + clamp(56px, 6.5vw, 96px)) clamp(48px, 5.5vw, 78px); }
.lines   { background: var(--bg); }
.prod--cloud { background: var(--surface); border-top: 1px solid var(--hair); }
.prod--local { background: var(--bg);      border-top: 1px solid var(--hair); }

.spec {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 4vw, 64px); align-items: center;
  padding: clamp(28px, 3.4vw, 44px);
  border: 1px solid var(--hair); border-radius: var(--r-lg);
  background: linear-gradient(150deg, rgba(var(--mint-rgb), .04), transparent 52%), var(--panel);
}
.spec + .spec { margin-top: clamp(18px, 2vw, 28px); }
.spec--flip .spec__shot { order: 2; }
.spec__shot { position: relative; display: grid; place-items: center; min-height: 180px; }
.spec__shot::after {
  content:''; position:absolute; left:50%; bottom:2%; width:80%; height:24%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(var(--mint-rgb), .15), transparent 74%);
  filter: blur(14px);
}
/* the 1000 is a portrait tower render — cap the height so it does not
   tower over the landscape rack/chassis shots in the sibling blocks */
.spec__shot img { position: relative; max-width: 100%; max-height: clamp(220px, 26vw, 330px); width: auto; height: auto; }
.spec__name { font-size: clamp(1.375rem, 2.2vw, 1.875rem); font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.spec__name span { display: block; margin-top: 6px; font-size: .875rem; font-weight: 500; letter-spacing: 0; color: var(--steel-dim); }
.spec__lead { margin-top: 16px; font-size: .9375rem; line-height: 1.8; color: var(--ink-2); }

.feats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 24px; }
.feats li { padding: 16px 18px; border: 1px solid var(--hair); border-radius: var(--r); background: rgba(var(--tint-rgb), .018); }
.feats b { display: block; font-size: .9375rem; font-weight: 700; color: var(--ink); }
.feats span { display: block; margin-top: 6px; font-size: .8125rem; line-height: 1.7; color: var(--ink-3); }

.hilite { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 22px; background: var(--hair); border: 1px solid var(--hair); border-radius: var(--r); overflow: hidden; }
.hilite > div { padding: 18px; background: var(--card); }
.hilite b { display: block; font-size: 1.0625rem; font-weight: 800; letter-spacing: -.015em; color: var(--mint); }
.hilite span { display: block; margin-top: 6px; font-size: .8125rem; color: var(--ink-3); }

.twocol { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 2.6vw, 40px); margin-top: 26px; }
.twocol h4 { color: var(--mint); opacity: .85; font-size: .625rem; margin-bottom: 12px; }
.ticks { display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 20px; font-size: .8125rem; line-height: 1.7; color: var(--ink-2); }
.ticks li::before {
  content:''; position:absolute; left:0; top:.42em; width:9px; height:5px;
  border-left: 1.5px solid var(--mint); border-bottom: 1.5px solid var(--mint);
  transform: rotate(-45deg);
}
.specs-dl { display: grid; gap: 0; }
.specs-dl > div { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--hair); }
.specs-dl > div:first-child { border-top: 1px solid var(--hair); }
.specs-dl dt { font-size: .75rem; color: var(--ink-3); }
.specs-dl dd { font-size: .8125rem; color: var(--ink-2); font-weight: 500; }
.scenes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.scenes li { padding: 5px 13px; border-radius: 999px; font-size: .75rem; color: var(--steel-dim); border: 1px solid var(--hair-2); }

.factory { margin-top: clamp(24px, 3vw, 40px); max-width: 68ch; }
.factory__copy p { margin-top: 14px; font-size: .9375rem; line-height: 1.8; color: var(--ink-2); }

.modes { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 1.8vw, 24px); margin-top: clamp(18px, 2vw, 28px); }
.mode { padding: 28px; border: 1px solid var(--hair); border-radius: var(--r-lg); background: var(--panel); }
.mode--partner { border-color: rgba(138,130,255,.28); background: linear-gradient(150deg, rgba(120,130,255,.08), transparent 55%), var(--panel); }
.mode > .mono { color: var(--mint); font-size: .625rem; }
.mode--partner > .mono { color: #9aa2ff; }
.mode b { display: block; margin-top: 10px; font-size: 1.0625rem; font-weight: 700; color: var(--ink); }
.mode ul { margin-top: 16px; display: grid; gap: 9px; }
.mode li { position: relative; padding-left: 17px; font-size: .8125rem; color: var(--ink-2); }
.mode li::before { content:''; position:absolute; left:0; top:.62em; width:5px; height:5px; border-radius:1px; background: var(--mint); opacity:.65; transform: rotate(45deg); }
.mode--partner li::before { background: #9aa2ff; }
.modes__note { margin-top: 18px; text-align: center; font-size: .8125rem; color: var(--ink-3); }

/* ═══════════════════════════ SOLUTIONS PAGE ═══════════════════════════════ */
.sol--general  { background: var(--bg); }
.sol--vertical { background: var(--surface); border-top: 1px solid var(--hair); }
.sol--cases    { background: var(--bg);      border-top: 1px solid var(--hair); }

.scen { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.scen__item { padding: 26px 24px; border: 1px solid var(--hair); border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(var(--tint-rgb), .022), transparent 42%), var(--card); transition: border-color .35s var(--ease), transform .35s var(--ease); }
.scen__item:hover { border-color: rgba(var(--mint-rgb), .3); transform: translateY(-3px); }
.scen__n { color: var(--mint); opacity: .8; font-size: .625rem; }
.scen__item h3 { margin-top: 10px; font-size: 1.0625rem; font-weight: 700; color: var(--ink); }
.scen__item p { margin-top: 10px; font-size: .8125rem; line-height: 1.75; color: var(--ink-3); }

/* workbench → compatible API → endpoints */
.wb {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.15fr);
  gap: clamp(16px, 2vw, 28px); align-items: center;
  margin-top: clamp(24px, 3vw, 40px); padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--hair); border-radius: var(--r-lg); background: var(--panel);
}
.wb__bench { padding: 26px; border: 1px solid rgba(var(--mint-rgb), .22); border-radius: var(--r); background: linear-gradient(160deg, rgba(var(--mint-rgb), .06), transparent 55%), var(--card); }
.wb__bench h3 { font-size: 1.125rem; font-weight: 700; color: var(--mint); }
.wb__bench > p { margin-top: 8px; font-size: .8125rem; color: var(--ink-3); }
.wb__apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 20px; }
.wb__apps li { padding: 10px 6px; text-align: center; border: 1px solid rgba(var(--mint-rgb), .26); border-radius: var(--r-sm); font-size: .75rem; font-weight: 600; color: var(--ink-2); background: rgba(var(--tint-rgb), .02); }
.wb__link { display: grid; justify-items: center; gap: 8px; color: var(--mint); }
.wb__link .mono { font-size: .5625rem; color: var(--steel-dim); white-space: nowrap; }
.wb__link svg { width: 56px; height: 16px; }
.wb__ends { display: grid; gap: 14px; }
.wb__end { padding: 22px; border-radius: var(--r); border: 1px solid var(--hair-2); background: var(--card); }
.wb__end--cloud { border-style: dashed; border-color: rgba(154,162,255,.42); }
.wb__end--local { border-color: rgba(var(--mint-rgb), .3); background: linear-gradient(150deg, rgba(var(--mint-rgb), .05), transparent 60%), var(--card); }
.wb__end > .mono { font-size: .625rem; color: var(--mint); }
.wb__end--cloud > .mono { color: #9aa2ff; }
.wb__end b { display: block; margin-top: 8px; font-size: 1.0625rem; font-weight: 700; color: var(--ink); }
.wb__end > p { margin-top: 8px; font-size: .75rem; line-height: 1.7; color: var(--ink-3); }
.wb__chain { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; margin-top: 16px; }
.wb__box { padding: 12px; border: 1px solid var(--hair-2); border-radius: var(--r-sm); background: rgba(var(--tint-rgb), .02); }
.wb__box b { margin-top: 0; font-size: .8125rem; }
.wb__box span { display: block; margin-top: 5px; font-size: .6875rem; color: var(--ink-3); }
.wb__arrow { width: 34px; height: 12px; color: var(--mint); }

.cases { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 1.8vw, 24px); }
.case { padding: 30px; border: 1px solid var(--hair); border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(var(--tint-rgb), .022), transparent 40%), var(--card); transition: border-color .35s var(--ease), transform .35s var(--ease); }
.case:hover { border-color: var(--hair-2); transform: translateY(-3px); }
.case__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.case h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.015em; color: var(--ink); }
.case > p { margin-top: 12px; font-size: .875rem; line-height: 1.8; color: var(--ink-3); }
.case__list { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hair); display: grid; gap: 9px; }
.case__list li { position: relative; padding-left: 17px; font-size: .8125rem; color: var(--ink-2); }
.case__list li::before { content:''; position:absolute; left:0; top:.62em; width:5px; height:5px; border-radius:1px; background: var(--mint); opacity:.7; transform: rotate(45deg); }
.case__vals { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--hair); display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.case__vals b { display: block; font-size: .9375rem; font-weight: 700; color: var(--mint); }
.case__vals span { display: block; margin-top: 6px; font-size: .75rem; line-height: 1.6; color: var(--ink-3); }

@media (max-width: 1100px) {
  .spec { grid-template-columns: 1fr; }
  .spec--flip .spec__shot { order: 0; }
  .scen, .vcaps { grid-template-columns: repeat(2, 1fr); }
  .wb { grid-template-columns: 1fr; }
  .wb__link { flex-direction: row; }
  .wb__link svg { transform: rotate(90deg); }
  .case__vals { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .feats, .twocol, .hilite, .modes,  .scen, .vcaps, .cases { grid-template-columns: 1fr; }
    .case__vals { grid-template-columns: 1fr; }
  .wb__apps { grid-template-columns: repeat(2, 1fr); }
  .wb__chain { grid-template-columns: 1fr; }
  .wb__arrow { transform: rotate(90deg); justify-self: center; }
}


/* ── achievements (about) ───────────────────────────────────────────────── */
.ach { display: grid; grid-template-columns: repeat(3, 1fr) 1.25fr; gap: clamp(14px, 1.6vw, 22px); }
.ach__stat {
  padding: 26px 24px; border: 1px solid var(--hair); border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(var(--tint-rgb), .022), transparent 42%), var(--card);
  transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.ach__stat:hover { border-color: rgba(var(--mint-rgb), .3); transform: translateY(-3px); }
.ach__n {
  font-size: clamp(2.6rem, 4.4vw, 3.6rem); font-weight: 800; line-height: 1;
  letter-spacing: -.05em; color: var(--mint); font-variant-numeric: tabular-nums;
}
.ach__stat b { display: block; margin-top: 14px; font-size: .9375rem; font-weight: 600; color: var(--ink); }
.ach__stat p { margin-top: 8px; font-size: .8125rem; color: var(--ink-3); }

.ach__iso {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 26px 24px; border-radius: var(--r-lg);
  border: 1px solid rgba(var(--mint-rgb), .26);
  background: linear-gradient(150deg, rgba(var(--mint-rgb), .07), transparent 58%), var(--card);
}
.ach__shield { width: 40px; height: 40px; flex: none; color: var(--mint); }
.ach__iso ul { display: grid; gap: 10px; }
.ach__iso li { display: flex; gap: 10px; align-items: baseline; font-size: .8125rem; color: var(--ink-2); }
.ach__iso .mono { color: var(--mint); font-size: .6875rem; letter-spacing: .08em; min-width: 74px; }

.honor {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 56px);
  margin-top: clamp(16px, 1.8vw, 24px); padding: clamp(26px, 3.2vw, 42px);
  border: 1px solid var(--hair); border-radius: var(--r-lg); background: var(--panel);
}
/* the grid stretches this column to the height of the taller list opposite,
   so the heading has to centre itself inside that box or it reads as pinned
   to the top with dead space under it */
.honor__titles { display: grid; align-content: center; }
.honor__titles h3 {
  font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight: 800;
  line-height: 1.55; letter-spacing: -.015em; color: var(--ink);
}
.honor__eco h4 { color: var(--mint); opacity: .85; font-size: .625rem; margin-bottom: 14px; }
.honor__eco ul { display: grid; gap: 10px; }
.honor__eco li { position: relative; padding-left: 17px; font-size: .8125rem; line-height: 1.7; color: var(--ink-2); }
.honor__eco li::before {
  content:''; position:absolute; left:0; top:.62em; width:5px; height:5px;
  border-radius:1px; background: var(--mint); opacity:.65; transform: rotate(45deg);
}

@media (max-width: 1100px) { .ach { grid-template-columns: repeat(2, 1fr); } .ach__iso { grid-column: 1 / -1; } }
@media (max-width: 620px)  { .ach { grid-template-columns: 1fr; } .honor { grid-template-columns: 1fr; } }

.ilink { color: var(--mint); border-bottom: 1px solid rgba(var(--mint-rgb), .35); transition: border-color .2s; }
.ilink:hover { border-bottom-color: var(--mint); }

/* ── product family hub cards (products.html) ───────────────────────────── */
.fam { background: var(--bg); }
/* full-width rows rather than three narrow columns: each product gets a large
   photo and room to breathe, and the image side alternates so the three read
   as a sequence instead of a table */
.fam__list { display: grid; gap: clamp(18px, 2vw, 30px); }
.fam__card {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 72px); align-items: center;
  padding: clamp(26px, 3vw, 46px);
  border: 1px solid var(--hair); border-radius: var(--r-lg); background: var(--card);
  color: inherit; text-decoration: none;
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.fam__card:nth-child(even) .fam__shot { order: 2; }
.fam__body { display: grid; justify-items: start; }
.fam__card:hover { border-color: rgba(var(--mint-rgb), .32); transform: translateY(-4px); box-shadow: 0 26px 60px -42px rgba(var(--shadow-rgb), .95); }
.fam__card h3 { margin-top: 16px; font-size: clamp(1.75rem, 2.6vw, 2.5rem); font-weight: 800; letter-spacing: -.025em; color: var(--ink); }
.fam__sub { margin-top: 8px; font-size: .9375rem; color: var(--ink-3); }
.fam__shot { position: relative; display: grid; place-items: center; height: clamp(200px, 22vw, 320px); margin: 0; }
.fam__shot::after {
  content:''; position:absolute; left:50%; bottom:4%; width:74%; height:24%; z-index:0;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(var(--mint-rgb), .16), transparent 74%);
  filter: blur(12px);
}
.fam__shot img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
.fam__models { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.fam__models li {
  padding: 5px 12px; border-radius: 999px; font-size: .75rem; font-weight: 600; color: var(--mint);
  border: 1px solid rgba(var(--mint-rgb), .28); background: rgba(var(--mint-rgb), .06);
}
.fam__desc { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--hair); font-size: .875rem; line-height: 1.85; color: var(--ink-3); max-width: 46ch; }
.fam__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font-size: .875rem; font-weight: 600; color: var(--ink); }
.fam__go svg { width: 14px; height: 14px; color: var(--mint); transition: transform .3s var(--ease); }
.fam__card:hover .fam__go svg { transform: translateX(4px); }

/* ── layered stack diagram (supernode / cloud / appliance) ──────────────── */
.arch { background: var(--surface); border-top: 1px solid var(--hair); }
.stack { display: grid; gap: 8px; }
.stack__row {
  display: grid; grid-template-columns: 110px minmax(0, 1fr);
  align-items: center; gap: clamp(14px, 2.4vw, 30px);
  padding: 20px clamp(18px, 2.4vw, 28px);
  border: 1px solid var(--hair); border-radius: var(--r); background: var(--panel);
}
.stack__row > .mono { color: var(--ink-3); font-size: .625rem; letter-spacing: .14em; }
.stack__row b { font-size: .9375rem; font-weight: 600; color: var(--ink-2); }
.stack__row small { display: block; margin-top: 6px; font-size: .75rem; color: var(--ink-3); }
.stack__row--rt, .stack__row--hw,
.stack--lit .stack__row { border-color: rgba(var(--mint-rgb), .28); background: linear-gradient(100deg, rgba(var(--mint-rgb), .07), transparent 62%), var(--card); }
.stack__row--rt > .mono, .stack__row--hw > .mono,
.stack--lit .stack__row > .mono { color: var(--mint); }
.stack__row--rt b, .stack__row--hw b,
.stack--lit .stack__row b { color: var(--ink); }

.axes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); margin-top: clamp(16px, 1.8vw, 24px); }
/* the layer diagram and its three axes read as one figure side by side */
.arch2 { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 2.6vw, 40px); align-items: stretch; }
.arch2 .axes { grid-template-columns: 1fr; margin-top: 0; }
/* the two columns are one figure, so let the shorter one grow to match rather
   than leaving a ragged 90px gap under the diagram */
.arch2 .stack { align-content: stretch; }
.arch2 .stack__row { align-content: center; }
@media (max-width: 1000px) {
  .arch2 { grid-template-columns: 1fr; }
  .arch2 .axes { grid-template-columns: repeat(3, 1fr); margin-top: clamp(16px, 1.8vw, 24px); }
}
.axis { padding: 24px; border: 1px solid var(--hair); border-radius: var(--r-lg); background: var(--card); }
.axis b { display: block; font-size: 1rem; font-weight: 700; color: var(--ink); }
.axis p { margin-top: 10px; font-size: .8125rem; line-height: 1.75; color: var(--ink-3); }
.axis--os { border-color: rgba(var(--mint-rgb), .26); background: linear-gradient(150deg, rgba(var(--mint-rgb), .06), transparent 58%), var(--card); }
.axis--os b { color: var(--mint); }

@media (max-width: 940px) {
  /* stack the row: photo on top, copy below, and drop the zigzag */
  .fam__card { grid-template-columns: 1fr; gap: 22px; }
  .fam__card:nth-child(even) .fam__shot { order: 0; }
  .axes { grid-template-columns: 1fr; }
}
@media (max-width: 620px) { .stack__row { grid-template-columns: 1fr; gap: 10px; } }


/* ═══════════════════ HERO STAGES (per-page 3-D visuals) ═══════════════════
   All five share the .stage3d perspective rig defined with the about-page
   dial; only the layer geometry differs, so the pages read as one family. */
.stage3d__layer svg * { vector-effect: non-scaling-stroke; }

/* ── supernode: stacked GPU lattice planes ──────────────────────────────── */
.sn-mesh line { stroke: currentColor; stroke-width: 1; opacity: .16; }
.sn-die rect  { fill: currentColor; opacity: .34; }
.sn-die--hot rect:nth-child(4n) { opacity: .95; }
.sn-ring { stroke: currentColor; stroke-width: 1.6; opacity: .5; animation: spin 44s linear infinite; transform-origin: 260px 260px; stroke-dasharray: 120 40; }
.sn-ring--in { stroke-width: 2.2; opacity: .85; animation-duration: 26s; animation-direction: reverse; stroke-dasharray: 74 30; }
.sn-core { fill: currentColor; stroke: none; filter: drop-shadow(0 0 12px rgba(var(--mint-rgb), .95)); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── cloud: a mass of nodes with token pills streaming out of the hub ───── */
.cl-p { fill: currentColor; stroke: none; opacity: .5; }
.cl-tok {
  fill: currentColor; stroke: none; opacity: 0;
  transform-box: fill-box; transform-origin: center;
  filter: drop-shadow(0 0 6px rgba(var(--mint-rgb), .8));
  animation: tokOut 2.8s ease-out infinite;
}
.cl-tok--1 { animation-delay: .7s; }
.cl-tok--2 { animation-delay: 1.4s; }
.cl-tok--3 { animation-delay: 2.1s; }
/* each pill already carries rotate() aiming it outward, so translating along
   its own local X is radial by construction */
@keyframes tokOut {
  0%   { opacity: 0; translate: -30px 0; }
  25%  { opacity: 1; }
  100% { opacity: 0; translate: 60px 0; }
}
.cl-hub { fill: rgba(var(--mint-rgb), .18); stroke: currentColor; stroke-width: 2.6; }
.cl-hub-t { fill: #eef3f9; font-family: var(--mono); font-size: 22px; font-weight: 600; letter-spacing: 2.5px; }
.cl-pulse { fill: none; stroke: currentColor; stroke-width: 1.6; transform-origin: 260px 260px; animation: hpulse 3.2s ease-out infinite; }
@keyframes hpulse { 0%{transform:scale(.5);opacity:.8} 70%,100%{transform:scale(1.9);opacity:0} }

/* ── appliance: nested enclosure, every shell turning at its own rate ───── */
.ap-shell {
  fill: none; stroke: currentColor; stroke-width: 1.4; opacity: .42;
  transform-origin: 260px 260px;
  animation: spin 90s linear infinite;
}
.stage3d__layer:nth-child(2) .ap-shell { animation-duration: 64s; animation-direction: reverse; }
.stage3d__layer:nth-child(3) .ap-shell { animation-duration: 44s; }
.ap-shell--lit { opacity: .8; stroke-width: 1.8; stroke-dasharray: 22 12; }
.ap-vault {
  fill: rgba(var(--mint-rgb), .08); stroke: currentColor; stroke-width: 2;
  transform-origin: 260px 260px; animation: spin 30s linear infinite reverse;
}
.ap-loop  { fill: none; stroke: currentColor; stroke-width: 2; opacity: .9;
            stroke-dasharray: 52 28; animation: spin 9s linear infinite; transform-origin: 260px 260px;
            filter: drop-shadow(0 0 7px rgba(var(--mint-rgb), .7)); }
.ap-core  { fill: currentColor; stroke: none; filter: drop-shadow(0 0 12px rgba(var(--mint-rgb), .95)); }

/* ── products: one base plate, three solid forms rising ─────────────────── */
.pr-plate { fill: rgba(var(--mint-rgb), .05); stroke: currentColor; stroke-width: 1.4; opacity: .5; }
.pr-form  { fill: rgba(var(--mint-rgb), .12); stroke: currentColor; stroke-width: 1.8; opacity: .85; }
.pr-base  { fill: rgba(var(--mint-rgb), .16); stroke: currentColor; stroke-width: 2.4; }
.pr-pulse { fill: none; stroke: currentColor; stroke-width: 1.4; transform-origin: 260px 260px; animation: hpulse 3.8s ease-out infinite; }
.pr-core  { fill: currentColor; stroke: none; filter: drop-shadow(0 0 14px rgba(var(--mint-rgb), .95)); }

/* ── solutions: agent task graph ────────────────────────────────────────── */
.so-edge line { stroke: currentColor; stroke-width: 2; opacity: .38; }
.so-node { fill: currentColor; stroke: none; opacity: .85; }



/* ═══════════════════════════ RECRUITING PAGE ══════════════════════════════ */
.roles { background: var(--bg); }
/* vertical directory — the auto-fit row read as a button bar, not a contents list */
.roles__nav { border-top: 1px solid var(--hair); }
.roles__nav li { border-bottom: 1px solid var(--hair); }
.roles__nav a {
  display: grid; grid-template-columns: 44px minmax(0, 20rem) minmax(0, 1fr) 20px;
  align-items: center; gap: clamp(14px, 2.4vw, 32px);
  padding: 22px 8px;
  transition: background .28s var(--ease), padding-left .28s var(--ease);
}
.roles__nav a:hover { background: rgba(var(--mint-rgb), .05); padding-left: 18px; }
.roles__n { color: var(--mint); opacity: .7; font-size: .625rem; }
.roles__t { font-size: 1.0625rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.roles__d { font-size: .8125rem; line-height: 1.7; color: var(--ink-3); }
.roles__nav svg { width: 16px; height: 16px; color: var(--mint); opacity: .55; justify-self: end; transition: transform .28s var(--ease), opacity .28s var(--ease); }
.roles__nav a:hover svg { transform: translateX(4px); opacity: 1; }
.roles__nav a:hover .roles__t { color: var(--mint); }
@media (max-width: 820px) {
  .roles__nav a { grid-template-columns: 34px minmax(0, 1fr) 18px; gap: 12px; padding: 18px 6px; }
  .roles__d { grid-column: 2; margin-top: 4px; }
  .roles__nav a { row-gap: 0; }
}
.roles__mail { margin-top: 20px; font-size: .875rem; color: var(--ink-3); }
.roles__mail a { color: var(--mint); border-bottom: 1px solid rgba(var(--mint-rgb), .35); }
.roles__mail a:hover { border-bottom-color: var(--mint); }

.job { border-top: 1px solid var(--hair); }
.job:nth-of-type(odd)  { background: var(--surface); }
.job:nth-of-type(even) { background: var(--bg); }
.job__head { margin-bottom: clamp(28px, 3.4vw, 44px); }
.job__tag { margin-top: 12px; font-size: 1rem; font-weight: 600; color: var(--mint); }
.job__body { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(22px, 3vw, 44px); align-items: start; }
.job__block { padding: 26px 28px; border: 1px solid var(--hair); border-radius: var(--r-lg); background: var(--card); }
.job__h { font-size: .9375rem; font-weight: 700; color: var(--ink); margin-bottom: 16px; }
.job__list { display: grid; gap: 11px; }
.job__list li { position: relative; padding-left: 18px; font-size: .875rem; line-height: 1.8; color: var(--ink-2); }
.job__list li::before {
  content:''; position:absolute; left:0; top:.72em; width:5px; height:5px;
  border-radius:1px; background: var(--mint); opacity:.65; transform: rotate(45deg);
}
.job__list--plus li::before { background: var(--steel-dim); }
.job__apply { margin-top: clamp(20px, 2.4vw, 30px); font-size: .875rem; color: var(--ink-3); }
.job__apply a { color: var(--mint); border-bottom: 1px solid rgba(var(--mint-rgb), .35); }
.job__apply a:hover { border-bottom-color: var(--mint); }

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


/* ── job drawer ─────────────────────────────────────────────────────────── */
/* .has-jd is set by jobs.js, so without JS the sections stay tiled and readable */
.has-jd .job { display: none; }
.has-jd .roles__nav a[aria-current="true"] { background: rgba(var(--mint-rgb), .08); }
.has-jd .roles__nav a[aria-current="true"] .roles__t { color: var(--mint); }

.jd {
  position: fixed; right: clamp(16px, 2.4vw, 32px); bottom: clamp(16px, 2.4vw, 32px);
  z-index: 120; width: min(440px, calc(100vw - 32px)); max-height: min(76vh, 720px);
  display: flex; flex-direction: column;
  border: 1px solid rgba(var(--steel-rgb), .22); border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(32,46,62,.98), rgba(19,28,39,.98));
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  box-shadow: 0 40px 90px -30px rgba(var(--shadow-rgb), .92), 0 1px 0 rgba(var(--tint-rgb), .06) inset;
  opacity: 0; transform: translateY(14px) scale(.985);
  transition: opacity .26s var(--ease), transform .26s var(--ease);
}
.jd.is-open { opacity: 1; transform: none; }

.jd__bar {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 20px 20px 16px; border-bottom: 1px solid var(--hair);
}
.jd__t { font-size: 1.0625rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.jd__tag { margin-top: 6px; font-size: .75rem; line-height: 1.55; color: var(--mint); }
.jd__x {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: var(--r-sm); color: var(--ink-3);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.jd__x svg { width: 15px; height: 15px; }
.jd__x:hover { background: rgba(var(--tint-rgb), .06); color: var(--ink); }

.jd__body { overflow-y: auto; padding: 18px 20px 4px; overscroll-behavior: contain; }
.jd__lede { font-size: .8125rem; line-height: 1.8; color: var(--ink-2); margin-bottom: 18px; }
/* the cloned blocks arrive with .job__block — flatten them inside the panel */
.jd__body .job__block { padding: 0; border: 0; background: none; margin-bottom: 20px; }
.jd__body .job__h { font-size: .8125rem; margin-bottom: 10px; }
.jd__body .job__list { gap: 9px; }
.jd__body .job__list li { font-size: .8125rem; line-height: 1.75; }

.jd__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 20px; border-top: 1px solid var(--hair);
}
.jd__apply { height: 40px; padding-inline: 20px; font-size: .875rem; }
.jd__mail { color: var(--ink-3); font-size: .5625rem; }

@media (max-width: 620px) {
  .jd { right: 0; bottom: 0; left: 0; width: auto; max-height: 82vh;
        border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 0; }
  .jd__foot { flex-direction: column; align-items: stretch; }
  .jd__apply { justify-content: center; }
  .jd__mail { text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .jd { transition: none; } }


/* ── contact dialog ─────────────────────────────────────────────────────── */
.cd {
  position: fixed; right: clamp(16px, 2.4vw, 32px); bottom: clamp(16px, 2.4vw, 32px);
  z-index: 130; width: min(400px, calc(100vw - 32px)); max-height: min(84vh, 680px);
  display: flex; flex-direction: column;
  border: 1px solid rgba(var(--steel-rgb), .22); border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(32,46,62,.98), rgba(19,28,39,.98));
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  box-shadow: 0 40px 90px -30px rgba(var(--shadow-rgb), .92), 0 1px 0 rgba(var(--tint-rgb), .06) inset;
  opacity: 0; transform: translateY(14px) scale(.985);
  transition: opacity .26s var(--ease), transform .26s var(--ease);
}
.cd.is-open { opacity: 1; transform: none; }
[data-theme="light"] .cd {
  background: linear-gradient(180deg, #ffffff, #f4f7fa);
  border-color: rgba(19,42,71,.16);
  box-shadow: 0 30px 70px -28px rgba(var(--shadow-rgb), .28), 0 1px 0 rgba(255,255,255,.9) inset;
}

.cd__bar {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 20px 20px 16px; border-bottom: 1px solid var(--hair);
}
.cd__t { font-size: 1.0625rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.cd__sub { margin-top: 5px; font-size: .75rem; color: var(--ink-3); }
.cd__x {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: var(--r-sm); color: var(--ink-3);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.cd__x svg { width: 15px; height: 15px; }
.cd__x:hover { background: rgba(var(--tint-rgb), .06); color: var(--ink); }

.cd__body { overflow-y: auto; padding: 18px 20px 6px; display: grid; gap: 14px; }
.cd__f { display: grid; gap: 7px; }
.cd__l { font-size: .75rem; font-weight: 600; color: var(--ink-2); }
.cd__l em { color: var(--mint); font-style: normal; }
.cd__body textarea,
.cd__body input {
  width: 100%; padding: 10px 12px;
  font: inherit; font-size: .8125rem; line-height: 1.7; color: var(--ink);
  background: rgba(var(--tint-rgb), .03);
  border: 1px solid var(--hair-2); border-radius: var(--r-sm);
  transition: border-color .2s var(--ease), background .2s var(--ease);
  resize: vertical;
}
.cd__body textarea::placeholder,
.cd__body input::placeholder { color: var(--ink-3); }
.cd__body textarea:focus,
.cd__body input:focus {
  outline: none; border-color: rgba(var(--mint-rgb), .6);
  background: rgba(var(--mint-rgb), .06);
}
.cd__hint { margin-top: -4px; font-size: .6875rem; color: var(--ink-3); }
.cd__err { font-size: .75rem; line-height: 1.6; color: #ff9d94; }
[data-theme="light"] .cd__err { color: #c0392b; }

.cd__foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 16px 20px; border-top: 1px solid var(--hair);
}
.cd.is-sent .cd__foot::before {
  content: '正在打开邮件客户端…'; margin-right: auto;
  font-size: .75rem; color: var(--mint);
}

@media (max-width: 620px) {
  .cd { right: 0; bottom: 0; left: 0; width: auto; max-height: 88vh;
        border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .cd { transition: none; } }

/* ═══════════════════════════════ ABOUT PAGE ═══════════════════════════════ */
.page-hero {
  position: relative; overflow: hidden;
  padding: calc(68px + clamp(72px, 9vw, 132px)) 0 clamp(64px, 8vw, 110px);
  border-bottom: 1px solid var(--hair);
  background:
    radial-gradient(90% 120% at 22% 0%, rgba(var(--blue-rgb), .14) 0%, transparent 58%),
    radial-gradient(60% 90% at 88% 30%, rgba(var(--mint-rgb), .08) 0%, transparent 62%),
    linear-gradient(180deg, #060a10, var(--surface));
}
.page-hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(var(--steel-rgb), .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--steel-rgb), .045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(100% 80% at 30% 30%, #000 10%, transparent 76%);
  -webkit-mask-image: radial-gradient(100% 80% at 30% 30%, #000 10%, transparent 76%);
}
.page-hero__inner { position: relative; z-index: 2; max-width: var(--maxw); }
@media (min-width: 1020px) {
  .page-hero__inner > * { max-width: 58%; }
}

/* ── instrument dial (3-D stage) ────────────────────────────────────────── */
.page-hero__viz {
  position: absolute; z-index: 1; pointer-events: none;
  top: 50%; right: calc(3% + 100px);
  width: min(780px, 60vw); aspect-ratio: 1;
  transform: translateY(-50%);
  color: var(--mint);
  perspective: 1400px;
  perspective-origin: 50% 42%;
  /* feathered edge — the dial now reaches into the headline column, so it has
     to dissolve rather than stop. Applied here, not on .dial3d, so the inner
     preserve-3d stage is not flattened. */
  mask-image: radial-gradient(closest-side, #000 40%, rgba(var(--shadow-rgb), .5) 70%, transparent 100%);
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, rgba(var(--shadow-rgb), .5) 70%, transparent 100%);
}
/* the stage is tilted, so the rings read as discs stacked in space */
.dial3d, .stage3d__deck {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(58deg) rotateZ(-16deg);
  animation: dialDrift 26s ease-in-out infinite alternate;
}
@keyframes dialDrift {
  from { transform: rotateX(58deg) rotateZ(-16deg); }
  to   { transform: rotateX(50deg) rotateZ(6deg); }
}
.dial3d__layer, .stage3d__layer {
  position: absolute; inset: 0;
  transform: translateZ(var(--z));
  filter: blur(var(--blur));
  opacity: var(--op);
}
.dial3d__layer svg, .stage3d__layer svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; }

.dl-tick { opacity: .5; }
.dl-hair { opacity: .16; stroke-width: 1; }
.dl-arc  { opacity: .62; }
.dl-arc--hot { opacity: 1; filter: drop-shadow(0 0 7px rgba(var(--mint-rgb), .75)); }
.dl-sat {
  fill: var(--mint); stroke: none;
  filter: drop-shadow(0 0 8px rgba(var(--mint-rgb), .95));
}
.dl-sat--sm { opacity: .75; }
.dl-core {
  fill: var(--mint); stroke: none;
  filter: drop-shadow(0 0 14px rgba(var(--mint-rgb), 1));
}
.dl-pulse {
  stroke: var(--mint); stroke-width: 1.2;
  transform-origin: 260px 260px;
  animation: dialPulse 3.6s ease-out infinite;
}
@keyframes dialPulse {
  0%   { transform: scale(.4); opacity: .85; }
  70%,
  100% { transform: scale(3);  opacity: 0; }
}

/* each ring turns at its own rate and direction — the offsets are what make
   it read as an instrument rather than a spinner */
.spin-a, .spin-b, .spin-c, .spin-d, .spin-e, .spin-f, .spin-g { transform-origin: 260px 260px; }
.spin-a { animation: dialSpin 150s linear infinite; }
.spin-b { animation: dialSpin  72s linear infinite reverse; }
.spin-c { animation: dialSpin  96s linear infinite; }
.spin-d { animation: dialSpin  26s linear infinite reverse; }
.spin-e { animation: dialSpin  19s linear infinite; }
.spin-f { animation: dialSpin  40s linear infinite reverse; }
.spin-g { animation: dialSpin  13s linear infinite; }
@keyframes dialSpin { to { transform: rotate(360deg); } }

/* pool of light on the stage floor — sells the tilt */
.dial3d__shadow, .stage3d__floor {
  position: absolute; left: 50%; top: 50%;
  width: 76%; aspect-ratio: 1;
  transform: translate(-50%, -50%) translateZ(-190px);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--mint-rgb), .16), rgba(var(--blue-rgb), .06) 55%, transparent 78%);
  filter: blur(18px);
}
/* vertical column through the core */
.dial3d__beam, .stage3d__beam {
  position: absolute; left: 50%; top: 50%;
  width: 2px; height: 86%;
  transform: translate(-50%, -50%);
  background: linear-gradient(to bottom, transparent, rgba(var(--mint-rgb), .34) 48%, transparent);
  filter: blur(1.5px);
  animation: dialBeam 5.5s ease-in-out infinite;
}
@keyframes dialBeam { 0%,100% { opacity: .35; } 50% { opacity: .85; } }

@media (max-width: 1019px) {
  /* behind the copy on narrow screens, dialled right back */
  .page-hero__viz {
    top: 2%; right: -20%; width: 118vw; transform: none; opacity: .42;
  }
}
.crumb { display: flex; align-items: center; gap: 10px; color: var(--ink-3); margin-bottom: 24px; }
.crumb a { color: var(--steel-dim); transition: color .2s; }
.crumb a:hover { color: var(--mint); }
.crumb span { opacity: .45; }
.page-hero__title {
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -.03em; color: var(--ink);
}
.page-hero__lede { margin-top: 24px; max-width: 56ch; font-size: 1.0625rem; line-height: 1.8; color: var(--ink-2); }


/* ── 02 footprint ───────────────────────────────────────────────────────── */
.ab-geo { background: var(--surface); border-top: 1px solid var(--hair); overflow: hidden; }
/* Now the section's only element, so it runs wide and centred. Origin sits on
   the three-city cluster (≈71%/63% of the artwork) so scaling leaves that
   cluster put; the translate then brings it to the middle of the section. */
.ab-geo__map { width: min(100%, 1120px); margin-inline: auto; }
/* Sized rather than transform-scaled. Two reasons: the figure carries .reveal
   and `.reveal.in { transform: none }` (0,2,0) silently wipes any transform put
   there; and a real width lets the layout account for the height, so the plate
   cannot ride up over the section heading. */
.ab-geo__plate { position: relative; width: 98%; margin-inline: auto; }
/* No CSS mask here: `closest-side` resolves against the short axis on this wide
   artwork and crops it to a small disc. The periphery is already dissolved by
   the per-dot opacity falloff baked into china-dots.svg. */
.ab-geo__dots { width: 100%; height: auto; display: block; }
.ab-geo__pins {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
  color: rgba(var(--mint-rgb), .5);
}
.geo-link path { stroke-dasharray: 4 4; animation: geoFlow 2.4s linear infinite; }
@keyframes geoFlow { to { stroke-dashoffset: -16; } }
.geo-halo { fill: rgba(var(--mint-rgb), .10); }
.geo-pin--hq .geo-halo { fill: rgba(var(--mint-rgb), .16); animation: geoPulse 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes geoPulse { 0%,100% { opacity: .5; transform: scale(.86); } 50% { opacity: 1; transform: scale(1.12); } }
.geo-ring { fill: none; stroke: rgba(var(--mint-rgb), .5); stroke-width: 1.2; }
.geo-core { fill: var(--mint); }
.geo-pin--hq .geo-core { filter: drop-shadow(0 0 6px rgba(var(--mint-rgb), .9)); }
/* labels sit directly on the dot matrix — a dark halo keeps them readable */
.geo-name, .geo-role {
  paint-order: stroke; stroke: var(--bg); stroke-width: 4.5px; stroke-linejoin: round;
}
.geo-name { fill: var(--ink); font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.geo-role { fill: var(--ink-2); font-size: 9.5px; font-weight: 500; letter-spacing: .04em; stroke-width: 3px; }
.geo-name--l, .geo-role--l { text-anchor: end; }

/* ── 03 team ────────────────────────────────────────────────────────────── */
.ab-team { background: var(--bg); border-top: 1px solid var(--hair); }
.team__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 1.8vw, 24px); }
.team__card {
  padding: 32px;
  border: 1px solid var(--hair); border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(var(--tint-rgb), .022), transparent 40%), var(--card);
}
.team__card--eco {
  border-color: rgba(var(--mint-rgb), .22);
  background: linear-gradient(140deg, rgba(var(--mint-rgb), .06), transparent 52%), var(--card-hi);
}
.team__card h3 {
  display: flex; flex-direction: column; gap: 10px;
  font-size: 1.25rem; font-weight: 700; color: var(--ink); letter-spacing: -.015em;
}
.team__card h3 .mono { color: var(--mint); opacity: .8; font-size: .625rem; }
.team__card > p { margin-top: 14px; font-size: .875rem; line-height: 1.8; color: var(--ink-3); }
.orgs { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.orgs li {
  padding: 9px 18px; border-radius: 999px;
  font-size: .9375rem; font-weight: 600; letter-spacing: .01em; color: var(--ink-2);
  border: 1px solid var(--hair-2); background: rgba(var(--tint-rgb), .022);
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.orgs li:hover { border-color: var(--hair-3); color: var(--ink); }
.orgs--eco li { color: var(--mint); border-color: rgba(var(--mint-rgb), .28); background: rgba(var(--mint-rgb), .06); }
.orgs--eco li:hover { border-color: rgba(var(--mint-rgb), .55); }

/* ── 04 credentials ─────────────────────────────────────────────────────── */
.ab-cred { background: var(--surface); border-top: 1px solid var(--hair); }

@media (max-width: 1100px) {
  /* stacked layout: the map spans the full column, so 1.5× would push 上海's
     label past the right edge — ease the scale and pull the origin rightwards */
  .ab-geo__plate { width: 112%; margin-left: -14%; }
}
@media (max-width: 860px) {
  .team__grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .geo-name { font-size: 19px; }
  .geo-role { font-size: 12px; }
}
@media (max-width: 420px) {
}



/* ── about page runs a tighter rhythm than the homepage ─────────────────────
   The homepage earns its air from full-bleed visuals between sections; this
   page is mostly text-and-card blocks, so the same spacing reads as loose. */
.page-about {
  --sec-y: clamp(56px, 6.2vw, 96px);
}
.page-about .sec-head { margin-bottom: clamp(30px, 3.4vw, 46px); }
.page-about .lede { margin-top: 16px; }
.page-about .page-hero {
  padding: calc(68px + clamp(56px, 6.5vw, 96px)) 0 clamp(48px, 5.5vw, 78px);
}
.page-about .page-hero__lede { margin-top: 20px; }
.page-about .team__card { padding: 28px; }
.page-about .orgs { margin-top: 20px; }
.page-about.page-about .cta { padding-block: clamp(64px, 7vw, 104px); }

/* ─────────────────────────────── RESPONSIVE ─────────────────────────────── */
@media (max-width: 1100px) {
  .flagship__body { grid-template-columns: 1fr; }
  .pareto { grid-template-columns: 1fr; }
  .about__grid { grid-template-columns: 1fr; }
  .trust__item--iso { margin-left: 0; width: 100%; }
}

@media (max-width: 920px) {
  .nav__links { display: none; }
  /* collapse to brand | actions once the centre column is empty */
  .nav__inner { grid-template-columns: auto 1fr; }
  .nav__actions { grid-column: 2; }
  .nav__toggle { display: flex; }
  .trinity__grid { grid-template-columns: 1fr; }
  .pillar--os { grid-template-columns: 1fr; gap: 24px; }
  .card { min-height: 0; }

  .eco__logos { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  body { font-size: 15px; }
  .nav__aux { display: none; }   /* the mobile menu already carries it */
  .nav__inner { gap: 16px; }
  .nav__brand img { height: 22px; }
  .hero { padding-top: 96px; }
  /* on phones the fabric sits behind the whole column, so lift the mask */
  .hero__canvas {
    mask-image: radial-gradient(120% 62% at 60% 34%, #000 10%, transparent 82%);
    -webkit-mask-image: radial-gradient(120% 62% at 60% 34%, #000 10%, transparent 82%);
  }
  .hero__title { letter-spacing: -.025em; }
  .hero__cta .btn { flex: 1 1 100%; }
  .trust__inner { padding-block: 16px; gap: 12px 24px; }
  .trust__item { font-size: .75rem; }
  .rack__die { grid-template-columns: repeat(8, 1fr); }
  .rack__meta { grid-template-columns: 1fr; gap: 12px; }
  .rack__meta > div + div { border-left: 0; border-top: 1px solid var(--hair); padding-top: 12px; }
  .fspec { grid-template-columns: 34px 1fr; padding-right: 0; }
  .eco__layer { grid-template-columns: 1fr; justify-items: center; gap: 14px; text-align: center; }
  .eco__layer__k { align-items: center; }
  .eco__tags li { font-size: .75rem; padding: 4px 10px; }
  .cred { grid-template-columns: 76px 1fr; gap: 12px; }
  .cta__actions .btn { flex: 1 1 100%; }

}

/* ────────────────────────────── REDUCED MOTION ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .fr-curve { stroke-dashoffset: 0; }
  .fr-area, .fr-pt, .fr-boost, .fr-mult { opacity: 1; }
  .hero__scanline { display: none; }
}