/* ==========================================================================
   ORTEK — Design tokens
   方向：SpaceX 式满版黑底 + 品牌红 #FE0000
   无外部字体 / CDN，国内主机安全。改 --red 即可换品牌色。
   ========================================================================== */

:root {
  /* --- 品牌色 --- */
  --red:      #FE0000;   /* 企业标准色，取自 LOGO */
  --red-hi:   #FF3B30;   /* hover */
  --red-dim:  rgba(254,0,0,.14);
  --gold:     #C9A227;   /* 暗金：只用在认证 / 荣誉类元素 */

  /* --- 黑白骨架 --- */
  --black:    #000000;   /* 满版分页底色 */
  --panel:    #08080A;   /* 内容区底色 */
  --surface:  #101013;   /* 卡片 */
  --surface-2:#17171B;   /* 表头 */
  --white:    #FFFFFF;

  --line:      rgba(255,255,255,.16);
  --line-soft: rgba(255,255,255,.07);

  --text-hi: #FFFFFF;
  --text:    rgba(255,255,255,.74);
  --text-lo: rgba(255,255,255,.46);

  /* --- 字体：系统栈，无 CDN --- */
  --font: "Helvetica Neue", Helvetica, Arial, -apple-system, BlinkMacSystemFont,
          "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
          "Noto Sans SC", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono",
          Consolas, "Liberation Mono", monospace;

  /* 全大写 + 宽字距 —— 这套视觉语言的核心手法 */
  --track-nav:   .18em;
  --track-btn:   .22em;
  --track-eye:   .28em;
  --track-title: .02em;

  --container: 1360px;
  --gutter: clamp(20px, 5vw, 56px);
  --radius: 0;            /* 直角。圆角会立刻破坏这套气质。 */

  --ease: cubic-bezier(.25,.8,.35,1);
  --dur: 220ms;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--black);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--dur) var(--ease); }
h1,h2,h3,h4 { margin: 0; color: var(--text-hi); font-weight: 500; }
p { margin: 0 0 1em; max-width: 64ch; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* ---------- layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(72px, 10vw, 140px); }
.section--panel { background: var(--panel); }

/* ---------- 排版母题 ---------- */

/* 小标：全大写拉丁 + 极宽字距，前面一道红线。
   中文页面里也保持拉丁 —— 中文没有大小写，宽字距的中文会「散掉」，
   用拉丁小标当层级标记最干净，也是国内品牌本地化这套语言的标准做法。 */
.eyebrow {
  font-size: 11px;
  letter-spacing: var(--track-eye);
  text-transform: uppercase;
  color: var(--text-lo);
  margin: 0 0 20px;
  display: flex; align-items: center; gap: 14px;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--red); flex: none; }
.eyebrow--plain::before { display: none; }

.title-xl { font-size: clamp(2.6rem, 7vw, 5.5rem); line-height: 1.02; letter-spacing: var(--track-title); font-weight: 600; color: var(--text-hi); }
.title-lg { font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.08; letter-spacing: var(--track-title); font-weight: 600; color: var(--text-hi); }
.title-md { font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1.2; font-weight: 600; color: var(--text-hi); }
.title-en { text-transform: uppercase; letter-spacing: .06em; }

.lede { font-size: 1.0625rem; color: var(--text); max-width: 56ch; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- 按钮：细线外框 + 全大写宽字距 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-hi);
  font-family: inherit;
  font-size: 11px; font-weight: 600;
  letter-spacing: var(--track-btn); text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.btn:hover { background: var(--white); border-color: var(--white); color: var(--black); }
.btn--red { background: var(--red); border-color: var(--red); color: var(--white); }
.btn--red:hover { background: var(--red-hi); border-color: var(--red-hi); color: var(--white); }
.btn--sm { padding: 11px 22px; font-size: 10px; }

/* ---------- 规格表 ---------- */
.spec { width: 100%; border-collapse: collapse; }
.spec th, .spec td { text-align: left; padding: 15px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.spec th {
  font-size: 10px; font-weight: 500; letter-spacing: var(--track-eye);
  text-transform: uppercase; color: var(--text-lo); width: 44%; padding-right: 20px;
}
.spec td { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 15px; color: var(--text-hi); }
.spec td .unit { color: var(--text-lo); margin-left: .4em; font-size: 12px; }

/* ---------- 动效：克制 ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}