/* ========== 设计系统 — 对齐产品 Design Tokens ========== */
:root {
  --primary: #3272FE;
  --primary-dark: #2558d4;
  --primary-light: #EEF4FF;
  --danger: #FF343A;
  --warning: #FFA04A;
  --success: #009933;
  --accent-green: #00B99B;
  --accent-purple: #8B5CF6;
  --text-primary: #1F2329;
  --text-secondary: #4E5969;
  --text-tertiary: #869098;
  --text-disabled: #C9CDD4;
  --border: #E5E7EB;
  --bg-white: #FFFFFF;
  --bg-gray: #F9FAFB;
  --bg-light: #F8F9FA;
  --dark-bg: #06080f;
  --dark-bg2: #0d1117;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.03);
  --shadow-md: 0 4px 12px rgba(0,0,0,.05);
  --shadow-lg: 0 12px 24px rgba(0,0,0,.08);
  --shadow-card-hover: 0 8px 30px rgba(0,0,0,.08);
  --mouse-x: 50%;
  --mouse-y: 50%;
}

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  color: var(--text-primary);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========== 导航 ========== */
.nav-glass {
  backdrop-filter: blur(16px) saturate(1.8);
  -webkit-backdrop-filter: blur(16px) saturate(1.8);
  transition: background-color .3s, box-shadow .3s;
}
.nav-scrolled {
  background-color: rgba(6, 8, 15, .88) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.06);
}

/* ========== Hero 渐变 — 近黑底 + 流体 ========== */
.hero-gradient {
  background: linear-gradient(160deg, #06080f 0%, #0d1a30 45%, #130d28 100%);
  position: relative;
  overflow: hidden;
}
/* 细线网格 — Linear 风格 */
.hero-gradient::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 60px 60px;
  z-index: 1;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 70%);
}
/* 鼠标追踪光晕 */
.hero-gradient .hero-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y), rgba(50,114,254,.08), transparent 60%);
  pointer-events: none;
  z-index: 2;
  transition: background .2s;
}
/* 渐变流体 canvas */
.hero-gradient canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

@keyframes float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-40px) scale(1.05); }
}

/* ========== 产品模拟窗口 — 现代风 ========== */
.mock-window {
  background: var(--bg-white);
  border-radius: var(--radius-xl);
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 25px 50px -12px rgba(0,0,0,.12);
  overflow: hidden;
  transition: transform .5s cubic-bezier(.25,.46,.45,.94), box-shadow .5s;
  border: 1px solid rgba(0,0,0,.06);
}
.mock-window:hover {
  transform: translateY(-4px);
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 32px 64px -16px rgba(0,0,0,.16);
}
/* Hero 内主窗口由 3D 容器控制 hover，抑制默认 lift */
.hero-3d-main .mock-window:hover {
  transform: none;
}
.mock-titlebar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: var(--bg-gray);
  border-bottom: 1px solid var(--border);
}
.mock-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  opacity: .6;
}

/* Hero 浮动提示 */
@keyframes gentle-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.float-badge {
  animation: gentle-bounce 3s ease-in-out infinite;
  backdrop-filter: blur(8px);
}

/* ========== 卡片 — 现代柔和 ========== */
.feature-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: rgba(50,114,254,.15);
}

.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

