/* ===========================================================
   乖哈哈官网 · 首页原型样式
   视觉规范取自 VI 手册（乖哈哈品牌升级-2.pdf）
   主蓝 #00A0E9（PANTONE P 115-8C）· 亮黄 #FFE33F · 棕褐 #9F8365 · 橙红 #E94827
   =========================================================== */

:root {
  /* ===== 品牌色板（取自 VI 手册，2026 版 - PANTONE 编号） ===== */
  --brand-blue: #00A0E9;          /* PANTONE P 115-8C · 主蓝 */
  --brand-blue-dark: #0E7FB0;     /* 推导的 hover/深色 */
  --brand-blue-light: #8FDCFF;
  --brand-yellow: #FFE33F;        /* PANTONE P 4-8 C */
  --brand-yellow-soft: #FFF3C4;
  --brand-orange: #E94827;        /* PANTONE P 45-7 C */
  --brand-brown: #9F8365;         /* PANTONE P 23-10 U */
  --brand-green: #9F8365;         /* VI 第 6 段绿（暖色辅助） */
  --cream: #FBF7F0;               /* 接近 PANTONE P 14-9 U 米色 */
  --cream-2: #F1E9DB;
  --ink: #222A33;
  --ink-soft: #5C6672;
  --ink-deep: #0E1F2A;
  --white: #ffffff;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 8px 28px rgba(34, 42, 51, 0.08);
  --shadow-lg: 0 18px 50px rgba(31, 176, 232, 0.20);
  --font-cn: "江城圆体", "Source Han Sans SC", "PingFang SC",
    "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-en: "Quicksand", "Arial Rounded MT Bold", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
/* 允许装饰照片伸出屏幕而不出现横向滚动条 */
html, body { overflow-x: clip; }

body {
  font-family: var(--font-cn);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* ---------- 顶部导航 ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--cream-2);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 80px; }
/* 合规页（business/privacy/agreement）用的是 .nav-row，此前无任何布局规则，
   导致与 .nav 表现不一致（无 80px 高度、无两端对齐）。此处对齐同一套。 */
.nav-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 80px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; }
.brand-logo { height: 48px; width: auto; object-fit: contain; display: block; }
.nav-links { display: flex; gap: 28px; font-size: 15px; color: var(--ink-soft); }
.nav-links a:hover { color: var(--brand-blue); }
.nav-cta {
  background: var(--brand-blue); color: #fff; padding: 9px 18px;
  border-radius: 999px; font-size: 14px; font-weight: 600;
  transition: background .2s;
}
.nav-cta:hover { background: var(--brand-blue-dark); }

/* ---------- Hero 首屏（p15 整图作模糊背景元素块） ---------- */
.hero {
  position: relative; overflow: hidden;
  /* 兜底色：VI 主蓝深色，确保图片未加载时也有质感 */
  background: #0a1d2e;
  color: #fff;
  isolation: isolate;
}
/* 整图块：p15 去文字版整图直接作为英雄页主视觉 */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: url('../assets/img-hero-clean.webp') center/cover no-repeat;
  z-index: -2;
}
/* 细点纹理 */
.hero .hero-grid::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.18) 1.2px, transparent 1.5px);
  background-size: 26px 26px; opacity: .35;
}
.hero-grid {
  display: grid; grid-template-columns: 1.25fr 0.75fr;
  gap: 32px; align-items: center;
  /* 左右必须显式写 24px：本元素同时挂着 .wrap（<div class="wrap hero-grid">），
     两条 padding 规则特异性相同且本条在后，写 0 会覆盖掉 .wrap 的 0 24px，
     导致 Hero 文字直接贴视口边缘、且比下方区块左右各宽 24px、左边缘不齐。 */
  padding: 96px 24px 108px; position: relative; z-index: 1;
}
.hero h1 { font-size: 50px; line-height: 1.2; font-weight: 800; letter-spacing: .5px; }
.hero h1 .hl { color: var(--brand-yellow); }
.hero-en {
  font-family: var(--font-en); font-size: 13px; font-weight: 700; letter-spacing: 2px;
  opacity: .85; margin-bottom: 8px; text-transform: uppercase;
  display: inline-block; padding: 5px 12px;
  background: rgba(255,255,255,.10); border-radius: 999px;
  backdrop-filter: blur(4px);
}
.hero .lead { font-size: 18px; margin: 20px 0 30px; opacity: .96; max-width: 520px; }
.hero .eyebrow {
  display: inline-block; background: rgba(255,255,255,.18);
  padding: 7px 16px; border-radius: 999px; font-size: 13px; margin-bottom: 18px;
  backdrop-filter: blur(4px);
}
/* Hero 右侧：用 p15 整图作「清晰元素块」浮出，作为视觉锚点 */
.hero-art {
  position: relative; display: flex; justify-content: center; align-items: center;
  width: 508px; max-width: 100%; height: 480px;
  border-radius: 0; transform: rotate(0deg);
}
.hero-art .art-frame {
  position: relative; width: 100%; max-width: 460px; aspect-ratio: 16/10;
  border-radius: 22px; overflow: hidden; transform: rotate(-2.5deg);
  box-shadow: 0 30px 70px rgba(0,0,0,.45), 0 0 0 8px rgba(255,255,255,.06);
  transition: transform .35s;
}
.hero-art .art-frame:hover { transform: rotate(0) scale(1.02); }
.hero-art .art-frame img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hero-art .art-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 40%);
}
.hero-art .art-tag {
  position: absolute; right: -10px; top: 12px;
  background: var(--brand-yellow); color: #3a2c00;
  font-weight: 800; font-size: 12px; padding: 6px 14px; border-radius: 999px;
  transform: rotate(6deg); box-shadow: 0 6px 14px rgba(0,0,0,.2);
  letter-spacing: 1px;
}

/* 关于页：p15/p16/p17 展开堆叠卡片 */
.hero-art.ip-stack {
  position: relative;
  width: min(100%, 680px);
  aspect-ratio: 1100/620; /* 与素材同比例，contain 下图片贴合卡片、零留白 */
  display: flex; justify-content: center; align-items: center;
  transform: translateX(34px); /* 卡片展示区域向右偏移 */
}
.ip-stack .stack {
  position: relative; width: 100%; height: 100%;
}
.ip-stack .stack-card {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; display: block;
  background: #fff;
  border-radius: 16px; cursor: pointer;
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
  transition: transform .35s ease, box-shadow .35s ease;
}
/* 默认展开：三张错位堆叠，露出彼此的边角（错位幅度较大，层次感更强） */
.ip-stack .stack-card:nth-child(1) { transform: rotate(-6deg) translate(-30px, 18px); z-index: 3; }
.ip-stack .stack-card:nth-child(2) { transform: rotate(3deg) translate(20px, -8px); z-index: 2; }
.ip-stack .stack-card:nth-child(3) { transform: rotate(9deg) translate(36px, 26px); z-index: 1; }
/* 激活态：置顶摆正 */
.ip-stack .stack-card.active {
  transform: rotate(0) translate(0, 0);
  z-index: 10;
  box-shadow: 0 22px 44px rgba(0,0,0,.32);
}
/* art-tag 永远浮在堆叠卡片最顶层 */
.ip-stack .art-tag { z-index: 20; }

/* STAY 圆形印章（取自 VI 的 STAY stamp 语言） */
.stay-badge {
  position: absolute; right: 8%; bottom: 18%;
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--brand-orange); color: #fff;
  display: grid; place-items: center; text-align: center;
  font-family: var(--font-en); font-weight: 700; line-height: 1.05;
  box-shadow: 0 10px 24px rgba(242,106,27,.4);
  transform: rotate(-12deg);
  z-index: 2;
}
.stay-badge span { font-size: 26px; letter-spacing: 1px; }
.stay-badge small { font-size: 9px; opacity: .9; display: block; margin-top: 2px; }

/* 子页 hero 变体：图片放大 + 差异化倾斜角度（solutions/cases/map/faq） */
.hero-art.zoom-a .art-frame,
.hero-art.zoom-b .art-frame,
.hero-art.zoom-c .art-frame,
.hero-art.zoom-d .art-frame {
  width: 112%;
  max-width: 515px;
}
.hero-art.zoom-a .art-frame { transform: rotate(-4deg); }
.hero-art.zoom-a .art-frame:hover { transform: rotate(0) scale(1.03); }
.hero-art.zoom-b .art-frame { transform: rotate(2.5deg); }
.hero-art.zoom-b .art-frame:hover { transform: rotate(0) scale(1.03); }
.hero-art.zoom-c .art-frame { transform: rotate(-1.5deg); }
.hero-art.zoom-c .art-frame:hover { transform: rotate(0) scale(1.03); }
.hero-art.zoom-d .art-frame { transform: rotate(4deg); }
.hero-art.zoom-d .art-frame:hover { transform: rotate(0) scale(1.03); }

/* 搜索入口 */
.search-box {
  background: #fff; border-radius: var(--radius); padding: 14px;
  display: flex; gap: 10px; box-shadow: var(--shadow-lg); max-width: 520px;
}
.search-box input, .search-box select {
  border: 1px solid var(--cream-2); border-radius: 10px; padding: 12px 14px;
  font-size: 15px; font-family: inherit; color: var(--ink); background: var(--cream);
}
.search-box input { flex: 1; min-width: 0; }
.search-box button {
  background: var(--brand-blue); color: #fff; border: 0; border-radius: 10px;
  padding: 0 22px; font-size: 15px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.search-box button:hover { background: var(--brand-blue-dark); }

/* 核心数字 */
.stats { display: flex; gap: 36px; margin-top: 34px; flex-wrap: wrap; }
.stat .num { font-size: 30px; font-weight: 800; }
.stat .label { font-size: 13px; opacity: .9; }

/* ---------- 区块通用 ---------- */
section { padding: 84px 0; }
.section-head { text-align: center; margin-bottom: 48px; }
.section-head .kicker { color: var(--brand-blue); font-weight: 700; font-size: 13px; letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 8px; }
.section-head h2 { font-size: 34px; margin-top: 6px; font-weight: 800; line-height: 1.25; }
.section-head h2 small {
  display: block; font-family: var(--font-en); font-size: 13px; font-weight: 600;
  letter-spacing: 2px; color: var(--brand-blue); opacity: .65; margin-top: 8px; text-transform: uppercase;
}
.section-head p { color: var(--ink-soft); margin-top: 12px; font-size: 16px; }

/* 三入口 / 方案卡片 */
.entries { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.entry {
  background: #fff; border-radius: var(--radius); padding: 28px;
  box-shadow: var(--shadow); transition: transform .25s, box-shadow .25s;
  border: 1px solid rgba(31,176,232,.08);
}
.entry:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.entry .ico {
  width: 56px; height: 56px; border-radius: var(--radius-sm); display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand-blue-light), rgba(255,255,255,.8));
  margin-bottom: 18px; font-size: 26px;
}
.entry h3 { font-size: 19px; margin-bottom: 10px; }
.entry p { color: var(--ink-soft); font-size: 14px; line-height: 1.65; }
.entry .more { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; color: var(--brand-blue); font-weight: 700; font-size: 14px; }
.entry .more::after { content: "→"; transition: transform .2s; }
.entry:hover .more::after { transform: translateX(4px); }

/* 合作酒店展示区 */
.hotels { background: var(--cream-2); }
.filter-bar { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
.chip {
  border: 1px solid #ddd2c2; background: #fff; border-radius: 999px;
  padding: 8px 16px; font-size: 14px; color: var(--ink-soft); cursor: pointer;
}
.chip.active, .chip:hover { background: var(--brand-blue); color: #fff; border-color: var(--brand-blue); }

.hotel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.hotel-card {
  background: #fff; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.hotel-photo { height: 150px; background: linear-gradient(135deg, #cdeafb, #e9f6fd);
  display: grid; place-items: center; color: var(--brand-blue); }
.hotel-body { padding: 18px 20px 22px; }
.badge-coop {
  display: inline-flex; align-items: center; gap: 5px; background: var(--brand-yellow);
  color: #6b4e00; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
}
.hotel-body h3 { font-size: 18px; margin: 10px 0 6px; }
.hotel-meta { font-size: 13px; color: var(--ink-soft); }
.policy { margin-top: 12px; font-size: 13px; background: var(--cream); border-radius: 10px; padding: 10px 12px; }
.policy b { color: var(--brand-orange); }
.hotel-cta { margin-top: 14px; }
.hotel-cta a {
  display: block; text-align: center; background: var(--brand-blue); color: #fff;
  padding: 10px; border-radius: 10px; font-weight: 600; font-size: 14px;
}
.note-line { text-align: center; color: var(--ink-soft); font-size: 13px; margin-top: 26px; }

/* ===== 酒店页 · 轻检索交互 ===== */
.filter-tools { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.kw-input {
  flex: 1; min-width: 240px; padding: 12px 16px; border: 1.5px solid #e3e3e3;
  border-radius: 12px; font-size: 15px; font-family: var(--font-cn); background: #fff;
}
.kw-input:focus { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(0,160,233,.15); }
.result-count { font-size: 14px; color: var(--ink-soft); font-weight: 600; margin: 0; white-space: nowrap; }
.result-count::before { content: "🔎 "; }
.empty-state { text-align: center; color: var(--ink-soft); padding: 40px 0; font-size: 15px; }
.hotel-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.filter-bar + .filter-bar { margin-top: 0; }

/* 内容/价值区 */
.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.value {
  position: relative; overflow: hidden;
  background: #fff; border-radius: var(--radius); padding: 32px 26px;
  box-shadow: var(--shadow); text-align: center;
  border: 1px solid rgba(31,176,232,.06);
  transition: transform .3s ease, box-shadow .3s ease;
}
.value::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-yellow));
  opacity: 0; transition: opacity .3s ease;
}
.value:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.12); }
.value:hover::before { opacity: 1; }
.value-ico {
  width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; background: #EAF7FE;
  transition: transform .3s ease;
}
.value:hover .value-ico { transform: scale(1.1) rotate(-6deg); }
.value h3 { font-size: 19px; margin-bottom: 10px; }
.value p { color: var(--ink-soft); font-size: 14px; line-height: 1.7; }

