/* goxba.com 公司站（母品牌 + 产品矩阵）的唯一样式源。
   css-version: 20261020-19
   ⚠️ 改这个文件必须同时改上面这行与所有 HTML 里的 `site.css?v=…`（check.sh 会比两处）——
   站点没有内容哈希文件名，靠版本号让浏览器丢弃旧样式；忘了改就是"用户看到没样式的页"。
   框架照 microsoft.com（一级导航=产品/方案/公司；首页=产品矩阵；多栏页脚），
   刻度仍取 apple.com.cn 的实测值：12/14/17/21/34 + 首页主视觉 56。
   ⛔ 不插中间档；中文正文行高 1.7（苹果的 1.47 是给英文营销文案的）。 */
:root {
  color-scheme: light dark;
  --fg: #16181d; --dim: #6b7280; --line: #e5e7eb; --bg: #fff; --chip: #f3f4f6;
  --band: #f7f8fa; --ink: #0b1323;
  --fg-2: #4b5563;
  --accent: #2563eb;
  --t-cap: 12px; --t-sm: 14px; --t-md: 17px; --t-lg: 21px; --t-xl: 34px; --t-hero: 56px;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;
  --lh-tight: 1.3; --lh-base: 1.7; --lh-loose: 1.9;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fg: #e8eaed; --dim: #9aa0a6; --line: #2a2d33; --bg: #16181d; --chip: #23262c;
    --band: #1a1d23; --ink: #0b1323;
    --fg-2: #c3c8ce;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  /* 短页（联系/404）也要把页脚压到视口底部，否则下面露出一条白边像没做完 */
  min-height: 100vh; display: flex; flex-direction: column;
  font: var(--t-md)/var(--lh-base) -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Microsoft YaHei", sans-serif;
}
a { color: var(--accent); }
img { max-width: 100%; }

.wrap { max-width: 780px; margin: 0 auto; padding: 22px 16px 64px; }
.wide-in { max-width: 780px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 900px) {
  .wrap.wide { max-width: min(1360px, 88vw); }
  .wide-in { max-width: min(1360px, 88vw); }
}

/* ── 顶导航（微软式：品牌 + 产品/方案/公司 + 右侧一个动作）────────────── */
.nav { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 92%, transparent);
  border-bottom: 1px solid var(--line); backdrop-filter: saturate(180%) blur(12px); }
.nav .in { display: flex; align-items: center; gap: 18px; height: 64px; max-width: 780px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 900px) { .nav .in { max-width: min(1360px, 88vw); } }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--fg); white-space: nowrap; }
.brand img { display: block; height: 28px; width: auto; }
.brand .nm { font-size: var(--t-md); font-weight: 600; letter-spacing: -0.2px; }
.brand .sub { display: block; font-size: var(--t-cap); color: var(--dim); letter-spacing: .14em; text-transform: uppercase; line-height: 1; margin-top: 3px; }
.nav ul { display: flex; gap: 2px; margin: 0 0 0 14px; padding: 0; list-style: none; }
.nav li a { display: block; padding: 9px 12px; border-radius: var(--r-sm);
  font-size: var(--t-sm); color: var(--fg-2); text-decoration: none; white-space: nowrap; }
.nav li a:hover { background: var(--chip); color: var(--fg); }
.nav li a[aria-current] { color: var(--fg); font-weight: 600; }
@media (max-width: 760px) {
  .nav .in { height: auto; flex-wrap: wrap; padding: 10px 16px 0; }
  .nav ul { order: 3; width: 100%; margin: 0; overflow-x: auto; padding-bottom: 6px; }
  .brand .sub { display: none; }
}

