/* roulang page: index */
:root {
  --color-primary: #1B1D26;
  --color-secondary: #D4AF37;
  --color-secondary-hover: #C6A030;
  --color-secondary-light: rgba(212,175,55,0.08);
  --color-bg: #F7F5F0;
  --color-bg-alt: #EFECE6;
  --color-accent: #7A6B52;
  --color-text: #2A2A2E;
  --color-title: #1B1D26;
  --color-muted: #8A8A8E;
  --color-border: #E5E1DA;
  --color-success: #4A7A5A;
  --color-danger: #B34A4A;
  --color-white: #FFFFFF;
  --color-dark-overlay: rgba(27,29,38,0.85);
  --font-sans: 'Inter', 'Noto Sans SC', 'PingFang SC', sans-serif;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 20px;
  --shadow-card: 0 4px 16px rgba(27,29,38,0.06);
  --shadow-card-hover: 0 12px 32px rgba(27,29,38,0.12);
  --transition-base: 0.2s ease;
  --transition-smooth: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
  color: var(--color-title);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.5em;
}
h1 { font-size: 2.5rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1rem; }
p { margin-bottom: 1.25em; }
a { color: var(--color-secondary); text-decoration: none; transition: color var(--transition-base); }
a:hover { color: var(--color-secondary-hover); }
img { max-width: 100%; height: auto; }
.container { max-width: 1140px; padding-left: 1.25rem; padding-right: 1.25rem; }
@media (min-width: 1280px) { .container { max-width: 1280px; } }
.section-padding { padding: 4rem 0; }
@media (max-width: 768px) { .section-padding { padding: 2.5rem 0; } }
.section-title { text-align: center; margin-bottom: 0.25rem; }
.section-subtitle { text-align: center; color: var(--color-muted); font-size: 1rem; margin-bottom: 2.5rem; font-weight: 400; }
.section-divider { width: 60px; height: 3px; background: var(--color-secondary); margin: 0 auto 2rem; border: none; }

/* Header / Nav */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  height: 80px;
  background: transparent;
  transition: background var(--transition-smooth), box-shadow var(--transition-smooth);
}
.site-header.scrolled {
  background: rgba(27,29,38,0.95);
  box-shadow: 0 2px 24px rgba(27,29,38,0.2);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.site-logo {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: 0.03em;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.site-logo:hover { color: var(--color-secondary); }
.site-logo .logo-icon { color: var(--color-secondary); font-size: 1.5rem; }
.nav-list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}
.nav-list li { position: relative; }
.nav-list li a {
  display: block;
  padding: 0 1.25rem;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(247,245,240,0.9);
  text-decoration: none;
  transition: color var(--transition-base);
  line-height: 80px;
  position: relative;
}
.nav-list li a::after {
  content: '';
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--color-secondary);
  transition: width var(--transition-smooth);
  border-radius: 1px;
}
.nav-list li a:hover { color: var(--color-secondary); }
.nav-list li a:hover::after { width: 60%; }
.nav-list li a.active { color: var(--color-secondary); }
.nav-list li a.active::after { width: 60%; }
.nav-list li + li::before {
  content: '';
  display: inline-block;
  width: 1px;
  height: 16px;
  background: var(--color-secondary);
  vertical-align: middle;
  opacity: 0.5;
}
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--color-secondary);
  font-size: 1.5rem;
  line-height: 1;
}
@media (max-width: 991px) {
  .site-header { height: 64px; }
  .nav-toggle { display: block; }
  .nav-list {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-primary);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    transform: translateX(100%);
    transition: transform var(--transition-smooth);
    z-index: 1060;
  }
  .nav-list.open { transform: translateX(0); }
  .nav-list li a { font-size: 1.25rem; line-height: 3rem; padding: 0 2rem; }
  .nav-list li a::after { bottom: 4px; }
  .nav-list li + li::before { display: none; }
  .nav-close {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: var(--color-secondary);
    font-size: 2rem;
    cursor: pointer;
  }
}
@media (min-width: 992px) {
  .nav-close { display: none; }
}

/* Hero */
.hero-section {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  background-image: url('/assets/images/backpic/back-1.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(27,29,38,0.92) 0%, rgba(27,29,38,0.4) 50%, rgba(27,29,38,0.88) 100%);
  z-index: 1;
}
.hero-section .container { position: relative; z-index: 2; }
.hero-content { max-width: 720px; }
.hero-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.2;
  margin-bottom: 0.75rem;
}
.hero-subtitle {
  font-size: 1.25rem;
  color: var(--color-secondary);
  font-weight: 500;
  margin-bottom: 1.5rem;
}
.hero-desc {
  font-size: 1rem;
  color: rgba(247,245,240,0.8);
  max-width: 580px;
  margin-bottom: 2rem;
  line-height: 1.7;
}
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.btn-primary-custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-secondary);
  color: var(--color-primary);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.75rem 2.5rem;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: background var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
  text-decoration: none;
}
.btn-primary-custom:hover {
  background: var(--color-secondary-hover);
  color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(212,175,55,0.3);
}
.btn-secondary-custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--color-secondary);
  font-weight: 500;
  font-size: 1rem;
  padding: 0.75rem 2.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-secondary);
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base);
  text-decoration: none;
}
.btn-secondary-custom:hover {
  background: var(--color-secondary-light);
  color: var(--color-secondary);
}
.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(247,245,240,0.6);
  font-size: 1.5rem;
  animation: pulse-down 2s infinite;
}
@keyframes pulse-down {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.6; }
  50% { transform: translateX(-50%) translateY(8px); opacity: 1; }
}
@media (max-width: 768px) {
  .hero-section { min-height: 80vh; }
  .hero-title { font-size: 1.75rem; }
  .hero-subtitle { font-size: 1rem; }
  .hero-desc { font-size: 0.9375rem; }
  .hero-actions { flex-direction: column; align-items: stretch; }
}

/* Card base */
.card-custom {
  background: var(--color-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-smooth), transform var(--transition-smooth);
  overflow: hidden;
}
.card-custom:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}