/* 关于页 · 品牌理念：3 张卡整排居中 */
body.page-about .value-grid { grid-template-columns: repeat(3, 1fr); max-width: 960px; margin: 0 auto; }
/* 品牌理念卡：slogan 主句 + 补充说明 */
.value-slogan { color: var(--ink); font-size: 15.5px; font-weight: 700; line-height: 1.6; }
.value-desc {
  margin-top: 12px; padding-top: 12px; text-align: left;
  border-top: 1px dashed rgba(31,176,232,.22);
}
.idea-outro {
  max-width: 720px; margin: 40px auto 0; text-align: center;
  font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.8;
}
.idea-outro::before {
  content: ""; display: block; width: 48px; height: 3px; border-radius: 2px;
  background: var(--brand-yellow); margin: 0 auto 18px;
}
@media (max-width: 768px) {
  .value-desc { text-align: center; }
  .idea-outro { font-size: 16px; margin-top: 28px; }
}

/* 品牌信任 */
.trust { background: var(--brand-blue); color: #fff; }
.trust .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.trust h2 { font-size: 30px; }
.trust h2 small { display: block; font-family: var(--font-en); font-size: 13px; font-weight: 600;
  letter-spacing: 2px; color: var(--brand-yellow); opacity: .8; margin-top: 8px; text-transform: uppercase; }
.trust p { opacity: .95; margin-top: 14px; }
.pillars { display: flex; flex-direction: column; gap: 14px; }
.pillar { display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,.12);
  padding: 14px 18px; border-radius: 12px; }
.pillar .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--brand-yellow); }
.trust-outro { font-size: 17px; font-weight: 700; color: var(--brand-yellow); margin-top: 16px; }
.trust-cta-text { margin-top: 16px; opacity: .9; }

