/*
  Raven CX 官网样式

  🔴 色值全部来自设计系统（docs/design-system），不另起一套。
     官网和产品用同一套令牌，换主题时不会分裂。
     强调色 #4B47C9（渡鸦虹彩靛蓝）—— 设计系统明确「不是 Apple 蓝」。

  🔴 字重不超过 600（设计系统 3.6：700 不使用）。
  🔴 按钮圆角 6px，不用胶囊（5.2）。
  🔴 焦点必须可见，绝不 outline:none 了事（10.1）。
*/

:root {
  --bg-base: #FFFFFF;
  --bg-subtle: #F7F8FA;
  --bg-elevated: #FFFFFF;
  --border: #E4E6EC;
  --border-subtle: #EEF0F4;

  --text-primary: #12141A;
  --text-secondary: #5C6070;
  --text-tertiary: #8B8F9E;

  --accent: #4B47C9;
  --accent-hover: #403CB4;
  --accent-subtle: #F1F0FD;
  --success: #0E8A4F;

  --radius: 6px;
  --radius-lg: 10px;
  --wrap: 1120px;
}

/* 🔴 深色模式：三种状态都要覆盖（设计系统的主题规则）。
   只写 prefers-color-scheme 的话，显式选浅色的用户会拿到深色文字配浅色底 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-base: #0E0F13;
    --bg-subtle: #16181F;
    --bg-elevated: #1B1E27;
    --border: #2A2E3A;
    --border-subtle: #21242E;
    --text-primary: #EDEEF2;
    --text-secondary: #A2A6B5;
    --text-tertiary: #6E7382;
    --accent: #5F5AD6;
    --accent-hover: #6F6ADE;
    --accent-subtle: #1D1B33;
  }
}
:root[data-theme="dark"] {
  --bg-base: #0E0F13; --bg-subtle: #16181F; --bg-elevated: #1B1E27;
  --border: #2A2E3A; --border-subtle: #21242E;
  --text-primary: #EDEEF2; --text-secondary: #A2A6B5; --text-tertiary: #6E7382;
  --accent: #5F5AD6; --accent-hover: #6F6ADE; --accent-subtle: #1D1B33;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  /* 系统字体栈：内容站不加载 web font，首屏零阻塞 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  /* 🔴 显式设背景 —— 不设的话会借用宿主的底色，深浅模式下可能读不了 */
  background: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 620px; }

/* 🔴 跳转链接：键盘用户的第一个 Tab 目标 */
.skip {
  position: absolute; left: -9999px;
  background: var(--accent); color: #fff;
  padding: 10px 16px; border-radius: var(--radius); z-index: 100;
}
.skip:focus { left: 12px; top: 12px; }

.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;
}

/* ── 导航 ── */
.nav {
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-base);
  position: sticky; top: 0; z-index: 50;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 60px; }
/* ── 品牌标识 ── */
.logo {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 18px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--text-primary); text-decoration: none;
}
.logo-text { line-height: 1; }
.logo-accent { color: var(--accent); }

/*
  🔴 按主题切换 logo —— 两张图，不是 CSS 反转。

     原来用 filter: invert(1) 反转黑色剪影。改成两张图之后，
     必须处理**三种主题状态**：

       · 系统浅色（或未表态）        → 黑版
       · 系统深色且用户没显式选浅色   → 白版
       · 用户显式选了深色            → 白版
       · 用户显式选了浅色（哪怕系统是深色）→ 黑版

     只写 @media prefers-color-scheme 的话，
     **用户手动切成深色时两张都不显示，logo 直接消失**——
     而这不会有任何报错。

  🔴 用 display 而非 visibility/opacity：
     后两者仍占位，会在导航里留一个 28px 的空洞。
*/

/* 默认（浅色）：显示黑版 */
.logo-dark { display: none; }
.logo-light { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-light { display: none; }
  :root:not([data-theme="light"]) .logo-dark { display: block; }
}
:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark { display: block; }
/* 显式选浅色时强制回黑版，覆盖上面的媒体查询 */
:root[data-theme="light"] .logo-light { display: block; }
:root[data-theme="light"] .logo-dark { display: none; }

