/* Page specific styles for 买企业能量 */
.buy-energy-page { padding: 24px 0 60px; }
.buy-energy-page .hero { display: flex; gap: 24px; padding: 28px; align-items: center; }
.buy-energy-page .hero-left { flex: 1; }
.buy-energy-page .hero-right { width: 420px; display:flex; justify-content:center; }
.hero h1 { font-size: 28px; color: #0B3558; margin-bottom: 8px; }
.lead { color: #4B5563; margin: 10px 0 18px; font-size: 15px; }
.hero-features { display:flex; gap:12px; color:#3F4A57; margin-bottom:18px; }
.hero-features li { background: rgba(15,128,246,0.06); padding:6px 10px; border-radius:6px; font-size:13px; }
.hero-illustration { max-width: 100%; height: auto; }
.hero-actions .btn { padding:10px 18px; margin-right:10px; border-radius:6px; cursor:pointer; }
.btn-primary { background:#0F80F6; color:#fff; border: none; }
.btn-outline { border:1px solid #d6dce3; color:#2d3942; background:#fff; padding:8px 14px; border-radius:6px; }

.status { display:flex; justify-content:space-between; align-items:center; padding:18px; margin-top:18px; gap:18px; }
.energy-meter { display:flex; flex-direction:column; gap:8px; }
.energy-value { font-size:22px; font-weight:bold; color:#0F80F6; }
.energy-meta { color:#6b7280; font-size:13px; }
.status-right { text-align:right; }
.status-note { color:#6b7280; font-size:13px; margin-top:8px; }

.packages { margin-top:22px; }
.section-title { font-size:20px; margin-bottom:12px; color:#0B3558; }
.package-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.package-card { background:#fff; border:1px solid #e6eef6; border-radius:8px; padding:14px; text-align:center; transition: all 0.3s ease; cursor: pointer; }
.package-card:hover { 
  transform: translateY(-6px); 
  box-shadow: 0 12px 24px rgba(15,128,246,0.15); 
  border-color: #0F80F6; 
}
.package-card.popular { border:1px solid #0F80F6; box-shadow: 0 6px 18px rgba(15,128,246,0.08); }
.package-card.popular:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0,214,61,0.18);
  border-color: #00D63D;
}
.package-card img { width:100%; height:120px; object-fit:cover; border-radius:6px; background:#f5f7fb; }
.package-card h4 { margin-top:10px; font-size:16px; color:#0B3558; }
.price { color:#0F80F6; font-weight:bold; margin:8px 0; }
.features { color:#6b7280; font-size:13px; margin:10px 0; }
.btn-select { background:#f3f6f9; border:1px solid #e2e8f0; padding:8px 12px; border-radius:6px; cursor:pointer; transition: all 0.2s ease; }
.btn-select:hover { background:#0F80F6; color:#fff; border-color:#0F80F6; }

.how { margin-top:22px; padding:18px; }
.how-grid { display:flex; gap:18px; }
.how-step { flex:1; text-align:center; padding:12px; }
.how-step img { width:80px; height:80px; margin:0 auto 8px; }
.notes { margin-top:18px; color:#6b7280; font-size:13px; }

/* FAQ Section */
.faq { margin-top:22px; padding:18px; }
.faq-container { margin:0 auto; }
.faq-item { background:#fff; border:1px solid #e6eef6; border-radius:8px; margin-bottom:12px; overflow:hidden; }
.faq-header { display:flex; justify-content:space-between; align-items:center; padding:14px 18px; cursor:pointer; user-select:none; transition:all 0.3s ease; }
.faq-header:hover { background:#f5f7fb; }
.faq-header h3 { font-size:15px; color:#0B3558; margin:0; flex:1; }
.faq-icon { display:flex; align-items:center; justify-content:center; width:24px; height:24px; background:#0F80F6; color:#fff; border-radius:50%; font-size:16px; font-weight:bold; transition:transform 0.3s ease; }
.faq-item.active .faq-icon { transform:rotate(45deg); }
.faq-content { padding:0 18px; max-height:0; overflow:hidden; transition:all 0.3s ease; }
.faq-item.active .faq-content { padding:14px 18px; max-height:500px; }
.faq-content p { color:#6b7280; font-size:14px; line-height:1.6; margin:0; }

@media only screen and (max-width: 1100px) {
    .package-grid { grid-template-columns:repeat(2,1fr); }
    .hero-right { display:none; }
    .faq-container { max-width:100%; }
}

@media only screen and (max-width: 700px) {
    .package-grid { grid-template-columns:repeat(1,1fr); }
    .hero { flex-direction:column; }
    .status { flex-direction:column; text-align:left; }
    .faq-header h3 { font-size:14px; }
    .faq-content p { font-size:13px; }
}