@charset "utf-8"; 
/* ==========================================================================
   销房宝官网 2026 · 设计基座（PC / 移动端共用）
   浅色体系 · 令牌 / 重置 / 排版基准 / 通用工具
   ========================================================================== */

:root{ 
  /* 墨色 */
  --ink: #0E1420; 
  --ink-2: #28303F; 
  --ink-3: #4E5766; 
  --ink-4: #6E7787; 
  --ink-5: #98A1B0; 
  --ink-6: #BFC6D1; 

  /* 纸面 */
  --paper: #FFFFFF; 
  --wash: #F6F8FC; 
  --wash-2: #EFF3F9; 
  --tint: #F0F5FF;           /* 淡蓝底 */
  --tint-2: #E4ECFF; 

  /* 品牌 */
  --brand: #2B5CE6; 
  --brand-deep: #1B3FB8; 
  --brand-soft: #DCE7FF; 
  --brand-on-dark: #8FB0FF;   /* 深色块上的正文强调，正常品牌蓝在深底上对比度不够 */
  --eyebrow-on-dark: #6E97FF;  /* 深色块上的眉题。比上面那个深一档，是两处各自调出来的，
                                要不要统一是设计决定，不是整理代码能顺手改的 */
  --accent: #F1500D;         /* 易瑞特橙红 · 仅用于眉题与极小面积强调 */
  --accent-soft: #FFE9E0; 
  --ok: #12A66A; 

  /* 线 */
  --line: rgba(14,20,32,.10); 
  --line-soft: rgba(14,20,32,.06); 
  --line-strong: rgba(14,20,32,.20); 

  /* 深色块（客户墙是全站唯一一处）上的发丝线。
     这两个值在基线和 ≤768 的两列布局里各用一次，做成令牌就不用记着成对改。 */
  --hair-on-dark: rgba(255,255,255,.075); 
  --hair-on-dark-soft: rgba(255,255,255,.055); 

  /* 阴影 */
  --sh-1: 0 2px 8px -2px rgba(14,20,32,.06); 
  --sh-2: 0 14px 34px -18px rgba(14,20,32,.24); 
  --sh-3: 0 30px 70px -34px rgba(14,20,32,.30); 

  /* 顶栏高度。这一个值牵着四处：顶栏自身、吸顶收缩后的高度、巨幕菜单的 top、
     区块的 scroll-margin-top。窄屏在响应式一节里重定义成 60px，下游全部自动跟随。 */
  --header-h: 80px; 
  --header-h-solid: 70px; 

  /* 层级：全站只有这五个 z-index，加新的之前先读这张表。
     巨幕菜单的 119 不是笔误：它从顶栏「下方」滑出（119 < 顶栏 120）。
     抽屉 125 要盖住顶栏（自带 logo 和关闭按钮），所以 > 120。 */
  --z-float: 110;            /* 右下悬浮咨询条 */
  --z-mega: 119;             /* 巨幕菜单 · 桌面 */
  --z-header: 120;           /* 吸顶顶栏 */
  --z-drawer: 125;           /* 窄屏抽屉 · 盖住顶栏 */
  --z-toast: 200;            /* 提交反馈浮条，必须压住一切 */

  /* 销控状态色：图例语义色，不是 UI 装饰色，别拿去做按钮或标签。
     -mute 是左侧「上一代」图里的低饱和版本，对比本身就是论点。 */
  --st-none: #5D8FFF; 
  --st-opt: #F0B429; 
  --st-sold: #E5484D; 
  --st-man: #8B5CF6; 
  --st-opt-mute: #EFD08A; 
  --st-sold-mute: #EAA7A9; 

  /* 示意图专用灰阶（只给 §05 代差对比那组内联 SVG 用，不要用于 UI）。
     1→6 由浅到深是同一条阶梯，左图全靠它退化成灰；iso-* 是等距体块的三个面。 */
  --dia-1: #E8EBF0; 
  --dia-2: #E3E7ED; 
  --dia-3: #DDE1E7; 
  --dia-4: #D5DAE2; 
  --dia-5: #C3C9D3; 
  --dia-6: #B6BDC8; 
  --iso-top: #E8EEFA; 
  --iso-side: #C9D8F6; 
  --iso-side-dark: #9BB4E4; 

  /* 字体 */
  --sans: "PingFang SC","HarmonyOS Sans SC","Source Han Sans CN","Noto Sans CJK SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; 
  --mono: "SF Mono",ui-monospace,"JetBrains Mono",Menlo,Consolas,"Liberation Mono",monospace; 

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --r: 4px;
  /* 移动端卡片语言：比 PC 的 4px 更圆。只在首页移动档（index_2026.css ≤768）引用，
     原型销房宝官网2026-移动端.html 的卡片统一是 10–12px。 */
  --r-card-m: 12px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body{ 
  margin: 0; font-family: var(--sans); color: var(--ink-2); background: var(--paper); 
  line-height: 1.75; font-size: 16px; 
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; 
  font-variant-numeric: tabular-nums; 
}
h1,h2,h3,h4,h5,p,figure,ul,ol,dl,dd,blockquote{ margin: 0; }
ul,ol{ padding: 0; list-style: none; }
img{ max-width: 100%; display: block; border: 0; }
a{ color: inherit; text-decoration: none; }
button,input,textarea,select{ font: inherit; color: inherit; }
button{ background: none; border: 0; padding: 0; cursor: pointer; }
svg{ display: block; }
::selection{ background: var(--brand); color: #fff; }

/* ===== 眉题 / 序号 / 数字 ===== */
.eyebrow{
  display: inline-flex; align-items: center; gap: 10px; 
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; 
  color: var(--brand); font-weight: 600; 
}
.eyebrow::before{ content: ""; width: 18px; height: 1px; background: currentColor; flex: none; }
.eyebrow--accent{ color: var(--accent); }
.idx{ font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--ink-5); font-weight: 500; }
.num{ font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* ===== 小字脚注 ===== */
.note{ font-size: 12.5px; color: var(--ink-5); line-height: 1.65; }
.note a{ color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; }

/* ===== 滚动揭示 ===== */
[data-reveal]{
  opacity: 0; transform: translateY(20px); 
  transition: opacity .85s var(--ease-out),transform .85s var(--ease-out); 
  transition-delay: var(--d,0ms); will-change: opacity,transform; 
}
[data-reveal].is-in{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ 
  [data-reveal]{ opacity: 1; transform: none; transition: none; }
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

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

/* ===== 走马灯 ===== */
.marquee{ overflow: hidden; -webkit-mask-image: linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image: linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.marquee__track{ display: flex; width: max-content; animation: xslide 52s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state: paused; }
@keyframes xslide{ from{ transform: translateX(0); }to{ transform: translateX(-50%); }}

/* ===== 核数高亮 ===== */
/* data-verify 标记，默认不生效，挂 body.show-verify 才显示 */
body.show-verify [data-verify="pending"]{ box-shadow: inset 0 -2px 0 rgba(241,80,13,.55); }


@media (hover: none) and (pointer: coarse) {
   input, textarea, select {
     font-size: max(16px, 1em) !important;
   }
 }