/* roulang page: index */
:root {
  --bg-paper: #F4F2ED;
  --bg-paper-alt: #EDE9E1;
  --ink: #101314;
  --ink-2: #1F2225;
  --text-main: #1F2225;
  --text-sub: #6B7075;
  --text-on-dark: #F4F2ED;
  --gold: #B5894C;
  --gold-deep: #92703D;
  --gold-light: #C9A46B;
  --line-light: rgba(16,19,20,.12);
  --line-dark: rgba(255,255,255,.16);
  --radius-lg: 12px;
  --radius-img: 18px;
  --radius-hero: 28px;
  --sh-soft: 0 18px 45px rgba(10,10,8,.08);
  --sh-dark: 0 24px 60px rgba(0,0,0,.28);
  --container: 1280px;
  --read-width: 760px;
  --space-section: 90px;
  --transition: 240ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --font-serif: Georgia, 'Times New Roman', serif;
  --font-body: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif;
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
body {
  font-family: var(--font-body);
  background: var(--bg-paper);
  color: var(--text-main);
  line-height: 1.85;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; transition: color var(--transition), border-color var(--transition), background var(--transition); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
button { font-family: inherit; cursor: pointer; background: none; border: none; }
ul,ol{ list-style: none; }
input,textarea{ font-family: var(--font-body); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 28px; }
section { position: relative; }
.section { padding: var(--space-section) 0; }
.grid-x { margin-left: -12px; margin-right: -12px; }
.cell { padding: 0 12px; }

/* 垂直节奏 */
.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 44px;
}
.sec-head .left { max-width: 640px; }
.sec-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--gold-deep);
  margin-bottom: 10px;
}
.sec-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--gold); display: inline-block; }
.sec-title {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.sec-desc { color: var(--text-sub); font-size: 16px; margin-top: 14px; }

/* 桌面顶部导航 */
.site-header {
  background: var(--ink);
  position: sticky;
  top: 0;
  z-index: 60;
  min-height: 72px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.header-inner {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.brand {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-shrink: 0;
}
.brand .b-logo {
  color: var(--text-on-dark);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.2;
}
.brand .b-sub {
  font-size: 13px;
  color: var(--gold-light);
  letter-spacing: 0.1em;
  margin-left: 3px;
}
.main-nav ul { display: flex; align-items: center; gap: 6px; }
.main-nav a {
  color: rgba(255,255,255,.76);
  font-size: 15px;
  padding: 9px 16px;
  border-radius: 999px;
  position: relative;
  font-weight: 500;
  transition: all var(--transition);
}
.main-nav li.active a,
.main-nav a:hover {
  color: var(--gold-light);
  background: rgba(255,255,255,.04);
}
.nav-cta {
  background: var(--gold);
  color: var(--ink);
  border-radius: 999px;
  padding: 10px 28px;
  font-size: 15px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  transition: all var(--transition);
}
.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(181,137,76,.3);
}
.nav-cta i { font-size: 13px; transition: transform var(--transition); }
.nav-cta:hover i { transform: translateX(3px); }

/* 移动端底部 Tab */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--ink);
  border-top: 1px solid rgba(255,255,255,.08);
  padding-bottom: env(safe-area-inset-bottom);
  padding-bottom: calc(env(safe-area-inset-bottom) + 4px);
}
.mobile-nav ul {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 62px;
}
.mobile-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  color: rgba(255,255,255,.56);
  font-size: 11px;
  font-weight: 500;
  gap: 2px;
  transition: color var(--transition);
  position: relative;
}
.mobile-nav a i { font-size: 19px; }
.mobile-nav a.on { color: var(--gold-light); }
.mobile-nav a.on::after {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--gold-light);
  border-radius: 50%;
  position: absolute;
  top: 4px;
  right: 50%;
  transform: translateX(22px);
}
body {
  padding-bottom: 0;
}
@media (max-width: 520px) {
  body { padding-bottom: 74px; }
  .mobile-nav { display: block; }
  .main-nav { display: none; }
  .header-inner .nav-desktop-cta { display: none; }
}

/* Hero */
.hero {
  background: var(--ink);
  color: var(--text-on-dark);
  overflow: hidden;
  padding: 90px 0 80px;
  position: relative;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(181,137,76,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(181,137,76,.08) 1px, transparent 1px);
  background-size: 70px 70px;
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  right: -140px;
  top: -140px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(181,137,76,.16), transparent 70%);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 2; }
.hero-grid { display: flex; align-items: center; justify-content: space-between; gap: 70px; flex-wrap: wrap; }
.hero-main { flex: 1 1 480px; max-width: 700px; }
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(181,137,76,.35);
  border-radius: 999px;
  font-size: 13px;
  color: var(--gold-light);
  padding: 6px 18px;
  margin-bottom: 26px;
  letter-spacing: .04em;
}
.hero-tag .dot {
  width: 6px; height: 6px; background: var(--gold-light);
  border-radius: 50%;
  display: inline-block;
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
.hero-title {
  font-size: clamp(32px, 5vw, 50px);
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 22px;
}
.hero-title .gold-text { color: var(--gold-light); }
.hero-desc {
  font-size: 17px;
  color: rgba(255,255,255,.72);
  line-height: 1.9;
  max-width: 600px;
  margin-bottom: 34px;
}
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px;  }
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  padding: 0 36px;
  background: var(--gold);
  color: var(--ink);
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  border: none;
  position: relative;
  overflow: hidden;
  transition: all var(--transition);
  z-index: 1;
  letter-spacing: .02em;
}
.btn-primary::before {
  content: "";
  position: absolute;
  top: 0; left: -20%;
  width: 60%;
  height: 100%;
  background: rgba(255,255,255,.3);
  transform: skewX(-25deg);
  transition: all .5s ease;
  z-index: -1;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(12,13,11,.25); }
.btn-primary i { margin-left: 8px; transition: transform var(--transition); }
.btn-primary:hover i { transform: translateX(4px); }
.btn-link {
  color: rgba(255,255,255,.82);
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--transition);
}
.btn-link i { font-size: 12px; transition: transform var(--transition); }
.btn-link:hover { color: var(--gold-light); }
.btn-link:hover i { transform: translateX(4px); }

.hero-visual {
  flex: 0 0 300px;
  max-width: 300px;
  margin: 0 auto;
}
.visual-card {
  position: relative;
  width: 280px;
  aspect-ratio: 9/16;
  border-radius: var(--radius-hero);
  overflow: visible;
  padding: 10px;
  margin: 0 auto;
}
.visual-card .gold-line {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(181,137,76,.5);
  border-radius: var(--radius-hero);
  z-index: 2;
  pointer-events: none;
}
.visual-card .inner-frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--radius-hero) - 6px);
  overflow: hidden;
  background: var(--ink);
}
.visual-card .inner-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .45;
  transition: opacity 0.6s ease;
}
.visual-card:hover .inner-frame img { opacity: .6; }
.visual-card .frame-content {
  position: absolute;
  right: 16px; left: 16px;
  bottom: 16px;
  z-index: 3;
  color: #fff;
}
.frame-content .mini-tag {
  display: inline-block;
  font-size: 12px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(6px);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
  color: var(--gold-light);
}
.frame-content .frame-tt { font-size: 18px; line-height: 1.4; font-weight: 700; margin-bottom: 10px; }
.frame-arrow {
  position: absolute;
  top: 26px;
  right: -16px;
  z-index: 4;
  width: 44px;
  height: 44px;
  background: var(--gold);
  color: var(--ink);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  box-shadow: 0 12px 30px rgba(181,137,76,.4);
  transition: all var(--transition);
}
.frame-arrow:hover { transform: translateY(3px) scale(1.05); }
@keyframes floaty { 0%,100%{ transform: translateY(0);} 50%{transform: translateY(-10px);} }
.visual-card { animation: floaty 6s ease-in-out infinite; }

/* 信任数据带 */
.hero-badge-strip {
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 18px 0;
}
.badge-strip { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 12px; }
.badge-strip .b-item { text-align: center; padding: 4px 24px; }
.b-item .b-num {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--gold-light);
  font-weight: 600;
}
.b-item .b-label { font-size: 13px; color: rgba(255,255,255,.48); }

/* 热门速览 */
.card-scroll-row { overflow: hidden; position: relative; margin: 0 -28px; }
.card-scroll-row .scroller { display: flex; gap: 22px; overflow-x: auto; padding: 10px 28px 28px; scrollbar-width: none; scroll-behavior: smooth; }
.card-scroll-row .scroller::-webkit-scrollbar { display: none; }
.scroll-card {
  min-width: 260px;
  max-width: 270px;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid transparent;
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
  transition: box-shadow var(--transition), transform var(--transition);
}
.scroll-card:hover { transform: translateY(-6px); box-shadow: var(--sh-soft); }
.sc-card-img { position: relative; aspect-ratio: 3/3.4; overflow: hidden; }
.sc-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.scroll-card:hover .sc-card-img img { transform: scale(1.04); }
.sc-chip {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(244,242,237,.94);
  color: var(--ink);
  font-size: 12px;
  border-radius: 999px;
  z-index: 2;
  padding: 3px 14px;
  font-weight: 600;
  border: 1px solid rgba(16,19,20,.08);
}
.sc-body { padding: 16px 16px 20px; }
.sc-title { font-size: 17px; font-weight: 700; line-height: 1.45; margin-bottom: 10px; color: var(--ink); }
.sc-title a:hover { color: var(--gold); }
.sc-text { font-size: 13px; color: var(--text-sub); line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sc-src { margin-top: 16px; font-size: 13px; color: var(--gold-deep); font-weight: 600; display: block; }
.sc-src:hover { color: var(--gold); }

.scroll-tools { display: flex; align-items: center; gap: 12px; }
.scroll-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-size: 14px;
  transition: all var(--transition);
}
.scroll-btn:hover { border-color: var(--gold); color: var(--gold); }

