/* ============================================================================
   QYDION 名片站 · 主站风格设计基座（无构建纯 CSS）
   ----------------------------------------------------------------------------
   移植自主站（D:/rebuild）设计真源，色值 / 命名 / 数值与主站代码一致：
     - tokens：  styles/en/tokens.css（:root 级 --q-* 设计令牌）
     - 原子类：  styles/en/base.css（:where() 零特异性，同名同义）
     - 组件类：  components/en/sections/home.module.css 与
                 components/en/shell/{SiteHeader,SiteFooter}.module.css 与
                 components/en/hero/HeroGalaxySlot.module.css 的 qd-* 移植
   使用说明与推荐 HTML 骨架见同目录 README.md。

   用法（页面 <head> 内，字体 preload 见 README）：
     <link rel="preload" href="/fonts/archivo-latin-wdth-normal.woff2" as="font"
           type="font/woff2" crossorigin="anonymous">
     <link rel="stylesheet" href="/qd/qd.css">
   ============================================================================ */

/* ---------- 字体：Archivo 可变字体（自托管，latin wdth 轴 62–125 + wght 100–900） ---------- */
@font-face {
  font-family: archivo;
  src: url("/fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  font-display: swap;
  font-weight: 100 900;
  font-style: normal;
  font-stretch: 62% 125%;
}
/* 度量回退（主站 tokens.css 同款）：减少 swap 时的换字跳动 */
@font-face {
  font-family: "archivo Fallback";
  src: local("Arial");
  ascent-override: 85.41%;
  descent-override: 20.43%;
  line-gap-override: 0%;
  size-adjust: 102.80%;
}

/* ============================================================================
   设计令牌（:root 级；与主站 tokens.css 逐项一致，主站 scoped 到 html[lang]，
   名片站无该约束故挂 :root）
   ============================================================================ */
:root {
  /* Surfaces 抬升面 */
  --q-night-0: #070A10;
  --q-night-1: #0D121A;
  --q-night-2: #141B26;
  --q-night-3: #1B2431;
  /* Lines 线 */
  --q-line-1: #263142; /* 装饰线（仅装饰，无对比度职责） */
  --q-line-2: #6B7A8F; /* 控件描边（≥3:1） */
  /* Text 文字三级 */
  --q-text-1: #EDF0F5;
  --q-text-2: #B4BCC8;
  --q-text-3: #8E99A8;
  /* Accent：金色起点 */
  --q-accent: #F2C98C;
  --q-accent-hover: #F7D9AC;
  --q-on-accent: #070A10;
  /* Semantic 语义色（只有成功 / 危险两种） */
  --q-danger: #FF9E91;
  --q-success: #8FD4B2;
  --q-disabled: #6B7686;
  --q-scrim: rgb(7 10 16 / 0.78);

  /* 字体栈：Latin 走 Archivo，中文回退 HarmonyOS Sans SC / MiSans / 雅黑 */
  --q-font-archivo: archivo, "archivo Fallback";
  --q-font: var(--q-font-archivo), "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", ui-sans-serif,
    system-ui, "Segoe UI", Arial, sans-serif;

  /* 间距 4/8/12/16/24/32/48/64/96/128 */
  --q-space-1: 4px;
  --q-space-2: 8px;
  --q-space-3: 12px;
  --q-space-4: 16px;
  --q-space-5: 24px;
  --q-space-6: 32px;
  --q-space-7: 48px;
  --q-space-8: 64px;
  --q-space-9: 96px;
  --q-space-10: 128px;
  --q-section-y: clamp(48px, 6vw, 96px);
  --q-gutter: 16px;
  --q-gap: 16px;
  --q-max: 1200px;
  --q-measure: 68ch;

  /* 尺寸 */
  --q-control-h: 44px;
  --q-header-h: 56px;

  /* 形状：圆角只有 6px 控件 / 10px 卡片 / 9999px */
  --q-radius-control: 6px;
  --q-radius-surface: 10px;
  --q-radius-round: 9999px;

  /* 阴影只给浮层 */
  --q-shadow-2: 0 8px 24px rgb(2 4 8 / 0.5);
  --q-shadow-3: 0 16px 48px rgb(2 4 8 / 0.6);

  /* 动效 120/200/320ms */
  --q-dur-1: 120ms;
  --q-dur-2: 200ms;
  --q-dur-3: 320ms;
  --q-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --q-ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* 层级（与主站 tokens.css 一致） */
  --q-z-sky: 0;
  --q-z-content: 1;
  --q-z-header: 100;
  --q-z-top: 200;
  --q-z-chat-launcher: 300;
  --q-z-chat-panel: 310;
  --q-z-overlay: 400;
  --q-z-skip: 500;
}

@media (min-width: 768px) {
  :root { --q-gutter: 24px; --q-gap: 24px; }
}
@media (min-width: 1024px) {
  :root { --q-gutter: 32px; --q-gap: 32px; --q-header-h: 64px; }
}
/* reduced-motion：动效时长全部归零（状态直接到位） */
@media (prefers-reduced-motion: reduce) {
  :root { --q-dur-1: 0ms; --q-dur-2: 0ms; --q-dur-3: 0ms; }
}

/* ============================================================================
   文档底座（主站 base.css 的 html[lang]/body 规则移植；挂 .qd-page 由页面显式开启，
   不影响未使用本基座的旧页面）
   ============================================================================ */
.qd-page {
  color-scheme: dark;
  background: var(--q-night-0);
  color: var(--q-text-1);
  font-family: var(--q-font);
  font-size: 100%;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--q-header-h) + 16px);
}
@media (prefers-reduced-motion: reduce) {
  .qd-page { scroll-behavior: auto; }
}
.qd-page body {
  margin: 0;
  min-height: 100dvh;
  background: var(--q-night-0);
  font-stretch: 100%;
  font-weight: 400;
  overflow-wrap: break-word;
}
.qd-page main { position: relative; z-index: var(--q-z-content); display: block; }
.qd-page main:focus { outline: none; }

