/* ============================================================
   arigret.com — Common Stylesheet
   用于：主页 / 产品主页 / support / privacy
   ============================================================ */

/* ===== 基础重置 ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  line-height: 1.75; font-size: 16px;
  background: var(--bg); color: var(--text);
  transition: background .3s, color .3s;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
.container { max-width: 960px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 860px; margin: 0 auto; padding: 0 24px; }
code {
  font-family: "SF Mono", "Menlo", monospace;
  background: var(--quote-bg); padding: 2px 6px; border-radius: 4px;
  font-size: 0.92em; color: var(--accent);
}

/* ======================================================================
   响应式规则（全站统一，全局唯一）
   —————————————————————————————————————————————————————————————————————
   锚点：横向宽度 699px
   分 2 档，2 档内都做「整体等比缩放」，没有第 3 档。
   ——
   第 1 档：宽度 ≥ 699px（大屏 / 平板横屏 / 笔记本 / 4K 屏）
        · 所有元素以 699px 为基准，按视口宽度线性等比放大或缩小
          （通过 --scale = 100vw / 699，把基准像素乘以这个变量实现）
        · 导航栏结构不变：品牌横排、切换器 / 菜单文字为正常尺寸
        · 无论宽度怎么变，只改变大小不改变结构
   ——
   第 2 档：宽度 < 699px（平板竖屏 / iPhone Air 横屏 / 小屏手机竖屏）
        · 所有元素仍然跟随视口等比缩放（规则同第 1 档，不间断）
        · 在"刚跨过 699 向下"的那一刻，额外做一次「导航栏结构突变」：
            1) 品牌标题改成上下结构
            2) 中英文切换 / 主题切换按钮缩小一档
            3) 中间导航菜单文字缩小一档
        · 结构突变后继续随宽度等比缩小，单向、绝不反向放大
   ====================================================================== */
:root {
  /* 以 699px 宽时为 1.0 的基准比例，大屏放大、小屏缩小 */
  --scale: calc(100vw / 699);
  /* 常用基准值：直接拿基准像素 × var(--scale) 即可做到全区间等比缩放 */
  --u1:  calc(1px  * var(--scale));
  --u2:  calc(2px  * var(--scale));
  --u4:  calc(4px  * var(--scale));
  --u6:  calc(6px  * var(--scale));
  --u8:  calc(8px  * var(--scale));
  --u10: calc(10px * var(--scale));
  --u12: calc(12px * var(--scale));
  --u14: calc(14px * var(--scale));
  --u16: calc(16px * var(--scale));
  --u20: calc(20px * var(--scale));
  --u24: calc(24px * var(--scale));
}

/* ===== 主题变量 ===== */
:root, [data-theme="light"] {
  --bg: #f5f5f7; --bg-card: #fff; --text: #1a1a1a; --text-soft: #2a2a2a;
  --text-muted: #555; --text-faint: #888; --border: #d2d2d7; --border-soft: #e8e8ed;
  --quote-bg: #f4f7f8; --accent: #0071e3; --accent-soft: #42a1ec;
  --header-bg: rgba(245,245,247,.72);
  --footer-bg: #1d1d1f; --footer-text: #aaa; --footer-muted: #777;
  --footer-brand: #fff; --card-shadow: 0 8px 24px rgba(0,0,0,.06);
  --dropdown-bg: #fff; --placeholder-bg: #eaeaea; --placeholder-text: #888;
  --contact-bg: #f8f8fa; --highlight-bg: #f0fdf4; --highlight-border: #22c55e;
  /* 毛玻璃 */
  --glass-bg: rgba(255,255,255,.5);
  --glass-bg-hover: rgba(255,255,255,.65);
  --glass-border: rgba(255,255,255,.6);
  --glass-border-outer: rgba(0,0,0,.08);
  --glass-shadow: 0 8px 32px rgba(0,0,0,.08);
  --glass-shadow-hover: 0 16px 48px rgba(0,0,0,.12);
  --glass-highlight: rgba(255,255,255,.9);
  --glass-blur: blur(30px) saturate(200%);
  /* Hero 光晕 */
  --hero-glow-1: rgba(0,113,227,.12);
  --hero-glow-2: rgba(66,161,236,.08);
  --hero-glow-3: rgba(160,120,255,.06);
}
[data-theme="dark"] {
  --bg: #0a0a0c; --bg-card: #1c1c1e; --text: #f5f5f7; --text-soft: #d0d0d5;
  --text-muted: #98989f; --text-faint: #6e6e73; --border: #38383c; --border-soft: #2c2c2e;
  --quote-bg: #1c1c1e; --accent: #0a84ff; --accent-soft: #409cff;
  --header-bg: rgba(10,10,12,.72);
  --footer-bg: #000; --footer-text: #86868b; --footer-muted: #6e6e73;
  --footer-brand: #f5f5f7; --card-shadow: 0 8px 24px rgba(0,0,0,.4);
  --dropdown-bg: #1c1c1e; --placeholder-bg: #2c2c2e; --placeholder-text: #86868b;
  --contact-bg: #1c1c1e; --highlight-bg: #0d2818; --highlight-border: #30d158;
  /* 毛玻璃 */
  --glass-bg: rgba(28,28,30,.5);
  --glass-bg-hover: rgba(44,44,46,.65);
  --glass-border: rgba(255,255,255,.1);
  --glass-border-outer: rgba(255,255,255,.06);
  --glass-shadow: 0 8px 32px rgba(0,0,0,.5);
  --glass-shadow-hover: 0 16px 48px rgba(0,0,0,.6);
  --glass-highlight: rgba(255,255,255,.08);
  --glass-blur: blur(30px) saturate(200%);
  /* Hero 光晕 */
  --hero-glow-1: rgba(10,132,255,.15);
  --hero-glow-2: rgba(64,156,255,.1);
  --hero-glow-3: rgba(160,120,255,.08);
}

