/* ===================================================================
   会议表决系统 · 官网首页
   Aesthetic: institutional / editorial-restrained. Not a design system
   package; native CSS + custom properties. Icons from @phosphor-icons.
   Dials: DESIGN_VARIANCE 6 · MOTION_INTENSITY 5 · VISUAL_DENSITY 4
   Accent locked to the brand blue (#1a6daf), matching the app design system.
   Radius rule: interactive pills = 999px · panels/cards/images = 14px.
   =================================================================== */

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

:root {
  color-scheme: light dark;

  /* 强调色梯度（可切换主题，默认海洋蓝）。--a-base/-strong/-light 为色相锚点，
     下面的 --accent* 按明暗模式从中派生，data-accent 切换见文件末尾的换肤块。 */
  --a-base:   #1a6daf;
  --a-strong: #0f4d8c;
  --a-light:  #4a9ad8;

  --bg:          #ffffff;
  --bg-sunken:   #f6f8fb;
  --bg-tint:     color-mix(in srgb, var(--a-base) 8%, #ffffff);
  --surface:     #ffffff;
  --text:        #0f172a;
  --muted:       #475569;
  --line:        #e2e8f0;
  --line-strong: #cbd5e1;
  --accent:      var(--a-base);
  --accent-hov:  var(--a-strong);
  --accent-ink:  #ffffff;
  --accent-soft: color-mix(in srgb, var(--a-base) 12%, #ffffff);
  --shadow:      0 1px 2px rgb(15 23 42 / .04), 0 12px 32px -18px rgb(15 23 42 / .28);

  --r-panel: 14px;
  --r-pill:  999px;

  --shell: 1240px;
  --nav-h: 68px;

  --font: "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC",
          "Noto Sans SC", "Microsoft YaHei", system-ui, -apple-system,
          "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* Dark mode: follow the system, and let the toggle override in both
   directions. One theme for the whole page, no section inverts. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #0b1220;
    --bg-sunken:   #0f1a2c;
    --bg-tint:     color-mix(in srgb, var(--a-light) 12%, #0b1220);
    --surface:     #121d31;
    --text:        #e8eef7;
    --muted:       #93a4bd;
    --line:        #21304a;
    --line-strong: #33445f;
    --accent:      var(--a-light);
    --accent-hov:  color-mix(in srgb, var(--a-light) 78%, #ffffff);
    --accent-ink:  #071019;
    --accent-soft: color-mix(in srgb, var(--a-light) 20%, #121d31);
    --shadow:      0 1px 2px rgb(0 0 0 / .3), 0 16px 40px -22px rgb(0 0 0 / .7);
  }
}
:root[data-theme="dark"] {
  --bg:          #0b1220;
  --bg-sunken:   #0f1a2c;
  --bg-tint:     color-mix(in srgb, var(--a-light) 12%, #0b1220);
  --surface:     #121d31;
  --text:        #e8eef7;
  --muted:       #93a4bd;
  --line:        #21304a;
  --line-strong: #33445f;
  --accent:      var(--a-light);
  --accent-hov:  color-mix(in srgb, var(--a-light) 78%, #ffffff);
  --accent-ink:  #071019;
  --accent-soft: color-mix(in srgb, var(--a-light) 20%, #121d31);
  --shadow:      0 1px 2px rgb(0 0 0 / .3), 0 16px 40px -22px rgb(0 0 0 / .7);
}

/* —— 换肤：只改强调色相锚点，明暗与中性色不受影响。与应用端 client 的
   主题切换一致（海洋蓝 / 靛青 / 青碧 / 绛紫）。 —— */
:root[data-accent="indigo"] { --a-base: #4f46e5; --a-strong: #3730a3; --a-light: #818cf8; }
:root[data-accent="teal"]   { --a-base: #0f766e; --a-strong: #115e59; --a-light: #2dd4bf; }
:root[data-accent="violet"] { --a-base: #7c3aed; --a-strong: #5b21b6; --a-light: #a78bfa; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; line-height: 1.22; letter-spacing: -.01em; font-weight: 700; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
[hidden] { display: none !important; }

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: 24px; }

.icon { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }
.icon--lg { width: 22px; height: 22px; }
.icon--xl { width: 26px; height: 26px; }

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--accent); color: var(--accent-ink);
  padding: 10px 18px; border-radius: var(--r-pill);
  transition: top .2s var(--ease);
}
.skip:focus-visible { top: 14px; }

:where(a, button, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── Eyebrow (rationed: hero + one section only) ───────────────────── */
.eyebrow {
  margin: 0 0 18px;
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; white-space: nowrap;
  padding: 13px 24px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-size: 15px; font-weight: 600;
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease),
              transform .12s var(--ease), color .2s var(--ease);
}
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: var(--accent-hov); }
.btn--ghost { border-color: var(--line-strong); color: var(--text); background: transparent; }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn:active { transform: translateY(1px); }
.btn--sm { padding: 9px 18px; font-size: 14px; }
.btn--lg { padding: 16px 34px; font-size: 16px; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: transparent; color: var(--muted); cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.icon-btn:hover { color: var(--text); border-color: var(--line-strong); }
.icon-btn .icon { width: 18px; height: 18px; }

/* Theme toggle glyph swap */
.icon--moon, :root[data-theme="dark"] .icon--sun { display: none; }
:root[data-theme="dark"] .icon--moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon--sun { display: none; }
  :root:not([data-theme="light"]) .icon--moon { display: block; }
}

/* Navigation and account menu are shared with the Vue app.
   See /assets/app-header.css. */

/* ── Hero: asymmetric split ────────────────────────────────────────── */
/* Top padding stays under 6rem so the hero never floats down the viewport. */
.hero { padding: clamp(40px, 5vw, 64px) 0 clamp(56px, 7vw, 96px); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero__copy h1 {
  font-size: clamp(34px, 5vw, 58px);
  letter-spacing: -.025em;
  margin-bottom: 22px;
}
.lead {
  font-size: clamp(16px, 1.35vw, 18px);
  color: var(--muted);
  max-width: 34em;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.hero__shot {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__copy h1 br { display: none; }
}

/* ── 适用场景: scroll-snap pill strip ──────────────────────────────── */
.scenes { padding-bottom: clamp(48px, 6vw, 76px); }
.scenes__h {
  font-size: 13.5px; font-weight: 600; color: var(--muted);
  letter-spacing: .02em; margin-bottom: 16px;
}
.scenes__strip {
  display: flex; gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.scenes__strip::-webkit-scrollbar { display: none; }
.scenes__strip li {
  scroll-snap-align: start;
  flex: none;
  padding: 9px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 14.5px;
  color: var(--text);
  background: var(--surface);
}

/* ── Section scaffolding ───────────────────────────────────────────── */
.section { padding: clamp(64px, 8vw, 116px) 0; }
.section--sunken { background: var(--bg-sunken); }
.section--tint { background: var(--bg-tint); }

.section__head { max-width: 48rem; margin-bottom: clamp(36px, 4vw, 56px); }
.section__head--narrow { max-width: 40rem; }
.section__head h2 { font-size: clamp(26px, 3.1vw, 38px); letter-spacing: -.02em; }
.section__lead { margin-top: 14px; color: var(--muted); max-width: 40em; }

/* ── Bento: 3 cells, exact count, mixed backgrounds ────────────────── */
.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.bento__cell {
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--surface);
  padding: 28px;
  display: flex; flex-direction: column; gap: 20px;
  overflow: hidden;
}
.bento__cell--wide { grid-column: span 2; }
.bento__cell h3 { font-size: 19px; }
.bento__cell p { color: var(--muted); font-size: 14.5px; margin-top: 10px; }
.bento__text h3 + p { margin-top: 10px; }

/* Third cell runs the full width so the grid has no empty tiles. */
.bento__cell--tint {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  column-gap: 48px;
  row-gap: 12px;
  padding: 34px 32px;
  background: var(--accent);
  border-color: transparent;
  color: var(--accent-ink);
}
.bento__cell--tint .chip { grid-row: 1; margin-bottom: 14px; }
.bento__cell--tint h3 { grid-column: 1; font-size: 22px; }
.bento__cell--tint p {
  grid-column: 2; grid-row: 1 / span 2;
  margin-top: 0;
  font-size: 15px;
  color: color-mix(in srgb, var(--accent-ink) 82%, transparent);
}

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12.5px; font-weight: 600;
  margin-bottom: 16px;
  width: fit-content;
}
.chip--onTint {
  background: color-mix(in srgb, var(--accent-ink) 16%, transparent);
  color: var(--accent-ink);
}

.bento__shot, .bento__phone { margin: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.bento__shot { margin-top: auto; }
.bento__phone { max-width: 220px; margin-inline: auto; }
.bento__cell--shot { justify-content: space-between; }

@media (max-width: 1000px) {
  .bento { grid-template-columns: 1fr; }
  .bento__cell--wide { grid-column: span 1; }
  .bento__cell--tint {
    grid-column: span 1;
    grid-template-columns: 1fr;
    padding: 28px;
  }
  .bento__cell--tint h3, .bento__cell--tint p { grid-column: 1; }
  .bento__cell--tint p { grid-row: auto; margin-top: 10px; }
  .bento__phone { max-width: 160px; }
}

/* ── Steps: horizontal band with a connector rail ──────────────────── */
.steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
  position: relative;
}
.steps::before {
  content: "";
  position: absolute;
  top: 23px; left: 10%; right: 10%;
  height: 1px;
  background: var(--line-strong);
}
.steps__item { position: relative; }
.steps__node {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--accent);
  margin-bottom: 18px;
  position: relative; z-index: 1;
}
.steps__node .icon { width: 21px; height: 21px; }
.steps__item h3 { font-size: 16.5px; margin-bottom: 8px; }
.steps__item p { font-size: 14px; color: var(--muted); }

@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; gap: 26px; padding-left: 8px; }
  .steps::before { top: 12px; bottom: 12px; left: 31px; right: auto; width: 1px; height: auto; }
  .steps__item { display: grid; grid-template-columns: 46px 1fr; column-gap: 18px; }
  .steps__node { grid-row: span 2; margin-bottom: 0; }
  .steps__item h3 { align-self: center; margin-bottom: 4px; }
}

/* ── Capability clusters: two groups, sparse hairlines ─────────────── */
.clusters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); }
.cluster__h {
  font-size: 13px; font-weight: 600; color: var(--muted);
  letter-spacing: .1em; text-transform: uppercase;
  padding-bottom: 14px; border-bottom: 1px solid var(--line-strong);
  margin-bottom: 8px;
}
.cluster__list li { display: flex; gap: 16px; padding: 22px 0 0; }
.cluster__list .icon { color: var(--accent); margin-top: 3px; }
.cluster__list strong { display: block; font-size: 16px; font-weight: 650; }
.cluster__list p { font-size: 14.5px; color: var(--muted); margin-top: 5px; }

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

/* ── Trust: tinted split ───────────────────────────────────────────── */
.trust { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.trust__copy h2 { font-size: clamp(26px, 3.1vw, 36px); letter-spacing: -.02em; }
.trust__copy > p { margin-top: 16px; color: var(--muted); max-width: 40em; }
.checks { margin-top: 26px; display: grid; gap: 13px; }
.checks li { display: flex; align-items: flex-start; gap: 11px; font-size: 15px; }
.checks .icon { color: var(--accent); margin-top: 4px; }

.trust__aside {
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--surface);
  padding: 28px;
}
.trust__mark { width: 34px; height: 34px; fill: var(--accent); margin-bottom: 16px; }
.trust__aside p { font-size: 14.5px; color: var(--muted); }

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

/* ── Deploy: hairline stack ────────────────────────────────────────── */
.stack { border-top: 1px solid var(--line-strong); }
.stack__row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: start;
  gap: 22px;
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
}
.stack__row .icon--xl { color: var(--accent); margin-top: 2px; }
.stack__body h3 { font-size: 18px; margin-bottom: 8px; }
.stack__body p { color: var(--muted); font-size: 14.5px; max-width: 52em; }
.stack__tag {
  padding: 5px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  font-size: 12.5px; color: var(--muted); white-space: nowrap;
}
@media (max-width: 700px) {
  .stack__row { grid-template-columns: 26px minmax(0, 1fr); }
  .stack__tag { grid-column: 2; justify-self: start; }
}

/* ── FAQ ───────────────────────────────────────────────────────────── */
.faq { max-width: 56rem; }
.faq h2 { font-size: clamp(26px, 3.1vw, 36px); letter-spacing: -.02em; margin-bottom: 32px; }
.faq__list { border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0;
  font-size: 16.5px; font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { color: var(--muted); transition: transform .25s var(--ease); }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq details p { padding: 0 0 24px; color: var(--muted); max-width: 60ch; }

/* ── Closing CTA ───────────────────────────────────────────────────── */
.closer { padding: clamp(64px, 8vw, 116px) 0; }
.closer__inner {
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--bg-sunken);
  padding: clamp(44px, 6vw, 76px) 24px;
}
.closer h2 { font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -.02em; }
.closer p { margin: 16px auto 32px; color: var(--muted); max-width: 32em; }

/* ── Footer ────────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--line); padding: 40px 0; }
.foot__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; }
.foot__brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15px; }
.foot__brand img { border-radius: 7px; }
.foot__links { display: flex; flex-wrap: wrap; gap: 22px; margin-left: auto; }
.foot__links a { font-size: 14px; color: var(--muted); transition: color .2s var(--ease); }
.foot__links a:hover { color: var(--text); }
.foot__legal { font-size: 13.5px; color: var(--muted); width: 100%; }
.foot__filing { font-size: 13.5px; color: var(--muted); width: 100%; }
.foot__filing a { color: inherit; text-decoration: none; }
.foot__filing a:hover { color: var(--text); text-decoration: underline; }

/* ── Scroll reveal (IntersectionObserver driven) ───────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  .reveal[data-shown="true"] { opacity: 1; transform: none; }
}

/* ── 换肤菜单（导航栏内，紧挨明暗切换按钮）─────────────────────────── */
.accent-menu { position: relative; display: inline-flex; }
.accent-menu #accentToggle { color: var(--accent); }
.accent-menu__panel {
  display: none;
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-panel); padding: 12px; box-shadow: var(--shadow);
  min-width: 212px;
}
.accent-menu[data-open="true"] .accent-menu__panel { display: block; }
.accent-menu__title {
  font-size: 12px; color: var(--muted); margin: 0 0 10px; letter-spacing: .04em;
}
.accent-menu__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.accent-switch__opt {
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 7px 10px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--text); font-size: 13px; cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.accent-switch__opt:hover { background: var(--bg-sunken); }
.accent-switch__opt[aria-pressed="true"] {
  border-color: var(--accent); background: var(--accent-soft); color: var(--accent-hov);
}
.accent-switch__dot {
  width: 16px; height: 16px; border-radius: var(--r-pill); flex: none;
  box-shadow: inset 0 0 0 1px rgb(15 23 42 / .12);
}

/* ── Language toggle (zh / en) ──────────────────────────────────────
   Sits next to .icon-btn in the header; same height and pill border,
   but carries a small label so the switch is discoverable at a glance. */
.lang-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  height: 38px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: transparent; color: var(--muted); cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 500; letter-spacing: .02em;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.lang-toggle:hover { color: var(--text); border-color: var(--line-strong); }
.lang-toggle__text { line-height: 1; }
@media (max-width: 640px) {
  .lang-toggle { padding: 0 10px; }
}