/**
 * Nebvector 官网设计系统（Design Tokens + 组件样式）
 * 规范文档：docs/DESIGN-SYSTEM.md
 */

/* —— 1. 设计令牌 —— */
:root {
  /* 品牌色 */
  --agent-primary: #4f46e5;
  --agent-primary-hover: #4338ca;
  --agent-primary-rgb: 79, 70, 229;
  --agent-primary-soft: #eef2ff;

  --agent-accent: #0891b2;
  --agent-accent-rgb: 8, 145, 178;
  --agent-accent-soft: #ecfeff;

  --agent-secondary: #6366f1;
  --agent-secondary-rgb: 99, 102, 241;

  /* 中性色 */
  --agent-ink: #0f172a;
  --agent-ink-soft: #1e293b;
  --agent-muted: #64748b;
  --agent-muted-light: #94a3b8;
  --agent-border: #e2e8f0;
  --agent-border-strong: #cbd5e1;
  --agent-surface: #f8fafc;
  --agent-surface-elevated: #ffffff;

  /* 语义色 */
  --agent-success: #059669;
  --agent-danger: #dc2626;

  /* 渐变 */
  --agent-gradient: linear-gradient(135deg, #4f46e5 0%, #6366f1 38%, #0891b2 100%);
  --agent-gradient-soft: linear-gradient(160deg, #eef2ff 0%, #ecfeff 42%, #fff 100%);
  --agent-gradient-ink: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);

  /* 圆角 / 阴影 */
  --agent-radius-sm: 0.5rem;
  --agent-radius: 1rem;
  --agent-radius-lg: 1.25rem;
  --agent-radius-pill: 2rem;
  --agent-shadow-sm: 0 2px 8px rgb(15 23 42 / 6%);
  --agent-shadow: 0 12px 40px rgb(79 70 229 / 12%);
  --agent-shadow-lg: 0 20px 50px rgb(15 23 42 / 12%);

  /* 字体 */
  --agent-font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', 'PingFang SC',
    'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --agent-font-mono: ui-monospace, 'Cascadia Code', 'Segoe UI Mono', monospace;

  --agent-text-xs: 0.75rem;
  --agent-text-sm: 0.875rem;
  --agent-text-base: 1rem;
  --agent-text-lg: 1.125rem;
  --agent-text-xl: 1.25rem;
  --agent-text-2xl: 1.5rem;
  --agent-text-3xl: 1.875rem;
  --agent-text-4xl: 2.25rem;
  --agent-text-5xl: clamp(2rem, 4vw + 1rem, 3rem);

  --agent-leading-tight: 1.25;
  --agent-leading-snug: 1.375;
  --agent-leading-normal: 1.6;
  --agent-leading-relaxed: 1.75;

  --agent-weight-medium: 500;
  --agent-weight-semibold: 600;
  --agent-weight-bold: 700;

  /* 间距（8px 基准） */
  --agent-space-1: 0.25rem;
  --agent-space-2: 0.5rem;
  --agent-space-3: 0.75rem;
  --agent-space-4: 1rem;
  --agent-space-5: 1.25rem;
  --agent-space-6: 1.5rem;
  --agent-space-8: 2rem;
  --agent-space-10: 2.5rem;
  --agent-space-12: 3rem;
  --agent-space-16: 4rem;
  --agent-space-20: 5rem;

  /* 布局 */
  --agent-container-max: 1140px;
  --agent-section-y: clamp(3rem, 6vw, 4.5rem);
  --agent-section-y-compact: clamp(2rem, 4vw, 3rem);
  --agent-page-sidebar-top: 6rem;
  --agent-header-cta-height: 2.25rem;
}

/* —— 2. 全站基础（template-site） —— */
.template-site {
  --bs-primary: var(--agent-primary);
  --bs-primary-rgb: var(--agent-primary-rgb);
  --bs-link-color: var(--agent-primary);
  --bs-link-hover-color: var(--agent-primary-hover);
  --bs-body-font-family: var(--agent-font-sans);
  --bs-border-color: var(--agent-border);
  font-family: var(--agent-font-sans);
  color: var(--agent-ink-soft);
  -webkit-font-smoothing: antialiased;
}

.template-site .btn-primary {
  --bs-btn-bg: var(--agent-primary);
  --bs-btn-border-color: var(--agent-primary);
  --bs-btn-hover-bg: var(--agent-primary-hover);
  --bs-btn-hover-border-color: var(--agent-primary-hover);
  --bs-btn-active-bg: var(--agent-primary-hover);
  --bs-btn-active-border-color: var(--agent-primary-hover);
  font-weight: var(--agent-weight-semibold);
  border-radius: var(--agent-radius-pill);
  padding-inline: 1.25rem;
}

.template-site .btn-outline-primary {
  --bs-btn-color: var(--agent-primary);
  --bs-btn-border-color: rgb(var(--agent-primary-rgb) / 35%);
  --bs-btn-hover-bg: var(--agent-primary);
  --bs-btn-hover-border-color: var(--agent-primary);
  font-weight: var(--agent-weight-semibold);
  border-radius: var(--agent-radius-pill);
}

.template-site .btn-lg {
  padding-block: 0.65rem;
  font-size: var(--agent-text-base);
}

.template-site .site-header-public .btn-sm.btn-primary {
  min-height: var(--agent-header-cta-height);
  padding-inline: 1rem;
  font-size: var(--agent-text-sm);
}

/* —— 3. 排版工具类 —— */
.agent-text-muted {
  color: var(--agent-muted) !important;
}

.agent-text-ink {
  color: var(--agent-ink) !important;
}

.agent-text-primary {
  color: var(--agent-primary) !important;
}

.agent-text-accent {
  color: var(--agent-accent) !important;
}

.agent-lead {
  font-size: var(--agent-text-lg);
  line-height: var(--agent-leading-relaxed);
  color: var(--agent-muted);
}

.agent-heading-hero {
  font-size: var(--agent-text-5xl);
  font-weight: var(--agent-weight-bold);
  line-height: var(--agent-leading-tight);
  color: var(--agent-ink);
  letter-spacing: -0.02em;
}

.agent-heading-section {
  font-size: var(--agent-text-2xl);
  font-weight: var(--agent-weight-bold);
  line-height: var(--agent-leading-snug);
  color: var(--agent-ink);
}

.agent-heading-block {
  font-size: var(--agent-text-xl);
  font-weight: var(--agent-weight-bold);
  color: var(--agent-ink);
}

.agent-heading-sub {
  font-size: var(--agent-text-sm);
  font-weight: var(--agent-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--agent-primary);
}

.agent-prose {
  font-size: var(--agent-text-base);
  line-height: var(--agent-leading-relaxed);
  color: var(--agent-muted);
}

.agent-prose p {
  margin-bottom: var(--agent-space-4);
}

.agent-prose h2 {
  font-size: var(--agent-text-lg);
  font-weight: var(--agent-weight-bold);
  color: var(--agent-ink);
  margin-top: var(--agent-space-8);
  margin-bottom: var(--agent-space-3);
}

.agent-prose a {
  color: var(--agent-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* —— 4. 布局 —— */
.agent-section {
  padding-block: var(--agent-section-y);
}

.agent-section--compact {
  padding-block: var(--agent-section-y-compact);
}

.agent-section--alt {
  background: var(--agent-surface);
}

.agent-section--tight-top {
  padding-top: var(--agent-space-8);
}

.agent-page-layout .agent-page-sidebar {
  position: sticky;
  top: var(--agent-page-sidebar-top);
}

.agent-max-prose {
  max-width: 42rem;
}

/* —— 5. 通用组件 —— */
.agent-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--agent-space-2);
  font-size: var(--agent-text-xs);
  font-weight: var(--agent-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--agent-primary);
}

.agent-eyebrow::before {
  content: '';
  width: 1.25rem;
  height: 2px;
  background: var(--agent-gradient);
  border-radius: 1px;
}

.agent-eyebrow--light {
  color: rgb(255 255 255 / 85%);
}

.agent-eyebrow--light::before {
  background: rgb(255 255 255 / 70%);
}

.agent-section-head {
  margin-bottom: var(--agent-space-10);
}

.agent-section-head--start .agent-eyebrow {
  justify-content: flex-start;
}

.agent-glass {
  background: rgb(255 255 255 / 92%);
  backdrop-filter: blur(12px);
  border: 1px solid var(--agent-border);
  border-radius: var(--agent-radius);
  box-shadow: var(--agent-shadow-sm);
}

.agent-card-hover {
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.agent-card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--agent-shadow-lg);
}