/* 品牌合作墙 */
.brand-wall { background: #fff; padding: 72px 0; }
.bw-logos {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 16px;
  max-width: 1200px; margin: 0 auto;
}
.bw-logo {
  position: relative;
  width: 150px; height: 96px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px;
  background: #fff; border-radius: var(--radius-sm);
  cursor: default;
  transition: transform .25s, box-shadow .25s;
}
.bw-logo::after {
  content: ""; position: absolute; inset: 0;
  border: 1px solid #e6edf4; border-radius: var(--radius-sm);
  pointer-events: none; z-index: 2;
  transition: border-color .25s;
}
.bw-logo:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.bw-logo:hover::after { border-color: var(--brand-blue-light); }
.bw-logo img { max-width: 90%; max-height: 72px; object-fit: contain; display: block; }
.bw-logo.bw-cta {
  background: var(--cream);
  text-decoration: none;
  cursor: pointer;
}
.bw-logo.bw-cta::after { border: 1px dashed #c9dbe8; }
.bw-logo.bw-cta:hover::after { border-color: var(--brand-blue); }
.bw-cta-plus { font-size: 26px; line-height: 1; color: var(--brand-blue); font-weight: 400; }
.bw-cta-text { font-size: 13px; color: var(--brand-blue); font-weight: 700; }
.bw-ico { font-size: 28px; line-height: 1; }
.bw-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.bw-tag { font-size: 10px; letter-spacing: 1px; color: var(--ink-soft); }
.bw-note { text-align: center; color: var(--ink-soft); font-size: 12.5px; margin-top: 26px; }

/* 首页 · 乖哈哈资讯（左图右文焦点卡 · 轮播切换） */
.news-date { font-size: 12px; color: var(--ink-soft); font-weight: 600; letter-spacing: .3px; }
.news-carousel { position: relative; }
.nc-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid #e3eaf1;
  background: #fff; color: var(--ink); font-size: 16px; line-height: 1;
  cursor: pointer; box-shadow: var(--shadow); transition: all .2s;
  display: grid; place-items: center;
}
.nc-arrow:hover { background: var(--brand-blue); color: #fff; border-color: var(--brand-blue); }
.nc-prev { left: -20px; }
.nc-next { right: -20px; }
.nc-dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.nc-dots button {
  width: 8px; height: 8px; padding: 0; border: none; border-radius: 999px;
  background: #cfd9e2; cursor: pointer; transition: all .25s;
}
.nc-dots button.active { width: 24px; background: var(--brand-blue); }
.nc-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }

/* FAQ 预览 */
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item { background: #fff; border-radius: 12px; padding: 18px 22px; margin-bottom: 12px; box-shadow: var(--shadow); }
.faq-item h4 { font-size: 16px; margin-bottom: 6px; }
.faq-item p { color: var(--ink-soft); font-size: 14px; }

/* 页脚 */
.site-footer { background: #16222e; color: #c8d2dc; padding: 52px 0 28px; font-size: 14px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.site-footer h4 { color: #fff; font-size: 15px; margin-bottom: 14px; }
.site-footer a { color: #c8d2dc; display: block; margin-bottom: 8px; }
.site-footer a:hover { color: var(--brand-yellow); }
.qr { width: 96px; height: 96px; background: #fff; border-radius: 10px; display: grid; place-items: center; color: var(--ink-soft); font-size: 11px; }
.foot-bottom { border-top: 1px solid #283542; margin-top: 36px; padding-top: 18px; text-align: center; color: #7e8b98; font-size: 13px; }

/* 响应式 */
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero .lead { margin-left: auto; margin-right: auto; }
  .stats { justify-content: center; }
  .entries, .hotel-grid, .value-grid { grid-template-columns: 1fr 1fr; }
  .trust .wrap { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; }
}
@media (max-width: 560px) {
  .entries, .hotel-grid, .value-grid, .foot-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 34px; }
}

/* ===========================================================
   子页通用（about / hotels / city / guides / faq）
   =========================================================== */

/* 内页头 */
.subhero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #00A0E9 0%, #2bbcf5 60%, #6fd6f7 100%);
  color: #fff;
}
.subhero-grid {
  display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items: center;
  padding: 52px 0 60px;
  border-radius: 0;
  width: min(1089px, 100%);
  height: 592px;
  margin: 0 auto;
}
.subhero h1 { font-size: 38px; font-weight: 800; line-height: 1.25; }
.subhero .lead { font-size: 17px; margin-top: 14px; opacity: .95; max-width: 520px; }
.subhero .search-box { margin-top: 26px; }

/* 面包屑 */
.breadcrumb { font-size: 13px; opacity: .9; margin-bottom: 14px; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { margin: 0 6px; opacity: .6; }

/* 当前页导航高亮 */
.nav-links a.active { color: var(--brand-blue); font-weight: 700; }

/* 攻略卡 */
.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.guide-card {
  background: #fff; border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s;
}
.guide-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.guide-card .tag {
  display: inline-block; background: var(--cream-2); color: var(--brand-blue);
  font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  margin-bottom: 12px; width: fit-content;
}
.guide-card h3 { font-size: 19px; margin-bottom: 8px; }
.guide-card p { color: var(--ink-soft); font-size: 14px; }
.guide-card .more { margin-top: 14px; color: var(--brand-blue); font-weight: 600; font-size: 14px; cursor: pointer; user-select: none; }
.guide-card .more:hover { text-decoration: underline; }
.guide-full { display: none; margin-top: 16px; border-top: 1px solid var(--cream-2); padding-top: 16px; }
.guide-card.expanded .guide-full { display: block; }
.guide-full ol { margin: 0; padding-left: 20px; color: var(--ink-soft); font-size: 14px; }
.guide-full li { margin-bottom: 10px; line-height: 1.65; }
.guide-full li b { color: var(--ink); }

/* 攻略子页：配图占位 / 更新时间 / 分享按钮 / 返回 FAQ */
.guide-cover { aspect-ratio: 16 / 9; border-radius: 10px; background: var(--cream-2); color: var(--ink-soft); display: grid; place-items: center; font-size: 13px; margin-bottom: 16px; text-align: center; padding: 0 12px; }
.guide-updated { font-size: 12px; color: var(--ink-soft); margin: 2px 0 10px; }
.guide-updated .ph { color: #b9b2a6; font-style: italic; }
.guide-actions { display: flex; align-items: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.guide-actions .more { margin-top: 0; }
.share-btn { font-size: 13px; font-weight: 600; color: #fff; background: var(--brand-blue); border: none; border-radius: 999px; padding: 6px 14px; cursor: pointer; transition: background .2s; }
.share-btn:hover { background: #1690c4; }
.back-faq { margin: 0 0 18px; }
.back-faq a { color: var(--brand-blue); font-weight: 600; font-size: 14px; text-decoration: none; }
.back-faq a:hover { text-decoration: underline; }

/* FAQ 内攻略摘要卡（跳转独立子页） */
.g-teaser-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 800px; margin: 0 auto; }
.g-teaser { display: block; background: #fff; border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s; }
.g-teaser:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.g-teaser .tag { display: inline-block; background: var(--cream-2); color: var(--brand-blue); font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; margin-bottom: 12px; }
.g-teaser h3 { font-size: 18px; margin-bottom: 8px; }
.g-teaser p { color: var(--ink-soft); font-size: 14px; }
.g-teaser-go { display: inline-block; margin-top: 14px; color: var(--brand-blue); font-weight: 600; font-size: 14px; }
.g-teaser-cover { aspect-ratio: 16 / 9; border-radius: 10px; background: var(--cream-2); color: var(--ink-soft); display: grid; place-items: center; font-size: 13px; margin-bottom: 16px; text-align: center; padding: 0 12px; }

/* FAQ 折叠 */
.faq-details { max-width: 800px; margin: 0 auto; }
.faq-details details {
  background: #fff; border-radius: 12px; padding: 4px 22px; margin-bottom: 12px;
  box-shadow: var(--shadow);
}
.faq-details summary {
  cursor: pointer; font-weight: 600; font-size: 16px; padding: 16px 0;
  list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.faq-details summary::-webkit-details-marker { display: none; }
.faq-details summary::after { content: "+"; color: var(--brand-blue); font-size: 22px; font-weight: 700; }
.faq-details details[open] summary::after { content: "−"; }
.faq-details details p { color: var(--ink-soft); font-size: 14px; padding-bottom: 16px; }

/* FAQ 分类导航与分类标题 */
.faq-nav { display: flex; flex-wrap: wrap; gap: 10px; max-width: 800px; margin: 0 auto 28px; justify-content: center; }
.faq-nav a { font-size: 14px; font-weight: 600; color: var(--brand-blue); background: #fff; border: 1px solid var(--cream-2); border-radius: 999px; padding: 7px 16px; text-decoration: none; transition: background .2s, color .2s; }
.faq-nav a:hover { background: var(--brand-blue); color: #fff; }
.faq-cat-block { margin-bottom: 30px; }
.faq-cat-block:last-child { margin-bottom: 0; }
.faq-cat { font-size: 18px; font-weight: 700; color: var(--ink); margin: 0 0 14px; padding-left: 12px; border-left: 4px solid var(--brand-blue); }

/* ===== FAQ 新版：搜索 + 双分类筛选 + 分组（30 条） ===== */

/* 工具栏：搜索框 + 分类按钮 */
.faq-toolbar {
  max-width: 800px; margin: 0 auto 32px;
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
}
.faq-search-box {
  flex: 1 1 260px; display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--cream-2); border-radius: 999px;
  padding: 10px 16px; box-shadow: var(--shadow);
  transition: border-color .2s, box-shadow .2s;
}
.faq-search-box:focus-within { border-color: var(--brand-blue); box-shadow: 0 8px 28px rgba(0, 160, 233, 0.16); }
.faq-search-ico { font-size: 15px; opacity: .65; flex: none; }
.faq-search-box input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-size: 15px; color: var(--ink); font-family: inherit;
}
.faq-search-box input::placeholder { color: var(--ink-soft); }
.faq-search-box input::-webkit-search-cancel-button { cursor: pointer; }

.faq-cats { display: flex; flex-wrap: wrap; gap: 10px; }
.faq-cat-btn {
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1;
  color: var(--brand-blue); background: #fff;
  border: 1px solid var(--cream-2); border-radius: 999px; padding: 10px 16px;
  cursor: pointer; white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}
.faq-cat-btn:hover { border-color: var(--brand-blue); background: #fff; }
.faq-cat-btn.active { background: var(--brand-blue); color: #fff; border-color: var(--brand-blue); }

/* 分组与子分类 */
.faq-group { max-width: 800px; margin: 0 auto 40px; }
.faq-group[hidden] { display: none; }
.faq-group-title {
  font-size: 20px; font-weight: 700; color: var(--ink);
  margin: 0 0 18px; text-align: center;
}
.faq-subcat { margin-bottom: 26px; }
.faq-subcat:last-child { margin-bottom: 0; }
.faq-subcat[hidden] { display: none; }
.faq-subcat h4 {
  font-size: 16px; font-weight: 700; color: var(--ink);
  margin: 0 0 12px; padding-left: 12px; border-left: 4px solid var(--brand-yellow);
}

/* 折叠卡片：与 .faq-details 视觉保持一致 */
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-list details {
  background: #fff; border-radius: 12px; padding: 4px 22px; margin-bottom: 12px;
  box-shadow: var(--shadow);
}
.faq-list summary {
  cursor: pointer; font-weight: 600; font-size: 16px; padding: 16px 0;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list details[hidden] { display: none; }
.faq-list summary::after {
  content: "+"; color: var(--brand-blue); font-size: 22px; font-weight: 700; flex: none;
}
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { color: var(--ink-soft); font-size: 14px; padding-bottom: 16px; line-height: 1.8; }

/* 空状态 */
.faq-empty {
  max-width: 760px; margin: 0 auto; text-align: center;
  color: var(--ink-soft); font-size: 15px; padding: 36px 0;
}
.faq-empty[hidden] { display: none; }

/* 移动端：工具栏纵向堆叠，热区放大 */
@media (max-width: 640px) {
  .faq-toolbar { flex-direction: column; align-items: stretch; gap: 12px; }
  .faq-cats { justify-content: center; }
  .faq-cat-btn { padding: 12px 18px; }
  .faq-list details { padding: 4px 16px; }
  .faq-list summary { font-size: 15px; }
}

/* 城市页 */
.city-cover {
  height: 180px; border-radius: var(--radius); background: linear-gradient(135deg, #cdeafb, #e9f6fd);
  display: grid; place-items: center; color: var(--brand-blue); margin-bottom: 8px;
}
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cat-card { background: #fff; border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.cat-card h3 { font-size: 17px; margin-bottom: 6px; }
.cat-card p { color: var(--ink-soft); font-size: 14px; }
.notice {
  background: var(--cream-2); border-left: 4px solid var(--brand-yellow);
  padding: 16px 20px; border-radius: 10px; font-size: 14px; color: var(--ink-soft); margin-top: 24px;
}

/* 子页响应式补充 */
@media (max-width: 880px) {
  .subhero-grid { grid-template-columns: 1fr; text-align: center; height: auto; }
  .guide-grid, .cat-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .guide-grid, .cat-grid { grid-template-columns: 1fr; }
  .subhero h1 { font-size: 30px; }
}

/* ===========================================================
   首页 B 端改造新增样式
   =========================================================== */

/* Hero 行动按钮（VI 胶囊风格） */
.hero-actions { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px; background: var(--brand-yellow); color: #3a2c00;
  padding: 14px 30px; border-radius: 999px; font-weight: 800; font-size: 15px;
  transition: transform .15s, box-shadow .2s; box-shadow: 0 8px 22px rgba(255,216,63,.45);
}
.btn-primary::after { content: "→"; }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(255,216,63,.55); }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.12); color: #fff;
  padding: 14px 30px; border-radius: 999px; font-weight: 700; font-size: 15px;
  border: 1px solid rgba(255,255,255,.45); backdrop-filter: blur(4px); transition: background .2s;
}
.btn-ghost:hover { background: rgba(255,255,255,.24); }

/* 优秀案例：弱化预订感，强化合作展示 */
.hotel-card .hotel-cta a {
  display: block; text-align: center; background: var(--brand-blue); color: #fff;
  padding: 10px; border-radius: 10px; font-weight: 600; font-size: 14px; text-decoration: none;
}
.hotel-card .hotel-cta a:hover { background: var(--brand-blue-dark); }

/* ===== 宠物友好地图（延伸板块） ===== */
/* 多级联动筛选 */
.map-filter {
  background: #fff; border-radius: var(--radius); padding: 18px 20px;
  box-shadow: var(--shadow); border: 1px solid rgba(31,176,232,.08);
  margin-bottom: 22px;
}
.mf-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.mf-row label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--ink-soft); letter-spacing: 1px;
}
.mf-row select {
  width: 100%; border: 1px solid var(--cream-2); border-radius: 10px;
  padding: 10px 12px; font-size: 15px; font-family: inherit; color: var(--ink);
  background: var(--cream); cursor: pointer; transition: border-color .2s, box-shadow .2s;
}
.mf-row select:focus { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(0,160,233,.15); }
.map-crumb {
  margin-top: 12px; font-size: 13px; color: var(--brand-blue);
  background: var(--cream); border-radius: 999px; padding: 6px 14px;
  width: fit-content; font-weight: 600;
}
.map-layout { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 36px; align-items: stretch; }
.map-canvas {
  position: relative; height: 540px; min-height: 400px; border-radius: var(--radius);
  border: 1px solid #dceaf4; overflow: hidden; background: #eaf6fd;
}
/* 主页地图区品牌素材块（替换轻量地图占位） */
.map-feature-img {
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid #dceaf4; box-shadow: var(--shadow);
  background: #eaf6fd;
}
.map-feature-img img {
  width: 100%; height: 100%; display: block; object-fit: cover;
  aspect-ratio: 16 / 10;
}
.map-feature-img .img-caption {
  position: absolute; left: 16px; bottom: 16px;
  background: rgba(255,255,255,.92); color: var(--ink);
  padding: 6px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  box-shadow: var(--shadow);
}
.map-canvas .leaflet-container {
  width: 100%; height: 100%; font-family: inherit; background: #eaf6fd;
}
.map-canvas .leaflet-tooltip {
  font-family: inherit; font-size: 12px; font-weight: 700;
  color: var(--ink); background: #fff; border-radius: 999px;
  border: none; box-shadow: var(--shadow); padding: 4px 10px;
}
.map-canvas .leaflet-tooltip-top:before { display: none; }
/* 降低地图内部层级，避免压过站点导航 */
.map-canvas .leaflet-pane { z-index: 0; }
.map-canvas .leaflet-top, .map-canvas .leaflet-bottom { z-index: 300; }
.map-pin-wrap { background: transparent; border: none; }
.map-pin {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.18));
  transition: transform .2s ease;
}
.map-pin i {
  font-style: normal; font-size: 24px; line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.15));
}
.map-pin .pin-label {
  font-size: 11px; font-weight: 700; color: var(--ink); background: rgba(255,255,255,.95);
  padding: 2px 8px; border-radius: 999px; box-shadow: var(--shadow);
  white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis;
}
.map-pin-wrap:hover .map-pin i { transform: scale(1.3); }
.map-empty {
  position: absolute; inset: 0; z-index: 500;
  display: grid; place-items: center;
  color: var(--ink-soft); font-size: 14px;
  background: rgba(255,255,255,.5); pointer-events: none;
  border-radius: var(--radius);
}
.map-empty-li { text-align: center; color: var(--ink-soft) !important; }
.map-hint { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  font-size: 12px; color: var(--ink-soft); background: rgba(255,255,255,.85);
  padding: 6px 16px; border-radius: 999px; white-space: nowrap; box-shadow: var(--shadow); }
.map-side { display: flex; flex-direction: column; justify-content: center; }
.map-side h3 { font-size: 22px; margin-bottom: 16px; }
.map-list { list-style: none; display: grid; gap: 12px; }
.map-list li { background: #fff; border-radius: 12px; padding: 14px 18px; box-shadow: var(--shadow); font-size: 14px; color: var(--ink-soft); border: 1px solid rgba(31,176,232,.08); }
.map-list b { color: var(--ink); }
.map-item { display: flex; align-items: center; gap: 12px; }
.map-item .mi-ico {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 18px;
  background: #EAF7FE;
}
.map-item .mi-meta { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.map-tip { margin: 18px 0; font-size: 13px; color: var(--ink-soft); background: var(--cream-2);
  border-left: 4px solid var(--brand-yellow); padding: 14px 16px; border-radius: 12px; }

/* ===== 意向合作联系（突出） ===== */
.contact { background: linear-gradient(135deg, #0b1f2c 0%, #16323f 100%); color: #eaf2f7; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.contact .kicker { color: var(--brand-yellow); font-weight: 700; letter-spacing: 2px; font-size: 13px; text-transform: uppercase; }
.contact-lead h2 { font-size: 30px; margin: 10px 0 14px; line-height: 1.3; }
.contact-lead h2 small { display: block; font-family: var(--font-en); font-size: 13px; font-weight: 600;
  letter-spacing: 2px; color: var(--brand-yellow); opacity: .7; margin-top: 8px; text-transform: uppercase; }
.contact-lead p { color: #b9c8d2; }
.contact-points { list-style: none; margin-top: 20px; display: grid; gap: 12px; }
.contact-points li { font-size: 15px; color: #dbe6ed; }
.contact-points b { color: #fff; }
.contact-qr {
  margin-top: 24px; display: flex; align-items: center; gap: 16px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px; padding: 14px 16px;
}
.contact-qr img { width: 92px; height: 92px; border-radius: 8px; object-fit: cover; }
.contact-qr span { font-size: 13px; color: #dbe6ed; line-height: 1.6; }

.contact-form { background: #fff; color: var(--ink); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-lg); }
.contact-form .field { margin-bottom: 16px; }
.contact-form label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%; border: 1.5px solid #e3e3e3; border-radius: 12px; padding: 12px 14px;
  font-size: 15px; font-family: var(--font-cn); background: #fff; color: var(--ink); resize: vertical;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(0,160,233,.15);
}
.contact-form .btn-primary { width: 100%; text-align: center; }
.contact-form .full { display: block; }
.form-note { font-size: 12px; color: var(--ink-soft); margin-top: 12px; text-align: center; }

/* 合作表单提交后的邮件内容兜底面板：适配无客户端 / 网页邮箱（QQ 邮箱网页版等）用户 */
.mail-fallback { display: none; margin-top: 16px; padding: 14px 16px; border: 1.5px dashed var(--brand-blue); border-radius: 12px; background: #f3fafe; text-align: left; }
.mail-fallback.show { display: block; }
.mail-fallback .mf-title { font-size: 13px; font-weight: 700; color: var(--brand-blue); margin-bottom: 8px; }
.mail-fallback textarea { width: 100%; height: 150px; border: 1px solid #d6e6ef; border-radius: 8px; padding: 10px; font-size: 13px; font-family: var(--font-cn); line-height: 1.6; resize: vertical; background: #fff; color: var(--ink); }
.mail-fallback .mf-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.mail-fallback .mf-copy { border: 1.5px solid var(--brand-blue); background: #fff; color: var(--brand-blue); padding: 8px 18px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .2s ease; }
.mail-fallback .mf-copy:hover { background: var(--brand-blue); color: #fff; }
.mail-fallback .mf-gmail { font-size: 13px; font-weight: 600; color: var(--brand-blue); text-decoration: none; }
.mail-fallback .mf-gmail:hover { text-decoration: underline; }
.mail-fallback .mf-hint { font-size: 12px; color: var(--ink-soft); margin-top: 10px; line-height: 1.7; }

/* ===== 首页橱窗组件：解决方案焦点大卡（p16 整图作元素块） ===== */
.solution-feature {
  display: grid; grid-template-columns: 320px 1fr; gap: 36px; align-items: center;
  background: linear-gradient(120deg, #EAF7FE 0%, #FFFFFF 55%);
  border: 1px solid #DCEFFA; border-radius: var(--radius); padding: 28px 38px;
  box-shadow: var(--shadow); margin-bottom: 32px;
  transition: transform .25s, box-shadow .25s; overflow: hidden;
}
.solution-feature:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.sf-photo {
  position: relative; height: 220px; border-radius: 16px; overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
}
.sf-photo img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s; }
.solution-feature:hover .sf-photo img { transform: scale(1.05); }
.sf-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.10), transparent 50%);
}
.sf-body h3 { font-size: 26px; margin: 10px 0 12px; }
.sf-body p { color: var(--ink-soft); font-size: 15px; max-width: 640px; line-height: 1.65; }
.sf-body .more { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; color: var(--brand-blue); font-weight: 700; font-size: 14px; }
.sf-body .more::after { content: "→"; transition: transform .2s; }
.solution-feature:hover .more::after { transform: translateX(4px); }

/* entries 内的链接化 */
.entries a.entry { color: inherit; }
.entries a.entry:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

/* ===== 首页橱窗组件：案例焦点大卡（p17 整图作元素块） ===== */
.case-feature {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 0;
  background: #fff; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); transition: transform .25s, box-shadow .25s; margin-bottom: 8px;
  border: 1px solid rgba(31,176,232,.08);
}
.case-feature:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.cf-photo {
  position: relative; min-height: 360px; overflow: hidden;
  background: linear-gradient(135deg, #00A0E9, #57C8F2 60%, #8FDCFF);
}
.cf-photo img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s; }
.case-feature:hover .cf-photo img { transform: scale(1.04); }
.cf-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(105deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.05) 100%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 30%);
}
.cf-photo .cf-tag {
  position: absolute; left: 22px; top: 22px; z-index: 2;
  background: rgba(255,255,255,.92); color: #1FB0E8;
  font-size: 12px; font-weight: 800; padding: 6px 14px; border-radius: 999px;
  letter-spacing: 1px; backdrop-filter: blur(4px);
}
.cf-body { padding: 38px 42px; display: flex; flex-direction: column; justify-content: center; }
.cf-body h3 { font-size: 26px; margin: 10px 0 14px; }
.cf-lead { color: var(--ink-soft); font-size: 15px; line-height: 1.7; }
.cf-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; }
.cf-tags span { background: var(--cream-2); color: var(--brand-blue); font-size: 12px; font-weight: 700;
  padding: 6px 14px; border-radius: 999px; }
.cf-body .more { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; color: var(--brand-blue); font-weight: 700; font-size: 14px; }
.cf-body .more::after { content: "→"; transition: transform .2s; }
.case-feature:hover .more::after { transform: translateX(4px); }

/* 响应式：新增板块 */
@media (max-width: 880px) {
  .map-layout, .contact-grid { grid-template-columns: 1fr; }
  .map-canvas { height: 380px; min-height: 280px; }
  .mf-row { grid-template-columns: 1fr 1fr; }
  .solution-feature { grid-template-columns: 1fr; text-align: center; padding: 24px; }
  .sf-photo { height: 180px; }
  .case-feature { grid-template-columns: 1fr; }
  .cf-photo { min-height: 200px; }
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-art { min-height: 320px; }
  .hero-art .art-frame { max-width: 360px; }
  .hero .lead { margin-left: auto; margin-right: auto; }
  .stats { justify-content: center; }
}
@media (max-width: 560px) {
  .hero-actions { justify-content: center; }
  .contact-lead h2 { font-size: 26px; }
  .hero h1 { font-size: 34px; }
  .mf-row { grid-template-columns: 1fr; }
  .map-pin .pin-label { display: none; }
  .map-canvas { height: 320px; }
  .bw-logo { width: 118px; height: 82px; }
  .bw-name { font-size: 12px; }
  .nc-prev { left: 8px; }
  .nc-next { right: 8px; }
}

/* ===== 案例拼贴网格（杂志 editorial：出血布局 + 两侧散落照片 + 品牌色边框） ===== */
.cases-gallery { position: relative; }
.case-grid {
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 320px; gap: 20px;
}
/* 拼贴位图：①蜜悦竖长(r1-2,c1) ③W横宽(r1,c2-3) ④悦榕方(r2,c2) ②大乐方(r2,c3) ⑤凯悦横宽(r3,c1-2) ⑥花筑方(r3,c3) */
.case-card:nth-child(1) { grid-area: 1 / 1 / 3 / 2; }
.case-card:nth-child(3) { grid-area: 1 / 2 / 2 / 4; }
.case-card:nth-child(4) { grid-area: 2 / 2 / 3 / 3; }
.case-card:nth-child(2) { grid-area: 2 / 3 / 3 / 4; }
.case-card:nth-child(5) { grid-area: 3 / 1 / 4 / 3; }
.case-card:nth-child(6) { grid-area: 3 / 3 / 4 / 4; }

.case-card {
  position: relative; z-index: 2; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); background: var(--ink-deep);
  transition: transform .25s, box-shadow .25s; cursor: pointer;
}
.case-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
/* 品牌色边框循环（蓝/白/黄）：①蓝 ②白 ③白 ④黄 ⑤黄 ⑥蓝 —— 每行三色齐全、对角呼应 */
.case-card:nth-child(1) { border: 3px solid var(--brand-blue); }
.case-card:nth-child(2) { border: 3px solid #ffffff; }
.case-card:nth-child(3) { border: 3px solid #ffffff; }
.case-card:nth-child(4) { border: 3px solid var(--brand-yellow); }
.case-card:nth-child(5) { border: 3px solid var(--brand-yellow); }
.case-card:nth-child(6) { border: 3px solid var(--brand-blue); }
.cc-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.case-card:hover .cc-img { transform: scale(1.06); }
.cc-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: flex-end; padding: 22px 24px;
  background: linear-gradient(180deg, rgba(11,29,38,0) 32%, rgba(11,29,38,.48) 66%, rgba(11,29,38,.88) 100%);
}
.cc-num {
  position: absolute; top: 12px; right: 18px;
  font-family: var(--font-en); font-size: 46px; font-weight: 700; line-height: 1;
  color: rgba(255,255,255,.30); text-shadow: 0 2px 10px rgba(11,29,38,.35);
}
.cc-overlay .badge-coop { align-self: flex-start; margin-bottom: 10px; }
.cc-overlay h3 {
  color: #fff; font-size: 20px; line-height: 1.4; margin: 0 0 4px;
  text-shadow: 0 1px 10px rgba(11,29,38,.4);
}
.cc-overlay .cc-meta { color: rgba(255,255,255,.78); font-size: 13px; margin-bottom: 0; }
.cc-brief { color: rgba(255,255,255,.86); font-size: 13.5px; margin-top: 8px; line-height: 1.7; }
.cc-overlay .cf-tags { margin: 12px 0 0; }
.cc-overlay .cf-tags span {
  background: rgba(255,255,255,.16); color: #fff;
  border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(4px);
}
.cf-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.cf-tags span { background: var(--cream-2); color: var(--brand-blue); font-size: 12px; font-weight: 700;
  padding: 5px 12px; border-radius: 999px; }

@media (max-width: 980px) {
  .case-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 300px; }
  .case-card:nth-child(n) { grid-area: auto; }
}
@media (max-width: 600px) {
  .case-grid { grid-template-columns: 1fr; grid-auto-rows: 320px; }
  .case-card:nth-child(n) { grid-area: auto; }
}

/* ===== 案例筛选条（业态维度，纯前端） ===== */
.case-filter {
  width: min(1280px, calc(100% - 48px));
  margin: 4px auto 26px;
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}
.cf-btn {
  border: 1.5px solid rgba(11,29,38,.18); background: #fff; color: var(--ink-deep);
  padding: 9px 22px; border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: all .2s ease;
}
.cf-btn:hover { border-color: var(--brand-blue); color: var(--brand-blue); }
.cf-btn.active { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }
/* 筛选态：取消杂志拼贴位图，让可见卡片自然回流 */
.case-grid.is-filtering .case-card { grid-area: auto; }
/* 筛选态：隐藏两侧散落装饰图，避免绝对定位装饰因网格变矮而错位到其它区域 */
.cases-gallery.is-filtering .deco { display: none !important; }

/* 两侧散落照片：一半藏在卡片后、一半伸向屏幕外（仅宽屏显示） */
.deco {
  position: absolute; z-index: 1; object-fit: cover;
  border-radius: 16px; box-shadow: 0 16px 36px rgba(14, 31, 42, .24);
  border: 4px solid #fff; display: none;
}
@media (min-width: 1420px) {
  .deco { display: block; }
  /* top 值已含 section 上内边距 84px 补偿；网格总高 3×320+2×20=1000px */
  /* 锚定屏幕边缘，固定伸出屏幕（左上/右上两张大的） */
  .deco-l1 { left: -70px;  top: 114px; width: 250px; height: 187px; transform: rotate(-4deg); }
  .deco-r1 { right: -80px; top: 194px; width: 260px; height: 195px; transform: rotate(4deg); }
  /* 中部：贴网格外缘，压在卡片后、露出 ~110px，与对侧错开 70px */
  .deco-l3 { left: calc(50% - 640px - 110px);  top: 400px; width: 200px; height: 145px; transform: rotate(-3deg); }
  .deco-r3 { right: calc(50% - 640px - 110px); top: 330px; width: 210px; height: 150px; transform: rotate(2deg); }
  /* 下部：贴网格外缘，压在卡片后 110px、露出 ~120px */
  .deco-l2 { left: calc(50% - 640px - 120px);  top: 704px; width: 230px; height: 165px; transform: rotate(3deg); }
  .deco-r2 { right: calc(50% - 640px - 120px); top: 584px; width: 230px; height: 170px; transform: rotate(-3deg); }
  /* 右下角：最低一张，压卡片后 ~70px、露出 ~160px（部分出屏） */
  .deco-r4 { right: calc(50% - 640px - 130px); top: 810px; width: 230px; height: 170px; transform: rotate(-2deg); }
}
@media (min-width: 1700px) {
  /* 超宽屏：散落照片整体外移，保持"伸出屏幕"的张力 */
  .deco-l1 { left: -90px; top: 134px; }
  .deco-r1 { right: -100px; top: 214px; }
  .deco-l3 { top: 420px; }
  .deco-r3 { top: 350px; }
  .deco-l2 { top: 724px; }
  .deco-r2 { top: 604px; }
  .deco-r4 { top: 830px; }
}

/* ===== 关于页 · IP 角色区块（p18 整图作元素块） ===== */
.ip-trio {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center;
  background: linear-gradient(120deg, #EAF7FE 0%, #FFFFFF 60%);
  border: 1px solid #DCEFFA; border-radius: var(--radius); padding: 32px;
  box-shadow: var(--shadow);
}
.ip-tile {
  position: relative; margin: 0; border-radius: 16px; overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
}
.ip-tile img { width: 100%; height: auto; display: block; transition: transform .4s; }
.ip-tile:hover img { transform: scale(1.03); }
.ip-tile figcaption {
  position: absolute; left: 16px; top: 16px;
  background: rgba(255,255,255,.92); color: #1FB0E8;
  font-weight: 800; font-size: 12px; padding: 6px 12px; border-radius: 999px;
  letter-spacing: 1px; backdrop-filter: blur(4px);
}
.ip-list { list-style: none; display: grid; gap: 12px; }
.ip-list li {
  background: #fff; border-radius: 12px; padding: 14px 18px;
  box-shadow: var(--shadow); font-size: 14px; color: var(--ink-soft);
  border-left: 4px solid var(--brand-yellow);
}
.ip-list b { color: var(--ink); margin-right: 4px; }

/* ===== 关于页 · 三角色卡（page_15/16/17 卡片化复刻） ===== */
.ip-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 4px;
}
.ip-card {
  border-radius: 18px;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
  transition: transform .3s ease, box-shadow .3s ease;
}
.ip-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.14); }
.ip-card-head { padding: 18px 18px 22px; }
.ip-card-head img {
  display: block; width: 100%;
  aspect-ratio: 1100/620;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}
.ip-card-body { padding: 22px 24px 28px; flex: 1; }
.ip-card-eyebrow {
  font-size: 12px; font-weight: 800; letter-spacing: 1.5px;
  text-transform: uppercase; margin-bottom: 10px;
}
.ip-card-title { font-size: 22px; font-weight: 800; color: var(--ink); margin-bottom: 10px; line-height: 1.3; }
.ip-card-desc  { font-size: 14px; color: var(--ink-soft); line-height: 1.75; }

/* 三角色配色：head = 品牌主色，body = 同色系浅色，eyebrow = 主色 */
.ip-card-e .ip-card-head  { background: var(--brand-blue); }
.ip-card-e .ip-card-body  { background: #EAF7FE; }
.ip-card-e .ip-card-eyebrow { color: var(--brand-blue); }

.ip-card-j .ip-card-head  { background: var(--brand-yellow); }
.ip-card-j .ip-card-body  { background: #FFF6C2; }
.ip-card-j .ip-card-eyebrow { color: #B59600; }

.ip-card-s .ip-card-head  { background: var(--brand-orange); }
.ip-card-s .ip-card-body  { background: #FFE5DD; }
.ip-card-s .ip-card-eyebrow { color: var(--brand-orange); }

/* ===== 关于页 · 区域间距统一收窄 ===== */
body.page-about section { padding: 64px 0; }   /* 全局 84px → 64px，区域间更紧凑 */
body.page-about .subhero { padding: 0; }        /* hero 区 padding 由 subhero-grid 控制 */

/* IP 角色区与三角色卡区紧凑衔接：抵消全局 section 的 84px 上下 padding */
.ip-role-section { padding-bottom: 24px; }
.ip-cards-section { padding-top: 0; }

/* ===== 滚动入场动效（仅 JS 可用时隐藏，保证无 JS / SEO 时内容正常显示） ===== */
html.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1),
              transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
html.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 880px) {
  .ip-trio { grid-template-columns: 1fr; padding: 24px; }
  .ip-cards { grid-template-columns: 1fr; gap: 16px; }
}

/* ===== 案例详情弹窗 ===== */
.case-modal { position: fixed; inset: 0; z-index: 9999; }
.case-modal[hidden] { display: none; }
.case-modal-backdrop {
  position: absolute; inset: 0; background: rgba(11,29,38,.72); backdrop-filter: blur(4px);
}
.case-modal-box {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(1120px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  background: #fff; border-radius: var(--radius-lg, 18px); overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.28); display: flex; flex-direction: row;
}
.case-modal-close {
  /* 原为 38×38，未达 44px 触控热区下限，移动端尤其难点。统一提到 44。
     （这是案例弹窗唯一的关闭入口，必须保证易点） */
  position: absolute; top: 14px; right: 14px; z-index: 10; width: 44px; height: 44px;
  border: none; border-radius: 50%; background: rgba(255,255,255,.9); font-size: 26px;
  line-height: 1; color: var(--ink); cursor: pointer; transition: background .2s;
}
.case-modal-close:hover { background: #fff; }
.cm-gallery {
  position: relative;
  width: 55%; background: var(--cream-2); display: flex; flex-direction: column;
}
.cm-gallery > img {
  flex: 1; width: 100%; object-fit: cover; min-height: 0;
}
.cm-thumbs {
  display: flex; gap: 10px; padding: 14px; overflow-x: auto;
  background: #fff; border-top: 1px solid var(--cream-2);
}
.cm-thumbs button {
  flex: 0 0 72px; height: 54px; border: 2px solid transparent; border-radius: 8px;
  overflow: hidden; padding: 0; cursor: pointer; opacity: .7; transition: opacity .2s, border-color .2s;
}
.cm-thumbs button.active { opacity: 1; border-color: var(--brand-blue); }
.cm-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 画廊左右切换箭头 + 计数器 */
.cm-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 42px; height: 42px; border: none; border-radius: 50%;
  background: rgba(255,255,255,.88); color: var(--ink); font-size: 30px;
  line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(11,29,38,.22); transition: background .2s, transform .2s;
  padding-bottom: 4px;
}
.cm-nav:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.cm-prev { left: 14px; }
.cm-next { right: 14px; }
.cm-counter {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 5;
  background: rgba(11,29,38,.62); color: #fff; font-size: 12px; font-weight: 700;
  letter-spacing: .06em; padding: 4px 12px; border-radius: 999px;
  backdrop-filter: blur(4px);
}

/* 乖哈哈点评气泡（替代原成效行） */
.cm-ip-note {
  margin-top: 16px;
  background: linear-gradient(135deg, #EAF7FD, #F4FBFF);
  border: 1px solid #CDEAF9; border-radius: 14px; padding: 12px 16px;
}
.cm-ip-bubble { min-width: 0; }
.cm-ip-bubble b {
  display: block; font-size: 12px; color: var(--brand-blue); font-weight: 800;
  letter-spacing: .08em; margin-bottom: 2px;
}
.cm-ip-bubble span { font-size: 13.5px; color: var(--ink); line-height: 1.65; }
.cm-body {
  width: 45%; padding: 34px 34px 30px; overflow-y: auto;
}
.cm-body h4 { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--brand-blue); margin: 24px 0 10px; }
.cm-body ul { margin: 0 0 12px 18px; padding: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.75; }
.cm-body li { margin-bottom: 8px; }
.cm-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 18px 0 8px;
}
.cm-stat {
  background: var(--cream); border-radius: 12px; padding: 14px 12px; text-align: center;
}
.cm-stat b { display: block; font-size: 20px; color: var(--brand-blue); margin-bottom: 4px; }
.cm-stat span { font-size: 12px; color: var(--ink-soft); }
.cm-body .cf-tags { margin-top: 18px; }

@media (max-width: 820px) {
  .case-modal-box { flex-direction: column; width: calc(100vw - 24px); max-height: calc(100vh - 24px); }
  .cm-gallery { width: 100%; height: 40vh; }
  .cm-gallery > img { height: calc(40vh - 82px); flex: none; }
  .cm-thumbs { padding: 10px; }
  .cm-body { width: 100%; padding: 24px; max-height: 50vh; }
  .cm-nav { width: 34px; height: 34px; font-size: 24px; }
}

/* ===== 攻略弹窗（复用 case-modal 视觉，纯文本版） ===== */
.g-teaser { cursor: pointer; }
.g-teaser:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
#guideModal .case-modal-box { flex-direction: column; width: min(720px, calc(100vw - 32px)); }
#guideModal .gm-cover {
  flex: none; height: 168px;
  border-radius: var(--radius-lg, 18px) var(--radius-lg, 18px) 0 0;
  background: linear-gradient(135deg, #EAF7FD, #FBF7F0);
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--ink-soft); font-size: 14px; padding: 0 24px;
}
#guideModal .cm-body { width: 100%; max-height: calc(100vh - 40px - 168px); padding: 26px 32px 32px; }
#guideModal .tag { display: inline-block; background: var(--cream-2); color: var(--brand-blue); font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; margin-bottom: 10px; }
#guideModal .guide-updated { font-size: 12px; color: var(--ink-soft); margin: 6px 0 4px; }
#guideModal .guide-updated .ph { color: #b9b2a6; font-style: italic; }
#guideModal .gm-content { margin-top: 6px; }
#guideModal .gm-content ol { margin: 0 0 0 20px; padding: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.8; }
#guideModal .gm-content li { margin-bottom: 10px; }
#guideModal .gm-content b { color: var(--ink); }
#guideModal .gm-share { margin-top: 18px; }

/* 底部合规链接（隐私政策 / 用户协议 / 商务合作免责声明 / ICP）
   2026-09-16 修：
   ① 逐个换行 —— 根因是第 429 行 .site-footer a{display:block} 的全局规则，
      合规链接同样是 footer 内的 <a>，被一并撑成块级；此处覆盖回 inline。
   ② 贴着左边界 —— .footer-legal 原本在 .wrap 之外，视口越宽离内容列越远；
      现套用与 .wrap 相同的几何（max-width 1160 + padding 24 + margin auto），
      与上方页脚各列左缘对齐。
   若要改居中，仅需把下面的 text-align 改为 center。 */
.footer-legal{
  max-width:1160px; margin:16px auto 0; padding:0 24px;
  font-size:12px; opacity:.85; text-align:left;
}
.footer-legal a{ color:inherit; text-decoration:underline; display:inline; margin-bottom:0; }
.footer-legal .icp{ white-space:nowrap; }
.icp{ opacity:.7; }

/* ===== 综合解决方案页框架组件（套餐 / 流程 / 收益 / CTA） ===== */
/* 3 档商家服务套餐 */
.tiers{ display:flex; flex-direction:column; gap:20px; }
.tier{
  display:grid; grid-template-columns:240px 1fr; gap:30px; align-items:stretch;
  background:#fff; border:1px solid rgba(31,176,232,.18); border-radius:var(--radius);
  padding:28px 30px; box-shadow:var(--shadow); transition:transform .25s, box-shadow .25s;
}
.tier:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.tier.recommend{ border:2px solid var(--brand-blue); box-shadow:0 18px 40px rgba(31,176,232,.18); }
.tier-aside{
  display:flex; flex-direction:column; align-items:flex-start;
  border-right:1px dashed rgba(0,0,0,.08); padding-right:30px;
}
.tier-badge{
  display:inline-block; align-self:flex-start; font-size:12px; font-weight:800; letter-spacing:1px;
  padding:5px 12px; border-radius:999px; background:var(--cream-2); color:var(--brand-blue); margin-bottom:12px;
}
.tier.recommend .tier-badge{ background:var(--brand-blue); color:#fff; }
.tier-name{ font-size:22px; font-weight:800; margin-bottom:6px; }
.tier-sub{ color:var(--ink-soft); font-size:13px; line-height:1.6; min-height:42px; margin-bottom:16px; }
.tier-list{ list-style:none; margin:0; padding:0; }
.tier-list li{
  position:relative; padding:9px 0 9px 26px; font-size:14px; line-height:1.6; color:var(--ink);
  border-bottom:1px dashed rgba(0,0,0,.06);
}
.tier-list li::before{
  content:""; position:absolute; left:0; top:13px; width:16px; height:16px; border-radius:50%;
  background:var(--brand-blue); -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/12px no-repeat; mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/12px no-repeat;
}
.tier-cta{
  margin-top:auto; display:inline-flex; align-items:center;
  background:var(--brand-blue); color:#fff; font-weight:700; font-size:14px; line-height:1;
  padding:11px 20px; border-radius:999px; text-decoration:none;
  transition:background .2s, transform .2s;
}
.tier-cta:hover{ background:var(--brand-blue-dark); color:#fff; transform:translateY(-1px); }
.tier-cta::after{ content:"→"; margin-left:8px; }
/* 套餐卡内容区 + 赠品组（业务端确认 3 档后引入） */
.tier-main{ display:grid; grid-template-columns:1fr 300px; gap:26px; align-items:start; }
.tier-gifts{
  background:rgba(255,227,63,.20); border:1px dashed rgba(233,72,39,.32); border-radius:var(--radius-sm);
  padding:10px 14px 12px; margin-bottom:20px;
}
.tier-gifts-label{
  display:inline-block; background:var(--brand-orange); color:#fff; font-size:11px; font-weight:800;
  letter-spacing:1px; padding:2px 9px; border-radius:6px; margin-bottom:7px;
}
.tier-gifts ul{ list-style:none; margin:0; padding:0; }
.tier-gifts li{ position:relative; padding:4px 0 4px 17px; font-size:13px; line-height:1.55; color:var(--ink); }
.tier-gifts li::before{
  content:""; position:absolute; left:1px; top:12px; width:6px; height:6px; border-radius:50%;
  background:var(--brand-orange);
}

/* 服务流程（可视化 4 步） */
.flow{ display:flex; align-items:stretch; gap:0; flex-wrap:wrap; }
.flow-step{
  flex:1 1 200px; background:#fff; border:1px solid rgba(31,176,232,.18); border-radius:var(--radius);
  padding:24px 20px; position:relative; box-shadow:var(--shadow);
}
.flow-num{
  width:40px; height:40px; border-radius:50%; background:var(--brand-blue); color:#fff;
  font-size:18px; font-weight:800; display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.flow-step h3{ font-size:17px; margin-bottom:8px; }
.flow-step p{ color:var(--ink-soft); font-size:13px; line-height:1.6; }
.flow-arrow{ display:flex; align-items:center; justify-content:center; color:var(--brand-blue); font-size:26px; font-weight:800; padding:0 6px; }

/* 商家收益说明 */
.benefits{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.benefit{
  background:linear-gradient(135deg,#EAF7FE 0%,#FFFFFF 60%); border:1px solid #DCEFFA;
  border-radius:var(--radius); padding:28px 26px; text-align:left; box-shadow:var(--shadow);
}
.benefit-metric{
  font-size:30px; font-weight:800; color:var(--brand-blue); border:1px dashed var(--brand-blue);
  border-radius:12px; padding:8px 14px; display:inline-block; margin-bottom:14px; letter-spacing:1px;
}
.benefit h3{ font-size:19px; margin-bottom:8px; }
.benefit p{ color:var(--ink-soft); font-size:14px; line-height:1.65; }
.benefit-note{ margin-top:12px; font-size:12px; color:var(--brand-blue); background:rgba(31,176,232,.08); padding:6px 10px; border-radius:8px; }

/* CTA 条（下载 PDF + FAQ 跳转） */
.cta-strip{ background:var(--ink); }
/* 与 .wrap 是同一元素（<div class="wrap cta-inner">），左右必须显式写 24px：
   写 0 会覆盖掉 .wrap 的 0 24px，导致 CTA 文字贴边、宽度撑满整个视口。
   —— 这是本站第三次踩到「容器类 + 布局类同挂一个元素」的 padding 冲突
   （前两次是 .hero-grid 与 .subhero-grid）。 */
.cta-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:36px 24px; flex-wrap:wrap; }
.cta-inner h2{ color:#fff; font-size:26px; margin-bottom:6px; }
.cta-inner p{ color:rgba(255,255,255,.8); font-size:14px; }
.cta-actions{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.cta-strip .nav-cta{ background:var(--brand-yellow); color:var(--ink); }
.cta-strip .nav-cta:hover{ background:#ffcf1f; }

@media (max-width:980px){
  .tier{ grid-template-columns:180px 1fr; gap:24px; padding:24px 22px; }
  .tier-aside{ padding-right:22px; }
  .tier-main{ grid-template-columns:1fr; }
  .benefits{ grid-template-columns:1fr 1fr; }
}
@media (max-width:680px){
  .benefits{ grid-template-columns:1fr; }
  /* iOS：输入控件字号 ≥16px 防聚焦自动缩放 */
  .contact-form input, .contact-form select, .contact-form textarea,
  .faq-search-box input, .mail-fallback textarea { font-size: 16px; }
  /* 移动端热区放大：主操作按钮上下 padding 至 12px（≈42px 高） */
  .cf-btn, .faq-cat-btn, .nav-cta, .tier-cta { padding-top: 12px; padding-bottom: 12px; }
  .tier{ grid-template-columns:1fr; gap:16px; }
  .tier-aside{ flex-direction:row; align-items:center; flex-wrap:wrap; border-right:none; padding-right:0; }
  .tier-aside .tier-badge{ margin-bottom:0; margin-right:10px; }
  .tier-aside .tier-name{ margin-bottom:0; margin-right:auto; }
  .tier-aside .tier-cta{ margin-top:0; }
  .flow{ flex-direction:column; }
  .flow-arrow{ transform:rotate(90deg); padding:4px 0; }
  .cta-inner{ flex-direction:column; align-items:flex-start; }
}

/* ===========================================================
   2026-09-16 新增：全案 PDF 内容区块
   （酒店四大挑战 / 四大无忧体系 / 行业洞察 / 增值服务与配套）
   =========================================================== */

/* 定位声明徽标（解决方案页 subhero） */
.pos-badge{
  display:inline-block; margin-top:8px; background:#fff; border:1.5px dashed var(--brand-blue);
  color:var(--brand-blue); font-size:13px; font-weight:700; padding:8px 16px; border-radius:999px;
}

/* 服务体系卡片（四大无忧体系、增值服务与配套设施复用） */
.svc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.svc-card{
  background:#fff; border-radius:var(--radius); padding:28px 24px; box-shadow:var(--shadow);
  border:1px solid rgba(31,176,232,.08); border-top:4px solid var(--brand-blue);
  transition:transform .25s ease, box-shadow .25s ease;
}
.svc-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.svc-ico{ font-size:28px; line-height:1; }
.svc-card h3{ font-size:19px; margin:12px 0 10px; }
.svc-lead{ color:var(--ink-soft); font-size:13.5px; line-height:1.65; margin-bottom:14px; }
.svc-list{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.svc-list li{ position:relative; padding-left:16px; font-size:13.5px; line-height:1.6; color:var(--ink-soft); }
.svc-list li::before{
  content:""; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%;
  background:var(--brand-blue); opacity:.5;
}
.svc-list li b{ color:var(--ink); }

/* 行业洞察：浅色背景下的核心数字 */
.stats-light .stat .num{ color:var(--brand-blue); }
.stats-light .stat .label{ color:var(--ink-soft); opacity:1; }

/* 行业洞察：占比条 */
.insight-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:start; }
.insight-col h3{ font-size:19px; margin-bottom:18px; }
.insight-list{ list-style:none; margin:0; padding:0; display:grid; gap:13px; }
.insight-bar-row{ display:flex; align-items:center; gap:12px; }
.insight-bar-label{ flex:none; width:132px; font-size:13.5px; color:var(--ink); }
.insight-bar-track{ flex:1; height:10px; border-radius:999px; background:var(--cream-2); overflow:hidden; }
.insight-bar-fill{ display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--brand-blue),var(--brand-blue-light)); }
.insight-bar-val{ flex:none; width:48px; text-align:right; font-size:13.5px; font-weight:800; color:var(--brand-blue); }

@media (max-width:980px){
  .svc-grid{ grid-template-columns:1fr 1fr; }
  .insight-grid{ grid-template-columns:1fr; gap:34px; }
}
@media (max-width:680px){
  .svc-grid{ grid-template-columns:1fr; }
  .insight-bar-label{ width:96px; font-size:13px; }
  .pos-badge{ font-size:12px; padding:7px 13px; }
}

/* 通用两栏（首页「流量赋能」等复用；与 .map-layout 同构，语义中立） */
.duo-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:stretch; }
.duo-col{ display:flex; flex-direction:column; justify-content:center; }
.duo-col h3{ font-size:22px; margin-bottom:16px; }
.duo-list{ list-style:none; display:grid; gap:12px; }
.duo-list li{ background:#fff; border-radius:12px; padding:14px 18px; box-shadow:var(--shadow);
  font-size:14px; color:var(--ink-soft); border:1px solid rgba(31,176,232,.08); }
.duo-list b{ color:var(--ink); }
@media (max-width:980px){ .duo-grid{ grid-template-columns:1fr; } }

/* ===========================================================
   修复（2026-09-16）：内页 subhero 移动端文本被裁切
   成因：≤880px 时 .subhero-grid 为单列，`1fr` 等价 minmax(auto,1fr)，
   其 auto 最小宽度取自 .hero-art 的 min-content（该元素写死 width:508px），
   致使轨道被撑到 508px 并超出 375px 视口，再被 body{overflow-x:clip} 裁掉，
   表现为 h1 / .lead 右侧文字缺失（全站内页均受影响）。
   解法：minmax(0,1fr) 解除 auto 最小宽度，轨道回到容器宽度。
   =========================================================== */
@media (max-width: 880px) {
  .subhero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-art { width: 100%; }
}

/* 定位徽标：不超过容器宽度，窄屏自动换行 */
.pos-badge { max-width: 100%; }

/* ===========================================================
   攻略配图（2026-09-16）
   占位图暂用「关于乖哈哈」页 Hero 三图（assets/pdf-render/page_15/16/17.webp），
   待业务端提供攻略实拍后，仅需替换 <img src> 与 data-cover 即可。
   两处容器原为文字占位（grid/flex + place-items:center），改为图片后需：
   去掉内边距、裁掉溢出，并让 img 铺满容器。
   =========================================================== */
.g-teaser-cover{ padding: 0; overflow: hidden; }
.g-teaser-cover img{ display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* 弹窗封面同样铺满（高度仍为 168px，横幅状裁切、取中） */
#guideModal .gm-cover{ padding: 0; overflow: hidden; }
#guideModal .gm-cover img{ display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* 攻略网格移动端：原仅 repeat(3,1fr) 无断点，窄屏下卡片被压到约 93px、
   配图仅 45px 宽（且卡片内文案高度不足）。补断点改为单列居中。 */
@media (max-width: 880px) {
  .g-teaser-grid { grid-template-columns: 1fr; max-width: 460px; }
}

/* ===========================================================
   移动端适配全面改造（2026-09-16）
   依据全站扫描结果（11 页 × 320/375/390 三档真机视口）逐项修复：
   P0 移动端零导航（.nav-links 被隐藏且无替代入口）
   P1 触控热区普遍低于 44×44（页脚链接仅 24px、资讯圆点仅 8px）
   P2 section 纵向留白 84px 在窄屏造成大量空转滚动
   P3 输入控件 <16px 触发 iOS 聚焦自动缩放
   所有扩大热区的处理均搭配负 margin 抵消，保证视觉版式零变化。
   =========================================================== */

/* ---------- A. 汉堡按钮与移动导航面板 ---------- */
.nav-toggle {
  display: none; flex: none; width: 44px; height: 44px; padding: 0; margin-left: 2px;
  border: 0; background: transparent; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border-radius: 10px; transition: background .2s; -webkit-tap-highlight-color: transparent;
}
.nav-toggle:hover { background: var(--cream-2); }
.nav-toggle:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
.nt-bar {
  display: block; width: 22px; height: 2.5px; border-radius: 2px;
  background: var(--ink); transition: transform .28s ease, opacity .2s ease;
}
/* 展开为关闭叉：上下两条各平移 7.5px（条高 2.5 + 间距 5）后旋转 */
.nav-toggle[aria-expanded="true"] .nt-bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nt-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nt-bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.nav-panel { display: none; }
.nav-panel[hidden] { display: none; }
.nav-panel-inner { padding: 4px 0 12px; border-top: 1px solid var(--cream-2); }
.nav-panel-inner a {
  display: block; padding: 14px 4px; font-size: 16px; font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--cream-2); -webkit-tap-highlight-color: transparent;
}
.nav-panel-inner a:active { background: var(--cream); }
.nav-panel-inner a.np-active { color: var(--brand-blue); font-weight: 700; }
.nav-panel-foot { padding-top: 10px; }
.nav-panel-foot a { border-bottom: 0; font-size: 14px; color: var(--ink-soft); }
.nav-panel-cta {
  display: block; margin-top: 14px; text-align: center;
  background: var(--brand-blue); color: #fff !important; border: 0 !important;
  padding: 13px 18px; border-radius: 999px; font-weight: 700; font-size: 15px;
}

@media (max-width: 880px) {
  .nav-toggle { display: flex; }
  .nav-links { display: none; }
  .nav-panel { display: block; background: #fff; max-height: calc(100vh - 80px); overflow-y: auto; }
  .nav-panel[hidden] { display: none; }
}

/* ---------- B. 触控热区统一 ≥44px ---------- */
@media (max-width: 880px) {
  /* 页脚各列链接：原 24px 高 → 撑到 ≥44px。
     注意 padding 需 ≥11px：14px 字号 × 1.7 行高 = 23.8px 内容高，
     10px 只能得到 43.8px，恰差 0.2 而不达标，故取 12px（约 47.8px）。 */
  .site-footer a { padding: 12px 0; margin-bottom: 0; }

  /* 底部合规链接：保持单行视觉，负 margin 抵消 padding */
  .footer-legal a { display: inline-block; padding: 13px 7px; margin: -13px -7px; }

  /* 面包屑：原 26×17，扩大不可见热区 */
  .breadcrumb a { display: inline-block; padding: 13px 9px; margin: -13px -9px; }

  /* 「← 返回首页」等正文内联链接。
     合规页结构是 <p><a>返回首页</a> ｜ <a>隐私政策</a></p>，含文本节点故非 :only-child。
     .footer-legal 位于 .wrap 之外，不会被此规则命中。 */
  .wrap p > a, .back-faq a { display: inline-block; padding: 12px 8px; margin: -12px -8px; }

  /* 资讯轮播圆点：把按钮本身撑到 44×44，视觉小圆点改由 ::after 绘制。
     早期做法是用 ::after 放大热区，但相邻点间距仅 26px，两个 44px 热区会重叠
     —— 实测点击第 3 个点会误触第 4 个。改为「大按钮 + 小伪元素」后，
     按钮中心距 = 44 + gap 4 = 48px，热区互不重叠，视觉与桌面端一致。 */
  .nc-dots { gap: 4px; }
  .nc-dots button {
    width: 44px; height: 44px; background: transparent; position: relative;
  }
  .nc-dots button::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 8px; height: 8px; border-radius: 999px;
    background: #cfd9e2; transition: width .25s, background .25s;
  }
  .nc-dots button.active::after { width: 24px; background: var(--brand-blue); }
  /* 桌面端基础规则 `.nc-dots button.active{width:24px}` 特异性更高，会正好把
     「当前所在」的圆点缩回 24px —— 最需要被点的那个反而最难点，故此处再覆盖回来。 */
  .nc-dots button.active { width: 44px; height: 44px; background: transparent; }

  /* FAQ 分类按钮：原 40px → 44px */
  .faq-cat-btn { min-height: 44px; padding-top: 13px; padding-bottom: 13px; }
  /* 案例筛选按钮 */
  .cf-btn { min-height: 44px; }
  /*  chips */
  .chip { min-height: 44px; display: inline-flex; align-items: center; padding-left: 18px; padding-right: 18px; }

  /* 顶部导航 CTA / Logo / 品牌位：补齐 44px */
  .nav-cta { min-height: 44px; display: inline-flex; align-items: center; padding-left: 20px; padding-right: 20px; }
  .nav-row .nav-logo { display: inline-flex; align-items: center; min-height: 44px; }
  .brand { min-height: 44px; }

  /* Leaflet 缩放按钮：原 30×30 → 44×44（覆盖 CDN 默认样式） */
  .leaflet-control-zoom a {
    width: 44px !important; height: 44px !important; line-height: 44px !important; font-size: 22px !important;
  }
  /* 地图 marker：保持视觉，扩大可点区域 */
  .map-pin-wrap { padding: 2px; }
}

/* ---------- C. 纵向留白压缩（84px 在窄屏造成大量空滚动） ---------- */
@media (max-width: 880px) {
  /* 顶栏收矮：80px → 64px，提升移动端首屏信息密度 */
  .nav, .nav-row { height: 64px; }
  .brand-logo { height: 38px; }
  section { padding: 48px 0; }
  .hero-grid { padding: 44px 24px 52px; }
  .subhero-grid { padding: 36px 0 44px; }
  /* Hero 前景：解除写死的 480px（它会让 aspect-ratio 失效），改由图片自身比例决定高度。
     窄屏下 `.hero-art` 单独占一行，480px 会造成首屏近一半是空的。 */
  .hero-art, .hero-art.ip-stack { height: auto; min-height: 0; width: 100%; }
  .hero-art.ip-stack { aspect-ratio: 1100 / 620; max-width: 440px; margin: 0 auto; }
  /* art-frame 带 rotate，旋转后的包围盒比元素本身宽，取 380px 会在 375px 视口
     左右各溢出约 5px。改用百分比上限收敛。
     注意：`.hero-art.zoom-x .art-frame{max-width:515px}` 特异性更高，必须同特异性再覆盖。 */
  .hero-art .art-frame,
  .hero-art.zoom-a .art-frame, .hero-art.zoom-b .art-frame,
  .hero-art.zoom-c .art-frame, .hero-art.zoom-d .art-frame {
    max-width: min(380px, 86%); width: 100%;
  }
  .stay-badge { width: 78px; height: 78px; right: 4%; bottom: 12%; }
  .stay-badge span { font-size: 21px; }
  .brand-wall { padding: 48px 0; }
  .site-footer { padding: 40px 0 20px; }
  .foot-bottom { margin-top: 28px; padding-top: 16px; }
  body.page-about section { padding: 44px 0; }
  .cta-inner { padding: 28px 24px; }
  /* 标题 26px 在窄屏会撑满整行、读起来偏重，收到 22px */
  .cta-inner h2 { font-size: 22px; line-height: 1.35; }
  .cases-gallery { padding-bottom: 12px; }
}

/* ---------- D. iOS 聚焦自动缩放：输入类控件一律 ≥16px ---------- */
@media (max-width: 880px) {
  input, select, textarea,
  .contact-form input, .contact-form select, .contact-form textarea,
  .search-box input, .search-box select,
  .mf-row select, .faq-search-box input, .kw-input, .mail-fallback textarea {
    font-size: 16px;
  }
}

/* ---------- E. 过小字号与溢出微调 ---------- */
@media (max-width: 880px) {
  .stay-badge small { font-size: 11px; }
  .bw-tag { font-size: 11px; }
  .map-pin .pin-label { font-size: 12px; }
  /* 关于页 IP 堆叠卡的角标原 right:-10px 会带出文本，窄屏收回容器内 */
  .hero-art.ip-stack .art-tag { right: 0; }
  .hero-art.ip-stack { transform: none; }
  /* 移动端不做 hover 位移，避免点击态残留 */
  .entry:hover, .value:hover, .svc-card:hover, .case-card:hover,
  .guide-card:hover, .g-teaser:hover, .tier:hover, .ip-card:hover,
  .case-feature:hover, .solution-feature:hover { transform: none; }
}

/* ---------- H. 卡片横向紧凑化：解决手机端「挤成一条 / 一条条往下堆」 ----------
   做法：在 ≤880px 把「图标在上、文字在下」的纵向卡改为「图标在左、文字在右」，
   单卡高度显著下降，页面更短、更像列表而非一堵墙。
   全部用 CSS grid 的「首列跨所有行」实现，不改动任何 HTML 结构。
   --------------------------------------------------------------------------- */
@media (max-width: 880px) {
  /* 1) 解决方案 / 能力入口卡：图标在左、文字在右 */
  .entry {
    display: grid; grid-template-columns: 46px 1fr;
    column-gap: 14px; row-gap: 3px; padding: 16px 18px; align-items: start;
  }
  .entry > .ico {
    grid-row: 1 / -1; grid-column: 1; margin-bottom: 0;
    width: 46px; height: 46px; font-size: 22px;
  }
  .entry > h3    { grid-column: 2; margin-bottom: 2px; font-size: 17px; }
  .entry > p     { grid-column: 2; font-size: 13.5px; line-height: 1.6; }
  .entry > .more { grid-column: 2; margin-top: 2px; }

  /* 2) 四大无忧 / 增值服务卡：图标在左，标题、导语、清点在右 */
  .svc-card {
    display: grid; grid-template-columns: 38px 1fr; column-gap: 12px;
    padding: 16px 18px 18px; align-items: start;
  }
  .svc-card > .svc-ico  { grid-row: 1 / -1; grid-column: 1; font-size: 23px; }
  .svc-card > h3        { grid-column: 2; margin: 0 0 5px; }
  .svc-card > .svc-lead { grid-column: 2; margin-bottom: 10px; }
  .svc-card > .svc-list { grid-column: 2; }

  /* 3) 酒店 / 场所卡：照片在左、信息在右（单卡高度 421px → 约 150px） */
  .hotel-card  { flex-direction: row; align-items: stretch; }
  .hotel-photo { width: 112px; flex: none; height: auto; min-height: 116px; }
  .hotel-body  { flex: 1; min-width: 0; padding: 14px 16px 16px; }
  .hotel-body h3 { margin: 8px 0 4px; font-size: 16px; }
  .hotel-cta   { margin-top: 10px; }
  /* 必须用 `.hotel-card .hotel-cta a`（0,0,2,1）才能覆盖基础样式里的同一条规则，
     只写 `.hotel-cta a`（0,0,1,1）会被它压过去。 */
  .hotel-card .hotel-cta a { padding: 11px 10px; font-size: 13px; }

  /* 4) 哈小屋 / 营销活动清单：给纯文本卡加一个实体图标底块，
        形成明确的「图标 | 文字」横向结构，削弱「一条白条带」的观感 */
  .duo-list li { position: relative; padding: 13px 14px 13px 48px; font-size: 14px; line-height: 1.7; }
  .duo-list li::before {
    content: "\1F43E";
    position: absolute; left: 11px; top: 13px;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--brand-yellow-soft);
    display: grid; place-items: center;
    font-size: 13px; line-height: 1;
  }
  /* 地图场所清单本身已是「图标 + 文字」，仅收紧内边距 */
  .map-list li { padding: 12px 14px; font-size: 13.5px; }
  .map-item .mi-ico { width: 36px; height: 36px; font-size: 16px; }

  /* 5) 修复：about 页品牌理念三卡在窄屏仍是 3 列（每张仅 94px 宽的细长条）。
        根因是 `body.page-about .value-grid{repeat(3,1fr)}` 特异性高于本文件断点规则，
        必须在同特异性下再覆盖一次。 */
  body.page-about .value-grid { grid-template-columns: 1fr; max-width: 520px; }
  .value { padding: 22px 20px; }
}

/* ---------- F. 极窄屏（≤360px）兜底 ---------- */
@media (max-width: 360px) {
  .wrap { padding: 0 16px; }
  /* 必须显式写全四条边：此处 .wrap 的 16px 会整体覆盖 hero-grid 的 padding，
     只写左右会连带把上下的 44/52 清零。 */
  .hero-grid { padding: 40px 16px 48px; }
  .hero h1 { font-size: 28px; }
  .subhero h1 { font-size: 26px; }
  .section-head h2 { font-size: 26px; }
  .stat .num { font-size: 26px; }
  .stats { gap: 22px; }
  .stay-badge { width: 76px; height: 76px; right: 2%; }
  .stay-badge span { font-size: 21px; }
  .contact-form { padding: 20px; }
  .cf-body { padding: 24px 20px; }
  .tier { padding: 20px 18px; }
}

/* ---------- G. 无障碍：尊重减少动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
      transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- I. 移动端隐藏所有滚动条（仅隐藏外观，滚动手势照常可用） ----------
   移动端原生滚动条多为 overlay（不占位、松手即隐），但以下场景仍会出现常驻滚动条：
   部分 Android WebView、桌面浏览器的移动端模拟视图、以及站内滚动容器
   （案例弹窗缩略图 .cm-thumbs 横向滚动、弹窗正文 .cm-body、导航面板 .nav-panel 等）。
   统一在窄屏隐藏。注意不改动任何 overflow 属性，滚动能力完全保留。
   -------------------------------------------------------------------------------- */
@media (max-width: 880px) {
  /* Firefox 标准属性 */
  html, body, * { scrollbar-width: none; }
  /* 旧版 IE / Edge */
  html, body, * { -ms-overflow-style: none; }
  /* WebKit / Blink：Chrome、Safari、Android WebView */
  html::-webkit-scrollbar,
  body::-webkit-scrollbar,
  *::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
    background: transparent;
  }
}

/* ---------- J. 首页 Hero 移动端精简（2026-09-18） ----------
   移动端屏幅有限：Hero 原高 1072px，而 812px 屏高需一屏半才读得完。
   ① 隐藏前景图列 .hero-art（三 IP 图 / VI 标签 / STAY 印章）→ 省约 176px
      注：art-tag 与 stay-badge 是绝对定位，单独隐藏它们并不省布局高度，
      必须整列隐藏才有效。
   ② 去掉点纹理 → 减少视觉噪音
   ③ 数字区改一行三列 → 从 182px 降到约 87px，并消除「2+1 畸形换行」
   保留深色背景图 img-hero-clean.webp，维持品牌质感与深色氛围。
   仅作用于首页（section.hero）；内页 .subhero 的前景图不受影响。
   ------------------------------------------------------------------ */
@media (max-width: 880px) {
  /* ① 首页前景图列整列隐藏 */
  .hero .hero-art { display: none; }

  /* ② 点纹理（纯装饰） */
  .hero .hero-grid::before { display: none; }

  /* ③ 数字区：一行三列，消除 2+1 换行 */
  .hero .stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 24px;
    text-align: center;
  }
  .hero .stat .num   { font-size: 22px; line-height: 1.25; }
  .hero .stat .label { font-size: 11.5px; line-height: 1.45; opacity: .92; }
}

/* 极窄屏再收一档，避免「10000+」这类长数字挤压 */
@media (max-width: 360px) {
  .hero .stats { gap: 6px; }
  .hero .stat .num   { font-size: 19px; }
  .hero .stat .label { font-size: 10.5px; }
}

/* ---------- K. 首页并列模块移动端改造（2026-09-18） ----------
   首页原长 11817px（≈14 屏），其中 #solutions / #wuyou / #miniapp / brand-wall
   合计约 5916px。按内容性质分别处理（而非一刀切）：
   ① 入口卡（平级导航、内容短）→ 横向滑动，露出下一张边缘作可滑动提示
   ② 四大无忧（详情型、含要点清单）→ 折叠，默认只显示标题+导语，文案一条不删
   ③ 哈小屋/活动清单（短条目）→ 两列
   ④ 品牌合作墙（19 个 logo）→ 紧凑 4 列网格
   作用域：①②③ 用 body.page-home 限定（#wuyou / #miniapp 在 solutions.html 同名存在，
   而那里的四大无忧是核心内容，不应折叠）；④ 全站受益，不限定。
   ------------------------------------------------------------------ */
@media (max-width: 880px) {
  /* ① 首页解决方案入口卡：横向滑动 */
  body.page-home #solutions .entries {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    padding-bottom: 10px;
  }
  body.page-home #solutions .entries > .entry {
    flex: 0 0 76%;              /* 露出下一张边缘，给出「可右滑」的视觉线索 */
    max-width: 300px;
    scroll-snap-align: start;
  }

  /* ② 四大无忧：要点清单折叠。
     用 .has-toggle（由 home-ui.js 在注入按钮时添加）驱动，而不是 html.js ——
     首页并未给 <html> 加 js class（仅 about.html 有），依赖 html.js 会永不生效。
     这样也天然保证：无 JS 时按钮不被注入 → 清单保持展开，内容始终可达。 */
  body.page-home #wuyou .svc-card.has-toggle > .svc-list { display: none; }
  body.page-home #wuyou .svc-card.has-toggle.is-open > .svc-list { display: grid; }

}
/* 展开/收起按钮（由 JS 注入）—— 基础样式必须放在媒体查询之外。
   若写在 @media(max-width:880px) 内，桌面端不命中任何 media 块，按钮会退回
   <button> 默认的 inline-block 而显示出来（首页与解决方案页都踩到过）。 */
.svc-toggle {
  display: none;
  align-items: center; gap: 6px;
  min-height: 44px; padding: 0 2px;
  border: 0; background: transparent; cursor: pointer;
  color: var(--brand-blue); font-size: 14px; font-weight: 700;
  font-family: inherit; -webkit-tap-highlight-color: transparent;
}
.svc-toggle-ico {
  width: 0; height: 0; margin-left: 2px;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  transition: transform .25s;
}
.svc-card.is-open .svc-toggle-ico { transform: rotate(180deg); }
@media (max-width: 880px) {
  .svc-toggle { display: inline-flex; }
  /* .svc-card 在窄屏是 grid（图标列 + 内容列），按钮要落在内容列 */
  body.page-home #wuyou .svc-card > .svc-toggle { grid-column: 2; justify-self: start; }

  /* ③ 哈小屋 / 营销活动清单：两列 */
  body.page-home #miniapp .duo-list {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  }
  body.page-home #miniapp .duo-list > li {
    padding: 12px 12px 12px 38px;      /* 两列变窄，左侧图标占位同步收紧 */
  }
  body.page-home #miniapp .duo-list > li::before {
    left: 8px; top: 12px; width: 22px; height: 22px; font-size: 11px;
  }

  /* ④ 品牌合作墙：紧凑 4 列（全站）
     两个关键点：
     a) min-width:0 —— flex 项默认 min-width:auto，会被内容的 min-content 撑开，
        令 flex-basis 失效。「冬生夏长」的内联 max-width:none 就曾把它从 78px
        撑到 226px，挤乱整行、导致后续 logo 行列全部错位。
     b) !important —— 部分 logo 带内联 style（max-height:56px / 88px / 160px），
        优先级高于任何 CSS 选择器，只能靠 !important 覆盖才能让高度统一。
        桌面端那些内联值是刻意调整的视觉权重，故只在窄屏覆盖。 */
  .bw-logos { gap: 10px; }
  .bw-logo {
    flex: 0 0 calc(25% - 8px);
    width: auto; height: 66px;
    min-width: 0;
  }
  .bw-logo img {
    max-width: 86% !important;
    max-height: 40px !important;
    width: auto !important;
    height: auto !important;
  }
  .bw-name { font-size: 11px; }
  .bw-tag  { display: none; }          /* 4 列下副标签必然挤压，隐藏 */
}

/* 极窄屏（≤360px）：4 列 logo 过小，降为 3 列 */
@media (max-width: 360px) {
  .bw-logo { flex: 0 0 calc(33.333% - 7px); }
}

/* ---------- L. 页脚移动端紧凑化（2026-09-18） ----------
   问题：页脚 4 列在 ≤560px 被压成单列竖排（grid-template-columns:1fr），
   总高 972px —— 比一屏还高，且每条约 48px 的行高显得松散。
   处理：① 改为 2×2 两列（品牌/解决方案 一行，关于联系/关注我们 一行）
        ② 收紧列间距、标题下边距、版权行上边距
   ⚠ 链接 padding 不能再压：14px 字号 × 1.7 行高 = 23.8px 内容高，
     11px 只能得到 43.8px，不满足 44px 触控热区（此前已踩过 43.8 的坑）。
     所以「紧凑」靠两列布局实现，而不是压行高。
   ------------------------------------------------------------------ */
@media (max-width: 880px) {
  .foot-grid {
    grid-template-columns: 1fr 1fr;
    gap: 26px 16px;
  }
  .site-footer h4 { margin-bottom: 8px; }
  .foot-bottom { margin-top: 24px; padding-top: 14px; }
}

/* ---------- M. 关于乖哈哈页移动端改造（2026-09-18） ----------
   原 7448px（8.8 屏）。三处并列卡片在窄屏全部单列竖排，是主要长度来源。
   沿用首页那套「按内容性质处理」的逻辑，并统一用 body.page-about 限定作用域
   （.svc-grid / .entries / .value-grid 在首页与其他页同样存在，不能误伤）：
   ① IP 三角色卡 → 横滑（1290 → 约 450）
   ② 品牌理念三卡 → 横滑（1056 → 约 420）
   ③ 品牌触点四卡 → 横滑（907  → 约 450）
   ④ 品牌故事长文 → 折叠（752  → 约 550），文案一字不删
   ⑤ 全页留白 44 → 36px
   ⑥ 品牌故事行距/字号收紧
   ⚠ 与首页不同：本页 subhero 的 IP 堆叠图是品牌核心内容而非装饰，保留不隐藏。
   ------------------------------------------------------------------ */
@media (max-width: 880px) {
  /* ⑤ 全页留白收紧 */
  body.page-about section { padding: 36px 0; }

  /* ① IP 三角色卡横滑 */
  body.page-about .ip-cards {
    display: flex;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    gap: 14px; padding-bottom: 10px;
  }
  body.page-about .ip-cards > .ip-card {
    flex: 0 0 74%; max-width: 300px; scroll-snap-align: start;
  }

  /* ② 品牌理念三卡横滑（覆盖段 H 为修「94px 细长条」而设的单列规则） */
  body.page-about .value-grid {
    display: flex;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    gap: 12px; padding-bottom: 10px; max-width: 100%;
  }
  body.page-about .value-grid > .value {
    flex: 0 0 72%; max-width: 280px; scroll-snap-align: start;
  }
  .value-desc { text-align: center; }

  /* ③ 品牌触点四卡横滑 */
  body.page-about .svc-grid {
    display: flex;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    gap: 12px; padding-bottom: 10px;
  }
  body.page-about .svc-grid > .svc-card {
    flex: 0 0 72%; max-width: 280px; scroll-snap-align: start;
  }

  /* ④ 品牌故事折叠：用 .has-collapse（由 about-ui.js 添加）驱动，
        无 JS 时不隐藏任何段落 */
  body.page-about .brand-story.has-collapse .bs-collapsed { display: none; }
  body.page-about .brand-story.has-collapse.is-open .bs-collapsed { display: block; }

  /* ⑥ 品牌故事行距/字号收紧（段落带内联 font-size，需 !important） */
  body.page-about .brand-story .wrap > p {
    line-height: 1.72 !important;
    font-size: 16px !important;
    margin-top: 16px !important;
  }
  body.page-about .brand-story .wrap > .pos-badge { font-size: 12.5px; padding: 7px 14px; }
}

/* 展开/收起全文按钮（由 about-ui.js 注入），桌面不显示 */
.story-toggle {
  display: none;
  align-items: center; gap: 6px;
  min-height: 44px; padding: 0 2px;
  border: 0; background: transparent; cursor: pointer;
  color: var(--brand-blue); font-size: 14px; font-weight: 700;
  font-family: inherit; -webkit-tap-highlight-color: transparent;
}
.story-toggle-ico {
  width: 0; height: 0; margin-left: 2px;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  transition: transform .25s;
}
.brand-story.is-open .story-toggle-ico { transform: rotate(180deg); }
@media (max-width: 880px) {
  .story-toggle { display: inline-flex; margin-top: 8px; }
}

/* ---------- N. 内页 subhero 与 IP 堆叠交互区（2026-09-18） ----------
   两件事其实是同一个根因：
   ① .subhero-grid 与 .wrap 是同一元素（<div class="wrap subhero-grid">），
      .subhero-grid 的 `padding:52px 0 60px` 左右 0 覆盖掉 .wrap 的 0 24px
      —— 与首页 .hero-grid 完全同款的问题。后果：内容贴边、堆叠卡错位后溢出视口。
   ② IP 堆叠交互（点击卡片置顶）在移动端实际不可用：错位露出的边角
      全部落在视口之外（390px 下卡2 右边 416、卡3 右边 436），
      被 overflow-x:clip 裁掉，用户点不到 —— JS 点击逻辑本身是好的。
   解法：缩小堆叠区并收敛位移，让错位的边角回到视口内且留出可点宽度。
   尺寸推导（V=视口, P=左右padding, C=V-2P, W=堆叠区宽）：
      卡3 右缘 = V-P-(C-W)/2 + 位移 + 旋转增量 ≤ V
      露出宽度 = 位移 + 旋转增量，需 ≥ 约 44px
      ⇒ W ≤ C - 2×(44-P)。取 W = min(84%, 280px) 可满足 320/375/390 各档。
   ------------------------------------------------------------------ */
@media (max-width: 880px) {
  /* ① 修 padding 冲突：给 subhero 补回左右留白（影响全部内页） */
  .subhero-grid { padding: 32px 24px 40px; }

  /* ② 缩小堆叠区：390×220 → 约 268×151 */
  .hero-art.ip-stack {
    width: min(86%, 268px);
    aspect-ratio: 1100 / 620;
    max-width: none;
    margin: 0 auto;
    transform: none;
  }
  /* 阶梯错位：横向小幅 + 纵向，露出的是「卡片的底边」—— 整条宽度都可点。
     纯横向错位在 390px 下两张非激活卡只能分到约 60px 宽（各 20~40px，偏窄难点）。 */
  .ip-stack .stack-card:nth-child(1) { transform: rotate(-4deg) translate(-4%, 0); }
  .ip-stack .stack-card:nth-child(2) { transform: rotate(2deg)  translate(2%, 11%); }
  .ip-stack .stack-card:nth-child(3) { transform: rotate(6deg)  translate(6%, 22%); }
  /* active 摆正必须写在 nth-child 之后：两者特异性相同(0,0,3,0)，
     漏写会让激活卡也被上面的规则带着倾斜错位（实测踩到过）。 */
  .ip-stack .stack-card.active { transform: rotate(0) translate(0, 0); }
}

@media (max-width: 360px) {
  .subhero-grid { padding: 26px 16px 34px; }
}

/* ---------- O. 综合解决方案页移动端改造（2026-09-18） ----------
   该页是全站最长的一页（16002px ≈ 19 屏）。它是「能力内容主承载页」，内容详尽
   是刻意的，因此**不删任何文案**，只改展示形态（折叠 / 横滑 / 两列）。
   作用域全部用 body.page-solutions 限定：#wuyou、#miniapp 与首页同名，
   .entries / .value-grid / .svc-grid 也是全站通用类名，不限定会误伤。
   ① 四大无忧 + 增值服务 → 折叠     ② 六大能力 + 哈小屋 + 营销活动 → 横滑
   ③ 酒店四大挑战 + 三种共建模式 → 横滑  ④ 行业洞察占比条 → 两列
   ⑤ 合作流程 → 横滑               ⑥ subhero 精简
   另：「合作收益」区块因指标为占位数据（＋__%）已整块注释下线。
   ------------------------------------------------------------------ */
@media (max-width: 880px) {
  /* ⑥ subhero 精简（原 791px，全站最高的 subhero） */
  body.page-solutions .subhero-grid { padding: 28px 24px 32px; }
  body.page-solutions .subhero .lead { font-size: 16px; margin-top: 10px; }
  body.page-solutions .hero-art { width: min(80%, 240px); margin: 0 auto; }

  /* ① 四大无忧 + 增值服务：要点清单折叠（.has-toggle 由 solutions-ui.js 添加） */
  body.page-solutions .svc-card.has-toggle > .svc-list { display: none; }
  body.page-solutions .svc-card.has-toggle.is-open > .svc-list { display: grid; }
  body.page-solutions .svc-card > .svc-toggle { grid-column: 2; justify-self: start; }

  /* ② 六大能力 + 哈小屋：entry 横滑 */
  body.page-solutions .sol-capabilities .entries,
  body.page-solutions #miniapp .entries {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; gap: 14px; padding-bottom: 10px;
  }
  body.page-solutions .sol-capabilities .entries > .entry,
  body.page-solutions #miniapp .entries > .entry {
    flex: 0 0 74%; max-width: 290px; scroll-snap-align: start;
  }

  /* ② 营销活动与社群：benefit 横滑 */
  body.page-solutions #events .benefits {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; gap: 12px; padding-bottom: 10px;
  }
  body.page-solutions #events .benefits > .benefit {
    flex: 0 0 76%; max-width: 300px; scroll-snap-align: start;
  }

  /* ③ 酒店四大挑战 + 三种共建模式：value 横滑 */
  body.page-solutions .sol-challenges .value-grid,
  body.page-solutions .sol-modes .value-grid {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; gap: 12px; padding-bottom: 10px;
  }
  body.page-solutions .sol-challenges .value-grid > .value,
  body.page-solutions .sol-modes .value-grid > .value {
    flex: 0 0 72%; max-width: 280px; scroll-snap-align: start;
  }

  /* ⑤ 合作流程：横滑。需覆盖 ≤680px 的 flex-direction:column */
  body.page-solutions .sol-flow .flow {
    display: flex; flex-direction: row; flex-wrap: nowrap;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; gap: 12px; padding-bottom: 10px;
  }
  body.page-solutions .sol-flow .flow > .flow-step {
    flex: 0 0 72%; max-width: 280px; scroll-snap-align: start;
  }
  body.page-solutions .sol-flow .flow > .flow-arrow { display: none; }

  /* ④ 行业洞察：占比条两列 */
  body.page-solutions #insight .insight-list {
    grid-template-columns: 1fr 1fr; gap: 12px 14px;
  }
  /* 两列后每列仅约 165px，原 label 固定 132px + val 48px 会溢出，需同步收窄 */
  body.page-solutions #insight .insight-bar-label {
    width: 66px; font-size: 11.5px; line-height: 1.3; white-space: normal;
  }
  body.page-solutions #insight .insight-bar-val { width: 36px; font-size: 11.5px; }
  /* 顶部三个数字：内联 gap 64px 在窄屏必然换行 */
  body.page-solutions #insight .stats { gap: 20px 24px; }
}

