/* ==========================================================================
   Admixor Research — App Stylesheet (zero dependency)
   版式骨架逆向自 mordorintelligence.com：顶栏 / 巨型导航 / Hero+数据条 /
   报告列表行 / 行业卡片 / 分类手风琴 / 客户背书 / CTA 带 / 四栏页脚
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-700);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Inline SVGs carry a viewBox but no width/height attributes, so without an
   explicit default they fall back to the replaced-element default (300x150).
   Every icon context below overrides this; the rule just stops a stray icon
   from blowing up a layout. */
svg { width: 1.1em; height: 1.1em; flex: 0 0 auto; }

img { max-width: 100%; height: auto; display: block; }

/* The [hidden] attribute must beat any class-level `display` rule.
   Without !important, `.report-row { display: grid }` keeps filtered-out rows
   visible — the filter then looks broken while doing exactly what it was told. */
[hidden] { display: none !important; }
a { color: var(--blue-800); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: none; box-shadow: var(--sh-focus); border-radius: var(--r-sm); }

h1, h2, h3, h4 { color: var(--navy-800); margin: 0 0 .5em; line-height: var(--lh-tight); font-weight: var(--fw-light); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-med); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-med); }
p  { margin: 0 0 1em; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy-800); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus { left: 0; box-shadow: none; }

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

/* ------------------------------------------------------------------ article
   A reading column that owns its whole row must be CENTRED on the page.  Left
   anchored inside the 1200px wrap it left ~500px of dead space on the right,
   which reads as a broken layout (measured at 1440px: prose 656 / container
   inner 1152 / left 0 / right 497).  The measure itself is unchanged -- 76ch
   scales with the font, which is what keeps the line comfortable in both
   languages -- the column just stops carrying an empty right half.

   Applied by build.py only where the body IS a single prose column.  The
   industry and report-detail templates keep the left anchor on purpose: their
   prose lives in a 2-column grid and must line up with the heading above it. */
.wrap--article { max-width: var(--wrap-article); }
.wrap--article .prose { max-width: 100%; margin-inline: auto; }
/* Full-width info pages (关于 / 研究方法): the body column is a left-anchored
   readable measure inside the centred full wrap, so its left edge sits on the
   same x as the top-left logo and it no longer floats to the middle of the
   page.  The max-width subtracts the wrap gutter so the visible measure equals
   the centred article column exactly (which also keeps the EN column inside the
   readable band).  Scoped under .wrap so it wins over the base .prose max-width. */
/* Full-left info/insight pages (关于 / 研究方法 / 洞察): the body column
   fills the whole .wrap content area so it is as wide as the 报告库 listing
   page body and its left edge sits on the same x as the top-left logo. */
.wrap .col-left { max-width: none; margin-inline: 0 auto; }

/* Latin needs a shorter measure than CJK at the same font size: the
   comfortable band is ~30-45 CJK glyphs but only ~45-75 Latin characters, so
   the same 760px column that reads well in Chinese (44 glyphs) runs to ~89
   characters in English.  620px puts the Latin line at ~71 characters, inside
   the band, without touching the Chinese column.  `<html lang>` is per-page and
   gated, so this cannot drift the way a JS-driven language switch would. */