.agent-card {
  border-radius: var(--agent-radius);
  border: 1px solid var(--agent-border);
  background: var(--agent-surface-elevated);
  box-shadow: var(--agent-shadow-sm);
}

.agent-highlight-card {
  border-left: 4px solid var(--agent-primary) !important;
  border-radius: var(--agent-radius);
  background: var(--agent-surface-elevated);
  box-shadow: var(--agent-shadow-sm);
}

.agent-badge-primary {
  background: rgb(var(--agent-primary-rgb) / 10%);
  color: var(--agent-primary);
  font-weight: var(--agent-weight-semibold);
}

.agent-badge-neutral {
  background: var(--agent-surface);
  color: var(--agent-ink-soft);
  font-weight: var(--agent-weight-medium);
}

/* —— 6. 首页 Hero —— */
.agent-hero {
  position: relative;
  overflow: hidden;
  background: var(--agent-gradient-soft);
  padding: clamp(3rem, 8vw, 5rem) 0 clamp(3.5rem, 9vw, 5.5rem);
}

.agent-hero::before {
  content: '';
  position: absolute;
  width: min(520px, 90vw);
  height: min(520px, 90vw);
  top: -180px;
  right: -120px;
  background: radial-gradient(circle, rgb(var(--agent-primary-rgb) / 16%) 0%, transparent 68%);
  pointer-events: none;
}

