@charset "utf-8";
/* ============================================================
   FUTURA — website stylesheet
   Implements futura-brand-visual v1.1.0 (GUIDELINES.md + GRAPHIC-ELEMENTS.md).
   Core rule: ~90% of any surface is neutral, <=10% is Futura Blue.
   Blue is structure and emphasis — never decoration, never a background
   larger than a tag chip (tint callouts excepted).
   ============================================================ */

/* ---------- 1. Fonts ----------------------------------------------
   Drop Inter + Noto Sans SC woff2 files into /assets/fonts to lock the
   brand faces (see scripts/fetch-fonts.sh). Missing files degrade to the
   system stack rather than breaking the page. */
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans SC';
  src: url('/assets/fonts/NotoSansSC-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+2E80-9FFF, U+3000-303F, U+FF00-FFEF, U+4E00-9FFF;
}
@font-face {
  font-family: 'Noto Sans SC';
  src: url('/assets/fonts/NotoSansSC-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+2E80-9FFF, U+3000-303F, U+FF00-FFEF, U+4E00-9FFF;
}
@font-face {
  font-family: 'Noto Sans SC';
  src: url('/assets/fonts/NotoSansSC-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+2E80-9FFF, U+3000-303F, U+FF00-FFEF, U+4E00-9FFF;
}
@font-face {
  font-family: 'Noto Sans SC';
  src: url('/assets/fonts/NotoSansSC-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+2E80-9FFF, U+3000-303F, U+FF00-FFEF, U+4E00-9FFF;
}
@font-face {
  font-family: 'Noto Sans SC';
  src: url('/assets/fonts/NotoSansSC-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+2E80-9FFF, U+3000-303F, U+FF00-FFEF, U+4E00-9FFF;
}

/* ---------- 2. Tokens --------------------------------------------- */
:root {
  /* colour — tokens/tokens.css */
  --blue: #0062ff;
  --ink: #0a0a0a;
  --white: #fff;
  --text: #1b1b1d;
  --text-2: #34343a;
  --text-3: #3c3c42;
  --grey: #6a6a70;
  --dark-text: #fff;
  --dark-text-2: #e7e7ea;
  --dark-text-3: #c9c9ce;
  --dark-grey: #8a8a90;
  --dark-faint: #6f6f76;
  --tint: #eff4ff;
  --card: #fcfcfd;
  --line: #e8e8ec;
  --line-soft: #eef0f3;
  --dark-line: #22222a;

  /* type */
  --font-brand: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial,
    sans-serif;
  --font-body: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'PingFang SC',
    'Hiragino Sans GB', 'Microsoft YaHei', 'Source Han Sans SC', 'Noto Sans CJK SC', sans-serif;

  --fs-display: clamp(1.85rem, 1rem + 4.45vw, 4.5rem);
  --fs-h2: clamp(1.6rem, 1.05rem + 2.1vw, 2.5rem);
  --fs-h3: clamp(1.075rem, 0.95rem + 0.5vw, 1.35rem);
  --fs-lead: clamp(1rem, 0.94rem + 0.28vw, 1.175rem);
  --fs-body: clamp(0.95rem, 0.92rem + 0.14vw, 1.02rem);
  --fs-small: 0.9rem;
  --fs-caption: 0.815rem;
  --fs-label: 0.69rem;
  --fs-micro: 0.645rem;

  --ls-wordmark: 0.06em;
  --ls-label: 0.2em;

  /* layout */
  --wrap: 1200px;
  --wrap-narrow: 740px;
  --gutter: clamp(1.25rem, 4.5vw, 3.5rem);
  --section-y: clamp(4.5rem, 8vw, 8.25rem);
  --nav-h: 68px;

  /* signature marks */
  --bar-w: 46px;
  --bar-h: 4px;
  --rule-w: 34px;
  --rule-h: 3px;
  --r-card: 7px;
  --r-tag: 4px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.55s;
}

/* ---------- 3. Reset ---------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}
body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.72;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1,
h2,
h3,
h4,
p,
figure,
dl,
dd {
  margin: 0;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
img,
picture,
svg {
  display: block;
  max-width: 100%;
}
/* `hidden` must win over any component display rule (tab panels, drawer, form success). */
[hidden] {
  display: none !important;
}
img {
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Blue on ink is a forbidden contrast pair (GUIDELINES §2.3), so dark
   surfaces take a white focus ring. */
.hero :focus-visible,
.band :focus-visible,
.footer :focus-visible,
.drawer :focus-visible,
.nav.is-dark :focus-visible,
.nav.is-drawer-open :focus-visible,
.lab :focus-visible {
  outline-color: #fff;
}
::selection {
  background: var(--blue);
  color: #fff;
}

/* ---------- 4. Primitives ----------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow {
  max-width: var(--wrap-narrow);
}

.skiplink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: 0.75rem 1.25rem;
  font-size: var(--fs-caption);
}
.skiplink:focus {
  left: 0;
}

.label {
  font-family: var(--font-brand);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--grey);
  line-height: 1.6;
}
.label--dark {
  color: var(--dark-grey);
}
.microlabel {
  display: block;
  font-family: var(--font-brand);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 0.4rem;
}
.microlabel--dark {
  color: var(--dark-grey);
}
.caption {
  font-size: var(--fs-caption);
  color: var(--grey);
  line-height: 1.6;
}
.lead {
  font-size: var(--fs-lead);
  line-height: 1.72;
  color: var(--text-2);
}
.lead--strong {
  font-weight: 500;
  color: var(--text);
}
.h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.18;
  color: var(--ink);
  font-family: var(--font-body);
}
.h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}
:lang(zh) .h2,
:lang(zh) .hero__title {
  letter-spacing: 0.03em;
}
:lang(en) .h2,
:lang(en) .hero__title {
  letter-spacing: -0.015em;
}
.footnote {
  margin-top: 1.75rem;
  font-size: var(--fs-caption);
  color: var(--grey);
  line-height: 1.65;
  max-width: 62ch;
}
.footnote--dark {
  color: var(--dark-faint);
}

/* blue short-rule — the most distilled brand mark after the wordmark */
.bar {
  display: block;
  width: var(--bar-w);
  height: var(--bar-h);
  background: var(--blue);
}
.rule {
  display: block;
  width: var(--rule-w);
  height: var(--rule-h);
  background: var(--blue);
  margin-top: 0.9rem;
}

.tag {
  display: inline-block;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-brand);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.5px;
  line-height: 1;
  padding: 0.36em 0.55em;
  border-radius: var(--r-tag);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.chip {
  font-family: var(--font-brand);
  font-size: var(--fs-caption);
  line-height: 1.35;
  color: var(--text-2);
  border: 1px solid var(--line);
  border-left: 2px solid var(--blue);
  border-radius: 0 var(--r-tag) var(--r-tag) 0;
  padding: 0.28rem 0.55rem;
  background: var(--card);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1;
  padding: 0.95em 1.5em;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    transform 0.2s var(--ease);
}
.btn--sm {
  padding: 0.7em 1.1em;
  font-size: var(--fs-caption);
}
.btn--solid {
  background: var(--blue);
  color: #fff;
}
.btn--solid:hover {
  background: #0052d6;
}
.btn--ghost {
  border-color: rgb(255 255 255 / 0.28);
  color: #fff;
}
.btn--ghost:hover {
  border-color: #fff;
  background: rgb(255 255 255 / 0.08);
}
.btn:active {
  transform: translateY(1px);
}

/* ---------- 5. Wordmark ------------------------------------------- */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.28em;
  font-family: var(--font-brand);
  font-weight: 800;
  letter-spacing: var(--ls-wordmark);
  font-size: 1.06rem;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}
.wordmark__dot {
  width: 0.19em;
  height: 0.19em;
  border-radius: 50%;
  background: var(--blue);
  flex: none;
}
.nav.is-drawer-open .wordmark,
.nav.is-dark .wordmark,
.footer .wordmark {
  color: #fff;
}

/* ---------- 6. Structural marks ----------------------------------- */
.marks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--blue);
  z-index: 1;
}
.marks span {
  position: absolute;
  display: block;
}
.marks--hero .marks__a {
  top: 13%;
  right: var(--gutter);
}
.marks--hero .marks__b {
  top: calc(13% + 34px);
  right: var(--gutter);
}
/* the arc bleeds off the right edge only — it must never cross the stats text */
.marks--hero .marks__c {
  right: -168px;
  bottom: 17%;
}
.marks--hero .marks__d {
  left: var(--gutter);
  bottom: 19%;
}
/* left-margin cluster: vertical node-line continued on-axis by a dotted trace */
.marks--hero .marks__e {
  top: 22%;
  left: max(1.5rem, calc((100vw - var(--wrap)) / 2 - 26px));
}
.marks--hero .marks__f {
  top: calc(22% + 276px);
  left: calc(max(1.5rem, calc((100vw - var(--wrap)) / 2 - 26px)) + 3px);
}
.marks--hero .marks__g {
  top: calc(var(--nav-h) + 26px);
  right: calc(var(--gutter) + 336px);
}
@media (max-width: 1300px) {
  .marks--hero .marks__e,
  .marks--hero .marks__f,
  .marks--hero .marks__g {
    display: none;
  }
}
.marks--band .marks__a {
  top: 42px;
  right: var(--gutter);
}
.marks--band .marks__d {
  left: var(--gutter);
  bottom: 46px;
}
/* Light content surface: restrained, 70% opacity, margin space only (§5).
   Hidden whenever the outer margin is too narrow to keep it clear of text. */
.marks--light {
  color: var(--blue);
  opacity: 0.7;
}
.marks--light .marks__a {
  top: 18%;
  left: max(1rem, calc((100vw - var(--wrap)) / 2 - 26px));
}
.marks--light .marks__d {
  bottom: 16%;
  left: max(1rem, calc((100vw - var(--wrap)) / 2 - 29px));
}
@media (max-width: 1300px) {
  .marks--light {
    display: none;
  }
}
.marks--footer .marks__a {
  top: 0;
  left: var(--gutter);
}
.marks--footer .marks__b {
  top: 30%;
  right: calc(var(--gutter) + 40px);
}
/* Compact surfaces take at most two clusters (§4.4): keep the arc and one
   small cross, drop the node-line and the dot grid. */
@media (max-width: 900px) {
  .marks--hero .marks__b,
  .marks--footer .marks__b {
    display: none;
  }
  .marks--hero .marks__c {
    right: -210px;
    bottom: 20%;
  }
}
/* Below 720px there is no true margin space left, and marks may never enter a
   text zone (§4.2). Keep a single small cross; drop line, grid and arc. */
@media (max-width: 720px) {
  .marks--hero .marks__a,
  .marks--hero .marks__c,
  .marks--band .marks__a,
  .marks--footer .marks__a {
    display: none;
  }
  .marks--hero .marks__d {
    bottom: auto;
    top: calc(var(--nav-h) + 18px);
    left: auto;
    right: var(--gutter);
  }
}

/* ---------- 7. Navigation ----------------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--nav-h);
  background: rgb(255 255 255 / 0.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition:
    background 0.35s var(--ease),
    border-color 0.35s var(--ease);
}
.nav.is-dark,
.nav.is-drawer-open {
  background: rgb(10 10 10 / 0.72);
  border-bottom-color: rgb(255 255 255 / 0.1);
}
.nav.is-drawer-open {
  background: var(--ink);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  height: var(--nav-h);
}
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.9vw, 1.9rem);
  margin-inline-start: auto;
}
.nav__link {
  position: relative;
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--text-2);
  padding: 0.35rem 0;
  transition: color 0.3s var(--ease);
}
.nav.is-drawer-open .nav__link,
.nav.is-dark .nav__link {
  color: var(--dark-text-3);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--blue);
  transition: width 0.35s var(--ease);
}
.nav__link:hover,
.nav__link.is-current {
  color: var(--ink);
}
.nav.is-drawer-open .nav__link:hover,
.nav.is-dark .nav__link:hover,
.nav.is-dark .nav__link.is-current {
  color: #fff;
}
.nav__link.is-current::after,
.nav__link:hover::after {
  width: 100%;
}
.nav__end {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
}
.langswitch {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-brand);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.langswitch__item {
  color: var(--grey);
  transition: color 0.3s var(--ease);
}
.langswitch__item:hover {
  color: var(--ink);
}
.langswitch__item.is-active {
  color: var(--blue);
}
.nav.is-drawer-open .langswitch__item,
.nav.is-dark .langswitch__item {
  color: var(--dark-grey);
}
.nav.is-dark .langswitch__item:hover {
  color: #fff;
}
.nav.is-drawer-open .langswitch__item.is-active,
.nav.is-dark .langswitch__item.is-active {
  color: #fff;
}
.langswitch__sep {
  color: var(--line);
}
.nav.is-drawer-open .langswitch__sep,
.nav.is-dark .langswitch__sep {
  color: rgb(255 255 255 / 0.24);
}
.nav__toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 0;
  padding: 0.4rem;
  cursor: pointer;
}
.nav__toggle-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.nav__burger {
  display: block;
  width: 22px;
}
.nav__burger i {
  display: block;
  height: 2px;
  background: var(--ink);
  transition: transform 0.35s var(--ease);
}
.nav__burger i + i {
  margin-top: 6px;
}
.nav.is-drawer-open .nav__burger i,
.nav.is-dark .nav__burger i {
  background: #fff;
}
[data-drawer-toggle][aria-expanded='true'] .nav__burger i:first-child {
  transform: translateY(4px) rotate(45deg);
}
[data-drawer-toggle][aria-expanded='true'] .nav__burger i:last-child {
  transform: translateY(-4px) rotate(-45deg);
}
.nav__progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
}
.nav__progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--blue);
}

.drawer {
  position: fixed;
  inset: var(--nav-h) 0 0;
  z-index: 99;
  background: var(--ink);
  overflow-y: auto;
  isolation: isolate;
  animation: drawer-in 0.4s var(--ease);
}
/* Reuses the 9:16 texture the mobile hero already loaded, so on a phone the
   drawer costs no extra request; as a CSS background it is never fetched on
   desktop, where the drawer does not exist. Scrim keeps links on >=95% ink. */
.drawer__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: image-set(
    url('/assets/img/hero-portrait-620.webp') type('image/webp'),
    url('/assets/img/hero-portrait-620.jpg') type('image/jpeg')
  );
  background-size: cover;
  background-position: 50% 30%;
  background-repeat: no-repeat;
  opacity: 0.52;
  filter: grayscale(1) contrast(1.14) brightness(1.06);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 74%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 74%, transparent 100%);
}
/* Sibling of .drawer__bg, not a child: opacity applies to a whole subtree,
   so nesting it would fade the scrim along with the texture. */