:root[lang="en"] { --wrap-article: 620px; }
.section { padding: var(--sec-y) 0; }
.section-sm { padding: var(--sec-y-sm) 0; }
.section--soft { background: var(--bg-soft); }
.section--tint { background: var(--blue-50); }
.section--navy { background: var(--navy-900); color: #dfe6f3; }
.section--navy h2, .section--navy h3 { color: #fff; }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }
.mt-5 { margin-top: 48px; }
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.eyebrow {
  display: inline-block; font-size: var(--fs-2xs); letter-spacing: .14em;
  text-transform: uppercase; color: var(--teal-600); font-weight: var(--fw-semi);
  margin-bottom: 10px;
}
.section--navy .eyebrow { color: var(--teal-300); }
.lead { font-size: 1.0625rem; color: var(--ink-600); max-width: 820px; }
/* Leads that sit directly under a section heading must fill the content width:
   the 820px cap made them wrap early and left their right edge visibly
   misaligned with the full-width <h2> above.  Hero leads keep their measure. */
.section > .wrap > .lead,
.section > .lead { max-width: none; }
/* Un-capping alone exposed a second defect on the SAME paragraph: at 1152px the
   "第一梯队…" note needed 1159px, so it still broke to two lines -- with "破。"
   alone on the second one (last line 34px).  Balance moves the break to the
   sentence boundary (last line 544px) without touching the copy or the width.
   Browsers without text-wrap (Chromium <114 / Safari <17.5) simply keep the
   old ragged wrap -- progressive enhancement, no fallback needed. */
.section > .wrap > .lead,
.section > .lead { text-wrap: balance; }
.section-head { max-width: 820px; margin-bottom: 40px; }
.section-head.text-center { margin-left: auto; margin-right: auto; }
.section-head p { color: var(--ink-600); margin-bottom: 0; }
.rule { height: 3px; width: 56px; background: var(--teal-500); border-radius: 2px; margin: 0 0 22px; }
.text-center .rule { margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border-radius: var(--r-sm); border: 1px solid transparent;
  font-size: var(--fs-sm); font-weight: var(--fw-med); line-height: 1;
  text-decoration: none; transition: background var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
    transform var(--dur-1) var(--ease); white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--blue-800); color: #fff; }
.btn--primary:hover { background: var(--blue-900); color: #fff; }
.btn--navy { background: var(--navy-800); color: #fff; }
.btn--navy:hover { background: var(--navy-950); color: #fff; }
.btn--teal { background: var(--teal-500); color: #04383a; }
.btn--teal:hover { background: var(--teal-400); color: #04383a; }
.btn--outline { background: transparent; border: 1px solid var(--teal-600); color: var(--teal-600); }
.btn--outline:hover { background: var(--teal-50); }
.btn--ghost { border-color: var(--line); color: var(--navy-800); background: #fff; }
.btn--ghost:hover { border-color: var(--blue-600); color: var(--blue-800); background: var(--blue-50); }
.btn--on-navy { border-color: rgba(255,255,255,.34); color: #fff; background: transparent; }
.btn--on-navy:hover { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.6); }
.btn--sm { padding: 9px 16px; font-size: var(--fs-xs); }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.link-arrow { font-weight: var(--fw-med); color: var(--blue-800); display: inline-flex; gap: 6px; align-items: center; }
.link-arrow::after { content: "\2192"; transition: transform var(--dur-1) var(--ease); }
.link-arrow:hover { text-decoration: none; color: var(--blue-900); }
.link-arrow:hover::after { transform: translateX(3px); }

/* --------------------------------------------------------- pricing (about) */
/* 服务方式与初步定价 —— 数据源 data/pages.json::about.<lang>.pricing，
   渲染器 tools/build.py::pricing_block()。 卡片用 auto-fit，2 列起、窄屏 1 列，
   与站点其它卡片栅格的断点行为一致。 */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 20px; }
.price-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; display: flex; flex-direction: column; box-shadow: var(--sh-1); transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.price-card:hover { box-shadow: var(--sh-3); transform: translateY(-3px); }
.price-card__tag { display: inline-block; font-size: var(--fs-2xs); font-weight: var(--fw-semi); letter-spacing: .04em; color: var(--teal-600); background: var(--teal-50); padding: 4px 10px; border-radius: var(--r-pill); margin-bottom: 12px; }
.price-card__head h3 { font-size: var(--fs-h3); margin: 0 0 8px; color: var(--ink-900); }
.price-card__head p { font-size: var(--fs-sm); color: var(--ink-600); margin: 0 0 18px; line-height: var(--lh-snug); }
.price-tiers { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.price-tier { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--bg-soft); }
.price-tier--hot { border-color: var(--teal-300); background: var(--teal-50); }
.price-tier__name { font-size: var(--fs-sm); font-weight: var(--fw-med); color: var(--ink-800); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.price-badge { font-size: var(--fs-2xs); font-weight: var(--fw-semi); color: var(--warn); background: #fff5e6; border: 1px solid #f7dcb0; padding: 2px 8px; border-radius: var(--r-pill); white-space: nowrap; }
.price-tier__price { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--ink-900); font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-tier__price--pending { font-size: var(--fs-body); color: var(--ink-400); font-weight: var(--fw-med); }
.pricing-note { margin-top: 22px; font-size: var(--fs-sm); color: var(--ink-500); }

/* ---------------------------------------------------------------- topbar */
.topbar {
  background: var(--navy-950); color: #a9b4cd; font-size: var(--fs-2xs);
  min-height: var(--topbar-h);
}
.topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--topbar-h); }
.topbar a { color: #cfd8ec; }
.topbar a:hover { color: #fff; }
.topbar__left { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.topbar__left span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.topbar svg { width: 12px; height: 12px; color: var(--teal-300); }
.topbar__right { display: flex; align-items: center; gap: 14px; }
.lang-switch { display: inline-flex; align-items: center; gap: 8px; }
.lang-switch a { padding: 2px 6px; border-radius: var(--r-sm); }
.lang-switch a[aria-current="true"] { background: rgba(255,255,255,.14); color: #fff; font-weight: var(--fw-med); }
@media (max-width: 860px) { .topbar__left span:nth-child(n+3) { display: none; } }

/* ---------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 120; background: #fff;
  border-bottom: 1px solid var(--line);
}
.site-header.is-stuck { box-shadow: var(--sh-2); }
.header__in { display: flex; align-items: center; gap: 20px; min-height: var(--header-h); }

.logo { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.logo:hover { text-decoration: none; }
.logo__img {
  width: 38px; height: 38px; border-radius: 9px; flex: 0 0 auto;
  object-fit: contain;
  /* the asset already carries the blue/green tile, so no background here */
}
.logo__name { display: block; font-size: 1.09rem; font-weight: var(--fw-semi); color: var(--navy-800); letter-spacing: -.01em; }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 13px;
  font-size: var(--fs-sm); font-weight: var(--fw-med); color: var(--ink-800);
  border-radius: var(--r-sm); white-space: nowrap;
}
.nav__link:hover { color: var(--blue-800); background: var(--blue-50); text-decoration: none; }
.nav__link[aria-current="page"] { color: var(--blue-800); }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px; height: 2px;
  background: var(--teal-500); border-radius: 2px;
}
.nav__caret { width: 8px; height: 8px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-1px); transition: transform var(--dur-2) var(--ease); }
.nav__item.is-open > .nav__link .nav__caret { transform: rotate(-135deg) translateY(-2px); }

/* 巨型下拉（行业导航） —— 三件套防「点不到」：
   ① 开合只切 opacity/visibility（不用 display）② 关闭有 180ms 延迟
   ③ ::before 透明桥补掉触发者与浮层之间的空隙 */
.mega {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px);
  width: min(760px, calc(100vw - 32px)); padding-top: var(--hover-bridge);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
  z-index: 130;
}
.nav__item.is-open > .mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility 0s;
}
.mega::before { /* 透明桥：按 padding box 走，比空隙多盖 1px */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--hover-bridge) + 1px);
  background: transparent;
}
.mega__panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-3); padding: 22px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 22px;
}
.mega__title { font-size: var(--fs-2xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-400); margin: 0 0 12px; font-weight: var(--fw-semi); }
.mega__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.mega__item { display: block; padding: 11px 12px; border-radius: var(--r-md); border: 1px solid transparent; }
.mega__item:hover { background: var(--blue-50); border-color: #d8e9f3; text-decoration: none; }
.mega__item strong { display: block; font-size: var(--fs-sm); font-weight: var(--fw-med); color: var(--navy-800); }
.mega__item span { display: block; font-size: var(--fs-2xs); color: var(--ink-500); line-height: 1.5; margin-top: 2px; }
.mega__aside { background: var(--bg-soft); border-radius: var(--r-md); padding: 16px; }
.mega__aside ul { list-style: none; margin: 0 0 14px; padding: 0; }
.mega__aside li { font-size: var(--fs-xs); margin-bottom: 9px; }

.header__actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

/* ---------------------------------------------------------------- header search
   This used to be `.header__search`: a 38x38 <a> holding a magnifier icon and
   nothing else.  It looked exactly like a search input and was a LINK to the
   report library, so the control silently did nothing when typed into.
   It is a real <form> now, so it has to behave like one -- the open/close,
   arrow-key and Escape contract lives in app.js::initSiteSearch(). */
.sitesearch { position: relative; display: flex; align-items: center; }
.sitesearch__toggle {
  display: none; width: 38px; height: 38px; padding: 0; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #fff; color: var(--ink-600);
}
.sitesearch__toggle:hover { border-color: var(--blue-600); color: var(--blue-800); }
.sitesearch__toggle svg { width: 20px; height: 20px; }
.sitesearch__box {
  display: flex; align-items: center; gap: 8px;
  width: 216px; height: 38px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff;
  color: var(--ink-400);
  transition: width var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease);
}
.sitesearch__box svg { width: 18px; height: 18px; flex: 0 0 auto; }
.sitesearch__box:focus-within {
  width: 264px; border-color: var(--blue-600); box-shadow: var(--sh-focus); color: var(--blue-800);
}
.sitesearch__input {
  flex: 1 1 auto; min-width: 0; padding: 0; border: 0; outline: none;
  background: transparent; font: inherit; font-size: var(--fs-xs); color: var(--ink-800);
}
.sitesearch__input::placeholder { color: var(--ink-400); }
.sitesearch__input::-webkit-search-cancel-button,
.sitesearch__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

.sitesearch__panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 140;
  width: min(400px, calc(100vw - 32px)); max-height: min(62vh, 470px); overflow-y: auto;
  padding: 6px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--sh-3);
}
.sitesearch__panel[hidden] { display: none; }
.sitesearch__hit { display: block; padding: 9px 10px; border-radius: var(--r-sm); color: inherit; }
.sitesearch__hit:hover, .sitesearch__hit.is-active { background: var(--blue-50); text-decoration: none; }
.sitesearch__hit strong { display: block; font-size: var(--fs-sm); font-weight: var(--fw-med); color: var(--navy-800); }
.sitesearch__hit > span:not(.sitesearch__kind) {
  display: block; margin-top: 3px; font-size: var(--fs-2xs); color: var(--ink-500); line-height: 1.55;
}
.sitesearch__kind {
  display: inline-block; margin-bottom: 4px; padding: 1px 6px; border-radius: 4px;
  background: var(--bg-soft); color: var(--ink-500); font-size: 10px; letter-spacing: .06em;
}
.sitesearch__empty { margin: 0; padding: 14px 10px; font-size: var(--fs-xs); color: var(--ink-500); }
.sitesearch__panel mark { background: #fdf0b4; color: inherit; }

.burger { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; padding: 10px; }
.burger span { display: block; height: 2px; background: var(--navy-800); border-radius: 2px; }
.burger span + span { margin-top: 5px; }

@media (max-width: 1080px) {
  .nav, .header__actions .btn { display: none; }
  .burger { display: block; margin-left: auto; }
  /* Below the desktop breakpoint the input collapses back into the icon, and
     the expanded search hangs off the HEADER rather than off the 38px form --
     anchored to the form it would drop inside the header row instead of under
     it.  `.sitesearch { position: static }` is what re-anchors it. */
  .sitesearch { position: static; }
  .sitesearch__toggle { display: inline-grid; }
  .sitesearch__box { display: none; }
  .sitesearch.is-open .sitesearch__box {
    display: flex; position: absolute; top: 100%; margin-top: 8px;
    left: 50%; transform: translateX(-50%);
    width: min(440px, calc(100vw - 32px)); box-shadow: var(--sh-2);
  }
  .sitesearch__panel {
    top: 100%; margin-top: 54px; left: 50%; transform: translateX(-50%);
    width: min(440px, calc(100vw - 32px)); max-height: min(56vh, 420px);
  }
}
/* The search icon is the only way into search on a phone, so it stays.  It
   used to be swept away here by `.header__actions { display: none }`, which
   left the smallest screens with no search entry at all.  The brand text is
   dropped instead, so the icon + burger still fit the very narrow widths. */
@media (max-width: 400px) { .logo__name { display: none; } }

/* ---------------------------------------------------------------- mobile drawer */
.drawer {
  position: fixed; inset: 0 0 0 auto; width: min(360px, 88vw); background: #fff;
  transform: translateX(100%); transition: transform var(--dur-3) var(--ease);
  z-index: 200; display: flex; flex-direction: column; box-shadow: var(--sh-3);
  visibility: hidden;
}
.drawer.is-open { transform: translateX(0); visibility: visible; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.drawer__close { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; font-size: 18px; line-height: 1; color: var(--ink-700); }
.drawer__body { overflow-y: auto; padding: 8px 0 24px; flex: 1; }
.drawer__group { border-bottom: 1px solid var(--line-2); }
.drawer__toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; background: none; border: 0; text-align: left;
  font-size: var(--fs-sm); font-weight: var(--fw-med); color: var(--ink-800);
}
.drawer__sub { display: none; padding: 0 20px 12px; }
.drawer__group.is-open .drawer__sub { display: block; }
.drawer__sub a { display: block; padding: 9px 0; font-size: var(--fs-sm); color: var(--ink-600); border-top: 1px dashed var(--line-2); }
.drawer__link { display: block; padding: 14px 20px; font-size: var(--fs-sm); font-weight: var(--fw-med); color: var(--ink-800); border-bottom: 1px solid var(--line-2); }
.drawer__cta { padding: 18px 20px 0; }
.scrim { position: fixed; inset: 0; background: rgba(13,19,48,.5); opacity: 0; visibility: hidden; transition: opacity var(--dur-2), visibility 0s linear var(--dur-2); z-index: 190; }
.scrim.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur-2), visibility 0s; }

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(150deg, var(--navy-950) 0%, var(--navy-800) 52%, #24466e 100%);
}
.hero::after {
  content: ""; position: absolute; right: -140px; top: -140px; width: 620px; height: 620px;
  background: radial-gradient(circle at 50% 50%, rgba(70,205,207,.30), rgba(70,205,207,0) 66%);
  pointer-events: none;
}
.hero__in { position: relative; z-index: 1; padding: clamp(56px, 7.5vw, 104px) 0 clamp(40px, 5vw, 64px); display: grid; grid-template-columns: 1.35fr .65fr; gap: 48px; align-items: center; }
.hero h1 { color: #fff; font-size: var(--fs-display); margin-bottom: 20px; }
.hero h1 em { font-style: normal; color: var(--teal-300); }
.hero p { color: #c3cde2; font-size: 1.0625rem; max-width: 62ch; }
.hero__eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: var(--fs-2xs); letter-spacing: .16em; text-transform: uppercase; color: var(--teal-300); font-weight: var(--fw-semi); margin-bottom: 18px; }
.hero__eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--teal-400); }
.hero__trust { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: var(--fs-xs); color: #a9b4cd; }
.hero__trust li { display: inline-flex; align-items: center; gap: 7px; }
.hero__trust li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--teal-400); flex: 0 0 auto; }

