/* ============================================================
   组件：Hero 区域 (Hero Section)
   ============================================================ */

.hero-card {
  background: var(--gradient-card);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
  border-radius: var(--border-radius-xl);
  padding: var(--space-7) var(--space-8);
  margin-bottom: var(--panel-gap);
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--duration-normal) var(--ease-default);
}

.hero-card:hover {
  box-shadow: var(--shadow-card-hover);
}

/* 装饰性背景光斑 */
.hero-card::before {
  content: "";
  position: absolute;
  right: -80px;
  top: -90px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, rgba(6, 182, 212, 0.06) 50%, transparent 70%);
  pointer-events: none;
}

.hero-card::after {
  content: "";
  position: absolute;
  left: -40px;
  bottom: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.08) 0%, transparent 60%);
  pointer-events: none;
}

.hero-title {
  font-size: var(--text-4xl);
  font-weight: 800;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-2);
  position: relative;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: var(--leading-tight);
}

.hero-desc {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: 720px;
  position: relative;
}

/* Hero 区域标签徽章 */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px 12px;
  background: var(--color-primary-50);
  color: var(--color-primary-600);
  border-radius: var(--border-radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  margin-bottom: var(--space-3);
  letter-spacing: var(--tracking-wide);
  position: relative;
}

.hero-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-success);
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.4); }
}

/* ── 主题切换按钮 ── */
.theme-toggle {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-default);
  border-radius: var(--border-radius-full);
  background: var(--bg-card);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: all var(--duration-fast) var(--ease-default);
  box-shadow: var(--shadow-xs);
  z-index: 2;
}

.theme-toggle:hover {
  transform: scale(1.1) rotate(15deg);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-200);
}

.theme-toggle:active {
  transform: scale(0.95);
}

/* ── 暗色模式 Hero 适配 ── */
[data-theme="dark"] .hero-card::before {
  background: radial-gradient(circle, rgba(59, 130, 246, 0.08) 0%, rgba(6, 182, 212, 0.04) 50%, transparent 70%);
}

[data-theme="dark"] .hero-card::after {
  background: radial-gradient(circle, rgba(6, 182, 212, 0.06) 0%, transparent 60%);
}

[data-theme="dark"] .hero-badge {
  background: rgba(59, 130, 246, 0.15);
  color: var(--color-primary-light);
}