.drawer__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgb(10 10 10 / 0.9) 0%,
    rgb(10 10 10 / 0.7) 55%,
    rgb(10 10 10 / 0.3) 100%
  );
}
.drawer__inner {
  position: relative;
  z-index: 1;
}
@keyframes drawer-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}
.drawer__inner {
  padding: clamp(1.5rem, 6vw, 3rem) var(--gutter) 4rem;
}
.drawer__link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--dark-line);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 600;
}
.drawer__num {
  font-family: var(--font-brand);
  font-size: var(--fs-caption);
  letter-spacing: 0.12em;
  color: var(--blue);
}
.drawer__link--cta {
  color: var(--blue);
}
.drawer__langs {
  display: flex;
  gap: 0.5rem;
  margin-top: 2rem;
  color: var(--dark-grey);
}
.drawer__langs .langswitch__item {
  color: var(--dark-grey);
}
.drawer__langs .langswitch__item.is-active {
  color: #fff;
}
body.is-locked {
  overflow: hidden;
}

/* ---------- 8. Hero ----------------------------------------------- */
.hero {
  position: relative;
  background: var(--ink);
  color: #fff;
  padding-top: calc(var(--nav-h) + clamp(4rem, 11vh, 8rem));
  overflow: hidden;
  isolation: isolate;
}
/* The texture band keeps the source's own 16:9 proportion (56.25vw), so
   `cover` never crops into the empty ink centre of the frame — the mineral
   structure at the edges is what carries the image. Capped so it stays a
   band on short viewports (§5: texture in the upper band, faded to ink). */