/* 种草清单 login steps */
.steps-section { background: var(--bg-paper); }
.step-guide-card{ margin-top: 20px; }
.step-guide-card{ display: flex; gap:34px; flex-wrap: wrap; }
.step-list { flex: 1 1 360px; }
.step-item { display: flex; gap: 24px; padding: 24px 0; border-bottom: 1px solid transparent; position: relative; }
.step-item:not(:last-of-type) { border-color: rgba(16,19,20,.08); }
.step-item .step-num { font-family: var(--font-serif); font-size: 36px; line-height: 1; color: var(--gold); flex-shrink: 0; opacity: .8; width: 66px; text-align: left; }
.step-item .step-info { flex: 1; margin-right: 20px; }
.step-item .step-info h3 { font-size: 16px; font-weight: 600; margin: 6px 0 6px; }
.step-item .step-info p { font-size: 14px; color: var(--text-sub); line-height: 1.75; margin: 0; }
.step-cta-wrap { flex: 0 0 320px; position: relative; background: var(--ink); border-radius: var(--radius-lg); color: #fff; padding: 40px 30px; }
.step-cta-wrap img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.22; border-radius: var(--radius-lg);}
.step-cta-body{ position: relative; z-index:2;}
.step-cta-body .small-tag { font-size: 13px; color: var(--gold-light); margin-bottom: 8px; display:block; letter-spacing: .05em;}
.step-cta-body .sc-title-lg { font-size: 22px; line-height: 1.4; margin:10px 0 20px; font-weight:700;}
.step-cta-body .btn-primary { height:48px; font-size:15px; background:#B5894C; }
@media (max-width: 900px){
  .step-cta-wrap { flex: 1 1 auto; }
}

/* 口碑 */
.testimonials { background: var(--ink); color: #fff; }
.color-tags { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.color-tag {
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  padding: 6px 18px;
  font-size: 14px;
  color: rgba(255,255,255,.85);
}
.testimonial-scroll { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; margin: 24px -28px 0; padding: 0 28px 10px; }
.testimonial-scroll::-webkit-scrollbar { display: none; }
.tem-card {
  min-width: 320px;
  flex: 0 0 320px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 22px 24px;
  transition: all var(--transition);
  backdrop-filter: blur(10px);
}
.tem-card:hover { background: rgba(255,255,255,.08); transform: translateY(-3px); }
.tem-card .tem-user { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.tem-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(181,137,76,.35);
  display:flex; align-items:center; justify-content:center;
  font-size: 16px;
  border: 1px solid rgba(181,137,76,.5);
  color: var(--gold-light);
}
.tem-card .u-name { font-size: 14px; font-weight: 600; color: #fff; }
.tem-card .u-time { font-size: 12px; color: rgba(255,255,255,.45); }
.tem-card .tem-text { font-size: 14px; line-height: 1.8; color: rgba(255,255,255,.8); }
.pill-shape{ display: inline-flex; align-items:center; gap: 8px; font-size: 14px; padding: 8px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); margin:4px 8px 0 0; color:rgba(255,255,255,.7);}
.pill-shape .dot{ width:5px;height:5px;border-radius:50%; background: var(--gold);}

/* 动态 / CMS 板块 */
.cms-sec { background: #fff; }
.feature-articles { display: flex; flex-wrap: wrap; gap: 28px; }
.cms-big-card { flex: 1 1 470px; min-width: 0; background: var(--bg-paper);
  border-radius: var(--radius-lg); }
.cms-list-col { flex: 1 1 460px; display: flex; flex-direction: column; gap: 14px; justify-content: space-between; }
.row-art-item {
  background: #fff;
  border: 1px solid rgba(244,242,237,1);
  padding: 14px 0;
  transition: border-color .2s;
  border-bottom: 1px solid rgba(16,19,20,.08);
  padding: 18px 4px 18px 0;
}
.row-art-item:hover { border-bottom-color: var(--gold); }
.row-art-top { display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 6px; 
}
.row-art-cat { font-size: 12px; background: var(--bg-paper-alt); border-radius: 999px; padding: 2px 12px; color: var(--gold-deep); font-weight: 600;}
.row-art-date { font-family: var(--font-serif); color: #9b9f9f; font-size: 13px; }
.row-art-title { font-size: 18px; font-weight: 700; line-height: 1.5; color: var(--ink); }
.row-art-title a { color: var(--ink); transition: color .2s;}
.row-art-title a:hover { color: var(--gold); }
.row-art-desc { font-size: 14px; color: var(--text-sub); line-height: 1.7; margin-top: 4px; }
.row-link { font-size: 13px; color: var(--gold-deep); font-weight:600; margin-top: 10px; display:inline-block; }
.row-link:hover { color: var(--gold); }

.cms-big-card-inner { padding: 22px; }
.cms-big-card .bc-img { border-radius: 14px; overflow: hidden; aspect-ratio: 16/9; margin-bottom: 18px; position: relative; background-color: var(--bg-paper-alt); }
.cms-big-card .bc-img img { width:100%; height:100%; object-fit: cover; transition: transform .8s ease; }
.cms-big-card:hover .bc-img img{ transform: scale(1.03);}
.cat-pill { font-size:12px; font-weight: 600; border-radius: 999px;
  background: var(--ink); color:#fff;
  padding: 4px 16px; display: inline-block;}
.big-title { font-size: 22px; font-weight:700; line-height:1.45; margin-top: 14px; }
.big-title a { color: var(--ink); }
.big-title a:hover { color: var(--gold); }

/* CTA */
.cta-block { background: var(--ink); }
.cta-block .inner-cta { padding: 68px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;}
.cta-text h2 { color: #fff; font-size: clamp(24px,4vw,36px); font-weight:700;
      letter-spacing: -0.02em; line-height: 1.3; }
.cta-text h2 .gold-text { color: var(--gold-light); }
.cta-text p { color: rgba(255,255,255,.64); font-size: 16px; margin-top: 14px; max-width: 480px; line-height:1.8;}
.cta-action .btn-big { min-height: 60px;    padding: 0 48px; font-size: 17px; }

/* FAQ */
.faq-section { background: var(--bg-paper); }
.faq-list { max-width: 840px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line-light); }
.faq-item .faq-q { display: flex; align-items: center; gap: 18px; padding: 24px 0 24px; cursor: pointer; font-size:16px; font-weight: 600; color: var(--ink); text-align:left; width:100%; }
.faq-item .faq-q .plus { min-width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--gold); display:flex; align-items:center; justify-content:center; color: var(--gold);font-weight:500; transition: background var(--transition), color var(--transition); }
.faq-panel { max-height: 0; overflow: hidden; padding: 0 0 0 38px; transition: all .3s ease; }
.faq-panel p { color: var(--text-sub); font-size:15px; padding-bottom: 20px; }
.faq-item.open .plus { background: var(--gold); color:#fff; }
.faq-item.open .plus::before { content: "×"; display:inline-block; color:#fff; font-size:17px; margin-top: -1px;}
.faq-item.closed .plus::before { content: "+"; display:inline-block; }
.faq-item.closed .plus { font-size: 17px; }

/* 页脚 */
.site-footer { background: var(--ink); color: rgba(255,255,255,.6); padding: 48px 0 26px; font-size: 14px; }
.footer-grid { display:flex; justify-content: space-between; flex-wrap: wrap; gap: 28px; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,.06); }
.footer-brand-fr { max-width: 300px; flex: 1 1 260px; }
.f-brand { color:#fff; font-size: 25px; font-weight:800; margin-bottom: 12px; display:flex; align-items:baseline; gap:6px;}
.f-brand span { font-size:13px; color: var(--gold-light); font-weight:600;}
.footer-col { flex: 0 1 auto; min-width: 138px; }
.footer-col h4 { color: rgba(255,255,255,.8); font-size: 15px; font-weight:600; margin-bottom: 14px; }
.footer-col ul { display: flex; flex-direction: column; gap: 8px; }
.footer-col a { color: rgba(255,255,255,.5); transition: color var(--transition); }
.footer-col a:hover { color: var(--gold-light); }
.footer-safe { display:flex; gap:20px; flex-wrap: wrap; margin-top: 12px; font-size:13px; color:rgba(255,255,255,.35);}
.footer-copy { padding-top: 24px; text-align:center; font-size:13px; color: rgba(255,255,255,.32); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;}
.footer-copy span.white{ color: rgba(255,255,255,.4); }

/* 后台 CMS 区块空状态 */
.empty-tip {
  text-align: center;
  padding: 46px 20px !important;
  border: 1px dashed rgba(16,19,20,.16);
  border-radius: 14px;
  font-size: 15px;
  background: #Fbfaf7;
}
.empty-tip .e-icon { font-size: 34px; color: var(--gold); margin-bottom: 8px; }
.empty-tip p { color: var(--text-sub); }

/* 滚动 fade */
.fade-up { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.fade-up.in-view { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .fade-up{ opacity:1; transform:none; transition:none; }
  .step-cta-wrap { animation:none; }
  .visual-card{ animation:none; }
}
@media(max-width:1024px){
  .hero-grid { gap:50px; }
  .hero-main{ flex: 1 1 100%; }
  .hero-visual{ display:none; }
  }
@media(max-width: 640px) {
  .section { --space-section: 64px; padding: 64px 0; }
  .container{ padding: 0 18px; }
  .sec-head { flex-direction: column; align-items: flex-start; }
  .row-art-item { padding: 16px 0; }
  .hero-visual { display:none; }
}
@media(max-width: 810px){
.hero{ padding: 70px 0 54px;}
}
@media print {
  .mobile-nav { display: none; }
}

/* roulang page: category1 */
:root {
            --ink: #101314;
            --gray-900: #1F2225;
            --gray-600: #6B7075;
            --paper: #F4F2ED;
            --paper-deep: #EDE9E1;
            --gold: #B5894C;
            --gold-deep: #92703D;
            --gold-light: #C9A46B;
            --white: #FFFFFF;
            --line-paper: rgba(16, 19, 20, .12);
            --line-dark: rgba(255, 255, 255, .16);
            --radius: 12px;
            --radius-card: 14px;
            --shadow-card: 0 18px 45px rgba(10, 10, 8, .08);
            --shadow-dark: 0 24px 60px rgba(0, 0, 0, .28);
            --transition: all .24s ease-out;
            --container: 1280px;
            --space-section: 90px;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Helvetica Neue", sans-serif;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            background-color: var(--paper);
            color: var(--gray-900);
            line-height: 1.85;
            font-size: 16px;
            -webkit-font-smoothing: antialiased;
        }

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

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

        button {
            border: none;
            background: none;
            cursor: pointer;
            font-family: inherit;
        }

        ul,
        ol {
            list-style: none;
        }

        /* ========== 容器与栅格 ========== */
        .container {
            max-width: var(--container);
            margin: 0 auto;
            padding-inline: 28px;
        }

        .grid-x {
            gap: 24px;
        }

        /* ========== 站点头部 ========== */
        .site-header {
            background: var(--ink);
            height: 72px;
            position: sticky;
            top: 0;
            z-index: 100;
            border-bottom: 1px solid transparent;
            transition: var(--transition);
        }

        .site-header.is-scrolled {
            border-bottom-color: var(--line-dark);
            box-shadow: 0 4px 20px rgba(0, 0, 0, .18);
        }

        .header-inner {
            height: 72px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
        }

        .brand {
            display: inline-flex;
            align-items: baseline;
            gap: 6px;
            flex-shrink: 0;
        }

        .b-logo {
            color: var(--paper);
            font-size: 24px;
            font-weight: 700;
            letter-spacing: 1px;
            line-height: 1.2;
        }

        .b-sub {
            color: var(--gold-light);
            font-size: 12px;
            font-weight: 500;
            letter-spacing: 1px;
            border: 1px solid rgba(185, 137, 76, .45);
            border-radius: 999px;
            padding: 2px 10px;
            line-height: 1.6;
            background: rgba(185, 137, 76, .06);
        }

        .main-nav {
            display: flex;
            align-items: center;
        }

        .main-nav>ul {
            display: flex;
            align-items: center;
            gap: 34px;
        }

        .main-nav li {
            display: inline-flex;
            align-items: center;
        }

        .main-nav li a {
            color: rgba(244, 242, 237, .75);
            font-size: 15px;
            font-weight: 500;
            padding: 8px 0;
            position: relative;
            line-height: 2;
            letter-spacing: .3px;
        }

        .main-nav li a::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 0;
            width: 0;
            height: 2px;
            background: var(--gold-light);
            border-radius: 2px;
            transform: translateX(-50%);
            transition: var(--transition);
        }

        .main-nav li a:hover {
            color: var(--gold-light);
        }

        .main-nav li a:hover::after {
            width: 22px;
        }

        .main-nav li.active a {
            color: var(--gold-light);
        }

        .main-nav li.active a::after {
            width: 22px;
            left: 50%;
            transform: translateX(-50%);
        }

        .nav-cta {
            background: var(--gold);
            color: var(--ink) !important;
            padding: 9px 22px !important;
            border-radius: 999px;
            font-weight: 600 !important;
            font-size: 14px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-left: 8px;
            transition: var(--transition);
        }

        .nav-cta i {
            font-size: 13px;
            transition: transform .24s ease-out;
        }

        .nav-cta:hover {
            background: var(--gold-light);
            color: var(--ink) !important;
            box-shadow: 0 0 0 3px rgba(201, 164, 107, .2);
        }

        .nav-cta:hover i {
            transform: translateX(3px);
        }

        /* ========== 移动端底部 Tab ========== */
        .mobile-tabbar {
            display: none;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 62px;
            background: var(--ink);
            z-index: 200;
            border-top: 1px solid var(--line-dark);
            padding-bottom: env(safe-area-inset-bottom);
            box-shadow: 0 -6px 24px rgba(0, 0, 0, .2);
        }

        .mobile-tabbar .tab-inner {
            height: 62px;
            display: flex;
            align-items: center;
        }

        .mobile-tabbar .tab-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            color: rgba(244, 242, 237, .5);
            font-size: 11px;
            line-height: 1;
            transition: var(--transition);
        }

        .mobile-tabbar .tab-item i {
            font-size: 17px;
            line-height: 1;
        }

        .mobile-tabbar .tab-item.current {
            color: var(--gold-light);
        }

        .mobile-tabbar .tab-item.current .tab-icon-wrap {
            position: relative;
        }

        .mobile-tabbar .tab-item.current .tab-icon-wrap::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 50%;
            width: 4px;
            height: 4px;
            background: var(--gold-light);
            border-radius: 50%;
            transform: translateX(-50%);
        }

        /* ========== 移动端显示 ========== */
        @media (max-width: 768px) {
            .desktop-nav {
                display: none !important;
            }

            .site-header {
                height: 64px;
            }

            .header-inner {
                height: 64px;
            }

            .b-logo {
                font-size: 21px;
            }

            .b-sub {
                font-size: 11px;
                padding: 1px 8px;
            }

            .mobile-tabbar {
                display: block;
            }

            body {
                padding-bottom: 62px;
            }
        }

        /* ========== 分类面包屑 ========== */
        .breadcrumb-bar {
            background: var(--paper-deep);
            padding: 12px 0;
            border-bottom: 1px solid var(--line-paper);
        }

        .breadcrumb {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            color: var(--gray-600);
        }

        .breadcrumb a {
            transition: var(--transition);
        }

        .breadcrumb a:hover {
            color: var(--gold-deep);
        }

        .breadcrumb i {
            font-size: 10px;
            color: rgba(111, 110, 106, .4);
        }

        .breadcrumb .current-page {
            color: var(--gold-deep);
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* ========== 分类 Hero ========== */
        .category-hero {
            background: var(--ink);
            position: relative;
            padding: 80px 0 70px;
            overflow: hidden;
        }

        .category-hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('/assets/images/backpic/back-1.webp') no-repeat center center / cover;
            opacity: .22;
            transform: scale(1.02);
        } /* 保持浅淡 */

        .category-hero .container {
            position: relative;
            z-index: 2;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 50px;
        }

        .cat-hero-content {
            max-width: 620px;
        }

        .cat-hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(185, 137, 76, .12);
            border: 1px solid rgba(185, 137, 76, .25);
            border-radius: 999px;
            color: var(--gold-light);
            font-size: 13px;
            padding: 6px 14px;
            margin-bottom: 20px;
            letter-spacing: .5px;
            font-weight: 500;
        }

        .category-hero h1 {
            color: var(--paper);
            font-size: 44px;
            font-weight: 700;
            line-height: 1.25;
            margin-bottom: 16px;
            letter-spacing: 1px;
        }

        .category-hero h1 .text-gold {
            color: var(--gold-light);
        }

        .category-hero .hero-desc {
            color: rgba(244, 242, 237, .72);
            font-size: 16px;
            line-height: 1.9;
            padding-right: 20px;
        }

        .cat-hero-stamp {
            flex-shrink: 0;
            width: 140px;
            height: 140px;
            border: 2px solid rgba(185, 137, 76, .5);
            border-radius: 12px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            transform: rotate(2deg);
            background: rgba(185, 137, 76, .05);
        }

        .cat-hero-stamp::after {
            content: '登';
            font-size: 58px;
            font-weight: 700;
            color: rgba(201, 164, 107, .75);
            font-family: Georgia, "Times New Roman", serif;
            line-height: 1;
        }

        .cat-hero-stamp::before {
            content: '官方指南';
            position: absolute;
            bottom: 12px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 11px;
            color: rgba(201, 164, 107, .6);
            letter-spacing: 1px;
            white-space: nowrap;
            border-top: 1px solid rgba(185, 137, 76, .3);
            padding-top: 5px;
            width: 70%;
            text-align: center;
        }

        /* ========== 操作速览 ========== */
        .quick-nav {
            padding: 90px 0 40px;
        }

        .section-heading {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 28px;
        }

        .section-heading h2 {
            font-size: 28px;
            font-weight: 700;
            color: var(--gray-900);
            letter-spacing: .5px;
            line-height: 1.4;
        }

        .section-heading .heading-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--gold);
            flex-shrink: 0;
        }

        .quick-tiles {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
        }

        .tile-card {
            background: var(--white);
            border: 1px solid var(--line-paper);
            border-radius: var(--radius-card);
            padding: 26px 25px;
            display: flex;
            align-items: flex-start;
            gap: 15px;
            transition: var(--transition);
        }

        .tile-card:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-card);
            border-color: rgba(185, 137, 76, .35);
        }

        .tile-num {
            font-family: Georgia, "Times New Roman", serif;
            font-size: 32px;
            color: var(--gold);
            line-height: 1;
            font-weight: 400;
            flex-shrink: 0;
            min-width: 38px;
        }

        .tile-txt {
            padding-top: 2px;
        }

        .tile-txt h3 {
            font-size: 16px;
            font-weight: 600;
            color: var(--gray-900);
            margin-bottom: 6px;
            line-height: 1.5;
        }

        .tile-txt p {
            font-size: 13.5px;
            color: var(--gray-600);
            line-height: 1.8;
        }

        /* ========== 图文对照区：详解版块 ========== */
        .stage-block {
            background: var(--paper-deep);
            padding: 96px 0;
        }

        .stage-block .header-top {
            max-width: 660px;
            margin-bottom: 52px;
        }

        .stage-block .header-top .eyebrow {
            font-size: 15px;
            color: var(--gold-deep);
            font-weight: 600;
            margin-bottom: 12px;
            letter-spacing: 1px;
            display: block;
        }

        .stage-block .header-top h2 {
            font-size: 34px;
            line-height: 1.35;
            color: var(--gray-900);
            margin-bottom: 18px;
            font-weight: 700;
        }

        .stage-block .header-top p {
            color: var(--gray-600);
            font-size: 15px;
            line-height: 1.9;
        }

        .visual-step {
            display: flex;
            align-items: center;
            gap: 56px;
        }

        .visual-media {
            flex: 1.12;
            position: relative;
            border-radius: 18px;
            overflow: hidden;
            box-shadow: 0 18px 55px rgba(10, 10, 8, .06);
            border: 1px solid rgba(16, 19, 20, .1);
        }

        .visual-media img {
            width: 100%;
            height: 420px;
            object-fit: cover;
            transition: transform .35s ease-out;
        }

        .visual-media::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(200deg, transparent 55%, rgba(16, 19, 20, .28));
            pointer-events: none;
        }

        .visual-caption {
            position: absolute;
            left: 20px;
            bottom: 20px;
            z-index: 2;
            background: rgba(16, 19, 20, .78);
            backdrop-filter: blur(4px);
            color: var(--paper);
            font-size: 13px;
            padding: 7px 16px;
            border-radius: 999px;
            border-left: 3px solid var(--gold-light);
            line-height: 1.6;
        }

        .visual-notes-list {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 22px;
        }

        .note-item {
            display: flex;
            gap: 18px;
            border-bottom: 1px solid var(--line-paper);
            padding-bottom: 22px;
        }

        .note-item:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .note-index {
            font-family: Georgia, "Times New Roman", serif;
            font-size: 18px;
            color: var(--gold);
            line-height: 1.2;
            flex-shrink: 0;
            margin-top: 4px;
        }

        .note-body h3 {
            font-size: 17px;
            font-weight: 600;
            color: var(--gray-900);
            margin-bottom: 4px;
        }

        .note-body p {
            font-size: 14px;
            color: var(--gray-600);
            line-height: 1.75;
        }

        /* ========== 纵向登录步骤 ========== */
        .login-steps {
            padding: 94px 0 76px;
        }

        .step-column-inner {
            display: flex;
            gap: 48px;
        }

        .steps-left {
            flex: 0 0 230px;
        }

        .steps-left h2 {
            font-size: 28px;
            color: var(--gray-900);
            line-height: 1.45;
            margin-bottom: 12px;
            font-weight: 700;
        }

        .steps-left p {
            color: var(--gray-600);
            font-size: 14px;
            line-height: 1.85;
        }

        .steps-list {
            flex: 1;
            display: flex;
            flex-direction: column;
            position: relative;
        }

        .steps-list::before {
            content: '';
            position: absolute;
            top: 18px;
            bottom: 18px;
            left: 38px;
            width: 1px;
            background: var(--line-paper);
        }

        .step-one {
            display: flex;
            gap: 28px;
            position: relative;
            padding-top: 0;
            padding-bottom: 0;
        }

        .step-one:last-child .step-no::after {
            display: none;
        }

        .step-no {
            width: 76px;
            height: 76px;
            border-radius: 50%;
            border: 1px solid var(--gold);
            background: var(--paper);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 26px;
            font-weight: 300;
            font-family: Georgia, serif;
            color: var(--gold-deep);
            flex-shrink: 0;
            position: relative;
            z-index: 1;
        }

        .step-one-content {
            padding-top: 8px;
            padding-bottom: 36px;
        }

        .step-one-content h3 {
            font-size: 17px;
            color: var(--gray-900);
            margin-bottom: 8px;
            font-weight: 600;
        }

        .step-one-content p {
            font-size: 14px;
            color: var(--gray-600);
            line-height: 1.8;
            max-width: 560px;
        }

        .steps-cta {
            margin-top: 30px;
        }

        .btn-primary {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: var(--gold);
            color: var(--ink);
            font-size: 16px;
            font-weight: 600;
            height: 56px;
            padding: 0 28px;
            border-radius: 999px;
            position: relative;
            overflow: hidden;
            border: 1px solid var(--gold);
            transition: var(--transition);
        }

        .btn-primary i {
            font-size: 14px;
            transition: transform .24s ease-out;
        }

        .btn-primary::before {
            content: '';
            position: absolute;
            top: 0;
            left: -30%;
            width: 30%;
            height: 100%;
            background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .25), transparent);
            transform: skewX(-20deg);
            transition: left .5s ease-out;
        }

        .btn-primary:hover::before {
            left: 110%;
        }

        .btn-primary:hover {
            background: var(--ink);
            color: var(--paper);
            border-color: var(--ink);
            box-shadow: 0 10px 24px rgba(16, 19, 20, .22);
        }

        .btn-primary:hover i {
            transform: translateX(4px);
        }

        .btn-outline {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            background: transparent;
            border: 1px solid var(--gray-600);
            border-radius: 999px;
            height: 48px;
            padding: 0 24px;
            font-size: 14px;
            font-weight: 500;
            color: var(--gray-900);
            transition: var(--transition);
        }

        .btn-outline:hover {
            border-color: var(--gold-deep);
            color: var(--gold-deep);
            transform: translateY(-1px);
        }

        .hero-btn-group {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-top: 18px;
        }

        /* ========== 安全提示条 ========== */
        .security-tips {
            background-color: var(--paper);
            padding: 20px 0 60px;
        }

        .security-wrap {
            background: rgba(185, 137, 76, .12);
            border: 1px solid rgba(185, 137, 76, .2);
            border-radius: 18px;
            padding: 36px 38px;
            display: flex;
            align-items: flex-start;
            gap: 28px;
            flex-wrap: wrap;
        }

        .security-heading {
            display: flex;
            align-items: center;
            gap: 14px;
            min-width: 220px;
            flex-shrink: 0;
        }

        .security-heading i {
            font-size: 28px;
            color: var(--gold-deep);
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            border: 1px solid rgba(146, 112, 61, .3);
        }

        .security-heading strong {
            font-size: 15px;
            color: var(--gray-900);
            font-weight: 600;
        }

        .security-items {
            display: flex;
            flex: 1;
            gap: 24px;
            flex-wrap: wrap;
        }

        .security-item {
            flex: 1 1 200px;
            position: relative;
            padding-left: 20px;
        }

        .security-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 7px;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--gold-deep);
        }

        .security-item h4 {
            font-size: 14px;
            color: var(--gray-900);
            margin-bottom: 4px;
            font-weight: 600;
        }

        .security-item p {
            font-size: 13px;
            color: var(--gray-600);
            line-height: 1.8;
        }

        /* ========== 版式特殊区：内容速递 ========== */
        .feature-row {
            background: var(--white);
            padding: 70px 0;
        }

        .feature-card-solid {
            background: var(--ink);
            border-radius: 16px;
            padding: 32px;
            min-height: 220px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }

        .feature-card-solid::after {
            content: '';
            position: absolute;
            right: -28px;
            top: -28px;
            width: 120px;
            height: 120px;
            border: 1px solid rgba(201, 164, 107, .2);
            border-radius: 50%;
        }

        .feature-card-solid .ft-title {
            color: var(--paper);
            font-size: 17px;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .feature-card-solid .ft-desc {
            color: rgba(244, 242, 237, .55);
            font-size: 13px;
            line-height: 1.8;
        }

        .feature-card-solid .ft-link {
            color: var(--gold-light);
            font-size: 13px;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            margin-top: 16px;
        }

        .feature-card-line {
            background: var(--paper);
            border: 1px solid var(--line-paper);
            border-radius: 16px;
            padding: 28px;
            min-height: 220px;
            display: flex;
            flex-direction: column;
            transition: var(--transition);
        }

        .feature-card-line:hover {
            border-color: rgba(185, 137, 76, .4);
            box-shadow: var(--shadow-card);
            transform: translateY(-2px);
        }

        .feature-card-line .ft-tag {
            font-size: 12px;
            color: var(--gold-deep);
            background: rgba(185, 137, 76, .08);
            padding: 3px 12px;
            border-radius: 999px;
            display: inline-block;
            width: fit-content;
            margin-bottom: 20px;
        }

        .feature-card-line .ft-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--gray-900);
            line-height: 1.6;
            margin-bottom: 12px;
        }

        .feature-card-line .ft-desc {
            font-size: 13.5px;
            color: var(--gray-600);
            line-height: 1.8;
            flex: 1;
        }

        .feature-card-line .ft-link {
            display: inline-block;
            font-size: 13px;
            color: var(--gray-600);
            margin-top: 18px;
        }

        .feature-card-line .ft-link i {
            transition: transform .2s;
        }

        .feature-card-line:hover .ft-link {
            color: var(--gold-deep);
        }

        .feature-card-line:hover .ft-link i {
            transform: translateX(3px);
        }

        /* ========== FAQ ========== */
        .faq-section {
            padding: 90px 0;
        }

        .faq-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin-bottom: 36px;
        }

        .faq-header h2 {
            font-size: 30px;
            font-weight: 700;
        }

        .faq-header h2 span {
            display: block;
            font-size: 14px;
            color: var(--gray-600);
            font-weight: 400;
            margin-top: 6px;
        }

        .faq-ac-wrapper {
            max-width: 860px;
        }

        .accordion-item {
            border-bottom: 1px solid var(--line-paper);
        }

        .accordion-title {
            background-color: transparent;
            color: var(--gray-900);
            font-size: 15px;
            font-weight: 600;
            padding: 20px 46px 20px 0;
            position: relative;
            text-align: left;
            width: 100%;
            line-height: 1.8;
        }

        .accordion-title::after {
            content: '+';
            position: absolute;
            right: 2px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 24px;
            font-weight: 300;
            color: var(--gold);
            width: 26px;
            height: 26px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform .24s ease;
            line-height: 1;
        }

        .accordion-title.is-active {
            color: var(--gold-deep);
        }

        .accordion-title.is-active::after {
            content: '×';
            transform: translateY(-50%) rotate(90deg);
            font-size: 22px;
        }

        .accordion-content {
            display: none;
            padding: 0 40px 26px 0;
            font-size: 14.5px;
            line-height: 1.9;
            color: var(--gray-600);
        }

        .accordion-content.active {
            display: block;
        }

        /* ========== CTA 底部 ========== */
        .login-cta-band {
            background: var(--ink);
            padding: 100px 0;
            position: relative;
            overflow: hidden;
        }

        .login-cta-band::after {
            content: '';
            position: absolute;
            top: -20%;
            right: -5%;
            width: 440px;
            height: 440px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(185, 137, 76, .1), transparent 68%);
            pointer-events: none;
        }

        .cta-flex {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 50px;
            position: relative;
            z-index: 2;
        }

        .cta-txt h2 {
            font-size: 30px;
            color: var(--paper);
            margin-bottom: 12px;
            font-weight: 700;
        }

        .cta-txt p {
            color: rgba(244, 242, 237, .62);
            font-size: 15px;
            max-width: 480px;
        }

        .cta-btns {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        /* ========== 页脚 ========== */
        .site-footer {
            background: #0a0c0d;
            padding-top: 70px;
            border-top: 1px solid rgba(255, 255, 255, .06);
        }

        .f-brand {
            font-size: 22px;
            color: var(--paper);
            font-weight: 700;
        }

        .f-brand span {
            color: var(--gold-light);
            font-size: 14px;
            font-weight: 400;
            margin-left: 4px;
        }

        .footer-safe {
            display: flex;
            gap: 12px;
            margin-top: 14px;
            flex-wrap: wrap;
        }

        .footer-safe span {
            font-size: 11px;
            color: rgba(255, 255, 255, .45);
            border: 1px solid rgba(255, 255, 255, .12);
            border-radius: 999px;
            padding: 3px 12px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .footer-safe i {
            color: var(--gold-light);
            font-size: 10px;
        }

        @media (min-width: 640px) {
            .footer-grid {
                display: flex;
                gap: 40px;
            }

            .footer-grid>div {
                flex: 1 1 180px;
            }

            .footer-brand-fr {
                flex: 2 1 260px !important;
            }
        }

        .footer-col h4 {
            color: rgba(244, 242, 237, .9);
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 16px;
        }

        .footer-col ul li,
        .footer-col>ul li {
            margin-bottom: 10px;
        }

        .footer-col a {
            color: rgba(244, 242, 237, .45);
            font-size: 13.5px;
            line-height: 1.6;
        }

        .footer-col a:hover {
            color: var(--gold-light);
        }

        .footer-copy {
            margin-top: 50px;
            border-top: 1px solid rgba(255, 255, 255, .08);
            padding: 24px 0 32px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 12px;
            color: rgba(244, 242, 237, .3);
            font-size: 13px;
        }

        .footer-copy .white {
            color: rgba(244, 242, 237, .65);
        }

        /* ========== 响应式处理 ========== */
        @media (max-width: 1024px) {
            :root {
                --space-section: 72px;
            }

            .category-hero h1 {
                font-size: 38px;
            }

            .cat-hero-stamp {
                width: 110px;
                height: 110px;
            }

            .cat-hero-stamp::after {
                font-size: 50px;
            }

            .visual-step {
                flex-direction: column;
                gap: 30px;
            }

            .visual-media img {
                height: auto;
                max-height: 320px;
            }

            .step-column-inner {
                flex-direction: column;
                gap: 36px;
            }

            .steps-left {
                flex: none;
            }
        }

        @media (max-width: 768px) {
            .container {
                padding-inline: 16px;
            }

            .category-hero {
                padding: 52px 0 54px;
            }

            .category-hero .container {
                flex-direction: column;
                align-items: flex-start;
                gap: 32px;
            }

            .category-hero h1 {
                font-size: 30px;
            }

            .category-hero .hero-desc {
                padding-right: 0;
            }

            .cat-hero-stamp {
                width: 70px;
                height: 70px;
                border-radius: 8px;
                transform: rotate(2deg);
            }

            .cat-hero-stamp::after {
                font-size: 32px;
            }

            .cat-hero-stamp::before {
                display: none;
            }

            .hero-btn-group {
                flex-direction: row;
                flex-wrap: wrap;
            }

            .quick-tiles {
                grid-template-columns: 1fr;
                gap: 16px;
            }

            .stage-block,
            .faq-section,
            .login-cta-band {
                padding: 64px 0;
            }

            .section-heading h2 {
                font-size: 22px;
            }

            .stage-block .header-top h2 {
                font-size: 26px;
            }

            .visual-media img {
                height: 210px;
                min-height: 160px;
            }

            .steps-list::before {
                left: 22px;
            }

            .step-no {
                width: 44px;
                height: 44px;
                font-size: 17px;
                flex-basis: 44px;
                margin-top: 4px;
            }

            .step-one {
                gap: 16px;
            }

            .step-one-content {
                padding-top: 4px;
                padding-bottom: 22px;
            }

            .security-wrap {
                padding: 26px 22px;
            }

            .quick-nav {
                padding-top: 60px;
            }

            .security-tips {
                padding: 16px 0 40px;
            }

            .faq-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 16px;
                margin-bottom: 26px;
            }

            .faq-header h2 {
                font-size: 24px;
            }

            .cta-flex {
                flex-direction: column;
                align-items: flex-start;
            }

            .cta-btns {
                flex-wrap: wrap;
                gap: 10px;
            }

            .btn-primary {
                height: 48px;
                padding-inline: 22px;
                font-size: 15px;
            }

            .footer-copy {
                flex-direction: column;
                align-items: flex-start;
            }
        }

        @media (max-width: 520px) {
            .section-heading {
                flex-wrap: wrap;
            }

            .feature-row {
                padding: 52px 0;
            }

            .accordion-title {
                font-size: 14px;
                padding-right: 36px;
            }

            .accordion-content {
                font-size: 13px;
                padding-right: 20px;
            }

            .steps-cta {
                margin-top: 20px;
            }

            .visual-notes-list {
                width: 100%;
            }

            .note-item {
                gap: 12px;
            }

            .footer-copy {
                font-size: 12px;
            }
            .footer-grid {
                flex-wrap: wrap;
            }
            .footer-grid>div {
                flex: 1 1 45%;
            }
            .footer-brand-fr {
                flex: 1 1 100% !important;
            }
        }

        :focus-visible {
            outline: 2px solid var(--gold-light);
            outline-offset: 3px;
        }

        .accordion-title:focus-visible {
            outline: 2px solid var(--gold-light);
            outline-offset: -2px;
        }

        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                transition-duration: 0.01ms !important;
            }
        }

