/* ============================================================
   适老智家 · AgeHome —— 适老化智能改造
   设计原则：字大、对比强、文字少、目标大、看得清
   ============================================================ */

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

:root {
  --bg:            #fbf7f2;
  --card:          #ffffff;
  --ink:           #1c1713;   /* 主文字，对比 ~16:1 */
  --ink-2:         #4b4138;   /* 次要文字，对比 ~8.6:1 */
  --line:          #e7dcd0;
  --brand:         #a8451f;   /* 陶土橙 */
  --brand-strong:  #8a3814;
  --brand-deep:    #712d0f;
  --brand-soft:    #fbeee6;
  --focus:         #1256a8;
  --warn:          #b33a26;   /* 危险 / 改前 */
  --ok:            #2f7d4f;   /* 已解决 / 改后 */

  /* ---- 装饰与层次色（全部低饱和暖调，不抢正文） ---- */
  --tone-a:      #fbeae0;   /* 陶土浅 */
  --tone-a-ink:  #a8451f;
  --tone-b:      #e8f1e9;   /* 安全绿浅 */
  --tone-b-ink:  #2b7550;
  --tone-c:      #e9eff7;   /* 信任蓝浅 */
  --tone-c-ink:  #1d5680;
  --night:       #3a1c0e;   /* 深色区块底 */
  --night-2:     #522816;

  --r:   22px;
  --r-sm: 14px;
  --wrap: 1140px;

  --shadow: 0 1px 2px rgba(60, 35, 20, .05), 0 16px 34px -20px rgba(120, 70, 40, .38);
  --shadow-lift: 0 2px 4px rgba(60, 35, 20, .06), 0 26px 46px -22px rgba(120, 70, 40, .5);

  --ease: cubic-bezier(.22, .61, .36, 1);

  --font: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", system-ui, -apple-system, sans-serif;
}

/* ---- 字号三档（老人可自己调） ---------------------------- */
html          { font-size: 21px; }   /* 默认：大 */
html[data-fs="s"] { font-size: 18px; }
html[data-fs="l"] { font-size: 24px; }   /* 特大 */

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

body {
  margin: 0;
  padding-bottom: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.05rem;
  line-height: 1.7;
  font-weight: 500;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
}

/* 图片必须显式 height:auto —— 否则 <img height="720"> 这个属性会盖掉
   CSS 的 aspect-ratio，图被纵向拉成 720px 高（踩过一次） */
img { display: block; max-width: 100%; height: auto; }
svg { display: block; max-width: 100%; }

a { color: var(--brand-strong); }

/* 焦点环：粗、明显，老人也看得见 */
:focus-visible {
  outline: 4px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 22px;
}

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

/* ============================================================
   顶栏 —— 品牌 / 导航 / 字号，同一条水平线
   ============================================================ */
.topbar {
  position: relative;
  z-index: 50;
  padding: 13px 0;
  border-bottom: 2px solid var(--line);
  background: var(--bg);
}
.topbar .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  text-decoration: none;
  color: inherit;
}
.brand-mark {
  width: 3.05rem;
  height: 3.05rem;
  flex: none;
  border-radius: 15px;
  background: var(--brand-strong);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 16px -8px rgba(138, 56, 20, .8);
}
.brand-mark svg { width: 1.75rem; height: 1.75rem; }
.brand-text b {
  display: block;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.2;
  white-space: nowrap;
}
.brand-text span {
  display: block;
  font-size: .82rem;
  color: var(--ink-2);
  letter-spacing: .16em;
  font-weight: 700;
  white-space: nowrap;
}

/* ---- 导航：一个整块的胶囊组，靠当前项填充色区分 ---- */
.subnav {
  margin-left: auto;
  min-width: 0;
}
.subnav ul {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 5px;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 999px;
}
.subnav li { flex: none; }
.subnav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.85rem;
  padding: 0 .95rem;
  border-radius: 999px;
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.subnav a:hover { background: var(--brand-soft); }
.subnav a[aria-current="page"] {
  background: var(--brand-strong);
  color: #fff;
  box-shadow: 0 6px 14px -8px rgba(138, 56, 20, .9);
}