/* ===== 顶部导航 ===== */
header {
  position: sticky; top: 0; z-index: 1000;
  background: var(--header-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border-outer);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 56px;
  min-width: 0;
  /* 左右两侧保底：防止切换器压到 0 宽或 brand 被 squeeze。
     实际边界外由 container padding（24px/16px）保证，这里保证导航内部左右对称。 */
  gap: 22px;
  max-width: 100%;
}
.brand {
  font-size: 21px; font-weight: 600; letter-spacing: 0.5px;
  display: inline-flex; align-items: baseline; position: relative; line-height: 1;
  flex-shrink: 0; text-decoration: none; color: inherit;
}
.brand .en { font-family: "SF Mono", "Menlo", monospace; margin-left: 6px; color: var(--accent); }
/* switchers：绝对不允许被 flex 压缩，保证右侧切换器始终不"贴边"；
   .icon-btn 有 min-width，所以总宽度稳定 */
.nav-right {
  display: flex; align-items: center; gap: 22px;
  flex-shrink: 0;
  margin-left: auto;
}
.nav-links {
  display: flex; align-items: center; gap: 20px;
  min-width: 0;
  flex-shrink: 1; /* 允许被压缩：英文 5 按钮长时缩小 gap，保证 brand 和 switchers 不超出屏幕 */
}
.switchers { flex-shrink: 0; display: flex; flex-direction: row; gap: 6px; align-items: center; }
.nav-links a, .dropdown-trigger {
  font-size: 15px; color: var(--text-muted); transition: color .2s;
  white-space: nowrap;
}
.nav-links a:hover, .dropdown-trigger:hover { color: var(--accent); }
/* 导航栏产品项：无论是否选中/hover，一直保持红色。改颜色时把下面的 red 换成你的颜色值即可。 */
.nav-links .dropdown-trigger { color: red !important; }
/* 导航当前页/当前区块高亮 */
.nav-links a.active,
.nav-links .dropdown.active .dropdown-trigger {
  color: var(--accent); position: relative;
}
.nav-links > a.active::after,
.nav-links > .dropdown.active .dropdown-trigger::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 2px; background: var(--accent); border-radius: 1px;
}

/* ===== 产品下拉 ===== */
.dropdown {
  position: relative;
  margin: 0;
  display: flex; align-items: center;
}
.dropdown::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px;
}
.dropdown-trigger {
  cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
  padding: 0;
}
.dropdown-trigger .caret {
  display: inline-block; width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform .2s; margin-bottom: 1px;
}
.dropdown.open .caret { transform: rotate(180deg); }
.dropdown-menu {
  display: none; position: absolute;
  /* 中线与"产品"文字中线对齐：left 50% + translateX -50%（纯静态，不参与动画） */
  top: 100%; left: 50%; right: auto;
  transform: translateX(-50%);
  width: max-content;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-outer);
  border-radius: 12px;
  box-shadow: var(--glass-shadow);
  padding: 6px; z-index: 200;
  /* 动画层不使用 transform（避免覆盖 translateX 造成横移） */
  will-change: opacity, top;
}
/* 顶部高光线条 */
.dropdown-menu::before {
  content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-highlight), transparent);
  border-radius: 1px;
}
.dropdown.open .dropdown-menu { display: block; animation: dropIn .18s ease-out both; }
/* 仅下滑：动画只控制 top（纵向位置）+ opacity，transform 完全不改动 → 中线锁定，无左右移动 */
@keyframes dropIn { from { opacity: 0; top: calc(100% - 6px); } to { opacity: 1; top: 100%; } }
.dropdown-item {
  display: flex; align-items: center; padding: 6px 12px;
  border-radius: 6px; font-size: 14px; color: var(--text-soft);
  transition: background .15s, color .15s;
}
.dropdown-item:hover { background: var(--quote-bg); color: var(--accent); }

