/* roulang page: index */
:root {
  --brand: #2563A0;
  --brand-dark: #1d4e7f;
  --brand-soft: #eef4fa;
  --gold: #B8860B;
  --gold-soft: #f6f0df;
  --teal: #0F766E;
  --bg: #F7F8FA;
  --surface: #FFFFFF;
  --ink: #22303e;
  --muted: #64717e;
  --line: #e4e8ed;
  --deep: #14222E;
  --navy: #1C2B3A;
  --shadow-sm: 0 2px 8px rgba(28, 43, 58, .04);
  --shadow-md: 0 16px 40px rgba(28, 43, 58, .08);
  --radius: 2px;
  --container: 1280px;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", system-ui, -apple-system, sans-serif;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
}
*, *::before, *::after {
  box-sizing: border-box;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: var(--brand);
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}
a:hover {
  color: var(--brand-dark);
}
a:focus-visible,
button:focus-visible,
.accordion-button:focus-visible {
  outline: 2px solid rgba(37, 99, 160, .5);
  outline-offset: 2px;
}
::selection {
  background: #F0B400;
  color: #16212b;
}
.container-site {
  width: 100%;
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}
.section-space {
  padding: clamp(72px, 9vw, 120px) 0;
}
.section-narrow {
  padding-top: 0;
}
main {
  overflow: hidden;
}

/* 按钮 */
.btn-base, .btn-brand, .btn-outline-brand, .btn-white, .btn-outline-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius);
  font-weight: 600;
  line-height: 1;
  padding: 14px 24px;
  border: 1px solid transparent;
  transition: border-color .22s ease, background .22s ease, color .22s ease, box-shadow .22s ease, transform .22s ease;
  text-align: center;
}
.btn-brand {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  box-shadow: 0 4px 14px rgba(37, 99, 160, .18);
}
.btn-brand:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
  box-shadow: 0 8px 24px rgba(37, 99, 160, .24);
  transform: translateY(-1px);
}
.btn-outline-brand {
  background: #fff;
  color: var(--brand);
  border-color: var(--brand);
}
.btn-outline-brand:hover {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.btn-white {
  background: #fff;
  color: var(--brand-dark);
  border-color: #fff;
}
.btn-white:hover {
  background: rgba(255, 255, 255, .88);
  color: var(--brand-dark);
  transform: translateY(-1px);
}
.btn-outline-white {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .72);
}
.btn-outline-white:hover {
  background: rgba(255, 255, 255, .1);
  color: #fff;
  border-color: #fff;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--brand);
  border-bottom: 1px solid transparent;
}
.text-link i {
  font-size: 12px;
  transition: transform .2s ease;
}
.text-link:hover {
  color: var(--brand-dark);
  border-bottom-color: rgba(37, 99, 160, .3);
}
.text-link:hover i {
  transform: translateX(3px);
}

/* 顶部信息条 */
.topbar {
  background: var(--navy);
  min-height: 34px;
  color: rgba(255, 255, 255, .84);
  font-size: 12px;
}
.topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 34px;
  gap: 16px;
}
.topbar-left,
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.topbar-domain {
  font-family: SFMono-Regular, ui-monospace, Menlo, Consolas, monospace;
  color: rgba(255, 255, 255, .92);
  letter-spacing: .4px;
}
.official-mini {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 2px;
  padding: 1px 8px;
  font-size: 11px;
  color: #fff;
}
.official-mini i {
  color: #f3d06a;
  font-size: 10px;
}
.topbar-link {
  color: rgba(255, 255, 255, .78);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.topbar-link:hover {
  color: #fff;
}
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, .2);
}
.topbar-divider {
  width: 1px;
  height: 10px;
  background: rgba(255, 255, 255, .2);
}

/* 主导航 */
.app-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 4px 20px rgba(22, 33, 43, .03);
  transition: box-shadow .2s ease;
}
.app-header.is-struck {
  box-shadow: 0 8px 28px rgba(22, 33, 43, .08);
}
.header-navbar {
  min-height: 72px;
  padding: 0;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-right: 26px;
  padding: 14px 0;
}
.brand-stamp {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--brand-dark);
  border: 1px solid var(--gold);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(184, 134, 11, .35);
  background: #fff;
}
.brand-text {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--ink);
  white-space: nowrap;
}
.brand-text:hover {
  color: var(--brand);
}
.header-navlist {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 0;
  margin-bottom: 0;
  flex-wrap: wrap;
  list-style: none;
}
.header-navlist .nav-link {
  display: inline-flex;
  align-items: center;
  color: #465563;
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  padding: 10px 12px;
  position: relative;
  border-radius: 0;
  white-space: nowrap;
}
.header-navlist .nav-link::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .24s ease;
}
.header-navlist .nav-link:hover {
  color: var(--brand-dark);
}
.header-navlist .nav-link:hover::after,
.header-navlist .nav-link.active::after {
  transform: scaleX(1);
}
.header-navlist .nav-link.active {
  color: var(--brand-dark);
  font-weight: 600;
}
.nav-side {
  flex-shrink: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-enter {
  padding: 10px 18px;
  font-size: 14px;
}
.navbar-toggler {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 11px;
  transition: border-color .2s ease, background .2s ease;
}
.navbar-toggler:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.navbar-toggler:focus {
  box-shadow: none;
  outline-offset: 2px;
}
.navbar-toggler i {
  color: var(--brand);
}

/* Hero */
.hero-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 76px 0 64px;
  background: var(--bg);
}
.hero-background {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(94deg, rgba(247, 248, 250, .97) 0%, rgba(247, 248, 250, .94) 46%, rgba(238, 244, 250, .78) 100%);
}
.hero-main {
  position: relative;
  z-index: 2;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--brand);
  background: rgba(37, 99, 160, .08);
  padding: 5px 12px;
  border-radius: 2px;
  margin-bottom: 22px;
}
.hero-eyebrow i {
  color: var(--gold);
}
.hero-title {
  margin-bottom: 18px;
  font-size: clamp(30px, 4.6vw, 52px);
  line-height: 1.28;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.4px;
}
.hero-title .brand-strong {
  color: var(--brand-dark);
}
.hero-title .gold-line {
  display: inline-block;
  position: relative;
  color: var(--brand);
}
.hero-title .gold-line::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 7px;
  background: rgba(184, 134, 11, .18);
  z-index: -1;
}
.hero-subtitle {
  font-size: 17px;
  line-height: 1.8;
  color: #48596a;
  max-width: 580px;
  margin-bottom: 26px;
}
.hero-keywords {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 30px;
}
.hero-keywords span {
  color: var(--muted);
  font-weight: 500;
  position: relative;
}
.hero-keywords span + span::before {
  content: "/";
  position: absolute;
  left: -9px;
  color: var(--gold);
  font-weight: 700;
}
.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 34px;
}
.hero-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  color: #4b5b69;
  font-size: 14px;
}
.hero-points li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.hero-points i {
  color: var(--teal);
}
.hero-card {
  background: #fff;
  border-top: 2px solid var(--gold);
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  border-radius: 2px;
  padding: 16px;
  margin: 18px 0 0;
}
.hero-card-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand);
  letter-spacing: .5px;
  background: var(--brand-soft);
  border-radius: 2px;
  padding: 4px 9px;
  margin-bottom: 12px;
}
.hero-card-img {
  border-radius: 2px;
  overflow: hidden;
  background: #EFF2F6;
  aspect-ratio: 16 / 10;
}
.hero-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-card-text {
  font-size: 14px;
  color: #596a78;
  padding: 14px 2px 4px;
  margin: 0;
}
.hero-metrics {
  margin-top: 60px;
}
.hero-metric {
  background: rgba(255, 255, 255, .94);
  border-top: 2px solid var(--brand);
  border-radius: 2px;
  padding: 20px 20px 18px;
  box-shadow: var(--shadow-sm);
  height: 100%;
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.hero-metric-num {
  display: block;
  font-size: 28px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--brand-dark);
  font-family: "Barlow Condensed", "DIN Alternate", "Helvetica Neue", sans-serif;
  letter-spacing: .5px;
}
.hero-metric-label {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

/* 板块标题 */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 38px;
}
.section-rule {
  width: 36px;
  height: 3px;
  background: var(--brand);
  margin-bottom: 14px;
}
.section-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 8px;
}
.section-heading {
  margin: 0 0 8px;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.4;
  font-weight: 700;
  color: var(--ink);
}
.section-desc {
  color: var(--muted);
  font-size: 15px;
  max-width: 720px;
  margin-bottom: 0;
}

/* 分类入口 */
.category-entry-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  padding-top: 34px;
}
.entry-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 15px 16px;
  min-height: 66px;
  box-shadow: 0 1px 2px rgba(28, 43, 58, .03);
  color: var(--ink);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.entry-card i {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  background: var(--brand-soft);
  border-radius: 50%;
  font-size: 14px;
}
.entry-card strong {
  font-size: 15px;
  font-weight: 600;
  display: block;
  line-height: 1.3;
}
.entry-card small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}
.entry-card:hover {
  border-color: rgba(37, 99, 160, .42);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
  color: var(--ink);
}

/* 品牌实力卡 */
.brand-section {
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.feature-card {
  height: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 2px solid var(--brand);
  border-radius: 2px;
  padding: 26px 24px 24px;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.feature-card:hover {
  border-color: rgba(37, 99, 160, .4);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(28, 43, 58, .07);
}
.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 2px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 19px;
  margin-bottom: 17px;
}
.feature-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--ink);
}
.feature-text {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
  margin: 0;
}

/* 资讯区 */
.news-section {
  background: var(--bg);
}
.news-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 24px;
  row-gap: 28px;
}
.news-card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 2px solid var(--brand);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 15px;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.news-card:hover {
  border-color: rgba(37, 99, 160, .38);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(28, 43, 58, .06);
}
.news-thumb {
  border-radius: 2px;
  overflow: hidden;
  background: #EFF2F6;
  aspect-ratio: 16 / 9;
  margin-bottom: 14px;
}
.news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.news-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.news-time {
  font-size: 12px;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.news-tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  color: var(--brand);
  border: 1px solid rgba(37, 99, 160, .45);
  border-radius: 2px;
  padding: 2px 7px;
  white-space: nowrap;
  line-height: 1.6;
}
.news-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 8px;
}
.news-title a {
  color: var(--ink);
  display: block;
}
.news-title a:hover {
  color: var(--brand);
}
.news-summary {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 14px;
  flex: 1 0 auto;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-more {
  font-size: 13px;
}
.empty-news {
  border: 1px dashed #b6c8da;
  border-radius: 2px;
  background: #fbfcfd;
  color: var(--muted);
  padding: 46px 26px;
  text-align: center;
  font-size: 15px;
  line-height: 1.75;
}

/* 图文板块 */
.split-block {
  background: #fff;
}
.split-block:nth-of-type(even) {
  background: var(--bg);
}
.split-index-row {
  margin-bottom: 26px;
}
.split-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 48px;
  padding: 0 12px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  border-radius: 2px;
  border-left: 2px solid var(--gold);
}
.split-heading {
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 700;
  line-height: 1.45;
  margin: 0;
  color: var(--ink);
}
.split-lead {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.85;
  margin-bottom: 22px;
}
.check-list {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
}
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #eef1f5;
  font-size: 14px;
  color: #344553;
}
.check-list i {
  color: var(--teal);
  padding-top: 4px;
  font-size: 13px;
}
.split-visual {
  border: 1px solid var(--line);
  border-radius: 2px;
  background: #EFF2F6;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  position: relative;
}
.split-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.visual-a {
  aspect-ratio: 5 / 4;
}
.visual-b {
  aspect-ratio: 4 / 3;
}
.visual-badge {
  position: absolute;
  left: 14px;
  bottom: 14px;
  background: rgba(255, 255, 255, .94);
  border-top: 2px solid var(--gold);
  border-radius: 2px;
  font-size: 12px;
  color: var(--brand-dark);
  font-weight: 600;
  padding: 6px 10px;
}

/* 信任证据 */
.trust-section {
  background: var(--bg);
}
.trust-center {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 46px;
}
.trust-center .section-rule {
  margin-left: auto;
  margin-right: auto;
}
.trust-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-bottom: 44px;
}
.trust-stat {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 28px 20px 22px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.trust-stat-num {
  display: block;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--brand-dark);
  font-family: "Barlow Condensed", "DIN Alternate", system-ui, sans-serif;
  letter-spacing: 1px;
}
.trust-stat-text {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}
.trust-badges {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.trust-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 9px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 22px 10px;
  color: var(--ink);
  font-size: 13px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.trust-badge i {
  font-size: 20px;
  color: var(--brand);
}
.trust-badge:hover {
  border-color: rgba(37, 99, 160, .5);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(28, 43, 58, .06);
}

/* FAQ */
.faq-section {
  background: #fff;
}
.faq-accordion .accordion-item {
  border: 0;
  background: transparent;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
}
.faq-accordion .accordion-item:first-child {
  border-top: 1px solid var(--line);
}
.faq-accordion .accordion-button {
  background: #fff;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  padding: 19px 44px 19px 18px;
  box-shadow: none;
  border-left: 2px solid transparent;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.faq-accordion .accordion-button::after {
  background-size: 14px;
}
.faq-accordion .accordion-button:not(.collapsed) {
  background: #f7fafd;
  color: var(--brand-dark);
  border-left-color: var(--brand);
}
.faq-accordion .accordion-button:hover {
  background: #f8fafc;
}
.faq-accordion .accordion-button:focus {
  box-shadow: none;
}
.faq-accordion .accordion-body {
  padding: 4px 12px 20px 20px;
  color: #435362;
  font-size: 15px;
  line-height: 1.85;
}

/* 最终 CTA */
.cta-section {
  background: #eaf1f8;
}
.cta-band {
  background: rgba(37, 99, 160, .08);
  border-radius: 3px;
  border-left: 3px solid var(--gold);
  padding: clamp(34px, 5vw, 58px);
}
.cta-band h2 {
  font-size: clamp(23px, 3vw, 34px);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 10px;
}
.cta-band p {
  color: #4c5d6b;
  margin: 0;
  font-size: 15px;
}
.cta-button-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  height: 100%;
}
.cta-safe-line {
  margin: 34px auto 0;
  max-width: 860px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.9;
}
.cta-safe-line code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: #F0B400;
  color: #16212b;
  padding: 1px 8px;
  border-radius: 2px;
  font-size: 12px;
  font-weight: 600;
}