/* ---- 字号调节 -------------------------------------------- */
.fontctl {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding-left: 20px;
  border-left: 2px solid var(--line);
}
.fontctl-btns {
  display: flex;
  gap: 5px;
  padding: 5px;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 999px;
}
.fontctl-btns button {
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-weight: 900;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.fontctl-btns button:hover { background: var(--brand-soft); }
.fontctl-btns button[aria-pressed="true"] {
  background: var(--brand-strong);
  color: #fff;
}
.fs-s { font-size: .95rem; }
.fs-m { font-size: 1.15rem; }
.fs-l { font-size: 1.4rem; }

/* ============================================================
   按钮
   ============================================================ */
.btn-tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 4.1rem;
  padding: 0 2.1rem;
  border: 0;
  border-radius: 999px;
  background: var(--brand-strong);
  color: #fff;
  font-family: inherit;
  font-size: 1.32rem;
  font-weight: 900;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 26px -12px rgba(138, 56, 20, .85);
  transition: background .16s, transform .16s;
}
.btn-tel svg { width: 1.5rem; height: 1.5rem; flex: none; }
.btn-tel:hover { background: var(--brand-deep); transform: translateY(-2px); }
.btn-tel:active { transform: translateY(0); }

.btn-tel.big {
  min-height: 5rem;
  padding: 0 2.6rem;
  font-size: 1.55rem;
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  padding: 44px 0 48px;
  text-align: center;
  background-image:
    radial-gradient(circle at 86% 2%, rgba(168, 69, 31, .10) 0, transparent 46%),
    radial-gradient(circle at 2% 98%, rgba(43, 117, 80, .08) 0, transparent 42%);
}
.hero h1 {
  margin: 0 0 18px;
  font-size: clamp(2.05rem, 6.6vw, 3.5rem);
  font-weight: 900;
  line-height: 1.16;
  letter-spacing: .02em;
}
.hero h1 em {
  font-style: normal;
  color: var(--brand-strong);
}
.hero-lead {
  margin: 0 auto 26px;
  max-width: 30em;
  font-size: 1.18rem;
  line-height: 1.6;
  color: var(--ink-2);
  font-weight: 700;
  text-wrap: balance;
}

.hero-tags {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.hero-tags li {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem 1.05rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--ink);
}
.hero-tags li svg { width: 1.2rem; height: 1.2rem; color: var(--brand-strong); }

.hero-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.hero-cta .hint {
  font-size: .96rem;
  color: var(--ink-2);
  font-weight: 700;
  text-wrap: balance;
}

/* ---- 三条保障 -------------------------------------------- */
.assure {
  padding: 0 0 56px;
}
.assure-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.assure-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
}
.assure-item svg {
  width: 3.15rem; height: 3.15rem; flex: none;
  padding: .62rem;
  border-radius: 14px;
  background: var(--brand-soft);
  color: var(--brand-strong);
}
.assure-item b { font-size: 1.12rem; font-weight: 800; }

/* ============================================================
   子页面页头（全站共用）
   ============================================================ */
.page-head {
  padding: 44px 0 6px;
  text-align: center;
  background-image: linear-gradient(180deg, rgba(168, 69, 31, .10) 0%, rgba(168, 69, 31, 0) 100%);
}
.page-head h1 {
  margin: 0 0 16px;
  font-size: clamp(2.05rem, 6.6vw, 3.2rem);
  font-weight: 900;
  line-height: 1.16;
  letter-spacing: .02em;
}
.page-head p {
  margin: 0 auto;
  max-width: 26em;
  font-size: 1.16rem;
  line-height: 1.6;
  color: var(--ink-2);
  font-weight: 700;
  text-wrap: balance;
}

/* ---- 返回首页 -------------------------------------------- */
.backlink {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 3.1rem;
  margin-top: 26px;
  padding: 0 1.4rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 800;
  text-decoration: none;
}
.backlink:hover { border-color: var(--brand); color: var(--brand-strong); }
.backlink svg { width: 1.15rem; height: 1.15rem; }

/* ============================================================
   通用 section
   ============================================================ */