.hero__bg {
  position: absolute;
  inset: 0 0 auto;
  height: min(88%, 56.25vw);
  min-height: 62%;
  z-index: 0;
}
/* tex-wide169-01 carries its mineral structure on the left edge, which is
   where the headline sits. Mirroring the frame moves that structure into the
   open right margin — the texture is symmetric-neutral, so this reads as a
   crop decision, not a modified asset. */
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  opacity: 0.95;
  transform: scaleX(-1);
  filter: grayscale(1) contrast(1.14) brightness(1.12);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 70%, transparent 99%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 70%, transparent 99%);
}
/* The scrim darkens the text column, not the whole frame: the copy sits on
   >=95% ink on the left while the texture stays legible on the right. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      100deg,
      var(--ink) 0%,
      rgb(10 10 10 / 0.93) 36%,
      rgb(10 10 10 / 0.5) 60%,
      rgb(10 10 10 / 0.12) 100%
    ),
    linear-gradient(180deg, var(--ink) 0%, rgb(10 10 10 / 0) 22%, rgb(10 10 10 / 0) 62%, var(--ink) 97%);
}
.hero__inner {
  position: relative;
  z-index: 2;
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}
.hero__eyebrow {
  margin-bottom: clamp(1.25rem, 3vw, 2.25rem);
}
.hero__title {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1.08;
  color: #fff;
  max-width: 17ch;
}
.hero__title span {
  display: block;
}
:lang(en) .hero__title {
  max-width: 20ch;
}
.hero .bar {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 clamp(1.25rem, 2.5vw, 1.75rem);
}
.hero__lead {
  max-width: 62ch;
  color: var(--dark-text-3);
  font-size: var(--fs-lead);
  line-height: 1.78;
}
.hero__tagline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.4rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-family: var(--font-brand);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #fff;
}
.hero__tagline li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.hero__tagline li::before {
  content: '';
  width: 7px;
  height: 7px;
  background: var(--blue);
  flex: none;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.hero__stats {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgb(255 255 255 / 0.12);
  background: rgb(10 10 10 / 0.6);
}
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.stat {
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  padding-inline-end: 1.5rem;
}
.stat + .stat {
  border-inline-start: 1px solid rgb(255 255 255 / 0.12);
  padding-inline-start: clamp(1rem, 2.4vw, 2rem);
}
.stat__value {
  font-family: var(--font-brand);
  font-size: clamp(1.9rem, 1.2rem + 2.1vw, 2.85rem);
  font-weight: 800;
  line-height: 1;
  color: #fff;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.stat__unit {
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--blue);
}
.stat__note {
  margin-top: 0.65rem;
  font-size: var(--fs-caption);
  line-height: 1.55;
  color: var(--dark-grey);
  max-width: 32ch;
}

/* ---------- 9. Marquee -------------------------------------------- */
.marquee {
  background: var(--ink);
  border-top: 1px solid rgb(255 255 255 / 0.1);
  overflow: hidden;
  padding: 0.9rem 0;
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 46s linear infinite;
}
.marquee__list {
  display: flex;
  align-items: center;
}
.marquee__list li {
  display: flex;
  align-items: center;
  font-family: var(--font-brand);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--dark-text-3);
  padding-inline: clamp(1rem, 2.2vw, 1.75rem);
  white-space: nowrap;
}
.marquee__list li::after {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--blue);
  margin-inline-start: clamp(1rem, 2.2vw, 1.75rem);
  opacity: 0.85;
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}
.marquee:hover .marquee__track {
  animation-play-state: paused;
}