/* ── 按钮 ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  background: var(--accent); color: #fff; text-decoration: none;
  border-radius: var(--r-md); padding: 11px 18px; font-weight: 600;
}
.btn:hover { filter: brightness(1.08); }
.btn.sm { padding: 8px 14px; font-size: var(--t-sm); border-radius: var(--r-sm); }
.btn-quiet {
  display: inline-flex; align-items: center; white-space: nowrap;
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 11px 18px;
  text-decoration: none; color: var(--fg); background: var(--bg); font-size: var(--t-sm);
}
.btn-quiet:hover { border-color: var(--accent); color: var(--accent); }
.btn-line { border-color: rgba(255,255,255,.38); color: #fff; background: transparent; }
.btn-line:hover { border-color: #fff; color: #fff; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ── Hero：全幅渲染主视觉 + 左对齐文字 ─────────────────────────────────── */
.hero { position: relative; overflow: hidden; background: #05070d; color: #fff; }
.hero .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 左侧压一层渐变：主视觉本身左边是暗的，但换一张图也要保证标题可读 */
.hero::before { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(5,7,13,.92) 0%, rgba(5,7,13,.62) 46%, rgba(5,7,13,.12) 100%); }
.hero .in { position: relative; max-width: 780px; margin: 0 auto; padding: 88px 16px 96px; }
@media (min-width: 900px) { .hero .in { max-width: min(1360px, 88vw); padding: 104px 16px 112px; } }
.hero h1 { font-size: var(--t-hero); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 20px; max-width: 860px; }
.hero .sub { max-width: 640px; margin: 0 0 30px; color: #c3c8ce; line-height: var(--lh-loose); }
@media (max-width: 520px) {
  .hero .in { padding: 56px 16px 60px; }
  .hero h1 { font-size: var(--t-xl); line-height: 1.25; }
}

/* ── 通用分区 ─────────────────────────────────────────────────────────── */
.sec { padding: 88px 0; }
@media (max-width: 640px) { .sec { padding: 56px 0; } }
.sec.alt { background: var(--band); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec.dark { background: var(--ink); color: #fff; }
.sec.dark .kicker { color: #8fa0bd; }
.sec.dark .lead { color: #b9c4d6; }
.kicker { margin: 0 0 10px; font-size: var(--t-cap); letter-spacing: .1em; color: var(--dim); }
h2.h2 { font-size: var(--t-xl); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 12px; }
.lead { max-width: 780px; color: var(--fg-2); margin: 0 0 30px; }

/* ── 产品：分组 Tab（纯 CSS radio 切换，零 JS）+ 卡片网格 ─────────────── */
.protabs { margin-top: 26px; }
/* 输入框留在 DOM 里做状态：视觉隐藏但不移出可访问性树（键盘可切换、可聚焦） */
.protabs > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ptabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
@media (max-width: 640px) { .ptabs { flex-wrap: wrap; } }
.ptabs label { padding: 11px 14px; font-size: var(--t-sm); color: var(--fg-2); white-space: nowrap;
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ptabs label:hover { color: var(--fg); }
#ptab-app:checked ~ .ptabs label[for="ptab-app"],
#ptab-game:checked ~ .ptabs label[for="ptab-game"],
#ptab-web:checked ~ .ptabs label[for="ptab-web"],
#ptab-media:checked ~ .ptabs label[for="ptab-media"],
#ptab-tools:checked ~ .ptabs label[for="ptab-tools"] { color: var(--fg); font-weight: 600; border-color: var(--accent); }
#ptab-app:focus-visible ~ .ptabs label[for="ptab-app"],
#ptab-game:focus-visible ~ .ptabs label[for="ptab-game"],
#ptab-web:focus-visible ~ .ptabs label[for="ptab-web"],
#ptab-media:focus-visible ~ .ptabs label[for="ptab-media"],
#ptab-tools:focus-visible ~ .ptabs label[for="ptab-tools"] { outline: 2px solid var(--accent); outline-offset: -2px; }
.ptabpanes .pgroup { display: none; margin: 0; }
#ptab-app:checked ~ .ptabpanes [data-pane="app"],
#ptab-game:checked ~ .ptabpanes [data-pane="game"],
#ptab-web:checked ~ .ptabpanes [data-pane="web"],
#ptab-media:checked ~ .ptabpanes [data-pane="media"],
#ptab-tools:checked ~ .ptabpanes [data-pane="tools"] { display: block; }
.pcards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(236px, 1fr)); }
.pcard { display: flex; flex-direction: column; gap: 6px; min-height: 118px; padding: 18px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md);
  text-decoration: none; color: var(--fg); transition: border-color .15s ease, transform .15s ease; }
.pcard:hover { border-color: var(--accent); transform: translateY(-1px); }
.pcard .nm { font-size: var(--t-md); font-weight: 600; letter-spacing: -0.01em; }
.pcard .ds { font-size: var(--t-sm); color: var(--fg-2); line-height: var(--lh-base); }
.pcard .ar { margin-top: auto; padding-top: 10px; font-size: var(--t-sm); color: var(--accent); white-space: nowrap; }
a.pcard:hover .nm { color: var(--accent); }
.prose p { max-width: 720px; }

/* 愿景与闭环（关于页） */
.vision { font-size: var(--t-xl); line-height: 1.32; letter-spacing: -0.01em; margin: 0 0 16px; max-width: 900px; }
.loop { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 14px; max-width: 820px; }
.loop li { border-top: 1px solid var(--line); padding-top: 12px;
  color: var(--fg-2); font-size: var(--t-sm); line-height: var(--lh-base); }
.loop b { display: block; color: var(--fg); font-size: var(--t-md); margin-bottom: 4px; }

/* ── 关于页：介绍页排版（两栏页头 + 事实条 + 深色愿景 + 三列闭环）──────── */
.about-head { display: grid; gap: 18px 64px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .about-head { grid-template-columns: 1.15fr .85fr; } }
.about-title { font-size: var(--t-xl); line-height: 1.25; letter-spacing: -0.01em; margin: 0; max-width: 900px; }
.about-lead { margin: 0; max-width: 560px; color: var(--fg-2); line-height: var(--lh-loose); }
.facts-strip { display: grid; gap: 22px 32px; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--line); }
.facts-strip b { display: block; font-size: var(--t-xl); line-height: 1.1; letter-spacing: -0.01em; margin-bottom: 6px; }
.facts-strip span { display: block; color: var(--dim); font-size: var(--t-sm); }
.pull { font-size: var(--t-xl); line-height: 1.32; letter-spacing: -0.01em; max-width: 900px; margin: 0 0 16px; }
.sec.dark .pull { color: #fff; }
.loop3 { display: grid; gap: 28px 36px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 8px; }
.loop3 .n { display: block; font-size: var(--t-cap); letter-spacing: .12em; color: var(--accent); margin-bottom: 10px; }
.loop3 b { display: block; font-size: var(--t-lg); margin-bottom: 8px; letter-spacing: -0.01em; }
.loop3 p { margin: 0; color: var(--fg-2); font-size: var(--t-sm); line-height: var(--lh-base); }
.loopnote { margin-top: 30px; color: var(--fg-2); }

/* ── 产品详情页 ─────────────────────────────────────────────────────── */
.crumb { margin: 0 0 20px; font-size: var(--t-sm); color: var(--dim); }
.crumb a { color: var(--dim); text-decoration: none; }
.crumb a:hover { color: var(--accent); }
.prod-title { font-size: var(--t-xl); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 8px; }
.prod-lead { font-size: var(--t-lg); line-height: 1.5; color: var(--fg-2); margin: 0 0 30px; max-width: 820px; }
.prod-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px 32px;
  padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 34px; }
.prod-meta div { display: flex; flex-direction: column; gap: 4px; }
.prod-meta b { font-size: var(--t-cap); color: var(--dim); letter-spacing: .08em; font-weight: 600; }
.prod-meta span, .prod-meta a { font-size: var(--t-sm); }
a.pcard .nm::after { content: " →"; color: var(--accent); font-weight: 400; }

/* ── 联系页：左说明 / 右大号邮箱，宽屏两栏、窄屏堆叠 ───────────────────── */
.contact { padding: 76px 0 96px; }
.contact-grid { display: grid; gap: 30px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: end; }
}
.contact .lead { margin-bottom: 10px; }
.contact .mail { display: inline-block; margin-top: 10px; font-size: var(--t-xl); font-weight: 600;
  letter-spacing: -0.01em; text-decoration: none; color: var(--fg);
  border-bottom: 2px solid var(--accent); padding-bottom: 4px; overflow-wrap: anywhere; }
.contact .mail:hover { color: var(--accent); }
@media (min-width: 900px) { .contact .mail { font-size: var(--t-hero); } }
.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); }
.card { display: block; background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 16px; text-decoration: none; color: var(--fg); }
.card:hover { border-color: var(--accent); }
.card b { display: block; margin-bottom: 6px; }
.card span { display: block; color: var(--fg-2); font-size: var(--t-sm); line-height: var(--lh-base); }
.card em { display: block; margin-top: 10px; font-style: normal; color: var(--accent); font-size: var(--t-sm); white-space: nowrap; }

