/* 基础重置 */
* {margin:0; padding:0; box-sizing:border-box; font-family:"Microsoft YaHei",Arial,sans-serif;}
body {background:#f5f5f5; color:#333; line-height:1.6;}
a {text-decoration:none; color:inherit;}

/* Header */
header {display:flex; justify-content:space-between; align-items:center; padding:1rem 2rem; background:linear-gradient(90deg,#1e3c72,#2a5298); color:white; flex-wrap:wrap;}
header .logo {display:flex; align-items:center;}
header .logo svg {width:40px; height:40px; margin-right:0.5rem;}
header nav a {margin-left:1.5rem; font-weight:bold; transition:color 0.3s;}
header nav a:hover {color:#ffd700;}

/* Hero */
.hero {display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:4rem 1rem; background:#1e3c72; color:white;}
.hero h1 {font-size:2.5rem; margin-bottom:1rem;}
.hero p {font-size:1.2rem; max-width:600px; margin-bottom:2rem;}
.hero button {padding:0.8rem 2rem; font-size:1rem; border:none; border-radius:30px; background-color:#ffd700; color:#1e3c72; cursor:pointer; transition:transform 0.3s;}
.hero button:hover {transform:scale(1.05);}

/* 房源展示 */
.listings {padding:4rem 1rem; background:#eef2f7; text-align:center;}
.listings h2 {margin-bottom:2rem; color:#1e3c72;}
.listing-grid {display:flex; flex-wrap:wrap; justify-content:center; gap:1rem;}

/* 特色服务 */
.features {display:flex; flex-wrap:wrap; justify-content:center; padding:4rem 1rem; background:white; gap:1rem;}
.feature-card {background:#f0f4f8; border-radius:15px; padding:2rem; width:280px; text-align:center; transition:transform 0.3s, box-shadow 0.3s;}
.feature-card:hover {transform:translateY(-10px); box-shadow:0 10px 25px rgba(0,0,0,0.15);}
.feature-card h3 {margin-bottom:1rem; color:#1e3c72;}
.feature-card p {color:#555;}

/* 购房流程 */
.process {background:#eef2f7; padding:4rem 1rem; text-align:center;}
.process h2 {margin-bottom:2rem; color:#1e3c72;}
.steps {display:flex; flex-wrap:wrap; justify-content:center; gap:2rem;}
.step {background:white; border-radius:15px; padding:2rem; width:180px; text-align:center; box-shadow:0 5px 15px rgba(0,0,0,0.1);}
.step h4 {margin-top:1rem; color:#1e3c72;}

/* 客户案例 */
.clients {background:white; padding:4rem 1rem; text-align:center;}
.clients h2 {margin-bottom:2rem; color:#1e3c72;}
.client-numbers {display:flex; justify-content:center; gap:3rem; font-size:1.5rem; color:#1e3c72;}

/* Footer */
footer {background:#1e3c72; color:white; text-align:center; padding:2rem 1rem; font-size:0.9rem;}
footer a {color:#ffd700; margin:0 0.3rem;}

/* 专业判断体系模块 */
.knowledge-hub {
    background: #ffffff;
    padding: 4rem 1rem;
    text-align: center;
}

.knowledge-hub h2 {
    color: #1e3c72;
    margin-bottom: 0.5rem;
}

.hub-desc {
    max-width: 760px;
    margin: 0 auto 2.5rem;
    color: #555;
    font-size: 1rem;
}

.hub-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
}

.hub-card {
    background: #f0f4f8;
    width: 260px;
    padding: 1.8rem 1.5rem;
    border-radius: 18px;
    text-align: left;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    transition: transform 0.3s, box-shadow 0.3s;
}

.hub-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.15);
}

.hub-card h3 {
    color: #1e3c72;
    margin-bottom: 0.6rem;
    font-size: 1.1rem;
}

.hub-card p {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 1rem;
}

.hub-link {
    font-size: 0.85rem;
    font-weight: bold;
    color: #1e3c72;
}

.hub-tag {
    display: inline-block;
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    background: #1e3c72;
    color: #fff;
    margin-bottom: 0.6rem;
}


/* 响应式 */
@media (max-width:768px){
    header{flex-direction:column;}
    header nav a{margin-left:0;margin-top:0.5rem;}
    .features, .steps, .listing-grid{flex-direction:column;align-items:center;}
    .feature-card,.step,.listing-item{width:90%;}
}




.client-card {
    position: relative;
    background:white;
    border-radius:15px;
    width:300px;
    box-shadow:0 5px 15px rgba(0,0,0,0.1);
    padding:1rem;
    text-align:left;
    transition:transform 0.3s;
}
.client-card:hover { transform: translateY(-5px); }
.client-card h4 { color:#1e3c72; margin-bottom:0.5rem; text-align: center;}
.client-card p { font-size:0.85rem; color:#555; margin-bottom:0.5rem; }
.client-card .tip {
    font-size:0.8rem;
    color:#e74c3c;
    font-weight:bold;
}
.case-number {
    position: absolute;
    top:10px;
    left:10px;
    width:28px;
    height:28px;
    background:#1e3c72;
    color:white;
    font-weight:bold;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.9rem;
}

.step {
    position: relative;
    background:white;
    border-radius:15px;
    padding:2rem 1rem 1rem 1rem;
    width:250px;
    text-align:center;
    box-shadow:0 5px 15px rgba(0,0,0,0.1);
}
.step-number {
    position: absolute;
    top:10px;
    left:10px;
    width:30px;
    height:30px;
    background:#1e3c72;
    color:white;
    font-weight:bold;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1rem;
}
.step h4 {
    margin-top:1rem;
    color:#1e3c72;
}
.step p {
    font-size:0.85rem;
    color:#555;
    margin-top:0.5rem;
}



.listing-item {
    background:white;
    border-radius:15px;
    width:260px;
    box-shadow:0 5px 15px rgba(0,0,0,0.1);
    padding:1rem;
    text-align:center;
}
.listing-item svg { width:100%; height:160px; margin-bottom:0.5rem; }
.info h4 { color:#1e3c72; margin-bottom:0.3rem; }
.info p { font-size:0.85rem; color:#555; margin-bottom:0.3rem; }
.tags {
    display:inline-block;
    padding:2px 6px;
    font-size:0.75rem;
    border-radius:5px;
    margin-right:5px;
    color:white;
}
.tag-hot { background:#e74c3c; }
.tag-invest { background:#27ae60; }
.tag-live { background:#3498db; }
.room-label { font-size:8px; fill:#1e3c72; text-anchor:middle; }


/* 房贷知识导航 */
.loan-knowledge-nav h2 {
    color: #1e3c72;
}
.loan-link-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}
.loan-link-item {
    background: #f0f4f8;
    padding: 0.6rem 1rem;
    border-radius: 20px;
    color: #1e3c72;
    font-size: 0.9rem;
    transition: 0.3s;
}
.loan-link-item:hover {
    background: #1e3c72;
    color: #fff;
    transform: translateY(-3px);
}
@media (max-width:768px){
    .loan-link-item {
        width: 90%;
    }
}