:root{
    --ink:#0F1E1E; --ink2:#2C4145; --muted:#6B7C80; --line:#E4EAEC; --line2:#EFF3F4;
    --teal:#08827E; --teal-d:#066460; --teal-l:#EDF7F6;
    --gold:#B8912F; --bg:#F7F9FA; --white:#fff;
    --shadow:0 1px 3px rgba(16,24,40,.06), 0 12px 32px -18px rgba(16,24,40,.18);
  }
  *{box-sizing:border-box; margin:0; padding:0}
  html{scroll-behavior:smooth}
  body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
       color:var(--ink); background:var(--white); -webkit-font-smoothing:antialiased; line-height:1.7}
  a{color:inherit; text-decoration:none}
  img{display:block; max-width:100%}
  .wrap{width:100%; max-width:1180px; margin:0 auto; padding:0 24px}
  .num{font-variant-numeric:tabular-nums}

  /* ── 顶部信息条 ── */
  .topbar{background:var(--ink); color:#DCE6E6; font-size:12.5px}
  .topbar .wrap{display:flex; align-items:center; justify-content:space-between; height:36px}
  .topbar b{color:#fff; font-weight:600; letter-spacing:.3px}
  .topbar .tel{color:#fff; font-weight:600; letter-spacing:.5px}

  /* ── 导航 ── */
  header{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.96); backdrop-filter:blur(8px);
         border-bottom:1px solid var(--line)}
  .nav{display:flex; align-items:center; justify-content:space-between; height:68px}
  .brand{display:flex; align-items:baseline; gap:10px}
  .brand .cn{font-size:21px; font-weight:700; letter-spacing:1px}
  .brand .en{font-size:10.5px; letter-spacing:2.4px; color:var(--muted); text-transform:uppercase}
  .menu{display:flex; gap:30px; font-size:14px; color:var(--ink2)}
  .menu a{position:relative; padding:6px 0; transition:color .18s}
  .menu a:hover{color:var(--teal)}
  .menu a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--teal); transition:right .22s}
  .menu a:hover::after{right:0}
  .nav-cta{display:flex; align-items:center; gap:14px}
  .nav-tel{font-size:16px; font-weight:700; letter-spacing:.6px; color:var(--teal-d)}
  .nav-tel span{display:block; font-size:10.5px; font-weight:400; color:var(--muted); letter-spacing:.4px; text-align:right; line-height:1.2}
  .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 20px;
       background:var(--teal); color:#fff; font-size:14px; font-weight:600; border-radius:4px; transition:background .18s}
  .btn:hover{background:var(--teal-d)}
  .btn.ghost{background:transparent; color:var(--teal-d); border:1px solid var(--teal); }
  .btn.ghost:hover{background:var(--teal-l)}

  /* ── Hero ── */
  .hero{position:relative; height:clamp(460px,64vh,620px); overflow:hidden; background:#0B1A1A}
  .hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 52%; opacity:.95}
  .hero::after{content:""; position:absolute; inset:0;
    background:linear-gradient(90deg, rgba(6,20,20,.82) 0%, rgba(6,20,20,.52) 42%, rgba(6,20,20,.18) 76%, rgba(6,20,20,.32) 100%)}
  .hero .wrap{position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:center}
  .kicker{display:inline-flex; align-items:center; gap:9px; color:#E8D9A8; font-size:12.5px; letter-spacing:2px}
  .kicker::before{content:""; width:26px; height:1px; background:var(--gold)}
  .hero h1{color:#fff; font-size:clamp(34px,4.4vw,56px); font-weight:700; letter-spacing:3px; margin:16px 0 12px}
  .hero .sub{color:rgba(255,255,255,.88); font-size:clamp(14px,1.2vw,16.5px); letter-spacing:.6px; max-width:620px}
  .hero .acts{display:flex; gap:12px; margin-top:30px; flex-wrap:wrap}
  .hero .acts .btn{height:46px; padding:0 26px; font-size:14.5px}
  .hero .acts .btn.ghost{color:#fff; border-color:rgba(255,255,255,.55)}
  .hero .acts .btn.ghost:hover{background:rgba(255,255,255,.12)}
  .kpis{position:absolute; left:0; right:0; bottom:0; z-index:3; background:rgba(8,25,25,.46);
        border-top:1px solid rgba(255,255,255,.16); backdrop-filter:blur(6px)}
  .kpis .wrap{display:grid; grid-template-columns:repeat(4,1fr); height:86px; align-items:center}
  .kpi{display:flex; flex-direction:column; gap:2px; padding-left:22px; border-left:1px solid rgba(255,255,255,.16)}
  .kpi:first-child{padding-left:0; border-left:0}
  .kpi .v{color:#fff; font-size:22px; font-weight:700; letter-spacing:.5px}
  .kpi .v i{font-style:normal; font-size:13px; font-weight:500; margin-left:2px; color:rgba(255,255,255,.82)}
  .kpi .k{color:rgba(255,255,255,.72); font-size:11.5px; letter-spacing:1px}

  /* ── 通用章节 ── */
  section{padding:88px 0}
  section.alt{background:var(--bg)}
  .head{text-align:center; margin-bottom:52px}
  .head .en{font-size:11px; letter-spacing:3.4px; text-transform:uppercase; color:var(--gold)}
  .head h2{font-size:30px; font-weight:700; letter-spacing:2px; margin:10px 0 14px}
  .head .rule{width:44px; height:2px; background:var(--teal); margin:0 auto}
  .head p{color:var(--muted); font-size:14px; margin-top:16px}
  .lead{font-size:15px; color:var(--ink2); line-height:2.05}

  /* 概览 */
  .intro{display:grid; grid-template-columns:0.92fr 1fr; gap:56px; align-items:center}
  .intro .ph{position:relative}
  .intro .ph img{width:100%; height:400px; object-fit:cover; border-radius:2px}
  .intro .ph .tag{position:absolute; left:0; bottom:0; background:var(--teal); color:#fff; font-size:12px;
                  letter-spacing:1.4px; padding:8px 16px}
  .intro h3{font-size:22px; font-weight:700; letter-spacing:1px; margin-bottom:18px}
  .intro p+p{margin-top:14px}
  .facts{display:grid; grid-template-columns:repeat(2,1fr); gap:22px 28px; margin-top:30px; padding-top:26px;
         border-top:1px solid var(--line)}
  .fact .v{font-size:24px; font-weight:700; letter-spacing:.5px; color:var(--teal-d)}
  .fact .v i{font-style:normal; font-size:13px; font-weight:600; margin-left:2px}
  .fact .k{font-size:12.5px; color:var(--muted); letter-spacing:.6px}

  /* 参数表 */
  .params{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 40px; background:#fff; padding:14px 28px; border:1px solid var(--line)}
  .prow{display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid var(--line2); font-size:13.5px}
  .prow .k{color:var(--muted); white-space:nowrap}
  .prow .v{color:var(--ink); font-weight:500; text-align:right; min-width:0; word-break:break-word}

  /* 房源表 */
  .tablecard{background:#fff; border:1px solid var(--line); box-shadow:var(--shadow)}
  table{width:100%; border-collapse:collapse; font-size:13.5px}
  thead th{background:#F2F6F6; color:var(--ink2); font-weight:600; font-size:12.5px; letter-spacing:.6px;
           text-align:left; padding:13px 16px; border-bottom:1px solid var(--line); white-space:nowrap}
  tbody td{padding:15px 16px; border-bottom:1px solid var(--line2); color:var(--ink2)}
  tbody tr:last-child td{border-bottom:0}
  tbody tr:hover{background:#F9FBFB}
  td.area{font-weight:700; color:var(--ink); font-size:15px}
  .pill{display:inline-block; padding:2px 8px; border-radius:3px; font-size:11.5px; background:var(--teal-l); color:var(--teal-d); font-weight:600}
  .pill.gray{background:#F1F4F5; color:#5A6B6E}
  .note{display:flex; justify-content:space-between; gap:16px; padding:14px 16px; background:#FBFCFC;
        border-top:1px solid var(--line); color:var(--muted); font-size:12.5px; flex-wrap:wrap}
  .area-strip{display:flex; gap:8px; flex-wrap:wrap; margin-top:22px}
  .area-strip span{border:1px solid var(--line); background:#fff; color:var(--ink2); font-size:12.5px;
                   padding:7px 13px; border-radius:3px}

  /* 图集 */
  .gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
  .gallery figure{position:relative; overflow:hidden; background:#0B1A1A}
  .gallery img{width:100%; height:200px; object-fit:cover; transition:transform .5s ease, opacity .3s}
  .gallery figure:hover img{transform:scale(1.04); opacity:.94}
  .gallery figcaption{position:absolute; left:0; bottom:0; padding:8px 14px; color:#fff; font-size:12px;
                      letter-spacing:1px; background:linear-gradient(transparent, rgba(6,20,20,.72))}
  @media(max-width:1200px){.gallery{grid-template-columns:repeat(3,1fr)}}

  /* 配套 / 交通 */
  .split{display:grid; grid-template-columns:1fr 1fr; gap:56px}
  .block h4{font-size:16px; font-weight:700; letter-spacing:1px; margin-bottom:6px; display:flex; align-items:center; gap:10px}
  .block h4::before{content:""; width:3px; height:15px; background:var(--teal)}
  .block .sub{font-size:12px; color:var(--muted); letter-spacing:1.2px; margin-bottom:18px}
  .kv{display:flex; gap:14px; padding:12px 0; border-bottom:1px solid var(--line2); font-size:13.5px}
  .kv .k{width:70px; flex:0 0 70px; color:var(--muted)}
  .kv .v{color:var(--ink2)}
  .tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
  .tags span{font-size:12.5px; color:var(--ink2); background:#fff; border:1px solid var(--line); padding:6px 12px; border-radius:3px}
  .transit{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:22px}
  .tcard{border:1px solid var(--line); background:#fff; padding:18px}
  .tcard .v{font-size:17px; font-weight:700; color:var(--teal-d); letter-spacing:.4px}
  .tcard .k{font-size:12px; color:var(--muted); margin-top:4px}

  /* 入驻企业 */
  .tenants{display:flex; flex-wrap:wrap; gap:10px 12px; justify-content:center}
  .tenants span{font-size:13px; color:var(--ink2); border:1px solid var(--line); background:#fff; padding:9px 16px}

  /* 联系 */
  .contact{background:var(--ink); color:#fff}
  .contact .wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center; padding-top:74px; padding-bottom:74px}
  .contact .en{font-size:11px; letter-spacing:3.4px; text-transform:uppercase; color:#D8C489}
  .contact h2{font-size:30px; font-weight:700; letter-spacing:2px; margin:12px 0 16px}
  .contact p{color:rgba(255,255,255,.72); font-size:14px; line-height:2}
  .phone{display:inline-flex; align-items:baseline; gap:12px; margin-top:26px}
  .phone .v{font-size:clamp(30px,3.4vw,42px); font-weight:700; letter-spacing:2px; color:#fff}
  .phone .k{font-size:12.5px; color:rgba(255,255,255,.6); letter-spacing:1.4px}
  .cbox{border:1px solid rgba(255,255,255,.16); padding:28px 30px; background:rgba(255,255,255,.03)}
  .cbox .row{display:flex; gap:14px; padding:11px 0; font-size:13.5px; border-bottom:1px solid rgba(255,255,255,.1)}
  .cbox .row:last-child{border-bottom:0}
  .cbox .row .k{width:64px; flex:0 0 64px; color:rgba(255,255,255,.55)}
  .cbox .row .v{color:#fff}
  footer{background:#0A1616; color:rgba(255,255,255,.55); font-size:12.5px; padding:26px 0}
  footer .wrap{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
  footer b{color:rgba(255,255,255,.86); font-weight:600}

  /* 移动端 */
  .callbar{display:none}
  @media (max-width:980px){
    .menu{display:none}
    .topbar .wrap{height:auto; padding:7px 24px; justify-content:center}
    .topbar div:first-child{display:none}
    .topbar{font-size:12px}
    .brand .cn{font-size:17px; letter-spacing:0}
    .brand .en{display:none}
    .nav{height:58px}
    .nav-cta .btn{height:36px; padding:0 14px; font-size:13px; white-space:nowrap}
    .intro,.split,.contact .wrap{grid-template-columns:1fr; gap:32px}
    .params{grid-template-columns:repeat(2,1fr); gap:0 32px}
    .gallery{grid-template-columns:repeat(2,1fr)}
    .kpis .wrap{grid-template-columns:repeat(2,1fr); height:auto; padding:16px 24px; gap:16px 0}
    .kpi{padding-left:0; border-left:0}
    section{padding:60px 0}
    .hero{height:520px}
    .hero .kpis{position:static; background:var(--ink); margin-top:0}
    .hero{height:auto; padding-bottom:0}
    .hero > .wrap{min-height:440px; padding-top:56px; padding-bottom:36px}
    .hero .kpis .wrap{min-height:0}
    .nav-tel{display:none}
    .tablecard{overflow-x:auto}
    table{min-width:640px}
  }
  @media (max-width:640px){
    .params,.transit{grid-template-columns:1fr}
    .head h2{font-size:24px}
    .hero h1{letter-spacing:1.5px}
    .facts{grid-template-columns:repeat(2,1fr)}
    .callbar{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:80; background:#fff;
             border-top:1px solid var(--line); padding:10px 14px; gap:10px; box-shadow:0 -6px 18px rgba(16,24,40,.08)}
    .callbar a{flex:1; height:44px; display:flex; align-items:center; justify-content:center; border-radius:4px;
               font-size:14px; font-weight:600}
    .callbar .p{background:var(--teal); color:#fff}
    .callbar .s{background:#fff; color:var(--teal-d); border:1px solid var(--teal)}
    body{padding-bottom:66px}
  }

/* ── 面包屑 / FAQ / 相关楼盘（2026-11-02 批量页新增）── */
.crumb{background:#F7F9FA;border-bottom:1px solid #E4EAEC;font-size:12.5px;color:#6B7C80}
.crumb .wrap{max-width:1180px;margin:0 auto;padding:9px 24px;display:flex;gap:8px;align-items:center}
.crumb a{color:#6B7C80;text-decoration:none}
.crumb a:hover{color:#08827E}
.crumb b{color:#0F1E1E;font-weight:600}
.faq{max-width:900px;margin:0 auto;border-top:1px solid #E4EAEC}
.faq-item{padding:16px 2px;border-bottom:1px solid #E4EAEC}
.faq-item .q{font-size:15.5px;font-weight:600;color:#0F1E1E;margin-bottom:6px}
.faq-item .a{font-size:14px;line-height:1.85;color:#4A5A5E}
.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.rel{display:block;background:#fff;border:1px solid #E4EAEC;border-radius:10px;padding:16px 18px;text-decoration:none;color:#0F1E1E;font-weight:600;font-size:15px;transition:.15s}
.rel:hover{border-color:#08827E;box-shadow:0 4px 14px rgba(8,130,126,.08)}
.rel span{display:block;margin-top:6px;font-size:12.5px;color:#6B7C80;font-weight:400}
@media(max-width:760px){
  /* 手机端 hero 文字压全宽，横向渐变不够用，改竖向压暗 + 轻微投影，保证可读性 */
  .hero::after{background:linear-gradient(180deg, rgba(6,20,20,.50) 0%, rgba(6,20,20,.66) 45%, rgba(6,20,20,.88) 100%)}
  .hero .sub{color:rgba(255,255,255,.95)}
  .hero h1,.hero .sub{text-shadow:0 1px 14px rgba(0,0,0,.45)}
  /* 手机端 .kpis 变 static 后 z-index 失效，会被 hero::after 压暗 —— 必须改回 relative */
  .hero .kpis{position:relative; z-index:3}
}
@media(max-width:760px){.crumb .wrap{padding:8px 16px;overflow:auto;white-space:nowrap}}