/* ===== 切换器组（语言 + 主题，水平排列） ===== */
.switchers { display: flex; flex-direction: row; gap: 6px; align-items: center; flex-shrink: 0; }
.icon-btn {
  height: 28px; min-width: 28px; padding: 0 6px; border: 1px solid var(--border); border-radius: 6px;
  background: transparent; cursor: pointer; color: var(--text-faint);
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .2s, border-color .2s; font-family: inherit; font-size: 11px; font-weight: 600;
  white-space: nowrap; box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
.icon-btn svg { width: 14px; height: 14px; }
/* 桌面 hover：仅在有真实鼠标的设备生效，避免 iOS 粘滞 hover */
@media (hover: hover) {
  .icon-btn:hover { color: var(--text); border-color: var(--text-muted); }
}
/* 语言按钮专门设最小宽度，保证中/EN 装得下（手机不挤成方的） */
.icon-btn#lang-toggle { min-width: 48px; width: auto; padding: 0 6px; letter-spacing: 0.5px; }
html[data-lang="zh"] .lang-zh, html[data-lang="en"] .lang-en { color: var(--accent); }

/* 点击瞬间的反馈（所有设备都有，极短时间，松手即消失） */
.icon-btn:active { color: var(--text); border-color: var(--text-muted); }

/* 699 锚点第 2 档：宽度 < 699px 时，额外触发「导航栏结构突变」
   · 品牌标题改成上下堆叠结构
   · 中英文切换 / 主题切换按钮缩小一档
   · 中间导航菜单文字缩小一档
   （其余元素继续跟随全局 --scale 等比缩放，不受此媒体查询影响） */
@media (max-width: 699px) {
  .container { padding: 0 16px; }
  .container-narrow { padding: 0 16px; }
  .nav { height: 50px; gap: 12px; }
  .nav-right { gap: 12px; }
  .nav-links { gap: 6px; flex-shrink: 1; }
  .nav-links a, .dropdown-trigger { font-size: 12px; }
  .brand {
    font-size: 12px; line-height: 1.1;
    flex-direction: column; align-items: flex-start;
  }
  .brand .en { margin-left: 0; margin-top: 1px; }
  .icon-btn { width: 22px; height: 22px; padding: 0; }
  .icon-btn#lang-toggle { width: auto; min-width: 38px; padding: 0 4px; font-size: 9px; }
  .icon-btn svg { width: 11px; height: 11px; }
}

/* ===== 通用 section / 标题 ===== */
section { padding: 72px 0; }
/* 独立分隔线：放在相邻 section 之间的正中，左右 35% 留白与 hero 下方那条对齐；带 .reveal 可触发滑动渐入动画 */
.section-divider {
  display: block; height: 1px;
  margin: 0 35%;
  background: linear-gradient(90deg, transparent, var(--border-soft) 35%, var(--border-soft) 65%, transparent);
}
.section-title {
  font-size: 26px; font-weight: 600; margin-bottom: 32px;
  display: flex; align-items: center; gap: 12px;
}
.section-title::before {
  content: ""; width: 4px; height: 22px;
  background: var(--accent); border-radius: 2px;
}

/* ===== 关于我们 ===== */
.about p { margin-bottom: 18px; color: var(--text-soft); }
.quote {
  margin: 24px 0; padding: 20px 24px;
  background: var(--glass-bg); border-left: 3px solid var(--accent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 8px; color: var(--text-muted); font-size: 15px;
  white-space: pre-line;
  box-shadow: var(--glass-shadow);
}

/* ===== 业务范围卡片 ===== */
.biz-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .biz-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .biz-grid { grid-template-columns: 1fr; } }
.biz-card {
  position: relative;
  padding: 28px; background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-outer);
  border-radius: 16px;
  box-shadow: var(--glass-shadow);
  overflow: hidden;
  transition:
    box-shadow .42s cubic-bezier(.2,.7,.2,1),
    background-color .42s cubic-bezier(.2,.7,.2,1),
    border-color .42s cubic-bezier(.2,.7,.2,1);
}
.biz-card[data-href] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.biz-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-highlight), transparent);
}
/* 桌面 hover：鼠标设备才显示光波扫过 + 上浮（transform 由 JS init3DCards 独占管理，
   CSS 只管 box-shadow/bg/border → 避免 CSS :hover transform 和 JS 内联 transform 打架） */
@media (hover: hover) {
  .biz-card:hover {
    box-shadow: var(--glass-shadow-hover);
    background: var(--glass-bg-hover);
  }
  .biz-card:hover::after { animation: sweep 1s cubic-bezier(.16, 1, .3, 1); }
}
/* 触摸设备：点击瞬间的轻压反馈，无粘滞 */
.biz-card[data-href]:active {
  transform: translateY(0) scale(0.995);
  box-shadow: var(--glass-shadow);
  background: var(--glass-bg-hover);
}
.biz-card h3 { font-size: 17px; margin-bottom: 8px; color: var(--accent); position: relative; }
.biz-card p { font-size: 14px; color: var(--text-muted); position: relative; }
/* 业务卡/产品卡：左上角图标（用于带图标的卡片，比如产品介绍 Server for MongoDB） */
.biz-card-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
}
.biz-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  display: block;
}

/* 产品介绍列表：纵向堆叠的长卡，将来放 3 个产品时也是纵排（一行一个软件） */
.product-list { display: flex; flex-direction: column; gap: 18px; }
.product-list .biz-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 22px;
  padding: 22px 28px;
}
.product-list .biz-card-icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  margin-bottom: 0;
}
.product-list .biz-card-text {
  flex: 1;
  min-width: 0;
}
.product-list .biz-card-text h3 { margin-bottom: 6px; }
.platform-tags {
  font-size: 12px;
  color: var(--text-faint);
  margin-bottom: 10px;
}
.product-list .biz-card-text p { margin: 0; }
@media (max-width: 560px) {
  .product-list .biz-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
  }
  .product-list .biz-card-icon { width: 52px; height: 52px; }
}