/* 页脚 */
.site-footer {
  background: var(--deep);
  color: rgba(255, 255, 255, .72);
  padding-top: 62px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr;
  gap: 52px;
  padding-bottom: 44px;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.footer-brand .brand-stamp {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .06), 0 0 0 4px rgba(184, 134, 11, .4);
}
.footer-brand-name {
  font-size: 20px;
  color: #fff;
  font-weight: 700;
}
.footer-about {
  font-size: 14px;
  line-height: 1.85;
  color: rgba(255, 255, 255, .6);
  max-width: 420px;
  margin-bottom: 22px;
}
.footer-mini-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 2px;
  padding: 3px 9px;
  font-size: 12px;
  color: rgba(255, 255, 255, .8);
}
.footer-title {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
  padding-bottom: 10px;
  position: relative;
}
.footer-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 24px;
  height: 2px;
  background: var(--gold);
}
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links li {
  margin-bottom: 11px;
}
.footer-links a {
  color: rgba(255, 255, 255, .68);
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.footer-links a:hover {
  color: #fff;
}
.footer-links a i {
  font-size: 9px;
  color: var(--gold);
}
.footer-info-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-info-list li {
  padding: 7px 0;
  font-size: 14px;
  color: rgba(255, 255, 255, .68);
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.footer-info-list i {
  color: var(--gold);
  font-size: 12px;
  width: 16px;
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 18px 0 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, .48);
}
.footer-bottom-inner {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.footer-bottom-code {
  font-family: SFMono-Regular, ui-monospace, Menlo, monospace;
  color: rgba(255, 255, 255, .75);
}

/* 浮层入口 */
.float-guide {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1040;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  color: var(--brand);
  border: 1px solid rgba(37, 99, 160, .4);
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 12px 30px rgba(22, 33, 43, .14);
  transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.float-guide .float-status {
  color: var(--teal);
  font-size: 8px;
}
.float-guide:hover {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(37, 99, 160, .26);
}
.float-guide:hover .float-status {
  color: #7fe0c9;
}

@media (max-width: 1199.98px) {
  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .trust-badges {
    grid-template-columns: repeat(3, 1fr);
  }
  .category-entry-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 991.98px) {
  .header-navlist {
    align-items: stretch;
    padding: 12px 0 6px;
  }
  .header-navlist .nav-link {
    display: block;
    padding: 12px 4px;
    border-bottom: 1px solid #f0f3f6;
    border-radius: 0;
  }
  .header-navlist .nav-link::after {
    display: none;
  }
  .header-navlist .nav-link.active {
    color: var(--brand-dark);
    border-left: 3px solid var(--brand);
    padding-left: 8px;
  }
  .header-navbar {
    min-height: 64px;
  }
  .nav-collapse-wrap {
    background: #fff;
    border-top: 1px solid var(--line);
    margin: 0 -24px;
    padding: 0 24px 12px;
  }
  .nav-side {
    display: none;
  }
  .hero-section {
    padding-top: 52px;
  }
  .hero-card {
    margin-top: 44px;
  }
}
@media (max-width: 767.98px) {
  .trust-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .trust-badges {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .cta-band {
    text-align: center;
  }
  .cta-button-wrap {
    justify-content: center;
    margin-top: 20px;
  }
  .hero-metrics {
    margin-top: 38px;
  }
  .hero-metric {
    margin-bottom: 12px;
  }
  .split-num {
    min-width: 40px;
    height: 40px;
    font-size: 15px;
  }
}
@media (max-width: 575.98px) {
  .container-site {
    padding-left: 18px;
    padding-right: 18px;
  }
  .topbar-domain,
  .topbar .official-mini {
    display: none;
  }
  .topbar-inner {
    justify-content: space-between;
  }
  .topbar-link span {
    display: none;
  }
  .category-entry-row {
    grid-template-columns: 1fr;
  }
  .news-grid {
    grid-template-columns: 1fr;
  }
  .news-thumb {
    display: none;
  }
  .news-card {
    box-shadow: none;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 26px;
  }
}

/* roulang page: article */
:root{
  --brand:#2563A0;
  --brand-deep:#1D4F82;
  --brand-soft:rgba(37,99,160,.08);
  --accent:#B8860B;
  --teal:#0F766E;
  --ink:#1E2A38;
  --muted:#6E7A8A;
  --bg:#F7F8FA;
  --line:#E2E8F0;
  --dark:#1C2B3A;
  --radius:2px;
  --shadow:0 8px 24px rgba(28,43,58,.06);
  --container:1280px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"PingFang SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.75;font-size:16px;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none;transition:color .2s ease,background .2s ease,border-color .2s ease}
a:hover{color:var(--brand-deep)}
ul{list-style:none;padding:0;margin:0}
button,input{font-family:inherit}
.container-site{max-width:var(--container);margin:0 auto;padding-left:24px;padding-right:24px}
.section-pad{padding:clamp(56px,7vw,88px) 0}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.3}
p{margin:0}
.overline-label{display:inline-flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.14em;color:var(--brand);text-transform:uppercase}
.overline-label::before{content:"";width:28px;height:2px;background:var(--accent)}
.fw-num{font-family:"Barlow Condensed","DIN Alternate","Roboto Condensed",sans-serif;letter-spacing:.02em}
/* top utility */
.top-utility{background:var(--dark);color:rgba(255,255,255,.78);font-size:13px;height:38px;transition:height .25s ease,opacity .25s ease;overflow:hidden}
.top-utility-inner{display:flex;align-items:center;justify-content:space-between;height:100%;gap:16px}
.top-left, .top-right{display:flex;align-items:center;gap:14px;min-width:0}
.top-host{font-family:ui-monospace,SFMono-Regular,Consolas,Menlo,monospace;color:rgba(255,255,255,.44);letter-spacing:.03em}
.chip-verified{display:inline-flex;align-items:center;gap:5px;border:1px solid rgba(255,255,255,.22);padding:1px 8px;font-size:12px;color:rgba(255,255,255,.92);border-radius:0;white-space:nowrap}
.chip-verified i{color:#8FD0C8}
.top-right a{color:rgba(255,255,255,.78);font-size:13px;display:inline-flex;align-items:center;gap:6px}
.top-right a:hover{color:#fff}
/* app nav */
.app-header{background:#fff;border-bottom:1px solid var(--line);box-shadow:none;transition:box-shadow .25s ease,min-height .25s ease}
.app-header.scrolled{padding-top:0;box-shadow:0 8px 22px rgba(28,43,58,.08)}
.header-navbar{position:relative;min-height:72px;background:#fff;padding-top:12px;padding-bottom:12px;transition:min-height .25s ease,right .25s ease}
.header-navbar .navbar-toggler{border:0;color:var(--ink);padding:6px 10px;font-size:20px;line-height:1}
.header-navbar .navbar-toggler:focus{box-shadow:0 0 0 2px rgba(37,99,160,.6)}
.nav-collapse-wrap{flex-grow:0;margin-left:28px}
.header-navlist{gap:2px}
.header-navlist .nav-item{margin:0}
.header-navlist .nav-link{font-weight:600;font-size:15px;color:var(--ink);padding:10px 14px;margin:0 2px;border-bottom:3px solid transparent;display:block;transition:color .2s ease,border-color .2s ease}
.header-navlist .nav-link:hover{color:var(--brand);border-bottom-color:rgba(37,99,160,.18)}
.header-navlist .nav-link.active{color:var(--brand);border-bottom-color:var(--brand)}
.brand-lockup{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand-stamp{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%;font-size:12px;font-weight:800;letter-spacing:.1em;color:#fff;background:var(--brand);flex:0 0 auto}
.top-utility .brand-stamp{background:transparent}
.brand-text{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:.04em;white-space:nowrap}
.brand-text small{display:block;font-size:12px;font-weight:500;color:var(--muted);line-height:1.2;letter-spacing:.4em;margin-top:1px}
.nav-side{margin-left:16px;flex:0 0 auto}
.btn{border-radius:0;font-weight:700;font-size:15px;padding:.68rem 1.35rem;transition:background .2s ease,color .2s ease,border .2s ease,transform .2s ease,box-shadow .2s ease;border:1px solid transparent}
.btn-brand{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 6px 14px rgba(37,99,160,.16);position:relative}
.btn-brand:hover{background:var(--brand-deep);color:#fff;border-color:var(--brand-deep);box-shadow:0 10px 22px rgba(37,99,160,.22);transform:translateY(-1px)}
.btn-brand::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--accent);transition:width .25s ease}
.btn-brand:hover::after{width:100%}
.btn-outline{background:transparent;border-color:#D3DCE6;color:var(--ink)}
.btn-outline:hover{border-color:var(--brand);color:var(--brand);background:rgba(37,99,160,.04);transform:translateY(-1px)}
.btn-light-outline{background:#fff;border-color:var(--brand);color:var(--brand)}
.btn-light-outline:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn-neutral{background:#111;color:#fff}
/* Hero */
.cat-hero{position:relative;background:#fff;overflow:hidden;border-bottom:1px solid var(--line);padding:clamp(50px,7vw,90px) 0 clamp(40px,5vw,62px)}
.cat-hero::before{content:"";position:absolute;inset:0;background:url('/assets/images/backpic/back-3.webp') no-repeat right top/cover;opacity:.09;pointer-events:none}
.cat-hero .overline-label{color:var(--accent)}
.cat-breadcrumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--muted);margin-bottom:28px}
.cat-breadcrumb a{color:var(--muted)}
.cat-breadcrumb a:hover{color:var(--brand)}
.cat-breadcrumb i{font-size:11px;color:#C0CBD6}
.hero-tagline{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0 34px}
.hero-tagline span{display:inline-flex;align-items:center;gap:7px;background:#F4F7FA;border:1px solid #E7EDF3;padding:6px 14px;color:var(--ink);font-size:14px}
.hero-tagline span i{color:var(--teal)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px;flex-wrap:wrap}
.section-head h2{font-size:clamp(26px,3vw,38px);letter-spacing:-.02em;margin-top:8px}
.section-head h2 span{color:var(--brand)}
.section-head .head-line{flex:0 0 46px;height:3px;background:var(--brand);margin-bottom:11px}
.section-head p{max-width:680px;color:var(--muted);font-size:15px}
/* verification grid */
.card-plain{background:#fff;border:1px solid var(--line);border-top:3px solid var(--brand);border-radius:var(--radius);box-shadow:0 4px 18px rgba(28,43,58,.04);padding:30px 28px;height:100%;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;position:relative}
.card-plain:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#9DC0DE}
.card-headerbox{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:22px}
.card-index{font-family:"Barlow Condensed","DIN Alternate",sans-serif;font-size:44px;color:var(--brand);font-weight:600;line-height:.8;opacity:.15;letter-spacing:-.04em}
.card-plain .ico{width:50px;height:50px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);background:#F4F7FA;border-radius:50%;color:var(--brand);font-size:20px}
.card-plain h3{font-size:21px;margin-bottom:10px}
.card-plain p{font-size:15px;color:var(--muted)}
.verify-grid .col-lg-6{margin-bottom:24px}
/* help band */
.help-band{background:#fff;border-bottom:1px solid var(--line);padding:clamp(48px,6vw,76px) 0}
.help-split{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,5vw,76px);align-items:center}
.help-visual{position:relative;border-radius:2px;overflow:hidden;background:#EEF2F6;line-height:0}
.help-visual img{width:100%;height:360px;object-fit:cover}
.help-visual .pic-note{position:absolute;left:14px;bottom:14px;background:rgba(255,255,255,.92);font-size:13px;padding:6px 12px;color:#33526E;border:0}
.help-list{margin-top:28px}
.help-list li{display:flex;gap:13px;padding:11px 0;border-bottom:1px dashed var(--line);font-size:15px;color:#3D4A5C}
.help-list li:last-child{border-bottom:0}
.help-list li i{color:var(--teal);margin-top:7px;font-size:12px}
/* mini stat block */
.mini-stat{background:var(--brand-soft);border-top:1px solid #E7EDF3;border-bottom:1px solid #E7EDF3;padding:30px 0}
.mini-stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:left}
.mini-stat-num{font-size:42px;line-height:1;color:var(--brand);font-weight:600}
.mini-stat-label{font-size:14px;color:var(--muted);margin-top:10px;letter-spacing:.05em}
/* visual clue section */
.clue-banner{position:relative;padding:clamp(44px,6vw,70px) 0;background:#F7F8FA;border-bottom:1px solid var(--line)}
.clue-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:34px}
.clue-item{display:flex;gap:18px;background:#fff;border:1px solid var(--line);padding:20px 20px 20px 14px;border-left:3px solid var(--accent);border-radius:2px}
.clue-item .num{font-size:30px;color:var(--accent);font-weight:700;min-width:44px;line-height:1}
.clue-item h4{font-size:18px;margin-bottom:6px}
.clue-item p{color:var(--muted);font-size:14px}
/* faq */
.faq-section{background:#fff;padding:clamp(56px,7vw,92px) 0}
.accordion-cat .accordion-item{border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;background:transparent}
.accordion-cat .accordion-button{background:#fff;color:var(--ink);font-size:17px;font-weight:600;padding:1.15rem .2rem;box-shadow:none;border:0}
.accordion-cat .accordion-button:hover{background:rgba(37,99,160,.04)}
.accordion-cat .accordion-button:not(.collapsed){background:rgba(37,99,160,.05);border-left:3px solid var(--brand);color:var(--brand)}
.accordion-cat .accordion-button:focus{box-shadow:none;outline:2px solid rgba(37,99,160,.28);outline-offset:2px}
.accordion-cat .accordion-button::after{background-image:none;content:"\f078";font-family:"Font Awesome 6 Free";font-weight:900;width:auto;height:auto;color:var(--brand)}
.accordion-cat .accordion-button:not(.collapsed)::after{transform:rotate(180deg);background-image:none;color:var(--accent)}
.accordion-cat .accordion-body{padding:0 .4rem 1.4rem;color:var(--muted);font-size:15px;line-height:1.9}
/* bottom cta */
.category-outro{background:var(--dark);color:rgba(255,255,255,.9);padding:clamp(60px,7vw,90px) 0;text-align:center}
.category-outro .large-title{font-size:clamp(26px,4vw,40px);font-weight:700;color:#fff;line-height:1.4}
.category-outro .large-title span{color:#C9DCF0}
.category-outro p{max-width:680px;margin:18px auto 30px;color:rgba(255,255,255,.68)}
.outro-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.btn-back-home{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-back-home:hover{background:#9E7608;border-color:#9E7608;color:#fff;transform:translateY(-2px)}
.btn-manual{display:inline-flex;align-items:center;gap:8px;color:#fff;border:1px solid rgba(255,255,255,.3);padding:.68rem 1.35rem;font-weight:600;font-size:15px;border-radius:0;background:transparent}
.btn-manual:hover{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.54)}
.safety-line{background:#F4F7FA;padding:20px 24px;border:1px solid var(--line);border-radius:2px;margin-top:34px;color:#526172;font-size:14px;display:inline-flex;gap:10px;text-align:left;max-width:820px}
.safety-line b{color:var(--ink);font-weight:600}
/* footer */
.site-footer{background:#14222E;color:rgba(255,255,255,.72);padding:clamp(60px,7vw,84px) 0 32px;position:relative}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:56px;padding-bottom:48px;margin-bottom:28px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.footer-brand-name{color:#fff;font-size:22px;font-weight:800;letter-spacing:.04em}
.footer-about{font-size:14px;line-height:1.9;color:rgba(255,255,255,.58);max-width:340px}
.footer-mini-chip{display:inline-flex;align-items:center;gap:7px;margin-top:18px;border:1px solid rgba(255,255,255,.2);font-size:13px;color:#DDE6EE;padding:4px 12px}
.footer-mini-chip i{color:#8FD0C8}
.footer-title{font-size:15px;color:#fff;font-weight:700;margin-bottom:20px;letter-spacing:.05em;padding-bottom:10px;position:relative}
.footer-title::after{content:"";position:absolute;left:0;bottom:0;width:28px;height:2px;background:var(--accent)}
.footer-links li,.footer-info-list li{margin-bottom:11px;font-size:14px;display:flex;gap:8px;align-items:flex-start}
.footer-links a{color:rgba(255,255,255,.6);display:inline-flex;gap:7px}
.footer-links a i{font-size:11px;margin-top:6px;color:var(--accent)}
.footer-links a:hover{color:#fff}
.footer-info-list i{color:#F0B400;margin-top:6px;font-size:12px;width:14px;margin-right:5px}
.footer-bottom{display:flex;flex-direction:column;gap:8px}
.footer-bottom-inner{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.5)}
.footer-bottom-code{font-family:ui-monospace,SFMono-Regular,Consolas,Menlo,monospace;color:#E3C95F;background:rgba(240,180,0,.1);padding:2px 8px}
@media (max-width:1199px){
  .nav-collapse-wrap{margin-left:8px}
  .header-navlist{flex-direction:column;padding-top:14px}
  .header-navlist .nav-link{display:inline-block}
  .nav-side{margin:10px 0 8px}
}
@media (max-width:991.98px){
  .header-navbar{min-height:64px}
  .top-utility{height:auto;padding:8px 0}
  .top-right{display:none}
  .brand-text{font-size:19px}
  .brand-stamp{width:38px;height:38px}
  .help-split{grid-template-columns:1fr}
  .mini-stat-row{grid-template-columns:1fr 1fr}
  .clue-grid{grid-template-columns:1fr}
}
@media (max-width:767.98px){
  .container-site{padding-left:18px;padding-right:18px}
  .hero-tagline span{width:100%}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:575.98px){
  .top-left{flex-wrap:wrap;gap:8px}
  .top-host{display:none}
  .top-utility-inner{justify-content:center}
  .mini-stat-row{grid-template-columns:1fr;gap:20px}
  .card-plain{padding:24px 18px}
  .section-head{display:block}
  .section-head .head-line{margin:0 0 12px}
  .outro-actions{flex-direction:column;align-items:center}
  .btn-manual{width:100%;justify-content:center;display:inline-flex}
  .btn{width:100%;text-align:center}
  .footer-grid{grid-template-columns:1fr;gap:40px}
  .footer-about{max-width:none}
  .footer-bottom-inner{flex-direction:column}
}

/* roulang page: category1 */
:root{
  --brand-blue:#2563A0;
  --brand-ink:#173A5E;
  --accent-gold:#B8860B;
  --teal-jade:#0F766E;
  --body-bg:#F7F8FA;
  --surface:#FFFFFF;
  --hero-bg:#F7F8FA;
  --brand-soft:#EFF4F9;
  --border-soft:#E3E8EF;
  --dark-navy:#14222E;
  --info-bar-bg:#1C2B3A;
  --text-main:#1F2937;
  --text-muted:#626E7E;
  --text-light:#9AA7B4;
  --radius:2px;
  --shadow-card:0 2px 10px rgba(28,43,58,0.05);
  --shadow-lift:0 8px 22px rgba(28,43,58,0.09);
  --section-space:clamp(3.2rem,8vw,5.5rem);
  --container-max:1280px;
  --font-num:"Barlow Condensed","DIN Alternate","Arial Narrow",sans-serif;
  --font-base:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--body-bg);
  color:var(--text-main);
  font-family:var(--font-base);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand-ink);text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container-site{max-width:var(--container-max);margin:0 auto;padding:0 24px;width:100%}
.content-section{padding:var(--section-space) 0}
.bg-white-card{background:#fff}
.text-muted{color:var(--text-muted)}
.btn{border-radius:var(--radius)}
.btn-brand{
  background:var(--brand-blue);
  border:1px solid var(--brand-blue);
  color:#fff !important;
  padding:.68rem 1.3rem;
  font-weight:500;
  position:relative;
  border-radius:var(--radius);
  transition:background .2s ease,box-shadow .2s ease,transform .2s ease;
  box-shadow:0 2px 6px rgba(37,99,160,.15);
}
.btn-brand i{font-size:.8rem;margin-left:.25rem}
.btn-brand:hover{
  background:#1C4E83;
  border-color:#1C4E83;
  color:#fff;
  box-shadow:0 6px 14px rgba(37,99,160,.22);
  transform:translateY(-1px);
}
.btn-brand::after{
  content:"";
  position:absolute;
  left:0;right:auto;bottom:-1px;
  height:2px;width:100%;
  background:rgba(255,255,255,.9);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .22s ease;
}
.btn-brand:hover::after{transform:scaleX(1)}
.btn-outline-brand{
  background:#fff;
  border:1px solid var(--brand-blue);
  color:var(--brand-blue) !important;
  padding:.68rem 1.3rem;
  border-radius:var(--radius);
  font-weight:500;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.btn-outline-brand:hover{
  background:var(--brand-soft);
  color:var(--brand-ink) !important;
  transform:translateY(-1px);
  border-color:var(--brand-ink);
}
.section-kicker{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent-gold);
  font-weight:600;
  margin-bottom:10px;
}
.section-kicker::before{
  content:"";
  width:36px;height:2px;
  background:var(--brand-blue);
  display:inline-block;
}
.section-title{
  font-size:clamp(1.6rem,3.2vw,2.2rem);
  font-weight:700;
  color:var(--brand-ink);
  line-height:1.35;
  margin:0 0 .5rem;
}
.section-desc{
  color:var(--text-muted);
  max-width:780px;
  margin:0 0 2rem;
  font-size:1rem;
}
.section-head{margin-bottom:2.2rem}

/* ---- top info strip ---- */
.top-info-bar{
  background:var(--info-bar-bg);
  color:rgba(255,255,255,.85);
  font-size:12.5px;
  height:34px;
  display:flex;
  align-items:center;
  transition:height .2s ease,opacity .2s ease;
  overflow:hidden;
}
.top-info-inner{
  display:flex;
  align-items:center;
  width:100%;
  gap:16px;
}
.top-info-domain{
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  letter-spacing:.03em;
  color:rgba(255,255,255,.98);
  font-size:12px;
  background:rgba(255,255,255,.06);
  padding:.12rem .55rem;
  border-radius:2px;
  white-space:nowrap;
}
.top-info-divider{
  width:1px;height:14px;
  background:rgba(255,255,255,.2);
}
.top-info-badge{
  border:1px solid rgba(255,255,255,.35);
  padding:.05rem .65rem;
  font-size:12px;
  color:#fff;
  border-radius:1px;
  letter-spacing:.04em;
  white-space:nowrap;
}
.top-info-badge i{color:#9AD0C2;font-size:.72rem;margin-right:.3rem}
.top-info-actions{margin-left:auto;display:flex;gap:14px;font-size:12.5px}
.top-info-actions a{color:rgba(255,255,255,.8);transition:color .2s;white-space:nowrap}
.top-info-actions a:hover{color:#fff}

/* ---- header / nav ---- */
.app-header{
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-soft);
  position:sticky;
  top:0;
  z-index:1040;
  transition:box-shadow .25s ease;
}
.app-header.scrolled .top-info-bar{height:0;opacity:0;pointer-events:none}
.app-header.scrolled{box-shadow:0 6px 18px rgba(20,34,46,.07)}
.header-navbar{
  padding:.85rem 0;
  min-height:72px;
  align-items:center;
  transition:min-height .25s ease;
}
.app-header.scrolled .header-navbar{min-height:60px}
.brand-lockup{
  display:flex;
  align-items:center;
  gap:10px;
  margin-right:20px;
  color:var(--brand-ink);
  flex-shrink:0;
}
.brand-stamp{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;height:38px;
  border:2px solid var(--accent-gold);
  border-radius:50%;
  color:var(--accent-gold);
  font-size:11px;
  font-weight:600;
  letter-spacing:.04em;
  background:#fffdf7;
  line-height:1.1;
  text-align:center;
  padding:3px;
  flex:0 0 auto;
}
.brand-stamp i{display:block;font-size:7px;margin-top:1px}
.brand-text{
  font-size:1.35rem;
  font-weight:700;
  letter-spacing:.01em;
  color:var(--brand-ink);
}
.brand-text b{color:var(--brand-blue);font-weight:700}
.navbar-toggler{
  border:0;
  color:var(--brand-blue);
  font-size:1.3rem;
  box-shadow:none !important;
  padding:.3rem .5rem;
  margin-left:auto;
}
.nav-collapse-wrap{flex-grow:0}
.header-navlist{
  display:flex;
  align-items:center;
  gap:2px;
  margin-left:auto;
  margin-right:auto;
}
.header-navlist .nav-link{
  color:var(--text-muted);
  font-weight:500;
  padding:.65rem 1rem;
  font-size:15px;
  position:relative;
  transition:color .2s ease;
  white-space:nowrap;
  border-radius:2px;
}
.header-navlist .nav-link:hover{
  color:var(--brand-blue);
  background:transparent;
}
.header-navlist .nav-link::after{
  content:"";
  position:absolute;
  left:1rem;right:1rem;bottom:.2rem;
  height:2px;
  background:var(--brand-blue);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .22s ease;
}
.header-navlist .nav-link:hover::after{transform:scaleX(1)}
.header-navlist .nav-link.active{
  color:var(--brand-blue);
  font-weight:600;
}
.header-navlist .nav-link.active::after{
  transform:scaleX(1);
}
.nav-side{
  margin-left:8px;
  flex-shrink:0;
  display:flex;
}
.nav-enter.btn-brand{padding:.55rem 1.05rem;font-size:14px}
.mobile-nav-cta{
  display:none;
}

/* ---- hero ---- */
.cat-hero{
  position:relative;
  background:var(--hero-bg);
  padding:60px 0 66px;
  border-bottom:1px solid var(--border-soft);
  overflow:hidden;
}
.cat-hero-bg-pattern{
  position:absolute;
  inset:0;
  background-image:url('/assets/images/backpic/back-2.webp');
  background-position:60% 20%;
  background-size:cover;
  opacity:.13;
  pointer-events:none;
}
.cat-hero-content{position:relative}
.breadcrumb-custom{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--text-muted);
  background:#fff;
  border:1px solid var(--border-soft);
  padding:.25rem .85rem;
  border-radius:20px;
  margin-bottom:22px;
}
.breadcrumb-custom i{font-size:.7rem;color:var(--text-light)}
.breadcrumb-custom a{color:var(--text-muted);transition:color .2s}
.breadcrumb-custom a:hover{color:var(--brand-blue)}
.breadcrumb-cur{color:var(--brand-blue);font-weight:500}
.hero-badge-title{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--brand-blue);
  color:var(--brand-blue);
  background:#fff;
  padding:.25rem .9rem;
  font-size:13px;
  font-weight:600;
  letter-spacing:.05em;
  margin-bottom:18px;
  border-radius:2px;
}
.hero-badge-title i{color:var(--accent-gold)}
.cat-hero h1{
  font-size:clamp(2rem,4vw,2.9rem);
  font-weight:700;
  color:var(--brand-ink);
  line-height:1.25;
  max-width:880px;
  margin-bottom:16px;
  letter-spacing:-.015em;
}
.cat-hero h1 .text-brand{color:var(--brand-blue)}
.hero-lede{
  font-size:clamp(1rem,1.5vw,1.1rem);
  color:var(--text-muted);
  max-width:700px;
  line-height:1.8;
  margin-bottom:28px;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}
.hero-fast-note{
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border:1px solid var(--border-soft);
  border-left:3px solid var(--brand-blue);
  padding:.75rem 1.1rem;
  margin-top:28px;
  max-width:620px;
  font-size:.88rem;
  color:var(--text-muted);
  box-shadow:0 4px 10px rgba(20,34,46,.02);
  border-radius:0 2px 2px 0;
}
.hero-fast-note strong{color:var(--brand-ink);font-weight:600}

/* receipt cards */
.verification-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
}
.verify-card{
  background:#fff;
  border:1px solid var(--border-soft);
  border-top:2px solid var(--brand-blue);
  border-radius:2px;
  padding:24px 20px 22px;
  min-height:270px;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
  box-shadow:0 1px 3px rgba(28,43,58,.02);
  position:relative;
}
.verify-card:hover{
  transform:translateY(-3px);
  border-color:rgba(37,99,160,.38);
  box-shadow:var(--shadow-lift);
}
.verify-num{
  font-family:var(--font-num);
  font-size:2.6rem;
  line-height:1;
  color:rgba(37,99,160,.22);
  font-weight:500;
  letter-spacing:.01em;
}
.verify-icon{
  width:42px;height:42px;
  color:var(--brand-blue);
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--brand-soft);
  font-size:1.15rem;
  margin:4px 0 14px;
}
.verify-card h3{
  font-size:1.04rem;
  font-weight:600;
  color:var(--brand-ink);
  margin-bottom:8px;
}
.verify-card p{
  font-size:.89rem;
  color:var(--text-muted);
  line-height:1.7;
  margin:0;
}

/* split image / list block */
.split-info{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:48px;
  align-items:center;
}
.visual-card{
  position:relative;
  border-radius:2px;
  overflow:hidden;
  box-shadow:0 8px 26px rgba(20,34,46,.08);
}
.visual-card img{width:100%;object-fit:cover;aspect-ratio:16/10}
.visual-card-tag{
  position:absolute;
  bottom:16px;left:16px;
  background:rgba(20,34,46,.78);
  color:#fff;
  font-size:.82rem;
  padding:.45rem 1rem;
  border-radius:20px;
  backdrop-filter:blur(4px);
  letter-spacing:.02em;
}
.service-list-block{
  display:flex;
  flex-direction:column;
  border-top:1px solid var(--border-soft);
}
.svc-caption{
  font-size:12px;
  font-weight:600;
  color:var(--accent-gold);
  letter-spacing:.08em;
  margin-bottom:1.4rem;
  text-transform:uppercase;
}
.svc-point{
  display:flex;
  gap:16px;
  align-items:flex-start;
  padding:1rem 0;
  border-bottom:1px solid #EDF1F5;
}
.svc-point i{
  color:var(--brand-blue);
  width:24px;
  margin-top:.2rem;
  font-size:1.05rem;
  text-align:center;
}
.svc-point:nth-child(3) i{color:var(--accent-gold)}
.svc-point strong{
  display:block;
  font-weight:600;
  color:var(--brand-ink);
  margin-bottom:.2rem;
  font-size:.97rem;
}
.svc-point span{color:var(--text-muted);font-size:.88rem;line-height:1.6}
.svc-point p{margin:0}

/* spec table */
.spec-wrap{
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius:2px;
  box-shadow:0 2px 8px rgba(28,43,58,.02);
  overflow:hidden;
}
.spec-row{
  display:grid;
  grid-template-columns:236px 1fr;
  border-bottom:1px solid #eef1f4;
}
.spec-row:last-child{border-bottom:0}
.spec-label{
  background:#FAFBFC;
  padding:22px 24px;
  color:var(--brand-ink);
  font-weight:600;
  font-size:.95rem;
  border-right:1px solid #eef1f4;
  display:flex;
  align-items:center;
  gap:10px;
}
.spec-label i{
  font-size:1.1rem;
  color:var(--brand-blue);
}
.spec-value{
  padding:18px 24px;
  color:var(--text-muted);
  font-size:.92rem;
  display:flex;
  align-items:center;
}
.spec-value .value-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid var(--border-soft);
  border-left:3px solid var(--accent-gold);
  padding:.2rem .75rem;
  font-size:.84rem;
  color:var(--text-main);
  background:#fff;
  border-radius:0 2px 2px 0;
}
.spec-value code{
  font-family:"SFMono-Regular",Consolas,monospace;
  background:#EFF2F6;
  padding:.1rem .55rem;
  border-radius:2px;
  color:var(--brand-ink);
  font-size:.88rem;
}

/* sub note */
.sub-note{
  background:rgba(37,99,160,.04);
  border-left:3px solid var(--brand-blue);
  padding:.9rem 1.3rem;
  color:var(--text-muted);
  font-size:.92rem;
  line-height:1.8;
  margin-top:18px;
  border-radius:0 2px 2px 0;
}

/* trust row */
.trust-row{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
}
.trust-chip{
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius:2px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:.9rem 1.1rem;
  color:var(--text-muted);
  font-size:.85rem;
  font-weight:500;
  transition:border-color .2s ease,transform .2s ease;
}
.trust-chip i{color:var(--brand-blue);font-size:1.1rem}
.trust-chip:hover{border-color:var(--brand-blue);transform:translateY(-2px)}

/* faq */
.faq-panel{
  background:#fff;
  border:1px solid var(--border-soft);
}
.qa-accordion .accordion-item{
  border:0;
  border-bottom:1px solid #E9EDF1;
  background:transparent;
  border-radius:0;
}
.qa-accordion .accordion-item:last-child{border-bottom:0}
.qa-accordion .accordion-button{
  background:transparent;
  box-shadow:none;
  color:var(--brand-ink);
  font-size:1rem;
  font-weight:600;
  padding:1.05rem 1.3rem;
  position:relative;
}
.qa-accordion .accordion-button::after{
  font-family:"Font Awesome 6 Free";
  content:"\f078";
  font-weight:900;
  background:none;
  width:auto;height:auto;
  color:var(--brand-blue);
  font-size:.78rem;
  transition:transform .25s ease;
}
.qa-accordion .accordion-button:not(.collapsed)::after{transform:rotate(180deg)}
.qa-accordion .accordion-button:not(.collapsed){background:rgba(37,99,160,.05);color:var(--brand-blue)}
.qa-accordion .accordion-button:hover{background:rgba(37,99,160,.03)}
.qa-accordion .accordion-body{
  padding:.5rem 1.3rem 1.2rem;
  color:var(--text-muted);
  font-size:.93rem;
  line-height:1.85;
  background:transparent;
}
.qa-accordion .accordion-item:has(.accordion-button:not(.collapsed)){
  border-left:2px solid var(--brand-blue);
}
.faq-tip{
  font-size:.92rem;
  color:var(--text-muted);
  background:rgba(184,134,11,.05);
  border:1px solid rgba(184,134,11,.18);
  padding:1rem 1.3rem;
  border-radius:2px;
  margin-top:1.5rem;
}
.faq-tip i{color:var(--accent-gold)}

/* end band */
.end-support-band{
  background:rgba(37,99,160,.08);
  border:1px solid rgba(37,99,160,.1);
  border-radius:2px;
  padding:2.6rem 2rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  flex-wrap:wrap;
}
.end-support-title{
  font-size:clamp(1.3rem,2.5vw,1.7rem);
  font-weight:700;
  color:var(--brand-ink);
  line-height:1.45;
  margin-bottom:.3rem;
}
.end-support-title span{color:var(--brand-blue)}
.end-support-sub{color:var(--text-muted);font-size:.92rem}
.end-support-actions{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}
.muted-gold-note{
  font-size:.85rem;
  color:var(--accent-gold);
  display:inline-flex;
  align-items:center;
  gap:8px;
}

/* footer */
.site-footer{
  background:var(--dark-navy);
  color:rgba(255,255,255,.7);
  padding-top:70px;
  position:relative;
}
.site-footer::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  background:rgba(37,99,160,.55);
}
.footer-grid{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1.1fr);
  gap:50px;
  padding-bottom:46px;
}
.footer-brand{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:1rem;
}
.footer-brand .brand-stamp{
  background:rgba(20,34,46,.6);
}
.footer-brand-name{
  color:#fff;
  font-size:1.25rem;
  font-weight:700;
}
.footer-about{
  color:rgba(255,255,255,.62);
  font-size:.88rem;
  line-height:1.8;
  max-width:400px;
  margin-bottom:1rem;
}
.footer-mini-chip{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  border:1px solid rgba(255,255,255,.24);
  padding:.32rem .85rem;
  font-size:.78rem;
  color:#fff;
  border-radius:1px;
  background:rgba(255,255,255,.04);
}
.footer-mini-chip i{color:#7CC0B2}
.footer-title{
  color:#fff;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:1.1rem;
  padding-bottom:.55rem;
  border-bottom:1px solid rgba(255,255,255,.15);
}
.footer-links,
.footer-info-list{
  list-style:none;
  padding:0;
  margin:0;
}
.footer-links li{margin-bottom:.45rem}
.footer-links a{
  color:rgba(255,255,255,.72);
  font-size:.9rem;
  transition:color .2s ease,padding-left .2s ease;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.footer-links a i{font-size:.65rem;color:var(--accent-gold)}
.footer-links a:hover{color:#fff;padding-left:3px}
.footer-info-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:rgba(255,255,255,.66);
  font-size:.85rem;
  margin-bottom:.6rem;
}
.footer-info-list i{color:rgba(255,255,255,.34);margin-top:.36rem;font-size:.8rem}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  padding:1.2rem 0 1.5rem;
}
.footer-bottom-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 20px;
  color:rgba(255,255,255,.44);
  font-size:.78rem;
}
.footer-bottom-code{
  font-family:"SFMono-Regular",Consolas,monospace;
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.9);
  padding:.08rem .55rem;
  border-radius:2px;
  font-size:.78rem;
}
@media (max-width:1199.98px){
  .verification-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust-row{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:991.98px){
  .header-navlist{margin:12px 0 0}
  .header-navlist .nav-link::after{left:.4rem;right:auto;width:24px}
  .header-navlist .nav-link{padding:.55rem .4rem}
  .nav-side{display:none}
  .mobile-nav-cta{display:block}
  .navbar-collapse{
    padding-top:1rem;
    padding-bottom:.6rem;
    border-top:1px solid var(--border-soft);
    margin-top:.7rem;
  }
  .split-info{grid-template-columns:1fr;gap:32px}
  .trust-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px 28px}
}
@media (max-width:767.98px){
  .container-site{padding:0 20px}
  .top-info-inner{overflow:hidden;white-space:nowrap}
  .top-info-domain,
  .top-info-divider,
  .top-info-badge{display:none}
  .top-info-actions{margin-left:0}
  .top-info-actions a:first-child{display:inline-flex}
  .cat-hero{padding:44px 0 52px}
  .breadcrumb-custom{margin-bottom:16px}
  .hero-actions .btn{width:100%}
  .hero-actions .btn-brand{justify-content:center;display:inline-flex}
  .verification-grid{grid-template-columns:1fr}
  .verify-card{min-height:0}
  .spec-row{grid-template-columns:1fr}
  .spec-label{border-right:0;border-bottom:1px solid #eef1f4;padding:14px 20px}
  .spec-value{padding:14px 20px}
  .trust-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust-chip{padding:.7rem .8rem;font-size:.8rem}
  .footer-grid{grid-template-columns:1fr;gap:34px}
  .end-support-band{padding:2rem 1.2rem}
  .end-support-actions{width:100%}
  .footer-bottom-inner{flex-direction:column;align-items:flex-start}
}
@media (max-width:520px){
  .trust-row{grid-template-columns:1fr}
  .brand-stamp{width:34px;height:34px;font-size:10px}
  .brand-text{font-size:1.12rem}
  .header-navbar{padding:.7rem 0}
  .container-site{padding:0 16px}
}

/* roulang page: category2 */
:root{
  --primary:#2563A0;
  --primary-dark:#1B4A78;
  --primary-soft:#EEF4FA;
  --primary-deep:#E4EDF5;
  --accent:#B8860B;
  --accent-soft:#FBF3DF;
  --teal:#0F766E;
  --ink:#1F2A36;
  --ink-deep:#14222E;
  --text-muted:#5E6B7A;
  --bg-soft:#F7F8FA;
  --bg-body:#FFFFFF;
  --border:#E3E8EF;
  --border-soft:#EDF0F4;
  --footer-bg:#14222E;
  --footer-text:rgba(255,255,255,.84);
  --footer-muted:rgba(255,255,255,.6);
  --radius:4px;
  --shadow-sm:0 2px 8px rgba(28,43,58,.04);
  --shadow-md:0 10px 30px rgba(28,43,58,.07);
  --transition:all .25s ease;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"PingFang SC","Microsoft YaHei","Segoe UI",-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--bg-body);
  color:var(--ink);
  font-size:15px;
  line-height:1.75;
  letter-spacing:.01em;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:inherit}
button:focus,a:focus,input:focus,textarea:focus{
  outline:2px solid rgba(37,99,160,.4);
  outline-offset:2px;
}
.container-site{max-width:1280px;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}
.section{padding:clamp(72px,8vw,118px) 0}
.bg-soft{background:var(--bg-soft)}
.bg-white{background:#fff}

/* Buttons */
.btn{border-radius:0;font-weight:600;transition:var(--transition);letter-spacing:.02em}
.btn-brand{
  background:var(--primary);color:#fff;border:1px solid var(--primary);
  padding:.68rem 1.8rem;position:relative;
}
.btn-brand:hover,.btn-brand:focus{
  background:var(--primary-dark);color:#fff;border-color:var(--primary-dark);
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(37,99,160,.18);
}
.btn-outline-brand{
  background:#fff;color:var(--primary);border:1px solid var(--primary);
  padding:.68rem 1.8rem;
}
.btn-outline-brand:hover,.btn-outline-brand:focus{
  background:rgba(37,99,160,.06);color:var(--primary-dark);border-color:var(--primary-dark);
  transform:translateY(-2px);
}
.btn-outline-light{
  background:transparent;color:#fff;border:1px solid rgba(255,255,255,.72);
  padding:.68rem 1.8rem;
}
.btn-outline-light:hover{
  background:rgba(255,255,255,.12);color:#fff;border-color:#fff;
}
.btn-warm{
  background:var(--accent);border-color:var(--accent);color:#fff;
}
.btn-warm:hover{
  background:#996F09;border-color:#996F09;color:#fff;
}
.text-btn{
  display:inline-flex;align-items:center;gap:.45rem;
  color:var(--primary);font-weight:600;
  padding:.4rem 0;border-bottom:2px solid transparent;
}
.text-btn i{transition:transform .2s ease}
.text-btn:hover{color:var(--primary-dark)}
.text-btn:hover i{transform:translateX(4px)}

/* Header */
.app-header{
  background:#fff;
  border-bottom:1px solid var(--border-soft);
  z-index:1080;
  transition:box-shadow .3s ease;
}
.app-header.is-fixed{
  box-shadow:0 10px 30px rgba(20,34,46,.06);
}
.navbar{padding-top:.9rem;padding-bottom:.9rem}
.brand-lockup{
  display:flex;align-items:center;
  column-gap:.7rem;
  color:var(--ink);
  margin-right:1.4rem;
}
.brand-lockup:hover{
  color:var(--ink);
}
.brand-stamp{
  width:42px;height:42px;flex:0 0 42px;
  display:flex;align-items:center;justify-content:center;
  border:1.6px solid var(--primary);
  border-radius:50%;
  color:var(--primary);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  background:#fff;
  box-shadow:inset 0 0 0 3px #fff, 0 0 0 1px rgba(37,99,160,.15);
}
.brand-stamp.dark{
  border-color:rgba(255,255,255,.8);
  color:#fff;
  box-shadow:inset 0 0 0 3px var(--footer-bg),0 0 0 1px rgba(255,255,255,.2);
}
.brand-text{
  font-size:1.1rem;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--ink);
  white-space:nowrap;
}
.header-navlist{
  align-items:center;
  gap:.15rem;
  margin:0;
}
.header-navlist .nav-link{
  color:#33424F;
  font-weight:500;
  padding:.6rem .95rem !important;
  position:relative;
}
.header-navlist .nav-link::after{
  content:"";
  position:absolute;
  left:50%;bottom:2px;
  transform:translateX(-50%);
  width:0;
  height:2px;
  background:var(--primary);
  transition:width .25s ease;
}
.header-navlist .nav-link:hover::after,.header-navlist .nav-link.active::after{
  width:24px;
}
.header-navlist .nav-link.active{
  color:var(--primary);
  font-weight:600;
}
.nav-side{
  display:flex;
  align-items:center;
  gap:.7rem;
}
.nav-enter{
  padding:.45rem 1.45rem !important;
  font-weight:600;
  white-space:nowrap;
}
.navbar-toggler{
  border:0;
  color:var(--primary);
  font-size:1.35rem;
  padding:.35rem;
  box-shadow:none !important;
}
.navbar-toggler:hover{
  color:var(--primary-dark);
}

/* Page hero */
.category-hero{
  position:relative;
  background:url('/assets/images/backpic/back-2.webp') no-repeat center center / cover;
  padding:clamp(68px,9vw,120px) 0 clamp(64px,8vw,110px);
  overflow:hidden;
}
.category-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(11,28,42,.92) 0%, rgba(11,28,42,.78) 54%, rgba(20,34,46,.52) 100%);
}
.category-hero .container-site{
  position:relative;
  z-index:2;
}
.crumbs{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  font-size:.82rem;
  color:rgba(255,255,255,.7);
  margin-bottom:1.4rem;
}
.crumbs a{
  color:rgba(255,255,255,.78);
  transition:color .2s;
}
.crumbs a:hover{
  color:#fff;text-decoration:underline;
}
.hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);
  padding:.3rem 1rem;
  font-size:.8rem;
  color:#EAF2F9;
  letter-spacing:.08em;
  margin-bottom:1.2rem;
  border-radius:2px;
}
.category-hero h1{
  color:#fff;
  font-size:clamp(2rem,4vw,3rem);
  font-weight:700;
  line-height:1.25;
  margin-bottom:1.1rem;
  max-width:800px;
}
.category-hero p{
  color:rgba(255,255,255,.82);
  max-width:650px;
  font-size:1.04rem;
  margin-bottom:1.9rem;
  line-height:1.85;
}
.hero-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
}

/* Section intro */
.section-overline{
  display:flex;
  align-items:center;
  gap:.65rem;
  color:var(--primary);
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  margin-bottom:.7rem;
}
.section-title{
  font-size:clamp(1.7rem,3vw,2.35rem);
  font-weight:700;
  line-height:1.3;
  color:var(--ink);
  margin-bottom:1rem;
}
.section-lead{
  max-width:760px;
  color:var(--text-muted);
  margin-bottom:2rem;
  font-size:1.01rem;
}
.guide-card{
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius:var(--radius);
  padding:1.8rem 1.55rem;
  box-shadow:var(--shadow-sm);
  position:relative;
  transition:var(--transition);
  height:100%;
}
.guide-card::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  background:var(--primary);
  opacity:0;
  transition:opacity .25s;
}
.guide-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-color:rgba(37,99,160,.35);
}
.guide-card:hover::before{
  opacity:1;
}
.guide-icon{
  width:44px;height:44px;
  display:inline-flex;
  align-items:center;justify-content:center;
  color:var(--primary);
  border:1px solid var(--border);
  background:var(--primary-soft);
  margin-bottom:1.2rem;
  font-size:1rem;
  border-radius:2px;
}
.guide-card h3{
  font-size:1.05rem;
  font-weight:700;
  color:var(--ink);
  margin-bottom:.6rem;
}
.guide-card p{
  font-size:.92rem;
  color:var(--text-muted);
  margin:0;
  line-height:1.8;
}

/* Timeline */
.timeline-section{
  position:relative;
  background:#fff;
}
.timeline-header{
  text-align:center;
  margin-bottom:2.5rem;
}
.timeline-header .section-lead{
  margin-left:auto;
  margin-right:auto;
}
.timeline-thread{
  position:relative;
  max-width:1080px;
  margin:0 auto;
  padding:30px 0 10px;
}
.timeline-thread::before{
  content:"";
  position:absolute;
  top:10px;
  bottom:40px;
  left:50%;
  transform:translateX(-50%);
  width:2px;
  background:repeating-linear-gradient(to bottom, #D4DEE7 0 7px, transparent 7px 14px);
}
.timeline-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);
  align-items:center;
  column-gap:.6rem;
  row-gap:1.2rem;
  margin-bottom:3rem;
}
.timeline-row:last-child{
  margin-bottom:1.5rem;
}
.timeline-mid{
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
  z-index:2;
}
.timeline-dot{
  width:56px;height:56px;
  border-radius:50%;
  background:#fff;
  border:1.6px solid var(--primary);
  color:var(--primary);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:.95rem;
  box-shadow:0 0 0 6px #fff, 0 0 0 7px rgba(37,99,160,.25);
}
.timeline-copy{
  background:#fff;
  padding:1.8rem 1.5rem;
  border:1px solid var(--border-soft);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  transition:var(--transition);
}
.timeline-copy:hover{
  border-color:rgba(37,99,160,.35);
  box-shadow:var(--shadow-md);
}
.timeline-copy .step-chip{
  display:inline-block;
  font-size:.78rem;
  color:var(--primary);
  font-weight:600;
  letter-spacing:.12em;
  border-bottom:2px solid var(--accent);
  padding-bottom:.2rem;
  margin-bottom:1rem;
}
.timeline-copy h3{
  font-size:1.3rem;
  font-weight:700;
  margin-bottom:.8rem;
}
.timeline-copy p{
  color:var(--text-muted);
  font-size:.95rem;
  margin-bottom:1.05rem;
}
.check-list{
  list-style:none;
  padding:0;
  margin:0;
}
.check-list li{
  display:flex;
  gap:.55rem;
  align-items:flex-start;
  font-size:.9rem;
  color:#394752;
  padding:.28rem 0;
}
.check-list li i{
  color:var(--teal);
  line-height:1.5;
  margin-top:.18rem;
  font-size:.85rem;
}
.timeline-figure{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--border-soft);
  box-shadow:var(--shadow-sm);
  background:#F4F6F8;
  aspect-ratio:4/3;
}
.timeline-figure img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s ease;
}
.timeline-figure:hover img{
  transform:scale(1.02);
}
.timeline-row--reverse .timeline-figure{order:1}
.timeline-row--reverse .timeline-mid{order:2}
.timeline-row--reverse .timeline-copy{order:3}

/* Glossary table */
.glossary-wrap{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
}
.glossary-item{
  display:grid;
  grid-template-columns:170px minmax(0,1fr);
  border-bottom:1px solid var(--border-soft);
}
.glossary-item:last-child{border-bottom:none}
.glossary-label{
  background:#F4F7FB;
  padding:1.1rem 1.3rem;
  font-weight:600;
  color:var(--primary-dark);
  border-right:1px solid var(--border-soft);
  display:flex;
  align-items:flex-start;
  gap:.5rem;
}
.glossary-label i{
  color:var(--accent);
  line-height:1.7;
  font-size:.82rem;
  margin-top:.2rem;
}
.glossary-note{
  padding:1.1rem 1.3rem;
  color:#43515E;
  font-size:.93rem;
}
.glossary-note .sub-col{
  color:#79838f;
  display:block;
  font-size:.84rem;
  margin-top:.2rem;
}

/* Tips block */
.side-panel{
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius:var(--radius);
  padding:2rem 1.8rem;
  box-shadow:var(--shadow-sm);
  height:100%;
}
.side-panel .minor-title{
  font-size:.78rem;
  color:var(--accent);
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:1rem;
}
.side-panel h3{
  font-size:1.35rem;
  font-weight:700;
  line-height:1.4;
  margin-bottom:.6rem;
}
.side-panel p{
  color:var(--text-muted);
  font-size:.95rem;
  margin-bottom:1.2rem;
}
.tip-list{
  display:grid;
  gap:.62rem;
}
.tip-list .tip-item{
  display:flex;
  align-items:flex-start;
  gap:.72rem;
  padding:.7rem .8rem;
  background:var(--bg-soft);
  border-left:2px solid var(--primary);
  border-radius:1px;
  font-size:.9rem;
}
.tip-item i{
  color:var(--primary);
  margin-top:.3rem;
  font-size:.8rem;
}
.tip-item div strong{
  font-weight:600;
  display:block;
  margin-bottom:.15rem;
  color:var(--ink);
}
.tip-item div span{
  color:var(--text-muted);
  font-size:.85rem;
}

/* Accordion */
.accordion-item{
  border:0;
  border-bottom:1px solid var(--border-soft);
  border-radius:0 !important;
  background:transparent;
}
.accordion-item:first-child{
  border-top:1px solid var(--border-soft);
}
.accordion-button{
  box-shadow:none;
  border-radius:0 !important;
  background:#fff;
  color:var(--ink);
  font-weight:600;
  padding:1.1rem .2rem;
  font-size:1rem;
  transition:var(--transition);
}
.accordion-button:not(.collapsed){
  color:var(--primary);
  background:var(--primary-soft);
  box-shadow:none;
}
.accordion-button:focus{
  box-shadow:none;
  border-color:transparent;
}
.accordion-button::after{
  background-image:none;
  content:"＋";
  font-family:inherit;
  font-weight:400;
  color:var(--primary);
  width:1.1rem;
  height:1.1rem;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .2s ease;
}
.accordion-button:not(.collapsed)::after{
  content:"－";
  transform:none;
}
.accordion-body{
  color:var(--text-muted);
  padding:0 .2rem 1.4rem;
  line-height:1.85;
  font-size:.93rem;
  max-width:860px;
}

/* CTA band */
.cta-band{
  background:var(--accent-soft);
  border-top:2px solid var(--accent);
  border-bottom:2px solid var(--accent);
}
.cta-flex{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1.6rem;
}
.cta-flex h2{
  font-size:clamp(1.45rem,2.5vw,2.05rem);
  font-weight:700;
  margin-bottom:.6rem;
}
.cta-flex p{
  color:var(--text-muted);
  margin:0;
}
.cta-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.75rem;
}

/* Back-to-top */
.backtop-line{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:2.2rem 0 1rem;
  border-bottom:1px solid rgba(255,255,255,.12);
  margin-bottom:2.2rem;
}
.backtop-line p{
  margin:0;
  color:var(--footer-muted);
  font-size:.9rem;
}
.qlink-soft{
  color:#D8A934;
  font-size:.83rem;
}
.qlink-soft i{margin-right:.3rem}

/* Footer */
.site-footer{
  background:var(--footer-bg);
  color:var(--footer-text);
  padding-top:4rem;
}
.footer-grid{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,.7fr) minmax(0,1fr);
  gap:2.4rem;
  padding-bottom:2.5rem;
}
.footer-brand{
  display:flex;
  align-items:center;
  gap:.8rem;
  margin-bottom:1rem;
}
.footer-brand-name{
  font-size:1.06rem;
  font-weight:700;
  color:#fff;
}
.footer-about{
  color:var(--footer-muted);
  font-size:.9rem;
  max-width:400px;
  margin-bottom:1rem;
}
.footer-mini-chip{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  border:1px solid rgba(255,255,255,.25);
  border-radius:2px;
  padding:.3rem .8rem;
  color:#E3ECF5;
  font-size:.77rem;
  letter-spacing:.08em;
}
.footer-mini-chip i{
  color:#57CFB7;
}
.footer-title{
  color:#fff;
  font-weight:600;
  font-size:.95rem;
  margin-bottom:1rem;
}
.footer-links{
  list-style:none;
  padding:0;
  margin:0;
}
.footer-links li{
  margin-bottom:.5rem;
}
.footer-links a{
  color:var(--footer-text);
  font-size:.89rem;
  transition:all .2s;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
}
.footer-links a i{
  color:var(--footer-muted);
  font-size:.72rem;
  transition:transform .2s;
}
.footer-links a:hover{
  color:#fff;
}
.footer-links a:hover i{
  color:var(--accent);
  transform:translateX(3px);
}
.footer-info-list{
  list-style:none;
  padding:0;
  margin:0;
}
.footer-info-list li{
  color:var(--footer-muted);
  display:flex;
  gap:.6rem;
  align-items:flex-start;
  font-size:.9rem;
  margin-bottom:.75rem;
}
.footer-info-list li i{
  color:#57CFB7;
  font-size:.78rem;
  margin-top:.42rem;
}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.14);
}
.footer-bottom-inner{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:.5rem;
  max-width:1280px;
  margin:0 auto;
  padding:1.05rem 24px;
  color:var(--footer-muted);
  font-size:.83rem;
}
.footer-bottom-code{
  font-family:"Consolas","Courier New",monospace;
  color:rgba(255,255,255,.6);
}

/* Floating fixed CTA */
.float-cta{
  position:fixed;
  right:22px;bottom:22px;
  z-index:1060;
  display:flex;
  align-items:center;
  gap:.5rem;
  background:#fff;
  color:var(--primary);
  border:1px solid rgba(37,99,160,.25);
  padding:.6rem 1.15rem;
  border-radius:999px;
  font-size:.9rem;
  font-weight:600;
  box-shadow:0 8px 26px rgba(20,34,46,.11);
  transition:var(--transition);
}
.float-cta .pulse-dot{
  width:8px;height:8px;border-radius:50%;
  background:#2EB39A;
  position:relative;
}
.float-cta .pulse-dot::after{
  content:"";
  position:absolute;
  inset:-4px;
  border:1px solid #2EB39A;
  border-radius:50%;
  opacity:.65;
}
.float-cta:hover{
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
  transform:translateY(-2px);
}
.float-cta .small-text{
  font-size:.7rem;
  display:block;
  font-weight:400;
  color:var(--text-muted);
}
.float-cta:hover .small-text{
  color:rgba(255,255,255,.75);
}

/* responsive */
@media (max-width: 991.98px){
  .header-navlist{
    padding:1rem 0 0;
  }
  .header-navlist .nav-link{
    padding:.6rem .2rem !important;
  }
  .header-navlist .nav-link::after{
    display:none;
  }
  .header-navlist .nav-link.active{
    color:var(--primary);
  }
  .nav-side{
    display:flex;
    padding-top:.8rem;
    padding-bottom:.8rem;
  }
  .footer-grid{
    grid-template-columns:1fr;
    gap:1.8rem;
  }
  .glossary-item{
    grid-template-columns:1fr;
  }
  .glossary-label{
    border-right:0;
    border-bottom:1px solid var(--border-soft);
    padding:.8rem 1.1rem;
  }
  .category-hero h1{
    font-size:2.1rem;
  }
}
@media (max-width: 767.98px){
  .timeline-row{
    grid-template-columns:1fr;
    position:relative;
    padding-left:1.1rem;
    margin-bottom:2.6rem;
  }
  .timeline-thread::before{
    left:0;
    top:78px;
    bottom:10px;
    transform:none;
  }
  .timeline-row--reverse .timeline-figure,
  .timeline-row--reverse .timeline-mid,
  .timeline-row--reverse .timeline-copy{
    order:auto;
  }
  .timeline-mid{
    position:absolute;
    left:0;top:90px;
    transform:translateX(-50%);
  }
  .timeline-dot{
    width:48px;height:48px;
    font-size:.85rem;
    box-shadow:0 0 0 5px #fff,0 0 0 6px rgba(37,99,160,.22);
  }
  .timeline-copy{
    padding:1.25rem 1.1rem;
  }
  .timeline-figure{
    aspect-ratio:16/10;
  }
  .cta-flex{
    flex-direction:column;
    align-items:flex-start;
  }
  .hero-buttons .btn{
    width:100%;
  }
  .hero-buttons .btn+.btn{
    margin-left:0;
  }
}
@media (max-width: 575.98px){
  .container-site{
    padding-left:18px;
    padding-right:18px;
  }
  .brand-text{
    font-size:1rem;
  }
  .brand-stamp{
    width:38px;
    height:38px;
    flex-basis:38px;
  }
  .category-hero{
    padding:52px 0 60px;
  }
  .category-hero h1{
    font-size:1.7rem;
  }
  .category-hero p{
    font-size:.94rem;
  }
  .nav-enter{
    font-size:.86rem;
    padding:.4rem 1rem !important;
  }
  .footer-bottom-inner{
    padding:1rem 18px;
  }
  .float-cta .meta-cta-label{
    font-size:.84rem;
  }
}

/* roulang page: category3 */
:root {
  --brand: #2563A0;
  --brand-dark: #1D4E80;
  --brand-light: #EAF1F7;
  --accent: #B8860B;
  --teal: #0F766E;
  --ink: #1F2937;
  --muted: #6B7A89;
  --bg: #F7F8FA;
  --card: #FFFFFF;
  --line: #E4E9EE;
  --footer-bg: #14222E;
  --footer-text: #C7D1DB;
  --shadow-sm: 0 2px 8px rgba(28, 43, 58, 0.04);
  --shadow-lg: 0 18px 44px rgba(28, 43, 58, 0.09);
  --radius: 2px;
  --site-max: 1280px;
  --section-space: clamp(72px, 9vw, 120px);
  --font-sans: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
a {
  color: var(--brand);
  text-decoration: none;
}
a:hover {
  color: var(--brand-dark);
}
img {
  max-width: 100%;
  display: block;
}
button,
input,
textarea {
  font-family: inherit;
}
.container-site {
  width: min(100%, var(--site-max));
  margin-inline: auto;
  padding-inline: 24px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: var(--radius);
  border: 1px solid transparent;
  padding: 12px 26px;
  transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
  font-size: 15px;
  line-height: 1.4;
}
.btn:focus,
.btn:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 2px solid rgba(37, 99, 160, .45);
  outline-offset: 2px;
}
.btn-brand {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 8px 18px rgba(37, 99, 160, .14);
}
.btn-brand:hover,
.btn-brand:focus {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 22px rgba(37, 99, 160, .18);
}
.btn-outline-brand {
  background: transparent;
  border-color: var(--brand);
  color: var(--brand);
}
.btn-outline-brand:hover {
  background: var(--brand);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 18px rgba(37, 99, 160, .14);
}
.btn-white {
  background: #fff;
  border-color: #fff;
  color: var(--brand-dark);
}
.btn-white:hover {
  background: var(--brand-light);
  border-color: var(--brand-light);
  color: var(--brand-dark);
  transform: translateY(-2px);
}
.btn-outline-white {
  background: transparent;
  border-color: rgba(255, 255, 255, .85);
  color: #fff;
}
.btn-outline-white:hover {
  background: rgba(255, 255, 255, .12);
  border-color: #fff;
  color: #fff;
}

/* 顶部信息条 */
.top-info-bar {
  background: #1C2B3A;
  min-height: 34px;
  font-size: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.top-info-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 6px;
}
.top-info-left {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, .88);
}
.mini-site-code {
  font-family: "Barlow Condensed", "DIN Alternate", Consolas, monospace;
  letter-spacing: .08em;
  opacity: .84;
}
.official-verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, .35);
  padding: 1px 10px;
  border-radius: 2px;
  color: rgba(255, 255, 255, .92);
  font-size: 11px;
  white-space: nowrap;
}
.top-info-right {
  display: flex;
  align-items: center;
  gap: 18px;
}
.top-info-right a {
  color: rgba(255, 255, 255, .82);
  transition: color .2s ease;
  font-size: 12px;
}
.top-info-right a:hover {
  color: #fff;
}

/* 主导航 */
.app-header {
  background: rgba(255, 255, 255, .98);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 1040;
  backdrop-filter: blur(10px);
}
.header-navbar {
  margin-inline: auto;
  width: min(100%, var(--site-max));
  padding-right: 24px;
  padding-left: 24px;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.brand-stamp {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand);
  border: 2px solid var(--brand);
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .22), 0 6px 14px rgba(37, 99, 160, .22);
}
.brand-text {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .01em;
  white-space: nowrap;
}
.header-navlist {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 38px;
}
.header-navlist .nav-link {
  position: relative;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 500;
  color: #32475B;
  border-radius: 2px;
  transition: color .2s ease, background .2s ease;
  white-space: nowrap;
}
.header-navlist .nav-link:hover {
  color: var(--brand);
  background: rgba(37, 99, 160, .05);
}
.header-navlist .nav-link.active {
  color: var(--brand);
  font-weight: 600;
}
.header-navlist .nav-link.active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 2px;
  background: var(--brand);
}
.nav-collapse-wrap {
  flex: 1 1 auto;
}
.nav-side {
  flex-shrink: 0;
  margin-left: 16px;
}
.nav-enter {
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 14px;
  line-height: 1.4;
}
.navbar-toggler {
  border: none;
  color: var(--ink);
  font-size: 20px;
  padding: 8px 10px;
  margin-left: auto;
  line-height: 1;
}
.navbar-toggler:focus {
  box-shadow: none;
}
@media (max-width: 991.98px) {
  .header-navlist {
    margin-left: 0;
    gap: 4px;
    margin-top: 14px;
  }
  .header-navlist .nav-link {
    padding-inline: 2px;
    border-bottom: 1px solid #edf1f4;
    border-radius: 0;
  }
  .header-navlist .nav-link.active::after {
    left: 0;
    right: auto;
    width: 32px;
  }
  .nav-side {
    width: 100%;
    margin-left: 0;
    margin-top: 12px;
    margin-bottom: 6px;
  }
  .header-navbar {
    min-height: 68px;
  }
}

/* Hero 分区 */
.hero-inner {
  position: relative;
  background-color: #EEF3F8;
  background-image: linear-gradient(100deg, rgba(247, 249, 251, .96) 8%, rgba(247, 249, 251, .78) 55%, rgba(247, 249, 251, .45) 100%), url('/assets/images/backpic/back-2.webp');
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--line);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: 40px;
  padding-block: clamp(60px, 9vw, 100px);
}
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 18px;
  color: var(--brand-dark);
  background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(37, 99, 160, .16);
  border-left: 4px solid var(--accent);
  border-radius: 2px;
  font-size: 13px;
  letter-spacing: .04em;
  font-weight: 600;
  margin-bottom: 24px;
}
.hero-grid h1 {
  font-size: clamp(36px, 4.8vw, 48px);
  font-weight: 700;
  line-height: 1.22;
  color: var(--ink);
  margin-top: 6px;
  margin-bottom: 18px;
  letter-spacing: -.01em;
}
.hero-accent {
  display: block;
  color: var(--brand);
  position: relative;
}
.hero-accent::after {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 0;
  height: 10px;
  width: 78px;
  background: repeating-linear-gradient(90deg, rgba(184, 134, 11, .35) 0 3px, transparent 3px 6px);
  z-index: -1;
}
.hero-lead {
  max-width: 580px;
  color: #43566A;
  font-size: 17px;
  margin-bottom: 34px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.hero-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  color: var(--muted);
  font-size: 13px;
}
.hero-note i {
  color: var(--teal);
}
.hero-visual {
  position: relative;
  text-align: center;
}
.hero-cover-img {
  width: 100%;
  max-width: 520px;
  border-radius: 4px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  background: #F1F4F8;
}
.hero-badge-card {
  position: absolute;
  right: 4%;
  bottom: 6%;
  background: rgba(255, 255, 255, .95);
  border-left: 3px solid var(--accent);
  box-shadow: var(--shadow-lg);
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 2px;
}
@media (max-width: 991.98px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .hero-visual {
    order: -1;
    display: none;
  }
}

/* 通用区块 */
.section-block {
  padding-block: var(--section-space);
}
.section-bg-subtle {
  background: linear-gradient(180deg, rgba(37, 99, 160, .045), rgba(255, 255, 255, 0) 150px);
}
.section-heading {
  max-width: 720px;
  margin-bottom: 46px;
}
.section-heading .line {
  display: block;
  width: 38px;
  height: 3px;
  background: var(--brand);
  margin-bottom: 16px;
  border-radius: 0 3px 3px 0;
}
.section-kicker {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--accent);
  margin-bottom: 10px;
  text-transform: uppercase;
}
.section-heading h2 {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 14px;
  letter-spacing: -.01em;
  line-height: 1.3;
}
.section-heading p {
  font-size: 16px;
  color: #5A6C7C;
  line-height: 1.8;
  margin: 0;
}
.heading-right {
  text-align: left;
}

/* 支持概览小卡 */
.support-info-strip {
  padding-top: calc(var(--section-space) * .6);
  padding-bottom: calc(var(--section-space) * .6);
}
.support-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.support-mini-card {
  background: var(--card);
  padding: 26px 24px 24px;
  border: 1px solid var(--line);
  border-top: 2px solid var(--brand);
  border-radius: 2px;
  box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.support-mini-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(37, 99, 160, .3);
}
.support-mini-icon {
  width: 42px;
  height: 42px;
  border-radius: 2px;
  background: var(--brand-light);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  margin-bottom: 16px;
}
.support-mini-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--ink);
}
.support-mini-card p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}
@media (max-width: 992px) {
  .support-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .support-card-grid {
    grid-template-columns: 1fr;
  }
}