/* ---------- 10. Sections ------------------------------------------ */
.section {
  padding-block: var(--section-y);
  border-top: 1px solid var(--line-soft);
  position: relative;
}
.section:first-of-type {
  border-top: 0;
}
.sechead {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 2.6vw, 2rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.sechead__num {
  font-family: var(--font-brand);
  font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.15rem);
  font-weight: 800;
  line-height: 0.9;
  color: var(--blue);
  letter-spacing: -0.02em;
}
.sechead__body .h2 {
  margin-top: 0.35rem;
  max-width: 24ch;
}
.sechead .lead {
  margin-top: 1.35rem;
  max-width: 68ch;
}
.sechead--dark .h2 {
  color: #fff;
}
.sechead--dark .lead {
  color: var(--dark-text-3);
}

.grid--split {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}
.prose p + p {
  margin-top: 1.15rem;
}
.prose p {
  color: var(--text-2);
}
:lang(zh) .prose p {
  text-align: justify;
  text-justify: inter-ideograph;
}

/* ---------- 11. Judgment ------------------------------------------ */
.callout--quote {
  background: var(--tint);
  border-inline-start: 4px solid var(--blue);
  border-radius: 0 6px 6px 0;
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.callout--quote p {
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.62;
  color: var(--ink);
}
.callout--tint {
  background: var(--tint);
  border-inline-start: 4px solid var(--blue);
  border-radius: 0 6px 6px 0;
  padding: clamp(1.35rem, 2.6vw, 2rem);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.callout__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.6rem;
}
.callout--tint p {
  color: var(--text-2);
  max-width: 88ch;
}

.notlist {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
}
.notlist__head .caption {
  margin-top: 0.6rem;
  max-width: 30ch;
}
.notlist__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 0.85rem clamp(1.25rem, 3vw, 2.5rem);
}
.notlist__items li {
  display: flex;
  gap: 0.7rem;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text-2);
}
/* A rotated cross is explicitly forbidden (GRAPHIC-ELEMENTS §7: never rotate
   crosses to x). A hairline dash carries the same "not" meaning and stays
   inside the existing rule/hairline vocabulary. */