.agent-hero__visual {
  position: relative;
  min-height: 280px;
  border-radius: var(--agent-radius-lg);
  background: var(--agent-gradient);
  box-shadow: var(--agent-shadow);
  overflow: hidden;
}

.agent-hero__visual-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(255 255 255 / 6%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 6%) 1px, transparent 1px);
  background-size: 28px 28px;
}

.agent-hero__node {
  position: absolute;
  padding: 0.65rem 1rem;
  background: rgb(255 255 255 / 14%);
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: var(--agent-radius-sm);
  color: #fff;
  font-size: var(--agent-text-sm);
  font-weight: var(--agent-weight-medium);
  backdrop-filter: blur(6px);
}

.agent-hero__node--1 { top: 18%; left: 12%; }
.agent-hero__node--2 { top: 42%; right: 14%; }
.agent-hero__node--3 { bottom: 22%; left: 22%; }
/* 首页案例轮播：客户端挂载前占位，减轻布局跳动 */
.home-case-carousel-wrap {
  min-height: 12rem;
}

@media (min-width: 992px) {
  .home-case-carousel-wrap {
    min-height: 14rem;
  }
}

.agent-hero__node--center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1.25rem 1.5rem;
  background: rgb(255 255 255 / 20%);
  font-size: var(--agent-text-base);
  font-weight: var(--agent-weight-bold);
}

/* —— 7. 数据 / 工具 / 场景 —— */
.agent-stat-card {
  border: 1px solid rgb(var(--agent-primary-rgb) / 12%);
  border-radius: var(--agent-radius);
  background: var(--agent-surface-elevated);
}

.agent-stat-card__value {
  font-size: var(--agent-text-3xl);
  font-weight: var(--agent-weight-bold);
  color: var(--agent-primary);
  line-height: 1.1;
}