/* roulang page: article */
:root{
  --paper:#F4F2ED;
  --paper-alt:#EDE9E1;
  --ink:#101314;
  --body:#1F2225;
  --muted:#6B7075;
  --light:#F4F2ED;
  --gold:#B5894C;
  --gold-dark:#92703D;
  --gold-light:#C9A46B;
  --white:#ffffff;
  --line:rgba(16,19,20,.12);
  --line-ink:rgba(255,255,255,.16);
  --radius-sm:999px;
  --radius-card:12px;
  --radius-img:18px;
  --radius-hero:28px;
  --shadow-hover:0 18px 45px rgba(10,10,8,.08);
  --shadow-dark:0 24px 60px rgba(0,0,0,.28);
  --container:1280px;
  --reading:760px;
  --header-h:72px;
  --transition:all .24s ease-out;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC","Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.8;
  color:var(--body);
  background:var(--paper);
  padding-bottom:62px;
}
img{display:block;max-width:100%;height:auto;}
ul,ol{list-style:none;}
a{color:inherit;text-decoration:none;transition:color .24s ease-out;}
button,input,textarea{font-family:inherit;font-size:inherit;}
.container{max-width:var(--container);margin:0 auto;padding:0 24px;width:100%;}
.section{padding:90px 0;}
a:focus-visible,button:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:6px;
}
.js .reveal{opacity:0;transform:translateY(12px);transition:opacity .24s ease-out,transform .24s ease-out;}
.js .reveal.visible{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important;}
  .js .reveal{opacity:1!important;transform:none!important;}
}