.sec { padding: 56px 0; }
.sec-head { text-align: center; margin-bottom: 40px; }
.sec-head h2 {
  margin: 0 0 12px;
  font-size: clamp(1.85rem, 5vw, 2.5rem);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: .02em;
  text-wrap: balance;
}
.sec-head p {
  margin: 0 auto;
  max-width: 28em;
  font-size: 1.1rem;
  color: var(--ink-2);
  font-weight: 700;
}

/* ---- 服务卡片 -------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.card {
  /* 每张卡一个色系，颜色本身就是分类线索 */
  --tone:    var(--tone-a-ink);
  --tone-bg: var(--tone-a);
  position: relative;
  padding: 30px 26px;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.card[data-tone="b"] { --tone: var(--tone-b-ink); --tone-bg: var(--tone-b); }
.card[data-tone="c"] { --tone: var(--tone-c-ink); --tone-bg: var(--tone-c); }
/* 右上角一小段色条，标出这张卡属于哪一类 */
.card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 78px;
  height: 6px;
  border-radius: 0 var(--r) 0 7px;
  background: var(--tone);
  opacity: .85;
}
.card:hover {
  border-color: var(--tone);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}
.card-ico {
  width: 4.4rem;
  height: 4.4rem;
  margin-bottom: 18px;
  border-radius: 18px;
  background: var(--tone-bg);
  color: var(--tone);
  display: grid;
  place-items: center;
  transition: transform .22s var(--ease);
}
.card:hover .card-ico { transform: scale(1.06) rotate(-2deg); }
.card-ico svg { width: 2.5rem; height: 2.5rem; }
.card h3 {
  margin: 0 0 10px;
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: .02em;
}
.card p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-2);
  font-weight: 700;
}

/* ============================================================
   流程
   ============================================================ */
.flow-sec {
  background-color: #fff;
  background-image: radial-gradient(circle at 50% -10%, rgba(168, 69, 31, .07) 0, transparent 52%);
  border-top: 2px solid var(--line);
  border-bottom: 2px solid var(--line);
}
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  counter-reset: step;
}
.steps li {
  position: relative;
  padding: 28px 26px 28px 92px;
  border: 2px solid var(--line);
  border-radius: var(--r);
  background: var(--bg);
}
.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 24px;
  top: 26px;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  background: linear-gradient(148deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  font-weight: 900;
  box-shadow: 0 9px 18px -10px rgba(113, 45, 15, .95);
}
.steps h3 {
  margin: 0 0 8px;
  font-size: 1.35rem;
  font-weight: 900;
}
.steps p {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink-2);
  font-weight: 700;
}

/* ============================================================
   底部 CTA
   ============================================================ */
.cta-sec { padding: 56px 0 64px; }
.cta-box {
  position: relative;
  overflow: hidden;
  padding: 52px 30px;
  border-radius: 28px;
  background-color: var(--brand-strong);
  background-image: radial-gradient(circle at 50% -26%, rgba(255, 255, 255, .18) 0, transparent 58%);
  color: #fff;
  text-align: center;
}
/* 右下角一圈同心弧，撑住这个大色块，不让它显得空 */
.cta-box::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -148px;
  width: 348px;
  height: 348px;
  border-radius: 50%;
  border: 46px solid rgba(255, 255, 255, .075);
  pointer-events: none;
}
.cta-box > * { position: relative; z-index: 1; }
.cta-box h2 {
  margin: 0 0 14px;
  font-size: clamp(1.9rem, 5.4vw, 2.6rem);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: .02em;
}
.cta-box p {
  margin: 0 0 30px;
  font-size: 1.16rem;
  font-weight: 700;
  color: #ffe9dd;
}
.cta-box .btn-tel {
  background: #fff;
  color: var(--brand-deep);
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .45);
}
.cta-box .btn-tel:hover { background: #fff2ea; }
.cta-tip {
  margin: 22px 0 0;
  font-size: .98rem;
  color: #ffddcc;
  font-weight: 700;
}

/* ============================================================
   页脚
   ============================================================ */
.site-foot {
  padding: 40px 0 46px;
  border-top: 2px solid var(--line);
  text-align: center;
  font-size: .96rem;
  color: var(--ink-2);
  font-weight: 700;
}
.site-foot strong { color: var(--ink); font-weight: 900; }
.site-foot p { margin: 0 0 10px; }
.site-foot p:last-child { margin-bottom: 0; }
.site-foot a { color: var(--brand-strong); }

/* ============================================================
   悬浮拨号按钮（滚过首屏后出现）
   ============================================================ */
.callbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  background: rgba(251, 247, 242, .95);
  border-top: 2px solid var(--line);
  backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  transform: translateY(115%);
  transition: transform .26s ease;
  z-index: 60;
}
.callbar.on { transform: translateY(0); }
.callbar .btn-tel { width: 100%; max-width: 560px; }