/* ===== 特色功能卡片（产品主页） ===== */
.feat-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .feat-grid { grid-template-columns: 1fr; } }
.feat-card {
  position: relative;
  padding: 24px; background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-outer);
  border-radius: 14px;
  box-shadow: var(--glass-shadow);
  transition: box-shadow .42s cubic-bezier(.2,.7,.2,1), background-color .42s cubic-bezier(.2,.7,.2,1);
  overflow: hidden;
}
.feat-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-highlight), transparent);
}
.feat-card:hover {
  box-shadow: var(--glass-shadow-hover);
  background: var(--glass-bg-hover);
}
.feat-card h3 { font-size: 15px; margin-bottom: 6px; color: var(--accent); }
.feat-card p { font-size: 13px; color: var(--text-muted); }

/* ===== 步骤列表 ===== */
.steps { counter-reset: step; }
.step {
  position: relative; padding: 14px 0 14px 40px;
  border-bottom: 1px dashed var(--border-soft); color: var(--text-soft);
}
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 14px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}

/* ===== FAQ ===== */
.faq-item { padding: 14px 0; border-bottom: 1px solid var(--border-soft); }
.faq-q { font-weight: 600; color: var(--text); margin-bottom: 6px; }
.faq-a { color: var(--text-muted); font-size: 15px; }

/* ===== Hero（通用） ===== */
.hero {
  position: relative;
  padding: 96px 0 80px; text-align: center;
  overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; top: -20%; left: 50%;
  width: 600px; height: 600px; transform: translateX(-50%);
  background: radial-gradient(circle, var(--hero-glow-1) 0%, transparent 60%);
  border-radius: 50%; pointer-events: none; z-index: 0;
}
/* 分割线：绝对定位到 hero 底部，正好在 hero 与下方内容的交界处 */
.hero::after {
  content: ''; position: absolute; bottom: 0; left: 35%; right: 35%;
  height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, var(--border-soft) 35%, var(--border-soft) 65%, transparent);
}
.hero .container { position: relative; z-index: 1; }
.hero .product-name {
  font-size: clamp(30px, 5.5vw, 46px); font-weight: 700;
  letter-spacing: 1px; margin-bottom: 16px;
  position: relative; display: inline-block; z-index: 2;
  --w1x: 0px; --w1y: 0px; --w1s: 1; --w1o: .3;
  --w2x: 0px; --w2y: 0px; --w2s: 1; --w2o: .35;
}
.hero h1 {
  font-size: clamp(32px, 6vw, 52px);
  font-weight: 700; letter-spacing: 2px; margin-bottom: 20px;
  position: relative; display: inline-block; z-index: 2;
  --w1x: 0px; --w1y: 0px; --w1s: 1; --w1o: .3;
  --w2x: 0px; --w2y: 0px; --w2s: 1; --w2o: .35;
}
.hero h1::before, .hero h1::after,
.hero .product-name::before, .hero .product-name::after {
  content: ''; position: absolute; pointer-events: none; z-index: -1;
  /* 颜色完全不变：保留原来的蓝/青/紫 var(--hero-glow-*)。
     只改形状和动效：
     - 外层用 25~30px blur 把多层同色径向渐变揉成不规则软边光团
     - blob 形状：8 值不规则 border-radius，由 CSS 变量 --br1..--br8 驱动呼吸变形
     - 同色多层偏心叠加：3 层 radial-gradient（仍然是同一个颜色变量），
       圆心位置各占不同百分比（--p1x/p1y / --p2x/p2y / --p3x/p3y），
       再叠上不同缩放（--p1s / --p2s / --p3s），配合 blur 融合后
       呈现"同一颜色的有机形光团"，不再是规则几何正圆。 */
  filter: blur(28px);
  border-radius: var(--br1, 42%) var(--br2, 58%) var(--br3, 63%) var(--br4, 37%) /
                 var(--br5, 55%) var(--br6, 45%) var(--br7, 60%) var(--br8, 40%);
  background-repeat: no-repeat;
  background-size:
    calc(var(--p1s, 100%) * 100%) auto,
    calc(var(--p2s, 82%)  * 100%) auto,
    calc(var(--p3s, 66%)  * 100%) auto;
  background-position:
    var(--p1x, 30%)  var(--p1y, 25%),
    var(--p2x, 65%)  var(--p2y, 55%),
    var(--p3x, 48%)  var(--p3y, 78%);
  transition:
    transform 1s ease-in-out,
    opacity 1s ease-in-out,
    border-radius 1s ease-in-out,
    background-position 1s ease-in-out,
    background-size 1s ease-in-out;
}
/* JS 驱动：颜色一字不变；translate/scale/opacity + blob + 3层位置共同过渡 */
.hero h1::before, .hero .product-name::before {
  width: 22%; height: 32%; top: 12%; left: 3%;
  background-image:
    radial-gradient(circle, var(--hero-glow-1) 0%, transparent 62%),
    radial-gradient(circle, var(--hero-glow-1) 0%, transparent 62%),
    radial-gradient(circle, var(--hero-glow-1) 0%, transparent 62%);
  transform: translate(var(--w1x), var(--w1y)) scale(var(--w1s));
  opacity: var(--w1o);
}
.hero h1::after, .hero .product-name::after {
  width: 20%; height: 28%; top: 16%; right: 3%;
  background-image:
    radial-gradient(circle, var(--hero-glow-2) 0%, transparent 62%),
    radial-gradient(circle, var(--hero-glow-2) 0%, transparent 62%),
    radial-gradient(circle, var(--hero-glow-2) 0%, transparent 62%);
  transform: translate(var(--w2x), var(--w2y)) scale(var(--w2s));
  opacity: var(--w2o);
}
.brand-wave {
  position: absolute; pointer-events: none; z-index: -1;
  filter: blur(28px);
  --wx: 0px; --wy: 0px; --ws: 1; --wo: .4;
  border-radius: var(--br1, 42%) var(--br2, 58%) var(--br3, 63%) var(--br4, 37%) /
                 var(--br5, 55%) var(--br6, 45%) var(--br7, 60%) var(--br8, 40%);
  background-repeat: no-repeat;
  background-size:
    calc(var(--p1s, 100%) * 100%) auto,
    calc(var(--p2s, 82%)  * 100%) auto,
    calc(var(--p3s, 66%)  * 100%) auto;
  background-position:
    var(--p1x, 30%)  var(--p1y, 25%),
    var(--p2x, 65%)  var(--p2y, 55%),
    var(--p3x, 48%)  var(--p3y, 78%);
  transform: translate(var(--wx), var(--wy)) scale(var(--ws));
  opacity: var(--wo);
  transition:
    transform 1s ease-in-out,
    opacity 1s ease-in-out,
    border-radius 1s ease-in-out,
    background-position 1s ease-in-out,
    background-size 1s ease-in-out;
}
.brand-wave:nth-child(1) {
  width: 18%; height: 26%; top: 8%; left: 22%;
  background-image:
    radial-gradient(circle, var(--hero-glow-1) 0%, transparent 62%),
    radial-gradient(circle, var(--hero-glow-1) 0%, transparent 62%),
    radial-gradient(circle, var(--hero-glow-1) 0%, transparent 62%);
}
.brand-wave:nth-child(2) {
  width: 16%; height: 24%; top: 28%; left: 48%;
  background-image:
    radial-gradient(circle, var(--hero-glow-2) 0%, transparent 62%),
    radial-gradient(circle, var(--hero-glow-2) 0%, transparent 62%),
    radial-gradient(circle, var(--hero-glow-2) 0%, transparent 62%);
}
.brand-wave:nth-child(3) {
  width: 14%; height: 22%; top: 3%; left: 38%;
  background-image:
    radial-gradient(circle, var(--hero-glow-3) 0%, transparent 62%),
    radial-gradient(circle, var(--hero-glow-3) 0%, transparent 62%),
    radial-gradient(circle, var(--hero-glow-3) 0%, transparent 62%);
}
.brand-wave:nth-child(4) {
  width: 17%; height: 25%; bottom: 3%; left: 13%;
  background-image:
    radial-gradient(circle, var(--hero-glow-2) 0%, transparent 62%),
    radial-gradient(circle, var(--hero-glow-2) 0%, transparent 62%),
    radial-gradient(circle, var(--hero-glow-2) 0%, transparent 62%);
}
/* hero 标题与 tagline：统一按 699 --scale 基准等比缩放（2 档连续，无断点）
   699 基准下：tagline 17px · 平台说明 14px */
.hero .tagline { font-size: calc(17px * var(--scale)); color: var(--text-muted); max-width: calc(640px * var(--scale)); margin: 0 auto calc(32px * var(--scale)); }
.hero .accent { color: var(--accent); }
/* 标题正下方平台说明：居中 + 灰色字 */
.platform-line {
  text-align: center;
  color: var(--text-faint);
  font-size: calc(14px * var(--scale));
  margin: calc(-8px * var(--scale)) 0 calc(20px * var(--scale));
  letter-spacing: 0.3px;
}
/* —— 下载按钮区域：严格使用全局 --scale 实现 699 基准 2 档全流体等比缩放
   （不再使用 clamp 三档函数，避免 clmap 三档阈值与 699 锚点冲突）
   ≥699 与 <699 连续缩放，没有断点突变（导航栏结构变化除外） */
.download-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  /* 699 基准下 gap 为 10px */
  gap: calc(10px * var(--scale));
  max-width: 100%;
  width: 100%;
}
.download-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 699 基准下 padding：上下 10px，左右 4px */
  padding: calc(10px * var(--scale)) calc(4px * var(--scale));
  background: var(--glass-bg); color: var(--text-muted);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* 699 基准下 border-radius 12px */
  border-radius: calc(12px * var(--scale));
  font-weight: 500;
  border: 1px solid var(--glass-border-outer);
  box-shadow: var(--glass-shadow);
  transition: background .3s, box-shadow .3s, transform .2s;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  flex: 1 1 0;
  min-width: 0;
  max-width: calc(240px * var(--scale));
  text-align: center;
  line-height: 1.15;
  overflow: hidden;
}
/* 平台名：第一行（蓝色 + 稍大字号）
   强制一行不换行：white-space + overflow 保证不会折行 */
.dl-platform {
  display: block;
  width: 100%;
  text-align: center;
  color: var(--accent);
  font-weight: 600;
  /* 699 基准下字号 15px */
  font-size: calc(15px * var(--scale));
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
/* 下载：第二行（稍小字号，放在软件名下方） */
.dl-action {
  display: block;
  width: 100%;
  text-align: center;
  /* 699 基准下字号 12px */
  font-size: calc(12px * var(--scale));
  line-height: 1.15;
  /* 699 基准下 margin-top 4px */
  margin-top: calc(4px * var(--scale));
  color: inherit;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
/* 英文版 Download：在中文 12px 基准上再小 15% 左右 → 10px 基准 */
.dl-action.en-only {
  font-size: calc(10px * var(--scale));
  letter-spacing: 0.15px;
}
.download-btn:hover {
  box-shadow: var(--glass-shadow-hover);
  background: var(--glass-bg-hover);
}
.download-btn:active {
  transform: scale(0.99);
}
/* —— 注：待开发按钮 hover 提示 / click 提示改为原生 title + onclick alert（写在 HTML）
   不再使用自定义 dl-tooltip，避免被 overflow:hidden 裁切 */
/* =====================================================================
   4 个下载按钮（产品页 .download-row 内）单独样式。
   【改动范围仅限此块】不影响全局任何其他组件、hero、间距、布局。
   作用域：.hero .download-row 下的 .download-btn（精确锁定）。
   ====================================================================== */
.hero .download-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  max-width: 100%;
  width: 100%;
  /* 按钮下移到上方文字与下方线之间 */
  margin-top: 60px;
  margin-bottom: 0;
}
.hero .download-row .download-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 14px;
  background: var(--glass-bg);
  color: var(--text-muted);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 14px;
  font-weight: 500;
  border: 1px solid var(--glass-border-outer);
  box-shadow: var(--glass-shadow);
  transition: background .3s, box-shadow .3s, transform .2s;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  flex: 1 1 0;
  min-width: 0;
  max-width: 210px;
  text-align: center;
  line-height: 1.2;
  /* tooltip 容器：不要 overflow:hidden，否则气泡被裁 */
  overflow: visible;
}
.hero .download-row .dl-platform {
  display: block;
  width: 100%;
  text-align: center;
  color: var(--accent);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
}
.hero .download-row .dl-action {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 12px;
  line-height: 1.2;
  margin-top: 6px;
  color: inherit;
  opacity: 0.85;
  white-space: nowrap;
}
/* 英文版 Download 再小一点点 */
.hero .download-row .dl-action.en-only {
  font-size: 11px;
  letter-spacing: 0.2px;
}
.hero .download-row .download-btn:hover {
  box-shadow: var(--glass-shadow-hover);
  background: var(--glass-bg-hover);
}
.hero .download-row .download-btn:active {
  transform: scale(0.99);
}
/* AppStore 按钮单独高亮边框背景 */
.hero .download-row .download-btn-appstore {
  color: var(--text);
  border-color: var(--accent);
  background: rgba(0, 113, 227, 0.08);
}
[data-theme="dark"] .hero .download-row .download-btn-appstore {
  background: rgba(10, 132, 255, 0.15);
}
.hero .download-row .download-btn-appstore:hover {
  background: rgba(0, 113, 227, 0.14);
}
[data-theme="dark"] .hero .download-row .download-btn-appstore:hover {
  background: rgba(10, 132, 255, 0.24);
}
/* 待开发按钮弱化样式 + tooltip 位置基准 */
.hero .download-row .download-btn-soon {
  color: var(--text-faint);
  cursor: default;
}
.hero .download-row .download-btn-soon:hover {
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
}
.hero .download-row .download-btn-soon:active {
  transform: none;
}
/* —— tooltip：鼠标 hover 立即弹出（0ms 延迟）/ 点击后 1.8s 自动消失
   显示在按钮下方，透明度 50%，中英文用 .zh-only / .en-only 分别显示 */
.hero .download-row .dl-tip {
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
  z-index: 50;
  pointer-events: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  /* 核心：默认隐藏 */
  display: none;
  /* 关键：显示/隐藏完全没有过渡动画 → 立即弹出 / 立即隐藏 */
  transition: none;
}
.hero .download-row .dl-tip::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .hero .download-row .dl-tip {
  background: rgba(255, 255, 255, 0.5);
  color: #111;
}
[data-theme="dark"] .hero .download-row .dl-tip::after {
  border-bottom-color: rgba(255, 255, 255, 0.5);
}
/* hover 立即显示（无延迟，没有 transition）
   【关键】用 @media (hover: hover) 限定：仅真实鼠标设备才触发 hover。
   iOS Safari 点击后 :hover 会残留，不限定会导致点击后 tooltip 不消失。 */
@media (hover: hover) {
  .hero .download-row .download-btn-soon:hover .dl-tip {
    display: block;
  }
}
/* 点击触发显示：通过 active-tip 类控制，1.8s 后 JS 自动移除 */
.hero .download-row .download-btn-soon.active-tip .dl-tip {
  display: block;
}
/* 小屏幕 4 按钮一排等比缩，保持不换行不超屏。
   注：<699 档时，左右内边距改为大屏的 20%（即缩减80%），避免 Mac AppStore 文字超出 */
@media (max-width: 699px) {
  .hero .download-row { gap: 8px; }
  .hero .download-row .download-btn {
    /* 左右 padding：大屏 14px → 20% = 2.8px 取 3px */
    padding: 11px 3px;
    border-radius: 11px;
    max-width: none;
  }
  .hero .download-row .dl-platform { font-size: 13px; }
  .hero .download-row .dl-action.zh-only { font-size: 11px; }
  .hero .download-row .dl-action.en-only { font-size: 10px; }
  .hero .download-row .dl-tip { font-size: 11px; padding: 5px 10px; }
}
@media (max-width: 460px) {
  .hero .download-row { gap: 6px; }
  .hero .download-row .download-btn {
    /* 左右再压一档，20% 基础上再收缩：≈ 大屏 14px 的 14% ≈ 2px */
    padding: 9px 2px;
    border-radius: 10px;
  }
  .hero .download-row .dl-platform { font-size: 12px; }
  .hero .download-row .dl-action.zh-only { font-size: 10px; }
  .hero .download-row .dl-action.en-only { font-size: 9px; }
  .hero .download-row .dl-tip { font-size: 10px; padding: 4px 8px; }
}
/* =====================================================================
   4 个按钮样式结束。以下为其他下载按钮 / 页面其他区域通用样式，不受影响。
   ====================================================================== */
.download-btn-appstore {
  color: var(--text);
  border-color: var(--accent);
  background: rgba(0, 113, 227, 0.08);
}
[data-theme="dark"] .download-btn-appstore {
  background: rgba(10, 132, 255, 0.15);
}
.download-btn-appstore:hover {
  background: rgba(0, 113, 227, 0.14);
}
[data-theme="dark"] .download-btn-appstore:hover {
  background: rgba(10, 132, 255, 0.24);
}
/* 待开发按钮弱化样式（其他页面里的通用情况） */
.download-btn-soon {
  color: var(--text-faint);
  cursor: default;
}
.download-btn-soon:hover {
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
}
.download-btn-soon:active {
  transform: none;
}

/* ===== 联系我们（主页） ===== */
.contact .mail-block { padding: 28px 0; }
.contact .mail-block.mail-row { display: flex; align-items: baseline; gap: 18px; }
.contact .mail-label { font-size: 14px; color: var(--text-faint); margin-bottom: 8px; }
.contact .mail-block.mail-row .mail-label { margin-bottom: 0; flex-shrink: 0; font-size: 18px; color: var(--text-muted); }
.contact .mail-value { font-size: 18px; }
.contact .mail-value a { color: var(--accent); border-bottom: 1px dashed var(--accent); padding-bottom: 2px; }
.contact .mail-value a:hover { opacity: .8; }

/* ===== 页面通用容器（support / privacy） ===== */
.page { padding-top: 56px; padding-bottom: 40px; }
.page-title {
  font-size: 30px; font-weight: 700; margin-bottom: 8px;
  border-bottom: 2px solid var(--border-soft); padding-bottom: 16px;
}
.subtitle { color: var(--text-faint); font-size: 14px; margin-bottom: 28px; }
a.subtitle { display: inline-block; color: var(--accent); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
a.subtitle:hover { text-decoration-style: solid; }
.subtitle-icon { width: 20px; height: 20px; vertical-align: -5px; margin-right: 2px; object-fit: contain; }
.info-box {
  background: var(--quote-bg); border-left: 3px solid var(--accent);
  padding: 12px 16px; border-radius: 4px; margin: 20px 0;
  font-size: 14px; color: var(--text-soft);
}
.subtitle + .info-box { margin-top: 0; }
.highlight {
  background: var(--highlight-bg); border-left: 4px solid var(--highlight-border);
  padding: 14px 18px; margin: 20px 0; border-radius: 0 8px 8px 0;
  color: var(--text-soft); font-size: 15px;
}
.highlight strong { color: var(--highlight-border); }
.page h2 { font-size: 20px; font-weight: 600; margin: 32px 0 14px; color: var(--text); }
.page h3 { font-size: 16px; font-weight: 600; margin: 20px 0 8px; color: var(--text-soft); }
.page p { margin-bottom: 14px; color: var(--text-soft); }
.page ul { margin: 0 0 16px 22px; }
.page li { margin-bottom: 8px; color: var(--text-soft); }
.page a.anchor-link { color: var(--accent); border-bottom: 1px dashed var(--accent); padding-bottom: 2px; }
.page .contact-email { margin-top: 8px; font-weight: 600; }
.page .contact-email a { color: var(--accent); border-bottom: 1px dashed var(--accent); padding-bottom: 2px; }
.last-updated {
  color: var(--text-muted); font-size: 14px; margin-top: 24px;
  padding-top: 16px; border-top: 1px solid var(--border-soft);
}

/* ===== support 联系盒 ===== */
.contact-box {
  background: var(--glass-bg); border: 1px solid var(--glass-border-outer);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: 16px; padding: 28px; margin: 24px 0; text-align: center;
  box-shadow: var(--glass-shadow);
  position: relative; overflow: hidden;
}
.contact-box::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-highlight), transparent);
}
.contact-box .label { font-size: 14px; color: var(--text-faint); margin-bottom: 6px; }
.contact-box .email { font-size: 18px; font-weight: 600; margin: 8px 0; }
.contact-box .email a { color: var(--accent); border-bottom: 1px dashed var(--accent); padding-bottom: 2px; }
.contact-box .note { font-size: 13px; color: var(--text-muted); margin-top: 8px; }

/* ===== 底部 ===== */
footer { background: var(--footer-bg); color: var(--footer-text); padding: 36px 0 24px; }
footer .container { text-align: center; }
footer .f-brand { color: var(--footer-brand); font-size: 16px; margin-bottom: 10px; letter-spacing: 1px; position: relative; display: inline-flex; align-items: baseline; line-height: 1; }
footer .f-brand .en { font-family: "SF Mono", "Menlo", monospace; margin-left: 6px; color: var(--accent); }
footer .icp { font-size: 12px; color: var(--footer-muted); margin-top: 8px; }
footer .icp a { color: var(--footer-muted); }
footer .icp a:hover { color: var(--footer-text); }
footer .company { font-size: 12px; color: var(--footer-muted); margin-top: 4px; }
footer .copyright { font-size: 12px; color: var(--footer-muted); margin-top: 12px; }
footer .copyright .rights { display: inline-block; }