/* 阅读进度 */
.reading-bar{
  position:fixed;
  top:0;
  left:0;
  width:0;
  height:2px;
  z-index:1200;
  background:linear-gradient(90deg,var(--gold),var(--gold-light));
  border-radius:0 4px 4px 0;
  transition:width .08s linear;
}

/* 顶部导航 */
.site-header{
  position:sticky;
  top:0;
  z-index:1100;
  background:var(--ink);
  min-height:var(--header-h);
  border-bottom:1px solid transparent;
  transition:border-color .24s ease-out,box-shadow .24s ease-out;
}
.site-header.scrolled{
  border-bottom-color:rgba(255,255,255,.08);
  box-shadow:0 15px 40px rgba(0,0,0,.2);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:var(--header-h);
}
.brand{display:inline-flex;align-items:baseline;gap:8px;flex-shrink:0;}
.b-logo{
  font-size:22px;
  font-weight:800;
  color:var(--gold-light);
  letter-spacing:.02em;
  line-height:1.2;
}
.b-sub{
  display:inline-block;
  border:1px solid rgba(255,255,255,.22);
  color:rgba(255,255,255,.62);
  font-size:12px;
  font-weight:500;
  padding:2px 9px;
  border-radius:999px;
  letter-spacing:.12em;
  line-height:1.5;
}
.main-nav ul{display:flex;align-items:center;gap:26px;}
.main-nav a{
  color:rgba(255,255,255,.66);
  font-size:14px;
  font-weight:500;
  display:inline-flex;
  align-items:center;
  position:relative;
  padding:8px 0;
  white-space:nowrap;
}
.main-nav a:hover{color:#fff;}
.main-nav li.active > a{color:var(--gold-light);}
.main-nav li.active > a:not(.nav-cta)::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:20px;
  height:2px;
  border-radius:2px;
  background:var(--gold);
}
.nav-cta{
  background:var(--gold);
  color:#171717!important;
  border-radius:999px;
  padding:9px 19px!important;
  font-weight:700;
  gap:7px;
  margin-left:6px;
}
.nav-cta i{font-size:13px;}
.nav-cta:hover{background:var(--gold-light);color:#1b1b1b!important;}
@media (max-width:767px){
  body{padding-bottom:calc(62px + env(safe-area-inset-bottom));}
  .site-header{min-height:62px;}
  .header-inner{min-height:62px;}
  .b-logo{font-size:19px;}
  .b-sub{display:none;}
  .main-nav{display:none;}
}

/* 移动端底部导航 */
.mobile-tabbar{
  position:fixed;
  left:0;
  bottom:0;
  width:100%;
  z-index:1200;
  background:rgba(16,19,20,.98);
  backdrop-filter:blur(6px);
  display:none;
  height:calc(62px + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  border-top:1px solid rgba(255,255,255,.07);
}
.mobile-tabbar .m-tabbar-inner{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  height:62px;
}
.m-tab-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  color:rgba(255,255,255,.5);
  position:relative;
}
.m-tab-item svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.m-tab-item span{font-size:11px;letter-spacing:.04em;}
.m-tab-item.active{color:var(--gold-light);}
.m-tab-item.active::before{
  content:"";
  position:absolute;
  top:5px;
  left:50%;
  transform:translateX(-50%);
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--gold);
}
@media (max-width:767px){.mobile-tabbar{display:block;}}

