/* 紫微首页（zw.h5no1.com /） — 设计系统与版式.
 * 色板 SSOT: /static/proposals/_shared/zw-proposal-tokens.css（--zw-*，只引不改）.
 * 本文件新增变量一律 --zwl-* 命名空间；交互中心件层用 --zwc-*.
 * LOC 提示: CSS 不计入站点行数预算，但单文件仍受红线 #5（≤800 行）约束. */

:root {
  /* landing 专属衍生变量（仅组合既有 --zw-* 色，未发明新色值） */
  --zwl-ink: var(--zw-text);                 /* 近黑 #2C2C30 */
  --zwl-subtle: #71717B;                     /* 三级文字 ≥4.5:1 AA（--zw-text-subtle 太浅，仅宜作装饰，正文用本变量） */
  --zwl-hairline: var(--zw-border);
  --zwl-glass: rgba(252, 251, 253, .82);     /* --zw-bg @ 82%（毛玻璃导航） */
  --zwl-nav-h: 60px;
  --zwl-maxw: 1120px;
  --zwl-grad-text: linear-gradient(120deg, var(--zw-brand-deep), var(--zw-brand) 60%, var(--zw-pink-deep));
  --zwl-ring: rgba(157, 127, 205, .28);      /* --zw-brand 描边变体 */
}

/* ── Base ─────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--zw-bg);
  color: var(--zwl-ink);
  font-family: var(--zw-font-sans);
  font-size: var(--zw-fs-base);
  line-height: var(--zw-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { line-height: var(--zw-lh-heading); font-weight: 600; margin: 0; }
p { margin: 0; }
a { color: var(--zw-brand-deep); text-decoration: none; }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--zw-brand); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }   /* skip-link target: move focus without a full-page ring */
.container { max-width: var(--zwl-maxw); margin: 0 auto; padding: 0 var(--zw-sp-32); }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--zw-surface); color: var(--zw-brand-deep);
  padding: var(--zw-sp-8) var(--zw-sp-16); border-radius: var(--zw-radius-sm);
}
.skip-link:focus { left: var(--zw-sp-12); top: var(--zw-sp-12); }

/* ── Rabbit logo (recolored TUVE mark: 淡紫 + 黑白) ─────────────────── */
.zw-logo { display: inline-flex; align-items: center; gap: var(--zw-sp-12); }
.zw-rabbit { width: 30px; height: 30px; display: block; flex: none; }
.zw-wordmark { display: flex; flex-direction: column; line-height: 1.05; }
.zw-wordmark .zh { font-size: var(--zw-fs-md); font-weight: 700; letter-spacing: .04em; color: var(--zwl-ink); }
.zw-wordmark .en { font-size: 10px; font-weight: 600; letter-spacing: .32em; color: var(--zwl-subtle); }

/* ── Sticky nav ───────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--zwl-glass);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--zwl-hairline);
}
.nav-inner {
  max-width: var(--zwl-maxw); margin: 0 auto; min-height: var(--zwl-nav-h);
  padding: 0 var(--zw-sp-32);
  display: flex; align-items: center; justify-content: space-between; gap: var(--zw-sp-24);
}
.nav .zw-rabbit { width: 26px; height: 26px; }
.nav .zw-wordmark .zh { font-size: var(--zw-fs-base); }
.nav-links { display: flex; gap: 2px; flex-wrap: wrap; }
.nav-links a {
  font-size: var(--zw-fs-sm); color: var(--zw-text-muted);
  padding: var(--zw-sp-4) var(--zw-sp-12); border-radius: var(--zw-radius-full);
  transition: color var(--zw-dur-fast) var(--zw-ease), background var(--zw-dur-fast) var(--zw-ease);
}
.nav-links a:hover { color: var(--zw-brand-deep); background: var(--zw-brand-soft); }
.nav-links a.active { color: var(--zw-brand-deep); background: var(--zw-brand-soft); font-weight: 600; }
@media (max-width: 860px) { .nav-links { display: none; } }

/* ── Hero ─────────────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(680px 460px at 78% 12%, var(--zw-brand-soft), transparent 70%),
    radial-gradient(560px 420px at 6% 96%, rgba(232,168,200,.10), transparent 72%);
}
.hero-inner {
  position: relative; max-width: var(--zwl-maxw); margin: 0 auto;
  padding: clamp(56px, 10vw, 120px) var(--zw-sp-32) clamp(64px, 9vw, 112px);
  display: grid; grid-template-columns: 1.18fr .82fr; gap: var(--zw-sp-64); align-items: center;
}
/* Hero mascot: 高瘦活体兔（可拖拽，物理在 landing.js；淡紫版，形取自 TUVE mascot） */
.zw-mascot {
  position: relative; width: min(260px, 62vw); margin: 0 auto;
  cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none;
  filter: drop-shadow(0 26px 42px rgba(123, 95, 176, .20));
}
.zw-mascot:active { cursor: grabbing; }
.zw-mascot::before {
  content: ""; position: absolute; inset: 2% -14% 10%; z-index: -1;
  background: radial-gradient(58% 52% at 50% 46%, var(--zw-brand-soft), transparent 70%);
}
.zw-mascot-svg { display: block; width: 100%; height: auto; overflow: visible; }
.hero-art-hint { margin-top: var(--zw-sp-16); font-size: var(--zw-fs-sm); color: var(--zwl-subtle); text-align: center; }
.eyebrow {
  display: inline-block; font-size: var(--zw-fs-sm); font-weight: 600; color: var(--zw-brand-deep);
  letter-spacing: .08em; background: var(--zw-brand-tint);
  border: 1px solid var(--zwl-ring); border-radius: var(--zw-radius-full);
  padding: var(--zw-sp-4) var(--zw-sp-16); margin-bottom: var(--zw-sp-24);
}
.hero h1 { font-size: clamp(32px, 4.7vw, 52px); letter-spacing: .01em; margin-bottom: var(--zw-sp-24); text-wrap: balance; }
.hero h1 .grad {
  background: var(--zwl-grad-text); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero-sub { font-size: var(--zw-fs-md); color: var(--zw-text-muted); max-width: 32em; margin-bottom: var(--zw-sp-32); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--zw-sp-16); align-items: center; }