/* ========== 统计数字 + 环形进度 ========== */
.stat-card {
  text-align: center;
  padding: 2rem 1rem;
}
.stat-ring {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  position: relative;
}
.stat-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.stat-ring circle {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
}
.stat-ring .ring-bg {
  stroke: var(--border);
}
.stat-ring .ring-fill {
  stroke: url(#stat-gradient);
  stroke-dasharray: 339.292;
  stroke-dashoffset: 339.292;
  transition: stroke-dashoffset 1.5s cubic-bezier(.25,.46,.45,.94);
}
.stat-ring.visible .ring-fill {
  stroke-dashoffset: var(--ring-offset);
}
.stat-number {
  font-size: 2rem;
  font-weight: 700;
  background: linear-gradient(135deg, #3272FE, #8B5CF6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
  position: relative;
  z-index: 1;
}

/* ========== Tab 切换 ========== */
.tab-btn {
  padding: .5rem 1.25rem;
  border-radius: var(--radius-pill);
  font-weight: 500;
  cursor: pointer;
  transition: all .25s ease;
  border: 1px solid var(--border);
  background: white;
  color: var(--text-secondary);
  font-size: .8125rem;
}
.tab-btn.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}
.tab-btn:hover:not(.active) {
  border-color: var(--primary);
  color: var(--primary);
}
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ========== 滚动动画 ========== */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease, transform .7s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}
.fade-in-left {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity .7s ease, transform .7s ease;
}
.fade-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}
.fade-in-right {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.fade-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}
.scale-in {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity .7s ease, transform .7s ease;
}
.scale-in.visible {
  opacity: 1;
  transform: scale(1);
}
.blur-in {
  opacity: 0;
  filter: blur(6px);
  transition: opacity .7s ease, filter .7s ease;
}
.blur-in.visible {
  opacity: 1;
  filter: blur(0);
}

/* ========== Features 页面卡片 ========== */
.feature-section-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  border: 1px solid var(--border);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.feature-section-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  border-color: rgba(50,114,254,.12);
}

/* ========== AI Badge — 发光 ========== */
.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .2rem .625rem;
  border-radius: var(--radius-pill);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .02em;
  background: linear-gradient(135deg, #3272FE, #9333ea);
  color: white;
  box-shadow: 0 0 12px rgba(99,91,255,.3);
  animation: ai-pulse 2.5s ease-in-out infinite;
}
@keyframes ai-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(99,91,255,.3); }
  50% { box-shadow: 0 0 20px rgba(99,91,255,.5); }
}

.tech-stack-card {
  background: var(--dark-bg2);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  border: 1px solid rgba(255,255,255,.06);
}

/* ========== CTA 按钮 — Shimmer 光带 ========== */
.btn-shimmer {
  position: relative;
  overflow: hidden;
}
.btn-shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
  0% { left: -100%; }
  50%, 100% { left: 150%; }
}

/* ========== Contact 表单 ========== */
.form-input {
  width: 100%;
  padding: .75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: .875rem;
  transition: border-color .25s ease, box-shadow .25s ease;
  outline: none;
  background: white;
  font-family: inherit;
  color: var(--text-primary);
}
.form-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(50,114,254,.08);
}
.form-input.error {
  border-color: var(--danger);
}
.form-error {
  color: var(--danger);
  font-size: .75rem;
  margin-top: .25rem;
  display: none;
}

/* ========== CTA Section ========== */
.cta-gradient {
  background: linear-gradient(160deg, #06080f 0%, #0d1a30 45%, #130d28 100%);
  position: relative;
  overflow: hidden;
}
.cta-gradient::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,.1) 0%, transparent 70%);
  animation: float 12s ease-in-out infinite;
}

/* ========== Footer ========== */
.footer-link {
  color: var(--text-tertiary);
  text-decoration: none;
  transition: color .2s;
}
.footer-link:hover {
  color: white;
}

/* ========== AI 对比箭头 ========== */
.comparison-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 4px 12px rgba(50,114,254,.25);
  flex-shrink: 0;
  animation: pulse-arrow 2s ease-in-out infinite;
}
@keyframes pulse-arrow {
  0%, 100% { box-shadow: 0 4px 12px rgba(50,114,254,.25); transform: scale(1); }
  50% { box-shadow: 0 6px 20px rgba(50,114,254,.4); transform: scale(1.05); }
}

/* 扫描线动画 */
@keyframes scan-line {
  0% { top: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
.scan-line {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--primary), rgba(50,114,254,.5), transparent);
  box-shadow: 0 0 8px rgba(50,114,254,.4);
  animation: scan-line 2.5s ease-in-out infinite;
}

/* ========== AI 打字机光标 ========== */
@keyframes blink-cursor {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}
.typing-cursor {
  display: inline;
  color: var(--accent-purple);
  animation: blink-cursor 1s step-end infinite;
  font-weight: 300;
}