.facts { margin: 0; }
.facts div { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px;
  padding: 9px 0; border-top: 1px solid var(--line); }
.facts dt { color: var(--dim); font-size: var(--t-sm); white-space: nowrap; }
.facts dd { margin: 0; font-size: var(--t-sm); line-height: var(--lh-base); overflow-wrap: anywhere; }
@media (max-width: 520px) { .facts div { grid-template-columns: 1fr; gap: 2px; } }

.eyebrow { margin: 0 0 6px; color: var(--dim); font-size: var(--t-sm); }
.b { font-weight: 600; color: var(--fg); }
.scope { background: var(--chip); border-radius: var(--r-md); padding: 12px 14px;
  font-size: var(--t-sm); color: var(--fg-2); line-height: var(--lh-base); }
h1.page { font-size: var(--t-xl); line-height: var(--lh-tight); margin: 0 0 14px; }
h2.h2s { font-size: var(--t-lg); line-height: var(--lh-tight); margin: 34px 0 10px; }
ul.ticks { margin: 0 0 14px; padding-left: 20px; }
ul.ticks li { margin-bottom: 8px; color: var(--fg-2); }
.quote { border-left: 3px solid var(--accent); padding: 2px 0 2px 14px;
  color: var(--fg); font-size: var(--t-lg); line-height: var(--lh-base); margin: 18px 0; }

/* ── 页脚 ─────────────────────────────────────────────────────────────── */
.foot { background: var(--band); border-top: 1px solid var(--line); margin-top: auto; }
.foot .in { max-width: 780px; margin: 0 auto; padding: 28px 16px 26px; }
@media (min-width: 900px) { .foot .in { max-width: min(1360px, 88vw); } }
.legal { font-size: var(--t-cap); color: var(--dim); line-height: var(--lh-base); }
.legal a { color: var(--dim); text-decoration: none; }
.legal a:hover { color: var(--accent); }
.sep { padding: 0 6px; }
.gongan { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.gongan img { display: block; width: 13px; height: 14px; }