/* ============================================
   晶禄利华 v4 — 暖色系 · 服务行业 · 有温度
   ============================================ */
:root {
  --jll-bg:        #F9F4EC;
  --jll-bg-warm:   #F3ECE2;
  --jll-card:      #FFFFFF;
  --jll-card-hover:#FDF9F4;
  --jll-accent:    #C4885A;
  --jll-accent-light:#D9A67A;
  --jll-accent-dim: rgba(196,136,90,.1);
  --jll-text:      #2C2418;
  --jll-text-light:#6B6054;
  --jll-muted:     #9C9186;
  --jll-border:    #E8DFD4;
  --jll-border-warm:rgba(196,136,90,.2);
  --jll-shadow:    0 2px 12px rgba(44,36,24,.06);

  --fs-display: clamp(2rem,5vw,3.2rem);
  --fs-h1: 1.7rem; --fs-h2:1.35rem; --fs-h3:1.1rem;
  --fs-body:1rem; --fs-sm:.875rem; --fs-xs:.75rem;

  --space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-6:1.5rem;
  --space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;
  --space-20:5rem;--space-24:6rem;

  --max-width:72rem;--pad:var(--space-6);
  --radius:6px;
}

@media(min-width:769px) and (max-width:1024px){
  :root{--pad:var(--space-5)}
  .hero{min-height:520px;padding:var(--space-16) var(--pad)}
  .hero h1{font-size:2.5rem}
  .hero-content p{max-width:24rem}
  .section{padding:var(--space-16) 0}
  .features-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-4)}
  .spaces-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-4)}
  .space-card-img{height:180px}
  .stats{grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
  .container{padding:0 var(--pad)}
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-font-smoothing:antialiased;scroll-behavior:smooth;background:var(--jll-bg)}
body{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:var(--fs-body);line-height:1.8;color:var(--jll-text);
  background:var(--jll-bg);
}

h1,h2,h3{line-height:1.3;color:var(--jll-text);font-weight:500}
h1{font-size:var(--fs-display);letter-spacing:-.01em}
h2{font-size:var(--fs-h1)}
h3{font-size:var(--fs-h2)}
p{color:var(--jll-text-light);max-width:42rem}
a{color:var(--jll-accent);text-decoration:none;transition:color .25s}
a:hover{color:var(--jll-accent-light)}

.container{max-width:var(--max-width);margin:0 auto;padding:0 var(--pad)}
.section{padding:var(--space-24) 0}
.section-warm{background:var(--jll-bg-warm)}
.section-white{background:var(--jll-card)}

/* Nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;
  background:rgba(249,244,236,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--jll-border);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;
  max-width:var(--max-width);margin:0 auto;padding:var(--space-3) var(--pad);height:3.8rem}
.nav-logo{font-size:1.2rem;font-weight:600;color:var(--jll-accent);letter-spacing:.04em}
.nav-links{display:flex;gap:var(--space-8);list-style:none}
.nav-links a{font-size:var(--fs-sm);color:var(--jll-text-light);font-weight:400}
.nav-links a:hover{color:var(--jll-accent)}

/* Hero */
.hero{
  position:relative;min-height:620px;
  background:url('../img/background-top3.jpg') center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;
}
.hero::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(249,244,236,.35) 0%,rgba(249,244,236,.7) 50%,var(--jll-bg) 90%);
}

.hero-content{position:relative;z-index:2;
  text-align:center;padding:0 var(--space-6);max-width:36rem;padding:var(--space-24) var(--space-6)}
.hero-tag{display:inline-flex;align-items:center;gap:var(--space-2);
  font-size:var(--fs-xs);color:#A06D3E;font-weight:700;letter-spacing:.08em;
  margin-bottom:var(--space-4)}
.hero-tag::before{content:'';width:20px;height:1px;background:var(--jll-accent)}
.hero-content h1{font-size:var(--fs-display);margin-bottom:var(--space-3);font-weight:700;color:#1A1410}
.hero-content h1 span{color:#A06D3E}
.hero-content p{font-size:1.05rem;max-width:28rem;margin:0 auto var(--space-6);font-weight:500;color:#3D3024}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:var(--space-2);
  font-size:var(--fs-sm);font-weight:500;padding:.85rem 2rem;cursor:pointer;
  text-decoration:none;transition:all .3s;letter-spacing:.03em}
.btn-primary{background:var(--jll-accent);color:#FFFFFF;border:none}
.btn-primary:hover{background:var(--jll-accent-light);box-shadow:0 4px 16px rgba(196,136,90,.25);transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--jll-accent);border:1px solid var(--jll-accent)}
.btn-outline:hover{background:rgba(196,136,90,.06);transform:translateY(-1px)}
.btn-group{display:flex;gap:var(--space-3);justify-content:center}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));
  gap:var(--space-6);text-align:center}
.stat-number{font-size:var(--fs-display);font-weight:600;color:var(--jll-accent);
  line-height:1;margin-bottom:var(--space-2)}
.stat-label{font-size:var(--fs-sm);color:var(--jll-text-light)}

/* Section Title */
.section-title{text-align:center;margin-bottom:var(--space-12)}
.section-title h2{margin-bottom:var(--space-2)}
.section-title p{font-size:var(--fs-sm);max-width:26rem;margin:0 auto}
.section-title .ornament{display:flex;align-items:center;justify-content:center;
  gap:var(--space-3);margin-top:var(--space-3)}
