/* CONTACT BANNER */
.contact-banner { position:relative; height:380px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.banner-bg { position:absolute; inset:0; }
.banner-img { width:100%; height:100%; object-fit:cover; object-position:center 30%; display:block; }
.banner-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.52); }
.banner-title { position:relative; z-index:2; color:#fff; font-family:var(--font-display); font-size:38px; font-weight:700; letter-spacing:0.02em; text-shadow:0 2px 12px rgba(0,0,0,0.4); }

/* GET IN TOUCH */
.get-in-touch { padding:72px 0 80px; background:var(--green-pale); }
.git-header { text-align:center; margin-bottom:48px; }
.git-line { width:36px; height:3px; background:var(--green); margin:0 auto 18px; border-radius:2px; }
.git-title { font-family:var(--font-display); font-size:34px; font-weight:700; color:var(--text); margin-bottom:10px; }
.git-sub { font-size:14px; color:var(--text-light); }

/* CONTACT CARD */
.contact-card { background:#fff; border-radius:12px; box-shadow:0 4px 30px rgba(0,0,0,0.08); display:grid; grid-template-columns:1fr 1px 1fr; overflow:hidden; /*max-width:900px;*/ margin:0 auto; }

/* PANEL LABEL */
.panel-label { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:var(--text); margin-bottom:24px; padding-bottom:16px; border-bottom:1px solid var(--border); }
.panel-label svg { color:var(--green); flex-shrink:0; }

/* FORM PANEL */
.form-panel { padding:36px 40px 36px 36px; display:flex; flex-direction:column; }
.cf-row { margin-bottom:14px; }
.cf-two { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
.cf-group { display:flex; flex-direction:column; }

.cf-input { width:100%; border:1px solid #e0e0e0; border-radius:4px; padding:11px 14px; font-size:13.5px; font-family:var(--font-body); color:var(--text); background:#fafafa; outline:none; transition:border-color 0.2s,background 0.2s,box-shadow 0.2s; resize:none; }
.cf-input::placeholder { color:#bbb; }
.cf-input:focus { border-color:var(--green); background:#fff; box-shadow:0 0 0 3px rgba(74,158,92,0.1); }
.cf-textarea { resize:vertical; min-height:110px; }

.cf-submit { display:inline-flex; align-items:center; gap:10px; background:var(--green); color:#fff; border:none; padding:13px 28px; border-radius:4px; font-size:13px; font-weight:700; letter-spacing:0.07em; cursor:pointer; font-family:var(--font-body); margin-top:6px; align-self:flex-start; transition:background 0.2s,transform 0.2s,box-shadow 0.2s; box-shadow:0 4px 14px rgba(74,158,92,0.3); }
.cf-submit:hover { background:var(--green-dark); transform:translateY(-2px); box-shadow:0 6px 20px rgba(74,158,92,0.4); }
.cf-reset { display:inline-flex; align-items:center; gap:10px; background:#a9adaa; color:#fff; border:none; padding:13px 28px; border-radius:4px; font-size:13px; font-weight:700; letter-spacing:0.07em; cursor:pointer; font-family:var(--font-body); margin-top:6px; align-self:flex-start; transition:background 0.2s,transform 0.2s,box-shadow 0.2s; box-shadow:0 4px 14px rgba(74,158,92,0.3); }
.cf-reset:hover { background:#eb7070; transform:translateY(-2px); box-shadow:0 6px 20px rgba(74,158,92,0.4); }

.cf-success { display:none; align-items:center; gap:10px; margin-top:16px; background:var(--green-light); border:1px solid var(--green); color:var(--green-dark); padding:12px 16px; border-radius:6px; font-size:13.5px; font-weight:600; }
.cf-success.show { display:flex; }

/* DIVIDER */
.contact-divider { background:var(--border); width:1px; }

/* INFO PANEL */
.info-panel { padding:36px 36px 36px 40px; display:flex; flex-direction:column; }
.info-items { display:flex; flex-direction:column; gap:24px; margin-bottom:32px; flex:1; }
.info-item { display:flex; align-items:flex-start; gap:16px; }
.info-icon { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.email-icon { background:#d8efdd; color:var(--green); }
.phone-icon { background:#e3f2fd; color:#1976d2; }
.addr-icon  { background:#fff8e1; color:#f57c00; }
.info-text { display:flex; flex-direction:column; gap:3px; }
.info-label { font-size:11px; font-weight:700; color:var(--text-muted); letter-spacing:0.08em; text-transform:uppercase; text-align: left;}
.info-value { font-size:14px; color:var(--text); line-height:1.5; font-weight:500; word-break:break-word; transition:color 0.2s; text-align: left;}
a.info-value:hover { color:var(--green); }

/* FOLLOW US */
.follow-us { border-top:1px solid var(--border); padding-top:22px; }
.follow-label { font-size:13px; font-weight:700; color:var(--text); display:block; margin-bottom:12px; text-align: left;}
.follow-icons { display:flex; gap:10px; flex-wrap:wrap; }
.follow-icon { width:34px; height:34px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--text-light); transition:background 0.2s,color 0.2s,border-color 0.2s,transform 0.2s; }
.follow-icon:hover { background:var(--green); color:#fff; border-color:var(--green); transform:translateY(-2px); }

/* RECOMMENDED */
.recommended { padding:72px 0; background:#fff; }
.rec-header { text-align:center; margin-bottom:48px; }
.rec-line { width:36px; height:3px; background:var(--green); margin:0 auto 18px; border-radius:2px; }
.rec-title { font-family:var(--font-display); font-size:34px; font-weight:700; color:var(--text); margin-bottom:10px; }
.rec-sub { font-size:14px; color:var(--text-light); }
.rec-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:36px; }
.rec-card { border-radius:var(--radius); overflow:hidden; background:#fff; border:1px solid var(--border); cursor:pointer; transition:box-shadow 0.25s,transform 0.25s; }
.rec-card:hover { box-shadow:var(--shadow-hover); transform:translateY(-5px); }
.rec-img { aspect-ratio:1; overflow:hidden; position:relative; }
.rec-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.45s ease; }
.rec-card:hover .rec-img img { transform:scale(1.07); }
.rec-overlay { position:absolute; inset:0; background:rgba(74,158,92,0.72); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity 0.25s; }
.rec-card:hover .rec-overlay { opacity:1; }
.rec-overlay span { color:#fff; font-size:12.5px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; border:2px solid #fff; padding:6px 14px; border-radius:3px; }
.rec-name { font-size:13.5px; font-weight:600; color:var(--text); padding:12px 12px 4px; }
.rec-cat { font-size:12px; color:var(--green); padding:0 12px 12px; font-weight:500; }
.rec-cta { text-align:center; }
.btn-view-all { display:inline-flex; align-items:center; gap:10px; background:var(--green); color:#fff; padding:13px 30px; border-radius:4px; font-size:13px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; transition:background 0.2s,transform 0.2s,box-shadow 0.2s; box-shadow:0 4px 14px rgba(74,158,92,0.3); }
.btn-view-all:hover { background:var(--green-dark); transform:translateY(-2px); box-shadow:0 6px 20px rgba(74,158,92,0.4); }

/* FLOAT CHAT */
.float-chat { position:fixed; bottom:28px; right:28px; width:50px; height:50px; border-radius:50%; background:var(--green); color:#fff; border:none; cursor:pointer; box-shadow:0 4px 16px rgba(74,158,92,0.45); display:flex; align-items:center; justify-content:center; transition:background 0.2s,transform 0.2s; z-index:200; }
.float-chat:hover { background:var(--green-dark); transform:scale(1.08); }

/* REVEAL */
.reveal { opacity:0; transform:translateY(28px); transition:opacity 0.6s ease,transform 0.6s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* WeChat QR Modal */
.wx-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.wx-overlay.open { display: flex; }
.wx-modal {
  background: #fff;
  border-radius: 12px;
  padding: 36px 32px 28px;
  text-align: center;
  max-width: 320px;
  width: 100%;
  box-shadow: 0 24px 60px rgba(0,0,0,0.2);
  animation: wxIn 0.3s ease;
  position: relative;
}
@keyframes wxIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.wx-close {
  position: absolute; top: 10px; right: 14px;
  background: none; border: none;
  font-size: 24px; cursor: pointer; color: #aaa; line-height: 1;
}
.wx-close:hover { color: #333; }
.wx-modal img {
  width: 200px; height: 200px;
  object-fit: contain;
  margin: 12px auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
}
.wx-modal h4 {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--text);
  margin-bottom: 4px;
}
.wx-modal p {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.wx-modal .wx-id {
  font-size: 14px;
  font-weight: 600;
  color: var(--green);
}

/* RESPONSIVE */
@media(max-width:860px){
  .contact-card { grid-template-columns:1fr; max-width:560px; }
  .contact-divider { display:none; }
  .info-panel { border-top:1px solid var(--border); padding:28px; }
  .form-panel { padding:28px; }
  .rec-grid { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:600px){
  .cf-two { grid-template-columns:1fr 1fr; }
  .banner-title { font-size:28px; }
  .git-title,.rec-title { font-size:26px; }
}
@media(max-width:400px){ .rec-grid { grid-template-columns:1fr; } .contact-banner{height: 160px;} }