.btn {
  display: inline-block; background: var(--zw-grad-brand); color: var(--zw-surface);
  font-size: var(--zw-fs-base); font-weight: 600; letter-spacing: .04em;
  padding: var(--zw-sp-12) var(--zw-sp-32); border-radius: var(--zw-radius-full);
  box-shadow: var(--zw-shadow-md);
  transition: transform var(--zw-dur-base) var(--zw-ease), box-shadow var(--zw-dur-base) var(--zw-ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--zw-shadow-lg); }
.btn-ghost {
  display: inline-block; color: var(--zw-brand-deep); font-size: var(--zw-fs-base); font-weight: 600;
  padding: var(--zw-sp-12) var(--zw-sp-24); border-radius: var(--zw-radius-full);
  border: 1px solid var(--zwl-ring);
  transition: background var(--zw-dur-fast) var(--zw-ease);
}
.btn-ghost:hover { background: var(--zw-brand-soft); }

/* hero stat rail */
.hero-stats { display: flex; gap: var(--zw-sp-32); margin-top: var(--zw-sp-48); flex-wrap: wrap; }
.hero-stat .n { font-size: var(--zw-fs-2xl); font-weight: 700; color: var(--zw-brand-deep); letter-spacing: -.02em; }
.hero-stat .l { font-size: var(--zw-fs-sm); color: var(--zw-text-muted); }
.hero-art { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* ── Section frame ────────────────────────────────────────────────── */
.sec { padding: clamp(64px, 9vw, 108px) 0; scroll-margin-top: calc(var(--zwl-nav-h) + 12px); }
.sec-alt { background: var(--zw-sunken); }
.sec-head { max-width: 680px; margin-bottom: var(--zw-sp-48); }
.kicker { font-size: var(--zw-fs-sm); font-weight: 600; color: var(--zw-brand-deep); letter-spacing: .18em; margin-bottom: var(--zw-sp-12); }
.sec-head h2 { font-size: clamp(26px, 3.1vw, var(--zw-fs-2xl)); margin-bottom: var(--zw-sp-16); }
.sec-sub { color: var(--zw-text-muted); font-size: var(--zw-fs-md); }

/* ── Cards (shared) ───────────────────────────────────────────────── */
.card { border-radius: var(--zw-radius-md); padding: var(--zw-sp-32); }
.card.tint { background: var(--zw-brand-tint); border-left: 3px solid var(--zw-brand); border-radius: var(--zw-radius-sm); }
.card.surface {
  background: var(--zw-surface); border: 1px solid var(--zwl-hairline); box-shadow: var(--zw-shadow-sm);
  position: relative;
  transition: transform var(--zw-dur-base) var(--zw-ease), box-shadow var(--zw-dur-base) var(--zw-ease),
              border-color var(--zw-dur-base) var(--zw-ease), opacity var(--zw-dur-base) var(--zw-ease);
}
.card.surface::before {
  content: ""; position: absolute; left: var(--zw-sp-24); right: var(--zw-sp-24); top: 0; height: 3px;
  background: var(--zw-grad-brand); border-radius: 0 0 var(--zw-radius-full) var(--zw-radius-full);
  opacity: 0; transform: scaleX(.32); transform-origin: left center;
  transition: opacity var(--zw-dur-base) var(--zw-ease), transform var(--zw-dur-base) var(--zw-ease);
  pointer-events: none;
}
.card.surface:hover { transform: translateY(-4px); border-color: var(--zwl-ring); box-shadow: var(--zw-shadow-md); }
.card.surface:hover::before { opacity: 1; transform: scaleX(1); }
.icon-badge {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  background: var(--zw-brand-soft); border-radius: var(--zw-radius-sm); margin-bottom: var(--zw-sp-16);
  transition: transform var(--zw-dur-base) var(--zw-ease), background var(--zw-dur-base) var(--zw-ease);
}
.icon-badge svg { width: 24px; height: 24px; fill: none; stroke: var(--zw-brand); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.card.surface:hover .icon-badge { transform: translateY(-2px); background: var(--zw-brand-tint); }

/* ── S2 · identity (from → to pipeline) ───────────────────────────── */
.idflow { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--zw-sp-16); position: relative; }
.idnode { background: var(--zw-surface); border: 1px solid var(--zwl-hairline); border-radius: var(--zw-radius-md); padding: var(--zw-sp-24); position: relative; box-shadow: var(--zw-shadow-sm); }
.idnode .idk { font-size: var(--zw-fs-sm); font-weight: 600; color: var(--zw-brand-deep); letter-spacing: .1em; margin-bottom: var(--zw-sp-8); }
.idnode h3 { font-size: var(--zw-fs-md); margin-bottom: var(--zw-sp-8); }
.idnode p { font-size: var(--zw-fs-sm); color: var(--zw-text-muted); }
.idnode:not(:last-child)::after {
  content: ""; position: absolute; right: -13px; top: 50%; width: 8px; height: 8px;
  border-top: 2px solid var(--zw-brand); border-right: 2px solid var(--zw-brand);
  transform: translateY(-50%) rotate(45deg); opacity: .7;
}
.id-northstar { margin-top: var(--zw-sp-32); }
.id-northstar p { font-size: var(--zw-fs-lg); font-weight: 600; line-height: 1.6; max-width: 46em; }
.id-northstar strong { color: var(--zw-brand-deep); }
@media (max-width: 900px) { .idflow { grid-template-columns: 1fr 1fr; } .idnode:nth-child(2)::after { display: none; } }
@media (max-width: 520px) { .idflow { grid-template-columns: 1fr; } .idnode::after { display: none !important; } }

/* ── S3 · capability grid ─────────────────────────────────────────── */
.cap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--zw-sp-24); }
.cap-card { padding: var(--zw-sp-24); }
.cap-card h3 { font-size: var(--zw-fs-md); margin-bottom: var(--zw-sp-8); }
.cap-card p { font-size: var(--zw-fs-sm); color: var(--zw-text-muted); }
.cap-card .icon-badge { width: 40px; height: 40px; }
.cap-card .icon-badge svg { width: 22px; height: 22px; }
@media (max-width: 1000px) { .cap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cap-grid { grid-template-columns: 1fr; } }

