body {
  background-image: linear-gradient(180deg, var(--bs-secondary-bg), var(--bs-body-bg) 100px, var(--bs-body-bg));
}

.container {
  max-width: 1024px;
}
body.blog .container {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
}

.pricing-header {
  max-width: 700px;
}


@media (max-width: 768px) {
.home nav {
	display:none !important;
}
.home .container.py-3 {
    padding-top:0 !important;
}
}

#intro {
	margin-top:60px;
	margin-bottom:60px;
}

      :root { --anchor-offset: 88px; }
      section { scroll-margin-top: var(--anchor-offset); }
      .hero-badge {
        background: rgba(13, 110, 253, .10);
        border: 1px solid rgba(13, 110, 253, .18);
      }
      .icon-circle {
        width: 44px; height: 44px;
        display: inline-flex; align-items: center; justify-content: center;
        border-radius: 999px;
        background: rgba(13, 110, 253, .08);
        border: 1px solid rgba(13, 110, 253, .14);
        font-weight: 700;
      }
      .testimonial-avatar {
        width: 48px; height: 48px; border-radius: 999px;
        background: rgba(0,0,0,.06);
        display: inline-flex; align-items: center; justify-content: center;
        font-weight: 700;
      }
      .card-soft {
        border: 1px solid rgba(0,0,0,.08);
        box-shadow: 0 10px 28px rgba(0,0,0,.05);
      }
      .muted-small { font-size: .925rem; }
      .link-muted { color: inherit; text-decoration: none; }
      .link-muted:hover { text-decoration: underline; }
/* === Header base === */
.site-header {
  background: transparent;
  transition: background-color .25s ease, box-shadow .25s ease;
}

/* 首屏：透明、干净 */
.site-header:not(.scrolled) {
  background-color: transparent;
  box-shadow: none;
  border-bottom: none;
}