/* 服务条目表 */
.service-table-wrap {
  background: #fff;
}
.service-table-card {
  border: 1px solid var(--line);
  border-radius: 2px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.service-row {
  display: grid;
  grid-template-columns: minmax(190px, 260px) 1fr;
  gap: 28px 44px;
  padding: 36px 42px;
  border-bottom: 1px solid var(--line);
}
.service-row:last-child {
  border-bottom: 0;
}
.service-row:hover {
  background: rgba(37, 99, 160, .018);
}
.service-ref {
  border-left: 2px solid var(--accent);
  padding-left: 16px;
}
.service-num {
  display: inline-block;
  font-family: "Barlow Condensed", "DIN Alternate", sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 6px;
  letter-spacing: .03em;
  line-height: 1;
}
.service-ref h3 {
  font-size: 19px;
  color: var(--ink);
  margin: 2px 0 0;
  font-weight: 700;
}
.service-desc p {
  color: #3E5060;
  font-size: 15px;
  line-height: 1.85;
  margin: 0 0 12px;
}
.service-desc ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.service-desc li {
  position: relative;
  padding-left: 22px;
  color: #526675;
  font-size: 14px;
}
.service-desc li::before {
  content: "\f058";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--brand);
  font-size: 13px;
}
.service-table-note {
  margin-top: 22px;
  padding: 14px 20px;
  background: #F4F7FA;
  border-left: 3px solid var(--accent);
  color: #617180;
  font-size: 13px;
}
@media (max-width: 768px) {
  .service-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 28px 22px;
  }
}