.notlist__x {
  flex: none;
  width: 12px;
  height: 2px;
  margin-top: 0.72em;
  background: var(--grey);
}

/* ---------- 12. Layers (three paid layers) ------------------------ */
/* No inner hairline: each card's 4px accent edge already separates the
   columns, and a grey rule immediately beside a blue bar reads as a doubled
   line. The outer hairline still frames the group. */
.layers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}
.layer {
  background: var(--white);
  padding: clamp(1.5rem, 2.8vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  position: relative;
}
/* GUIDELINES §4.3 blue-edge card: 4px solid blue left border. It is a
   signature device, so it is present at rest — hover only deepens the fill. */
.layer::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: var(--blue);
}
.layer {
  transition: background 0.4s var(--ease);
}
.layer:hover,
.layer:focus-within {
  background: var(--card);
}
.layer__head {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}
.layer__num {
  font-family: var(--font-brand);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--blue);
}
.layer__title {
  font-size: var(--fs-h3);
  font-weight: 800;
  color: var(--ink);
  margin-top: 0.3rem;
  line-height: 1.25;
}
.layer__scope {
  font-size: var(--fs-caption);
  color: var(--grey);
  margin-top: 0.3rem;
}
.layer__body {
  font-size: var(--fs-small);
  color: var(--text-2);
  line-height: 1.7;
}
.layer__items {
  display: grid;
  gap: 0.55rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  margin-top: auto;
}
.layer__items > div {
  display: grid;
  grid-template-columns: minmax(4.5em, auto) 1fr;
  gap: 0.75rem;
  font-size: var(--fs-caption);
  line-height: 1.55;
}
.layer__items dt {
  font-family: var(--font-brand);
  font-weight: 700;
  color: var(--blue);
  letter-spacing: 0.02em;
}
.layer__items dd {
  color: var(--text-2);
}
.layer__boundary {
  font-size: var(--fs-caption);
  color: var(--grey);
  line-height: 1.6;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line-soft);
}

/* ---------- 13. Production Loop ----------------------------------- */
.loop__rail {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 2px solid var(--line);
  position: relative;
}
.loop__tab {
  position: relative;
  background: none;
  border: 0;
  border-top: 2px solid transparent;
  margin-top: -2px;
  padding: 1.35rem 0.75rem 1.25rem 0;
  text-align: start;
  cursor: pointer;
  color: var(--grey);
  transition: color 0.35s var(--ease);
}
.loop__tab:hover {
  color: var(--text);
}
.loop__tab.is-active {
  border-top-color: var(--blue);
  color: var(--ink);
}
.loop__dot {
  position: absolute;
  top: -5px;
  inset-inline-start: 0;
  width: 8px;
  height: 8px;
  background: var(--line);
  transition: background 0.35s var(--ease);
}
.loop__tab.is-active .loop__dot {
  background: var(--blue);
}
.loop__num {
  display: block;
  font-family: var(--font-brand);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--blue);
  opacity: 0.55;
  transition: opacity 0.35s var(--ease);
}
.loop__tab.is-active .loop__num {
  opacity: 1;
}
.loop__en {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-brand);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.14em;
}
.loop__zh {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--fs-caption);
  font-weight: 500;
}
.loop__hint {
  margin-top: 0.9rem;
  text-align: end;
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.loop__panels {
  margin-top: 1.75rem;
}
.loop__panel {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--card);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--blue);
  border-radius: 0 var(--r-card) var(--r-card) 0;
}
.loop__panel[hidden] {
  display: none;
}
.loop__panel.is-entering {
  animation: panel-in 0.42s var(--ease);
}
@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
.loop__panelhead {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  grid-column: 1 / -1;
}
.loop__panelnum {
  font-family: var(--font-brand);
  font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.35rem);
  font-weight: 800;
  line-height: 0.9;
  color: var(--blue);
}
.loop__question {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--ink);
  margin-top: 0.3rem;
  max-width: 26ch;
}
.loop__body {
  color: var(--text-2);
  font-size: var(--fs-small);
  line-height: 1.75;
}
.loop__meta {
  display: grid;
  gap: 1.35rem;
}
.loop__exit p:not(.microlabel) {
  font-size: var(--fs-caption);
  color: var(--text-2);
  line-height: 1.65;
}

/* ---------- 14. Gates (dark band) --------------------------------- */
.band {
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  border-top: 0;
}
.band__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* A 1:1 source covers a tall section without heavy upscaling. The gate cards
   carry their own ink fill, so the texture can stay legible in the gutters —
   only the section head needs a scrim. */
