/* ==================== AI产品页面 (product-ai.css) ==================== */
/* 依赖 base.css + pages.css · 仅页面独有组件 */

/* ==================== Architecture Cards ==================== */
.arch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; }
.arch-card {
  position: relative; padding: 2.5rem 2rem; border-radius: 14px;
  background: var(--white); border: 1px solid var(--gray-200);
  transition: all .3s cubic-bezier(.16,1,.3,1); overflow: hidden;
}
.arch-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; border-radius: 3px 3px 0 0; opacity: 0; transition: opacity .3s;
}
.arch-card:hover { transform: translateY(-4px); border-color: var(--primary); background: var(--white); box-shadow: 0 16px 48px rgba(214,0,15,.08), 0 4px 12px rgba(0,0,0,.04); }
.arch-card:hover::before { opacity: 1; }
.arch-card--l0::before { background: linear-gradient(90deg, #ef4444, #f97316); }
.arch-card--l1::before { background: linear-gradient(90deg, #d6000f, #e63946); }
.arch-card--l2::before { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
.arch-card__step {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  font-family: 'DM Sans', sans-serif; margin-bottom: 1rem;
}
.arch-card--l0 .arch-card__step { color: #f97316; }
.arch-card--l1 .arch-card__step { color: var(--primary); }
.arch-card--l2 .arch-card__step { color: #7c3aed; }
.arch-card__title { font-size: 1.2rem; font-weight: 700; color: var(--text-dark); margin-bottom: .75rem; }
.arch-card__desc { font-size: .88rem; color: var(--text-dark-soft); line-height: 1.75; margin-bottom: 1.5rem; }
.arch-card__tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.arch-card__tag {
  padding: .3rem .7rem; border-radius: 5px; font-size: .76rem; font-weight: 500;
  background: var(--gray-50); border: 1px solid var(--gray-200); color: var(--text-dark-soft);
}

/* ==================== Feature Sections ==================== */
.feat-section { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; margin-top: 4rem; }
.feat-section--reverse { direction: rtl; }
.feat-section--reverse > * { direction: ltr; }
.feat-section__content { text-align: left; }
.feat-section__badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .35rem .9rem; border-radius: 100px;
  font-size: .75rem; font-weight: 600; margin-bottom: 1.5rem;
}
.feat-section__badge--l0 { background: #fff7ed; color: #c2410c; }
.feat-section__badge--l1 { background: var(--primary-soft); color: var(--primary); }
.feat-section__badge--l2 { background: #f5f3ff; color: #7c3aed; }
.feat-section__title { font-size: 1.5rem; font-weight: 700; color: var(--text-dark); margin-bottom: 1rem; line-height: 1.35; }
.feat-section__text { font-size: .92rem; color: var(--text-dark-soft); line-height: 1.8; margin-bottom: 1.5rem; }
.feat-section__visual { text-align: center; }

/* Feature Visual Card */
.feat-visual-card {
  width: 100%; padding: 2rem; border-radius: 16px;
  background: var(--white); border: 1px solid var(--gray-200);
  box-shadow: 0 4px 24px rgba(214,0,15,.04);
}
.feat-visual-card__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--gray-100);
}
.feat-visual-card__title { font-size: .9rem; font-weight: 700; color: var(--text-dark); }
.feat-visual-card__badge { font-size: .7rem; font-weight: 600; padding: .25rem .6rem; border-radius: 4px; }
.feat-visual-card__badge--l0 { background: #fff7ed; color: #c2410c; }
.feat-visual-card__badge--l1 { background: var(--primary-soft); color: var(--primary); }
.feat-visual-card__rows { display: flex; flex-direction: column; gap: .6rem; }
.feat-visual-card__row {
  display: flex; align-items: center; gap: .75rem;
  padding: .65rem .8rem; border-radius: 8px;
  background: var(--gray-50); border: 1px solid var(--gray-100); font-size: .82rem;
}
.feat-visual-card__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.feat-visual-card__dot--green { background: #22c55e; }
.feat-visual-card__dot--yellow { background: #eab308; }
.feat-visual-card__dot--red { background: #ef4444; }
.feat-visual-card__dot--blue { background: #3b82f6; }
.feat-visual-card__label { color: var(--text-dark); font-weight: 500; }
.feat-visual-card__val { margin-left: auto; font-weight: 600; font-family: 'DM Sans', sans-serif; color: var(--text-dark); }

/* ==================== AI Cards (complex) ==================== */
.ai-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 3rem; }
.ai-card {
  padding: 2rem 1.75rem; border-radius: 14px; background: var(--white);
  border: 1px solid var(--gray-200); transition: all .3s cubic-bezier(.16,1,.3,1); text-align: left;
}
.ai-card:hover { border-color: rgba(214,0,15,.15); box-shadow: 0 8px 32px rgba(214,0,15,.08); transform: translateY(-4px); }
.ai-card__header { display: flex; align-items: flex-start; gap: .8rem; margin-bottom: 1.2rem; }
.ai-card__icon {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ai-card__icon--rose { background: #fef2f2; color: #e11d48; }
.ai-card__icon--cyan { background: #ecfeff; color: #0891b2; }
.ai-card__icon--amber { background: #fffbeb; color: #d97706; }
.ai-card__icon--blue { background: #eff6ff; color: #2563eb; }
.ai-card__icon--emerald { background: #ecfdf5; color: #059669; }
.ai-card__icon--purple { background: #f5f3ff; color: #7c3aed; }
.ai-card__meta { text-align: left; }
.ai-card__name { font-size: .95rem; font-weight: 700; color: var(--text-dark); margin-bottom: .2rem; }
.ai-card__role { font-size: .76rem; color: var(--text-dark-muted); }
.ai-card__feats { display: flex; flex-direction: column; gap: .5rem; }
.ai-card__feat { display: flex; align-items: flex-start; gap: .45rem; font-size: .82rem; color: var(--text-dark-soft); line-height: 1.6; }
.ai-card__feat::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--primary); flex-shrink: 0; margin-top: .55rem;
}

/* ==================== Diff Cards ==================== */
.diff-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-top: 3rem; }
.diff-card {
  padding: 2rem 1.75rem; border-radius: 12px;
  background: var(--white); border: 1px solid var(--gray-200); transition: all .25s;
}
.diff-card:hover { border-color: var(--primary); box-shadow: 0 8px 32px rgba(214,0,15,.06); transform: translateY(-3px); }
.diff-card__label {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; color: var(--primary);
  margin-bottom: .8rem; font-family: 'DM Sans', sans-serif;
}
.diff-card__title { font-size: 1.05rem; font-weight: 700; color: var(--text-dark); margin-bottom: .5rem; }
.diff-card__text { font-size: .85rem; color: var(--text-dark-soft); line-height: 1.75; }

/* ==================== Boundary ==================== */
.boundary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 3rem; }
.boundary-col__title {
  font-size: 1rem; font-weight: 700; margin-bottom: 1.2rem;
  display: flex; align-items: center; gap: .5rem;
}
.boundary-col__title--yes { color: #059669; }
.boundary-col__title--no { color: #dc2626; }
.boundary-list { display: flex; flex-direction: column; gap: .6rem; }
.boundary-item {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .75rem 1rem; border-radius: 8px; font-size: .85rem; line-height: 1.6;
}
.boundary-item--yes { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.boundary-item--no { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.boundary-item__icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: .1rem; }

/* ==================== Responsive ==================== */
@media (max-width: 1024px) {
  .arch-grid { grid-template-columns: 1fr; }
  .feat-section { grid-template-columns: 1fr; gap: 2.5rem; }
  .feat-section--reverse { direction: ltr; }
}
@media (max-width: 768px) {
  .ai-grid { grid-template-columns: 1fr; }
  .diff-grid { grid-template-columns: 1fr; }
  .boundary-grid { grid-template-columns: 1fr; }
}