.hero__panel {
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-lg); padding: 24px; backdrop-filter: blur(4px);
}
.hero__panel h2 { color: #fff; font-size: 1.0625rem; font-weight: var(--fw-med); margin-bottom: 4px; }
.hero__panel > p { font-size: var(--fs-xs); color: #a9b4cd; margin-bottom: 18px; }
.hero__panel ul { list-style: none; margin: 0; padding: 0; }
.hero__panel li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed rgba(255,255,255,.15); font-size: var(--fs-xs); color: #c3cde2; }
.hero__panel li:last-child { border-bottom: 0; }
.hero__panel li b { color: #fff; font-weight: var(--fw-med); font-size: var(--fs-sm); white-space: nowrap; }
@media (max-width: 980px) { .hero__in { grid-template-columns: 1fr; gap: 32px; } }

/* ---------------------------------------------------------------- stat band */
.statband { background: var(--navy-950); color: #fff; }
.statband__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.statband__cell { padding: 30px 24px; border-left: 1px solid rgba(255,255,255,.1); }
.statband__cell:first-child { border-left: 0; }
.statband__num { font-size: clamp(1.65rem, 2.9vw, 2.35rem); font-weight: var(--fw-light); color: #fff; line-height: 1.1; letter-spacing: -.02em; }
.statband__num span { font-size: .5em; color: var(--teal-300); margin-left: 4px; font-weight: var(--fw-med); }
.statband__label { font-size: var(--fs-xs); color: #9aa6c2; margin-top: 8px; line-height: 1.5; }
@media (max-width: 860px) { .statband__grid { grid-template-columns: 1fr 1fr; } .statband__cell:nth-child(3) { border-left: 0; } .statband__cell:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.1); } }
@media (max-width: 480px) { .statband__grid { grid-template-columns: 1fr; } .statband__cell { border-left: 0; border-top: 1px solid rgba(255,255,255,.1); } .statband__cell:first-child { border-top: 0; } }

/* ---------------------------------------------------------------- industry cards */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 1080px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  display: flex; flex-direction: column; overflow: hidden;
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.card:hover { border-color: #cfe0ec; box-shadow: var(--sh-2); transform: translateY(-2px); }
.card__body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.card__icon {
  width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center;
  background: var(--blue-50); color: var(--blue-800); margin-bottom: 14px; flex: 0 0 auto;
}
.card__icon svg { width: 22px; height: 22px; }
.card__title { font-size: 1.0625rem; font-weight: var(--fw-med); color: var(--navy-800); margin: 0 0 4px; line-height: 1.35; }
.card__title a { color: inherit; }
.card__title a:hover { color: var(--blue-800); text-decoration: none; }
.card__en { font-size: var(--fs-2xs); color: var(--ink-400); letter-spacing: .04em; margin: 0 0 12px; }
.card__desc { font-size: var(--fs-sm); color: var(--ink-600); margin: 0 0 16px; flex: 1; line-height: 1.65; }
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line-2); font-size: var(--fs-xs); color: var(--ink-500); }
.card__metric { font-size: var(--fs-xs); color: var(--ink-500); }
.card__metric b { display: block; font-size: 1.0625rem; color: var(--navy-800); font-weight: var(--fw-med); }
.card__metric em { font-style: normal; color: var(--down); font-weight: var(--fw-med); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.chip {
  display: inline-block; padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--bg-tint); color: var(--ink-600); font-size: var(--fs-2xs); line-height: 1.7;
  border: 1px solid #e3edf4;
}
.chip--teal { background: var(--teal-50); color: #0a7b7f; border-color: #cdeff0; }
.chip--navy { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }

/* ---------------------------------------------------------------- report rows（克隆 mordor TRENDING REPORTS 列表行） */
.report-list { border-top: 1px solid var(--line); }
.report-row {
  display: grid; grid-template-columns: 1fr auto; gap: 20px 28px; align-items: center;
  padding: 20px 4px; border-bottom: 1px solid var(--line);
  transition: background var(--dur-1) var(--ease);
}
.report-row:hover { background: var(--bg-soft); }
.report-row__main { min-width: 0; }
.report-row h3 { font-size: 1.0625rem; margin: 0 0 8px; font-weight: var(--fw-med); line-height: 1.4; }
.report-row h3 a { color: var(--navy-800); }
.report-row h3 a:hover { color: var(--blue-800); text-decoration: none; }
.report-row__meta { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: var(--fs-xs); color: var(--ink-500); }
.report-row__meta span { display: inline-flex; align-items: center; gap: 6px; }
.report-row__meta svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--blue-600); }
.report-row__side { display: flex; align-items: center; gap: 12px; }
.report-row__price { text-align: right; font-size: var(--fs-2xs); color: var(--ink-400); line-height: 1.4; }
.report-row__price b { display: block; font-size: var(--fs-sm); color: var(--navy-800); font-weight: var(--fw-med); }
@media (max-width: 760px) { .report-row { grid-template-columns: 1fr; } .report-row__side { justify-content: space-between; } }

.filterbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.filterbar button {
  padding: 8px 15px; border-radius: var(--r-pill); border: 1px solid var(--line);
  background: #fff; font-size: var(--fs-xs); color: var(--ink-600);
  transition: all var(--dur-1) var(--ease);
}
.filterbar button:hover { border-color: var(--blue-600); color: var(--blue-800); }
.filterbar button[aria-pressed="true"] { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.filter-empty { padding: 34px 0; color: var(--ink-500); font-size: var(--fs-sm); }
/* shown when the report library was opened with ?q= from the header search
   (or by the no-JS form submit): it says what was filtered and offers a way
   back, instead of silently hiding rows. */
.filter-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: -10px 0 20px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-soft);
  font-size: var(--fs-xs); color: var(--ink-600);
}
.filter-note a { font-weight: var(--fw-med); }

/* ---------------------------------------------------------------- accordion（克隆 mordor Categories 折叠） */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 4px; background: none; border: 0; text-align: left;
  font-size: var(--fs-h4); font-weight: var(--fw-med); color: var(--navy-800);
}
.acc__btn:hover { color: var(--blue-800); }
.acc__sign { width: 16px; height: 16px; flex: 0 0 auto; color: var(--blue-600); overflow: visible; }
.acc__sign path { fill: none; transition: opacity var(--dur-2) var(--ease); }
/* Open state fades the vertical stroke instead of rotating it: a rotation
   would swing the bounding box through 90deg mid-transition (visible as a
   twitch) and makes the geometry unassertable. */