.hero-mark { margin: 0 0 18px; }
.nav nav { display: flex; align-items: center; gap: 22px; }
/*
  🔴 必须排除 .btn —— 选择器优先级冲突。

     `.nav nav a` 是 (0,1,2)，而 `.btn` 只有 (0,1,0)。
     不排除的话，导航里的按钮会被这条规则把白字覆盖成灰字，
     灰字压在 #4B47C9 深靛蓝上几乎看不清 —— 而且**不会有任何报错**。

     这是「两个 class 互相抵消」的典型：单独看每条规则都对，
     放在一起才出问题。用 :not(.btn) 显式排除，比拔高 .btn 的
     优先级更清楚——后者只是把军备竞赛往上推一级。
*/
.nav nav a:not(.btn) { color: var(--text-secondary); text-decoration: none; font-size: 14px; }
.nav nav a:not(.btn):hover { color: var(--text-primary); }

/* ── 语言切换（43.5）── */
/*
  🔴 优先级：`.nav nav a:not(.btn)` 是 (0,2,2)。
     这里写 `.nav nav .lang a` 也是 (0,2,2) —— 同分靠书写顺序决胜负，
     以后谁往上面插一段就全崩。所以显式写成 (0,3,2)，
     不依赖顺序。上次【预约演示】变灰字就是同分冲突害的。
*/
/*
  语言切换：原生 <details> 做的下拉，零 JS。

  🔴 summary 的默认三角要去掉（两个引擎两种写法都要写）。

     只写 list-style 的话 Safari 仍然显示它自带的三角，
     于是按钮上会出现两个箭头 —— 而在 Chrome 上测是好的。
*/
.lang { position: relative; }
.lang > summary {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  line-height: 1;
  padding: 6px 10px;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  list-style: none;                     /* Firefox / Chrome */
  user-select: none;
}
.lang > summary::-webkit-details-marker { display: none; }   /* Safari */
.lang > summary:hover { background: var(--bg-subtle); color: var(--text-primary); }
/*
  🔴 键盘焦点必须看得见。

     summary 是可聚焦元素，去掉默认样式之后如果不给 focus 环，
     键盘用户会完全不知道自己聚焦在哪 —— 而鼠标用户毫无察觉。
*/
.lang > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lang[open] > summary { background: var(--bg-subtle); color: var(--text-primary); }
.lang-caret { font-size: 10px; opacity: .7; }
.lang[open] .lang-caret { transform: rotate(180deg); }

/*
  🔴 菜单绝对定位，不占文档流。

     不脱流的话展开时整条导航会被撑高、下面的内容整体下移 ——
     那种跳动比菜单本身更引人注意。
*/
.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  min-width: 148px;
  display: flex;
  flex-direction: column;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
  overflow: hidden;
}
/*
  🔴 优先级：`.nav nav a:not(.btn)` 是 (0,2,2)。
     这里写 `.nav nav .lang-menu a` 也是 (0,2,2) —— 同分靠书写顺序
     决胜负，以后谁往上面插一段就全崩。所以显式写成 (0,3,2)，
     不依赖顺序。上次【预约演示】变灰字就是同分冲突害的。
*/
.nav nav .lang .lang-menu a:not(.btn) {
  font-size: 13px;
  line-height: 1;
  padding: 9px 12px;
  color: var(--text-secondary);
  text-decoration: none;
  border-top: 1px solid var(--border-subtle);
}
.nav nav .lang .lang-menu a:not(.btn):first-child { border-top: 0; }
.nav nav .lang .lang-menu a:not(.btn):hover { background: var(--bg-subtle); color: var(--text-primary); }
/*
  🔴 当前语言用 aria-current 选中，不另加 class：
     标记只有一处，样式和无障碍语义不可能对不上。
     （加 class 的话总有一天会出现「视觉高亮在 EN、aria-current 在 ZH」。）
*/
.nav nav .lang .lang-menu a[aria-current="page"]:not(.btn) {
  background: var(--accent-subtle);
  color: var(--accent);
  font-weight: 600;
}