.agent-tool-badge {
  font-size: var(--agent-text-sm);
  font-weight: var(--agent-weight-semibold);
  padding: 0.45rem 0.95rem;
  border-radius: var(--agent-radius-pill);
  background: var(--agent-surface-elevated);
  border: 1px solid rgb(var(--agent-primary-rgb) / 15%);
  color: var(--agent-ink-soft);
  box-shadow: var(--agent-shadow-sm);
}

.agent-tool-badge--accent {
  border-color: var(--agent-primary);
  color: var(--agent-primary);
}

.agent-pain-card {
  border-radius: var(--agent-radius);
  border: 1px solid var(--agent-border) !important;
}

.agent-pain-card__icon {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--agent-radius-sm);
  background: linear-gradient(135deg, rgb(var(--agent-primary-rgb) / 12%), rgb(var(--agent-accent-rgb) / 12%));
  color: var(--agent-primary);
  font-size: 1.25rem;
}

.agent-pain-card--cta {
  background: linear-gradient(145deg, rgb(var(--agent-primary-rgb) / 8%), rgb(var(--agent-accent-rgb) / 10%)) !important;
  border-color: transparent !important;
}

.agent-service-card-wrap {
  position: relative;
  border-radius: var(--agent-radius);
}

.agent-service-card--highlight {
  border: 2px solid var(--agent-primary) !important;
  box-shadow: var(--agent-shadow);
}

.agent-service-card--highlight::before {
  content: '推荐';
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: var(--agent-text-xs);
  font-weight: var(--agent-weight-bold);
  padding: 0.2rem 0.55rem;
  border-radius: var(--agent-radius-pill);
  background: var(--agent-gradient);
  color: #fff;
  z-index: 1;
}

/* —— 8. 流程 / 特性 / 成效 —— */
.agent-timeline__item {
  flex: 1;
  position: relative;
  padding: var(--agent-space-4);
  border-radius: var(--agent-radius);
  background: var(--agent-surface-elevated);
  border: 1px solid var(--agent-border);
  height: 100%;
}

.agent-timeline__num {
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--agent-gradient);
  color: #fff;
  font-size: var(--agent-text-xs);
  font-weight: var(--agent-weight-bold);
  margin-bottom: var(--agent-space-2);
}

.agent-feature-item {
  display: flex;
  align-items: flex-start;
  gap: var(--agent-space-2);
  padding: var(--agent-space-3);
  border-radius: var(--agent-radius-sm);
  background: var(--agent-surface-elevated);
  border: 1px solid var(--agent-border);
  height: 100%;
  font-size: var(--agent-text-sm);
  line-height: var(--agent-leading-normal);
}

.agent-feature-item .bi {
  color: var(--agent-accent);
  margin-top: 0.1rem;
}

.agent-outcome-pill {
  padding: var(--agent-space-3);
  border-radius: var(--agent-radius-sm);
  background: rgb(var(--agent-primary-rgb) / 6%);
  text-align: center;
  height: 100%;
  font-size: var(--agent-text-sm);
  font-weight: var(--agent-weight-semibold);
  color: var(--agent-ink-soft);
}

.agent-deliverable-list .agent-timeline__num {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.65rem;
  margin-bottom: 0;
}

/* —— 9. 案例 —— */
.agent-case-quote {
  border-left: 3px solid var(--agent-primary);
  padding-left: var(--agent-space-4);
}

.agent-case-quote--filled {
  background: rgb(var(--agent-primary-rgb) / 5%);
  border-left-width: 4px;
  padding: var(--agent-space-5);
  border-radius: var(--agent-radius);
}

.agent-case-card__metric {
  font-size: var(--agent-text-lg);
  font-weight: var(--agent-weight-bold);
  background: var(--agent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* —— 10. 子页 Banner —— */
.site-page-banner--agent {
  background: var(--agent-gradient) !important;
  position: relative;
  overflow: hidden;
  min-height: 10rem;
}

.site-page-banner--agent::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 80%, rgb(255 255 255 / 12%) 0%, transparent 45%),
    radial-gradient(circle at 80% 20%, rgb(var(--agent-accent-rgb) / 28%) 0%, transparent 40%);
  pointer-events: none;
}