.acc__item.is-open .acc__sign-v { opacity: 0; }
.acc__panel { padding: 0 4px 22px; font-size: var(--fs-sm); color: var(--ink-600); }
.acc__panel ul { margin: 0; padding-left: 0; list-style: none; }
.acc__panel li { padding: 7px 0 7px 18px; position: relative; border-bottom: 1px dashed var(--line-2); }
.acc__panel li:last-child { border-bottom: 0; }
.acc__panel li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 6px; height: 6px; border-radius: 50%; background: var(--teal-500); }

/* ---------------------------------------------------------------- feature / why us */
.feature { padding: 26px 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); }
.feature__icon { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--teal-50); color: var(--teal-600); margin-bottom: 14px; }
.feature__icon svg { width: 20px; height: 20px; }
.feature h3 { font-size: var(--fs-h4); margin-bottom: 8px; }
.feature p { font-size: var(--fs-sm); color: var(--ink-600); margin: 0; }

/* ---------------------------------------------------------------- data table */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 560px; }
table.data caption { text-align: left; padding: 14px 18px; font-size: var(--fs-xs); color: var(--ink-500); background: var(--bg-soft); border-bottom: 1px solid var(--line); }
table.data th, table.data td { padding: 12px 18px; text-align: left; border-bottom: 1px solid var(--line-2); }
table.data thead th { background: var(--navy-800); color: #fff; font-weight: var(--fw-med); font-size: var(--fs-xs); letter-spacing: .02em; white-space: nowrap; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:nth-child(even) { background: #fafcfd; }
table.data td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data tfoot td { background: var(--blue-50); font-weight: var(--fw-med); color: var(--navy-800); }

/* ---------------------------------------------------------------- prose / article */
.prose { max-width: 76ch; }
.prose h2 { margin-top: 1.6em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li { margin-bottom: .5em; }
.prose blockquote { margin: 1.4em 0; padding: 16px 20px; border-left: 3px solid var(--teal-500); background: var(--bg-tint); border-radius: 0 var(--r-md) var(--r-md) 0; color: var(--ink-600); font-size: var(--fs-sm); }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin: 1.4em 0; }
.prose th, .prose td { padding: 10px 14px; border: 1px solid var(--line); text-align: left; }
.prose thead th { background: var(--bg-soft); color: var(--navy-800); }

.breadcrumb { font-size: var(--fs-xs); color: var(--ink-400); padding: 16px 0 0; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.breadcrumb li::after { content: "/"; margin-left: 6px; color: var(--line); }
.breadcrumb li:last-child::after { content: ""; }
.breadcrumb a { color: var(--ink-500); }

.page-hero { background: linear-gradient(140deg, var(--navy-950), var(--navy-800) 70%, #24466e); color: #fff; padding: calc(var(--sec-y-sm) + 8px) 0 var(--sec-y-sm); }
.page-hero h1 { color: #fff; margin-bottom: 14px; }
.page-hero p { color: #c3cde2; max-width: 74ch; margin-bottom: 0; }
/* Plain hero leads (报告库 / 关于 / 研究方法 / 洞察 / 行业板块 index) fill the
   content width like the page body -- the old 74ch cap made them wrap to two
   lines while the body below was full width.  Hero paragraphs that opt into the
   explicit .lead class keep their own measure; section leads are un-capped
   separately just above. */
.page-hero p:not(.lead) { max-width: none; }
.page-hero .breadcrumb { color: #8d9ab8; padding-top: 0; margin-bottom: 14px; }
.page-hero .breadcrumb a { color: #aeb9d2; }
.page-hero .chips { margin: 18px 0 0; }
.page-hero .chip { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #dbe4f4; }

.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; margin-top: 26px; }
.kpi { background: #fff; padding: 18px 20px; }
.kpi__num { font-size: 1.4rem; font-weight: var(--fw-light); color: var(--navy-800); letter-spacing: -.01em; line-height: 1.15; }
.kpi__num small { font-size: .55em; color: var(--ink-500); font-weight: var(--fw-reg); margin-left: 3px; }
.kpi__label { font-size: var(--fs-2xs); color: var(--ink-500); margin-top: 6px; line-height: 1.5; }
@media (max-width: 860px) { .kpi-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .kpi-row { grid-template-columns: 1fr; } }

.callout { border: 1px solid #d8e9f3; background: var(--blue-50); border-radius: var(--r-md); padding: 20px 22px; font-size: var(--fs-sm); color: var(--ink-600); }
.callout h3 { font-size: var(--fs-h4); margin-bottom: 8px; }
.callout--warn { border-color: #f3dfb8; background: #fdf6e8; border-left: 3px solid var(--warn); color: #7a5a12; }
.callout--warn h3 { color: #8a6100; }

.source-note { font-size: var(--fs-2xs); color: var(--ink-400); line-height: 1.7; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 30px; }

/* ---------------------------------------------------------------- CTA band */
.cta-band { background: linear-gradient(120deg, var(--navy-900), var(--blue-900) 88%); color: #fff; border-radius: var(--r-lg); padding: clamp(30px, 4vw, 52px); display: grid; grid-template-columns: 1.4fr auto; gap: 28px; align-items: center; }
.cta-band h2 { color: #fff; margin-bottom: 10px; }
.cta-band p { color: #c3cde2; margin-bottom: 0; font-size: var(--fs-sm); }
@media (max-width: 820px) { .cta-band { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- form */
.form { display: grid; gap: 16px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }
.field label { display: block; font-size: var(--fs-xs); font-weight: var(--fw-med); color: var(--ink-800); margin-bottom: 6px; }
.field .req { color: var(--up); margin-left: 2px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-sm);
  font: inherit; font-size: var(--fs-sm); color: var(--ink-700); background: #fff;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue-600); box-shadow: var(--sh-focus); outline: none; }
.field__hint { font-size: var(--fs-2xs); color: var(--ink-400); margin-top: 5px; }
.form__note { font-size: var(--fs-2xs); color: var(--ink-400); }
.form__status { font-size: var(--fs-sm); padding: 12px 14px; border-radius: var(--r-sm); display: none; }
.form__status.is-ok { display: block; background: #e9f7f0; color: #0f6b48; border: 1px solid #c6e9d8; }
.form__status.is-err { display: block; background: #fdeced; color: #a3232f; border: 1px solid #f6cfd3; }

.contact-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 44px; align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 32px; } }
.contact-card { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; background: #fff; }
.contact-card + .contact-card { margin-top: 16px; }
.contact-card h3 { font-size: var(--fs-h4); margin-bottom: 10px; }
.contact-card dl { margin: 0; font-size: var(--fs-sm); }
.contact-card dt { font-size: var(--fs-2xs); color: var(--ink-400); text-transform: uppercase; letter-spacing: .08em; margin-top: 12px; }
.contact-card dd { margin: 2px 0 0; color: var(--ink-700); }

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--navy-950); color: #93a0bd; font-size: var(--fs-sm); padding-top: 54px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 34px; padding-bottom: 40px; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.site-footer h3 { color: #fff; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .12em; font-weight: var(--fw-semi); margin-bottom: 16px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 10px; }
.site-footer a { color: #93a0bd; }
.site-footer a:hover { color: #fff; }
.footer__brand .logo__name { color: #fff; }
.footer__desc { font-size: var(--fs-xs); line-height: 1.75; margin: 14px 0 0; max-width: 40ch; }
.site-footer svg { width: 13px; height: 13px; color: var(--teal-300); vertical-align: -2px; margin-right: 2px; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 20px 0; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; font-size: var(--fs-2xs); }
.footer__bottom ul { display: flex; flex-wrap: wrap; gap: 18px; }
.footer__bottom li { margin: 0; }

/* ---------------------------------------------------------------- toast */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(14px);
  background: var(--navy-900); color: #fff; padding: 13px 22px; border-radius: var(--r-pill);
  font-size: var(--fs-sm); box-shadow: var(--sh-3); opacity: 0; visibility: hidden;
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
  z-index: 300; max-width: calc(100vw - 40px); text-align: center;
}
.toast.is-on { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility 0s; }

.to-top {
  position: fixed; right: 22px; bottom: 22px; width: 44px; height: 44px; border-radius: 50%;
  background: var(--navy-800); color: #fff; border: 0; display: grid; place-items: center;
  opacity: 0; visibility: hidden; transition: opacity var(--dur-2), visibility 0s linear var(--dur-2);
  z-index: 150; box-shadow: var(--sh-2);
}
.to-top.is-on { opacity: 1; visibility: visible; transition: opacity var(--dur-2), visibility 0s; }
.to-top:hover { background: var(--navy-950); }

/* ---------------------------------------------------------------- print */
@media print {
  .topbar, .site-header, .drawer, .scrim, .to-top, .toast, .cta-band, .site-footer { display: none !important; }
  body { color: #000; }
  .page-hero { background: none; color: #000; }
  .page-hero h1 { color: #000; }
}