/* ---------- P. 地图页筛选区（2026-09-18） ----------
   4 个下拉框（省 / 市 / 区 / 类型）在窄屏被压成单列竖排，占 412px，
   比地图画布本身（320px）还高。改回两列可省约 200px。
   断点说明：≤880px 原本就有 2 列规则，但 ≤560px 又把它覆盖回 1 列，
   而 390px 两个条件都满足、后者生效 —— 所以必须在文件末尾再声明一次 2 列，
   仅 ≤360px 这种极窄屏才退回单列（下拉框宽度不够）。
   注：地图页按业务方定位属 C 端功能「暂缓」，本次只做这一处顺手优化，
   其余部分保持原样。
   ------------------------------------------------------------------ */
@media (max-width: 880px) {
  .mf-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 360px) {
  .mf-row { grid-template-columns: 1fr; }
}

/* ---------- Q. FAQ 页移动端优化（2026-09-18） ----------
   FAQ 列表本身设计合理（30 条问答默认收起、每条 77px），不动。只处理三处：
   ① 搜索框 bug：`.faq-search-box{flex:1 1 260px}` 的 260px 是 flex-basis，
      而窄屏 .faq-toolbar 变成 flex-direction:column 后，flex-basis 作用在
      **垂直方向**，于是 260px 从「期望宽度」变成「实际高度」——搜索框变成
      一个 260px 高的巨盒，里面只有一行输入框。必须重置为 flex:0 0 auto。
   ② 攻略区（.g-teaser-grid）3 张 394px 高的卡改横滑，1560 → 约 350px。
      注：封面图是 aspect-ratio 16/9，横滑后卡变窄 → 封面变矮 → 单卡也更矮。
   ③ 工具栏间距收紧（分类按钮本身 44px 已合规，只收 gap）。
   ------------------------------------------------------------------ */