/* ---------- Reset（零特异性） ---------- */
:where(.qd-page, .qd-page *) { box-sizing: border-box; }
:where(.qd-page h1, .qd-page h2, .qd-page h3, .qd-page h4,
       .qd-page p, .qd-page ul, .qd-page ol, .qd-page figure, .qd-page blockquote,
       .qd-page dl, .qd-page dd) { margin: 0; }
:where(.qd-page ul, .qd-page ol) { padding: 0; list-style: none; }
:where(.qd-page img, .qd-page video, .qd-page canvas, .qd-page svg) { display: block; max-width: 100%; }
:where(.qd-page button, .qd-page input, .qd-page textarea, .qd-page select) { font: inherit; color: inherit; }
:where(.qd-page button) { cursor: pointer; }
:where(.qd-page a) { color: inherit; }

/* ---------- 全局焦点环：2px 暖金 offset 2（实色 outline，Windows 高对比可存活） ---------- */
:where(.qd-page :focus-visible) {
  outline: 2px solid var(--q-accent);
  outline-offset: 2px;
}
:where(.qd-page :focus:not(:focus-visible)) { outline: none; }

/* ============================================================================
   原子类（与主站 base.css 同名同义，全部 :where() 零特异性）
   ============================================================================ */

/* ---------- 布局 ---------- */
:where(.q-container) {
  width: 100%;
  max-width: calc(var(--q-max) + 2 * var(--q-gutter));
  margin-inline: auto;
  padding-inline: var(--q-gutter);
}
:where(.q-section) { padding-block: var(--q-section-y); }

/* ---------- 排版铁律「越重要越宽」---------- */
:where(.q-display-xl) {
  font-size: clamp(2.25rem, 1.2rem + 3.4vw, 4rem);
  font-stretch: 116%;
  font-weight: 560;
  line-height: 1.06;
  letter-spacing: -0.01em;
}
:where(.q-display-l) {
  font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem);
  font-stretch: 114%;
  font-weight: 560;
  line-height: 1.08;
  letter-spacing: -0.005em;
}
:where(.q-heading-m) {
  font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem);
  font-stretch: 110%;
  font-weight: 600;
  line-height: 1.15;
}
:where(.q-heading-s) {
  font-size: 1.25rem;
  font-stretch: 104%;
  font-weight: 600;
  line-height: 1.3;
}
:where(.q-body-l) { font-size: 1.125rem; line-height: 1.6; color: var(--q-text-2); }
:where(.q-body) { font-size: 1rem; line-height: 1.6; }
:where(.q-body-s) { font-size: 0.875rem; line-height: 1.5; }
:where(.q-label) { font-size: 0.9375rem; font-weight: 560; line-height: 1.3; letter-spacing: 0.005em; }
:where(.q-meta) {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--q-text-3);
  font-variant-numeric: tabular-nums;
}
:where(.q-measure) { max-width: var(--q-measure); }