/* ========== 点阵背景 ========== */
.dot-grid {
  background-image: radial-gradient(circle, rgba(0,0,0,.04) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ========== 渐变分隔线 ========== */
.gradient-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border), transparent);
}

/* ========== 按钮 — 现代 ========== */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: linear-gradient(135deg, var(--primary), #5E6AD2);
  color: white;
  font-weight: 500;
  padding: .75rem 1.75rem;
  border-radius: var(--radius-pill);
  transition: transform .2s ease, box-shadow .3s ease, filter .2s ease;
  text-decoration: none;
  font-size: .875rem;
  border: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(50,114,254,.3), inset 0 1px 0 rgba(255,255,255,.12);
  filter: brightness(1.05);
}
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255,255,255,.06);
  color: white;
  font-weight: 500;
  padding: .75rem 1.75rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,.15);
  transition: background .2s ease, border-color .2s ease;
  text-decoration: none;
  font-size: .875rem;
  backdrop-filter: blur(8px);
}
.btn-outline:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.3);
}

/* ========== AI 发光得分 ========== */
.ai-score-glow {
  text-shadow: 0 0 24px rgba(99,91,255,.35);
}
/* 进度条发光 */
.progress-glow {
  box-shadow: 0 0 6px rgba(50,114,254,.25);
}

/* ========== 响应式 ========== */
@media (max-width: 768px) {
  .stat-number { font-size: 1.75rem; }
  .stat-ring { width: 90px; height: 90px; }
  .tab-btn { padding: .5rem 1rem; font-size: .8rem; }
}

/* ========== 汉堡菜单 ========== */
.mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.mobile-menu.open {
  max-height: 300px;
}

/* ========== Hero 3D 透视组合 ========== */
.hero-3d-wrapper {
  perspective: 1200px;
  perspective-origin: 50% 50%;
}
.hero-3d-main {
  transform: rotateY(-4deg) rotateX(2deg);
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.25,.46,.45,.94);
}
.hero-3d-main:hover {
  transform: rotateY(-1deg) rotateX(0.5deg);
}

/* 发光边框 */
.hero-glow-border {
  border: 1px solid rgba(50,114,254,.25) !important;
  box-shadow:
    0 0 0 1px rgba(50,114,254,.15),
    0 0 40px rgba(50,114,254,.12),
    0 0 80px rgba(139,92,246,.08),
    0 25px 60px -12px rgba(0,0,0,.3);
}

/* AI 评分叠加卡 */
.hero-score-card {
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  background: linear-gradient(145deg, rgba(13,17,23,.92), rgba(19,13,40,.90));
  border: 1px solid rgba(139,92,246,.3);
  border-radius: 16px;
  box-shadow:
    0 0 30px rgba(139,92,246,.15),
    0 12px 40px rgba(0,0,0,.2);
  transition: transform .5s ease, box-shadow .5s ease;
}
.hero-score-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow:
    0 0 40px rgba(139,92,246,.2),
    0 16px 48px rgba(0,0,0,.25);
}

/* 评分数字呼吸发光 */
@keyframes score-breathe {
  0%, 100% {
    text-shadow: 0 0 20px rgba(50,114,254,.4), 0 0 40px rgba(139,92,246,.2);
    filter: brightness(1);
  }
  50% {
    text-shadow: 0 0 30px rgba(50,114,254,.6), 0 0 60px rgba(139,92,246,.35);
    filter: brightness(1.1);
  }
}
.score-breathe {
  animation: score-breathe 3s ease-in-out infinite;
}

/* 维度进度条流光 */
@keyframes bar-shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.bar-shimmer {
  background-size: 200% 100%;
  animation: bar-shimmer 3s linear infinite;
}

/* 浮动通知入场 */
@keyframes float-in {
  0% { opacity: 0; transform: translateY(12px) scale(.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.float-badge-delayed {
  opacity: 0;
  animation: float-in .6s ease forwards, gentle-bounce 3s ease-in-out infinite;
}

/* 移动端降级：去 3D */
@media (max-width: 1024px) {
  .hero-3d-main {
    transform: none !important;
  }
  .hero-3d-main:hover {
    transform: none !important;
  }
}