/* 窄屏只显示短文案：带号码的长文案会把按钮挤成两行 */
.callbar .cb-long  { display: none; }
.callbar .cb-short { display: inline; }

/* ============================================================
   套餐入口条带（首页 → plans.html）
   ============================================================ */
.promo { padding: 0 0 8px; }
.promo-duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.promo-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 34px 28px;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--r);
}
.promo-box .btn-more { margin-top: auto; }
.promo-box h2 {
  margin: 0 0 8px;
  font-size: clamp(1.5rem, 4.2vw, 1.95rem);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: .02em;
}
.promo-box p {
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.6;
  color: var(--ink-2);
  font-weight: 700;
}
.btn-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 3.9rem;
  padding: 0 2rem;
  border: 3px solid var(--brand-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--brand-strong);
  font-size: 1.22rem;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
  transition: background .16s;
}
.btn-more:hover { background: var(--brand-soft); }
.btn-more svg { width: 1.3rem; height: 1.3rem; }

/* 三列入口卡里卡片会变窄：按钮改成整宽，文案长了就换行，不会被裁掉 */
.promo-box .btn-more {
  width: 100%;
  padding: .6rem 1.1rem;
  white-space: normal;
  text-align: center;
  line-height: 1.35;
}
.promo-box .btn-more svg { flex: none; }

/* ============================================================
   小标签（章节上方的一行说明）
   ============================================================ */
.kicker {
  display: inline-flex;
  align-items: center;
  margin-bottom: 14px;
  padding: .34rem 1rem;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: .9rem;
  font-weight: 900;
  letter-spacing: .14em;
}
.kicker::before {
  content: "";
  width: .5rem;
  height: .5rem;
  margin-right: .5rem;
  border-radius: 50%;
  background: currentColor;
}

/* ============================================================
   首屏配图（宽屏才出现；小屏首屏要让大按钮留在第一屏内）
   ============================================================ */
.hero-visual { display: none; }

.hv-main {
  margin: 0;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  border: 3px solid #fff;
  background: #fff;
}
.hv-main img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.hv-sub {
  position: absolute;
  left: -22px;
  bottom: -22px;
  width: 42%;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 18px 34px -18px rgba(60, 28, 12, .7);
  background: #fff;
}
.hv-sub img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.hv-sub figcaption {
  padding: 8px 12px 10px;
  background: #fff;
  font-size: .8rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hv-badge {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .42rem .95rem;
  border-radius: 999px;
  background: var(--tone-b-ink);
  color: #fff;
  font-size: .9rem;
  font-weight: 900;
  letter-spacing: .06em;
  box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .6);
}
.hv-badge svg { width: 1.05rem; height: 1.05rem; }

/* ============================================================
   实景图带（首页中段，全站唯一的深色区块）
   把真实照片抬出来，让整页不再只有文字
   ============================================================ */
.gallery {
  position: relative;
  padding: 54px 0 58px;
  background-color: var(--night);
  background-image:
    radial-gradient(circle at 10% -6%, rgba(168, 69, 31, .62), transparent 44%),
    radial-gradient(circle at 94% 104%, rgba(168, 69, 31, .42), transparent 40%);
  color: #fff;
  overflow: hidden;
}
.gallery-head { text-align: center; margin-bottom: 32px; }
.gallery-head h2 {
  margin: 0 0 12px;
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: .02em;
  text-wrap: balance;
}
.gallery-head p {
  margin: 0 auto;
  max-width: 30em;
  font-size: 1.08rem;
  font-weight: 700;
  color: #f1d5c3;
}
.gallery .kicker {
  background: rgba(255, 255, 255, .15);
  color: #ffd6bd;
}