/* 文章页通用区块 */
.article-page{
  padding-top:56px;
  padding-bottom:90px;
  min-height:70vh;
}
@media (max-width:767px){
  .article-page{padding-top:38px;padding-bottom:72px;}
  .section{padding:60px 0;}
}
.breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--muted);
  margin-bottom:30px;
}
.breadcrumbs .sep{color:rgba(16,19,20,.35);}
.breadcrumbs a{color:var(--muted);}
.breadcrumbs a:hover{color:var(--gold-dark);}
.breadcrumbs .cur{
  color:var(--body);
  max-width:260px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.article-layout{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:44px;
}
.article-main-col{
  width:min(100%,760px);
  flex:0 1 760px;
  min-width:0;
}
.toc-aside{
  width:196px;
  flex:0 0 196px;
  position:sticky;
  top:calc(var(--header-h) + 28px);
  align-self:flex-start;
  display:none;
}
.toc-aside.is-visible{display:block;}
.toc-inner{
  border-left:1px solid rgba(16,19,20,.1);
  padding:8px 0 8px 18px;
}
.toc-title{
  display:block;
  font-size:12px;
  color:var(--gold-dark);
  letter-spacing:.14em;
  font-weight:700;
  margin-bottom:12px;
}
.toc-list{display:flex;flex-direction:column;gap:9px;}
.toc-list a{
  display:block;
  font-size:13px;
  color:var(--muted);
  line-height:1.55;
  border-left:2px solid transparent;
  margin-left:-19px;
  padding-left:17px;
  transition:color .24s ease-out,border-color .24s ease-out;
}
.toc-list a:hover{color:var(--gold-dark);border-left-color:var(--gold);}
.toc-list a.active{color:var(--gold-dark);border-left-color:var(--gold);}
@media (max-width:1199px){.toc-aside{display:none!important;}}

.article-sheet{
  background:var(--white);
  border:1px solid rgba(16,19,20,.07);
  border-radius:20px;
  padding:52px 54px;
  box-shadow:0 10px 30px rgba(26,24,18,.04);
}
.article-cat{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:20px;
}
.cat-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:rgba(181,137,76,.1);
  border:1px solid rgba(181,137,76,.34);
  color:var(--gold-dark);
  font-size:12px;
  font-weight:700;
  line-height:1;
  padding:7px 13px;
  border-radius:999px;
  letter-spacing:.06em;
}
.cat-pill i{font-size:8px;}
.article-sheet h1{
  font-size:46px;
  line-height:1.28;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--ink);
  margin-bottom:22px;
}
.article-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 16px;
  font-size:13px;
  color:var(--muted);
  border-top:1px solid rgba(16,19,20,.07);
  border-bottom:1px solid rgba(16,19,20,.07);
  padding:14px 0;
  margin:0 0 36px;
}
.article-meta .meta-item{display:inline-flex;align-items:center;gap:6px;}
.article-meta .meta-sep{width:1px;height:14px;background:rgba(16,19,20,.16);}