.section-title .ornament .line{width:30px;height:1px;background:var(--jll-border)}
.section-title .ornament .diamond{width:5px;height:5px;transform:rotate(45deg);background:var(--jll-accent)}

/* Feature Cards */
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
.feature-card{background:var(--jll-card);border:1px solid var(--jll-border);
  padding:var(--space-8) var(--space-6);box-shadow:var(--jll-shadow);
  transition:all .3s;text-align:center}
.feature-card:hover{border-color:var(--jll-border-warm);transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(44,36,24,.1)}
.feature-card .icon{margin-bottom:var(--space-4);display:flex;justify-content:center}
.feature-card h3{font-size:var(--fs-h3);margin-bottom:var(--space-2);color:var(--jll-text)}
.feature-card p{font-size:var(--fs-sm)}

/* Spaces Grid */
.spaces-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6)}
.space-card{background:var(--jll-card);border:1px solid var(--jll-border);
  overflow:hidden;box-shadow:var(--jll-shadow);transition:all .3s}
.space-card:hover{border-color:var(--jll-border-warm);transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(44,36,24,.1)}
.space-card-img{height:200px;overflow:hidden}
.space-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.space-card:hover .space-card-img img{transform:scale(1.03)}
.space-card-body{padding:var(--space-6)}
.space-card-body h3{margin-bottom:var(--space-2);font-weight:500}
.space-card-body p{font-size:var(--fs-sm)}
.space-card-body .tag{display:inline-block;background:var(--jll-accent-dim);
  color:var(--jll-accent);font-size:var(--fs-xs);padding:.2rem .7rem;
  font-weight:500;margin-top:var(--space-3)}

/* About */
.about-highlight{max-width:42rem;margin:var(--space-8) auto;padding:var(--space-8);
  background:var(--jll-bg-warm);border-left:3px solid var(--jll-accent)}
.about-highlight p{font-size:1.1rem;color:var(--jll-text);font-weight:400;line-height:1.8}
.about-highlight strong{color:var(--jll-accent)}

/* CTA */
.cta{text-align:center;padding:var(--space-20) 0}
.cta h2{margin-bottom:var(--space-3)}
.cta p{margin:0 auto var(--space-6);font-size:var(--fs-sm)}
.cta .contact-info{margin-top:var(--space-6);font-size:var(--fs-sm);color:var(--jll-text-light)}
.cta .contact-info span{color:var(--jll-accent);font-weight:600}
.cta .phone{font-size:1.5rem;color:var(--jll-accent);font-weight:600;margin:var(--space-4) 0}
.cta .phone a{color:var(--jll-accent)}

/* Footer */
.footer{border-top:1px solid var(--jll-border);padding:var(--space-10) 0;
  font-size:var(--fs-xs);color:var(--jll-muted)}
.footer-inner{display:flex;justify-content:center;align-items:center;gap:var(--space-4)}

@media(max-width:768px){  .nav-inner{height:auto;padding:.3rem var(--pad)}  .nav-logo{font-size:.95rem}  .nav-links{gap:.35rem}  .nav-links a{font-size:.62rem;white-space:nowrap}  :root{--pad:var(--space-4)}  .hero{min-height:460px;padding:var(--space-16) var(--pad)}  .hero h1{font-size:2rem}  .hero-mid{flex-direction:column;text-align:center}  .section{padding:var(--space-12) 0}  .features-grid{grid-template-columns:1fr}  .stats{grid-template-columns:repeat(2,1fr);gap:var(--space-4)}  .spaces-grid{grid-template-columns:1fr;gap:var(--space-6)}.space-card-img{height:200px}  .space-card-img{height:140px}  .services-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-3)}  .footer-inner{flex-direction:column;text-align:center;gap:var(--space-2)}  .container{padding:0 var(--pad)}  .btn{white-space:nowrap!important;padding:.4rem .8rem!important;font-size:.75rem!important;flex-shrink:0!important;width:auto!important;min-width:0!important;display:inline-flex!important}.btn-group{flex-wrap:nowrap!important;gap:.4rem!important}}
  :root{--pad:var(--space-4)}

/* Footer bottom */
.footer-ben{background:var(--jll-bg-warm);padding:var(--space-4) 0 var(--space-6);font-size:var(--fs-xs);color:var(--jll-muted);text-align:center}
.footer-ben a{color:var(--jll-accent);text-decoration:none}
.footer-ben a:hover{color:var(--jll-accent-light)}
.footer-links{display:flex;gap:var(--space-4);list-style:none}
.footer-links a{color:var(--jll-text-light);font-size:var(--fs-xs)}
.footer-links a:hover{color:var(--jll-accent)}

/* News List */
.news-list{}
.news-item{display:flex;align-items:flex-start;gap:var(--space-6);padding:var(--space-4) 0;border-bottom:1px solid var(--jll-border)}
.news-item:last-child{border-bottom:none}
.news-date{flex-shrink:0;width:5rem;font-size:var(--fs-sm);font-weight:700;color:var(--jll-accent);padding-top:0;letter-spacing:.02em}
.news-body strong{display:block;font-size:1rem;font-weight:500;color:var(--jll-text);margin-bottom:var(--space-2)}
.news-body p{font-size:var(--fs-sm);color:var(--jll-text-light);margin:0;line-height:1.7}
.news-item:hover .news-body strong{color:var(--jll-accent)}