/* ── S4/S5 · 交互中心件 mount frames ───────────────────────────────── */
.zw-mount {
  margin: 0; background: var(--zw-surface); border: 1px solid var(--zwl-hairline);
  border-radius: var(--zw-radius-lg); box-shadow: var(--zw-shadow-md);
  padding: var(--zw-sp-32); overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.zw-mount > img, .zw-mount > svg { display: block; width: 100%; height: auto; }
.mount-hint { display: none; margin-top: var(--zw-sp-12); color: var(--zwl-subtle); font-size: var(--zw-fs-sm); text-align: center; }
@media (max-width: 900px) { .mount-hint { display: block; } }
/* S4 connector legend */
.connect-legend { display: flex; flex-wrap: wrap; gap: var(--zw-sp-16); margin-top: var(--zw-sp-24); }
.connect-legend span { display: inline-flex; align-items: center; gap: var(--zw-sp-8); font-size: var(--zw-fs-sm); color: var(--zw-text-muted); }
.connect-legend i { width: 10px; height: 10px; border-radius: var(--zw-radius-full); }

/* ── S6 · engineering substance (gate list) ───────────────────────── */
.eng-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--zw-sp-24); }
.eng-item { background: var(--zw-surface); border: 1px solid var(--zwl-hairline); border-radius: var(--zw-radius-md); padding: var(--zw-sp-24); box-shadow: var(--zw-shadow-sm); }
.eng-item h3 { font-size: var(--zw-fs-md); margin-bottom: var(--zw-sp-8); display: flex; align-items: center; gap: var(--zw-sp-8); }
.eng-item h3 code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 600; color: var(--zw-brand-deep); background: var(--zw-brand-soft); padding: 1px var(--zw-sp-8); border-radius: var(--zw-radius-sm); }
.eng-item p { font-size: var(--zw-fs-sm); color: var(--zw-text-muted); }
@media (max-width: 900px) { .eng-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .eng-grid { grid-template-columns: 1fr; } }

