/* 启域智能官网的版式。只用 Shy-玻璃 的 token，不写色值、圆角、时长的字面量。
   组件外观都在 shy-glass/components/bundle.css，这里只管页面怎么排。 */

html { scroll-behavior: smooth; scroll-padding-top: 80px; color-scheme: dark; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--mist-000); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
#root { min-height: 100vh; overflow-x: clip; }
main:focus { outline: none; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* 页面宽度与边距：和 SiteHeader、Footer 用同一套 */
:root { --site-px: var(--space-4); --site-gap: var(--space-3); --site-sec: var(--space-12); }
@media (min-width: 640px) { :root { --site-px: var(--space-6); } }
@media (min-width: 1024px) { :root { --site-px: var(--space-8); --site-gap: var(--space-4); --site-sec: calc(var(--space-12) * 2); } }
@media (min-width: 1440px) { :root { --site-px: var(--space-12); } }
.site-wrap { box-sizing: border-box; width: 100%; max-width: calc(1200px + 2 * var(--site-px)); margin: 0 auto; padding: 0 var(--site-px); }

/* 雾面底上的两团淡光，玻璃才透得出来 */
main { position: relative; isolation: isolate; }
main::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.16;
  background:
    radial-gradient(720px 520px at 82% 380px, var(--glow-indigo), transparent 70%),
    radial-gradient(640px 520px at 8% 1500px, var(--glow-teal), transparent 70%),
    radial-gradient(720px 560px at 90% 2900px, var(--glow-indigo), transparent 70%),
    radial-gradient(640px 520px at 6% 4300px, var(--glow-teal), transparent 70%); }

.site-brand { font: 500 17px/24px var(--font-sans); color: var(--ink); text-decoration: none; }
.site-ink2 { color: var(--ink-2); }
.site-on2 { color: var(--on-nebula-2); }
.site-strong { color: var(--ink); font-weight: 500; }
.site-num { font-variant-numeric: tabular-nums; }
.site-note { margin-top: var(--space-3); }
.site-mt { margin-top: var(--space-5); }
.site-mt-s { margin-top: var(--space-2); }

/* 首屏 */
.site-hero { padding: var(--space-12) 0 0; }
.site-h1 { font-size: 32px; line-height: 44px; font-weight: 300; letter-spacing: 0; word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
.site-h1:lang(zh) { line-height: 44px; letter-spacing: 0; }
.site-h1 br { display: none; }
.site-hero-sub { margin-top: var(--space-5); color: var(--ink-2); font-weight: 400; max-width: 36em; }
.site-hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.site-hero-stage { display: grid; gap: var(--site-gap); margin-top: var(--space-12); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .site-h1, .site-h1:lang(zh) { font-size: 44px; line-height: 56px; font-weight: 200; } }
@media (min-width: 1024px) {
  .site-hero { padding-top: calc(var(--space-12) + var(--space-6)); }
  .site-h1, .site-h1:lang(zh) { font-size: 56px; line-height: 68px; letter-spacing: 0.02em; }
  .site-h1 br { display: inline; }
  .site-hero-stage { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
}

.site-run { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1fr); color: var(--on-nebula); padding-bottom: calc(var(--space-12) * 2); }
.site-run-num { display: grid; gap: var(--space-2); align-content: start; }
.site-run-num .body { margin-top: var(--space-3); }
@media (min-width: 640px) { .site-run { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); } }
.site-log { display: grid; gap: var(--space-4); }
.site-log li { display: grid; grid-template-columns: 44px 1fr; column-gap: var(--space-3); row-gap: var(--space-1); align-items: baseline; }
.site-log-t { font: 500 13px/20px var(--font-mono); color: var(--on-nebula-2); font-variant-numeric: tabular-nums; }
.site-log-x { grid-column: 2; font: 400 15px/24px var(--font-sans); color: var(--on-nebula); }

/* 人用暖色，Agent 用冷色，规则脚本用虚线框：和介绍册同一套语义，颜色之外都带文字 */
.site-who { justify-self: start; display: inline-flex; align-items: center; height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-pill); font: 500 12px/18px var(--font-sans); border: 1px solid currentColor; white-space: nowrap; }
.site-who-h { color: var(--glow-ember); }
.site-who-a { color: var(--glow-teal); }
.site-who-s { color: var(--on-nebula); border-style: dashed; }
.site-tiers .site-who-s { color: var(--ink-2); }

.site-hero-side { display: grid; align-content: start; }
.site-queue { display: grid; }
.site-queue li { display: grid; gap: var(--space-1); padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.site-queue li:first-child { border-top: 0; padding-top: 0; }
.site-queue li:last-child { padding-bottom: 0; }
.site-queue-top, .site-queue-row, .site-tier-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }

/* 概况一行 */
.site-stats { padding: var(--site-sec) 0 0; }
.site-stats-row { display: grid; gap: var(--space-8); grid-template-columns: repeat(3, auto); justify-content: start; align-items: end; }
.site-stats-say { grid-column: 1 / -1; max-width: 36em; }
@media (min-width: 1024px) {
  .site-stats-row { grid-template-columns: repeat(3, auto) minmax(0, 1fr); column-gap: calc(var(--space-12) + var(--space-4)); }
  .site-stats-say { grid-column: auto; }
}