/* 全宽主色 CTA 条 */
.cta-slim-band {
  background: var(--brand);
  color: #fff;
  margin-bottom: calc(var(--section-space) * .6);
}
.cta-slim-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding-block: 48px;
}
.cta-slim-inner h2 {
  font-size: clamp(22px, 2.5vw, 30px);
  margin: 0 0 6px;
  font-weight: 700;
}
.cta-slim-inner p {
  margin: 0;
  color: rgba(255, 255, 255, .86);
}
.cta-slim-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .cta-slim-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .cta-slim-actions .btn {
    flex: 1 1 100%;
  }
}

/* FAQ */
.faq-section {
  background: var(--bg);
}
.faq-accordion {
  max-width: 900px;
  margin: 0 auto;
}
.faq-accordion .accordion-item {
  border: 1px solid var(--line);
  border-radius: 2px;
  background: #fff;
  box-shadow: none;
  margin-bottom: 12px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.faq-accordion .accordion-item:has(.accordion-button:not(.collapsed)) {
  border-left: 3px solid var(--brand);
  box-shadow: var(--shadow-sm);
}
.faq-accordion .accordion-button {
  border-radius: 2px;
  background: #fff;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  padding: 20px 24px;
  box-shadow: none;
  transition: background .2s ease, color .2s ease;
}
.faq-accordion .accordion-button:hover {
  background: rgba(37, 99, 160, .04);
}
.faq-accordion .accordion-button:not(.collapsed) {
  background: rgba(37, 99, 160, .05);
  color: var(--brand);
  font-weight: 700;
  box-shadow: none;
}
.faq-accordion .accordion-button:focus {
  box-shadow: none;
}
.faq-accordion .accordion-button::after {
  background: none;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f078";
  color: var(--brand);
  font-size: 13px;
  width: auto;
  height: auto;
  transition: transform .25s ease;
}
.faq-accordion .accordion-button:not(.collapsed)::after {
  transform: rotate(180deg);
}
.faq-accordion .accordion-body {
  border-top: 1px dashed var(--line);
  padding: 22px 28px;
  color: #4A5B6B;
  font-size: 15px;
  line-height: 1.85;
}

/* 返回首页块 */
.return-callout {
  background: #fff;
  border-top: 1px solid var(--line);
  padding-top: calc(var(--section-space) * .45);
  padding-bottom: calc(var(--section-space) * .55);
}
.return-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.return-copy h2 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--ink);
}
.return-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}
.return-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.return-hint {
  color: var(--accent);
  font-size: 13px;
  max-width: 220px;
  line-height: 1.5;
}
@media (max-width: 768px) {
  .return-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* 页脚 */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  padding-top: 78px;
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--brand), rgba(37, 99, 160, .2));
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr .8fr 1fr;
  gap: 48px;
  margin-bottom: 50px;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.footer-brand .brand-stamp {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(37, 99, 160, .85);
  color: #fff;
  box-shadow: none;
}
.footer-brand-name {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}
.footer-about {
  margin: 0 0 16px;
  color: #A4B4C3;
  font-size: 14px;
  line-height: 1.8;
}
.footer-mini-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #F5F8FA;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
  padding: 5px 12px;
  font-size: 12px;
  border-radius: 20px;
}
.footer-mini-chip i {
  color: #84C3B7;
}
.footer-title {
  font-size: 15px;
  color: #eef4f8;
  font-weight: 700;
  margin-bottom: 18px;
  letter-spacing: .03em;
}
.footer-links,
.footer-info-list {
  padding: 0;
  list-style: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--footer-text);
  font-size: 14px;
  transition: color .2s ease, transform .2s ease;
}
.footer-links a i {
  font-size: 10px;
  color: var(--brand);
}
.footer-links a:hover {
  color: #fff;
  transform: translateX(3px);
}
.footer-info-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--footer-text);
  font-size: 13px;
  line-height: 1.7;
}
.footer-info-list li i {
  color: #788EA3;
  margin-top: 4px;
  min-width: 16px;
  font-size: 13px;
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding-block: 22px;
}
.footer-bottom-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  font-size: 13px;
  color: #8FA3B5;
}
.footer-bottom-code {
  font-family: "Barlow Condensed", "DIN Alternate", Consolas, monospace;
  letter-spacing: .04em;
  border-radius: 2px;
  padding: 1px 6px;
  background: rgba(255, 255, 255, .05);
  color: #c9d6df;
}
@media (max-width: 992px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-grid > div:first-child {
    grid-column: 1 / -1;
  }
}
@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .footer-bottom-inner {
    flex-direction: column;
  }
}