.site-page-banner--agent .container {
  position: relative;
  z-index: 1;
}

.site-page-banner--agent h1 {
  font-size: clamp(1.5rem, 3vw + 0.5rem, 2rem);
  font-weight: var(--agent-weight-bold);
  letter-spacing: -0.02em;
  line-height: var(--agent-leading-tight);
}

.site-page-banner--agent .site-page-banner__subtitle {
  font-size: var(--agent-text-base);
  line-height: var(--agent-leading-normal);
  max-width: 40rem;
}

.site-page-banner--agent .breadcrumb {
  font-size: var(--agent-text-sm);
}

/* —— 11. 转化 / 表单 / 侧栏 —— */
.agent-cta-band {
  background: var(--agent-gradient);
}

.agent-convert-tabs .nav-link {
  color: rgb(255 255 255 / 78%);
  border: none;
  border-radius: var(--agent-radius-pill);
  padding: 0.5rem 1.1rem;
  font-size: var(--agent-text-sm);
  font-weight: var(--agent-weight-medium);
}

.agent-convert-tabs .nav-link.active {
  background: #fff;
  color: var(--agent-primary);
  font-weight: var(--agent-weight-semibold);
  box-shadow: var(--agent-shadow-sm);
}

.agent-sidebar-card {
  border-radius: var(--agent-radius-lg);
  border: 1px solid rgb(var(--agent-primary-rgb) / 12%);
  box-shadow: var(--agent-shadow);
  background: var(--agent-surface-elevated);
}

.agent-lead-form .form-label {
  font-size: var(--agent-text-sm);
  font-weight: var(--agent-weight-medium);
  color: var(--agent-ink-soft);
}

.agent-lead-form .form-control {
  border-radius: var(--agent-radius-sm);
  border-color: var(--agent-border-strong);
  font-size: var(--agent-text-sm);
}

.agent-lead-form .form-control:focus {
  border-color: var(--agent-primary);
  box-shadow: 0 0 0 0.2rem rgb(var(--agent-primary-rgb) / 15%);
}

.agent-contact-tile {
  display: flex;
  gap: var(--agent-space-3);
  padding: var(--agent-space-4);
  border-radius: var(--agent-radius-sm);
  background: var(--agent-surface-elevated);
  border: 1px solid var(--agent-border);
}

.agent-contact-tile__icon {
  font-size: 1.5rem;
  color: var(--agent-primary);
  line-height: 1;
}

.agent-contact-tile__label {
  font-size: var(--agent-text-sm);
  color: var(--agent-muted);
}

.agent-contact-tile__value {
  font-weight: var(--agent-weight-semibold);
  color: var(--agent-ink);
}

/* —— 12. 资源 / 筛选 / 表格 —— */
.agent-whitepaper {
  border-radius: var(--agent-radius-lg);
  background: linear-gradient(120deg, rgb(var(--agent-primary-rgb) / 8%) 0%, rgb(var(--agent-accent-rgb) / 8%) 100%);
  border: 1px solid rgb(var(--agent-primary-rgb) / 15%);
}

.agent-resource-card {
  border-radius: var(--agent-radius);
  overflow: hidden;
  border: 1px solid var(--agent-border) !important;
}

.agent-resource-card__bar {
  height: 4px;
  background: var(--agent-gradient);
}

.agent-resource-video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--agent-radius);
  box-shadow: var(--agent-shadow);
}

.agent-resource-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.agent-filter-pills .nav-link {
  color: var(--agent-muted);
  font-weight: var(--agent-weight-medium);
  font-size: var(--agent-text-sm);
  padding: 0.4rem 1rem;
  border-radius: var(--agent-radius-pill);
}

