/* ========================================
   base.css — 设计令牌 / Reset / 排版 / 原子样式
   ======================================== */

:root {
  /* ========== 品牌色体系（阿里云 B 端风格：#0066CC 阿里云蓝） ========== */
  --primary: #0066CC;            /* 阿里云蓝主色 */
  --primary-dark: #0053B3;       /* 深一档（hover/按压） */
  --primary-hover: #1A7FE5;      /* 亮蓝（hover 提亮） */
  --primary-light: #EAF3FE;      /* 极浅蓝背景 */
  --violet: #7A6CF5;             /* 科技浅紫（低饱和点缀） */
  --violet-600: #7A6CF5;
  --orange: #F97316;
  --amber: #F59E0B;
  --emerald: #10B981;
  --red: #E53030;

  /* 文字层级（深蓝标题 / 浅灰正文） */
  --text-body: #3A4557;
  --text-sub: #6B7280;

  /* 区块背景（白 / 浅灰 / 极浅蓝交替，低饱和柔和） */
  --bg-gray: #F7F9FC;
  --bg-gray-2: #F1F4F9;
  --bg-blue: #F0F7FF;
  --bg-hero: #EAF4FF;
  --line: #E2E8F0;

  /* slate 灰阶 */
  --slate-50: #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #102A43;
  --slate-950: #0B1E33;

  /* 渐变（阿里云低饱和：蓝→亮蓝，蓝→浅紫） */
  --gradient-cta: linear-gradient(90deg, #0066CC 0%, #1A7FE5 100%);
  --gradient-text: linear-gradient(90deg, #0066CC 0%, #7A6CF5 100%);
  --gradient-hero: linear-gradient(135deg, #EAF4FF 0%, #F4FAFF 55%, #F3F1FE 100%);

  /* 科技感令牌（不改变配色，仅增强质感） */
  --glow-blue: 0 0 24px 0 rgba(0, 102, 204, 0.16), 0 8px 30px 0 rgba(11, 30, 51, 0.1);
  --glow-soft: 0 0 0 1px rgba(0, 102, 204, 0.05), 0 8px 28px 0 rgba(11, 30, 51, 0.07);
  --grid-dot: radial-gradient(circle at 1px 1px, rgba(0, 102, 204, 0.05) 1px, transparent 0);
  --grid-dot-dark: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.14) 1px, transparent 0);

  /* 圆角（收敛的圆角矩形，商务稳重） */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  /* 阴影（轻阴影 + hover 大扩散低透明度） */
  --shadow-sm: 0 1px 3px 0 rgba(11, 30, 51, 0.06);
  --shadow-md: 0 2px 8px 0 rgba(11, 30, 51, 0.06);
  --shadow-lg: 0 4px 16px 0 rgba(11, 30, 51, 0.08);
  --shadow-xl: 0 4px 32px 0 rgba(11, 30, 51, 0.1);
  --shadow-blue: 0 8px 24px 0 rgba(0, 102, 204, 0.22);

  /* 字体（现代黑体栈，B 端商务） */
  --font-sans: "PingFang SC", "HarmonyOS Sans SC", "Hiragino Sans GB", "Helvetica Neue",
    Helvetica, "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif;

  /* 布局 */
  --container-max: 1280px;
  --header-h: 64px;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-body);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

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

ul,
ol {
  list-style: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

/* ---------- 布局原子 ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 16px;
}

.section {
  padding: 44px 0;
}

@media (max-width: 768px) {
  .section {
    padding: 32px 0;
  }
}

/* ---------- 文字工具 ---------- */
.text-gradient {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  border-radius: var(--radius-xl);
  padding: 14px 28px;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.btn svg {
  transition: transform 0.25s ease;
}

.btn-primary {
  background: var(--gradient-cta);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 102, 204, 0.25);
  position: relative;
  overflow: hidden;
}

/* 按钮流光扫过（互联网科技感微动效） */
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 50%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.btn-primary:hover::after {
  left: 130%;
}

.btn-primary:hover {
  background: var(--primary-hover);
  box-shadow: 0 0 22px rgba(0, 102, 204, 0.4), var(--shadow-blue);
  transform: translateY(-1px);
}

/* 浅色背景上的幽灵按钮（蓝边蓝字） */
.btn-ghost-light {
  border: 1px solid rgba(0, 102, 204, 0.4);
  color: var(--primary);
  background: rgba(255, 255, 255, 0.65);
}

.btn-ghost-light:hover {
  background: #fff;
  border-color: var(--primary);
}

.btn-outline {
  border: 1px solid var(--primary);
  color: var(--primary);
}

.btn-outline:hover {
  background: var(--primary-light);
}

.btn-white {
  background: #fff;
  color: var(--primary);
}

.btn-white:hover {
  background: var(--primary-light);
}

.btn-sm {
  padding: 10px 20px;
  font-size: 13px;
}

/* ---------- 滚动显现动画（仅 JS 可用时隐藏，无 JS 降级直接显示） ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js .reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* stagger 延迟 */
.js .reveal[data-delay="1"] { transition-delay: 0.08s; }
.js .reveal[data-delay="2"] { transition-delay: 0.16s; }
.js .reveal[data-delay="3"] { transition-delay: 0.24s; }
.js .reveal[data-delay="4"] { transition-delay: 0.32s; }
.js .reveal[data-delay="5"] { transition-delay: 0.4s; }
.js .reveal[data-delay="6"] { transition-delay: 0.48s; }

/* 锚点跳转时为 sticky 头部留出空间 */
[id] {
  scroll-margin-top: calc(var(--header-h) + 20px);
}

/* ========================================
   体验细节增强（保持色调）
   ======================================== */

/* 选中文本配色 */
::selection {
  background: rgba(0, 102, 204, 0.16);
  color: var(--primary-dark);
}
::-moz-selection {
  background: rgba(0, 102, 204, 0.16);
  color: var(--primary-dark);
}

/* 滚动条美化（WebKit） */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--slate-100);
}
::-webkit-scrollbar-thumb {
  background: var(--slate-300);
  border-radius: var(--radius-full);
  border: 2px solid var(--slate-100);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--slate-400);
}

/* Firefox 滚动条 */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--slate-300) var(--slate-100);
}

/* 键盘焦点可见态（可访问性） */
.btn:focus-visible,
.nav-cta-btn:focus-visible,
.form-submit:focus-visible,
.form-control:focus-visible,
.dropdown-link:focus-visible,
.nav-link:focus-visible,
.m-nav-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* 数据数字等宽对齐 */
.counter,
.hero-stat-value,
.svc-stat-num,
.about-stat-value,
.timeline-year {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* 全局过渡曲线基线（hover 更顺滑） */
a,
button,
input,
select,
textarea {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}