:root{
    --blue:#0a6fc2;
    --bg:#f5f7fb;
    --card:#ffffff;
    --muted:#6b7280;
}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,Arial,sans-serif;background:var(--bg);margin:0;color:#0b1220;line-height:1.45}
header{background:#fff;padding:18px 32px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 4px 18px rgba(11,17,32,0.06);position:sticky;top:0;z-index:50}
.logo-row{display:flex;align-items:center;gap:14px}
.logo svg{height:44px;width:auto}
nav a{margin-left:20px;color:var(--blue);text-decoration:none;font-weight:600}
.container{max-width:1100px;margin:0 auto;padding:32px}
.hero{padding:64px 0;text-align:left;display:flex;gap:32px;align-items:center}
.hero-left{flex:1}
.hero h1{font-size:2.4rem;margin:0;color:var(--blue)}
.hero p{margin:16px 0;color:var(--muted);font-size:1.05rem}
.cta-row{margin-top:18px}
.btn{display:inline-block;padding:12px 20px;border-radius:8px;font-weight:700;text-decoration:none}
.btn-primary{background:var(--blue);color:#fff}
.btn-outline{background:#fff;border:2px solid var(--blue);color:var(--blue)}
.hero-right{flex:0 0 420px;background:linear-gradient(180deg,#fff,#f8fbff);padding:22px;border-radius:12px;box-shadow:0 8px 28px rgba(11,17,32,0.06)}
.quick-list{list-style:none;padding:0;margin:0}
.quick-list li{padding:8px 0;border-bottom:1px dashed #eef4fb;color:var(--muted)}
section{padding:44px 0}
.three-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.card{background:var(--card);padding:20px;border-radius:12px;box-shadow:0 8px 20px rgba(11,17,32,0.04)}
.card h3{margin-top:0;color:var(--blue)}
.listings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.listing{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 8px 22px rgba(11,17,32,0.06);display:flex;flex-direction:column}
.listing img{width:100%;height:180px;object-fit:cover}
.listing .meta{padding:14px}
.listing .meta h4{margin:4px 0 8px}
.listing .meta p{margin:0;color:var(--muted);font-size:0.95rem}
form{background:#fff;padding:18px;border-radius:10px;box-shadow:0 6px 18px rgba(11,17,32,0.06)}
input, textarea, select{width:100%;padding:10px;border-radius:8px;border:1px solid #e6eef8;margin:10px 0;font-size:0.98rem}
footer{background:var(--blue);color:#fff;padding:28px;text-align:center}
@media(max-width:800px){
    .hero{flex-direction:column}
    .hero-right{order:2;width:100%}
}