/* 正文版式 */
.article-body{
  font-size:16px;
  line-height:1.95;
  color:#34373A;
}
.article-body p{margin:0 0 22px;}
.article-body strong{font-weight:700;color:var(--ink);}
.article-body h2{
  font-size:26px;
  line-height:1.45;
  color:var(--ink);
  font-weight:700;
  margin:48px 0 20px;
  padding-left:15px;
  border-left:3px solid var(--gold);
}
.article-body h3{
  font-size:19px;
  font-weight:700;
  color:var(--ink);
  margin:36px 0 14px;
}
.article-body h4{
  font-size:16px;
  font-weight:700;
  color:var(--ink);
  margin:30px 0 12px;
}
.article-body a{
  color:var(--gold-dark);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:rgba(146,112,61,.35);
}
.article-body a:hover{color:var(--gold);}
.article-body ul{margin:0 0 24px;padding-left:2px;}
.article-body ul li{
  position:relative;
  padding-left:20px;
  margin-bottom:9px;
}
.article-body ul li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--gold);
}
.article-body ol{margin:0 0 24px;counter-reset:custom;padding-left:2px;}
.article-body ol li{
  counter-increment:custom;
  position:relative;
  padding-left:32px;
  margin-bottom:9px;
}
.article-body ol li::before{
  content:counter(custom, decimal-leading-zero);
  position:absolute;
  left:0;
  top:.05em;
  font-family:Georgia,"Times New Roman",serif;
  color:var(--gold-dark);
  font-size:13px;
  font-weight:700;
}
.article-body blockquote{
  background:var(--paper);
  border-left:4px solid var(--gold);
  border-radius:0 14px 14px 0;
  padding:22px 26px;
  margin:0 0 28px;
  color:#4B4F52;
  font-size:15px;
}
.article-body blockquote p:last-child{margin-bottom:0;}
.article-body img{
  width:100%;
  height:auto;
  border-radius:14px;
  margin:30px 0 10px;
  box-shadow:0 16px 36px rgba(16,19,20,.1);
}
.article-body figure{margin:30px 0 10px;}
.article-body figcaption{
  font-size:12px;
  color:var(--muted);
  text-align:center;
  margin-top:10px;
}
.article-body pre{
  background:#141719;
  color:#F0EEE9;
  padding:20px 22px;
  border-radius:14px;
  overflow-x:auto;
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  font-size:14px;
  line-height:1.75;
  margin:0 0 28px;
}
.article-body code{
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  background:rgba(16,19,20,.08);
  border-radius:5px;
  padding:2px 6px;
  font-size:.92em;
}
.article-body pre code{
  background:transparent;
  padding:0;
  border-radius:0;
  font-size:inherit;
}
.article-body hr{
  border:0;
  border-bottom:1px solid rgba(16,19,20,.12);
  margin:46px 0;
}

/* 标签行与返回 */
.article-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:22px;
  padding-top:22px;
  border-top:1px solid rgba(16,19,20,.09);
}
.article-tags .tag{
  display:inline-block;
  background:#F1EEE8;
  border:1px solid rgba(16,19,20,.07);
  color:var(--muted);
  font-size:12px;
  border-radius:999px;
  padding:5px 13px;
}
.return-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:24px;
  font-size:14px;
  font-weight:600;
  color:var(--gold-dark);
  transition:gap .24s ease-out,color .24s ease-out;
}
.return-link:hover{color:var(--gold);gap:12px;}

/* 空态 */
.empty-sheet{
  background:var(--white);
  border:1px solid rgba(16,19,20,.07);
  border-radius:20px;
  padding:90px 20px;
  text-align:center;
}
.empty-sheet .empty-icon{
  width:72px;
  height:72px;
  margin:0 auto 18px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(181,137,76,.4);
  color:var(--gold);
  font-size:26px;
}
.empty-sheet h2{font-size:22px;color:var(--ink);margin-bottom:6px;}
.empty-sheet p{color:var(--muted);font-size:14px;margin-bottom:24px;}

/* 按钮 */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:48px;
  padding:0 26px;
  border-radius:999px;
  font-size:15px;
  font-weight:700;
  letter-spacing:.02em;
  cursor:pointer;
  border:1px solid transparent;
  transition:background .24s ease-out,color .24s ease-out,border-color .24s ease-out,transform .24s ease-out;
  white-space:nowrap;
}
.btn-gold{background:var(--gold);color:#181919;}
.btn-gold:hover{background:var(--ink);color:var(--gold-light);transform:translateY(-1px);}
.btn-outline-light{
  background:transparent;
  border-color:rgba(255,255,255,.45);
  color:#fff;
  height:auto;
  padding:14px 24px;
  border-radius:999px;
  font-weight:600;
}
.btn-outline-light:hover{border-color:var(--gold-light);color:var(--gold-light);}
.btn-dark{background:var(--ink);color:var(--gold-light);}
.btn-dark:hover{background:#24282B;transform:translateY(-1px);}

/* 推荐区域 */
.related-section{
  padding:0 0 90px;
}
.related-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:24px;
}
.related-head h2{
  font-size:24px;
  font-weight:700;
  color:var(--ink);
  position:relative;
  padding-left:15px;
}
.related-head h2::before{
  content:"";
  position:absolute;
  left:0;
  top:.08em;
  width:5px;
  height:1.1em;
  border-radius:4px;
  background:var(--gold);
}
.related-head a{
  font-size:13px;
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.related-head a:hover{color:var(--gold-dark);}
.related-card{
  background:var(--white);
  border:1px solid rgba(16,19,20,.08);
  border-radius:16px;
  overflow:hidden;
  height:calc(100% - 26px);
  margin-bottom:26px;
  display:flex;
  flex-direction:column;
  transition:border-color .24s ease-out,transform .24s ease-out,box-shadow .24s ease-out;
}
.related-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-hover);
  border-color:rgba(181,137,76,.35);
}
.related-cover{
  border-radius:0;
  overflow:hidden;
  aspect-ratio:4/3;
  background:var(--paper-alt);
}
.related-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .24s ease-out;
}
.related-card:hover .related-cover img{transform:scale(1.02);}
.related-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1;}
.related-body .rel-tag{
  display:inline-block;
  font-size:11px;
  color:var(--gold-dark);
  background:rgba(181,137,76,.09);
  border:1px solid rgba(181,137,76,.25);
  border-radius:999px;
  padding:3px 9px;
  margin-bottom:10px;
  align-self:flex-start;
}
.related-body h3{font-size:16px;font-weight:700;color:var(--ink);line-height:1.55;margin-bottom:7px;}
.related-body p{font-size:13px;line-height:1.7;color:var(--muted);flex:1;}
.related-body .rel-more{
  margin-top:14px;
  font-size:13px;
  font-weight:700;
  color:var(--gold-dark);
  display:inline-flex;
  align-items:center;
  gap:6px;
  align-self:flex-start;
}
.related-body .rel-more i{transition:transform .24s ease-out;}
.related-card:hover .rel-more i{transform:translateX(4px);}

/* 登录提示 CTA */
.cta-login-section{padding:0 0 90px;}
.cta-login-box{
  border-radius:28px;
  background-image:linear-gradient(100deg,rgba(16,19,20,.97) 0%,rgba(16,19,20,.84) 100%),url('/assets/images/backpic/back-2.webp');
  background-size:cover;
  background-position:center;
  padding:58px 62px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  box-shadow:var(--shadow-dark);
}
.cta-login-box::after{
  content:"";
  width:260px;
  height:260px;
  position:absolute;
  right:-90px;
  bottom:-150px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
  pointer-events:none;
}
.cta-login-box::before{
  content:"";
  width:440px;
  height:440px;
  position:absolute;
  right:-180px;
  bottom:-260px;
  border:1px solid rgba(255,255,255,.05);
  border-radius:50%;
  pointer-events:none;
}
.cta-login-txt{position:relative;z-index:1;max-width:540px;}
.cta-login-txt .kicker{
  display:inline-block;
  font-size:12px;
  letter-spacing:.16em;
  color:var(--gold);
  margin-bottom:10px;
  font-weight:700;
}
.cta-login-txt h2{
  color:var(--light);
  font-size:28px;
  line-height:1.45;
  font-weight:700;
  margin-bottom:12px;
}
.cta-login-txt p{
  color:rgba(255,255,255,.56);
  font-size:14px;
  line-height:1.85;
}
.cta-login-btns{
  position:relative;
  z-index:1;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
@media (max-width:899px){
  .cta-login-box{flex-direction:column;align-items:flex-start;padding:44px 34px;}
}

/* 页脚 */
.site-footer{
  background:var(--ink);
  padding:74px 0 46px;
  color:rgba(255,255,255,.66);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.3fr .8fr .9fr .9fr;
  gap:36px 44px;
}
@media (max-width:1023px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;gap:30px;}}
.footer-brand-fr .f-brand{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  font-size:22px;
  font-weight:800;
  color:var(--gold-light);
  margin-bottom:12px;
}
.footer-brand-fr .f-brand span{
  font-size:13px;
  color:rgba(255,255,255,.42);
  letter-spacing:.06em;
}
.footer-safe{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  margin-top:15px;
}
.footer-safe span{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:12px;
  color:rgba(255,255,255,.44);
}
.footer-safe i{color:var(--gold);font-size:13px;}
.footer-col h4{
  font-size:13px;
  color:#fff;
  letter-spacing:.1em;
  margin-bottom:17px;
  font-weight:700;
}
.footer-col ul li{margin-bottom:10px;}
.footer-col ul a{
  font-size:13px;
  color:rgba(255,255,255,.48);
  transition:color .24s ease-out;
}
.footer-col ul a:hover{color:var(--gold-light);}
.footer-copy{
  margin-top:52px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.1);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:8px 20px;
  font-size:12px;
  color:rgba(255,255,255,.34);
}
.footer-copy .white{color:rgba(255,255,255,.6);}

/* 响应式细节 */
@media (max-width:1023px){
  .main-nav ul{gap:18px;}
  .article-layout{gap:12px;}
}
@media (max-width:767px){
  .article-sheet{padding:32px 22px;border-radius:16px;}
  .article-sheet h1{font-size:28px;line-height:1.4;}
  .container{padding:0 16px;}
  .related-section{padding:0 0 62px;}
  .cta-login-section{padding:0 0 62px;}
  .cta-login-box{padding:38px 23px;}
  .cta-login-txt h2{font-size:23px;}
  .cta-login-btns .btn{width:100%;}
  .site-footer{padding:58px 0 90px;}
  .footer-copy{flex-direction:column;margin-top:32px;}
  .breadcrumbs .cur{max-width:180px;}
}
@media (max-width:520px){
  .article-page{padding-top:30px;padding-bottom:60px;}
  .article-meta{gap:8px 12px;font-size:12px;}
  .article-body h2{font-size:21px;}
  .related-head h2{font-size:20px;}
  .article-body figure{margin-left:0;margin-right:0;}
}