/* ── S7 · methods library ─────────────────────────────────────────── */
.method-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--zw-sp-16); }
.method { display: flex; gap: var(--zw-sp-12); align-items: flex-start; background: var(--zw-surface); border: 1px solid var(--zwl-hairline); border-radius: var(--zw-radius-sm); padding: var(--zw-sp-16); box-shadow: var(--zw-shadow-sm); transition: border-color var(--zw-dur-fast) var(--zw-ease); }
.method:hover { border-color: var(--zwl-ring); }
.method .mn { flex: none; font-size: var(--zw-fs-sm); font-weight: 700; color: var(--zwl-subtle); width: 22px; }
.method .mt { font-size: var(--zw-fs-sm); font-weight: 600; }
.method .md { font-size: 12.5px; color: var(--zw-text-muted); margin-top: 2px; }
.method-note { margin-top: var(--zw-sp-24); font-size: var(--zw-fs-sm); color: var(--zwl-subtle); }

/* ── S8 · closing ─────────────────────────────────────────────────── */
.close-steps { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--zw-sp-12); margin-bottom: var(--zw-sp-32); }
.close-steps .cstep { background: var(--zw-surface); border: 1px solid var(--zwl-ring); border-radius: var(--zw-radius-full); padding: var(--zw-sp-8) var(--zw-sp-24); font-weight: 600; }
.close-steps .carrow { color: var(--zw-brand-deep); font-weight: 600; }
.close-promise { max-width: 640px; margin: 0 auto; text-align: center; }
.close-promise p { font-size: var(--zw-fs-lg); font-weight: 600; line-height: 1.6; }
@media (max-width: 560px) { .close-steps { flex-direction: column; } .close-steps .carrow { transform: rotate(90deg); } }

/* ── Footer ───────────────────────────────────────────────────────── */
.footer { padding: var(--zw-sp-64) 0 var(--zw-sp-96); color: var(--zwl-subtle); font-size: var(--zw-fs-sm); text-align: center; }
.footer::before {
  content: ""; display: block; width: min(560px, 72%); height: 2px; margin: 0 auto var(--zw-sp-48);
  border-radius: var(--zw-radius-full); background: linear-gradient(90deg, transparent, var(--zw-brand), transparent); opacity: .35;
}
.footer .zw-logo { justify-content: center; margin-bottom: var(--zw-sp-16); }
.footer-sub { margin-top: var(--zw-sp-8); opacity: .85; }

/* ── Scroll reveal (gated on html.js — progressive enhancement) ────── */
.js .reveal { opacity: 0; transform: translateY(10px); transition: opacity var(--zw-dur-slow) var(--zw-ease), transform var(--zw-dur-slow) var(--zw-ease); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: .06s; } .js .reveal.d2 { transition-delay: .12s; }
.js .reveal.d3 { transition-delay: .18s; } .js .reveal.d4 { transition-delay: .24s; }

/* ── Responsive shell ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: var(--zw-sp-32); }
  .hero-art { max-width: 460px; }
}
@media (max-width: 560px) {
  .container, .nav-inner { padding-left: var(--zw-sp-16); padding-right: var(--zw-sp-16); }
  .hero-inner { padding-left: var(--zw-sp-16); padding-right: var(--zw-sp-16); }
  .hero h1 { font-size: clamp(27px, 7.4vw, 34px); }
  .hero-stats { gap: var(--zw-sp-24); }
  .zw-mount { padding: var(--zw-sp-16); }
}

/* ── Reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .zw-mascot { cursor: default; }   /* drag disabled in landing.js under reduced-motion */
  .hero-art-hint { display: none; }
  .btn, .btn-ghost, .nav-links a, .card.surface, .icon-badge, .method { transition: none; }
  .card.surface:hover, .card.surface:hover .icon-badge { transform: none; }
  .card.surface::before { transition: none; }
}