/* 区块 */
.site-section { padding: var(--site-sec) 0 0; }
.site-section:last-of-type { padding-bottom: var(--site-sec); }
.site-sh { display: grid; gap: var(--space-3); margin-bottom: var(--space-8); }
.site-h2, .site-h2:lang(zh) { font-size: 24px; line-height: 32px; }
.site-lead { color: var(--ink-2); max-width: 36em; }
@media (min-width: 1024px) {
  .site-h2, .site-h2:lang(zh) { font-size: 44px; line-height: 52px; }
  .site-sh { margin-bottom: var(--space-12); }
}

.site-grid { display: grid; gap: var(--site-gap); grid-template-columns: minmax(0, 1fr); align-items: start; }
.site-grid > * { min-width: 0; }
@media (min-width: 1024px) {
  .site-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .site-c5 { grid-column: span 5; }
  .site-c7 { grid-column: span 7; }
  .site-c12 { grid-column: 1 / -1; }
}
.site-stack { display: grid; gap: var(--site-gap); }
.site-prose { display: grid; gap: var(--space-5); align-content: start; }
@media (min-width: 1024px) { .site-prose { padding-right: var(--space-8); } }

/* 规矩 */
.site-tiers { display: grid; }
.site-tiers li { display: grid; gap: var(--space-1); padding: var(--space-4) 0; border-top: 1px solid var(--line); }
.site-tiers li:first-child { border-top: 0; padding-top: 0; }
.site-tiers li:last-child { padding-bottom: 0; }

/* 能力范围 */
.site-caps { display: grid; gap: var(--space-4); }
.site-cap { display: grid; gap: var(--space-2); grid-template-columns: minmax(0, 1fr); }
.site-cap dd { display: flex; flex-wrap: wrap; gap: var(--space-2); }
@media (min-width: 640px) { .site-cap { grid-template-columns: 104px minmax(0, 1fr); align-items: start; } .site-cap dt { padding-top: 2px; } }

@media (min-width: 1024px) { .site-caps-wide .site-caps { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-8); } .site-caps-wide .site-cap { grid-template-columns: minmax(0, 1fr); } }

/* 服务方式 */
.site-fees { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); align-items: center; }
.site-fee { display: grid; gap: var(--space-1); }
.site-plus { color: var(--ink-2); display: inline-flex; }
@media (min-width: 1024px) { .site-fees { grid-template-columns: 1fr auto 1fr auto 1fr; column-gap: var(--space-8); } }

/* 在用系统 */
.site-sys { align-items: center; row-gap: var(--space-12); }
.site-sys-text { display: grid; gap: var(--space-4); }
.site-ticks { display: grid; gap: var(--space-3); }
.site-ticks li, .site-guard { display: grid; grid-template-columns: 20px 1fr; gap: var(--space-2); align-items: start; }
.site-ticks .sg-icon, .site-guard .sg-icon { margin-top: 2px; color: var(--status-good); }
@media (min-width: 1024px) {
  .site-sys .site-c5 { padding: 0 var(--space-8); }
}
@media (max-width: 1023px) { .site-order { order: 1; } .site-order + .site-c7 { order: 0; } .site-sys > * { order: 2; } .site-sys > :nth-child(-n+2) { order: -1; } }

/* 数据与边界 */
.site-plain { display: grid; gap: var(--space-3); }
.site-nots { display: grid; gap: var(--space-4); }
.site-nots > div { display: grid; gap: var(--space-1); }
.site-errs { display: grid; }
.site-errs li { display: grid; gap: var(--space-2); padding: var(--space-5) 0; border-top: 1px solid var(--line); }
.site-errs li:first-child { border-top: 0; padding-top: 0; }
.site-errs li:last-child { padding-bottom: 0; }

/* 联系 */
.site-demos { display: grid; }
.site-demos li { display: grid; grid-template-columns: 40px 1fr; gap: var(--space-4); align-items: start; padding: var(--space-5) 0; border-top: 1px solid var(--line); }
.site-demos li:first-child { border-top: 0; padding-top: 0; }
.site-demos li:last-child { padding-bottom: 0; }
.site-demos li > div { display: grid; gap: var(--space-1); }
.site-demo-n { color: var(--ink-2); }
.site-contact { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.site-contact-info { display: grid; gap: var(--space-1); }
.site-tel { color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; display: inline-block; min-height: 44px; line-height: 44px; }
.site-tel:hover { text-decoration: underline; }
.site-tel:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-xs); }
.site-qr { width: 160px; height: 160px; border-radius: var(--radius-sm); background: var(--solid); }
@media (max-width: 479px) { .site-contact { grid-template-columns: minmax(0, 1fr); } }

/* 沿用 Shy-玻璃 时按品质底线改的三处：编码标签不小于 12px，页脚链接的点击区不小于 32px（触屏 44px） */
.sg-tag--mono .sg-tag-text { font-size: 12px; }
.sg-footer a, .site-brand { display: inline-flex; align-items: center; min-height: 32px; }
@media (max-width: 639px) { .sg-footer a, .site-brand { min-height: 44px; } }
.site-foot-brand { color: var(--ink); }
.site-run-num .sg-dot { white-space: nowrap; }
.site-run-subs { display: grid; gap: var(--space-2); margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.site-run-subs > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.site-run-subs dd { color: var(--on-nebula); }