/* roulang page: category2 */
:root {
  --ink: #101314;
  --ink-2: #1F2225;
  --paper: #F4F2ED;
  --paper-soft: #EDE9E1;
  --card: #FFFFFF;
  --border: rgba(16, 19, 20, .12);
  --border-dark: rgba(255, 255, 255, .16);
  --gold: #B5894C;
  --gold-dark: #92703D;
  --gold-light: #C9A46B;
  --gray: #6B7075;
  --white: #F4F2ED;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-x: 28px;
  --shadow-card: 0 18px 45px rgba(10, 10, 8, .08);
  --shadow-dark: 0 24px 60px rgba(0, 0, 0, .28);
  --container: 1280px;
  --ease: all .24s ease-out;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Hiragino Sans GB", sans-serif;
  font-size: 16px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}

body.category-page {
  padding-bottom: 0;
}

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

a {
  text-decoration: none;
  color: inherit;
  transition: var(--ease);
}

ul,
ol,
figure,
h1,
h2,
h3,
h4,
p {
  margin: 0;
  padding: 0;
}

button,
input {
  font-family: inherit;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 26px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 12px;
  z-index: 999;
  background: var(--gold);
  color: var(--ink);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
}

.skip-link:focus {
  left: 12px;
}

::selection {
  background: rgba(181, 137, 76, .28);
  color: var(--ink);
}

/* ========== 导航 ========== */
.site-header {
  background: var(--ink);
  color: var(--white);
  position: sticky;
  top: 0;
  z-index: 90;
  height: 72px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.header-inner {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-shrink: 0;
}

.b-logo {
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: .03em;
  line-height: 1.2;
}

.b-sub {
  font-size: 12px;
  font-weight: 500;
  color: var(--gold-light);
  letter-spacing: .12em;
  border: 1px solid rgba(181, 137, 76, .45);
  padding: 3px 10px;
  border-radius: 999px;
  line-height: 1;
}

.main-nav ul {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
}

.main-nav a {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 500;
  color: rgba(244, 242, 237, .78);
  border-radius: 999px;
  position: relative;
}

.main-nav a:hover {
  color: var(--gold-light);
  background: rgba(255, 255, 255, .05);
}

.main-nav li {
  position: relative;
}

.main-nav li.active a {
  color: var(--gold-light);
}

.main-nav li.active::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 2px;
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: var(--gold);
}

.main-nav .nav-cta {
  height: 42px;
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
  padding: 0 22px;
  border-radius: 999px;
  margin-left: 14px;
}

.main-nav .nav-cta i {
  font-size: 14px;
  margin-right: 8px;
}

.main-nav .nav-cta:hover {
  background: var(--white);
  color: var(--ink);
}

/* ========== 页脚 ========== */
.site-footer {
  background: var(--ink);
  color: rgba(244, 242, 237, .7);
  padding: 70px 0 30px;
  margin-top: 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr .75fr .75fr 180px;
  gap: 42px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.f-brand {
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
}

.f-brand span {
  font-size: 12px;
  color: var(--gold-light);
  border: 1px solid rgba(181, 137, 76, .45);
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: .1em;
}

.footer-brand-fr p {
  font-size: 13px;
  color: rgba(255, 255, 255, .38);
  line-height: 1.9;
  max-width: 360px;
}

.footer-safe {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 20px;
}

.footer-safe span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: rgba(244, 242, 237, .62);
}

.footer-safe i {
  color: var(--gold-light);
  font-size: 13px;
}

.footer-col h4,
.footer-grid > div > h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 18px;
  letter-spacing: .04em;
}

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

.footer-col ul li,
.footer-grid > div > ul li {
  margin-bottom: 10px;
}

.footer-col a,
.footer-grid > div > ul a {
  font-size: 14px;
  color: rgba(244, 242, 237, .62);
  line-height: 1.8;
}

.footer-col a:hover,
.footer-grid > div > ul a:hover {
  color: var(--gold-light);
}

.footer-copy {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 26px;
  font-size: 13px;
  color: rgba(244, 242, 237, .38);
}

.footer-copy .white {
  color: rgba(244, 242, 237, .62);
}

.footer-copy a {
  color: rgba(244, 242, 237, .62);
}

.footer-copy a:hover {
  color: var(--gold-light);
}

/* ========== 移动端底部导航 ========== */
.mobile-tab {
  display: none;
}

/* ========== 基础按钮 ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 600;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  transition: var(--ease);
  position: relative;
  overflow: hidden;
  line-height: 1.2;
}

.btn-lg,
.btn-xl {
  height: 52px;
  padding: 0 32px;
  font-size: 16px;
}

.btn-xl {
  height: 56px;
  padding: 0 38px;
  font-size: 17px;
}

.btn-gold {
  background: var(--gold);
  color: var(--ink);
}

.btn-gold:hover {
  background: var(--ink);
  color: var(--gold-light);
}

.btn-gold:active {
  transform: translateY(1px);
}

.btn-line-invert {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, .45);
}

.btn-line-invert:hover {
  border-color: var(--gold-light);
  color: var(--gold-light);
  background: rgba(255, 255, 255, .05);
}

.btn-line-dark {
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(16, 19, 20, .35);
}

.btn-line-dark:hover {
  border-color: var(--gold-dark);
  color: var(--gold-dark);
}

.btn i {
  font-size: 15px;
  transition: var(--ease);
}

.btn:hover i {
  transform: translateX(3px);
}

/* ========== 首页顶部 Hero（资讯分类用） ========== */
.magazine-hero {
  position: relative;
  background: var(--ink);
  color: var(--white);
  overflow: hidden;
}

.magazine-hero .hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .2;
}

.magazine-hero .hero-bg-dark {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, rgba(16, 19, 20, .94) 12%, rgba(16, 19, 20, .76) 47%, rgba(16, 19, 20, .54) 100%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  padding: 90px 0 90px;
}

.hero-grid {
  display: flex;
  align-items: center;
}

.mast-copy {
  padding-right: 20px;
}

.mast-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(244, 242, 237, .66);
  letter-spacing: .02em;
  margin-bottom: 18px;
}

.mast-kicker::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
}

.mast-copy h1 {
  font-size: 46px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 22px;
  letter-spacing: .01em;
}

.mast-copy h1 .gold {
  color: var(--gold-light);
}

.mast-lead {
  font-size: 16px;
  line-height: 1.9;
  color: rgba(244, 242, 237, .68);
  max-width: 560px;
  margin-bottom: 32px;
}

.mast-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.mast-footnote {
  margin-top: 22px;
  font-size: 13px;
  color: rgba(244, 242, 237, .42);
}

.mast-footnote i {
  color: var(--gold-light);
  margin-right: 6px;
}

/* hero 右侧竖图 */
.hero-visual {
  width: 290px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.hero-frame {
  border-radius: var(--radius-x);
  padding: 8px;
  border: 1px solid rgba(181, 137, 76, .72);
  background: rgba(181, 137, 76, .12);
  box-shadow: var(--shadow-dark);
}

.hero-frame .frame-inner {
  border-radius: 22px;
  overflow: hidden;
  position: relative;
}

.hero-frame img {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  transform: scale(1.02);
}

.hero-caption {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  background: rgba(16, 19, 20, .72);
  color: var(--white);
  font-size: 13px;
  padding: 12px 14px;
  border-radius: 14px;
  line-height: 1.5;
  backdrop-filter: blur(8px);
}

.hero-caption i {
  color: var(--gold-light);
}

.hero-arrow {
  position: absolute;
  right: -26px;
  bottom: 34px;
  width: 58px;
  height: 58px;
  background: var(--gold);
  border: 3px solid var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-size: 18px;
  transition: var(--ease);
}

.hero-arrow:hover {
  background: var(--white);
  color: var(--ink);
  transform: scale(1.06);
}

/* ========== 栏目提示条 ========== */
.mag-border-strip {
  background: var(--white);
  border-bottom: 1px solid var(--border);
}

.strip-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  min-height: 84px;
}

.strip-item {
  padding: 24px 16px 24px 0;
  border-right: 1px solid var(--border);
  border-bottom: 0;
  margin-right: 24px;
}

.strip-item:last-child {
  border-right: 0;
}

.strip-item strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}

.strip-item span {
  font-size: 12px;
  color: var(--gray);
}

/* ========== 通用 Section ========== */
.sec-block {
  padding: 90px 0;
}

.sec-block.paper-bg {
  background: var(--paper);
}

.sec-block.white-bg {
  background: var(--white);
}

.sec-block.soft-bg {
  background: var(--paper-soft);
}

.sec-heading {
  margin-bottom: 42px;
  max-width: 760px;
}

.sec-heading .sec-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--gold-dark);
  margin-bottom: 16px;
  letter-spacing: .16em;
}

.sec-heading .sec-kicker::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--gold);
  display: block;
  border-radius: 999px;
}

.sec-heading h2 {
  font-size: 30px;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 16px;
  font-weight: 700;
  letter-spacing: .02em;
}

.sec-heading p {
  font-size: 15px;
  color: var(--gray);
  line-height: 1.85;
}

/* ========== 头版资讯区域 ========== */
.top-stories .feature-card {
  height: 100%;
  background: var(--card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.feature-card .fc-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  position: relative;
}

.feature-card .fc-media:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 19, 20, 0) 48%, rgba(16, 19, 20, .24) 100%);
}

.feature-card .fc-media img,
.stack-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--ease);
}

.feature-card:hover .fc-media img {
  transform: scale(1.03);
}

.feature-card .fc-badge {
  position: absolute;
  z-index: 2;
  left: 16px;
  top: 16px;
  background: rgba(16, 19, 20, .78);
  color: var(--gold-light);
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 999px;
}

.fc-body {
  padding: 24px 26px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.fc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: var(--gray);
  margin-bottom: 14px;
}

.fc-meta .dot-sep {
  color: rgba(16, 19, 20, .3);
}

.fc-body h3 {
  font-size: 21px;
  color: var(--ink);
  line-height: 1.5;
  margin-bottom: 12px;
  font-weight: 700;
}

.fc-body h3 a:hover {
  color: var(--gold-dark);
}

.fc-body p {
  font-size: 15px;
  color: var(--gray);
  line-height: 1.85;
  margin-bottom: 20px;
  flex: 1;
}