.g-grid {
  display: flex;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 4px 22px 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.g-grid::-webkit-scrollbar { display: none; }
.g-grid > li { flex: 0 0 76%; scroll-snap-align: center; }

.g-card {
  height: 100%;
  margin: 0;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--night-2);
  border: 1px solid rgba(255, 255, 255, .15);
}
.g-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.g-card figcaption {
  padding: 13px 15px 15px;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.5;
  color: #edd2c0;
}
.g-card figcaption b {
  display: block;
  margin-bottom: 3px;
  font-size: 1.1rem;
  font-weight: 900;
  color: #fff;
}

.gallery-cta { text-align: center; margin-top: 30px; }
.gallery-cta .btn-more {
  border-color: #ffd6bd;
  background: transparent;
  color: #ffd6bd;
}
.gallery-cta .btn-more:hover {
  background: #ffd6bd;
  color: var(--night);
}
.gallery-note {
  margin: 18px 0 0;
  font-size: .88rem;
  font-weight: 700;
  color: #c8a795;
}

/* ============================================================
   响应式
   ============================================================ */

/* 顶栏一条线放不下时折成两行：第一行 品牌 + 字号，第二行 导航 */
@media (max-width: 1139px) {
  .topbar .wrap { flex-wrap: wrap; gap: 12px; }
  .brand   { order: 1; }
  .fontctl { order: 2; margin-left: auto; padding-left: 0; border-left: 0; }
  .subnav  { order: 3; flex: 1 0 100%; margin-left: 0; }
  .subnav ul { justify-content: center; }
}

/* 小屏导航：5 个入口排成 2 列，比横向滚动更好认、更好点 */
@media (max-width: 659px) {
  .subnav ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding: 7px;
    /* 折成多行后 999px 胶囊会被拉成椭圆，这里改成普通圆角 */
    border-radius: 22px;
  }
  .subnav a {
    width: 100%;
    min-height: 2.72rem;
    padding: 0 .6rem;
    font-size: 1rem;
  }
  /* 入口是奇数个时，最后一项占满整行，尾巴上不留半格 */
  .subnav li:nth-child(odd):last-child { grid-column: 1 / -1; }
}

/* 小屏：顶栏压成一行，给首屏腾高度 */
@media (max-width: 560px) {
  .topbar { padding: 11px 0; }
  .topbar .wrap { gap: 10px; }
  .brand { gap: 7px; }
  .brand-mark { width: 2.45rem; height: 2.45rem; border-radius: 12px; }
  .brand-mark svg { width: 1.32rem; height: 1.32rem; }
  .brand-text b { font-size: 1.12rem; letter-spacing: .01em; }
  .brand-text span { font-size: .6rem; letter-spacing: .1em; }
  /* 字号按钮保持 ≥44px，老人手指点得准 */
  .fontctl-btns { padding: 3px; gap: 3px; }
  .fontctl-btns button { width: 2.1rem; height: 2.1rem; }
  .fs-s { font-size: .82rem; }
  .fs-m { font-size: 1rem; }
  .fs-l { font-size: 1.2rem; }

  /* 首屏大按钮：小屏改成整宽。字数多时允许折成两行，
     既不会撑破容器，按钮反而更大更好点 */
  .btn-tel.big {
    width: 100%;
    max-width: 100%;
    font-size: 1.12rem;
    padding: .72rem 1rem;
    min-height: 4.6rem;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
    letter-spacing: 0;
  }
  .btn-tel.big svg { width: 1.3rem; height: 1.3rem; }

  /* 小屏首屏要放下大按钮：压缩顶部与首屏留白，别把按钮挤出屏幕 */
  .subnav a { min-height: 2.6rem; }
  .hero { padding: 28px 0 32px; }

  .hero-tags li { padding: .5rem .9rem; font-size: .98rem; }

  /* 图带底部按钮：小屏整宽、允许折行，长文案不会撑破容器 */
  .gallery-cta .btn-more {
    width: 100%;
    padding: .62rem 1.1rem;
    white-space: normal;
    line-height: 1.35;
  }
  .gallery-cta .btn-more svg { flex: none; }

  /* 底部悬浮拨号条：小屏收一档，号码与图标必须挤在一行 */
  .callbar .btn-tel {
    gap: .5rem;
    min-height: 3.9rem;
    padding: 0 1.2rem;
    font-size: 1.12rem;
    letter-spacing: 0;
  }
  .callbar .btn-tel svg { width: 1.25rem; height: 1.25rem; }
}