/* ── 主题切换 ── */
.theme-toggle {
  font: inherit;
  font-size: 13px;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border);
  /* 6px，不用胶囊（设计系统 5.2） */
  border-radius: var(--radius);
  padding: 5px 10px;
  cursor: pointer;
  /* 🔴 固定最小宽度：三个标签长度不同（跟随系统/浅色/深色），
     不固定的话每次点击导航会左右跳动 */
  min-width: 74px;
  transition: background .15s ease, color .15s ease;
}
.theme-toggle:hover { background: var(--bg-subtle); color: var(--text-primary); }

/* ── 按钮 ── */
.btn {
  display: inline-block;
  background: var(--accent);
  color: #FFFFFF;
  /* 🔴 6px 而非胶囊（设计系统 5.2） */
  border-radius: var(--radius);
  /* 🔴 font-weight 500，不用 700（3.6） */
  font-weight: 500;
  font-size: 15px;
  padding: 11px 22px;
  border: 1px solid var(--accent);
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease;
}
.btn:hover { background: var(--accent-hover); }
.btn-sm { padding: 7px 14px; font-size: 14px; }
.btn-ghost {
  background: transparent; color: var(--text-primary); border-color: var(--border);
}
.btn-ghost:hover { background: var(--bg-subtle); }

/* 🔴 焦点环。绝不允许 outline:none 了事（10.1） */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--accent);
  border-radius: var(--radius);
}

/* ── Hero ── */
.hero { padding: 84px 0 68px; }
/*
  Hero 两栏：文案在左，视觉在右。

  🔴 用 grid 而不是 float/绝对定位：窄屏时一行 grid-template-columns
     就能塌成单栏，而且两栏等高对齐由布局保证，不靠调 margin 凑。

  🔴 minmax(0, 1fr) 而不是 1fr。

     grid 项的默认 min-width 是 auto —— 里面有长英文单词或
     不换行的元素时，列会被撑出容器，右栏被挤没。
     minmax(0, …) 让它可以收缩。这类溢出只在某几种语言下出现
     （比如德语的长复合词），中文页面上完全看不出来。
*/
.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: 48px;
  align-items: center;
}
.hero-visual { display: flex; justify-content: center; }
/*
  🔴 尺寸用 max-width + height:auto，不写死。

     写死 256px 的话，窄屏上它不会缩，把文案挤成一条。
     配合 HTML 里的 width/height 属性（占位比例），
     既不抖动又能自适应。
*/
.hero-art { width: 100%; max-width: 280px; height: auto; }
.eyebrow {
  color: var(--accent); font-size: 13px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; margin: 0 0 14px;
}
.hero h1 {
  font-size: clamp(34px, 6vw, 56px);
  font-weight: 600;           /* 不是 700 */
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 18px;
  text-wrap: balance;
}
.lede {
  font-size: 18px; color: var(--text-secondary);
  max-width: 62ch;            /* 正文行宽控制在可读范围 */
  margin: 0 0 28px;
}
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-note { color: var(--text-tertiary); font-size: 13px; margin: 14px 0 0; }

/* ── 区块 ── */
.band { padding: 66px 0; border-top: 1px solid var(--border-subtle); }
.band-alt { background: var(--bg-subtle); }
.band-cta { background: var(--accent-subtle); }
.band h2 {
  font-size: clamp(24px, 3.4vw, 32px);
  font-weight: 600; letter-spacing: -0.015em;
  margin: 0 0 34px; text-wrap: balance;
}

.grid { display: grid; gap: 18px; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
}
.card h3 { font-size: 17px; font-weight: 600; margin: 0 0 8px; }
.card p { color: var(--text-secondary); font-size: 15px; margin: 0; }