.band__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  opacity: 0.72;
  filter: grayscale(1) contrast(1.16) brightness(1.08);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 88%, transparent 100%);
}
.band__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      var(--ink) 0%,
      rgb(10 10 10 / 0.78) 12%,
      rgb(10 10 10 / 0.5) 34%,
      rgb(10 10 10 / 0.5) 78%,
      var(--ink) 100%
    ),
    linear-gradient(85deg, rgb(10 10 10 / 0.72) 0%, rgb(10 10 10 / 0.25) 52%, rgb(10 10 10 / 0.45) 100%);
}
.band .wrap {
  position: relative;
  z-index: 2;
}
.gates {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: rgb(255 255 255 / 0.12);
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: var(--r-card);
  overflow: hidden;
}
.gate {
  background: rgb(10 10 10 / 0.86);
  padding: clamp(1.35rem, 2.6vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  transition: background 0.4s var(--ease);
}
/* Hover marks the card with the blue edge instead of thickening its fill —
   over a textured surface, more opacity reads as heavier, not as lifted.
   An inset shadow avoids the layout shift a real border would cause. */
.gate:hover,
.gate:focus-within {
  background: rgb(14 14 18 / 0.9);
  box-shadow: inset 3px 0 0 var(--blue);
}
.gate__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.gate__title {
  font-size: var(--fs-h3);
  font-weight: 800;
  color: #fff;
}
.gate__en {
  margin-top: -0.35rem;
}
.gate__question {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--dark-text-2);
  line-height: 1.6;
}
.gate__evidence {
  font-size: var(--fs-caption);
  color: var(--dark-text-3);
  line-height: 1.62;
  opacity: 0.86;
}
.gate__signer {
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid rgb(255 255 255 / 0.12);
  font-size: var(--fs-caption);
  color: #fff;
}
.gate__signer .microlabel {
  color: var(--blue);
  margin-bottom: 0.25rem;
}

/* ---------- 15. Stance -------------------------------------------- */
.stance {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3.5vw, 3rem);
}
.stance__panel {
  border-top: 2px solid var(--ink);
  padding-top: 1.5rem;
}
.stance__panel .h3 {
  margin: 0.5rem 0 1rem;
  max-width: 24ch;
}
.stance__intro {
  font-size: var(--fs-small);
  color: var(--text-2);
  line-height: 1.72;
}
.numlist {
  display: grid;
  gap: 0.9rem;
  margin-top: 1.5rem;
}
.numlist li {
  display: grid;
  grid-template-columns: 2.1rem 1fr;
  gap: 0.5rem;
  font-size: var(--fs-caption);
  line-height: 1.65;
  color: var(--text-2);
}
.numlist__n {
  font-family: var(--font-brand);
  font-weight: 700;
  color: var(--blue);
  letter-spacing: 0.04em;
}
.boundary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  margin-top: 1.5rem;
}
.boundary__col {
  background: var(--white);
  padding: 1.1rem 1.15rem 1.35rem;
}
.boundary__col--hold {
  background: var(--card);
}
.boundary__col--reuse {
  background: var(--tint);
}
.boundary__head {
  font-family: var(--font-brand);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 0.7rem;
  margin-bottom: 0.8rem;
  border-bottom: 1px solid var(--line);
}
.boundary__col--reuse .boundary__head {
  color: var(--blue);
  border-bottom-color: rgb(0 98 255 / 0.22);
}
.boundary__col li {
  font-size: var(--fs-caption);
  line-height: 1.55;
  color: var(--text-2);
  padding-inline-start: 0.85rem;
  position: relative;
}
.boundary__col li + li {
  margin-top: 0.55rem;
}
.boundary__col li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.65em;
  width: 5px;
  height: 5px;
  background: var(--grey);
}
.boundary__col--reuse li::before {
  background: var(--blue);
}
.proof {
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
.proof p:not(.microlabel) {
  font-size: var(--fs-caption);
  color: var(--text-2);
  line-height: 1.65;
}

/* ---------- 16. Wedge --------------------------------------------- */
.checklist {
  display: grid;
  gap: 0.8rem;
  margin-top: 1.25rem;
}
.checklist li {
  display: flex;
  gap: 0.75rem;
  font-size: var(--fs-small);
  color: var(--text-2);
  line-height: 1.62;
}
.checklist__mk {
  flex: none;
  width: 10px;
  height: 10px;
  margin-top: 0.5em;
  background: var(--blue);
}
.domains {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  margin: 1.25rem 0 1rem;
}
.domain {
  background: var(--card);
  padding: 1.05rem 1.1rem 1.2rem;
}
.domain__zh {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--ink);
  margin-top: 0.35rem;
}
.domain__note {
  font-size: var(--fs-caption);
  color: var(--grey);
  line-height: 1.55;
  margin-top: 0.3rem;
}
/* No dashed frame: marks never form a border around content (§7), and a dashed
   rectangle is not in the brand vocabulary. A hairline rule plus one filled
   node is — the same grammar as the header/footer bands. */
.confidential {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.05rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-caption);
  color: var(--grey);
  line-height: 1.6;
}
.confidential__mk {
  flex: none;
  margin-top: 0.42em;
  color: var(--blue);
}
.lab {
  margin-top: clamp(2rem, 4vw, 3rem);
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-card);
  padding: clamp(1.6rem, 3.2vw, 2.6rem);
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr);
  gap: clamp(1.35rem, 3vw, 2.75rem);
  position: relative;
  overflow: hidden;
}
.lab__title {
  font-size: var(--fs-h3);
  font-weight: 800;
  color: #fff;
  margin-top: 0.5rem;
  max-width: 14ch;
}
.lab__body p {
  color: var(--dark-text-3);
  font-size: var(--fs-small);
  line-height: 1.72;
}
.lab__body .microlabel {
  margin-top: 1.4rem;
}
.lab__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1.5rem;
  margin-top: 0.35rem;
}
.lab__metrics li {
  display: grid;
  grid-template-columns: 1.9rem 1fr;
  font-size: var(--fs-caption);
  color: var(--dark-text-2);
  line-height: 1.55;
}
.lab__metrics span {
  font-family: var(--font-brand);
  font-weight: 700;
  color: var(--blue);
}