/* 权益对比表 */
.pricing-table .card-custom { border-top: 3px solid transparent; }
.pricing-table .card-custom.featured {
  border-top: 3px solid var(--color-secondary);
  border-color: var(--color-secondary);
  position: relative;
}
.pricing-table .card-custom.featured .badge-recommend {
  position: absolute;
  top: -12px;
  right: 16px;
  background: var(--color-secondary);
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.75rem;
  border-radius: var(--radius-lg);
  letter-spacing: 0.02em;
}
.pricing-header {
  background: var(--color-primary);
  color: var(--color-white);
  padding: 1.5rem 1rem;
  text-align: center;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.pricing-header h3 { color: var(--color-white); margin-bottom: 0.25rem; }
.pricing-header .price { font-size: 1.5rem; font-weight: 700; color: var(--color-secondary); }
.pricing-body { padding: 1.5rem 1rem; }
.pricing-body ul { list-style: none; padding: 0; margin: 0; }
.pricing-body ul li {
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9375rem;
}
.pricing-body ul li:last-child { border-bottom: none; }
.pricing-body ul li .icon-check { color: var(--color-success); font-size: 1rem; }
.pricing-body ul li .icon-times { color: var(--color-danger); font-size: 1rem; }
.pricing-footer { padding: 1rem 1rem 1.5rem; text-align: center; }

/* 等级亮点 */
.tier-card {
  text-align: center;
  padding: 2rem 1.5rem;
  background: var(--color-white);
  border-radius: var(--radius-md);
  border-top: 3px solid var(--color-secondary);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-smooth), transform var(--transition-smooth);
}
.tier-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-6px);
}
.tier-card .tier-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-bg-alt);
  font-size: 1.5rem;
  color: var(--color-secondary);
}
.tier-card h3 { margin-bottom: 0.5rem; }
.tier-card p { color: var(--color-muted); font-size: 0.9375rem; margin-bottom: 0; }

/* 专属内容预览 */
.preview-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-smooth), transform var(--transition-smooth);
  overflow: hidden;
}
.preview-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}
.preview-card .preview-img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}
.preview-card .preview-body { padding: 1.25rem; }
.preview-card .preview-body h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.preview-card .preview-body p { font-size: 0.9375rem; color: var(--color-muted); margin-bottom: 0.75rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.preview-card .preview-meta { display: flex; align-items: center; gap: 0.75rem; }
.badge-level {
  background: var(--color-secondary);
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-lg);
}
.unlock-link { font-size: 0.875rem; font-weight: 500; color: var(--color-secondary); }
.unlock-link:hover { text-decoration: underline; }

/* FAQ */
.faq-section { background: var(--color-bg); }
.accordion-custom .accordion-item {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md) !important;
  margin-bottom: 0.75rem;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(27,29,38,0.04);
}
.accordion-custom .accordion-button {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-title);
  background: var(--color-white);
  padding: 1.25rem 1.5rem;
  box-shadow: none;
  border: none;
  transition: background var(--transition-base);
}
.accordion-custom .accordion-button:not(.collapsed) {
  background: var(--color-bg-alt);
  color: var(--color-title);
}
.accordion-custom .accordion-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%231B1D26' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");
  transition: transform var(--transition-base);
}
.accordion-custom .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%231B1D26' viewBox='0 0 16 16'%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3E%3C/svg%3E");
}
.accordion-custom .accordion-body {
  padding: 0 1.5rem 1.25rem;
  font-size: 0.9375rem;
  color: var(--color-text);
  line-height: 1.7;
}

/* CTA */
.cta-section {
  background: var(--color-primary);
  padding: 4rem 0;
  text-align: center;
}
.cta-section h2 { color: var(--color-white); margin-bottom: 0.5rem; }
.cta-section .cta-subtitle { color: rgba(247,245,240,0.7); font-size: 1rem; margin-bottom: 2rem; }
.cta-section .btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-secondary);
  color: var(--color-primary);
  font-weight: 600;
  font-size: 1.1rem;
  padding: 1rem 3.5rem;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: background var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
  text-decoration: none;
}
.cta-section .btn-cta:hover {
  background: var(--color-secondary-hover);
  transform: scale(1.02);
  box-shadow: 0 8px 32px rgba(212,175,55,0.35);
}
.cta-section .cta-footnote {
  display: block;
  margin-top: 1rem;
  color: var(--color-muted);
  font-size: 0.8125rem;
}

/* 最新资讯 */
.news-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-smooth), transform var(--transition-smooth);
  height: 100%;
}
.news-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}
.news-card h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.news-card h3 a { color: var(--color-title); }
.news-card h3 a:hover { color: var(--color-secondary); }
.news-card p { font-size: 0.9375rem; color: var(--color-muted); margin-bottom: 0.75rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-meta { display: flex; align-items: center; gap: 0.75rem; font-size: 0.8125rem; color: var(--color-muted); margin-bottom: 0.75rem; }
.news-meta .badge-category {
  background: var(--color-bg-alt);
  color: var(--color-accent);
  padding: 0.15rem 0.5rem;
  border-radius: 2px;
  font-weight: 500;
  font-size: 0.75rem;
}
.read-more { font-size: 0.875rem; font-weight: 500; color: var(--color-secondary); }
.read-more:hover { text-decoration: underline; }
.empty-state { padding: 3rem 0; color: var(--color-muted); font-size: 1rem; }
.empty-state i { font-size: 2.5rem; color: var(--color-accent); margin-bottom: 1rem; display: block; }

/* 关于我们 */
.about-section { background: var(--color-bg-alt); }
.about-content { max-width: 780px; margin: 0 auto; text-align: center; }
.about-content p { font-size: 1rem; color: var(--color-text); line-height: 1.8; }
.about-values { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; margin-top: 2rem; }
.about-values .value-item { text-align: center; flex: 0 0 160px; }
.about-values .value-item .value-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-secondary);
  font-size: 1.25rem;
  box-shadow: 0 4px 12px rgba(27,29,38,0.06);
}
.about-values .value-item h4 { font-size: 1rem; margin-bottom: 0.25rem; }
.about-values .value-item p { font-size: 0.875rem; color: var(--color-muted); margin-bottom: 0; }

/* Footer */
.site-footer {
  background: var(--color-primary);
  padding: 3rem 0 1.5rem;
  color: rgba(247,245,240,0.7);
}
.site-footer .footer-brand { font-size: 1.25rem; font-weight: 700; color: var(--color-white); margin-bottom: 0.75rem; }
.site-footer .footer-brand span { color: var(--color-secondary); }
.site-footer p { font-size: 0.875rem; margin-bottom: 0.75rem; }
.site-footer h5 { color: var(--color-white); font-size: 0.9375rem; font-weight: 600; margin-bottom: 1rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin-bottom: 0.4rem; }
.site-footer ul li a { color: rgba(247,245,240,0.6); font-size: 0.875rem; transition: color var(--transition-base); }
.site-footer ul li a:hover { color: var(--color-secondary); text-decoration: none; }
.site-footer .footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(247,245,240,0.08);
  color: rgba(247,245,240,0.6);
  margin-right: 0.5rem;
  transition: background var(--transition-base), color var(--transition-base);
}
.site-footer .footer-social a:hover { background: var(--color-secondary); color: var(--color-primary); }
.site-footer .footer-divider {
  border: none;
  border-top: 1px solid #2C2F42;
  margin: 1.5rem 0 1rem;
}
.site-footer .footer-copyright { text-align: center; font-size: 0.8125rem; color: rgba(247,245,240,0.5); }