/* 滚动后：有背景，更稳重 */
.site-header.scrolled {
  background-color: rgba(255,255,255,.96);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
    
      .site-header .btn-primary{
        background-color:#0d6efd;
        border-color:#0d6efd;
        transition:all .2s ease;
      }
      .site-header:not(.scrolled) .btn-primary{
        background-color:transparent;
        color:#0d6efd;
        border-color:#0d6efd;
      }
      .site-header.scrolled .btn-primary{
        background-color:#0d6efd;
        color:#fff;
      }

    body.blog { line-height:1.75; }
	
    .article-hero{ background:#f8f9fa; }
    section{ scroll-margin-top:88px; }
    .callout{ border:1px solid rgba(0,0,0,.08); border-radius:.75rem; background:#fff; }
    .badge-num{ width:36px;height:36px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:#0d6efd;color:#fff;font-weight:700; }
    .muted-small{ font-size:.925rem; }
    .comparison-table { background: #f9f9f9; border-radius: 8px; overflow: hidden; }
    .comparison-table th { background: #e9ecef; font-weight: 600;}
    .comparison-table td:first-child { font-weight: 500; }
    .shopify-highlight { background-color: rgba(13, 110, 253, 0.05); }
    .shopline-highlight { background-color: rgba(40, 167, 69, 0.05); }
    .platform-badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 0.85rem; font-weight: 600; }
    .badge-shopify { background: #0d6efd; color: white; }
    .badge-shopline { background: #28a745; color: white; }
    .feature-score { display: inline-block; width: 24px; height: 24px; line-height: 24px; text-align: center; background: #6c757d; color: white; border-radius: 4px; font-size: 0.85rem; }
    .score-good { background: #28a745; }
    .score-excellent { background: #198754; }
    .score-fair { background: #ffc107; color: #000; }
    
	
    .article-container{
      max-width: 920px;
      margin-left: auto;
      margin-right: auto;
    }
    .article-hero h1{
      line-height: 1.25;
      letter-spacing: -0.01em;
    }
    
    .decision-matrix {
      position: relative;
      padding: 24px;
      border-radius: 12px;
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    }
    .matrix-item {
      padding: 16px;
      border-radius: 8px;
      background: white;
      border: 1px solid rgba(0,0,0,0.08);
      margin-bottom: 16px;
    }
    .matrix-header {
      font-weight: 600;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .cost-summary {
      background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
      color: white;
      border-radius: 12px;
    }
    .icon-wrapper {
      width: 48px;
      height: 48px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f8f9fa;
      margin-right: 12px;
    }
	
.bg-opacity-20 {
    --bs-bg-opacity: 0.2;
}
.bg-opacity-30 {
    --bs-bg-opacity: 0.3;
}

    

    .theme-card { transition: transform 0.3s, box-shadow 0.3s; border: 1px solid #dee2e6; }
    .theme-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
    .app-category { padding: 8px 16px; border-radius: 20px; font-size: 0.8rem; display: inline-block; margin-right: 8px; margin-bottom: 8px; }
    .category-seo { background: #e7f5ff; color: #0d6efd; }
    .category-conversion { background: #fff3cd; color: #664d03; }
    .category-marketing { background: #d1e7dd; color: #0f5132; }
    .category-operations { background: #f8d7da; color: #842029; }
    .category-shipping { background: #cff4fc; color: #055160; }
    .compatibility-check li { position: relative; padding-left: 1.8rem; }
    .compatibility-check li:before { content: "✓"; position: absolute; left: 0; color: #198754; font-weight: bold; }
    .rating-stars { color: #ffc107; font-size: 1.1rem; }
	
ul.compatibility-check, ul.feature-list, ul.seo-checklist {
    list-style:none;
	padding-left: 1rem;
}


    .toc a{ text-decoration:none; }
    .toc a:hover{ text-decoration:underline; }
    .badge-num{ width:36px;height:36px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:#0d6efd;color:#fff;font-weight:700; flex:0 0 auto;}
    .callout{ border:1px solid rgba(0,0,0,.08); border-radius: .75rem; background: #fff; }
	
	    .checklist li{ margin-bottom:.6rem; }
    .day-badge{ width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#0d6efd;color:#fff;font-weight:600;}
	
    
    /* 新添加样式 */
    .timeline {
      position: relative;
      padding-left: 30px;
    }
    .timeline:before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 2px;
      background: #0d6efd;
    }
    .timeline-item {
      position: relative;
      margin-bottom: 24px;
    }
    .timeline-item:before {
      content: '';
      position: absolute;
      left: -34px;
      top: 6px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #0d6efd;
      border: 3px solid white;
      box-shadow: 0 0 0 2px #0d6efd;
    }
    .cost-summary {
      background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
      color: white;
      border-radius: 12px;
    }
    .app-icon {
      width: 48px;
      height: 48px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f8f9fa;
      margin-right: 12px;
    }
	
	    .step-card { transition: transform 0.2s; }
    .step-card:hover { transform: translateY(-4px); }
    .checklist-item { padding-left: 1.5rem; position: relative; }
    .checklist-item:before { content: "✓"; position: absolute; left: 0; color: #198754; font-weight: bold; }
	
	    .article-hero{ background:#f8f9fa; }
    section{ scroll-margin-top:88px; }
    .callout{ border:1px solid rgba(0,0,0,.08); border-radius:.75rem; background:#fff; }
    .badge-num{ width:36px;height:36px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:#0d6efd;color:#fff;font-weight:700; }
    .muted-small{ font-size:.925rem; }
    .cost-table { background: #f9f9f9; border-radius: 8px; overflow: hidden; }
    .cost-table th { background: #e9ecef; font-weight: 600; }
    .cost-table td:first-child { font-weight: 500; }
    .highlight-box { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-left: 4px solid #0d6efd; }
    .article-container{ max-width: 920px; margin-left: auto; margin-right: auto; }
    .article-hero h1{ line-height: 1.25; letter-spacing: -0.01em; }
    .timeline { position: relative; padding-left: 30px; }
    .timeline:before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: #0d6efd; }
    .timeline-item { position: relative; margin-bottom: 24px; }
    .timeline-item:before { content: ''; position: absolute; left: -34px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: #0d6efd; border: 3px solid white; box-shadow: 0 0 0 2px #0d6efd; }
    .app-icon { width: 48px; height: 48px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #f8f9fa; margin-right: 12px; }
	
    .comparison-table tr:hover { background-color: #f8f9fa; }
    .fee-badge { font-size: 0.75rem; padding: 2px 8px; border-radius: 12px; }
    .integration-card { transition: all 0.3s ease; }
    .integration-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
    .feature-list li { position: relative; padding-left: 1.5rem; }
    .feature-list li:before { content: "•"; position: absolute; left: 0; color: #0d6efd; font-weight: bold; }
	
	    .seo-badge { font-size: 0.75rem; padding: 3px 10px; border-radius: 12px; display: inline-block; margin-right: 5px; }
    .keyword-difficulty { display: inline-block; width: 60px; text-align: center; border-radius: 4px; color: white; font-size: 0.8rem; padding: 2px 5px; }
    .difficulty-easy { background: #28a745; }
    .difficulty-medium { background: #ffc107; color: #000; }
    .difficulty-hard { background: #dc3545; }
    .seo-checklist li { position: relative; padding-left: 1.8rem; margin-bottom: 0.5rem; }
    .seo-checklist li:before { content: "✓"; position: absolute; left: 0; color: #198754; font-weight: bold; }
    .code-example { background: #f8f9fa; border-left: 4px solid #0d6efd; padding: 1rem; font-family: monospace; font-size: 0.9rem; border-radius: 0 4px 4px 0; }