/* ---------- 17. Team ---------------------------------------------- */
.team {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.member {
  background: var(--white);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 2.2vw, 1.6rem);
  padding: clamp(1.5rem, 2.8vw, 2.25rem);
}
.member__tile {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 20%;
  background: var(--ink);
  display: grid;
  place-items: center;
  flex: none;
}
.member__tile span {
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  letter-spacing: 0.02em;
}
/* No blue dot here: the dot belongs to the wordmark and the F. monogram.
   Putting it beside a person's initial would reproduce the logo lockup with
   the wrong letterform (§1.5). The tile keeps the brand's ink + 20% radius
   geometry only. */
.member__name {
  font-size: var(--fs-h3);
  font-weight: 800;
  color: var(--ink);
}
.member__role {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--blue);
  margin-top: 0.25rem;
}
.member__en {
  margin-top: 0.15rem;
}
.member__bio {
  margin-top: 0.85rem;
  font-size: var(--fs-caption);
  color: var(--text-2);
  line-height: 1.68;
}
.principles {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 2.2fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
}
.principles__head .h3 {
  margin-top: 0.4rem;
}
.principles__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}
.principle {
  background: var(--card);
  padding: 1.15rem 1.25rem 1.35rem;
}
.principle__num {
  font-family: var(--font-brand);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--blue);
}
.principle__title {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--ink);
  margin: 0.3rem 0 0.4rem;
}
.principle p {
  font-size: var(--fs-caption);
  color: var(--text-2);
  line-height: 1.6;
}

/* ---------- 18. Contact ------------------------------------------- */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}
.contact__aside .h3 {
  margin-bottom: 1.1rem;
}
.qlist {
  display: grid;
  gap: 0.85rem;
}
.qlist li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  font-size: var(--fs-caption);
  color: var(--text-2);
  line-height: 1.6;
}
.qlist span {
  font-family: var(--font-brand);
  font-weight: 700;
  color: var(--blue);
}
.contact__email {
  margin-top: 1.75rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
}
.contact__email a {
  color: var(--blue);
  font-weight: 600;
  border-bottom: 1px solid rgb(0 98 255 / 0.3);
}
.contact__email a:hover {
  border-bottom-color: var(--blue);
}

.form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: clamp(1.35rem, 3vw, 2.25rem);
  position: relative;
}
.form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem clamp(1rem, 2vw, 1.5rem);
}
.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}
.field--wide {
  margin-top: 1rem;
}
.field label {
  font-family: var(--font-brand);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.field__req {
  color: var(--blue);
  margin-inline-start: 0.25em;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-tag);
  padding: 0.72rem 0.85rem;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text);
  transition:
    border-color 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}
.field textarea {
  resize: vertical;
  min-height: 7.5rem;
}
.field input::placeholder,
.field textarea::placeholder {
  color: #a6a6ac;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgb(0 98 255 / 0.12);
}
.field.has-error input,
.field.has-error textarea {
  border-color: #c22;
}
.field__error {
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  color: #c22;
  min-height: 1em;
}
.field__error:empty {
  display: none;
}
.field--check {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.65rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}
.field--check input {
  width: 17px;
  height: 17px;
  margin-top: 0.2rem;
  accent-color: var(--blue);
  flex: none;
}
.field--check label {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
  line-height: 1.55;
  flex: 1;
  min-width: 0;
}
.field--check .field__error {
  flex-basis: 100%;
}
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form__foot {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line);
}
.form__status {
  font-size: var(--fs-caption);
  color: var(--grey);
}
.form__status.is-error {
  color: #c22;
}
.form.is-sent .form__grid,
.form.is-sent .field--wide,
.form.is-sent .field--check,
.form.is-sent .form__foot {
  display: none;
}
.form__success {
  display: grid;
  gap: 0.6rem;
  padding: clamp(0.5rem, 2vw, 1.5rem) 0;
}
.form__success-title {
  font-size: var(--fs-h3);
  font-weight: 800;
  color: var(--ink);
}
.form__success p {
  font-size: var(--fs-small);
  color: var(--text-2);
}
.form__success a {
  color: var(--blue);
  font-weight: 600;
}

/* ---------- 19. Footer -------------------------------------------- */
.footer {
  position: relative;
  background: var(--ink);
  color: var(--dark-text-3);
  padding-top: clamp(3rem, 6vw, 5rem);
  overflow: hidden;
  isolation: isolate;
}
/* Dark surfaces are the primary home for the brand texture (§5). The band
   enters from the top edge and is masked out before the link columns, so the
   footer text keeps its >=95% ink ground. */
.footer__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.footer__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
  opacity: 0.8;
  transform: scaleX(-1);
  filter: grayscale(1) contrast(1.16) brightness(1.1);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 100%);
}
/* Link columns sit on the left two thirds; the scrim keeps that side at
   >=95% ink and lets the texture read across the right. */