/* 通用工具 */
.text-gold { color: var(--color-secondary); }
.bg-dark-custom { background: var(--color-primary); }
.bg-warm { background: var(--color-bg); }
.bg-warm-alt { background: var(--color-bg-alt); }
.btn-disabled { background: var(--color-muted) !important; color: var(--color-white) !important; cursor: not-allowed !important; pointer-events: none; }

/* 响应式微调 */
@media (max-width: 576px) {
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.4rem; }
  .hero-title { font-size: 1.5rem; }
  .hero-subtitle { font-size: 0.9375rem; }
  .section-padding { padding: 2rem 0; }
  .pricing-body ul li { font-size: 0.875rem; }
  .about-values .value-item { flex: 0 0 120px; }
}
@media (max-width: 992px) {
  .site-header.scrolled { background: rgba(27,29,38,0.98); }
}

/* roulang page: article */
/* ===== 设计变量 ===== */
        :root {
            --color-primary: #1B1D26;
            --color-primary-light: #2C2F42;
            --color-secondary: #D4AF37;
            --color-secondary-hover: #C6A030;
            --color-secondary-dark: #B8962E;
            --color-bg: #F7F5F0;
            --color-bg-alt: #EFECE6;
            --color-white: #FFFFFF;
            --color-text: #2A2A2E;
            --color-text-heading: #1B1D26;
            --color-text-muted: #8A8A8E;
            --color-text-light: #B0ADA6;
            --color-border: #E5E1DA;
            --color-border-accent: #D1CDC6;
            --color-accent: #7A6B52;
            --color-danger: #B34A4A;
            --color-success: #4A7A5A;
            --color-overlay: rgba(27, 29, 38, 0.85);
            --radius-sm: 4px;
            --radius-md: 8px;
            --radius-lg: 12px;
            --radius-xl: 20px;
            --shadow-sm: 0 2px 8px rgba(27, 29, 38, 0.05);
            --shadow-md: 0 4px 16px rgba(27, 29, 38, 0.06);
            --shadow-lg: 0 12px 32px rgba(27, 29, 38, 0.12);
            --shadow-xl: 0 20px 48px rgba(27, 29, 38, 0.15);
            --transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            --font-sans: 'Inter', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
            --header-height: 80px;
            --container-max: 1140px;
            --container-wide: 1280px;
        }

        /* ===== Reset & Base ===== */
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        html {
            scroll-behavior: smooth;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        body {
            font-family: var(--font-sans);
            font-size: 0.9375rem;
            line-height: 1.7;
            color: var(--color-text);
            background-color: var(--color-bg);
            overflow-x: hidden;
        }
        img {
            max-width: 100%;
            height: auto;
            display: block;
        }
        a {
            text-decoration: none;
            color: var(--color-secondary);
            transition: var(--transition);
        }
        a:hover {
            color: var(--color-secondary-hover);
        }
        button,
        input,
        textarea {
            font-family: inherit;
            font-size: inherit;
        }
        ul,
        ol {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .container {
            max-width: var(--container-max);
            padding-left: 1.25rem;
            padding-right: 1.25rem;
        }
        @media (min-width: 1200px) {
            .container {
                max-width: var(--container-wide);
            }
        }

        /* ===== Typography ===== */
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            color: var(--color-text-heading);
            font-weight: 700;
            line-height: 1.3;
            letter-spacing: -0.01em;
        }
        h1 {
            font-size: 2.5rem;
            line-height: 1.2;
            font-weight: 800;
        }
        h2 {
            font-size: 1.75rem;
            font-weight: 700;
        }
        h3 {
            font-size: 1.25rem;
            font-weight: 600;
        }
        h4 {
            font-size: 1rem;
            font-weight: 600;
        }
        p {
            margin-bottom: 1em;
            color: var(--color-text);
        }
        @media (max-width: 768px) {
            h1 {
                font-size: 1.75rem;
            }
            h2 {
                font-size: 1.4rem;
            }
            h3 {
                font-size: 1.1rem;
            }
            h4 {
                font-size: 0.9375rem;
            }
            body {
                font-size: 0.875rem;
            }
        }

        /* ===== 导航 ===== */
        .site-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            height: var(--header-height);
            background: var(--color-primary);
            border-bottom: 1px solid rgba(212, 175, 55, 0.15);
            transition: var(--transition);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }
        .site-header .container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 100%;
        }
        .site-logo {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--color-white);
            letter-spacing: 0.02em;
            transition: var(--transition);
        }
        .site-logo:hover {
            color: var(--color-secondary);
        }
        .site-logo .logo-icon {
            color: var(--color-secondary);
            font-size: 1.4rem;
        }
        .nav-list {
            display: flex;
            align-items: center;
            gap: 0;
        }
        .nav-list li {
            position: relative;
        }
        .nav-list a {
            display: block;
            padding: 0.5rem 1.25rem;
            font-size: 0.9375rem;
            font-weight: 500;
            color: var(--color-text-light);
            letter-spacing: 0.02em;
            transition: var(--transition);
            position: relative;
            white-space: nowrap;
        }
        .nav-list a::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 50%;
            transform: translateX(-50%) scaleX(0);
            width: 60%;
            height: 2px;
            background: var(--color-secondary);
            transition: transform 0.3s ease;
            transform-origin: center;
        }
        .nav-list a:hover::after,
        .nav-list a.active::after {
            transform: translateX(-50%) scaleX(1);
        }
        .nav-list a:hover {
            color: var(--color-secondary);
        }
        .nav-list a.active {
            color: var(--color-secondary);
        }
        .nav-list .nav-close {
            display: none;
            background: none;
            border: none;
            font-size: 2rem;
            color: var(--color-white);
            cursor: pointer;
            padding: 0 1rem;
            line-height: 1;
        }
        .nav-toggle {
            display: none;
            background: none;
            border: none;
            font-size: 1.5rem;
            color: var(--color-secondary);
            cursor: pointer;
            padding: 0.25rem;
            transition: var(--transition);
        }
        .nav-toggle:hover {
            color: var(--color-secondary-hover);
        }
        .nav-list .nav-close {
            display: none;
        }
        @media (max-width: 991px) {
            .nav-toggle {
                display: block;
            }
            .nav-list {
                position: fixed;
                top: 0;
                right: -100%;
                width: 280px;
                height: 100vh;
                background: var(--color-primary);
                flex-direction: column;
                align-items: flex-start;
                padding: 5rem 2rem 2rem;
                gap: 0.5rem;
                transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
                box-shadow: -8px 0 32px rgba(0, 0, 0, 0.3);
                z-index: 1001;
            }
            .nav-list.open {
                right: 0;
            }
            .nav-list a {
                font-size: 1.125rem;
                padding: 0.75rem 0;
                color: var(--color-text-light);
                width: 100%;
                border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            }
            .nav-list a::after {
                display: none;
            }
            .nav-list a.active {
                color: var(--color-secondary);
                border-left: 3px solid var(--color-secondary);
                padding-left: 1rem;
            }
            .nav-list .nav-close {
                display: block;
                position: absolute;
                top: 1rem;
                right: 1.25rem;
                background: none;
                border: none;
                font-size: 2.2rem;
                color: var(--color-secondary);
                cursor: pointer;
                line-height: 1;
                padding: 0.25rem;
            }
            .site-header .container {
                position: relative;
            }
            .nav-overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.6);
                z-index: 1000;
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.35s ease;
            }
            .nav-overlay.active {
                opacity: 1;
                pointer-events: auto;
            }
        }
        @media (max-width: 576px) {
            :root {
                --header-height: 64px;
            }
            .site-logo {
                font-size: 1.1rem;
            }
            .site-logo .logo-icon {
                font-size: 1.2rem;
            }
            .nav-list {
                width: 100%;
                right: -100%;
            }
        }

        /* 页面偏移 */
        .page-main {
            padding-top: var(--header-height);
        }

        /* ===== 面包屑 ===== */
        .breadcrumb-wrap {
            padding: 1.5rem 0 0.5rem;
            background: var(--color-bg);
        }
        .breadcrumb-wrap .breadcrumb {
            background: transparent;
            padding: 0;
            margin: 0;
            font-size: 0.8125rem;
            color: var(--color-text-muted);
        }
        .breadcrumb-wrap .breadcrumb-item {
            display: inline;
        }
        .breadcrumb-wrap .breadcrumb-item a {
            color: var(--color-text-muted);
            transition: var(--transition);
        }
        .breadcrumb-wrap .breadcrumb-item a:hover {
            color: var(--color-secondary);
        }
        .breadcrumb-wrap .breadcrumb-item+.breadcrumb-item::before {
            content: '›';
            color: var(--color-text-muted);
            padding: 0 0.5rem;
        }
        .breadcrumb-wrap .breadcrumb-item.active {
            color: var(--color-text-heading);
            font-weight: 500;
        }

        /* ===== 文章区 ===== */
        .article-section {
            padding: 2rem 0 3rem;
            background: var(--color-bg);
        }
        .article-wrapper {
            max-width: 860px;
            margin: 0 auto;
        }
        .article-header {
            margin-bottom: 2rem;
            padding-bottom: 1.5rem;
            border-bottom: 1px solid var(--color-border);
        }
        .article-header h1 {
            font-size: 2.2rem;
            font-weight: 800;
            color: var(--color-text-heading);
            line-height: 1.25;
            margin-bottom: 1rem;
            letter-spacing: -0.015em;
        }
        .article-meta {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.75rem 1.5rem;
            font-size: 0.8125rem;
            color: var(--color-text-muted);
        }
        .article-meta .meta-item {
            display: flex;
            align-items: center;
            gap: 0.35rem;
        }
        .article-meta .meta-item i {
            font-size: 0.875em;
            color: var(--color-accent);
        }
        .article-meta .category-badge {
            display: inline-block;
            padding: 0.15rem 0.75rem;
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--color-primary);
            background: var(--color-secondary);
            border-radius: var(--radius-xl);
            letter-spacing: 0.02em;
        }
        .article-body {
            font-size: 1rem;
            line-height: 1.85;
            color: var(--color-text);
        }
        .article-body h2,
        .article-body h3,
        .article-body h4 {
            margin-top: 2rem;
            margin-bottom: 0.75rem;
            font-weight: 700;
            color: var(--color-text-heading);
        }
        .article-body h2 {
            font-size: 1.5rem;
            border-bottom: 2px solid var(--color-secondary);
            padding-bottom: 0.4rem;
            display: inline-block;
        }
        .article-body h3 {
            font-size: 1.2rem;
        }
        .article-body h4 {
            font-size: 1.05rem;
        }
        .article-body p {
            margin-bottom: 1.25em;
        }
        .article-body img {
            border-radius: var(--radius-md);
            margin: 1.5rem auto;
            box-shadow: var(--shadow-md);
            max-width: 100%;
        }
        .article-body figcaption {
            font-size: 0.8125rem;
            color: var(--color-text-muted);
            text-align: center;
            margin-top: -0.75rem;
            margin-bottom: 1.5rem;
        }
        .article-body blockquote {
            border-left: 3px solid var(--color-secondary);
            background: var(--color-bg-alt);
            padding: 1rem 1.5rem;
            margin: 1.5rem 0;
            border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
            font-style: italic;
            color: var(--color-text);
        }
        .article-body blockquote p:last-child {
            margin-bottom: 0;
        }
        .article-body ul,
        .article-body ol {
            padding-left: 1.5rem;
            margin-bottom: 1.25em;
        }
        .article-body ul {
            list-style: disc;
        }
        .article-body ol {
            list-style: decimal;
        }
        .article-body li {
            margin-bottom: 0.4em;
        }
        .article-body a {
            color: var(--color-secondary-dark);
            text-decoration: underline;
            text-underline-offset: 2px;
        }
        .article-body a:hover {
            color: var(--color-secondary-hover);
        }
        .article-body code {
            background: var(--color-bg-alt);
            padding: 0.15rem 0.5rem;
            border-radius: var(--radius-sm);
            font-size: 0.875em;
            color: var(--color-accent);
        }
        .article-body pre {
            background: var(--color-primary);
            color: var(--color-bg);
            padding: 1.25rem 1.5rem;
            border-radius: var(--radius-md);
            overflow-x: auto;
            font-size: 0.875rem;
            line-height: 1.6;
            margin: 1.5rem 0;
        }
        .article-body pre code {
            background: none;
            color: inherit;
            padding: 0;
        }
        .article-body table {
            width: 100%;
            border-collapse: collapse;
            margin: 1.5rem 0;
            font-size: 0.9375rem;
        }
        .article-body table th,
        .article-body table td {
            padding: 0.75rem 1rem;
            border: 1px solid var(--color-border);
            text-align: left;
        }
        .article-body table th {
            background: var(--color-primary);
            color: var(--color-white);
            font-weight: 600;
        }
        .article-body table tr:nth-child(even) {
            background: var(--color-bg-alt);
        }
        @media (max-width: 768px) {
            .article-header h1 {
                font-size: 1.6rem;
            }
            .article-body {
                font-size: 0.9375rem;
                line-height: 1.75;
            }
            .article-body h2 {
                font-size: 1.3rem;
            }
            .article-body h3 {
                font-size: 1.1rem;
            }
        }

        /* 内容未找到 */
        .not-found-box {
            text-align: center;
            padding: 4rem 2rem;
            background: var(--color-white);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-md);
        }
        .not-found-box i {
            font-size: 3rem;
            color: var(--color-text-muted);
            margin-bottom: 1.5rem;
        }
        .not-found-box h3 {
            font-size: 1.5rem;
            margin-bottom: 0.75rem;
        }
        .not-found-box p {
            color: var(--color-text-muted);
            margin-bottom: 1.5rem;
        }
        .not-found-box .btn-back {
            display: inline-block;
            padding: 0.6rem 2rem;
            background: var(--color-secondary);
            color: var(--color-primary);
            border-radius: var(--radius-sm);
            font-weight: 600;
            transition: var(--transition);
        }
        .not-found-box .btn-back:hover {
            background: var(--color-secondary-hover);
            color: var(--color-primary);
            transform: translateY(-2px);
        }

        /* ===== 相关文章 ===== */
        .related-section {
            padding: 3rem 0 4rem;
            background: var(--color-bg-alt);
        }
        .related-section .section-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--color-text-heading);
            margin-bottom: 2rem;
            text-align: center;
        }
        .related-section .section-title::after {
            content: '';
            display: block;
            width: 60px;
            height: 2px;
            background: var(--color-secondary);
            margin: 0.75rem auto 0;
        }
        .related-card {
            background: var(--color-white);
            border-radius: var(--radius-md);
            padding: 1.5rem;
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
            border: 1px solid var(--color-border);
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .related-card:hover {
            box-shadow: var(--shadow-lg);
            transform: translateY(-4px);
            border-color: var(--color-secondary);
        }
        .related-card .card-category {
            display: inline-block;
            padding: 0.15rem 0.6rem;
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--color-accent);
            background: var(--color-bg-alt);
            border-radius: var(--radius-xl);
            margin-bottom: 0.75rem;
            align-self: flex-start;
        }
        .related-card h4 {
            font-size: 1.05rem;
            font-weight: 600;
            color: var(--color-text-heading);
            margin-bottom: 0.6rem;
            line-height: 1.4;
        }
        .related-card h4 a {
            color: var(--color-text-heading);
            transition: var(--transition);
        }
        .related-card h4 a:hover {
            color: var(--color-secondary-dark);
        }
        .related-card p {
            font-size: 0.875rem;
            color: var(--color-text-muted);
            margin-bottom: 1rem;
            flex: 1;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .related-card .card-meta {
            font-size: 0.78125rem;
            color: var(--color-text-muted);
            display: flex;
            align-items: center;
            gap: 0.75rem;
            border-top: 1px solid var(--color-border);
            padding-top: 0.75rem;
        }
        .related-card .card-meta i {
            font-size: 0.85em;
            color: var(--color-accent);
        }

        /* 返回链接 */
        .back-link-wrap {
            text-align: center;
            margin-top: 2rem;
        }
        .back-link-wrap a {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.9375rem;
            font-weight: 500;
            color: var(--color-secondary-dark);
            transition: var(--transition);
        }
        .back-link-wrap a:hover {
            color: var(--color-secondary-hover);
            gap: 0.75rem;
        }

        /* ===== 页脚 ===== */
        .site-footer {
            background: var(--color-primary);
            padding: 3rem 0 1.5rem;
            color: var(--color-text-light);
        }
        .site-footer .footer-brand {
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--color-white);
            margin-bottom: 1rem;
            letter-spacing: 0.02em;
        }
        .site-footer .footer-brand i {
            color: var(--color-secondary);
        }
        .site-footer p {
            font-size: 0.875rem;
            color: var(--color-text-light);
            line-height: 1.7;
            margin-bottom: 1rem;
        }
        .site-footer .footer-social {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
        }
        .site-footer .footer-social a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.06);
            color: var(--color-text-light);
            font-size: 1.1rem;
            transition: var(--transition);
        }
        .site-footer .footer-social a:hover {
            background: var(--color-secondary);
            color: var(--color-primary);
            transform: translateY(-3px);
        }
        .site-footer h5 {
            font-size: 0.9375rem;
            font-weight: 600;
            color: var(--color-white);
            margin-bottom: 1.25rem;
            letter-spacing: 0.03em;
        }
        .site-footer ul li {
            margin-bottom: 0.5rem;
        }
        .site-footer ul a {
            font-size: 0.875rem;
            color: var(--color-text-light);
            transition: var(--transition);
        }
        .site-footer ul a:hover {
            color: var(--color-secondary);
            padding-left: 4px;
        }
        .footer-divider {
            border: 0;
            height: 1px;
            background: var(--color-primary-light);
            margin: 2rem 0 1.25rem;
            opacity: 0.6;
        }
        .footer-copyright {
            text-align: center;
            font-size: 0.8125rem;
            color: var(--color-text-muted);
            padding-top: 0.5rem;
        }

        /* ===== 通用工具 ===== */
        .section-padding {
            padding: 4rem 0;
        }
        @media (max-width: 768px) {
            .section-padding {
                padding: 2.5rem 0;
            }
        }
        .text-gold {
            color: var(--color-secondary);
        }
        .bg-gold {
            background: var(--color-secondary);
        }

        /* ===== 滚动条 ===== */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        ::-webkit-scrollbar-track {
            background: var(--color-bg);
        }
        ::-webkit-scrollbar-thumb {
            background: var(--color-accent);
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: var(--color-text-muted);
        }

        /* ===== 文章页特定响应式 ===== */
        @media (max-width: 576px) {
            .article-meta {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.4rem;
            }
            .article-header h1 {
                font-size: 1.4rem;
            }
            .related-card {
                padding: 1.25rem;
            }
        }
        @media (min-width: 768px) and (max-width: 991px) {
            .article-header h1 {
                font-size: 1.8rem;
            }
        }

