/* 爱如·园 - 产品页样式 */

.grd-hero { background: linear-gradient(135deg, #10B981 0%, #34D399 100%); color: #fff; text-align: center; padding: 160px 0 100px; }
.grd-hero h1 { font-size: 48px; margin-bottom: 20px; }
.grd-hero p { font-size: 18px; opacity: 0.95; max-width: 720px; margin: 0 auto 36px; }
.grd-badge { display: inline-block; background: rgba(255,255,255,0.18); padding: 6px 14px; border-radius: 20px; font-size: 14px; margin-bottom: 20px; }
.grd-section { padding: 96px 0; }
.grd-section-alt { background: #F8FAFC; }
.grd-section h2 { font-size: 32px; font-weight: 700; margin-bottom: 16px; text-align: center; }
.grd-section .lead { text-align: center; color: #64748B; max-width: 680px; margin: 0 auto 56px; }
.grd-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grd-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grd-card { background: #fff; border: 1px solid #E2E8F0; border-radius: 16px; padding: 32px; }
.grd-card h4 { font-size: 18px; font-weight: 700; margin-bottom: 10px; color: #0F172A; }
.grd-card p { color: #64748B; font-size: 14px; line-height: 1.7; }
.grd-card .icon { width: 40px; height: 40px; background: linear-gradient(135deg, #10B981, #34D399); color: #fff; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.grd-card .icon svg { width: 22px; height: 22px; }
.grd-user-card { background: #fff; border-radius: 16px; padding: 28px; border-left: 4px solid #10B981; }
.grd-user-card h4 { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.grd-user-card p { color: #64748B; font-size: 14px; }
.grd-cta { background: linear-gradient(135deg, #10B981, #34D399); color: #fff; text-align: center; padding: 80px 0; }
.grd-cta h2 { color: #fff; margin-bottom: 16px; }
.grd-cta p { opacity: 0.95; margin-bottom: 28px; }
.grd-arch { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grd-arch-card { background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; padding: 22px; text-align: center; }
.grd-arch-card .lvl { width: 32px; height: 32px; background: linear-gradient(135deg, #10B981, #34D399); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; margin: 0 auto 12px; }
.grd-arch-card h5 { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.grd-arch-card p { font-size: 12px; color: #64748B; line-height: 1.6; }
@media (max-width: 768px) { .grd-grid-2, .grd-grid-3, .grd-arch { grid-template-columns: 1fr; } .grd-hero h1 { font-size: 34px; } }