.agent-filter-pills .nav-link.active {
  background: var(--agent-gradient);
  color: #fff;
}

.agent-table thead {
  background: rgb(var(--agent-primary-rgb) / 6%);
  font-size: var(--agent-text-sm);
}

.agent-table .agent-table__price {
  font-weight: var(--agent-weight-bold);
  color: var(--agent-primary);
}

/* —— 13. FAQ / 团队 / 页脚 / 悬浮 —— */
.agent-faq .accordion-button {
  font-size: var(--agent-text-sm);
  color: var(--agent-ink);
  background: var(--agent-surface-elevated);
}

.agent-faq .accordion-button:not(.collapsed) {
  color: var(--agent-primary);
  background: var(--agent-primary-soft);
  box-shadow: none;
}

.agent-faq .accordion-body {
  font-size: var(--agent-text-sm);
  line-height: var(--agent-leading-relaxed);
  color: var(--agent-muted);
}

.agent-team-card img {
  border: 3px solid #fff;
  box-shadow: var(--agent-shadow-sm);
}

.agent-wechat-block {
  max-width: 12rem;
}

.agent-wechat-block .bi-wechat {
  line-height: 1;
}

.agent-partner-pill {
  padding: 0.65rem 1.25rem;
  border-radius: var(--agent-radius-sm);
  background: var(--agent-surface-elevated);
  border: 1px dashed rgb(var(--agent-primary-rgb) / 25%);
  color: var(--agent-muted);
  font-weight: var(--agent-weight-medium);
  font-size: var(--agent-text-sm);
}

.agent-float-consult__btn {
  background: var(--agent-gradient) !important;
  border: none;
  box-shadow: var(--agent-shadow);
}

.agent-trust-strip {
  font-size: var(--agent-text-sm);
  color: var(--agent-muted);
  gap: var(--agent-space-4) !important;
}

.agent-trust-strip i {
  color: var(--agent-accent);
}

.footer-site {
  font-size: var(--agent-text-sm);
  background: var(--agent-ink);
  color: rgb(255 255 255 / 78%);
}

.footer-site__wechat {
  background: rgb(255 255 255 / 8%);
  max-width: 12rem;
}

.agent-strip-cta {
  background: var(--agent-surface);
  border-top: 1px solid var(--agent-border);
}

.agent-strip-cta__text {
  color: var(--agent-muted);
  margin-bottom: var(--agent-space-4);
  font-size: var(--agent-text-base);
}

.agent-brand-panel {
  padding: var(--agent-space-6);
  border-radius: var(--agent-radius-lg);
  background: var(--agent-gradient);
  color: #fff;
}

.agent-brand-panel__name {
  font-size: var(--agent-text-2xl);
  font-weight: var(--agent-weight-bold);
  margin-bottom: var(--agent-space-2);
}

.agent-brand-panel__tagline {
  font-size: var(--agent-text-lg);
  font-weight: var(--agent-weight-semibold);
  opacity: 0.92;
  margin-bottom: var(--agent-space-2);
}

.agent-scene-list .bi {
  color: var(--agent-accent);
}

/* —— 14. 定价卡（SaaS） —— */
.agent-plan-card {
  position: relative;
  border-radius: var(--agent-radius);
  height: 100%;
}

.agent-plan-card--highlight {
  border: 2px solid var(--agent-primary) !important;
  box-shadow: var(--agent-shadow);
}

.agent-plan-price {
  font-size: var(--agent-text-2xl);
  font-weight: var(--agent-weight-bold);
  color: var(--agent-primary);
}

/* —— 15. 响应式微调 —— */
@media (max-width: 991.98px) {
  .agent-page-layout .agent-page-sidebar {
    position: static;
  }

  .agent-section-head {
    text-align: center;
  }

  .agent-section-head .agent-max-prose {
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .agent-card-hover {
    transition: none;
  }

  .agent-card-hover:hover {
    transform: none;
  }
}