/* roulang page: category1 */
/* ===== 设计变量 ===== */
        :root {
            --color-primary: #1B1D26;
            --color-secondary: #D4AF37;
            --color-secondary-hover: #C6A030;
            --color-bg: #F7F5F0;
            --color-bg-alt: #EFECE6;
            --color-accent: #7A6B52;
            --color-text: #2A2A2E;
            --color-heading: #1B1D26;
            --color-muted: #8A8A8E;
            --color-border: #E5E1DA;
            --color-success: #4A7A5A;
            --color-danger: #B34A4A;
            --color-white: #FFFFFF;
            --color-dark-overlay: rgba(27, 29, 38, 0.85);
            --font-family: 'Inter', 'Noto Sans SC', 'PingFang SC', sans-serif;
            --shadow-card: 0 4px 16px rgba(27, 29, 38, 0.06);
            --shadow-card-hover: 0 12px 32px rgba(27, 29, 38, 0.12);
            --radius-card: 8px;
            --radius-btn: 4px;
            --radius-badge: 20px;
            --transition-base: 0.2s ease;
            --container-max: 1140px;
        }

        /* ===== Reset / Base ===== */
        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            padding: 0;
            font-family: var(--font-family);
            font-size: 0.9375rem;
            line-height: 1.7;
            color: var(--color-text);
            background-color: var(--color-bg);
            -webkit-font-smoothing: antialiased;
        }

        img {
            max-width: 100%;
            height: auto;
            display: block;
        }

        a {
            color: var(--color-secondary);
            text-decoration: none;
            transition: color var(--transition-base);
        }

        a:hover {
            color: var(--color-secondary-hover);
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            color: var(--color-heading);
            font-weight: 700;
            line-height: 1.3;
            margin-top: 0;
        }

        .container {
            max-width: var(--container-max);
            padding-left: 1.25rem;
            padding-right: 1.25rem;
        }

        /* ===== 导航 ===== */
        .site-header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1050;
            background: rgba(27, 29, 38, 0.92);
            backdrop-filter: blur(6px);
            height: 80px;
            display: flex;
            align-items: center;
            transition: background var(--transition-base);
            border-bottom: 1px solid rgba(212, 175, 55, 0.15);
        }

        .site-header .container {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .site-logo {
            display: flex;
            align-items: center;
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--color-white);
            letter-spacing: 0.02em;
            gap: 0.4rem;
        }

        .site-logo .logo-icon {
            color: var(--color-secondary);
            font-size: 1.4rem;
        }

        .site-logo:hover {
            color: var(--color-white);
        }

        .nav-list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            align-items: center;
            gap: 0;
        }

        .nav-list li {
            position: relative;
        }

        .nav-list li a {
            display: block;
            padding: 0 1.25rem;
            font-size: 0.9375rem;
            font-weight: 500;
            color: rgba(247, 245, 240, 0.85);
            letter-spacing: 0.02em;
            line-height: 80px;
            transition: color var(--transition-base);
            position: relative;
        }

        .nav-list li a::after {
            content: '';
            position: absolute;
            bottom: 18px;
            left: 50%;
            transform: translateX(-50%) scaleX(0);
            width: calc(100% - 2.5rem);
            height: 2px;
            background: var(--color-secondary);
            transition: transform var(--transition-base);
            transform-origin: center;
        }

        .nav-list li a:hover::after,
        .nav-list li a.active::after {
            transform: translateX(-50%) scaleX(1);
        }

        .nav-list li a:hover {
            color: var(--color-white);
        }

        .nav-list li a.active {
            color: var(--color-secondary);
        }

        .nav-list li+li::before {
            content: '';
            display: inline-block;
            width: 1px;
            height: 16px;
            background: var(--color-secondary);
            vertical-align: middle;
            opacity: 0.4;
        }

        .nav-toggle {
            display: none;
            background: none;
            border: none;
            color: var(--color-secondary);
            font-size: 1.5rem;
            cursor: pointer;
            padding: 0.25rem;
            line-height: 1;
        }

        .nav-close {
            display: none;
            background: none;
            border: none;
            color: var(--color-white);
            font-size: 2rem;
            cursor: pointer;
            position: absolute;
            top: 0.75rem;
            right: 1.25rem;
            line-height: 1;
            padding: 0;
        }

        /* ===== Hero ===== */
        .category-hero {
            min-height: 75vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            background: linear-gradient(135deg, rgba(27, 29, 38, 0.88) 0%, rgba(27, 29, 38, 0.55) 60%, rgba(27, 29, 38, 0.92) 100%), url('/assets/images/backpic/back-1.png') center center / cover no-repeat;
            padding: 8rem 0 4rem;
            position: relative;
        }

        .category-hero h1 {
            font-size: 2.75rem;
            font-weight: 800;
            color: var(--color-white);
            margin-bottom: 0.5rem;
            letter-spacing: 0.04em;
        }

        .category-hero .hero-divider {
            width: 60px;
            height: 3px;
            background: var(--color-secondary);
            margin: 1rem auto 1.25rem;
            border-radius: 2px;
        }

        .category-hero .hero-sub {
            font-size: 1.15rem;
            color: rgba(247, 245, 240, 0.85);
            max-width: 680px;
            margin: 0 auto 2rem;
            font-weight: 400;
            line-height: 1.6;
        }

        .category-hero .hero-actions {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
        }

        /* ===== 按钮 ===== */
        .btn-primary-custom {
            background: var(--color-secondary);
            color: var(--color-primary);
            font-weight: 600;
            padding: 0.75rem 2.5rem;
            border-radius: var(--radius-btn);
            border: none;
            font-size: 1rem;
            transition: all var(--transition-base);
            box-shadow: 0 2px 8px rgba(212, 175, 55, 0.25);
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .btn-primary-custom:hover {
            background: var(--color-secondary-hover);
            color: var(--color-primary);
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgba(212, 175, 55, 0.35);
        }

        .btn-outline-custom {
            background: transparent;
            color: var(--color-secondary);
            font-weight: 600;
            padding: 0.75rem 2.5rem;
            border-radius: var(--radius-btn);
            border: 1px solid var(--color-secondary);
            font-size: 1rem;
            transition: all var(--transition-base);
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .btn-outline-custom:hover {
            background: rgba(212, 175, 55, 0.08);
            color: var(--color-secondary);
            border-color: var(--color-secondary-hover);
        }

        .btn-cta-large {
            background: var(--color-secondary);
            color: var(--color-primary);
            font-weight: 700;
            padding: 1rem 3.5rem;
            border-radius: 6px;
            border: none;
            font-size: 1.1rem;
            transition: all var(--transition-base);
            box-shadow: 0 4px 16px rgba(212, 175, 55, 0.3);
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
        }

        .btn-cta-large:hover {
            background: var(--color-secondary-hover);
            color: var(--color-primary);
            transform: scale(1.02);
            box-shadow: 0 8px 28px rgba(212, 175, 55, 0.4);
        }

        /* ===== 板块通用 ===== */
        .section-block {
            padding: 5rem 0;
        }

        .section-block-alt {
            background-color: var(--color-bg-alt);
        }

        .section-title {
            text-align: center;
            margin-bottom: 0.25rem;
        }

        .section-title h2 {
            font-size: 1.75rem;
            font-weight: 700;
            color: var(--color-heading);
            letter-spacing: 0.02em;
            margin-bottom: 0.3rem;
        }

        .section-title .sub-title {
            font-size: 1rem;
            color: var(--color-muted);
            font-weight: 400;
            margin-bottom: 0;
        }

        .section-divider {
            width: 60px;
            height: 2px;
            background: var(--color-secondary);
            margin: 0.75rem auto 2.5rem;
            border-radius: 2px;
        }

        /* ===== 卡片 ===== */
        .card-custom {
            background: var(--color-white);
            border-radius: var(--radius-card);
            box-shadow: var(--shadow-card);
            border: 1px solid var(--color-border);
            overflow: hidden;
            transition: all var(--transition-base);
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .card-custom:hover {
            box-shadow: var(--shadow-card-hover);
            transform: translateY(-3px);
        }

        .card-custom .card-img-top {
            height: 180px;
            object-fit: cover;
            border-radius: 0;
        }

        .card-custom .card-body {
            padding: 1.5rem;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .card-custom .card-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--color-heading);
            margin-bottom: 0.5rem;
        }

        .card-custom .card-text {
            font-size: 0.9375rem;
            color: var(--color-text);
            flex: 1;
            margin-bottom: 1rem;
        }

        .card-custom .card-tag {
            display: inline-block;
            background: var(--color-secondary);
            color: var(--color-primary);
            font-size: 0.75rem;
            font-weight: 600;
            padding: 0.2rem 0.75rem;
            border-radius: var(--radius-badge);
            margin-bottom: 0.75rem;
            align-self: flex-start;
        }

        /* ===== 等级卡片 ===== */
        .tier-card {
            background: var(--color-white);
            border-radius: var(--radius-card);
            box-shadow: var(--shadow-card);
            border: 1px solid var(--color-border);
            padding: 2rem 1.5rem;
            text-align: center;
            transition: all var(--transition-base);
            height: 100%;
            display: flex;
            flex-direction: column;
            position: relative;
        }

        .tier-card:hover {
            box-shadow: var(--shadow-card-hover);
            transform: translateY(-4px);
        }

        .tier-card.featured {
            border: 2px solid var(--color-secondary);
        }

        .tier-card .tier-badge {
            display: inline-block;
            background: var(--color-secondary);
            color: var(--color-primary);
            font-size: 0.75rem;
            font-weight: 600;
            padding: 0.2rem 0.9rem;
            border-radius: var(--radius-badge);
            position: absolute;
            top: 1rem;
            right: 1rem;
        }

        .tier-card .tier-icon {
            font-size: 2.5rem;
            color: var(--color-secondary);
            margin-bottom: 0.75rem;
        }

        .tier-card .tier-name {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--color-heading);
            margin-bottom: 0.25rem;
        }

        .tier-card .tier-sub {
            font-size: 0.875rem;
            color: var(--color-muted);
            margin-bottom: 1rem;
        }

        .tier-card .tier-features {
            list-style: none;
            padding: 0;
            margin: 0 0 1.5rem;
            text-align: left;
            flex: 1;
        }

        .tier-card .tier-features li {
            padding: 0.4rem 0;
            font-size: 0.875rem;
            color: var(--color-text);
            display: flex;
            align-items: center;
            gap: 0.5rem;
            border-bottom: 1px solid var(--color-bg-alt);
        }

        .tier-card .tier-features li:last-child {
            border-bottom: none;
        }

        .tier-card .tier-features li .fa-check {
            color: var(--color-success);
        }

        .tier-card .tier-features li .fa-times {
            color: var(--color-danger);
        }

        .tier-card .tier-price {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--color-primary);
            margin-bottom: 1rem;
        }

        .tier-card .tier-price small {
            font-size: 0.8125rem;
            font-weight: 400;
            color: var(--color-muted);
        }

        /* ===== 权益对比表 ===== */
        .compare-table-wrap {
            overflow-x: auto;
            background: var(--color-white);
            border-radius: var(--radius-card);
            box-shadow: var(--shadow-card);
            border: 1px solid var(--color-border);
        }

        .compare-table {
            width: 100%;
            border-collapse: collapse;
            min-width: 640px;
        }

        .compare-table th,
        .compare-table td {
            padding: 1rem 1.25rem;
            text-align: center;
            border-bottom: 1px solid var(--color-border);
            font-size: 0.9375rem;
        }

        .compare-table th {
            background: var(--color-primary);
            color: var(--color-secondary);
            font-weight: 600;
            font-size: 1rem;
        }

        .compare-table th:first-child {
            text-align: left;
        }

        .compare-table td:first-child {
            text-align: left;
            font-weight: 500;
            color: var(--color-heading);
        }

        .compare-table tr:last-child td {
            border-bottom: none;
        }

        .compare-table .fa-check {
            color: var(--color-success);
            font-size: 1.1rem;
        }

        .compare-table .fa-times {
            color: var(--color-danger);
            font-size: 1.1rem;
        }

        .compare-table .highlight {
            background: rgba(212, 175, 55, 0.06);
        }

        /* ===== 流程步骤 ===== */
        .step-item {
            text-align: center;
            padding: 1.5rem 1rem;
            position: relative;
        }

        .step-item .step-num {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 48px;
            background: var(--color-primary);
            color: var(--color-secondary);
            font-size: 1.25rem;
            font-weight: 700;
            border-radius: 50%;
            margin-bottom: 1rem;
            transition: all var(--transition-base);
        }

        .step-item:hover .step-num {
            background: var(--color-secondary);
            color: var(--color-primary);
        }

        .step-item .step-title {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--color-heading);
            margin-bottom: 0.4rem;
        }

        .step-item .step-desc {
            font-size: 0.875rem;
            color: var(--color-muted);
            max-width: 220px;
            margin: 0 auto;
        }

        .step-arrow {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: var(--color-secondary);
            opacity: 0.5;
        }

        /* ===== 适用场景 ===== */
        .scenario-card {
            background: var(--color-white);
            border-radius: var(--radius-card);
            box-shadow: var(--shadow-card);
            border: 1px solid var(--color-border);
            padding: 1.75rem 1.5rem;
            text-align: center;
            transition: all var(--transition-base);
            height: 100%;
        }

        .scenario-card:hover {
            box-shadow: var(--shadow-card-hover);
            transform: translateY(-3px);
        }

        .scenario-card .scenario-icon {
            font-size: 2rem;
            color: var(--color-secondary);
            margin-bottom: 0.75rem;
        }

        .scenario-card .scenario-title {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--color-heading);
            margin-bottom: 0.5rem;
        }

        .scenario-card .scenario-desc {
            font-size: 0.875rem;
            color: var(--color-text);
            line-height: 1.6;
        }

        /* ===== FAQ ===== */
        .faq-accordion .accordion-item {
            background: var(--color-white);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-card) !important;
            margin-bottom: 0.75rem;
            overflow: hidden;
            box-shadow: var(--shadow-card);
        }

        .faq-accordion .accordion-button {
            font-size: 1rem;
            font-weight: 600;
            color: var(--color-heading);
            background: var(--color-white);
            padding: 1.1rem 1.5rem;
            border: none;
            box-shadow: none;
            transition: all var(--transition-base);
        }

        .faq-accordion .accordion-button:not(.collapsed) {
            background: var(--color-bg-alt);
            color: var(--color-primary);
        }

        .faq-accordion .accordion-button::after {
            background-image: none;
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            content: '\2b';
            font-size: 1.1rem;
            color: var(--color-secondary);
            transition: transform var(--transition-base);
        }

        .faq-accordion .accordion-button:not(.collapsed)::after {
            content: '\f068';
            color: var(--color-secondary);
        }

        .faq-accordion .accordion-body {
            padding: 0 1.5rem 1.25rem;
            font-size: 0.9375rem;
            color: var(--color-text);
            line-height: 1.7;
            background: var(--color-white);
        }

        /* ===== CTA 板块 ===== */
        .cta-block {
            background: var(--color-primary);
            padding: 4.5rem 0;
            text-align: center;
        }

        .cta-block h2 {
            font-size: 1.75rem;
            font-weight: 700;
            color: var(--color-white);
            margin-bottom: 0.4rem;
        }

        .cta-block .cta-sub {
            font-size: 1.05rem;
            color: rgba(247, 245, 240, 0.8);
            margin-bottom: 2rem;
        }

        .cta-block .cta-footnote {
            font-size: 0.8125rem;
            color: var(--color-muted);
            margin-top: 1rem;
        }

        /* ===== 专属内容预览 ===== */
        .preview-card .card-img-top {
            height: 160px;
        }

        /* ===== 页脚 ===== */
        .site-footer {
            background: var(--color-primary);
            padding: 3.5rem 0 1.5rem;
            color: rgba(247, 245, 240, 0.8);
        }

        .site-footer .footer-brand {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--color-white);
            margin-bottom: 0.75rem;
            display: flex;
            align-items: center;
        }

        .site-footer p {
            font-size: 0.875rem;
            line-height: 1.6;
            color: #B0ADA6;
        }

        .site-footer h5 {
            font-size: 0.9375rem;
            font-weight: 600;
            color: var(--color-white);
            margin-bottom: 1rem;
        }

        .site-footer ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .site-footer ul li {
            margin-bottom: 0.4rem;
        }

        .site-footer ul li a {
            color: #B0ADA6;
            font-size: 0.875rem;
            transition: color var(--transition-base);
        }

        .site-footer ul li a:hover {
            color: var(--color-secondary);
        }

        .footer-social {
            display: flex;
            gap: 0.75rem;
            margin-top: 1rem;
        }

        .footer-social a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(247, 245, 240, 0.08);
            color: #B0ADA6;
            font-size: 1rem;
            transition: all var(--transition-base);
        }

        .footer-social a:hover {
            background: var(--color-secondary);
            color: var(--color-primary);
        }

        .footer-divider {
            border-color: #2C2F42;
            margin: 2rem 0 1.25rem;
            opacity: 0.6;
        }

        .footer-copyright {
            text-align: center;
            font-size: 0.8125rem;
            color: var(--color-muted);
        }

        /* ===== 响应式 ===== */
        @media (max-width: 991.98px) {
            .site-header {
                height: 64px;
            }

            .nav-toggle {
                display: block;
            }

            .nav-close {
                display: block;
            }

            .site-header .container {
                position: relative;
            }

            #mainNav {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100vh;
                background: var(--color-primary);
                z-index: 1060;
                display: none;
                align-items: center;
                justify-content: center;
                opacity: 0;
                transition: opacity 0.3s ease;
            }

            #mainNav.open {
                display: flex;
                opacity: 1;
            }

            .nav-list {
                flex-direction: column;
                align-items: center;
                gap: 0;
                padding: 2rem 0;
            }

            .nav-list li a {
                font-size: 1.25rem;
                line-height: 3rem;
                padding: 0 2rem;
                color: var(--color-white);
            }

            .nav-list li+li::before {
                display: none;
            }

            .nav-list li a::after {
                bottom: 4px;
                width: 60%;
            }

            .category-hero h1 {
                font-size: 2rem;
            }

            .category-hero .hero-sub {
                font-size: 1rem;
                padding: 0 1rem;
            }

            .section-block {
                padding: 3rem 0;
            }

            .step-arrow {
                transform: rotate(90deg);
                padding: 0.5rem 0;
            }

            .tier-card .tier-features li {
                font-size: 0.8125rem;
            }

            .cta-block h2 {
                font-size: 1.35rem;
            }

            .btn-cta-large {
                padding: 0.85rem 2.5rem;
                font-size: 1rem;
            }
        }

        @media (max-width: 767.98px) {
            .category-hero {
                min-height: 60vh;
                padding: 6rem 0 3rem;
            }

            .category-hero h1 {
                font-size: 1.6rem;
            }

            .category-hero .hero-sub {
                font-size: 0.9375rem;
            }

            .section-title h2 {
                font-size: 1.35rem;
            }

            .card-custom .card-img-top {
                height: 140px;
            }

            .compare-table th,
            .compare-table td {
                padding: 0.75rem 0.75rem;
                font-size: 0.8125rem;
            }

            .tier-card {
                padding: 1.5rem 1rem;
            }

            .step-item {
                padding: 1rem 0.5rem;
            }

            .site-footer {
                padding: 2.5rem 0 1rem;
            }
        }

        @media (max-width: 575.98px) {
            .category-hero h1 {
                font-size: 1.35rem;
            }

            .category-hero .hero-actions {
                flex-direction: column;
                align-items: center;
                gap: 0.75rem;
            }

            .btn-primary-custom,
            .btn-outline-custom {
                padding: 0.6rem 1.8rem;
                font-size: 0.9375rem;
                width: 100%;
                max-width: 260px;
                justify-content: center;
            }

            .btn-cta-large {
                padding: 0.75rem 2rem;
                font-size: 0.9375rem;
                width: 100%;
                max-width: 300px;
                justify-content: center;
            }

            .tier-card .tier-price {
                font-size: 1.25rem;
            }

            .compare-table th,
            .compare-table td {
                padding: 0.5rem 0.5rem;
                font-size: 0.75rem;
            }
        }

        /* ===== 实用工具 ===== */
        .text-gold {
            color: var(--color-secondary);
        }
        .bg-dark-custom {
            background-color: var(--color-primary);
        }
        .border-gold {
            border-color: var(--color-secondary);
        }
        .fw-600 {
            font-weight: 600;
        }
        .gap-1rem {
            gap: 1rem;
        }

        /* 滚动指示器 */
        .scroll-indicator {
            position: absolute;
            bottom: 1.5rem;
            left: 50%;
            transform: translateX(-50%);
            animation: bounce-down 2s infinite;
            color: rgba(247, 245, 240, 0.5);
            font-size: 1.25rem;
        }

        @keyframes bounce-down {
            0%,
            100% {
                transform: translateX(-50%) translateY(0);
                opacity: 0.5;
            }
            50% {
                transform: translateX(-50%) translateY(8px);
                opacity: 1;
            }
        }

/* 导航分隔线微调 */
        .nav-list li+li::before {
            display: inline-block;
            content: '';
            width: 1px;
            height: 16px;
            background: var(--color-secondary);
            vertical-align: middle;
            opacity: 0.4;
            margin-right: 0;
        }
        .nav-list li a {
            display: inline-block;
        }
        .nav-list li {
            display: flex;
            align-items: center;
        }
        @media (max-width: 991.98px) {
            .nav-list li+li::before {
                display: none;
            }
            .nav-list li {
                justify-content: center;
            }
            .nav-list li a {
                display: block;
                text-align: center;
            }
        }