.sales-page{ background: var(--page-bg); overflow-x: hidden; }
  .sales-page h1, .sales-page h2, .sales-page h3{ font-family: var(--font-head); }
  .sales-page .eyebrow{
    color: var(--primary); font-weight:700; letter-spacing:.12em;
    font-size:.78rem; text-transform:uppercase;
  }
  .sales-page .text-muted-custom{ color: var(--text-muted); }

  /* 版面容器／格線：自訂 sp- 前綴，跟 Bootstrap 的 container/row/col 完全不同名 */
  .sales-page .sp-wrap{
    max-width: 1140px; margin: 0 auto; padding: 0 1rem;
  }
  .sales-page .sp-grid-2{ display:grid; grid-template-columns: 1fr; gap: 3rem; }
  .sales-page .sp-grid-3{ display:grid; grid-template-columns: 1fr; gap: 2.2rem; }
  .sales-page .sp-grid-4{ display:grid; grid-template-columns: repeat(2, 1fr); }
  @media (min-width: 768px){
    .sales-page .sp-grid-3{ grid-template-columns: repeat(3, 1fr); }
    .sales-page .sp-grid-4{ grid-template-columns: repeat(4, 1fr); }
  }
  @media (min-width: 992px){
    .sales-page .sp-grid-2{ grid-template-columns: 1fr 1fr; align-items:center; }
  }

  /* 自訂按鈕：不用 Bootstrap 的 .btn，避免撞名，樣式全部自己刻 */
  .sales-page .sp-btn{
    display:inline-block; padding:.85rem 2rem; border-radius:6px;
    font-weight:700; text-decoration:none; transition:.2s; border:1.5px solid transparent;
    font-size:1rem; text-align:center;
  }
  .sales-page .sp-btn-solid{ background: var(--primary); color:#fff; }
  .sales-page .sp-btn-solid:hover{ opacity:.88; color:#fff; }
  .sales-page .sp-btn-outline{ border-color: rgba(255,255,255,.6); color:#fff; }
  .sales-page .sp-btn-outline:hover{ background: rgba(255,255,255,.1); color:#fff; }
  .sales-page .sp-btn-outline-dark{ border-color: var(--primary); color: var(--primary); }
  .sales-page .sp-btn-outline-dark:hover{ background: var(--primary); color:#fff; }

  /* ── Hero：置中滿版 ── */
  .sales-page .hero-band{
    background: var(--dark); color: var(--text-on-dark);
    padding: 6rem 0 4rem; text-align:center;
  }
  .sales-page .hero-band h1{
    font-size: 2.6rem; font-weight:700; line-height:1.45;
    max-width: 780px; margin: 1.2rem auto 1.5rem;
  }
  .sales-page .hero-band h1 .accent{ color: var(--primary); }
  .sales-page .hero-band p.lead{
    color: rgba(255,255,255,.72); max-width: 600px; margin: 0 auto 2.2rem;
  }

  /* Hero 下方數字條 */
  .sales-page .stat-strip{
    background:#fff; border-radius:10px; margin-top:-3.2rem; position:relative; z-index:2;
    box-shadow: 0 25px 50px rgba(0,0,0,.15);
  }
  .sales-page .stat-cell{
    padding: 1.6rem 1rem; text-align:center;
    border-right: 1px solid rgba(0,0,0,.06);
  }
  .sales-page .stat-cell:last-child{ border-right:none; }
  .sales-page .stat-cell .num{
    font-family: var(--font-head); font-weight:700; font-size:1.8rem; color: var(--dark);
  }
  .sales-page .stat-cell small{ color: var(--text-muted); display:block; margin-top:.2rem; }

  /* ── 運作流程：三步驟橫向 ── */
  .sales-page .flow-section{ padding: 3rem 0 3rem; }
  .sales-page .flow-steps{ position:relative; }
  .sales-page .flow-steps::before{
    content:""; position:absolute; top:28px; left:8%; right:8%;
    height:2px; background: repeating-linear-gradient(90deg, var(--primary) 0 8px, transparent 8px 16px);
  }
  .sales-page .flow-step{ text-align:center; position:relative; z-index:1; }
  .sales-page .flow-num{
    width:56px; height:56px; border-radius:50%; background: var(--dark); color:#fff;
    display:flex; align-items:center; justify-content:center; margin:0 auto 1.2rem;
    font-family: var(--font-head); font-weight:700; font-size:1.3rem;
  }
  .sales-page .flow-step h5{ font-weight:700; margin-bottom:.5rem; }
  .sales-page .flow-step p{ color: var(--text-muted); font-size:.9rem; max-width:260px; margin:0 auto; }

  /* ── 左右交替功能區塊 ── */
  .sales-page .showcase{ padding: 3rem 0; }
  .sales-page .showcase:nth-of-type(even){ background: var(--light-bg); }
  .sales-page .showcase .tag{
    display:inline-block; font-size:.75rem; font-weight:700; color: var(--primary);
    background:#fff; border:1px solid rgba(0,0,0,.08); padding:.3rem .8rem;
    border-radius:20px; margin-bottom:1rem;
  }
  .sales-page .showcase h2{ font-size:1.7rem; font-weight:700; margin-bottom:1rem; }
  .sales-page .showcase p{ color: var(--text-muted); }
  .sales-page .showcase ul{ list-style:none; padding:0; margin:1.3rem 0 0; }
  .sales-page .showcase ul li{ display:flex; gap:.6rem; padding:.4rem 0; font-size:.92rem; }
  .sales-page .showcase ul li i{ color: var(--primary); margin-top:.2rem; }
  .sales-page .showcase .order-first{ order:-1; }
  @media (min-width: 992px){
    .sales-page .showcase .order-lg-1{ order:1; }
    .sales-page .showcase .order-lg-2{ order:2; }
  }

  /* mockup 面板通用容器 */
  .sales-page .mockup{
    background:#fff; border-radius:10px; padding:0.8rem;
    box-shadow: 0 20px 45px rgba(0,0,0,.08); border:1px solid rgba(0,0,0,.04);
  }

  /* mockup：客戶評分 */
  .sales-page .grade-row{ display:flex; gap:.6rem; margin-bottom:1.2rem; }
  .sales-page .grade-chip{
    flex:1; text-align:center; padding:.7rem 0; border-radius:6px; font-weight:700;
    font-family: var(--font-head); font-size:1.1rem; color:#fff;
  }
  .sales-page .bar-track{ height:6px; background:#eee; border-radius:4px; overflow:hidden; margin-bottom:.9rem; }
  .sales-page .bar-fill{ height:100%; background: var(--primary); border-radius:4px; }
  .sales-page .bar-label{ display:flex; justify-content:space-between; font-size:.78rem; color: var(--text-muted); margin-bottom:.25rem; }

  /* mockup：物件規格表 */
  .sales-page .spec-list{ list-style:none; padding:0; margin:0; }
  .sales-page .spec-list li{
    display:flex; justify-content:space-between; padding:.55rem 0;
    border-bottom:1px dashed rgba(0,0,0,.08); font-size:.9rem;
  }
  .sales-page .spec-list li:last-child{ border-bottom:none; }
  .sales-page .spec-list li span:first-child{ color: var(--text-muted); }
  .sales-page .spec-list li span:last-child{ font-weight:700; }

  /* mockup：渠道整合 */
  .sales-page .chan-row{ display:flex; align-items:center; gap:.7rem; padding:.6rem 0; }
  .sales-page .chan-dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; }
  .sales-page .chan-row .name{ font-weight:700; font-size:.9rem; }
  .sales-page .chan-row .count{ margin-left:auto; color: var(--text-muted); font-size:.85rem; }

  /* mockup：熱度長條圖 */
  .sales-page .heat-item{ margin-bottom:.85rem; }
  .sales-page .heat-item .heat-label{ display:flex; justify-content:space-between; font-size:.85rem; margin-bottom:.3rem; }
  .sales-page .heat-track{ height:10px; background:#eee; border-radius:4px; overflow:hidden; }
  .sales-page .heat-fill{ height:100%; background: var(--dark); border-radius:4px; }

  /* ── 對比條 ── */
  .sales-page .compare-section{ padding: 3rem 0; }
  .sales-page .compare-line {
    display:flex; align-items:center; gap:0.5rem; padding:1rem 0;
    border-bottom:1px solid rgba(0,0,0,.06);
    text-align:center;
  }


  .sales-page .compare-line:last-child{ border-bottom:none; }
  .sales-page .compare-line .old{ flex:1; color:#FF8000; font-size:.92rem; opacity:.75; }
  .sales-page .compare-line .arrow{ color: var(--primary); font-weight:700; }
  .sales-page .compare-line .new{ flex:1; font-weight:700; font-size:.95rem; }


  /* ── 適合對象：橫條 ── */
  .sales-page .persona-row{
    display:flex; align-items:center; gap:0.7rem; padding:1.4rem 0;
    border-bottom:1px solid rgba(0,0,0,.06);
  }
  .sales-page .persona-row:last-child{ border-bottom:none; }
  .sales-page .persona-num{
    font-family: var(--font-head); font-weight:700; font-size:1.6rem; color: var(--primary); text-align:center;
    width:56px; flex-shrink:0;
  }

  /* ── CTA ── */
  .sales-page .cta-band{ background: var(--dark); color: var(--text-on-dark); border-radius: 10px; padding: 3.2rem 2.5rem; }

  @media (max-width: 991px){
    .sales-page .hero-band h1{ font-size:2.2rem; }
    .sales-page .stat-strip{ margin-top:1.5rem; }
    .sales-page .stat-cell{ border-right:none; border-bottom:1px solid rgba(0,0,0,.06); }
    .sales-page .flow-steps::before{ display:none; }
  }