@media (max-width: 880px) {
  /* ① 关键：取消 flex-basis 在 column 方向上造成的高度 */
  .faq-search-box { flex: 0 0 auto; }

  /* ③ 工具栏 */
  .faq-toolbar { gap: 10px; margin-bottom: 24px; }

  /* ② 攻略区横滑（覆盖早前「单列 max-width:460px」的断点规则） */
  .g-teaser-grid {
    display: flex;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    gap: 12px; padding-bottom: 10px; max-width: 100%;
  }
  .g-teaser-grid > .g-teaser {
    flex: 0 0 72%; max-width: 290px; scroll-snap-align: start;
  }
}

/* ---------- R. 首页 Hero 全站统一（2026-09-18） ----------
   业务方决定：首页 Hero 的前景图与点纹理在**桌面端也隐藏**，全站统一为
   「纯文字 + 深色背景图 img-hero-clean.webp」。此前只在 ≤880px 隐藏，
   桌面仍显示 508×480 的 .hero-art（三 IP 全家福 + STAY 印章）。
   ⚠ 连带处理：前景图移除后，桌面 grid 的右列（0.75fr）会整列留空，
   故同时把 .hero-grid 改为单列并居中 —— 否则文字偏左、右侧空一大块。
   作用域仍是 .hero（首页），内页 .subhero 的前景色不受影响。
   ------------------------------------------------------------------ */
.hero .hero-art { display: none; }
.hero .hero-grid::before { display: none; }

/* 前景图移除后改单列居中，让文字成为视觉焦点 */
.hero-grid {
  grid-template-columns: 1fr;
  text-align: center;
  padding: 96px 24px 108px;
}
.hero-grid > div { max-width: 760px; margin: 0 auto; }
.hero .lead { margin-left: auto; margin-right: auto; }
.hero-actions { justify-content: center; }
.hero .stats { justify-content: center; }