.footer__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--ink) 0%, rgb(10 10 10 / 0.45) 24%, rgb(10 10 10 / 0.6) 100%),
    linear-gradient(96deg, rgb(10 10 10 / 0.94) 0%, rgb(10 10 10 / 0.8) 42%, rgb(10 10 10 / 0.3) 100%);
}
.footer__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.footer__tagline {
  margin-top: 1.1rem;
  font-size: var(--fs-small);
  color: var(--dark-grey);
  max-width: 26ch;
  line-height: 1.65;
}
.footer__col ul {
  display: grid;
  gap: 0.6rem;
}
.footer__col a {
  font-size: var(--fs-caption);
  color: var(--dark-text-3);
  transition: color 0.3s var(--ease);
}
.footer__col a:hover {
  color: #fff;
}
.footer__muted {
  font-size: var(--fs-caption);
  color: var(--dark-faint);
}
.footer__langs {
  display: flex;
  gap: 0.45rem;
  margin-top: 1.35rem;
  font-family: var(--font-brand);
  font-size: var(--fs-caption);
  font-weight: 600;
}
.footer__langs .langswitch__item {
  color: var(--dark-grey);
}
.footer__langs .langswitch__item.is-active {
  color: #fff;
}
.footer__base {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-block: 1.35rem clamp(1.35rem, 3vw, 2rem);
  border-top: 1px solid var(--dark-line);
  font-size: var(--fs-caption);
  color: var(--dark-faint);
}
.footer__legalname {
  color: var(--dark-text-3);
}
.footer__sep {
  margin-inline: 0.5em;
  color: var(--blue);
}
.footer__icp {
  color: var(--dark-faint);
}
.footer__icp:hover {
  color: var(--dark-text-3);
}
.footer__top {
  font-family: var(--font-brand);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dark-grey);
}
.footer__top:hover {
  color: #fff;
}

/* ---------- 20. Doc + error pages --------------------------------- */
.page-doc,
.page-error {
  padding-top: var(--nav-h);
}
.section--doc,
.section--error {
  padding-block: clamp(3rem, 7vw, 6rem);
  border-top: 0;
}
.doc__title {
  font-size: clamp(1.85rem, 1.3rem + 2vw, 2.75rem);
  font-weight: 800;
  color: var(--ink);
  margin-top: 0.6rem;
  line-height: 1.15;
}
.section--doc .caption {
  margin-top: 1.1rem;
}
.doc__body {
  margin-top: 2.25rem;
}
.doc__h2 {
  font-size: var(--fs-h3);
  font-weight: 800;
  color: var(--ink);
  margin-top: 2.1rem;
  margin-bottom: 0.7rem;
}
.doc__contact {
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.doc__contact a {
  color: var(--blue);
  font-weight: 600;
}
.error {
  text-align: start;
}
.error__code {
  font-family: var(--font-brand);
  font-size: clamp(3.5rem, 2rem + 6vw, 6rem);
  font-weight: 800;
  line-height: 1;
  color: var(--blue);
  margin-bottom: 0.75rem;
}
.error .lead {
  margin-top: 1.5rem;
}
.error .btn {
  margin-top: 2rem;
}

/* ---------- 21. Reveal -------------------------------------------- */
[data-reveal].is-armed {
  opacity: 0;
  transform: translateY(14px);
}
[data-reveal].is-armed.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
}

/* ---------- 22. Responsive ---------------------------------------- */
@media (max-width: 1080px) {
  .layers,
  .gates {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lab {
    grid-template-columns: 1fr;
  }
  .principles,
  .notlist {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 940px) {
  .nav__links {
    display: none;
  }
  .nav__toggle {
    display: flex;
  }
  .nav__cta {
    display: none;
  }
  .grid--split,
  .stance,
  .contact {
    grid-template-columns: 1fr;
  }
  .loop__panel {
    grid-template-columns: 1fr;
  }
  .team {
    grid-template-columns: 1fr;
  }
  .footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .loop__rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 0;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    overflow: hidden;
  }
  /* stacked rail: each stage collapses to a single compact line */
  .loop__tab {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.15rem 0.6rem;
    background: var(--white);
    border-top: 0;
    border-inline-start: 2px solid transparent;
    margin-top: 0;
    padding: 0.85rem 0.9rem;
  }
  .loop__num,
  .loop__en,
  .loop__zh {
    display: inline;
    margin: 0;
  }
  .loop__tab.is-active {
    border-inline-start-color: var(--blue);
    background: var(--card);
  }
  .loop__dot {
    display: none;
  }
  .loop__hint {
    text-align: start;
  }
}

@media (max-width: 720px) {
  :root {
    --nav-h: 60px;
  }
  .stats {
    grid-template-columns: 1fr;
  }
  .stat + .stat {
    border-inline-start: 0;
    border-top: 1px solid rgb(255 255 255 / 0.12);
    padding-inline-start: 0;
  }
  .stat {
    padding-block: 1.15rem;
  }
  .layers,
  .gates,
  .boundary,
  .domains,
  .principles__list,
  .lab__metrics,
  .form__grid {
    grid-template-columns: 1fr;
  }
  .layers,
  .gates {
    border-radius: var(--r-card);
  }
  .layer::before {
    transform: scaleY(1);
  }
  .loop__rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .member {
    grid-template-columns: 1fr;
  }
  .sechead {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .hero__title {
    max-width: none;
  }
}

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

/* ---------- 23. Motion + print ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .marquee__track {
    animation: none;
    transform: none;
  }
  [data-reveal].is-armed {
    opacity: 1;
    transform: none;
  }
}

@media print {
  .nav,
  .drawer,
  .marquee,
  .marks,
  .hero__bg,
  .band__bg,
  .form,
  .footer__top {
    display: none !important;
  }
  body {
    color: #000;
    background: #fff;
  }
  .hero,
  .band,
  .footer,
  .lab {
    background: #fff !important;
    color: #000 !important;
  }
  .hero__title,
  .sechead--dark .h2,
  .gate__title,
  .lab__title {
    color: #000 !important;
  }
  .loop__panel[hidden] {
    display: grid !important;
  }
  .section {
    break-inside: avoid;
  }
}