/* 浮动 CTA */
.floating-cta {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 1060;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 22px;
  background: #fff;
  border: 1px solid rgba(37, 99, 160, .34);
  color: var(--brand);
  font-weight: 600;
  font-size: 14px;
  border-radius: 40px;
  box-shadow: 0 12px 26px rgba(28, 43, 58, .18);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.floating-cta .status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0F766E;
  position: relative;
}
.floating-cta .status-dot::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(15, 118, 110, .5);
  animation: pulse-dot 2s infinite;
}
.floating-cta:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  transform: translateY(-3px);
}
@media (max-width: 576px) {
  .floating-cta {
    right: 18px;
    bottom: 18px;
    padding: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    font-size: 9px;
  }
  .floating-cta .status-dot {
    display: none;
  }
  .floating-cta::after {
    content: "\f077";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 14px;
  }
}
@keyframes pulse-dot {
  0% { opacity: 1; transform: scale(1); }
  80%, 100% { opacity: 0; transform: scale(1.7); }
}

.alt-block {
  color: #AABECC;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* roulang page: category4 */
:root{
  --primary:#2563A0;
  --primary-light:#D6E5F2;
  --primary-pale:#F0F6FB;
  --accent:#B8860B;
  --teal:#0F766E;
  --ink:#22343C;
  --text:#2C3E50;
  --muted:#68788A;
  --line:#E1E6EC;
  --bg:#F7F8FA;
  --white:#FFFFFF;
  --deep:#1C2B3A;
  --deepblue:#14222E;
  --radius:2px;
  --shadow-sm:0 2px 8px rgba(28,43,58,0.05);
  --shadow-md:0 12px 30px rgba(28,43,58,0.08);
  --font-sans:"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  --font-num:"Barlow Condensed","DIN Alternate","Arial Narrow",sans-serif;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--text);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:var(--primary);transition:all .2s ease}
a:hover{color:var(--primary)}
p{margin-bottom:0}
ul{list-style:none;margin:0;padding:0}
.container-site{max-width:1280px;margin:0 auto;padding-left:24px;padding-right:24px}
/* 辅助显示 */
.section-pad{padding-top:clamp(72px,9vw,120px);padding-bottom:clamp(72px,9vw,120px)}
.display-num{font-family:var(--font-num);font-weight:700;letter-spacing:.01em}
/* 按钮体系 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:0;padding:11px 28px;font-weight:600;font-size:16px;border:2px solid transparent;transition:all .25s ease;text-align:center;line-height:1.4}
.btn:focus{outline:2px solid rgba(37,99,160,.45);outline-offset:2px;box-shadow:none}
.btn-brand{background:var(--primary);color:#fff!important;border-color:var(--primary);position:relative}
.btn-brand::after{content:"";position:absolute;left:16px;right:calc(100% - 16px);bottom:4px;height:2px;background:#fff;transition:right .3s ease}
.btn-brand:hover{background:#1A4D7E;border-color:#1A4D7E;transform:translateY(-1px);box-shadow:0 6px 20px rgba(37,99,160,.2)}
.btn-brand:hover::after{right:16px}
.btn-outline{background:transparent;color:var(--primary);border-color:var(--primary)}
.btn-outline:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn-white-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.btn-white-outline:hover{background:#fff;color:var(--deep);border-color:#fff}
/* 标签/徽章 */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:3px 12px;border:1px solid var(--line);border-radius:20px;background:#fff;color:var(--muted)}
.chip-primary{border-color:rgba(37,99,160,.3);color:var(--primary);background:rgba(37,99,160,.05)}
.chip-accent{border-color:rgba(184,134,11,.32);color:var(--accent);background:rgba(184,134,11,.06)}
/* 通用目录 */
.header-top-strip{background:var(--deep);min-height:34px;display:flex;align-items:center;font-size:12.5px;color:rgba(255,255,255,.85)}
.header-top-strip .ht-left{display:flex;align-items:center;gap:10px}
.header-top-strip .domain-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;opacity:.65;letter-spacing:.02em}
.header-top-strip .mini-badge{border:1px solid rgba(255,255,255,.3);padding:1px 9px;font-size:11px;border-radius:2px;color:#F0F4F8;letter-spacing:.08em;background:rgba(255,255,255,.05);white-space:nowrap}
.header-top-strip .ht-right a{color:rgba(255,255,255,.82);font-size:12.5px;transition:color .2s;white-space:nowrap}
.header-top-strip .ht-right a:hover{color:#fff}
.header-top-strip .ht-right i{font-size:10.5px;margin-right:4px;color:var(--teal)}
.app-header{background:var(--white);border-bottom:1px solid var(--line);transition:box-shadow .25s ease}
.app-header.sticky-top{position:sticky;top:0;width:100%;z-index:1060}
.app-header.is-scrolled .header-top-strip{display:none}
.app-header.is-scrolled{box-shadow:0 8px 24px rgba(28,43,58,.08)}
.header-navbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;position:relative;padding-top:0;padding-bottom:0;min-height:72px}
.brand-lockup{display:flex;align-items:center;gap:10px;margin-right:30px}
.brand-stamp{width:40px;height:40px;border-radius:50%;background:var(--primary);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;letter-spacing:2px;border:2px solid #fff;box-shadow:0 0 0 1.5px var(--primary);text-align:center}
.brand-text{font-weight:700;font-size:24px;line-height:1.2;color:var(--deep);letter-spacing:-.3px;white-space:nowrap}
.header-navlist{gap:4px;margin:0 auto}
.nav-link{font-weight:500;color:var(--text)!important;font-size:15.5px;padding:10px 12px!important;position:relative}
.nav-link::after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:0;height:2px;background:var(--primary);transition:width .25s ease}
.nav-link:hover::after{width:70%}
.nav-link:hover{color:var(--primary)!important}
.nav-link.active{color:var(--primary)!important;font-weight:600}
.nav-link.active::after{width:100%}
.app-header .navbar-toggler{border:none;font-size:22px;color:var(--primary);padding:4px 8px;transition:opacity .2s}
.app-header .navbar-toggler:focus{outline:2px solid rgba(37,99,160,.45);outline-offset:3px;opacity:.8}
.nav-side{margin-left:auto}
.nav-enter{min-width:132px;justify-content:center}
@media(max-width:991.98px){
  .container-site{max-width:100%;padding:0 16px}
  .header-top-strip .domain-mono,.header-top-strip .ht-sep{display:none}
  .header-navbar{min-height:64px;padding:8px 0}
  .brand-text{font-size:20px}
  .header-navlist{margin:10px 0 0;width:100%;border-top:1px solid var(--line)}
  .nav-item.nav-link{padding:12px 0}
  .nav-collapse-wrap{order:3;width:100%}
  .nav-side{margin-left:0;margin-top:12px;width:100%;padding-bottom:12px}
  .nav-side .btn{width:100%}
  .header-top-strip .ht-right a.hide-mobile{display:none}
  .header-top-strip .ht-right a{padding-left:10px}
  .nav-link::after{display:none}
}
/* site footer */
.site-footer{background:var(--deepblue);color:rgba(255,255,255,.76);font-size:14.5px;padding-top:60px;position:relative}
.site-footer::before{content:"";position:absolute;top:0;left:0;height:2px;width:100%;background:var(--primary)}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.footer-brand .brand-stamp{background:transparent;color:#fff;border-color:rgba(255,255,255,.7);box-shadow:none}
.footer-brand-name{font-size:20px;color:#fff;font-weight:700}
.footer-about{font-size:13.5px;color:rgba(255,255,255,.6);line-height:1.8;margin-bottom:16px;max-width:320px}
.footer-mini-chip{display:inline-flex;gap:6px;align-items:center;font-size:12px;color:var(--accent);border:1px solid rgba(184,134,11,.4);padding:3px 10px;border-radius:2px;background:rgba(184,134,11,.05)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1.2fr;gap:40px;padding-bottom:46px}
.footer-title{font-size:15px;font-weight:600;color:#fff;margin-bottom:16px;position:relative;padding-left:12px}
.footer-title::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:3px;background:var(--primary)}
.footer-links li,.footer-info-list li{margin-bottom:9px;line-height:1.6}
.footer-links a{color:rgba(255,255,255,.66);display:inline-flex;align-items:center;gap:7px;transition:all .2s}
.footer-links a i{color:rgba(37,99,160,.7);font-size:10px;width:12px}
.footer-links a:hover{color:#fff;transform:translateX(3px)}
.footer-info-list li{display:flex;align-items:flex-start;gap:9px;color:rgba(255,255,255,.62)}
.footer-info-list li i{color:rgba(37,99,160,.8);margin-top:5px;font-size:12px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.09);padding:20px 0 30px}
.footer-bottom-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;font-size:12.5px;color:rgba(255,255,255,.5)}
.footer-bottom-code{font-family:ui-monospace,SFMono-Regular,monospace;background:rgba(255,255,255,.06);padding:2px 8px;border-radius:3px;font-size:12px}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:600px){.footer-grid{grid-template-columns:1fr;gap:26px}.footer-bottom-inner{flex-direction:column;align-items:flex-start}}
/* ===================== 分类页公共 hero-header ===================== */
.cat-hero{padding-top:40px;padding-bottom:32px;background:var(--bg) url('/assets/images/backpic/back-1.png') center/cover no-repeat;position:relative;border-bottom:1px solid var(--line)}
.cat-hero-inner{position:relative;z-index:2;max-width:880px}
.cat-kicker{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--primary);background:rgba(37,99,160,.07);border:1px solid rgba(37,99,160,.16);border-radius:2px;padding:4px 14px;margin-bottom:18px}
.cat-kicker i{color:var(--accent);font-size:10px}
.cat-title{font-size:clamp(30px,4vw,48px);font-weight:800;color:var(--deep);line-height:1.2;margin-bottom:12px;letter-spacing:-.5px}
.cat-title .highlight{color:var(--primary);border-bottom:3px solid var(--accent);display:inline-block;line-height:1.3}
.cat-sub{display:flex;gap:14px;align-items:center;margin-top:16px;padding-left:16px;border-left:4px solid var(--primary);color:var(--muted);font-size:16px}
.cat-sub i{margin-right:6px;color:var(--accent);opacity:.8}
.cat-hero-meta{margin-top:26px;display:flex;gap:22px;flex-wrap:wrap}
.cat-hero-meta .meta-item{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px}
.cat-hero-meta .meta-item i{color:var(--primary);opacity:.7}
@media(max-width:600px){.cat-hero{padding-top:32px}.cat-title{font-size:30px}.cat-sub{font-size:14px;flex-wrap:wrap}}
/* 面包屑 */
.crumb-wrap{background:#fff;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.6)}
.breadcrumb{display:flex;flex-wrap:wrap;gap:6px;list-style:none;font-size:13px}
.breadcrumb li a{color:var(--muted)}
.breadcrumb li a:hover{color:var(--primary)}
.breadcrumb li.current{color:var(--primary);font-weight:500}
/* ===================== 分类4模块版面 end-to-end ===================== */
.c4-wrapper{background:var(--bg)}
.c4-feature{padding-top:60px;padding-bottom:40px}
.featured-card{display:grid;grid-template-columns:1.2fr .8fr;background:var(--white);box-shadow:var(--shadow-sm);border-left:5px solid var(--primary);margin-bottom:14px}
.featured-body{padding:44px}
.feat-tag{display:inline-block;background:var(--primary-pale);color:var(--primary);font-size:12px;font-weight:600;letter-spacing:.1em;padding:2px 14px;margin-bottom:16px;border-left:2px solid var(--accent)}
.feat-title{font-size:clamp(19px,2.1vw,27px);font-weight:700;line-height:1.45;color:var(--deep);margin-bottom:14px}
.feat-desc{color:var(--muted);font-size:14.5px;padding-right:10px;margin-bottom:22px}
.feat-more{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:15px}
.feat-more:hover{text-decoration:underline;text-underline-offset:4px}
.featured-media{position:relative;overflow:hidden;min-height:260px}
.featured-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.featured-media::after{content:"";position:absolute;inset:0;background:linear-gradient(290deg,rgba(20,34,46,.15),transparent 35%)}
.featured-media:hover img{transform:scale(1.02)}
@media(max-width:900px){.featured-card{grid-template-columns:1fr}.featured-body{padding:26px 24px}.featured-media{min-height:200px}}
/* 列表条目 */
.c4-feed{background:var(--bg);padding-bottom:52px}
.feed-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
.feed-heading h2{font-size:24px;font-weight:700;color:var(--deep);display:flex;align-items:center;gap:12px}
.feed-heading h2 i{width:28px;height:28px;background:var(--primary);color:#fff;font-size:14px;display:inline-flex;align-items:center;justify-content:center;border-radius:2px}
.feed-heading h2::after{content:"";display:block;height:1px;flex:1;margin-left:18px;background:var(--line)}
.feed-list-row{display:flex;flex-direction:column;gap:0}
.feed-item{display:grid;grid-template-columns:1fr 270px;background:var(--white);border-bottom:1px solid var(--line);transition:all .24s ease;position:relative}
.feed-item:first-child{border-top:1px solid var(--line)}
.feed-item > a{display:block;color:inherit}
.feed-item-textarea{padding:24px 0 24px 24px;display:flex;height:100%;position:relative}
.feed-number{font-family:var(--font-num);font-size:32px;color:var(--primary-light);margin-right:20px;line-height:1;min-width:48px;text-align:right;font-weight:700}
.feed-item-content{flex:1}
.feed-item-type{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.feed-type-tag{font-size:11px;font-weight:600;border:1px solid rgba(37,99,160,.22);padding:0 8px;background:rgba(37,99,160,.05);color:var(--primary)}
.feed-date{font-size:12px;color:var(--muted);font-family:ui-monospace,SFMono-Regular,menlo,sans-serif}
.feed-title{font-size:17px;line-height:1.5;font-weight:600;color:var(--deep);margin-bottom:2px;transition:color .2s}
.feed-item a:hover .feed-title{color:var(--primary)}
.feed-summary{font-size:13.5px;color:var(--muted);line-height:1.65;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.feed-thumb{position:relative;overflow:hidden;background:#EFF2F6}
.feed-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease;filter:saturate(.85)}
.feed-thumb:hover img{transform:scale(1.05)}
.feed-thumb .thumb-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;color:#99A7B3;letter-spacing:.2em}
.feed-item:hover{box-shadow:var(--shadow-md)}
@media(max-width:768px){
  .feed-item{grid-template-columns:1fr}
  .feed-item-textarea{padding:20px 16px;flex-direction:column;gap:6px}
  .feed-number{font-size:26px;margin-right:0;text-align:left}
  .feed-thumb{min-height:140px;order:2}
}
/* 官方提醒banner */
.alert-strip{margin-top:32px;background:var(--primary-pale);border-left:4px solid var(--primary);padding:22px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.alert-head{color:var(--primary);font-weight:700;font-size:17px}
.alert-text{color:var(--text);font-size:14px;margin-top:4px}
/* FAQ 分类4 */
.c4-faq{padding-top:40px;padding-bottom:20px}
.accordion-custom{max-width:900px;margin:0 auto}
.accordion-custom .accordion-item{border:1px solid var(--line);border-radius:2px;margin-bottom:14px;background:#fff;overflow:hidden}
.accordion-custom .accordion-button{font-size:16px;color:var(--deep);font-weight:600;padding:18px 24px;box-shadow:none;background:#fff;border-left:3px solid transparent;transition:all .25s}
.accordion-custom .accordion-button:not(.collapsed){background:var(--primary-pale);color:var(--primary);border-left-color:var(--primary)}
.accordion-custom .accordion-button:hover{background:var(--primary-pale)}
.accordion-custom .accordion-button:focus{outline:2px solid rgba(37,99,160,.3);outline-offset:-2px;box-shadow:none}
.accordion-custom .accordion-body{color:var(--text);font-size:14.5px;line-height:1.9;padding:16px 24px 20px;border-left:3px solid rgba(37,99,160,.12)}
/* 目录标题 */
.sect-divider{display:flex;gap:16px;align-items:flex-start;margin-bottom:36px}
.sect-no{font-family:var(--font-num);font-size:44px;font-weight:800;color:var(--accent);line-height:1;opacity:.7}
.sect-txt h2{font-size:26px;font-weight:700;color:var(--deep);margin-bottom:6px}
.sect-txt p{color:var(--muted);font-size:15px;line-height:1.7}
/* CTA */
.bottom-cta{margin:48px 0 0;background:var(--primary);padding:44px 40px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;color:#fff;box-shadow:var(--shadow-md);border-left:8px solid var(--accent)}
.bottom-cta .cta-main-btn{background:#fff;color:var(--primary)!important;font-weight:700;border:none}
.bottom-cta .cta-main-btn:hover{background:var(--accent);color:#fff!important;transform:translateY(-2px)}
.back-help{margin-top:32px;text-align:right;font-size:15px}
@media(max-width:768px){.feed-heading h2{font-size:19px}.bottom-cta{flex-direction:column;padding:28px 24px}}
/* scroll up */
.scroll-up-wrap{display:flex;justify-content:flex-end;margin-top:30px}
.scroll-up-circle{width:48px;height:48px;background:var(--white);border:1px solid var(--line);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--primary);box-shadow:var(--shadow-sm);transition:all .3s}
.scroll-up-circle:hover{background:var(--primary);color:#fff;transform:translateY(-4px)}
/* floating */
.floating-cta{position:fixed;right:18px;bottom:24px;z-index:1055}
.float-main-cta{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid rgba(37,99,160,.32);color:var(--primary);padding:8px 18px 8px 14px;border-radius:40px;box-shadow:var(--shadow-md);transition:all .3s ease}
.float-main-cta .ft-dot{width:8px;height:8px;background:var(--teal);border-radius:50%;position:relative}
.float-main-cta .ft-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(15,118,110,.35)}
.float-main-cta .ft-text{display:flex;flex-direction:column;line-height:1.25;text-align:left}
.float-main-cta .ft-text strong{font-size:14px;font-weight:700}
.float-main-cta .ft-text small{font-size:10.5px;color:var(--muted);font-weight:400}
.float-main-cta:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.float-main-cta:hover small{color:rgba(255,255,255,.75)}
.float-main-cta:hover .ft-dot{box-shadow:0 0 0 4px rgba(255,255,255,.2)}
@media(max-width:520px){
  .floating-cta .float-main-cta .ft-text{display:none}
  .floating-cta .float-main-cta{padding:12px 14px}
  .floating-cta .float-main-cta .ft-dot{width:8px;height:8px}
}
/* global a:not inside */
.navbar a:focus-visible{outline:2px solid var(--primary)}