/* ── 对比表 ── */
/* 🔴 表格必须能横向滚动，页面本身绝不横向滚动 */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 15px; }
th, td { text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--border-subtle); }
thead th { font-weight: 600; font-size: 13px; color: var(--text-tertiary); }
tbody th { font-weight: 400; color: var(--text-primary); }
td { color: var(--text-secondary); }
/* 🔴 颜色不是唯一的信息载体（10.3）——用「是」字而非只用绿色 */
.yes { color: var(--success); font-weight: 500; }
.fine { color: var(--text-tertiary); font-size: 13px; margin-top: 14px; }

/* ── 表单 ── */
.form { display: grid; gap: 16px; margin-top: 26px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 14px; font-weight: 500; color: var(--text-secondary); }
.opt { font-weight: 400; color: var(--text-tertiary); }
input, textarea {
  width: 100%;
  /* 🔴 16px 是移动端下限 —— 小于它 iOS 聚焦时会缩放整个页面 */
  font-size: 16px;
  font-family: inherit;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  color: var(--text-primary);
}
input:hover, textarea:hover { border-color: var(--text-tertiary); }
textarea { resize: vertical; }

/* ── 页脚 ── */
.foot { border-top: 1px solid var(--border-subtle); padding: 26px 0; }
.foot-inner {
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center; justify-content: space-between;
  color: var(--text-tertiary); font-size: 14px;
}
.foot nav { display: flex; gap: 18px; }
.foot a { color: var(--text-tertiary); text-decoration: none; }
.foot a:hover { color: var(--text-secondary); }

/* 🔴 尊重减弱动效偏好 */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ── 移动端（43.1：官网要能在手机上看）── */
/*
  🔴 之前全站一个断点都没有。桌面上导航栏是
     logo + 三个锚点 + 语言切换 + 主题 + CTA，
     在 375px 的手机上必然挤出屏幕——而且横向溢出不会报错，
     只会让整页能左右拖动，看起来像"网站坏了"。

  🔴 藏掉的是三个锚点链接，不是语言/主题/CTA：
     锚点只是跳到下面的段落，手机上往下滑一样能到；
     语言切换在手机上反而更要留着——巴西这边看官网的多数是手机。
*/
@media (max-width: 720px) {
  .nav nav { gap: 10px; }
  .nav nav a[href^="#"]:not(.btn) { display: none; }

  /*
    语言收成一个按钮之后，手机上不再需要「全名/缩写」两套 ——
    按钮本来就只显示当前语言一个词。
    （原来那两条规则针对的是四个并排的链接，已经不存在了。）
  */
  .lang > summary { padding: 5px 8px; }
  /* 菜单贴右边缘，别超出屏幕 */
  .lang-menu { right: 0; min-width: 132px; }

  /* 桌面的 74px 是按「跟随系统」四个汉字定的，手机上换成图标级宽度 */
  .theme-toggle { min-width: 0; padding: 5px 8px; font-size: 12.5px; }

  .logo-text { font-size: 15px; }
  .hero h1 { font-size: 30px; }
  /*
    🔴 窄屏塌成单栏，视觉放到文案**下面**。

       保持两栏的话，280px 的图会把文案挤成一条竖线。
       放上面的话首屏全是一张图，标题被推到折线以下 ——
       而首屏第一眼该看到的是那句话，不是 logo。
  */
  .hero .wrap { grid-template-columns: 1fr; gap: 28px; }
  .hero-visual { order: 2; }
  .hero-art { max-width: 180px; }
  .grid-3 { grid-template-columns: 1fr; }
  .band { padding: 44px 0; }
}

/*
  🔴 蜜罐字段。

     用 position:absolute + left:-9999px，不用 display:none。
     一部分机器人会跳过 display:none 的字段（那是最容易检测的一种），
     而移出视口的字段它们照填不误。

  ⚠ 不能只靠 CSS：CSS 没加载时（极少见但存在）这个框会露出来。
     所以 HTML 那边还有 aria-hidden + tabindex=-1，
     并且字段名是 website —— 万一被看见，填了也只是被静默丢弃。
*/
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }