/**
 * =============================================================================
 * RESET & BASE STYLES
 * =============================================================================
 * 设计令牌 + 基础重置
 *
 * 设计概念:"打开" —— Logo 的五片叶子就是全站的视觉语言。
 * 每个产品对应一片叶子,并沿用那片叶子的两种颜色:
 *   TTapi     = 中间叶 (青 / 翠绿)
 *   无线画布  = 左侧叶 (橄榄绿 / 橙)
 *   企业方案  = 右侧叶 (嫩绿 / 深绿)
 *
 * 本文件包含:设计令牌 (颜色/玻璃/字体/字号) → 全局重置 → 环境光背景 → 通用类
 */

/* ===== 设计令牌 ===== */
:root {
  /* 底色与文字 */
  --paper: #f3f7f5;         /* 页面底色:冷调薄荷白 */
  --paper-deep: #e8efec;    /* 略深的底色 (备用) */
  --ink: #0f2522;           /* 标题:深墨绿 */
  --ink-soft: #3d504c;      /* 正文 */
  --muted: #6c7d79;         /* 次要文字 */
  --line: rgba(15, 37, 34, 0.1); /* 分隔线 */
  --forest: #0f2a26;        /* 深色面板 (企业方案) */

  /* 叶片色 (取自 Logo) */
  --teal: #0e9c9a;          /* 中间叶左半:青 (主色,链接/光标/焦点框) */
  --emerald: #34ae7b;       /* 中间叶右半:翠绿 */
  --olive: #8dbb3a;         /* 左侧叶下半:橄榄绿 */
  --orange: #f7a23f;        /* 左侧叶上半:橙 (暖色点缀) */
  --lime: #bcd437;          /* 右侧叶上半:嫩绿 (高光) */
  --green: #0b8a53;         /* 右侧叶下半:深绿 */

  /* 玻璃材质 (浅色)
   * 质感来自四层:半透明填充 + 背景模糊/增饱和 + 内阴影勾出的高光边缘 + 柔和投影。
   * Chrome/Edge 中 js/liquid-glass.js 会额外叠加边缘折射。 */
  --glass-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.26)); /* 半透明填充 */
  --glass-border: rgba(255, 255, 255, 0.6);
  /* 高光边缘:用多层内阴影勾出玻璃的上/下/左/右亮边和上下内发光 */
  --glass-rim:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.95),        /* 顶边高光 */
    inset 0 -1px 0.5px rgba(255, 255, 255, 0.55),       /* 底边反光 */
    inset 1px 0 0.5px rgba(255, 255, 255, 0.35),        /* 左边 */
    inset -1px 0 0.5px rgba(255, 255, 255, 0.35),       /* 右边 */
    inset 0 10px 22px -14px rgba(255, 255, 255, 0.95),  /* 顶部内发光 */
    inset 0 -12px 24px -16px rgba(255, 255, 255, 0.8);  /* 底部内发光 */
  /* 完整玻璃阴影 = 高光边缘 + 极细外轮廓 + 近处阴影 + 远处柔和投影 */
  --glass-shadow:
    var(--glass-rim),
    0 0 0 1px rgba(15, 37, 34, 0.05),
    0 2px 6px -2px rgba(15, 60, 52, 0.08),
    0 30px 60px -30px rgba(15, 60, 52, 0.32);
  --glass-blur: blur(24px) saturate(200%) brightness(1.04); /* 背景模糊 + 增饱和 + 提亮 */

  /* 字体
   * --display: 标题用,中文统一走思源黑体 (Noto Sans SC),保证各系统一致
   * --sans:    正文用,中文优先系统字体 (苹方 / 鸿蒙 / 微软雅黑),加载更快
   * 英文与数字都使用 Plus Jakarta Sans */
  --display: "Plus Jakarta Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --sans: "Plus Jakarta Sans", "PingFang SC", "HarmonyOS Sans SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;

  /* 字号阶梯 (约 1.333 倍率);clamp(最小, 随视口, 最大) 让标题随屏幕宽度缩放 */
  --fs-sm: 14px;     /* 小字:链接、标注 */
  --fs-body: 17px;   /* 正文 */
  --fs-lead: 19px;   /* 首屏副标题 */
  --fs-h3: 22px;     /* 小标题 */
  --fs-h2: clamp(34px, 4.2vw, 52px);
  --fs-h1: clamp(52px, 7.4vw, 104px);

  /* 布局 */
  --content: 1200px;                        /* 内容区最大宽度 */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* 全站统一的缓出曲线:快起步、柔和收尾 */
}

/* ===== 全局重置 ===== */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth; /* 点击锚点链接时平滑滚动 */
  scroll-padding-top: 90px; /* 锚点跳转后,标题不被悬浮导航遮住 */
}

body {
  margin: 0;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.75;
  background: var(--paper);
  -webkit-font-smoothing: antialiased;  /* macOS 下文字更细腻 */
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; /* 防止装饰元素超出导致横向滚动条 */
}

/* 选中文字的高亮色 */

::selection {
  background: rgba(14, 156, 154, 0.22);
  color: var(--ink);
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
}

img {
  max-width: 100%;
}

h1,
h2,
h3 {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 700;
  text-wrap: balance; /* 多行标题各行长度尽量均衡 */
}

h2 {
  font-size: var(--fs-h2);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
}

p {
  margin: 0;
  text-wrap: pretty; /* 避免段尾只剩一两个字 */
}

/* 键盘操作 (Tab) 时的焦点框,鼠标点击不显示 */
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ===== 环境光层 =====
 * 固定在视口后方,四团叶片色的柔光缓慢漂移,加一层细颗粒。
 * 让页面上任何一块玻璃背后都"有东西",玻璃才看得出来。 */
.ambient {
  position: fixed;   /* 固定在视口,滚动时背景不动,内容从玻璃后滑过 */
  inset: 0;
  z-index: -2;       /* 位于所有内容之下 */
  overflow: hidden;
  pointer-events: none;
}

/* 每个 <i> 是一团径向渐变的柔光 */
.ambient i {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform; /* 提示浏览器用 GPU 合成,动画更流畅 */
}

/* 右上:青色 */
.ambient i:nth-child(1) {
  width: 70vmax;
  height: 70vmax;
  right: -22vmax;
  top: -30vmax;
  background: radial-gradient(circle, rgba(14, 156, 154, 0.2), transparent 62%);
  animation: ambient-a 38s ease-in-out infinite alternate;
}

/* 左侧:嫩绿 */
.ambient i:nth-child(2) {
  width: 60vmax;
  height: 60vmax;
  left: -24vmax;
  top: 20vh;
  background: radial-gradient(circle, rgba(188, 212, 55, 0.22), transparent 62%);
  animation: ambient-b 44s ease-in-out infinite alternate;
}

/* 右下:橙色 (暖色点缀) */
.ambient i:nth-child(3) {
  width: 52vmax;
  height: 52vmax;
  right: -10vmax;
  bottom: -26vmax;
  background: radial-gradient(circle, rgba(247, 162, 63, 0.15), transparent 62%);
  animation: ambient-c 40s ease-in-out infinite alternate;
}

/* 底部:翠绿 */
.ambient i:nth-child(4) {
  width: 48vmax;
  height: 48vmax;
  left: 18vw;
  bottom: -30vmax;
  background: radial-gradient(circle, rgba(52, 174, 123, 0.16), transparent 62%);
  animation: ambient-a 50s ease-in-out infinite alternate-reverse;
}

/* 细颗粒:让大面积浅色不显得"塑料"
 * 内嵌一张 SVG 噪点图 (feTurbulence 生成),平铺后以正片叠底低透明度覆盖 */
.ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.07;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.06 0 0 0 0 0.14 0 0 0 0 0.13 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 三种漂移路径,时长 38–50 秒且往返播放,慢到几乎察觉不到 */
@keyframes ambient-a {
  to { transform: translate(-10vw, 14vh) scale(1.12); }
}

@keyframes ambient-b {
  to { transform: translate(14vw, -10vh) scale(0.9); }
}

@keyframes ambient-c {
  to { transform: translate(-16vw, -12vh) scale(1.08); }
}

/* ===== 玻璃通用类 (目前用于导航栏,可复用到任何需要玻璃质感的元素) ===== */
.glass {
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

/* ===== 通用布局:内容区居中,两侧各留 40px ===== */
.content-width {
  max-width: var(--content);
  width: calc(100% - 80px);
  margin: 0 auto;
}

/* ===== 减少动效偏好:系统开启"减少动态效果"时,关闭所有动画与过渡 ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== 手机 (< 650px):正文字号略小,两侧留白收窄到 20px ===== */
@media (max-width: 650px) {
  :root {
    --fs-body: 16px;
    --fs-lead: 17px;
  }

  .content-width {
    width: calc(100% - 40px);
  }
}