/* ==========================================================================
   粟园云市 · 基础样式（变量 / 重置 / 页头 / 页脚 / 通用组件）
   纯静态站点，无外部字体与 CDN 依赖
   ========================================================================== */

:root{
  --ink:        #141414;
  --ink-2:      #38352F;
  --ink-3:      #5C574E;
  --muted:      #8A857C;
  --paper:      #FBFAF7;
  --card:       #FFFFFF;
  --line:       #E9E4D9;
  --line-2:     #F2EEE6;

  --brand:      #1E3A32;   /* 墨绿：品牌主色 */
  --brand-2:    #2C5347;
  --brand-soft: #EDF2EF;
  --accent:     #C7402D;   /* 朱红：价格与主按钮 */
  --accent-2:   #A93322;
  --accent-soft:#FBEEEA;
  --gold:       #B08A4A;
  --green:      #2F7A55;

  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;

  --sh-1: 0 1px 2px rgba(20,20,20,.04);
  --sh-2: 0 2px 6px rgba(20,20,20,.05), 0 10px 28px rgba(20,20,20,.06);
  --sh-3: 0 6px 18px rgba(20,20,20,.08), 0 22px 48px rgba(20,20,20,.08);

  --ease: cubic-bezier(.22,.61,.36,1);
  --hdr-h: 88px;
  --nav-h: 50px;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
          "Noto Sans CJK SC", sans-serif;
  --num:  "DIN Alternate", "Helvetica Neue", Arial, var(--sans);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:14px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,h5,p,figure,blockquote{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
input,select,textarea{ font:inherit; color:inherit; }

:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
  border-radius:3px;
}

.wrap{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:0 24px;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.num{ font-family:var(--num); font-feature-settings:"tnum"; }

/* ------------------------------ 顶部信息条 ------------------------------ */
.topbar{
  background:var(--brand);
  color:rgba(255,255,255,.78);
  font-size:12.5px;
  letter-spacing:.02em;
}
.topbar-in{
  height:36px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.tb-left{ display:flex; align-items:center; gap:10px; }
.tb-left b{ color:#fff; font-weight:500; letter-spacing:.02em; }
.tb-sep{ width:1px; height:11px; background:rgba(255,255,255,.22); }
.tb-right{ display:flex; align-items:center; gap:18px; }
.tb-right a{ transition:color .2s var(--ease); }
.tb-right a:hover{ color:#fff; }
.tb-right .tb-hl{ color:#F3D9A4; }

/* ------------------------------ 页头 ------------------------------ */
.hdr{ background:#fff; border-bottom:1px solid var(--line-2); }
.hdr-in{
  min-height:var(--hdr-h);
  display:flex; align-items:center; gap:clamp(16px,3vw,44px);
  padding-block:16px;
}

.logo{ display:flex; align-items:center; gap:11px; flex:none; }
.logo-mark{
  width:42px; height:42px; flex:none;
  display:grid; place-items:center;
  background:var(--brand); color:#fff;
  border-radius:12px;
  font-size:20px; font-weight:500; letter-spacing:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
}
.logo-txt{ display:flex; flex-direction:column; line-height:1.15; }
.logo-txt b{ font-size:19px; font-weight:600; letter-spacing:.06em; }
.logo-txt em{
  font-style:normal; font-size:9.5px; letter-spacing:.28em;
  color:var(--muted); margin-top:3px; text-transform:uppercase;
}

.search{
  flex:1 1 auto; max-width:600px;
  display:flex; align-items:stretch;
  height:44px;
  background:#fff;
  border:1.5px solid var(--brand);
  border-radius:6px;
  overflow:hidden;
}
.search select{
  width:92px; flex:none;
  border:0; border-right:1px solid var(--line);
  background:#fff; padding:0 8px 0 12px;
  font-size:13px; color:var(--ink-2);
  appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 14px) 19px, calc(100% - 9px) 19px;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}
.search input{
  flex:1 1 auto; min-width:0;
  border:0; outline:0; padding:0 14px;
  font-size:14px; background:#fff;
}
.search input::placeholder{ color:#A9A49A; }
.search button{
  flex:none; width:104px;
  border:0; cursor:pointer;
  background:var(--brand); color:#fff;
  font-size:14.5px; letter-spacing:.12em;
  transition:background .2s var(--ease);
}
.search button:hover{ background:var(--brand-2); }

.hdr-act{ display:flex; align-items:center; gap:10px; flex:none; }

.btn-pub{
  display:inline-flex; align-items:center; gap:8px;
  height:44px; padding:0 20px;
  background:var(--accent); color:#fff;
  border-radius:6px;
  font-size:14.5px; font-weight:500; letter-spacing:.08em;
  white-space:nowrap;
  box-shadow:0 2px 0 rgba(0,0,0,.06);
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.btn-pub:hover{ background:var(--accent-2); transform:translateY(-1px); }
.btn-pub svg{ width:14px; height:14px; }

/* ------------------------------ 导航 ------------------------------ */
.nav{
  background:#fff;
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:60;
}
.nav-in{ display:flex; align-items:center; height:var(--nav-h); gap:4px; }
.nav a{
  position:relative;
  display:inline-flex; align-items:center; height:var(--nav-h);
  padding:0 17px;
  font-size:14.5px; color:var(--ink-2); letter-spacing:.04em;
  transition:color .2s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:17px; right:17px; bottom:-1px;
  height:2px; background:var(--accent);
  transform:scaleX(0); transform-origin:center;
  transition:transform .28s var(--ease);
}
.nav a:hover{ color:var(--accent); }
.nav a:hover::after,
.nav a.on::after{ transform:scaleX(1); }
.nav a.on{ color:var(--accent); font-weight:500; }
.nav .all{
  width:172px; flex:none;
  justify-content:space-between;
  margin-right:8px;
  background:var(--brand); color:#fff;
  padding-inline:18px;
}
.nav .all::after{ display:none; }
.nav .all:hover{ background:var(--brand-2); color:#fff; }
.nav .all i{
  width:0; height:0;
  border:4px solid transparent;
  border-top-color:#fff; margin-top:4px;
}
.nav-right{ margin-left:auto; display:flex; align-items:center; gap:14px; font-size:13px; color:var(--muted); }

/* 移动端汉堡与抽屉 */
.burger{
  display:none;
  width:44px; height:44px; flex:none;
  border:1px solid var(--line); border-radius:8px;
  background:#fff; cursor:pointer;
  padding:0; place-items:center;
}
.burger span{
  display:block; width:19px; height:1.5px; background:var(--ink-2);
  position:relative;
}
.burger span::before,
.burger span::after{
  content:""; position:absolute; left:0; width:19px; height:1.5px; background:var(--ink-2);
}
.burger span::before{ top:-6px; }
.burger span::after{ top:6px; }

.drawer{
  position:fixed; inset:0; z-index:99;
  background:#fff;
  padding:22px 24px 40px;
  overflow-y:auto;
  transform:translateX(100%);
  transition:transform .38s var(--ease);
}
body.menu-open .drawer{ transform:none; }
body.menu-open{ overflow:hidden; }
.drawer-top{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:18px; border-bottom:1px solid var(--line);
}
.drawer-close{
  width:40px; height:40px; border:1px solid var(--line); border-radius:8px;
  background:#fff; font-size:18px; cursor:pointer; color:var(--ink-2);
}
.drawer nav{ margin-top:6px; }
.drawer nav a{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 2px; border-bottom:1px solid var(--line-2);
  font-size:15.5px; color:var(--ink-2);
}
.drawer nav a i{ font-style:normal; color:#C9C3B6; font-size:13px; }
.drawer-ftr{ margin-top:26px; font-size:13px; color:var(--muted); line-height:2; }
.drawer-ftr b{ display:block; color:var(--ink); font-size:14px; font-weight:500; margin-bottom:4px; }

/* ------------------------------ 按钮 ------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:44px; padding:0 22px;
  border-radius:6px; border:1px solid transparent;
  font-size:14px; letter-spacing:.06em;
  cursor:pointer; white-space:nowrap;
  transition:all .2s var(--ease);
}
.btn svg{ width:14px; height:14px; }
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent-2); }
.btn-dark{ background:var(--brand); color:#fff; }
.btn-dark:hover{ background:var(--brand-2); }
.btn-line{ border-color:var(--brand); color:var(--brand); background:#fff; }
.btn-line:hover{ background:var(--brand); color:#fff; }
.btn-ghost{ border-color:var(--line); color:var(--ink-2); background:#fff; }
.btn-ghost:hover{ border-color:var(--brand); color:var(--brand); }
.btn-sm{ height:36px; padding:0 16px; font-size:13px; }
.btn-lg{ height:52px; padding:0 30px; font-size:15.5px; }
.btn-block{ width:100%; }

/* ------------------------------ 通用区块 ------------------------------ */
.sec{ padding-block:clamp(38px,4.6vw,64px); }
.sec-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; margin-bottom:26px;
}
.sec-head h2{
  font-size:clamp(20px,2.2vw,26px);
  font-weight:600; letter-spacing:.04em; line-height:1.3;
}
.sec-head h2 small{
  display:block; font-size:12px; font-weight:400; letter-spacing:.22em;
  color:var(--muted); margin-top:8px; text-transform:uppercase;
}
.sec-more{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; color:var(--muted);
  transition:color .2s var(--ease);
}
.sec-more:hover{ color:var(--accent); }
.sec-more svg{ width:12px; height:12px; }

.tag{
  display:inline-flex; align-items:center; gap:4px;
  height:20px; padding:0 7px;
  border-radius:3px; font-size:11px; letter-spacing:.04em;
  background:var(--brand-soft); color:var(--brand);
}
.tag-red{ background:var(--accent-soft); color:var(--accent); }
.tag-gold{ background:#FBF3E4; color:#8E6B26; }
.tag-gray{ background:#F3F1EC; color:var(--ink-3); }

/* 空状态 / 提示条 */
.notice-bar{
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 16px;
  background:#FBF6EA;
  border:1px solid #F0E4C8;
  border-radius:var(--r-sm);
  font-size:12.5px; color:#7A6320; line-height:1.8;
}
.notice-bar svg{ width:14px; height:14px; flex:none; margin-top:4px; }

/* ------------------------------ 页脚 ------------------------------ */
.ftr{
  margin-top:clamp(40px,5vw,72px);
  background:var(--brand);
  color:rgba(255,255,255,.62);
  font-size:13px;
}
.ftr-top{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.2fr;
  gap:clamp(24px,4vw,56px);
  padding-block:clamp(36px,4.4vw,54px) clamp(26px,3vw,36px);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.ftr h4{
  color:#fff; font-size:13.5px; font-weight:500;
  letter-spacing:.1em; margin-bottom:16px;
}
.ftr li{ margin-bottom:9px; line-height:1.7; }
.ftr li a{ transition:color .2s var(--ease); }
.ftr li a:hover{ color:#fff; }
.ftr-brand .logo-mark{ background:rgba(255,255,255,.10); }
.ftr-brand .logo-txt b{ color:#fff; }
.ftr-brand .logo-txt em{ color:rgba(255,255,255,.42); }
.ftr-brand p{
  margin-top:16px; line-height:1.95; color:rgba(255,255,255,.58);
  max-width:300px;
}
.ftr-tel{ margin-top:14px; color:#fff; font-size:19px; letter-spacing:.04em; }
.ftr-tel small{ display:block; font-size:11.5px; color:rgba(255,255,255,.45); letter-spacing:.12em; margin-bottom:2px; }

.ftr-legal{
  padding-block:22px 30px;
  line-height:2.05;
  font-size:12.5px;
  color:rgba(255,255,255,.50);
}
.ftr-legal b{ color:rgba(255,255,255,.80); font-weight:500; }
.ftr-legal .row{ display:flex; flex-wrap:wrap; gap:8px 22px; }
.ftr-legal .icp{
  color:#fff; letter-spacing:.04em;
}
.ftr-disc{
  margin-top:10px; padding-top:12px;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:12px; color:rgba(255,255,255,.40); line-height:1.9;
}

/* ------------------------------ 响应式 ------------------------------ */
@media (max-width:1100px){
  .ftr-top{ grid-template-columns:1fr 1fr; }
  .search{ max-width:none; }
}
@media (max-width:980px){
  :root{ --hdr-h:auto; }
  .search{ display:none; }
  .nav{ display:none; }
  .burger{ display:grid; }
  .hdr-act .btn-pub{ display:none; }
  .tb-right a:nth-child(n+3){ display:none; }
}
@media (max-width:640px){
  .wrap{ padding:0 16px; }
  .topbar-in{ height:34px; font-size:12px; }
  .tb-left span:nth-child(1){ display:none; }
  .tb-left span:nth-child(5){ display:none; }
  .tb-left .tb-sep{ display:none; }
  .logo-txt b{ font-size:17px; }
  .logo-mark{ width:38px; height:38px; border-radius:10px; font-size:18px; }
  .ftr-top{ grid-template-columns:1fr; gap:26px; }
  .ftr-legal{ font-size:12px; }
  .sec-head{ flex-direction:column; align-items:flex-start; gap:10px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
}