/* ---------- 按钮（顺序：base → 变体 → hover → disabled） ---------- */
:where(.q-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--q-space-2);
  min-height: var(--q-control-h);
  padding: 0 var(--q-space-5);
  border: 1px solid transparent;
  border-radius: var(--q-radius-control);
  font-size: 0.9375rem;
  font-weight: 560;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--q-dur-1) var(--q-ease-out), border-color var(--q-dur-1) var(--q-ease-out),
    color var(--q-dur-1) var(--q-ease-out), transform var(--q-dur-1) var(--q-ease-out);
}
:where(.q-btn:active) { transform: translateY(1px); }

:where(.q-btn--primary) { background: var(--q-accent); color: var(--q-on-accent); }
:where(.q-btn--secondary) { background: transparent; color: var(--q-text-1); border-color: var(--q-line-2); }
:where(.q-btn--quiet) {
  padding: 0 var(--q-space-1);
  background: transparent;
  color: var(--q-text-1);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}
@media (hover: hover) {
  :where(.q-btn--primary:hover) { background: var(--q-accent-hover); }
  :where(.q-btn--secondary:hover) { border-color: var(--q-text-2); background: var(--q-night-1); }
  :where(.q-btn--quiet:hover) { color: var(--q-accent-hover); text-decoration-thickness: 2px; }
}
:where(.q-btn:disabled, .q-btn[aria-disabled="true"]) {
  cursor: not-allowed;
  color: var(--q-disabled);
  border-color: var(--q-line-1);
  background: transparent;
  transform: none;
}

/* ---------- 链接 ---------- */
:where(.q-link) {
  color: var(--q-text-1);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: color var(--q-dur-1) var(--q-ease-out);
}
@media (hover: hover) {
  :where(.q-link:hover) { color: var(--q-accent-hover); text-decoration-thickness: 2px; }
}
:where(.q-link--arrow) {
  display: inline-flex;
  align-items: center;
  gap: var(--q-space-2);
  min-height: var(--q-control-h);
}

