/* ============================================================
   homepage.css - 首页专属样式
   仅在 index.html 加载，包含对比卡片、评价、定价等区块
   ============================================================ */

/* Hero with background image */
.hero {
  background: linear-gradient(135deg, rgba(0,82,155,.85) 0%, rgba(0,45,102,.9) 100%),
              url(../images/hero_repair_center.webp?v=3) center/cover no-repeat;
}
.hero h1, .hero h1 span { color: #fff; }
.hero p { color: rgba(255,255,255,.85); }
.hero-badge { background: rgba(255,255,255,.15); color: #fff; }
.hero-stat .num { color: #fff; }
.hero-stat .label { color: rgba(255,255,255,.7); }
.hero-stats { border-top-color: rgba(255,255,255,.2); }

/* Compare section */
.compare-section { background: var(--bg-section); }
.compare-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.compare-card { background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); transition: var(--transition); }
.compare-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.compare-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--border); }
.compare-img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.compare-label { padding: 4px 8px; font-size: .72rem; font-weight: 700; text-align: center; color: #fff; }
.label-before { background: #dc2626; }
.label-after { background: #16a34a; }
.compare-info { padding: 16px; }
.compare-info h4 { font-size: .95rem; font-weight: 700; margin-bottom: 6px; color: var(--text); }
.compare-info p { font-size: .82rem; color: var(--text-muted); line-height: 1.5; }

/* Trust section */
.trust-section { background: #fff; }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.trust-card { text-align: center; padding: 36px 24px; border-radius: var(--radius-lg); border: 2px solid var(--border); transition: var(--transition); position: relative; }
.trust-card:hover { border-color: var(--brand); }
.trust-icon { width: 64px; height: 64px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; background: var(--brand-bg); border-radius: 16px; }
.trust-icon svg { width: 32px; height: 32px; }
.trust-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; color: var(--text); }
.trust-card p { font-size: .88rem; color: var(--text-secondary); line-height: 1.6; }
.trust-badge { display: inline-block; padding: 4px 12px; background: var(--brand); color: #fff; border-radius: 12px; font-size: .75rem; font-weight: 600; margin-bottom: 12px; }

/* Testimonials */
.testimonials { background: var(--bg-section); }
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.testimonial-card { background: #fff; border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow); position: relative; }
.testimonial-card::before { content: '\201C'; font-size: 4rem; color: var(--brand-bg); position: absolute; top: 8px; left: 20px; font-family: Georgia, serif; line-height: 1; }
.testimonial-text { font-size: .9rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 20px; position: relative; z-index: 1; padding-top: 10px; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem; }
.testimonial-name { font-size: .9rem; font-weight: 700; color: var(--text); }
.testimonial-role { font-size: .78rem; color: var(--text-muted); }

/* Pricing */
.pricing-section { background: #fff; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pricing-card { border-radius: var(--radius-lg); border: 2px solid var(--border); padding: 32px 24px; text-align: center; transition: var(--transition); position: relative; }
.pricing-card.featured { border-color: var(--brand); box-shadow: 0 4px 24px rgba(0,82,155,.12); transform: scale(1.03); }
.pricing-card.featured::before { content: '推荐'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--brand); color: #fff; padding: 2px 16px; border-radius: 10px; font-size: .75rem; font-weight: 700; }
.pricing-card:hover { border-color: var(--brand); }
.pricing-type { font-size: 1.1rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.pricing-desc { font-size: .82rem; color: var(--text-muted); margin-bottom: 20px; }
.pricing-price { font-size: 2rem; font-weight: 800; color: var(--brand); margin-bottom: 4px; }
.pricing-unit { font-size: .85rem; color: var(--text-muted); margin-bottom: 20px; }
.pricing-features { text-align: left; margin-bottom: 24px; }
.pricing-features li { padding: 8px 0; font-size: .88rem; color: var(--text-secondary); border-bottom: 1px solid #f3f4f6; display: flex; align-items: center; gap: 8px; }
.pricing-features li::before { content: '✓'; color: #16a34a; font-weight: 700; }

/* Guarantee banner */
.guarantee-banner { background: linear-gradient(135deg, #dcfce7 0%, #f0fdf4 100%); border: 2px solid #bbf7d0; border-radius: var(--radius-lg); padding: 28px 36px; display: flex; align-items: center; gap: 24px; margin-top: 40px; }
.guarantee-icon { font-size: 3rem; flex-shrink: 0; }
.guarantee-text h3 { font-size: 1.15rem; font-weight: 700; color: #166534; margin-bottom: 6px; }
.guarantee-text p { font-size: .9rem; color: #15803d; line-height: 1.6; }

/* Scene row */
.scene-row { display: flex; gap: 24px; align-items: stretch; }
.scene-card { flex: 1; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); transition: var(--transition); }
.scene-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.scene-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.scene-card .scene-label { padding: 14px 18px; background: #fff; font-size: .9rem; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; }
.scene-card .scene-label::before { content: ''; width: 8px; height: 8px; background: var(--brand); border-radius: 50%; }

/* Responsive */
@media (max-width: 1024px) {
  .compare-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-grid { grid-template-columns: 1fr 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-card.featured { transform: none; }
}
@media (max-width: 768px) {
  .scene-row { flex-direction: column; }
}
@media (max-width: 640px) {
  .compare-grid { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .guarantee-banner { flex-direction: column; text-align: center; }
}