/* ====== 你原来的变量（light） ====== */
:root {
  --bg-color: #f5f5f7;
  --card-color: #ffffff;
  --text-color: #1d1d1f;
  --secondary-text-color: #6e6e73;
  --link-color: #007aff;
  --border-color: #d2d2d7;
  --nav-bg-color: rgba(255, 255, 255, 0.7);
  --shadow-color: rgba(0, 0, 0, 0.08);
  --cta-bg: var(--link-color);
  --cta-text: #ffffff;
}

/* ====== dark：改成 :root.dark（配合 html.dark） ====== */
:root.dark {
  --bg-color: #0d0d0d;
  --card-color: #1a1a1a;
  --text-color: #f5f5f7;
  --secondary-text-color: #86868b;
  --link-color: #007aff;
  --border-color: #2c2c2e;
  --nav-bg-color: rgba(0, 0, 0, 0.7);
  --shadow-color: rgba(0, 0, 0, 0.3);
  --cta-bg: #3399ff;
  --cta-text: #ffffff;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg-color);
  color: var(--text-color);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background 0.5s ease, color 0.5s ease;
}

/* 可选：长页面首屏更快 */
section {
  content-visibility: auto;
  contain-intrinsic-size: 1000px;
}

/* ====== 兜底：你页面用到的“自定义类名” ====== */
.text-text-color { color: var(--text-color); }
.text-secondary-text-color { color: var(--secondary-text-color); }
.text-link-color { color: var(--link-color); }

.bg-card-color { background-color: var(--card-color); }
.bg-nav-bg-color { background-color: var(--nav-bg-color); }

.border-border-color { border-color: var(--border-color); }
.border-link-color { border-color: var(--link-color); }

/* ring-link-color：用于 ring-2 ring-link-color 的视觉兜底（不依赖 Tailwind 变量） */
.ring-link-color { box-shadow: 0 0 0 2px var(--link-color); }

/* hover:bg-border-color 兜底 */
.hover\:bg-border-color:hover { background-color: var(--border-color); }

/* ====== Navigation ====== */
.top-nav {
  background-color: var(--nav-bg-color);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 2px 4px var(--shadow-color);
}

/* ====== 动画（你原来的 AOS） ====== */
[data-aos] {
  opacity: 0;
  transform: translateY(30px) scale(0.98);
  transition: opacity 1.2s cubic-bezier(0.2, 0, 0, 1), transform 1.2s cubic-bezier(0.2, 0, 0, 1);
}
[data-aos].aos-animate {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ====== Mobile menu ====== */
.mobile-menu {
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
}
.mobile-menu.open { transform: translateX(0); }

/* ====== Card styles ====== */
.card {
  background-color: var(--card-color);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 16px var(--shadow-color);
  transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.3s cubic-bezier(0.2, 0, 0, 1);
}
.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 20px var(--shadow-color);
}

/* CTA */
.cta-btn {
  background-color: var(--cta-bg);
  color: var(--cta-text);
}
.cta-number {
  background-color: var(--cta-bg);
  color: var(--cta-text);
}