/* v2: image-led, quiet, generous. Tokens from DESIGN.md; ground matches the photo backdrop. */
:root {
  --ground: #E8E7E4;
  --paper: #F4F4F1;
  --white: #FFFFFF;
  --ink: #1D242A;
  --muted: #5E666D;
  --line: rgba(29,36,42,.14);
  --accent: #2346D8;
  --accent-hover: #1834AE;
  --stage: #1C2329;
  --on-stage: #F2F3F1;
  --on-stage-muted: #9AA4AD;
  --stage-accent: #8FA6FF;
  --sans: "Inter", "Source Sans 3", "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --pad: 64px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 18px; line-height: 1.7; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
html[lang="en"] .zh { display: none !important; }
html[lang="zh-CN"] .en { display: none !important; }
.wrap { max-width: calc(1312px + var(--pad) * 2); margin: 0 auto; padding: 0 var(--pad); }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0; }

/* Top bar sits on the hero ground */
.top { position: absolute; inset: 0 0 auto 0; z-index: 10; }
.top-in { height: 88px; display: flex; align-items: center; gap: 48px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { width: 22px; height: 22px; }
.brand b { font-size: 16px; font-weight: 600; letter-spacing: 0; }
.nav { display: flex; gap: 36px; font-size: 15px; }
.nav a { text-decoration: none; color: var(--ink); opacity: .78; }
.nav a:hover { opacity: 1; }
.top-r { margin-left: auto; display: flex; align-items: center; gap: 28px; font-size: 15px; }
.lang { display: flex; gap: 2px; }
.lang button { border: 0; background: none; font: inherit; font-size: 14px; color: var(--muted); padding: 6px 6px; cursor: pointer; }
.lang button[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
.lang span { color: var(--line); align-self: center; }
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: 4px; background: var(--ink); color: #fff; text-decoration: none; font-size: 15px; font-weight: 500; transition: background-color 160ms ease; }
.btn:hover { background: var(--accent); }
.btn svg { width: 16px; height: 16px; }
.btn-ghost { background: transparent; color: var(--ink); padding: 0; min-height: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding-bottom: 2px; }
.btn-ghost:hover { background: transparent; color: var(--accent); border-color: var(--accent); }
.top .btn { min-height: 40px; padding: 0 18px; font-size: 14px; }
.menu { display: none; border: 0; background: none; width: 44px; height: 44px; align-items: center; justify-content: center; cursor: pointer; }

/* Hero */
.hero { position: relative; background: var(--ground); overflow: hidden; }
.hero-img { position: absolute; right: -4%; top: 0; height: 100%; width: 72%; object-fit: cover; object-position: 30% 50%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
.hero-in { position: relative; min-height: min(880px, 100vh); display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 96px; padding-top: 160px; }
.hero h1 { font-size: 76px; line-height: 1.12; font-weight: 600; max-width: 9.5em; }
html[lang="en"] .hero h1 { font-size: 80px; line-height: 1.02; max-width: 8.5em; }
.hero p { margin-top: 28px; font-size: 19px; color: var(--muted); max-width: 25em; }
html[lang="en"] .hero p { max-width: 32em; }
.hero-act { margin-top: 44px; display: flex; gap: 36px; align-items: center; flex-wrap: wrap; }
.hero-note { position: absolute; right: var(--pad); bottom: 40px; text-align: right; color: var(--muted); line-height: 1.9; }

/* Statement */
.statement { padding: 168px 0 152px; }
.statement p { font-size: 44px; line-height: 1.45; font-weight: 500; max-width: 19em; }
html[lang="en"] .statement p { font-size: 46px; line-height: 1.25; max-width: 22em; }
.statement p em { font-style: normal; color: var(--muted); }

/* Capability features */
.cap { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: 24px; align-items: center; }
.cap + .cap { margin-top: 160px; }
.cap-img { grid-column: 1 / span 7; background: var(--ground); aspect-ratio: 7 / 6; overflow: hidden; }
.cap-img img { width: 100%; height: 100%; object-fit: cover; }
.cap-tx { grid-column: 9 / span 4; }
.cap.rev .cap-img { grid-column: 6 / span 7; grid-row: 1; }
.cap.rev .cap-tx { grid-column: 1 / span 4; grid-row: 1; }
.idx { color: var(--muted); display: block; margin-bottom: 28px; }
.cap h2 { font-size: 40px; line-height: 1.2; font-weight: 600; }
.cap .sub { display: block; margin-top: 8px; font-size: 15px; color: var(--muted); }
.cap p { margin-top: 28px; color: var(--muted); }
.cap .btn-ghost { margin-top: 36px; }
.cap-meta { margin-top: 40px; border-top: 1px solid var(--line); }
.cap-meta div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.cap-meta span { color: var(--muted); }

/* Index of remaining capabilities */
.index { padding: 176px 0 0; }
.index h3.lbl { font-size: 15px; font-weight: 500; color: var(--muted); margin-bottom: 24px; }
.row { display: grid; grid-template-columns: 80px 1fr 1.2fr 24px; gap: 24px; align-items: baseline; padding: 36px 0; border-top: 1px solid var(--line); text-decoration: none; }
.row:last-child { border-bottom: 1px solid var(--line); }
.row h3 { font-size: 30px; font-weight: 500; line-height: 1.25; transition: color 160ms ease; }
.row p { color: var(--muted); font-size: 17px; }
.row svg { width: 20px; height: 20px; color: var(--muted); transition: transform 160ms ease, color 160ms ease; }
.row:hover h3, .row:hover svg { color: var(--accent); }
.row:hover svg { transform: translateX(4px); }

/* Dark numbers */
.figures { margin-top: 176px; background: var(--stage); color: var(--on-stage); padding: 144px 0; }
.figures h2 { font-size: 15px; font-weight: 500; color: var(--on-stage-muted); }
.fig-grid { margin-top: 72px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 48px; }
.fig b { display: block; font-size: 112px; line-height: 1; font-weight: 500; letter-spacing: 0; }
.fig b small { font-size: 32px; font-weight: 400; margin-left: 8px; color: var(--on-stage-muted); }
.fig strong { display: block; margin-top: 32px; font-size: 20px; font-weight: 500; }
.fig span { display: block; margin-top: 8px; font-size: 15px; color: var(--on-stage-muted); line-height: 1.65; max-width: 22em; }

/* Process, very light */
.process { padding: 160px 0; }
.process-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; }
.process-head h2 { font-size: 40px; font-weight: 600; }
.steps { margin: 72px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); }
.steps li { list-style: none; border-top: 1px solid var(--ink); padding: 20px 20px 0 0; }
.steps li.k { border-top: 2px solid var(--accent); }
.steps b { display: block; font-size: 17px; font-weight: 500; margin-top: 10px; }
.steps ol { margin: 0; padding: 0; }
.steps .mono { color: var(--muted); }

/* Closing */
.close { position: relative; background: var(--ground); overflow: hidden; }
.close img { position: absolute; right: 0; top: 0; height: 100%; width: 50%; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%); mask-image: linear-gradient(90deg, transparent 0, #000 18%); }
.close-in { position: relative; padding-top: 160px; padding-bottom: 160px; }
.close h2 { font-size: 56px; line-height: 1.15; font-weight: 600; max-width: 10em; }
html[lang="en"] .close h2 { max-width: 10em; }
.close p { margin-top: 24px; color: var(--muted); max-width: 24em; }
.close .hero-act { margin-top: 40px; }

.foot { padding: 56px 0 48px; font-size: 14px; color: var(--muted); }
.foot-in { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 24px; }
.foot a { text-decoration: none; }

@media (max-width: 1199px) {
  :root { --pad: 40px; }
  .hero h1 { font-size: 60px; }
  html[lang="en"] .hero h1 { font-size: 64px; }
  .hero-img { width: 80%; right: -16%; }
  .statement p { font-size: 36px; }
  html[lang="en"] .statement p { font-size: 38px; }
  .cap-img, .cap.rev .cap-img { grid-column: 1 / span 7; grid-row: auto; }
  .cap-tx, .cap.rev .cap-tx { grid-column: 8 / span 5; grid-row: auto; }
  .cap.rev .cap-img { grid-column: 6 / span 7; grid-row: 1; }
  .cap.rev .cap-tx { grid-column: 1 / span 5; grid-row: 1; }
  .fig b { font-size: 88px; }
  .steps { grid-template-columns: repeat(4, minmax(0,1fr)); row-gap: 40px; }
}
@media (max-width: 899px) {
  .nav, .top-r .btn, .top-r .lang { display: none; }
  .menu { display: inline-flex; }
  .hero-img { -webkit-mask-image: none; mask-image: none; position: relative; width: 120%; height: auto; right: auto; margin: 72px 0 0 -10%; aspect-ratio: 4 / 3; }
  .hero-in { min-height: 0; padding-top: 24px; padding-bottom: 72px; }
  .hero { display: flex; flex-direction: column; }
  .hero-note { display: none; }
  .cap-img, .cap.rev .cap-img, .cap-tx, .cap.rev .cap-tx { grid-column: 1 / -1; grid-row: auto; }
  .cap-tx, .cap.rev .cap-tx { margin-top: 40px; }
  .row { grid-template-columns: 48px 1fr 24px; }
  .row p { grid-column: 2 / span 2; grid-row: 2; margin-top: 8px; }
  .row svg { grid-column: 3; grid-row: 1; }
  .close img { position: relative; width: 100%; height: auto; aspect-ratio: 4 / 3; -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 767px) {
  :root { --pad: 20px; }
  body { font-size: 17px; }
  .top-in { height: 72px; }
  .hero h1, html[lang="en"] .hero h1 { font-size: 40px; line-height: 1.15; }
  .hero p { font-size: 17px; }
  .statement { padding: 104px 0 96px; }
  .statement p, html[lang="en"] .statement p { font-size: 26px; }
  .cap + .cap { margin-top: 104px; }
  .cap h2 { font-size: 30px; }
  .index { padding-top: 112px; }
  .row h3 { font-size: 23px; }
  .row { padding: 28px 0; }
  .figures { margin-top: 112px; padding: 96px 0; }
  .fig-grid { grid-template-columns: 1fr; gap: 56px; margin-top: 48px; }
  .fig b { font-size: 76px; }
  .process { padding: 112px 0; }
  .process-head { display: block; }
  .process-head h2 { font-size: 30px; }
  .steps { grid-template-columns: 1fr 1fr; margin-top: 48px; }
  .close-in { padding-top: 96px; padding-bottom: 72px; }
  .close h2, html[lang="en"] .close h2 { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Rapid delivery band directly under the hero */
.fast { background: var(--white); border-bottom: 1px solid var(--line); padding: 72px 0 64px; }
.fast-lbl { font-size: 15px; font-weight: 500; color: var(--muted); }
.fast-grid { margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); }
.fast-item { display: block; padding: 36px 48px 36px 0; text-decoration: none; transition: background-color 160ms ease; }
.fast-item + .fast-item { padding-left: 48px; border-left: 1px solid var(--line); }
.fast-item:hover .fast-t { color: var(--accent); }
.fast-num { display: block; font-size: 120px; line-height: .95; font-weight: 500; }
.fast-num small { font-size: 34px; font-weight: 400; color: var(--muted); margin-left: 10px; }
.fast-t { display: block; margin-top: 24px; font-size: 24px; font-weight: 600; transition: color 160ms ease; }
.fast-d { display: block; margin-top: 8px; font-size: 16px; color: var(--muted); }
.fast-live { margin-top: 20px; display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; min-height: 24px; }
.fast-live i { width: 9px; height: 9px; border-radius: 50%; background: #2E9B5F; box-shadow: 0 0 0 4px rgba(46,155,95,.15); flex: none; }
.fast-live.off i { background: #A1A8AE; box-shadow: none; }
.fast-more { margin-top: 12px; }
@media (max-width: 1199px) { .fast-num { font-size: 96px; } }
@media (max-width: 767px) {
  .fast { padding: 56px 0 48px; }
  .fast-grid { grid-template-columns: 1fr; }
  .fast-item, .fast-item + .fast-item { padding: 28px 0; border-left: 0; }
  .fast-item + .fast-item { border-top: 1px solid var(--line); }
  .fast-num { font-size: 80px; }
  .fast-t { font-size: 21px; margin-top: 16px; }
}