/* ---------- 徽标（主站 home.module.css .badge 移植） ---------- */
:where(.q-badge) {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 var(--q-space-2);
  border: 1px solid var(--q-line-2);
  border-radius: var(--q-radius-control);
  color: var(--q-text-2);
  font-size: 0.75rem;
  font-weight: 560;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
:where(.q-badge[data-status="live"]) { color: var(--q-success); border-color: currentColor; }

/* ---------- 工具类 ---------- */
:where(.q-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;
}
:where(.q-skeleton) {
  display: block;
  border-radius: var(--q-radius-control);
  background: var(--q-night-3);
}

/* ============================================================================
   组件类（qd-*，主站 CSS Module 模式的无构建移植）
   ============================================================================ */

/* ---------- 卡片：night-1 底 + 1px line-1 边 + 10px 圆角 + 24px 内边距；
                hover 升 night-2 + line-2（主站 home .productInner / .productLink） ---------- */
:where(.qd-card) {
  display: flex;
  flex-direction: column;
  gap: var(--q-space-3);
  padding: var(--q-space-5);
  border: 1px solid var(--q-line-1);
  border-radius: var(--q-radius-surface);
  background: var(--q-night-1);
  color: var(--q-text-1);
  text-decoration: none;
  transition: border-color var(--q-dur-1) var(--q-ease-out),
    background-color var(--q-dur-1) var(--q-ease-out);
}
@media (hover: hover) {
  :where(.qd-card:hover) { border-color: var(--q-line-2); background: var(--q-night-2); }
}

/* ---------- 行式分区：border-top 1px line-1 分行，无卡片（主站 home .capRow / .updateRow） ---------- */
:where(.qd-row-list) { border-bottom: 1px solid var(--q-line-1); }
:where(.qd-row) {
  display: grid;
  gap: var(--q-space-2);
  padding-block: var(--q-space-5);
  border-top: 1px solid var(--q-line-1);
}
@media (min-width: 768px) {
  :where(.qd-row) {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: var(--q-gap);
    align-items: baseline;
  }
  :where(.qd-row > .qd-row-name) { grid-column: 1 / 4; color: var(--q-text-1); }
  :where(.qd-row > .qd-row-body) { grid-column: 4 / 9; color: var(--q-text-2); max-width: 60ch; }
}
@media (min-width: 1024px) {
  :where(.qd-row) { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  :where(.qd-row > .qd-row-name) { grid-column: 1 / 5; }
  :where(.qd-row > .qd-row-body) { grid-column: 5 / 11; }
}

/* ---------- CTA 全宽带：night-1 底 + 上边 1px line-1 + 上下 64px（主站 home .cta） ---------- */
:where(.qd-cta-band) {
  border-top: 1px solid var(--q-line-1);
  background: var(--q-night-1);
  padding-block: var(--q-space-8);
  margin-top: var(--q-section-y);
}
:where(.qd-cta-band-inner) { display: flex; flex-direction: column; gap: var(--q-space-5); }
:where(.qd-cta-band-actions) { display: flex; flex-wrap: wrap; gap: var(--q-space-3); }
@media (min-width: 1024px) {
  :where(.qd-cta-band-inner) { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ---------- 页脚 4 列网格（主站 SiteFooter .grid / .columnTitle / .link / .bottom） ---------- */
:where(.qd-footer) {
  position: relative;
  z-index: var(--q-z-content);
  padding-block: var(--q-space-8) var(--q-space-6);
  border-top: 1px solid var(--q-line-1);
  background: var(--q-night-0);
}
:where(.qd-footer-grid) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--q-space-6) var(--q-gap);
  margin-top: var(--q-space-6);
}
:where(.qd-footer-grid > :last-child) { grid-column: 1 / -1; }
@media (min-width: 1024px) {
  :where(.qd-footer-grid) { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr); }
  :where(.qd-footer-grid > :last-child) { grid-column: auto; }
}
:where(.qd-footer-title) {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--q-text-3);
  margin-bottom: var(--q-space-2);
}
:where(.qd-footer-links) { display: flex; flex-direction: column; }
:where(.qd-footer-link) {
  display: inline-flex;
  align-items: center;
  gap: var(--q-space-1);
  min-height: var(--q-control-h);
  min-width: var(--q-control-h);
  color: var(--q-text-2);
  font-size: 0.9375rem;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color var(--q-dur-1) var(--q-ease-out);
}
@media (hover: hover) {
  :where(.qd-footer-link:hover) { color: var(--q-text-1); text-decoration: underline; text-underline-offset: 0.25em; }
}
:where(.qd-footer-bottom) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--q-space-2) var(--q-space-5);
  margin-top: var(--q-space-7);
  padding-top: var(--q-space-5);
  border-top: 1px solid var(--q-line-1);
  font-size: 0.875rem;
  color: var(--q-text-3);
}

/* ---------- 金色起点：6px 暖金圆点 + 两圈 1px 同心环（36px/0.42 与 68px/0.2）。
                纯 CSS，无发光无模糊（主站 HeroGalaxySlot .origin）。
                位置由使用方用 inline style 设 left/top（如 left:74%; top:16%），
                margin 已把圆点中心对到该点。 ---------- */
:where(.qd-origin-point) {
  position: absolute;
  left: 50%;
  top: 16%;
  z-index: 1;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: var(--q-radius-round);
  background: var(--q-accent);
  pointer-events: none;
}
:where(.qd-origin-point::before),
:where(.qd-origin-point::after) {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid var(--q-accent);
  border-radius: var(--q-radius-round);
  transform: translate(-50%, -50%);
}
:where(.qd-origin-point::before) { width: 36px; height: 36px; opacity: 0.42; }
:where(.qd-origin-point::after) { width: 68px; height: 68px; opacity: 0.2; }

