/* ============================================================
   苏州园林 · 整站模板（v7）
   粉墙黛瓦 / 青绿石色 / 月洞门 / 花窗 / 飞檐 / 水墨远山 / 朱砂
   ============================================================ */

:root {
  --primary: #2f6b50;          /* 石绿 */
  --primary-dark: #234f3b;
  --primary-light: #e9f0ea;
  --accent: #3d7a60;
  --accent-dark: #2c5c48;
  --gold: #b3a06e;
  --gold-deep: #9a8550;
  --gold-soft: #d8cda6;
  --bg: #faf8f2;               /* 粉墙白 */
  --bg-soft: #f4efe3;          /* 宣纸米 */
  --bg-deep: #232a27;          /* 黛瓦 */
  --line: #e3ddd0;
  --ink: #212720;
  --ink-soft: #5c6357;
  --ink-faint: #94998b;
  --cinnabar: #a33a2b;         /* 朱砂 */
}

/* ---------- 月洞门（框景） ---------- */
.moon-gate {
  border-radius: 50%;
  border: 10px solid #ece5d4;
  outline: 1px solid #c9bfa6;
  outline-offset: -7px;
  box-shadow: 0 20px 50px rgba(35, 42, 39, .2);
  object-fit: cover;
  aspect-ratio: 1 / 1;
  width: 100%;
}
.moon-media { aspect-ratio: 1 / 1; }

/* ---------- 窗棂相框（产品图） ---------- */
.window-frame {
  position: relative;
  padding: 9px;
  background: #fbf9f3;
  border: 1px solid #d8d0bd;
  box-shadow: 0 10px 30px rgba(35, 42, 39, .08);
}
.window-frame img { display: block; width: 100%; }
.window-frame::before,
.window-frame::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1.5px solid #8a7a55;
  opacity: .75;
}
.window-frame::before { top: 4px; left: 4px; border-right: none; border-bottom: none; }
.window-frame::after { bottom: 4px; right: 4px; border-left: none; border-top: none; }

/* ---------- 冰裂纹花窗分隔带 ---------- */
.lattice-band {
  height: 30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='30'%3E%3Cg stroke='%23948b76' stroke-width='1' fill='none' opacity='.5'%3E%3Cpath d='M0,7 L16,4 L26,14 L42,10 L52,19 L64,15'/%3E%3Cpath d='M6,26 L22,21 L34,28 L48,24'/%3E%3Cpath d='M34,0 L29,9 M56,2 L51,11 M14,22 L10,30'/%3E%3C/g%3E%3C/svg%3E") repeat-x;
  background-size: auto 30px;
  opacity: .6;
  margin: 0;
}

/* ---------- 匾额式区块标题：朱砂序号 + 双线 ---------- */
.sec-no {
  border: 1px solid rgba(163, 58, 43, .55);
  color: var(--cinnabar);
  background: rgba(163, 58, 43, .05);
}
.section-head .eyebrow { color: var(--gold-deep); }
.section-head h2 { padding-bottom: 20px; }
.section-head h2::after {
  background: none;
  background-size: auto;
  width: 74px;
  height: 1px;
  background: #b3a67f;
  bottom: 0;
  opacity: .9;
}
.section-head h2::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  width: 74px;
  height: 1px;
  background: #b3a67f;
  opacity: .45;
}
.section-head h2 { position: relative; }

/* ---------- 竖排诗句 + 朱砂印章 ---------- */
.v-poem {
  position: absolute;
  right: 6%;
  top: 8%;
  writing-mode: vertical-rl;
  font-family: var(--font-serif);
  font-size: 15px;
  letter-spacing: .5em;
  color: var(--ink-soft);
  opacity: .85;
  user-select: none;
}
.v-poem .v-seal {
  display: inline-grid;
  place-items: center;
  margin-top: 16px;
  width: 26px;
  height: 26px;
  background: var(--cinnabar);
  color: #fdf6ec;
  font-size: 12px;
  letter-spacing: 1px;
  writing-mode: vertical-rl;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}
.brand-statement { position: relative; }

/* ---------- 墨竹装饰 ---------- */
.bamboo-deco {
  position: absolute;
  left: 4%;
  bottom: 0;
  width: 90px;
  opacity: .5;
  pointer-events: none;
  user-select: none;
}
.bamboo-deco img { width: 100%; height: auto; display: block; }

/* ---------- 仙鹤（CTA） ---------- */
.crane-deco {
  position: absolute;
  right: 4%;
  bottom: 6%;
  width: 190px;
  opacity: .6;
  pointer-events: none;
  z-index: 1;
  user-select: none;
}
.crane-deco img { width: 100%; display: block; }

/* ---------- 水墨远山（页脚前） ---------- */
.ink-mountains { margin-bottom: -2px; position: relative; z-index: 2; pointer-events: none; }
.ink-mountains img { width: 100%; display: block; }

/* ---------- 飞檐（页脚顶） ---------- */
.footer-eaves { margin-top: -2px; position: relative; z-index: 2; pointer-events: none; }
.footer-eaves img { width: 100%; display: block; }
.footer-eaves--light { filter: none; }

/* ---------- 页脚黛瓦 ---------- */
.footer { background: var(--bg-deep); }
.footer h4 { color: var(--gold-soft); }
.footer-contact li svg { color: var(--gold-soft); }

/* ---------- 深色区块 ---------- */
.section--deep { background: var(--bg-deep); }
.section--deep .step {
  border-color: rgba(216, 205, 166, .16);
  background: rgba(255, 255, 255, .04);
}

/* ---------- 按钮 ---------- */
.btn--primary {
  background: var(--primary);
  border: 1px solid rgba(216, 205, 166, .45);
  box-shadow: 0 10px 28px rgba(35, 79, 59, .28);
}
.btn--primary:hover { background: var(--primary-dark); }
.btn--ghost { color: var(--primary); border-color: rgba(47, 107, 80, .5); }

/* ---------- logo 月洞门 ---------- */
.logo-mark {
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(250, 248, 242, .85), 0 2px 10px rgba(35, 42, 39, .18);
}

/* ---------- 卡片细调 ---------- */
.scene:hover { border-color: rgba(163, 58, 43, .3); }
.product-card:hover { border-color: rgba(179, 160, 110, .55); }
.client-name:hover { border-color: var(--cinnabar); color: var(--cinnabar); }
.faq-item summary::after { color: var(--cinnabar); }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  .v-poem, .bamboo-deco, .crane-deco { display: none; }
  .lattice-band { height: 22px; background-size: auto 22px; }
  .moon-gate { border-width: 7px; }
}