:root { --gold: #c5a059; --dark: #1a1a1a; --light: #f9f9f9; --white: #ffffff; --grey: #777; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', Arial, sans-serif; color: #333; line-height: 1.6; overflow-x: hidden; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Navigation (保持统一) */
header { background: var(--white); border-bottom: 1px solid #eee; position: sticky; top: 0; z-index: 1000; }
nav { display: flex; justify-content: space-between; align-items: center; height: 70px; }
.logo { font-size: 22px; font-weight: 700; color: var(--gold); letter-spacing: 2px; }
.nav-links { display: flex; gap: 25px; list-style: none; }
.nav-links a { text-decoration: none; color: var(--dark); font-size: 14px; font-weight: 500; transition: 0.3s; }
.nav-links a:hover ,.nav-links a.active {color:var(--gold);}

/* Page Banner */
.page-banner { background: var(--light); padding: 50px 0; text-align: center; border-bottom: 1px solid #eee; }
.page-banner h1 { font-size: 32px; font-weight: 300; color: var(--dark); letter-spacing: 2px; }
.page-banner p { color: var(--grey); font-size: 14px; margin-top: 10px; }

/* Filter Section */
.results-filter { padding: 30px 0; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.filter-btn { padding: 8px 20px; border: 1px solid #ddd; background: none; cursor: pointer; font-size: 12px; letter-spacing: 1px; border-radius: 20px; transition: 0.3s; }
.filter-btn.active { background: var(--gold); color: white; border-color: var(--gold); }

/* Results Grid */
.results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 40px; padding-bottom: 80px; }

/* B&A Slider (同首页逻辑) */
.ba-card { background: #fff; }
.ba-wrapper { position: relative; width: 100%; aspect-ratio: 4/3; overflow: hidden; border-radius: 4px; box-shadow: 0 10px 25px rgba(0,0,0,0.05); cursor: ew-resize; }
.ba-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; }
.ba-before { z-index: 2; width: 50%; border-right: 2px solid white; }
.ba-after { z-index: 1; width: 100%; }
.ba-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 40px; margin-left: -20px; z-index: 3; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.ba-handle-circle { width: 34px; height: 34px; border: 2px solid white; border-radius: 50%; background: var(--gold); display: flex; align-items: center; justify-content: center; color: white; font-size: 12px; }

.ba-label { position: absolute; bottom: 15px; padding: 4px 10px; background: rgba(0,0,0,0.6); color: white; font-size: 10px; font-weight: bold; letter-spacing: 1px; z-index: 4; }
.label-before { left: 15px; }
.label-after { right: 15px; }

.case-meta { padding: 20px 0; border-bottom: 1px solid #eee; }
.case-meta h3 { font-size: 18px; color: var(--dark); font-weight: 500; margin-bottom: 5px; }
.case-meta p { font-size: 13px; color: var(--grey); }
.case-tags { margin-top: 10px; display: flex; gap: 8px; }
.tag-small { font-size: 10px; padding: 2px 8px; border: 1px solid #eee; color: #999; text-transform: uppercase; }

/* CTA Footer Section */
.results-cta { background: var(--grey); color: white; padding: 60px 0; text-align: center; }
.results-cta h2 { font-size: 28px; font-weight: 300; margin-bottom: 20px; }
.btn-gold { background: var(--gold); color: white; padding: 15px 35px; text-decoration: none; display: inline-block; font-weight: 600; transition: 0.3s; }
.btn-gold:hover { background: #b48d45; }
footer { background: var(--dark); color: white; padding: 60px 0; text-align: center; font-size: 13px; letter-spacing: 1px; }
.whatsapp-btn { position: fixed; bottom: 30px; right: 30px; background: #25d366; color: white; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; z-index: 1000; box-shadow: 0 5px 15px rgba(0,0,0,0.2); transition: 0.3s; }
.whatsapp-btn:hover { transform: scale(1.1); }
/* Responsive */
@media (max-width: 768px) {
    .results-grid { grid-template-columns: 1fr; gap: 30px; }
    .page-banner h1 { font-size: 26px; }
    .nav-links { position: fixed; top: 0; right: -100%; width: 250px; height: 100vh; background: var(--white); flex-direction: column; gap: 0; padding-top: 80px; transition: 0.4s ease; box-shadow: -5px 0 15px rgba(0,0,0,0.1); z-index: 999; }
    .nav-links.active { right: 0; }
    .nav-links li { width: 100%; border-bottom: 1px solid #eee; }
    .nav-links a { display: block; padding: 20px; font-size: 16px; color: var(--dark); }
    .nav-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0,0,0,0.5); display: none; z-index: 998; }
    .nav-overlay.active { display: block; }
}