.read-link {
  font-size: 15px;
  font-weight: 600;
  color: var(--gold-dark);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.read-link i {
  font-size: 13px;
  transition: var(--ease);
}

.read-link:hover {
  color: var(--ink);
}

.read-link:hover i {
  transform: translateX(4px);
}

.right-stack {
  display: flex;
  flex-direction: column;
  gap: 22px;
  height: 100%;
}

.stack-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1;
  transition: var(--ease);
}

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

.stack-card-top {
  position: relative;
}

.stack-card-top img {
  height: 90px;
  object-fit: cover;
}

.stack-card-body {
  padding: 20px 20px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.stack-tag {
  font-size: 12px;
  color: var(--gold-dark);
  background: rgba(181, 137, 76, .1);
  border: 1px solid rgba(181, 137, 76, .22);
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
  width: fit-content;
  letter-spacing: .02em;
}

.stack-card h3 {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 10px;
  font-weight: 700;
}

.stack-card h3 a:hover {
  color: var(--gold-dark);
}

.stack-card p {
  font-size: 14px;
  color: var(--gray);
  line-height: 1.8;
  flex: 1;
  margin-bottom: 14px;
}

/* ========== 资讯清单 ========== */
.read-list-area {
  background: var(--paper);
}

.list-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 12px;
  gap: 24px;
}

.title-meta {
  font-size: 13px;
  color: var(--gray);
  flex-shrink: 0;
  padding-bottom: 10px;
}

.insight-list {
  border-top: 1px solid var(--border);
}

.insight-row {
  display: grid;
  grid-template-columns: 86px 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 26px 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  transition: var(--ease);
}

.insight-row:hover {
  padding-left: 12px;
  padding-right: 12px;
  background: rgba(255, 255, 255, .5);
}

.insight-no {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 30px;
  color: var(--gold);
  line-height: 1;
}

.insight-body h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
  line-height: 1.55;
}

.insight-body h3 a {
  color: var(--ink);
}

.insight-body h3 a:hover {
  color: var(--gold-dark);
}

.insight-body p {
  font-size: 14px;
  color: var(--gray);
  line-height: 1.8;
  max-width: 760px;
}

.insight-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  font-size: 13px;
  color: var(--gray);
  white-space: nowrap;
}

.insight-meta .go-mini {
  color: var(--gold-dark);
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ========== 深色安全提醒 ========== */
.safe-dark {
  background: var(--ink);
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.safe-dark .safe-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .16;
}

.safe-dark .safe-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 20%, rgba(181, 137, 76, .14) 0%, rgba(16, 19, 20, .9) 50%, rgba(16, 19, 20, .98) 100%);
}

.safe-inner {
  position: relative;
  z-index: 2;
}

.safe-head {
  max-width: 720px;
  margin-bottom: 44px;
}

.safe-head .sec-kicker {
  color: var(--gold-light);
}

.safe-head .sec-kicker::before {
  background: var(--gold-light);
}

.safe-head h2 {
  color: var(--white);
}

.safe-head p {
  color: rgba(244, 242, 237, .68);
}

.safe-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}

.safe-point {
  border-left: 2px solid rgba(181, 137, 76, .8);
  padding: 8px 0 8px 24px;
  min-height: 125px;
}

.safe-point .sp-no {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 30px;
  color: var(--gold-light);
  display: block;
  margin-bottom: 18px;
  line-height: 1;
}

.safe-point h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--white);
}

.safe-point p {
  font-size: 14px;
  color: rgba(244, 242, 237, .62);
  line-height: 1.8;
}

.safe-note {
  margin-top: 36px;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  background: rgba(181, 137, 76, .12);
  border: 1px solid rgba(181, 137, 76, .35);
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 14px;
  color: var(--gold-light);
}

.safe-note i {
  color: var(--gold-light);
}

/* ========== 登录 CTA 区 ========== */
.cta-band {
  position: relative;
  background: var(--ink);
  color: var(--white);
  overflow: hidden;
}

.cta-band .cta-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .18;
}

.cta-band .cta-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(16, 19, 20, .95) 4%, rgba(16, 19, 20, .72) 62%, rgba(16, 19, 20, .35) 100%);
}

.cta-inner {
  position: relative;
  z-index: 2;
  padding: 84px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 44px;
  flex-wrap: wrap;
}

.cta-copy {
  max-width: 700px;
}

.cta-copy .cta-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--gold-light);
  letter-spacing: .16em;
  margin-bottom: 20px;
}

.cta-copy .cta-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

.cta-copy h2 {
  font-size: 30px;
  line-height: 1.4;
  font-weight: 700;
  margin-bottom: 14px;
}

.cta-copy p {
  font-size: 15px;
  color: rgba(244, 242, 237, .65);
}

.cta-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-end;
}

.cta-link {
  color: rgba(244, 242, 237, .74);
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cta-link:hover {
  color: var(--gold-light);
}

.cta-link i {
  font-size: 13px;
}

/* ========== FAQ ========== */
.faq-sec {
  padding: 90px 0;
  background: var(--paper);
}

.faq-wrap {
  max-width: 920px;
  margin: 0 auto;
}

.faq-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 10px 30px;
}

.faq-acc.accordion {
  list-style: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.faq-acc.accordion .accordion-item {
  list-style: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}

.faq-acc.accordion .accordion-item:last-child {
  border-bottom: 0;
}

.faq-acc .accordion-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border: 0;
  color: var(--ink-2);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  padding: 21px 0;
  line-height: 1.6;
  text-align: left;
}

.faq-acc .accordion-title::before {
  content: "+";
  font-size: 24px;
  line-height: 1;
  font-weight: 400;
  color: var(--gold-dark);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 18px;
  flex-shrink: 0;
  order: -1;
  transition: transform .24s ease-out;
}

.faq-acc .accordion-title::after {
  display: none;
}

.faq-acc .accordion-item.is-active > .accordion-title::before {
  content: "×";
  transform: rotate(180deg);
  background: var(--gold);
  color: var(--ink);
}

.faq-acc .accordion-content {
  background: var(--white);
  color: var(--gray);
  border: 0;
  padding: 0 0 22px 42px;
  font-size: 15px;
  line-height: 1.9;
}

/* ========== 动画 ========== */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s ease-out, transform .5s ease-out;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ========== 响应式 ========== */
@media screen and (max-width: 1100px) {
  .container {
    padding: 0 22px;
  }
  .mast-copy h1 {
    font-size: 40px;
  }
  .hero-frame {
    width: 270px;
  }
  .strip-list {
    grid-template-columns: repeat(2, 1fr);
  }
  .strip-item {
    border-bottom: 1px solid var(--border);
    padding: 20px 16px 20px 0;
  }
  .footer-grid {
    grid-template-columns: 1.2fr .7fr .7fr 160px;
    gap: 32px;
  }
}

@media screen and (max-width: 899px) {
  .site-header .main-nav {
    display: none;
  }
  .mobile-tab {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    height: calc(60px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--ink);
    border-top: 1px solid rgba(255, 255, 255, .08);
  }
  .mobile-tab .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: rgba(244, 242, 237, .5);
    font-size: 11px;
    position: relative;
    transition: var(--ease);
  }
  .mobile-tab .tab-item i {
    font-size: 17px;
  }
  .mobile-tab .tab-item.active {
    color: var(--gold-light);
  }
  .mobile-tab .tab-item.active::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 2px;
    background: var(--gold);
    border-radius: 0 0 999px 999px;
  }
  body {
    padding-bottom: 60px;
  }
  .hero-inner {
    padding: 72px 0 72px;
  }
  .hero-grid {
    display: flex;
    gap: 34px;
  }
  .mast-copy {
    padding-right: 0;
  }
  .hero-visual {
    max-width: 250px;
  }
  .hero-arrow {
    right: -14px;
    width: 50px;
    height: 50px;
  }
  .sec-block,
  .faq-sec {
    padding: 62px 0;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 34px;
  }
  .cta-inner {
    padding: 66px 0;
  }
  .cta-actions {
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .safe-grid {
    gap: 28px;
  }
  .safe-point {
    padding-left: 18px;
  }
}

@media screen and (max-width: 767px) {
  .container {
    padding: 0 18px;
  }
  .site-header {
    height: 64px;
  }
  .header-inner {
    height: 64px;
  }
  .b-logo {
    font-size: 20px;
  }
  .b-sub {
    font-size: 11px;
    padding: 2px 9px;
  }
  .magazine-hero .hero-bg {
    opacity: .4;
    background-position: 72% center;
  }
  .mast-copy h1 {
    font-size: 31px;
    line-height: 1.3;
  }
  .mast-lead {
    font-size: 15px;
  }
  .mast-actions .btn {
    width: 100%;
  }
  .hero-visual {
    width: 220px;
    margin: 0 auto;
  }
  .hero-arrow {
    display: none;
  }
  .hero-caption {
    font-size: 12px;
    bottom: 8px;
    left: 8px;
    right: 8px;
  }
  .strip-list {
    grid-template-columns: 1fr 1fr;
  }
  .strip-item {
    margin-right: 12px;
    padding: 18px 12px 18px 0;
  }
  .top-stories .fc-media {
    aspect-ratio: 16 / 9;
  }
  .right-stack {
    margin-top: 24px;
  }
  .insight-row {
    grid-template-columns: 46px 1fr;
    gap: 10px;
    padding: 22px 0;
  }
  .insight-no {
    font-size: 24px;
  }
  .insight-meta {
    grid-column: 2;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .insight-row:hover {
    padding-left: 4px;
    padding-right: 4px;
  }
  .safe-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .safe-point {
    padding: 20px 14px 22px 18px;
    border-top: 1px solid rgba(181, 137, 76, .18);
    border-bottom: 1px solid rgba(181, 137, 76, .18);
  }
  .safe-point + .safe-point {
    border-left: 0;
  }
  .cta-copy h2 {
    font-size: 24px;
  }
  .cta-inner {
    padding: 56px 0;
  }
  .faq-card {
    padding: 8px 16px;
  }
  .faq-acc .accordion-title {
    font-size: 15px;
    padding: 20px 0;
  }
  .footer-copy {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-bottom: 30px;
  }
}

@media screen and (max-width: 520px) {
  .mast-copy h1 {
    font-size: 28px;
  }
  .strip-list {
    grid-template-columns: 1fr 1fr;
  }
  .strip-item strong {
    font-size: 12px;
  }
  .sec-heading h2 {
    font-size: 24px;
  }
  .fc-body {
    padding: 20px 18px 22px;
  }
  .fc-body h3 {
    font-size: 18px;
  }
  .btn-xl,
  .btn-lg {
    width: 100%;
  }
  .hero-frame {
    width: 220px;
  }
  .read-list-area .list-title-row {
    flex-direction: column;
    gap: 8px;
  }
}

@media (prefers-color-scheme: dark) {
  .site-header,
  .site-footer,
  .mobile-tab {
    background: #0C0E0F;
  }
}