/* ===== 语言可见性控制 ===== */
[data-lang="zh"] .en-only { display: none !important; }
[data-lang="en"] .zh-only { display: none !important; }

/* ===== 滚动渐入动画 ===== */
.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1.8s cubic-bezier(.16, 1, .3, 1), transform 1.8s cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero::after { animation: none; }
  .hero h1::before, .hero h1::after,
  .hero .product-name::before, .hero .product-name::after,
  .brand-wave { animation: none; }
}

/* ===== 背景：微妙的渐变层次（让毛玻璃有东西可透） ===== */
body {
  background:
    radial-gradient(ellipse at 20% 0%, var(--hero-glow-3) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, var(--hero-glow-2) 0%, transparent 50%),
    var(--bg);
  background-attachment: fixed;
}

/* ===== 卡片内容层级（确保 sweep 光晕伪元素不遮挡内容）===== */
.biz-card > *, .feat-card > * {
  position: relative; z-index: 1;
}

/* ===== 卡片光波扫过 ===== */
.biz-card::after, .feat-card::after {
  content: ''; position: absolute; top: 0; left: -60%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent, var(--glass-highlight), transparent);
  transform: skewX(-20deg); opacity: 0;
  pointer-events: none; z-index: 0;
}
/* 桌面 hover：鼠标设备才显示光波扫过，触摸设备不触发 */
@media (hover: hover) {
  .feat-card:hover::after { animation: sweep 1s cubic-bezier(.16, 1, .3, 1); }
}
@keyframes sweep {
  0% { left: -60%; opacity: 0; }
  30% { opacity: 1; }
  100% { left: 120%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .biz-card::after, .feat-card::after { display: none; }
}

/* ============================================================
   产品下拉项：左侧小图标
   ============================================================ */
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dropdown-item-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  object-fit: contain;
  background: transparent;
}

/* ============================================================
   产品详情页 Hero：产品名上方的大图标
   ============================================================ */
.product-hero-icon {
  display: block;
  width: 128px;
  height: 128px;
  max-width: 40vw;
  margin: 0 auto 28px;
  object-fit: contain;
  background: transparent;
  position: relative;
  z-index: 2;
}

/* ============================================================
   产品列表页（products.html）
   ============================================================ */
.products-list .container {
  /* 卡片偏左：不使用任何居中，内容直接跟着 container 左内边距 */
}

/* 产品卡片：整体可点击（文字本身不包链接，卡片容器用 data-href 跳转） */
.product-card {
  position: relative;
  max-width: 680px;
  margin-right: auto; /* 保持卡片在一行偏左，右侧留白 */
  padding: 32px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-outer);
  border-radius: 18px;
  box-shadow: var(--glass-shadow);
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow .42s cubic-bezier(.2,.7,.2,1), background-color .42s cubic-bezier(.2,.7,.2,1), border-color .42s cubic-bezier(.2,.7,.2,1);
}
.product-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-highlight), transparent);
}
.product-card::after {
  content: ''; position: absolute; top: 0; left: -60%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent, var(--glass-highlight), transparent);
  transform: skewX(-20deg); opacity: 0;
  pointer-events: none; z-index: 0;
}
.product-card > * { position: relative; z-index: 1; }

/* 桌面 hover：鼠标设备才显示光波扫过（transform 由 JS init3DCards 独占管理） */
@media (hover: hover) {
  .product-card:hover {
    box-shadow: var(--glass-shadow-hover);
    background: var(--glass-bg-hover);
    border-color: var(--glass-border);
  }
  .product-card:hover::after {
    animation: sweep 1s cubic-bezier(.16, 1, .3, 1);
  }
}
/* 触摸设备：点击瞬间的下压反馈，无粘滞 */
.product-card:active {
  transform: translateY(0) scale(0.995);
  box-shadow: var(--glass-shadow);
  background: var(--glass-bg-hover);
}

@media (prefers-reduced-motion: reduce) {
  .product-card { transition: none; }
  .product-card::after { display: none; }
}

/* 卡片内部：图标 + 内容，水平布局 */
.product-card-inner {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.product-card-icon {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}
.product-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  display: block;
}
.product-card-body {
  min-width: 0;
  flex: 1;
}
.product-card-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
  line-height: 1.3;
}
.product-card-desc {
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.75;
  margin: 0;
}

/* 小屏：卡片变窄，图标变小，文字垂直排列在图标下面 */
@media (max-width: 560px) {
  .product-card { padding: 22px; }
  .product-card-inner {
    flex-direction: column;
    gap: 16px;
  }
  .product-card-icon { width: 56px; height: 56px; }
  .product-card-title { font-size: 19px; }
  .product-card-desc { font-size: 14px; }
  .product-hero-icon { margin-bottom: 20px; }
}

/* 下拉菜单不透明度 80% 覆盖 */
.dropdown-menu { background: rgba(255,255,255,.96); }
[data-theme="dark"] .dropdown-menu { background: rgba(28,28,30,.96); }