/* 极窄屏（320px 级）：顶栏只留标识，保证品牌与字号挤在一行 */
@media (max-width: 344px) {
  .brand-text { display: none; }
  /* 拨号条再收一档，号码与图标仍要一行放得下 */
  .callbar .btn-tel { gap: .45rem; padding: 0 .9rem; font-size: 1rem; }
  .callbar .btn-tel svg { width: 1.15rem; height: 1.15rem; }
}

@media (min-width: 660px) {
  .assure-grid { grid-template-columns: repeat(3, 1fr); }
  .cards       { grid-template-columns: repeat(2, 1fr); }
  .steps       { grid-template-columns: repeat(2, 1fr); }
  .promo-duo   { grid-template-columns: repeat(2, 1fr); }
  /* 三张入口卡在 2 列下会剩半格，让最后一张占满整行 */
  .promo-box:last-child { grid-column: 1 / -1; }

  /* 图片带：宽屏改网格，不用横滑 */
  .g-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 22px;
    overflow: visible;
  }
  .g-grid > li { flex: none; }

  /* 屏幕够宽，拨号条显示完整号码 */
  .callbar .cb-long  { display: inline; }
  .callbar .cb-short { display: none; }
}

@media (min-width: 960px) {
  .sec        { padding: 72px 0; }
  .cards      { grid-template-columns: repeat(3, 1fr); }
  .promo-duo  { grid-template-columns: repeat(3, 1fr); }
  .promo-box:last-child { grid-column: auto; }
  .steps      { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .steps li   { padding: 96px 24px 28px; }
  .steps li::before { top: 26px; left: 24px; }
  .cta-box    { padding: 68px 40px; }

  /* 首屏改两栏：左边说话，右边给图 */
  .hero {
    padding: 48px 0 62px;
    text-align: left;
  }
  /* 左栏要放得下整行标题与整行按钮，所以给多一点 */
  .hero h1 { font-size: clamp(2.05rem, 5.2vw, 3.4rem); }
  .hero .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    align-items: center;
    column-gap: 52px;
  }
  .hero-lead { margin-left: 0; margin-right: 0; }
  .hero-tags { justify-content: flex-start; }
  .hero-cta  { align-items: flex-start; }
  .hero-visual {
    display: block;
    position: relative;
  }
}

/* 中段宽屏（平板横屏到小笔记本）：按钮收一档保证一行，
   副图先不出，免得小图上叠太满 */
@media (min-width: 960px) and (max-width: 1279px) {
  .hero .btn-tel.big { font-size: 1.32rem; padding: 0 1.9rem; }
  .hv-sub { display: none; }
}

@media (min-width: 1060px) {
  .g-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery { padding: 70px 0 74px; }
}

@media (min-width: 1140px) {
  /* 宽屏顶栏钉在顶上，老人翻到哪儿都能换页 */
  .topbar {
    position: sticky;
    top: 0;
    background: rgba(251, 247, 242, .93);
    backdrop-filter: saturate(1.5) blur(12px);
    -webkit-backdrop-filter: saturate(1.5) blur(12px);
  }
  html { scroll-padding-top: 96px; }

  .callbar {
    left: auto;
    right: 28px;
    bottom: 28px;
    padding: 0;
    background: none;
    border: 0;
    backdrop-filter: none;
  }
  .callbar .btn-tel {
    width: auto;
    box-shadow: 0 16px 34px -14px rgba(138, 56, 20, .95);
  }
}

/* 尊重「减少动效」偏好 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}