/* ============================================================
   QuantumDomain · 量子域 · Design Tokens v4
   借鉴飞连官网视觉:白底 + 品牌渐变蓝紫点缀 + 大图 banner
   适合集成商 / 代理 / 企业 IT 服务商定位
   ============================================================ */

:root {
  /* ——— 表面 ——— */
  --bg:          #ffffff;
  --bg-soft:     #f7f8fa;          /* section 交替底 */
  --bg-sunk:     #f0f2f5;          /* footer / form */
  --bg-ink:     #0b1120;           /* 深色反色 */

  /* ——— 文字 ——— */
  --ink:        #1d2129;
  --ink-2:      #4e5969;
  --ink-3:      #86909c;
  --ink-4:      #c9cdd4;
  --ink-invert: #ffffff;
  --ink-invert-2:rgba(255,255,255,0.7);

  /* ——— 品牌色（来自飞连官网,蓝→深蓝→紫渐变）——— */
  --brand:      #0d5eff;           /* 主蓝 */
  --brand-600:  #0a4bcc;
  --brand-400:  #3b91ff;
  --brand-purple:#c069ff;
  --brand-50:   #e8f0ff;
  --brand-grad: linear-gradient(78deg, #3b91ff -3%, #0d5eff 51%, #c069ff 98%);
  --brand-grad-soft: linear-gradient(78deg, rgba(59,145,255,0.08) 0%, rgba(13,94,255,0.1) 50%, rgba(192,105,255,0.08) 100%);

  --accent:     #ee3f38;           /* 红色强调,如"热门"标 */

  /* ——— 功能色 ——— */
  --ok:         #00b42a;
  --warn:       #ff7d00;
  --err:        #f53f3f;

  /* ——— 分隔 ——— */
  --hair:       #e5e6eb;
  --hair-2:     #c9cdd4;
  --hair-3:     #a9aeb8;

  /* ——— 阴影 ——— */
  --shadow-sm:  0 1px 3px rgba(29, 33, 41, 0.06);
  --shadow-md:  0 4px 16px rgba(29, 33, 41, 0.08);
  --shadow-lg:  0 8px 32px rgba(29, 33, 41, 0.12);
  --shadow-brand: 0 8px 32px rgba(13, 94, 255, 0.25);

  /* ——— 圆角 ——— */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-xl:  32px;

  /* ——— 字体 ——— */
  --font-cn:    "MiSans", "PingFang SC", "Source Han Sans CN", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --font-en:    "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-serif: "Noto Serif SC", "Source Han Serif CN", serif;
  --font-mono:  "JetBrains Mono", "SF Mono", monospace;

  /* ——— 容器 ——— */
  --page-max:  1280px;
  --page-pad:  32px;

  /* ——— 过渡 ——— */
  --ease:       cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur:        320ms;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-cn);
  font-feature-settings: "kern", "palt";
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--brand); color: #fff; }

/* Typography */
.display-1 { font-size: clamp(40px, 5vw, 64px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; }
.h1 { font-size: clamp(32px, 3.6vw, 44px); line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
.h2 { font-size: 28px; line-height: 1.3; font-weight: 600; }
.h3 { font-size: 20px; line-height: 1.4; font-weight: 600; }

.eyebrow {
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--brand);
  font-weight: 500;
  display: inline-block;
}
.body { font-size: 15px; line-height: 1.75; color: var(--ink-2); }
.num { font-family: var(--font-en); font-variant-numeric: tabular-nums; }

/* Container */
.container {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}
.section { padding: 96px 0; }
.section-soft { background: var(--bg-soft); }
.section-head { text-align: center; margin-bottom: 56px; }
.section-head .eyebrow { margin-bottom: 16px; }
.section-head h2 { margin-bottom: 16px; color: var(--ink); }
.section-head p { max-width: 700px; margin: 0 auto; color: var(--ink-2); font-size: 16px; }

/* Button */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 500;
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
  line-height: 1.5;
}
.btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 2px 8px rgba(13, 94, 255, 0.2);
}
.btn-primary:hover {
  background: var(--brand-600);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(13, 94, 255, 0.3);
}
.btn-ghost {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--hair);
}
.btn-ghost:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.btn-ghost-dark {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.24);
  backdrop-filter: blur(8px);
}
.btn-ghost-dark:hover {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.4);
}
.btn-lg { padding: 14px 32px; font-size: 15px; }
.btn::after {
  content: '\2192';
  transition: transform var(--dur) var(--ease);
}
.btn.no-arrow::after { display: none; }
.btn:hover::after { transform: translateX(3px); }

/* Reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 800ms var(--ease), transform 800ms var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* Language toggle */
body[data-lang="cn"] .lang-en { display: none; }
body[data-lang="en"] .lang-cn { display: none; }