/* ---------- Hero 区（主站 home .hero / .heroGrid / .heroContent / .heroActions） ---------- */
:where(.qd-hero) {
  position: relative;
  isolation: isolate;
  display: flex;
  margin-top: calc(-1 * var(--q-header-h));
  padding-top: var(--q-header-h);
  min-height: min(92dvh, 720px);
  overflow: clip;
}
@media (min-width: 768px) {
  :where(.qd-hero) { min-height: min(88dvh, 860px); }
}
:where(.qd-hero-grid) {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  padding-block: var(--q-space-7) var(--q-space-8);
}
@media (min-width: 1024px) {
  :where(.qd-hero-grid) { align-items: center; padding-block: var(--q-space-8); }
}
:where(.qd-hero-content) { width: 100%; max-width: 44rem; }
@media (min-width: 1280px) {
  :where(.qd-hero-content) { max-width: 50rem; }
}
:where(.qd-hero-title) { text-wrap: balance; }
:where(.qd-hero-sub) { margin-top: var(--q-space-5); max-width: 34rem; }
:where(.qd-hero-actions) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--q-space-3) var(--q-space-5);
  margin-top: var(--q-space-6);
}

/* ---------- 方法轨：编号站点 + 连线（主站 home .rail / .station / .stationMark） ---------- */
:where(.qd-rail) { position: relative; display: grid; gap: var(--q-space-6); }
:where(.qd-rail::before) {
  content: "";
  position: absolute;
  left: 13px;
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: var(--q-line-2);
}
:where(.qd-station) { position: relative; padding-left: 52px; }
:where(.qd-station-mark) {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--q-line-2);
  border-radius: var(--q-radius-round);
  background: var(--q-night-0);
  color: var(--q-text-2);
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
:where(.qd-station:first-child .qd-station-mark) { border-color: var(--q-accent); color: var(--q-accent); }
:where(.qd-station-title) { margin-bottom: var(--q-space-2); padding-top: 2px; }
:where(.qd-station-body) { color: var(--q-text-2); max-width: 36ch; }
@media (min-width: 1024px) {
  :where(.qd-rail) { grid-template-columns: repeat(var(--qd-steps, 4), minmax(0, 1fr)); gap: var(--q-gap); }
  :where(.qd-rail::before) { left: 14px; right: 0; top: 13px; bottom: auto; width: auto; height: 1px; }
  :where(.qd-station) { padding-left: 0; padding-top: 52px; }
}

/* ---------- 透明 sticky 页头（主站 SiteHeader .header：滚动后 night-1 + 底边 1px line-1）。
                data-scrolled 属性由页面滚动监听添加（README 有示例）。 ---------- */
:where(.qd-header) {
  position: sticky;
  top: 0;
  z-index: var(--q-z-header);
  height: var(--q-header-h);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--q-dur-1) var(--q-ease-out), border-color var(--q-dur-1) var(--q-ease-out);
}
:where(.qd-header[data-scrolled]) {
  background: var(--q-night-1);
  border-bottom-color: var(--q-line-1);
}
:where(.qd-header-bar) {
  display: flex;
  align-items: center;
  gap: var(--q-space-5);
  height: 100%;
}
:where(.qd-nav-link) {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--q-control-h);
  padding: 0 var(--q-space-3);
  color: var(--q-text-2);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--q-radius-control);
  transition: color var(--q-dur-1) var(--q-ease-out);
}
:where(.qd-nav-link[aria-current="page"]) { color: var(--q-text-1); }
:where(.qd-nav-link[aria-current="page"]::after) {
  content: "";
  position: absolute;
  left: var(--q-space-3);
  right: var(--q-space-3);
  bottom: 6px;
  height: 2px;
  background: var(--q-accent);
}
@media (hover: hover) {
  :where(.qd-nav-link:hover) { color: var(--q-text-1); }
}

/* ---------- 浮层阴影与对话框遮罩（浮层专用；卡片/按钮一律无投影） ---------- */
:where(.qd-overlay-surface) { box-shadow: var(--q-shadow-2); }
:where(.qd-scrim) { background: var(--q-scrim); }

/* forced-colors 下隐藏星空画布（主站 base.css 同款规则） */
@media (forced-colors: active) {
  .qd-page [data-sky] { display: none; }
}