/* 全站公共样式 */

/* 本地化 Inter（latin 子集，覆盖英文/数字；中文走系统字体兜底） */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/vendor/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+00A9, U+FEFF, U+FFFD;
}

/* 平滑滚动 */
html {
  scroll-behavior: smooth;
}

/* 深底上的 logo 反白（filter）：绕开维护一份反白 PNG */
.logo-on-dark {
  filter: brightness(0) invert(1);
}

/* ============================================
   深点AI 设计系统 v2 · Design Tokens
   ============================================ */
:root {
  --brand-navy: #0F1B3D;
  --brand-card: #1A2547;
  --brand-deep: #0A1230;
  --brand-blue: #1E3A8A;
  --brand-cyan: #06B6D4;
  --brand-green: #10B981;
  --brand-amber: #F59E0B;
  --brand-red: #EF4444;
  --ink: #111827;
  --muted: #6B7280;
  --soft: #9CA3AF;
  --line: #E5E7EB;
  --wash: #F9FAFB;
  --panel: #F3F4F6;

  --brand-gradient: linear-gradient(90deg, #1E3A8A 0%, #06B6D4 25%, #10B981 50%, #F59E0B 75%, #EF4444 100%);
  --brand-gradient-cool: linear-gradient(90deg, #1E3A8A 0%, #06B6D4 50%, #10B981 100%);
  --radius-card: 20px;
}

/* 选中文本 */
::selection {
  background-color: #0F1B3D;
  color: white;
}

/* 文字截断（2行/3行） */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Alpine 未初始化前隐藏，避免闪烁 */
[x-cloak] { display: none !important; }

/* 焦点环（统一） */
*:focus-visible {
  outline: 2px solid #06B6D4;
  outline-offset: 2px;
}

/* ============================================
   品牌组件
   ============================================ */

/* 彩虹渐变条：4px 高，用于卡片顶部强调 */
.brand-ribbon {
  height: 4px;
  border-radius: 999px;
  background: var(--brand-gradient);
}

/* 渐变底色块 */
.brand-gradient {
  background: var(--brand-gradient);
}
.brand-gradient-cool {
  background: var(--brand-gradient-cool);
}

/* 渐变文字 */
.brand-gradient-text {
  background: var(--brand-gradient-cool);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 按钮 */
.btn-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .875rem 1.875rem;
  border-radius: 999px;
  font-size: .9375rem;
  font-weight: 600;
  color: #fff;
  background: var(--brand-gradient-cool);
  box-shadow: 0 8px 24px -10px rgba(6, 182, 212, .6);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-brand:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 14px 32px -12px rgba(6, 182, 212, .7);
}
.btn-navy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .875rem 1.875rem;
  border-radius: 999px;
  font-size: .9375rem;
  font-weight: 600;
  color: #fff;
  background: var(--brand-navy);
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn-navy:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px -14px rgba(15, 27, 61, .5);
}
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8125rem 1.75rem;
  border-radius: 999px;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--brand-navy);
  background: #fff;
  border: 1px solid var(--line);
  transition: border-color .18s ease, transform .18s ease;
}
.btn-outline:hover {
  border-color: var(--brand-cyan);
  transform: translateY(-1px);
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--brand-navy);
}
.btn-ghost:hover { color: var(--brand-cyan); }
.btn-ghost .arrow { transition: transform .18s ease; }
.btn-ghost:hover .arrow { transform: translateX(3px); }

/* 卡片 */
.card-brand {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card-brand:hover {
  transform: translateY(-3px);
  border-color: rgba(6, 182, 212, .35);
  box-shadow: 0 18px 40px -18px rgba(15, 27, 61, .25);
}
.card-dark {
  background: var(--brand-card);
  border-radius: var(--radius-card);
  color: #fff;
}

/* 区块小标签 */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem .875rem;
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .02em;
  background: rgba(15, 27, 61, .05);
  color: var(--brand-navy);
}
.eyebrow-dark {
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .92);
}
.eyebrow::before {
  content: "";
  width: .5rem;
  height: .5rem;
  border-radius: 999px;
  background: var(--brand-gradient-cool);
}

/* 点阵背景装饰 */
.dot-grid-bg {
  background-image: radial-gradient(rgba(15, 27, 61, .10) 1px, transparent 1px);
  background-size: 22px 22px;
}
.dot-grid-bg-dark {
  background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* 分隔线渐变 */
.rule-gradient {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 15%, var(--line) 85%, transparent);
}

/* 富文本渲染 */
.prose {
  line-height: 1.8;
  color: #334155;
}
.prose h1 { font-size: 1.875rem; font-weight: 700; margin-top: 1.5em; margin-bottom: 0.5em; color: var(--ink); }
.prose h2 { font-size: 1.5rem; font-weight: 700; margin-top: 1.5em; margin-bottom: 0.5em; color: var(--ink); }
.prose h3 { font-size: 1.25rem; font-weight: 600; margin-top: 1.2em; margin-bottom: 0.4em; color: var(--ink); }
.prose p { margin: 0.8em 0; }
.prose ul, .prose ol { margin: 0.8em 0; padding-left: 1.5em; }
.prose ul { list-style-type: disc; }
.prose ol { list-style-type: decimal; }
.prose li { margin: 0.3em 0; }
.prose a { color: var(--brand-navy); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--brand-cyan); }
.prose img { max-width: 100%; height: auto; border-radius: 0.5rem; margin: 1em 0; }
.prose blockquote { border-left: 4px solid var(--brand-cyan); padding-left: 1em; color: #475569; font-style: italic; margin: 1em 0; }
.prose code { background: #f1f5f9; padding: 0.2em 0.4em; border-radius: 0.25em; font-size: 0.9em; }
.prose pre { background: #0f172a; color: #e2e8f0; padding: 1em; border-radius: 0.5em; overflow-x: auto; }
.prose pre code { background: transparent; padding: 0; color: inherit; }
.prose strong { font-weight: 600; color: var(--ink); }
.prose table { width: 100%; margin: 1em 0; border-collapse: collapse; }
.prose th, .prose td { padding: 0.5em 0.75em; border: 1px solid #e2e8f0; }
.prose th { background: #f8fafc; font-weight: 600; }