/* roulang page: index */
:root {
  --brand: #0FBF9F;
  --brand-dark: #0A8F80;
  --teal-deep: #0B6E6B;
  --ink-deep: #0C1B1A;
  --ink-deep-2: #122624;
  --bg-soft: #F5F7F6;
  --card-bg: #FFFFFF;
  --accent: #FF7A3C;
  --text-main: #1F2937;
  --text-mute: #6B7280;
  --line: #E5E7EB;
  --radius-lg: 20px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --shadow-1: 0 1px 3px rgba(16,32,28,.08);
  --shadow-2: 0 12px 28px rgba(16,32,28,.10);
  --space-section: 96px;
  --bs-body-font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "HarmonyOS Sans SC", "Noto Sans CJK SC", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "HarmonyOS Sans SC", "Noto Sans CJK SC", sans-serif;
  background: var(--bg-soft);
  color: var(--text-main);
  line-height: 1.75;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 800;
  line-height: 1.35;
  color: var(--text-main);
}
p { line-height: 1.8; }
a { color: var(--brand-dark); text-decoration: none; transition: color .25s ease; }
a:hover { color: var(--brand); }
img { max-width: 100%; }
button, input, textarea, select { font-family: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.container { max-width: 1200px; }
.object-fit-cover { object-fit: cover; }
.section { padding: var(--space-section) 0; }
.section-soft { background: var(--bg-soft); }
.section-white { background: #fff; }
.bg-deep { background: var(--ink-deep); }
.section-head { max-width: 760px; margin: 0 auto 52px; text-align: center; }
.section-head h2 { font-size: 30px; margin: 18px 0 12px; }
.section-head p { color: var(--text-mute); font-size: 17px; margin-bottom: 0; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(15,191,159,.12);
  color: var(--brand-dark);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
}
.eyebrow i { font-size: 12px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 1050;
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid rgba(229,231,235,.9);
  backdrop-filter: blur(10px);
}
.site-header .navbar-shell { box-shadow: none; }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
}
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.brand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--brand), var(--teal-deep));
  color: #fff;
  font-size: 19px;
  box-shadow: var(--shadow-1);
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.14;
}
.brand-text strong { font-size: 18px; color: var(--ink-deep); letter-spacing: .01em; }
.brand-text span { font-size: 11px; font-weight: 700; color: var(--brand-dark); letter-spacing: .06em; margin-top: 3px; }
.chip-nav { display: none; gap: 8px; }
@media (min-width: 992px) {
  .chip-nav { display: flex; flex: 1; justify-content: center; }
}
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 16px;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #374151;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: all .25s ease;
}
.chip:hover {
  border-color: var(--brand);
  background: rgba(15,191,159,.08);
  color: var(--brand-dark);
  transform: translateY(-1px);
}
.chip.active,
.chip.active:hover {
  border-color: rgba(15,191,159,.45);
  background: rgba(15,191,159,.14);
  color: var(--brand-dark);
}
.btn-brand {
  --btn-brand-shadow: 0 8px 18px rgba(10,143,128,.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-sm);
  background-image: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff !important;
  font-weight: 700;
  padding: 11px 24px;
  box-shadow: var(--btn-brand-shadow);
  transition: all .25s ease;
}
.btn-brand:hover {
  filter: brightness(1.06);
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(10,143,128,.28);
}
.btn-brand:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(10,143,128,.18);
}
.btn-outline-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--brand);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--brand-dark) !important;
  font-weight: 700;
  padding: 10px 24px;
  transition: all .25s ease;
}
.btn-outline-brand:hover {
  background: rgba(15,191,159,.1);
  color: var(--brand-dark) !important;
  transform: translateY(-1px);
}
.btn-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff !important;
  font-weight: 700;
  padding: 12px 26px;
  box-shadow: 0 8px 18px rgba(255,122,60,.22);
  transition: all .25s ease;
}
.btn-accent:hover {
  filter: brightness(1.07);
  color: #fff !important;
  transform: translateY(-2px);
}
.menu-toggler {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink-deep);
  font-size: 18px;
}
.menu-toggler:hover { border-color: var(--brand); color: var(--brand-dark); }
.mobile-nav-wrap { border-top: 1px solid rgba(229,231,235,.8); background: #fff; }
.mobile-nav-wrap .chip { width: 100%; justify-content: flex-start; }
.mobile-cta-wrap { padding-top: 8px; border-top: 1px solid var(--line); }

.hero-section {
  position: relative;
  overflow: hidden;
  padding: 92px 0 104px;
  background: var(--ink-deep);
  color: #fff;
}
.hero-bg-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .22;
}
.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(12,27,26,.95) 0%, rgba(12,27,26,.82) 48%, rgba(11,110,107,.75) 100%);
}
.hero-inner { position: relative; z-index: 2; }
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.9);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 20px;
}
.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px rgba(15,191,159,.2);
}
.hero-section h1 {
  color: #fff;
  font-size: clamp(38px, 5vw, 56px);
  line-height: 1.18;
  margin: 0 0 18px;
  max-width: 720px;
  text-wrap: balance;
}
.hero-lead {
  color: rgba(255,255,255,.86);
  font-size: 18px;
  max-width: 560px;
  margin-bottom: 30px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 34px;
}
.btn-outline-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(255,255,255,.6);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.06);
  color: #fff !important;
  font-weight: 600;
  padding: 11px 24px;
  transition: all .25s ease;
}
.btn-outline-light:hover {
  background: rgba(255,255,255,.14);
  color: #fff !important;
  transform: translateY(-1px);
}
.hero-mini-list { display: flex; flex-wrap: wrap; gap: 24px; }
.hero-mini-item { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.82); font-size: 14px; }
.hero-mini-item i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(15,191,159,.2);
  color: var(--brand);
  font-size: 14px;
}
.hero-visual-wrap { position: relative; }
.hero-visual {
  position: relative;
  height: 440px;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 24px 60px rgba(0,0,0,.25);
  background-color: var(--ink-deep-2);
}
.hero-visual-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12,27,26,.04) 20%, rgba(12,27,26,.78) 100%);
}
.hero-float-card {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255,255,255,.92);
  border-radius: 16px;
  box-shadow: 0 14px 30px rgba(0,0,0,.15);
  color: var(--text-main);
  min-width: 210px;
  backdrop-filter: blur(6px);
}
.hero-float-card .float-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(15,191,159,.14);
  color: var(--brand-dark);
  font-size: 17px;
}
.hero-float-card small {
  display: block;
  color: var(--text-mute);
  font-size: 11px;
  letter-spacing: .02em;
}
.hero-float-card strong { font-size: 15px; line-height: 1.4; display: block; }
.float-card-a { top: 32px; right: -16px; }
.float-card-b { bottom: 36px; left: -16px; }
.hero-deco-circle {
  position: absolute;
  width: 160px;
  height: 160px;
  border: 2px dashed rgba(15,191,159,.55);
  border-radius: 50%;
  right: -60px;
  bottom: -60px;
  z-index: 2;
}

.overview-section { background: #fff; }
.feature-media {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
.feature-media img {
  width: 100%;
  height: 430px;
  object-fit: cover;
  display: block;
}
.feature-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,110,107,0) 50%, rgba(11,110,107,.38) 100%);
}
.feature-badge {
  position: absolute;
  left: 20px;
  bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  z-index: 2;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow-2);
}
.feature-badge .badge-num { font-size: 28px; font-weight: 800; color: var(--brand-dark); line-height: 1; font-variant-numeric: tabular-nums; }
.feature-badge span { font-size: 12px; color: var(--text-mute); line-height: 1.3; display: block; }
.overview-copy h2 { font-size: 30px; margin-bottom: 24px; }
.overview-copy p { color: var(--text-mute); font-size: 16px; margin-bottom: 18px; }
.overview-points { list-style: none; margin: 26px 0 0; padding: 0; }
.overview-points li {
  display: flex;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  color: #374151;
  font-size: 15px;
}
.overview-points li:last-child { border-bottom: 0; }
.overview-points li i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  margin-top: 2px;
  border-radius: 9px;
  background: rgba(15,191,159,.14);
  color: var(--brand-dark);
  font-size: 13px;
}

.route-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid rgba(229,231,235,.9);
  border-radius: var(--radius-lg);
  background: #fff;
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: all .3s ease;
  color: inherit;
}
.route-card:hover {
  border-color: rgba(15,191,159,.6);
  box-shadow: var(--shadow-2);
  transform: translateY(-3px);
  color: inherit;
}
.route-card-horizontal { flex-direction: row; }
.route-card-horizontal .route-media {
  width: 42%;
  flex: 0 0 42%;
  min-height: 260px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.route-card-horizontal .route-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11,110,107,0) 40%, rgba(11,110,107,.28));
}
.route-card-vertical .route-media {
  min-height: 200px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.route-card-vertical .route-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,191,159,.02), rgba(11,110,107,.34));
}
.route-card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px;
  flex: 1;
}
.route-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: rgba(15,191,159,.13);
  color: var(--brand-dark);
  font-size: 17px;
}
.route-card-body h3 {
  font-size: 19px;
  color: var(--text-main);
  margin-bottom: 10px;
  font-weight: 800;
}
.route-card-body p { color: var(--text-mute); font-size: 14px; margin-bottom: 18px; }
.route-card-footer {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand-dark);
  font-size: 14px;
  font-weight: 700;
}
.route-card-footer i { transition: transform .25s ease; }
.route-card:hover .route-card-footer { color: var(--brand-dark); }
.route-card:hover .route-card-footer i { transform: translateX(5px); }
.route-tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.route-tag-list span {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--bg-soft);
  color: #4b5563;
  font-size: 12px;
  font-weight: 600;
}

.step-item {
  position: relative;
  height: 100%;
  padding: 30px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  transition: all .3s ease;
}
.step-item:hover {
  border-color: rgba(15,191,159,.55);
  box-shadow: var(--shadow-2);
  transform: translateY(-3px);
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 20px;
}
.step-item h3 { font-size: 17px; margin-bottom: 10px; }
.step-item p { color: var(--text-mute); font-size: 14px; margin: 0; }
.step-line { display: none; }

.news-panel-section { background: linear-gradient(180deg, #f0faf7 0%, var(--bg-soft) 100%); }
.news-list { display: flex; flex-direction: column; gap: 16px; }
.news-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  transition: all .3s ease;
}
.news-card:hover {
  box-shadow: var(--shadow-2);
  border-color: rgba(15,191,159,.45);
}
.news-top-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.7;
  font-weight: 600;
}
.tag-brand { background: rgba(15,191,159,.14); color: var(--brand-dark); }
.tag-muted { background: var(--bg-soft); color: var(--text-mute); }
.news-date { color: var(--text-mute); font-size: 13px; font-variant-numeric: tabular-nums; }
.news-title { font-size: 18px; line-height: 1.5; margin-bottom: 8px; }
.news-title a { color: var(--text-main); }
.news-title a:hover { color: var(--brand-dark); }
.news-summary {
  color: var(--text-mute);
  font-size: 14px;
  margin-bottom: 14px;
}
.link-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-dark);
}
.link-more i { transition: transform .25s ease; }
.link-more:hover i { transform: translateX(4px); }
.empty-news {
  background: #fff;
  border: 1px dashed #cbd5d0;
  border-radius: var(--radius-lg);
  padding: 64px 24px;
  text-align: center;
}
.empty-news-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: var(--bg-soft);
  color: var(--brand-dark);
  font-size: 24px;
  margin-bottom: 18px;
}
.empty-news p { color: var(--text-mute); margin: 0; }
.aside-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 20px;
}
.aside-card h3 { font-size: 17px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.status-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(15,191,159,.1);
  color: var(--brand-dark);
  font-weight: 700;
  font-size: 14px;
}
.status-line i { font-size: 12px; }
.short-list { list-style: none; padding: 0; margin: 0; }
.short-list li {
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.short-list li:last-child { border-bottom: 0; }
.short-list a { color: #374151; display: flex; align-items: center; gap: 8px; }
.short-list a:hover { color: var(--brand-dark); }
.short-list i { color: var(--brand); font-size: 12px; }

.security-section {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: var(--ink-deep);
}
.security-bg-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .16;
}
.security-bg-overlay {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, var(--ink-deep) 0%, rgba(18,38,36,.96) 60%, rgba(11,110,107,.88) 100%);
}
.security-content { position: relative; z-index: 2; }
.security-content h2 { color: #fff; font-size: 32px; margin-bottom: 20px; }
.security-content .lead { color: rgba(255,255,255,.75); font-size: 17px; max-width: 560px; }
.security-feature-list {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
}
.security-feature-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  padding: 16px;
  color: rgba(255,255,255,.9);
  font-size: 14px;
}
.security-feature-list li i { color: var(--brand); margin-top: 4px; }
.security-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
}
.security-stat {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  padding: 24px 22px;
}
.security-stat-num {
  font-size: 34px;
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.security-stat-num.accent-num { color: var(--accent); }
.security-stat-label { color: rgba(255,255,255,.65); font-size: 13px; line-height: 1.4; margin-top: 5px; }

.cta-card {
  border: 0;
  border-radius: 24px;
  padding: clamp(28px, 5vw, 58px);
  background: linear-gradient(130deg, var(--brand) 0%, var(--brand-dark) 42%, var(--teal-deep) 100%);
  box-shadow: 0 24px 60px rgba(11,110,107,.32);
  color: #fff;
}
.cta-card h2 { color: #fff; font-size: 30px; }
.cta-card .lead-description { color: rgba(255,255,255,.88); margin-top: 14px; font-size: 16px; }
.cta-form .form-control {
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.4);
  min-height: 52px;
  padding: 10px 16px;
  background: rgba(255,255,255,.95);
  box-shadow: none;
}
.cta-form .form-control:focus {
  background: #fff;
  border-color: var(--brand-dark);
  box-shadow: 0 0 0 3px rgba(255,255,255,.25);
}
.form-note { color: rgba(255,255,255,.72); font-size: 13px; margin-top: 12px; }
.faq-inner-cta { margin-top: 46px; padding-top: 40px; border-top: 1px solid rgba(255,255,255,.25); }
.faq-inner-cta .faq-cta-title { color: #fff; font-size: 20px; margin-bottom: 18px; }
.accordion {
  --bs-accordion-bg: #fff;
  --bs-accordion-color: var(--text-main);
  --bs-accordion-border-color: var(--line);
  --bs-accordion-btn-padding-x: 20px;
  --bs-accordion-btn-padding-y: 18px;
  --bs-accordion-body-padding-x: 20px;
  --bs-accordion-body-padding-y: 18px;
  --bs-accordion-border-radius: 14px;
  --bs-accordion-inner-border-radius: 14px;
}
.accordion-item {
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  overflow: hidden;
  margin-bottom: 12px;
  background: #fff;
}
.accordion-button {
  font-weight: 700;
  color: var(--text-main);
  background: #fff;
  border: 0;
  box-shadow: none !important;
  font-size: 15px;
}
.accordion-button:not(.collapsed) {
  color: var(--brand-dark);
  background: rgba(15,191,159,.08);
}
.accordion-button::after {
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  background-image: none;
  width: auto;
  height: auto;
  color: var(--brand-dark);
  transition: transform .3s ease;
}
.accordion-button:not(.collapsed)::after {
  background-image: none;
  color: var(--accent);
  transform: rotate(180deg);
}
.accordion-body { color: var(--text-mute); font-size: 14px; }

.site-footer {
  background: var(--ink-deep);
  color: rgba(255,255,255,.68);
  padding: 64px 0 0;
}
.footer-brand .brand-text strong { color: #fff; }
.footer-brand .brand-text span { color: var(--brand); }
.footer-brand-p { margin-top: 18px; font-size: 14px; max-width: 260px; color: rgba(255,255,255,.55); }
.footer-title { color: #fff; font-size: 15px; font-weight: 700; margin-bottom: 18px; }
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.footer-links a { color: rgba(255,255,255,.62); font-size: 14px; transition: color .25s ease; }
.footer-links a:hover { color: var(--brand); }
.footer-bottom {
  margin-top: 56px;
  padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: 13px;
  color: rgba(255,255,255,.46);
}
.footer-bottom .container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 20px; }

@media (max-width: 991px) {
  .float-card-a { right: 8px; }
  .float-card-b { left: 8px; }
  .hero-visual { height: 390px; margin-top: 12px; }
}
@media (max-width: 767px) {
  :root { --space-section: 64px; }
  .section { padding: var(--space-section) 0; }
  .header-inner { padding: 10px 0; }
  .brand-icon { width: 40px; height: 40px; }
  .brand-text strong { font-size: 16px; }
  .brand-text span { font-size: 10px; }
  .brand-lockup { gap: 8px; }
  .hero-section { padding: 60px 0 76px; }
  .hero-section h1 { font-size: 32px; }
  .hero-lead { font-size: 16px; }
  .hero-mini-list { gap: 16px; }
  .hero-visual { height: 340px; }
  .float-card-a { top: 16px; right: 10px; }
  .float-card-b { bottom: 16px; left: 10px; }
  .hero-float-card { padding: 10px 12px; min-width: 190px; }
  .feature-media img { height: 300px; }
  .section-head h2 { font-size: 23px; }
  .overview-copy h2 { font-size: 23px; }
  .route-card-horizontal { flex-direction: column; }
  .route-card-horizontal .route-media { width: 100%; flex: auto; min-height: 190px; }
  .news-card { padding: 20px; }
  .security-content h2 { font-size: 24px; }
  .security-feature-list { grid-template-columns: 1fr; gap: 10px; }
  .security-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .security-stat { padding: 18px 16px; }
  .security-stat-num { font-size: 26px; }
  .cta-card h2 { font-size: 24px; }
  .view-guide-topics { margin-top: 32px; }
}
@media (max-width: 520px) {
  .btn-brand, .btn-outline-light, .btn-accent { width: 100%; }
  .hero-actions { flex-direction: column; }
  .footer-bottom .container { flex-direction: column; text-align: center; }
}

/* roulang page: category1 */
:root {
      --brand: #0FBF9F;
      --brand-deep: #0A8F80;
      --brand-shadow: rgba(15, 191, 159, .26);
      --accent: #FF7A3C;
      --ink: #0C1B1A;
      --ink-soft: #122624;
      --bg: #F5F7F6;
      --white: #ffffff;
      --text: #1F2937;
      --text-muted: #6B7280;
      --line: #E5E7EB;
      --r-lg: 20px;
      --r-md: 16px;
      --r-sm: 12px;
      --shadow-sm: 0 1px 3px rgba(16, 32, 28, .08);
      --shadow-md: 0 12px 28px rgba(16, 32, 28, .10);
      --font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "HarmonyOS Sans SC", "Noto Sans CJK SC", sans-serif;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: var(--font-family);
      background: var(--bg);
      color: var(--text);
      font-size: 16px;
      line-height: 1.75;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    h1, h2, h3, h4, h5 {
      font-weight: 700;
      line-height: 1.3;
      margin: 0 0 .6em;
    }

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

    a {
      color: var(--brand-deep);
      text-decoration: none;
      transition: color .2s ease;
    }

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

    button,
    input {
      font-family: inherit;
    }

    p {
      margin-bottom: 1rem;
    }

    .container {
      max-width: 1200px;
    }

    ::selection {
      background: rgba(15, 191, 159, .20);
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 1050;
      background: rgba(255, 255, 255, .92);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(229, 231, 235, .9);
    }

    .site-header .container {
      padding-top: 14px;
      padding-bottom: 14px;
    }

    .header-flex {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 14px 20px;
      position: relative;
    }

    .brand-lockup {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      color: var(--ink);
      margin-right: 18px;
      z-index: 2;
    }

    .brand-lockup:hover {
      color: var(--ink);
    }

    .brand-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      background: linear-gradient(145deg, #15CDAC, #0A8F80);
      border-radius: 14px;
      color: #fff;
      font-size: 20px;
      box-shadow: 0 8px 20px rgba(15, 191, 159, .24);
    }

    .brand-text {
      display: flex;
      flex-direction: column;
      line-height: 1.15;
    }

    .brand-text strong {
      font-size: 20px;
      letter-spacing: .5px;
      color: var(--ink);
    }

    .brand-text span {
      font-size: 13px;
      color: var(--brand-deep);
      font-weight: 600;
      letter-spacing: 1.5px;
    }

    .nav-wrap {
      flex: 1 1 auto;
      display: flex;
      justify-content: center;
    }

    .chip-nav {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      padding: 0;
      margin: 0;
    }

    .chip {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 9px 20px;
      border-radius: 999px;
      background: var(--white);
      border: 1px solid var(--line);
      color: #374151;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.4;
      transition: all .22s ease;
      white-space: nowrap;
    }

    .chip i {
      color: var(--brand);
      font-size: 14px;
    }

    .chip:hover {
      border-color: var(--brand);
      background: #EEFBF8;
      color: var(--brand-deep);
      transform: translateY(-1px);
    }

    .chip.active {
      background: #DDF7F1;
      border-color: rgba(15, 191, 159, .5);
      color: var(--brand-deep);
      box-shadow: inset 0 0 0 1px rgba(15, 191, 159, .08);
    }

    .chip:focus-visible,
    .btn:focus-visible,
    .nav-toggle:focus-visible,
    a:focus-visible {
      outline: 3px solid rgba(255, 122, 60, .35);
      outline-offset: 3px;
    }

    .header-utils {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      margin-left: auto;
      z-index: 2;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      border-radius: var(--r-sm);
      font-weight: 600;
      padding: 12px 26px;
      border: 0;
      transition: all .22s ease;
      line-height: 1.4;
    }

    .btn-brand {
      background: linear-gradient(145deg, #0FBF9F, #0A8F80);
      color: #fff;
      box-shadow: 0 8px 20px rgba(15, 191, 159, .28), inset 0 1px 0 rgba(255, 255, 255, .18);
    }

    .btn-brand:hover,
    .btn-brand:focus {
      background: linear-gradient(145deg, #16CDAC, #0B9C8C);
      color: #fff;
      transform: translateY(-2px);
      box-shadow: 0 12px 28px rgba(15, 191, 159, .34);
    }

    .btn-brand:active {
      transform: translateY(0);
      box-shadow: 0 4px 10px rgba(15, 191, 159, .28);
    }

    .btn-ghost {
      background: transparent;
      color: var(--ink);
      border: 1.5px solid var(--ink);
      padding: 10px 24px;
    }

    .btn-ghost:hover {
      background: rgba(15, 191, 159, .08);
      border-color: var(--brand-deep);
      color: var(--brand-deep);
      transform: translateY(-1px);
    }

    .btn-outline-light {
      background: transparent;
      border: 1.5px solid rgba(255, 255, 255, .7);
      color: #fff;
    }

    .btn-outline-light:hover {
      background: rgba(255, 255, 255, .14);
      border-color: #fff;
      color: #fff;
      transform: translateY(-1px);
    }

    .btn-outline-brand {
      background: transparent;
      border: 1.5px solid var(--brand-deep);
      color: var(--brand-deep);
    }

    .btn-outline-brand:hover {
      background: #EAF8F4;
      border-color: var(--brand);
      color: var(--brand-deep);
      transform: translateY(-1px);
    }

    .nav-toggle {
      display: none;
      width: 44px;
      height: 44px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: var(--white);
      color: var(--ink);
      align-items: center;
      justify-content: center;
      font-size: 20px;
      transition: all .2s ease;
    }

    .nav-toggle:hover {
      border-color: var(--brand);
      color: var(--brand-deep);
    }

    @media (min-width: 992px) {
      .header-utils {
        order: 3;
      }

      .nav-wrap {
        order: 2;
        display: flex !important;
      }

      .nav-wrap.collapse:not(.show) {
        display: flex !important;
      }
    }

    @media (max-width: 991.98px) {
      .nav-toggle {
        display: inline-flex;
      }

      .nav-wrap.collapse:not(.show) {
        display: none;
      }

      .nav-wrap.show {
        order: 5;
        flex: 0 0 100%;
        display: block;
        margin-top: 4px;
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: var(--r-md);
        padding: 14px;
        box-shadow: var(--shadow-md);
        max-height: 75vh;
        overflow-y: auto;
      }

      .nav-wrap .chip-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
      }

      .nav-wrap .chip {
        width: 100%;
        justify-content: center;
        padding: 12px 20px;
      }
    }

    @media (max-width: 575.98px) {
      .brand-lockup {
        margin-right: 4px;
      }

      .brand-text strong {
        font-size: 18px;
      }

      .header-btn {
        display: none !important;
      }
    }

    .page-hero {
      position: relative;
      padding: 88px 0 70px;
      background:
        linear-gradient(122deg, rgba(12, 27, 26, .96) 0%, rgba(10, 80, 76, .88) 58%, rgba(15, 191, 159, .74) 100%),
        url('/assets/images/backpic/back-1.png') center / cover no-repeat;
      color: #fff;
      overflow: hidden;
    }

    .page-hero::before {
      content: "";
      position: absolute;
      width: 440px;
      height: 440px;
      right: -120px;
      top: -180px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 255, 255, .14), transparent 68%);
      pointer-events: none;
    }

    .page-hero::after {
      content: "";
      position: absolute;
      width: 300px;
      height: 300px;
      left: -100px;
      bottom: -180px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(15, 191, 159, .32), transparent 65%);
      pointer-events: none;
    }

    .page-hero .container {
      position: relative;
      z-index: 2;
    }

    .breadcrumb-nav {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: rgba(255, 255, 255, .74);
      margin-bottom: 32px;
    }

    .breadcrumb-nav a {
      color: rgba(255, 255, 255, .82);
    }

    .breadcrumb-nav a:hover {
      color: #fff;
    }

    .breadcrumb-nav span {
      opacity: .55;
    }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(15, 191, 159, .18);
      border: 1px solid rgba(255, 255, 255, .22);
      padding: 7px 16px;
      border-radius: 999px;
      color: #E9FFFA;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .4px;
      margin-bottom: 18px;
    }

    .page-hero h1 {
      font-size: clamp(32px, 4vw, 50px);
      font-weight: 800;
      color: #fff;
      max-width: 720px;
      margin-bottom: 18px;
      letter-spacing: .5px;
    }

    .hero-desc {
      max-width: 620px;
      color: rgba(255, 255, 255, .88);
      font-size: 16px;
      line-height: 1.9;
      margin-bottom: 30px;
    }

    .hero-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 30px;
    }

    .hero-tags span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(255, 255, 255, .08);
      border: 1px solid rgba(255, 255, 255, .18);
      border-radius: 999px;
      padding: 6px 14px;
      font-size: 13px;
      color: rgba(255, 255, 255, .92);
    }

    .hero-tags i {
      color: #FF9E76;
    }

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

    @media (max-width: 575.98px) {
      .page-hero {
        padding: 64px 0 56px;
      }

      .hero-actions .btn {
        width: 100%;
      }
    }

    .section {
      padding: 96px 0;
    }

    .section-tint {
      background: #EDF8F5;
    }

    .section-white {
      background: var(--white);
    }

    .section-deep {
      background: var(--ink);
      color: #fff;
    }

    .section-head {
      max-width: 720px;
      margin: 0 auto 56px;
      text-align: center;
    }

    .section-head.left {
      margin-left: 0;
      text-align: left;
    }

    .section-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--brand-deep);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      margin-bottom: 12px;
    }

    .section-kicker::before {
      content: "";
      width: 18px;
      height: 3px;
      background: var(--accent);
      border-radius: 99px;
    }

    .section-title {
      font-size: clamp(26px, 3vw, 34px);
      font-weight: 800;
      color: var(--ink);
      margin-bottom: 16px;
    }

    .section-title .brand-text-light {
      color: var(--brand-deep);
    }

    .lead-muted {
      color: var(--text-muted);
      font-size: 16px;
      line-height: 1.85;
    }

    .img-frame {
      border-radius: var(--r-lg);
      overflow: hidden;
      position: relative;
      box-shadow: var(--shadow-md);
      background: #E9F3EF;
    }

    .img-frame img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      min-height: 280px;
      transition: transform .45s ease;
    }

    .img-frame:hover img {
      transform: scale(1.025);
    }

    .img-badge {
      position: absolute;
      left: 18px;
      bottom: 18px;
      background: rgba(12, 27, 26, .72);
      color: #fff;
      border: 1px solid rgba(255, 255, 255, .24);
      padding: 8px 16px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 600;
      backdrop-filter: blur(8px);
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }

    .img-badge i {
      color: var(--brand);
    }

    .check-list {
      list-style: none;
      padding: 0;
      margin: 18px 0 0;
    }

    .check-list li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 8px 0;
      color: var(--text);
    }

    .check-list i {
      color: var(--brand-deep);
      background: rgba(15, 191, 159, .12);
      width: 22px;
      height: 22px;
      flex: 0 0 22px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      margin-top: 6px;
    }

    .grid-bento {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 24px;
    }

    .bento-card {
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      padding: 30px;
      position: relative;
      transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
      overflow: hidden;
    }

    .bento-card:hover {
      border-color: rgba(15, 191, 159, .48);
      box-shadow: var(--shadow-md);
      transform: translateY(-4px);
    }

    .bento-icon {
      width: 52px;
      height: 52px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 16px;
      background: linear-gradient(145deg, #0FBF9F, #0A8F80);
      color: #fff;
      font-size: 22px;
      margin-bottom: 20px;
      box-shadow: 0 8px 16px rgba(15, 191, 159, .18);
    }

    .bento-card h3 {
      font-size: 20px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 10px;
    }

    .bento-card p {
      color: var(--text-muted);
      font-size: 15px;
      line-height: 1.8;
      margin-bottom: 14px;
    }

    .bento-caption {
      font-size: 13px;
      color: var(--brand-deep);
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .bento-lg {
      grid-column: span 7;
    }

    .bento-sm {
      grid-column: span 5;
    }

    .bento-wide {
      grid-column: span 12;
    }

    .bento-stack {
      grid-column: span 5;
      display: grid;
      gap: 24px;
    }

    @media (max-width: 991.98px) {
      .bento-lg,
      .bento-stack,
      .bento-sm,
      .bento-wide {
        grid-column: 1 / -1;
      }

      .bento-stack {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 767.98px) {
      .grid-bento {
        gap: 16px;
      }

      .bento-card {
        padding: 24px 20px;
      }
    }

    .step-card {
      background: var(--white);
      border-radius: var(--r-lg);
      border: 1px solid var(--line);
      padding: 28px 24px;
      height: 100%;
      position: relative;
      box-shadow: var(--shadow-sm);
      transition: all .25s ease;
    }

    .step-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
      border-color: rgba(15, 191, 159, .48);
    }

    .step-index {
      position: absolute;
      top: 20px;
      right: 22px;
      font-size: 42px;
      font-weight: 800;
      color: rgba(15, 191, 159, .16);
      line-height: 1;
      letter-spacing: -2px;
    }

    .step-icon {
      width: 44px;
      height: 44px;
      border-radius: 14px;
      background: #EAF8F4;
      color: var(--brand-deep);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      margin-bottom: 16px;
    }

    .step-card h3 {
      font-size: 18px;
      color: var(--ink);
    }

    .step-card p {
      color: var(--text-muted);
      font-size: 14px;
      line-height: 1.75;
      margin-bottom: 0;
    }

    @media (max-width: 767.98px) {
      .section {
        padding: 64px 0;
      }
    }

    .security-list {
      display: grid;
      gap: 18px;
      margin: 0;
    }

    .security-item {
      display: flex;
      gap: 16px;
      align-items: flex-start;
      background: var(--white);
      border-radius: var(--r-md);
      border: 1px solid var(--line);
      padding: 20px;
      transition: all .22s ease;
    }

    .security-item:hover {
      border-color: rgba(15, 191, 159, .46);
      box-shadow: var(--shadow-sm);
    }

    .security-item i {
      width: 42px;
      height: 42px;
      flex: 0 0 42px;
      border-radius: 12px;
      background: linear-gradient(145deg, #FF8A4C, #FF7A3C);
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 17px;
    }

    .security-item h4 {
      font-size: 16px;
      margin-bottom: 4px;
      color: var(--ink);
    }

    .security-item p {
      font-size: 14px;
      color: var(--text-muted);
      margin: 0;
    }

    .band-depth {
      position: relative;
      overflow: hidden;
    }

    .band-depth::before {
      content: "";
      position: absolute;
      top: -120px;
      right: -80px;
      width: 360px;
      height: 360px;
      background: radial-gradient(circle, rgba(15, 191, 159, .18), transparent 68%);
      pointer-events: none;
    }

    .band-title {
      color: #fff;
    }

    .metric-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }

    .metric-card {
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: var(--r-lg);
      padding: 26px 22px;
      backdrop-filter: blur(4px);
      transition: all .24s ease;
    }

    .metric-card:hover {
      background: rgba(255, 255, 255, .10);
      border-color: rgba(15, 191, 159, .45);
      transform: translateY(-4px);
    }

    .metric-num {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 32px;
      font-weight: 800;
      color: var(--accent);
      letter-spacing: .5px;
      font-variant-numeric: tabular-nums;
      margin-bottom: 10px;
    }

    .metric-card h3 {
      font-size: 17px;
      color: #fff;
      margin-bottom: 6px;
    }

    .metric-card p {
      color: rgba(255, 255, 255, .6);
      font-size: 14px;
      line-height: 1.7;
      margin: 0;
    }

    @media (max-width: 991.98px) {
      .metric-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 575.98px) {
      .metric-grid {
        grid-template-columns: 1fr;
      }

      .section-head {
        margin-bottom: 40px;
      }
    }

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

    .accordion-item {
      border: 1px solid var(--line);
      border-radius: var(--r-md) !important;
      overflow: hidden;
      background: #fff;
      margin-bottom: 14px;
      transition: border-color .2s ease, box-shadow .2s ease;
    }

    .accordion-item:last-child {
      margin-bottom: 0;
    }

    .accordion-item:has(.accordion-button:focus-visible) {
      box-shadow: 0 0 0 4px rgba(15, 191, 159, .14);
    }

    .accordion-button {
      background: #fff;
      color: var(--ink);
      font-weight: 600;
      font-size: 16px;
      padding: 19px 24px;
      border: 0;
      box-shadow: none;
      transition: background .22s ease, color .22s ease;
    }

    .accordion-button::after {
      content: "\f067";
      font-family: "Font Awesome 6 Free";
      background: none;
      font-weight: 900;
      width: auto;
      height: auto;
      color: var(--brand-deep);
      font-size: 15px;
      transform: none;
    }

    .accordion-button:not(.collapsed)::after {
      content: "\f068";
      color: var(--brand-deep);
      transform: none;
    }

    .accordion-button:not(.collapsed) {
      background: #EDFBF8;
      color: var(--ink);
      box-shadow: inset 0 -1px 0 rgba(15, 191, 159, .12);
    }

    .accordion-button:focus {
      box-shadow: 0 0 0 3px rgba(15, 191, 159, .18);
    }

    .accordion-button:hover {
      background: #F4FDFA;
      color: var(--brand-deep);
    }

    .accordion-body {
      padding: 20px 24px;
      color: var(--text);
      font-size: 15px;
      line-height: 1.9;
      background: #fff;
      border-top: 1px solid rgba(15, 191, 159, .08);
    }

    .cta-panel {
      position: relative;
      border-radius: 28px;
      overflow: hidden;
      padding: 58px 56px;
      background:
        linear-gradient(125deg, rgba(12, 27, 26, .97), rgba(10, 95, 88, .92), rgba(15, 191, 159, .80)),
        url('/assets/images/backpic/back-2.png') center / cover no-repeat;
      color: #fff;
    }

    .cta-panel::after {
      content: "";
      position: absolute;
      right: -80px;
      top: -80px;
      width: 280px;
      height: 280px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 255, 255, .11), transparent 60%);
      pointer-events: none;
    }

    .cta-panel h2 {
      color: #fff;
      font-size: clamp(26px, 3.2vw, 36px);
      font-weight: 800;
      margin-bottom: 14px;
    }

    .cta-panel p {
      color: rgba(255, 255, 255, .84);
      max-width: 580px;
      font-size: 16px;
    }

    .cta-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 24px;
    }

    @media (max-width: 767.98px) {
      .cta-panel {
        padding: 38px 24px;
      }

      .cta-actions .btn {
        width: 100%;
      }
    }

    .site-footer {
      background: var(--ink);
      color: rgba(255, 255, 255, .74);
      padding: 72px 0 26px;
    }

    .site-footer .footer-brand-p {
      color: rgba(255, 255, 255, .6);
      margin-top: 16px;
      font-size: 14px;
      max-width: 320px;
    }

    .site-footer .brand-lockup .brand-text strong {
      color: #fff;
    }

    .site-footer .brand-lockup .brand-text span {
      color: var(--brand);
    }

    .footer-title {
      font-size: 15px;
      color: #fff;
      font-weight: 600;
      margin-bottom: 16px;
    }

    .footer-links {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 10px;
    }

    .footer-links a {
      color: rgba(255, 255, 255, .62);
      font-size: 14px;
      transition: color .22s ease, padding-left .22s ease;
    }

    .footer-links a:hover {
      color: var(--brand);
      padding-left: 4px;
    }

    .footer-links li {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      color: rgba(255, 255, 255, .62);
      font-size: 14px;
    }

    .footer-links i {
      color: var(--brand);
      margin-top: 4px;
    }

    .footer-bottom {
      border-top: 1px solid rgba(255, 255, 255, .10);
      padding-top: 24px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 10px;
      font-size: 13px;
      color: rgba(255, 255, 255, .4);
    }

    @media (max-width: 767.98px) {
      .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
      }
    }

/* roulang page: article */
:root {
  --brand: #0FBF9F;
  --brand-dark: #0A8F80;
  --brand-deep: #0B6E6B;
  --accent: #FF7A3C;
  --ink: #0C1B1A;
  --ink-2: #122624;
  --bg: #F5F7F6;
  --card: #FFFFFF;
  --text: #1F2937;
  --text-weak: #6B7280;
  --border: #E5E7EB;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --shadow-sm: 0 1px 3px rgba(16,32,28,.08);
  --shadow-hover: 0 14px 30px rgba(16,32,28,.12);
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "HarmonyOS Sans SC", "Noto Sans CJK SC", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible {
  outline: 3px solid rgba(15,191,159,.45);
  outline-offset: 2px;
  border-radius: 8px;
}
img { max-width: 100%; height: auto; display: block; }
.container { max-width: 1200px; }
ul, ol { padding-left: 1.2em; }
h1, h2, h3, h4, h5, h6 { line-height: 1.35; font-weight: 700; color: var(--ink); }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand-dark);
}
.eyebrow::before { content: ""; width: 24px; height: 2px; border-radius: 4px; background: var(--brand); }
/* ========== Header & Nav ========== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1040;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid #EDF1EF;
  box-shadow: 0 4px 20px rgba(12,27,26,.04);
}
.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 12px;
}
.brand-lockup { display: inline-flex; align-items: center; gap: 12px; }
.brand-icon {
  width: 44px;
  height: 44px;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(135deg, #0FBF9F, #0B6E6B);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 8px 18px rgba(15,191,159,.28);
  flex-shrink: 0;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-text strong { font-size: 21px; font-weight: 800; color: var(--ink); letter-spacing: .01em; }
.brand-text span {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-dark);
  background: rgba(15,191,159,.12);
  border-radius: 999px;
  padding: 2px 10px;
  display: inline-block;
  width: fit-content;
  margin-top: 3px;
}
.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #0FBF9F, #0A8F80);
  color: #fff;
  border: 0;
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 6px 16px rgba(10,143,128,.28);
  transition: all .2s ease;
}
.header-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(10,143,128,.34);
  color: #fff;
}
.header-cta:active { transform: translateY(0); box-shadow: 0 4px 10px rgba(10,143,128,.24); }
.chip-nav {
  display: flex;
  gap: 8px;
  padding: 12px 0;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.chip-nav::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 18px;
  border-radius: 999px;
  background: #fff;
  border: 1.2px solid var(--border);
  color: #334155;
  font-size: 14px;
  font-weight: 600;
  transition: all .2s ease;
}
.chip:hover {
  border-color: var(--brand);
  color: var(--brand-dark);
  background: rgba(15,191,159,.05);
  box-shadow: var(--shadow-sm);
}
.chip.active {
  background: linear-gradient(135deg, #0FBF9F, #0A8F80);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 18px rgba(15,191,159,.30);
}
/* ========== Buttons ========== */
.btn { border-radius: 12px; font-weight: 600; padding: 11px 24px; border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: all .22s ease; }
.btn-brand {
  background: linear-gradient(135deg, #0FBF9F, #0A8F80);
  color: #fff;
  box-shadow: 0 6px 16px rgba(10,143,128,.26);
}
.btn-brand:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 24px rgba(10,143,128,.34); }
.btn-brand:active { transform: translateY(0); box-shadow: 0 4px 10px rgba(10,143,128,.26); }
.btn-ghost { background: transparent; border: 1.5px solid rgba(255,255,255,.55); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }
.btn-amber { background: linear-gradient(135deg, #FF7A3C, #F06030); color: #fff; box-shadow: 0 8px 18px rgba(255,122,60,.3); }
.btn-amber:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(255,122,60,.38); }
.btn-text-line { display: inline-flex; align-items: center; gap: 8px; color: var(--brand-dark); font-weight: 700; font-size: 14px; }
.btn-text-line i { transition: transform .2s ease; }
.btn-text-line:hover { color: var(--brand-deep); }
.btn-text-line:hover i { transform: translateX(4px); }
/* ========== Article Hero ========== */
.article-page-hero {
  position: relative;
  color: #fff;
  padding: 48px 0 96px;
  background: linear-gradient(135deg, #0C1B1A 0%, #0B6E6B 62%, #0A8F80 100%);
  overflow: hidden;
}
.article-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('/assets/images/backpic/back-2.png');
  background-size: cover;
  background-position: center;
  opacity: .26;
  mix-blend-mode: screen;
}
.article-page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(255,122,60,.26), transparent 28%), linear-gradient(100deg, rgba(12,27,26,.92) 0%, rgba(11,110,107,.68) 100%);
}
.article-hero-inner { position: relative; z-index: 2; }
.breadcrumb-nav { margin-bottom: 34px; }
.breadcrumb-nav .breadcrumb {
  margin: 0;
  background: transparent;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.breadcrumb-nav .breadcrumb li { display: inline-flex; align-items: center; color: rgba(255,255,255,.66); }
.breadcrumb-nav .breadcrumb a { color: rgba(255,255,255,.86); transition: color .2s; }
.breadcrumb-nav .breadcrumb a:hover { color: #fff; }
.breadcrumb-nav .breadcrumb li + li::before { content: "/"; margin-right: 8px; color: rgba(255,255,255,.38); }
.breadcrumb-nav .breadcrumb li.active { color: #fff; font-weight: 600; max-width: 460px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.article-title-row h1 {
  color: #fff;
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 0 0 20px;
  max-width: 880px;
  line-height: 1.3;
}
.article-meta { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.9);
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  backdrop-filter: blur(6px);
}
/* ========== Article Content Section ========== */
.article-content-section { position: relative; z-index: 3; padding: 0 0 80px; }
.article-layout-wrap { margin-top: -52px; }
.article-card {
  background: #fff;
  border: 1px solid rgba(229,231,235,.65);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(12,27,26,.08);
}
.article-cover { margin: 0; overflow: hidden; }
.article-cover img {
  width: 100%;
  height: clamp(240px, 36vw, 380px);
  object-fit: cover;
}
.gradient-divider { height: 5px; background: linear-gradient(90deg, #0FBF9F, #0A8F80 60%, #FF7A3C); }
.article-content { padding: 34px 38px 14px; }
.article-content p { font-size: 16.5px; line-height: 1.9; margin-bottom: 1.4em; color: #24303A; }
.article-content h2, .article-content h3, .article-content h4 { color: var(--ink); margin-top: 1.5em; margin-bottom: .7em; font-weight: 800; }
.article-content h2 { font-size: 23px; }
.article-content h3 { font-size: 20px; }
.article-content ul, .article-content ol { margin-bottom: 1.4em; padding-left: 1.3em; color: #24303A; }
.article-content li { margin-bottom: .5em; }
.article-content a { color: var(--brand-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.article-content a:hover { color: var(--brand-deep); }
.article-content blockquote {
  margin: 1.8em 0;
  padding: 18px 22px;
  border-left: 4px solid var(--brand);
  background: #EEFBF7;
  border-radius: 4px 16px 16px 4px;
  color: #35504C;
}
.article-content blockquote p { margin-bottom: .4em; }
.article-content img { border-radius: 16px; margin: 1.6em 0; box-shadow: var(--shadow-sm); }
.article-content figure { margin: 1.6em 0; }
.article-content figure img { margin: 0; }
.article-content figcaption { font-size: 13px; color: var(--text-weak); text-align: center; margin-top: 10px; }
.article-content pre {
  background: var(--ink);
  color: #E6F4F0;
  padding: 20px;
  border-radius: 16px;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.7;
  margin: 1.6em 0;
}
.article-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: rgba(15,191,159,.09);
  color: #116A5B;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: .92em;
}
.article-content pre code { background: transparent; color: inherit; padding: 0; }
.article-content table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 1.6em 0; font-size: 15px; }
.article-content table th, .article-content table td { padding: 12px 14px; border-bottom: 1px solid var(--border); }
.article-content table th { background: #F2F8F6; color: var(--ink); font-weight: 700; }
.article-content table tr:last-child td { border-bottom: 0; }
.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 38px 34px;
}
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #F0F7F5;
  color: #116A5B;
  border: 1px solid #D5EBE5;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}
/* ========== Related ========== */
.related-area { margin-top: 44px; }
.related-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.related-header h2 { font-size: 24px; margin: 6px 0 0; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.related-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.related-card:hover { transform: translateY(-4px); border-color: rgba(15,191,159,.65); box-shadow: var(--shadow-hover); }
.related-img { overflow: hidden; height: 142px; }
.related-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.related-card:hover .related-img img { transform: scale(1.04); }
.related-body { padding: 16px 18px 18px; flex: 1; display: flex; flex-direction: column; }
.related-label { font-size: 12px; font-weight: 700; color: var(--brand-dark); background: rgba(15,191,159,.08); padding: 3px 10px; border-radius: 999px; width: fit-content; margin-bottom: 10px; }
.related-body h3 { font-size: 16px; font-weight: 700; line-height: 1.45; margin-bottom: 8px; }
.related-body h3 a { color: var(--ink); }
.related-body h3 a:hover { color: var(--brand-dark); }
.related-body p { font-size: 13.5px; color: var(--text-weak); line-height: 1.65; flex: 1; margin-bottom: 12px; }
.related-foot { display: flex; align-items: center; justify-content: space-between; border-top: 1px dashed var(--border); padding-top: 12px; font-size: 12px; color: var(--text-weak); }
.related-foot .link-arrow { color: var(--brand-dark); font-weight: 700; }
/* ========== Sidebar ========== */
.article-aside { display: flex; flex-direction: column; gap: 24px; }
.side-widget {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.side-widget-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 18px;
  color: var(--ink);
}
.side-widget-title .title-mark { width: 4px; height: 18px; border-radius: 4px; background: linear-gradient(180deg, #0FBF9F, #0A8F80); }
.side-link-list { list-style: none; margin: 0; padding: 0; }
.side-link-list li + li { border-top: 1px solid #F0F4F2; }
.side-link-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 2px;
  color: #334155;
  font-size: 14px;
  font-weight: 500;
  transition: color .2s ea, padding-left .2s ease;
}
.side-link-list a i:first-child { color: var(--brand); width: 20px; }
.side-link-list a i:last-child { font-size: 12px; color: #C1CDCB; transition: transform .2s ease; }
.side-link-list a:hover { color: var(--brand-dark); padding-left: 6px; }
.side-link-list a:hover i:last-child { transform: translateX(3px); color: var(--brand-dark); }
.side-link-list a.current { color: var(--brand-dark); font-weight: 700; }
.side-note { margin-top: 14px; padding: 14px; background: #F0F7F5; border-radius: 14px; font-size: 13px; color: #35504C; line-height: 1.7; }
.side-security-card {
  border: 0;
  background: linear-gradient(135deg, #122624, #0C1B1A);
  color: rgba(255,255,255,.9);
  position: relative;
  overflow: hidden;
  padding: 26px 24px;
}
.side-security-card::after {
  content: "";
  position: absolute;
  right: -26px;
  top: -32px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: rgba(15,191,159,.16);
}
.side-security-card h3 { color: #fff; font-size: 17px; margin-bottom: 10px; position: relative; z-index: 2; }
.side-security-card p { font-size: 13.5px; line-height: 1.75; color: rgba(255,255,255,.78); margin-bottom: 16px; position: relative; z-index: 2; }
.side-mini-list { list-style: none; margin: 0; padding: 0; }
.side-mini-list li { display: flex; gap: 12px; align-items: flex-start; padding: 13px 0; border-bottom: 1px dashed #E8EFEC; }
.side-mini-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.side-mini-date { font-size: 12px; color: var(--brand-dark); font-variant-numeric: tabular-nums; font-weight: 700; flex-shrink: 0; margin-top: 3px; min-width: 34px; }
.side-mini-list a { font-size: 14px; font-weight: 500; color: #334155; transition: color .2s ease; }
.side-mini-list a:hover { color: var(--brand-dark); }
/* ========== CTA Section ========== */
.cta-section { padding: 0 0 80px; }
.cta-panel {
  background: linear-gradient(120deg, #0C1B1A 0%, #122624 55%, #0B6E6B 100%);
  border-radius: 28px;
  padding: 54px 52px;
  position: relative;
  overflow: hidden;
  color: #fff;
}
.cta-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('/assets/images/backpic/back-1.png');
  background-size: cover;
  background-position: center;
  opacity: .16;
  mix-blend-mode: screen;
}
.cta-panel .row { position: relative; z-index: 2; }
.cta-panel .eyebrow { color: #62E4C8; }
.cta-panel .eyebrow::before { background: #62E4C8; }
.cta-panel h2 { color: #fff; font-size: clamp(22px, 2.4vw, 31px); margin: 12px 0 16px; max-width: 620px; line-height: 1.4; }
.cta-panel p { color: rgba(255,255,255,.78); max-width: 640px; margin-bottom: 0; font-size: 15px; line-height: 1.85; }
/* ========== Footer ========== */
.site-footer {
  background: var(--ink);
  color: rgba(255,255,255,.7);
  padding: 64px 0 0;
  font-size: 14px;
}
.footer-brand-p { font-size: 13.5px; line-height: 1.8; color: rgba(255,255,255,.58); margin: 16px 0 0; max-width: 300px; }
.footer-title { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 18px; letter-spacing: .02em; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 11px; }
.footer-links a { color: rgba(255,255,255,.68); display: inline-flex; align-items: center; gap: 10px; transition: color .2s ease, padding-left .2s ease; }
.footer-links a:hover { color: #62E4C8; padding-left: 4px; }
.footer-links i { color: rgba(255,255,255,.42); width: 18px; text-align: center; }
.site-footer .footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 44px;
  padding: 22px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  color: rgba(255,255,255,.45);
  font-size: 12.5px;
}
.site-footer .footer-bottom .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; }
/* ========== Not Found ========== */
.not-found-section { min-height: 62vh; background: var(--bg); display: flex; align-items: center; justify-content: center; text-align: center; padding: 80px 20px; }
.not-found-section h1 { font-size: 32px; font-weight: 800; margin-bottom: 20px; }
.not-found-section .missing-icon {
  width: 76px; height: 76px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: rgba(15,191,159,.1);
  color: var(--brand-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
}
/* ========== Responsive ========== */
@media (max-width: 991.98px) {
  .related-grid { grid-template-columns: repeat(2, 1fr); }
  .related-grid .related-card:last-child { grid-column: 1 / -1; }
  .article-aside { margin-top: 8px; }
}
@media (max-width: 767.98px) {
  .header-top { padding-top: 10px; }
  .brand-text strong { font-size: 18px; }
  .brand-icon { width: 40px; height: 40px; font-size: 17px; border-radius: 13px; }
  .header-cta span { display: none; }
  .header-cta { padding: 10px 13px; border-radius: 12px; }
  .article-page-hero { padding: 36px 0 88px; }
  .article-layout-wrap { margin-top: -36px; }
  .article-content { padding: 24px 20px 8px; }
  .article-tags { padding: 12px 20px 26px; }
  .article-content p { font-size: 16px; line-height: 1.85; }
  .related-grid { grid-template-columns: 1fr; }
  .related-grid .related-card:last-child { grid-column: auto; }
  .cta-panel { padding: 34px 22px; border-radius: 22px; }
  .site-footer { padding: 48px 0 0; }
  .side-widget { padding: 18px; }
}
@media (max-width: 575.98px) {
  .breadcrumb-nav .breadcrumb li { font-size: 13px; }
  .meta-chip { font-size: 12px; padding: 5px 11px; }
  .related-header h2 { font-size: 21px; }
  .article-cover img { height: 210px; }
  .cta-panel p { font-size: 14px; }
}

/* roulang page: category2 */
:root{
  --brand:#0FBF9F;
  --brand-dark:#0A8F80;
  --brand-deep:#087a72;
  --teal:#0B6E6B;
  --indigo-deep:#0C1B1A;
  --deep-2:#122624;
  --accent:#FF7A3C;
  --bg:#F5F7F6;
  --card:#FFFFFF;
  --text:#1F2937;
  --muted:#6B7280;
  --line:#E5E7EB;
  --radius-xl:20px;
  --radius-lg:16px;
  --radius-md:12px;
  --shadow-sm:0 1px 3px rgba(16,32,28,.08);
  --shadow-md:0 12px 28px rgba(16,32,28,.10);
  --shadow-btn:0 4px 0 rgba(7,86,78,.35);
  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","HarmonyOS Sans SC","Noto Sans CJK SC",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.75;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
.container{max-width:1220px}
img{max-width:100%;display:block}
a{color:var(--brand-dark);text-decoration:none;transition:color .2s ease}
a:hover{color:var(--brand-deep)}
a,a:hover,a:focus{outline:none}
.btn:focus-visible,.chip:focus-visible,a:focus-visible,input:focus-visible,button:focus-visible{
  outline:3px solid rgba(15,191,159,.4);
  outline-offset:2px;
}
h1,h2,h3,h4,h5,h6{line-height:1.35;font-weight:600;margin:0}
p{margin:0}
.font-num{font-variant-numeric:tabular-nums}
.bg-soft{background:#EEF4F2}

/* 按钮 */
.btn{
  border:0;
  border-radius:var(--radius-md);
  padding:11px 24px;
  font-size:15px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:9px;
  transition:all .2s ease;
  letter-spacing:.01em;
}
.btn i{font-size:.95em}
.btn-main{
  color:#fff !important;
  background:linear-gradient(135deg,var(--brand),var(--brand-dark));
  box-shadow:var(--shadow-btn),0 6px 18px rgba(15,191,159,.22);
}
.btn-main:hover{
  color:#fff !important;
  transform:translateY(-1px);
  background:linear-gradient(135deg,#17c9a9,#0f9b8b);
  box-shadow:0 5px 0 rgba(7,86,78,.32),0 12px 24px rgba(15,191,159,.3);
}
.btn-main:active{
  transform:translateY(3px);
  box-shadow:0 1px 0 rgba(7,86,78,.4);
}
.btn-ghost-white{
  color:#fff !important;
  background:rgba(255,255,255,.08);
  border:1.5px solid rgba(255,255,255,.55);
  backdrop-filter:blur(4px);
}
.btn-ghost-white:hover{background:rgba(255,255,255,.18);color:#fff !important;border-color:#fff}
.btn-outline-brand{
  color:var(--brand-dark) !important;
  background:transparent;
  border:1.5px solid rgba(15,191,159,.7);
}
.btn-outline-brand:hover{background:rgba(15,191,159,.08);color:var(--brand-deep) !important;border-color:var(--brand)}
.btn-accent{
  color:#fff !important;
  background:linear-gradient(135deg,#ff8a52,var(--accent));
  box-shadow:0 4px 0 rgba(190,80,25,.35),0 10px 20px rgba(255,122,60,.22);
}
.btn-accent:hover{color:#fff !important;transform:translateY(-1px);filter:saturate(1.05) brightness(1.03)}
.text-brand{color:var(--brand) !important}
.text-muted-2{color:var(--muted)}

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:1060;
  background:rgba(250,252,251,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(229,231,235,.7);
}
.header-inner{
  display:flex;
  align-items:center;
  gap:20px;
  min-height:74px;
  padding-top:10px;
  padding-bottom:10px;
}

/* Brand lockup */
.brand-lockup{
  display:inline-flex;
  align-items:center;
  gap:11px;
  flex-shrink:0;
  color:var(--text);
}
.brand-lockup:hover{color:var(--text)}
.brand-icon{
  width:44px;
  height:44px;
  flex:0 0 44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:linear-gradient(140deg,var(--brand),var(--teal));
  color:#fff;
  font-size:20px;
  box-shadow:0 8px 18px rgba(15,191,159,.28);
}
.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.2;
}
.brand-text strong{
  font-size:21px;
  font-weight:700;
  letter-spacing:-.01em;
  color:#0E2B27;
}
.brand-text span{
  font-size:12px;
  color:var(--muted);
  letter-spacing:.12em;
  margin-top:2px;
}
.brand-text .dash{width:24px;height:3px;border-radius:3px;background:var(--brand);display:inline-block;margin:6px 0 4px}

/* logo整体用于mobile导航下方 */

/* chip 导航 */
.chip-nav{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:8px;
  margin:0 auto;
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.chip-nav::-webkit-scrollbar{display:none}
.chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
  padding:9px 18px;
  border-radius:999px;
  font-size:14px;
  font-weight:500;
  color:#44534F;
  background:#F2F6F4;
  border:1px solid rgba(210,219,216,.85);
  transition:all .2s ease;
}
.chip i{font-size:13px;color:#82918c}
.chip:hover{
  color:var(--brand-deep);
  background:#E7F5F1;
  border-color:rgba(15,191,159,.45);
  transform:translateY(-1px);
}
.chip.active{
  background:#DDF6F0 !important;
  border-color:var(--brand) !important;
  color:var(--brand-deep) !important;
  font-weight:600;
  box-shadow:0 4px 14px rgba(15,191,159,.18);
}
.chip.active i{color:var(--brand)}
.chip-success{
  background:#e7faf5;
  border-color:#bfeadd;
  color:var(--brand-deep);
}

.header-cta{margin-left:6px;flex-shrink:0}
.header-cta .btn{padding:9px 21px !important;font-size:14px}

/* mobile btn */
.mobile-toggle{
  display:none;
  border:0;
  background:#F0F6F4;
  width:46px;
  height:46px;
  border-radius:12px;
  color:#123B34;
  font-size:19px;
  align-items:center;
  justify-content:center;
}


/* mobile nav collapse */
.mobile-nav-collapse{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
  background:rgba(255,255,255,.98);
  border-bottom:1px solid var(--line);
}
.mobile-nav-collapse.open{max-height:520px;padding-bottom:14px}
.mobile-nav-inner{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-top:10px;
}
.mobile-nav-inner a{
  padding:11px 18px;
  border-radius:14px;
  font-size:15px;
  text-align:center;
  color:#34413d;
  border:1px solid var(--line);
  background:#fff;
}
.mobile-nav-inner a:hover{border-color:var(--brand);color:var(--brand-deep)}
.mobile-nav-inner a.active{background:#DDF6F0;border-color:var(--brand);color:var(--brand-deep);font-weight:600}
.mobile-nav-cta{display:flex;gap:8px}
.mobile-nav-cta .btn{flex:1;justify-content:center;margin-top:8px}

/* Hero 安全现场感 */
.security-hero{
  position:relative;
  background:
    linear-gradient(135deg,#0C1B1A 0%,#0F2824 55%,rgba(11,110,107,.88) 100%),
    url('/assets/images/backpic/back-2.png') center/cover;
  min-height:660px;
  display:flex;
  align-items:center;
  overflow:hidden;
  color:#fff;
  padding:80px 0 72px;
}
.security-hero::after{
  content:"";
  position:absolute;
  inset:auto -15% -42% 55%;
  width:520px;
  height:520px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(15,191,159,.22),transparent 68%);
  pointer-events:none;
}
.page-section{
  padding:96px 0;
}
.section-head{
  max-width:820px;
  margin-bottom:50px;
}
.section-head.center{margin-inline:auto;text-align:center}
.section-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  letter-spacing:.16em;
  font-weight:700;
  color:var(--brand-dark);
  background:rgba(15,191,159,.1);
  padding:6px 15px;
  border-radius:999px;
  margin-bottom:16px;
}
.section-eyebrow.light{
  color:#65E3C9;
  background:rgba(255,255,255,.08);
}
.section-title{
  font-size:32px;
  font-weight:700;
  color:#12352F;
}
.section-head p{
  margin-top:14px;
  color:var(--muted);
  font-size:16px;
}
.section-head.center p{margin-inline:auto}

/* hero copy */
.hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.12em;
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(4px);
  border-radius:999px;
  padding:7px 15px;
  color:#B8F2E6;
  margin-bottom:24px;
}
.hero-title{
  font-size:48px;
  font-weight:700;
  color:#fff;
  letter-spacing:-.02em;
  margin-bottom:20px;
}
.hero-title .split{
  display:block;
  color:#8EEBD5;
  font-weight:400;
  font-size:34px;
  margin-top:8px;
}
.hero-lead{
  max-width:560px;
  color:#C9DEDA;
  font-size:16px;
  margin-bottom:30px;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.hero-note{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:34px;
  color:#A9C8C1;
  font-size:14px;
}
.hero-note i{
  background:rgba(15,191,159,.2);
  width:32px;
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:#66E3CA;
  flex:0 0 32px;
}

/* hero visual */
.hero-visual{
  position:relative;
  margin-left:auto;
  min-height:420px;
}
.hero-frame{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  background:var(--deep-2);
  box-shadow:0 28px 70px rgba(0,0,0,.35);
  min-height:420px;
}
.hero-frame img{
  width:100%;
  height:420px;
  object-fit:cover;
}
.hero-frame::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(155deg,rgba(12,27,26,.05),rgba(10,82,78,.4));
}
.hero-float{
  position:absolute;
  z-index:5;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);
  border-radius:16px;
  box-shadow:0 16px 36px rgba(0,0,0,.18);
  padding:14px 18px;
  display:flex;
  align-items:center;
  gap:12px;
  border-left:5px solid var(--brand);
}
.float-one{top:28px;right:-6px;max-width:280px}
.float-two{bottom:30px;left:-18px;max-width:300px}
.hero-float-icon{
  width:40px;height:40px;
  flex:0 0 40px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(140deg,var(--brand),var(--teal));
  color:#fff;
  font-size:17px;
}
.hero-float-title{
  font-size:14px;
  color:#083B35;
  font-weight:600;
}
.hero-float-sub{
  font-size:12px;
  color:var(--muted);
  line-height:1.5;
}
.hero-frame-label{
  position:absolute;
  right:22px;
  bottom:20px;
  z-index:4;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(8px);
  border-radius:999px;
  padding:6px 13px;
  color:#F0FBF9;
  font-size:12px;
  letter-spacing:.05em;
}
.security-hero + .hero-curve{
  width:100%;
  height:62px;
  background:url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1440 70\'%3E%3Cpath fill=\'%23F5F7F6\' d=\'M0,50 C320,110 900,-20 1440,45 L1440,70 L0,70 Z\'/%3E%3C/svg%3E') bottom center no-repeat;
  background-size:cover;
  transform:translateY(-1px);
}

/* 步骤区 */
.step-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
  margin-top:26px;
}
.step-card{
  background:var(--card);
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  padding:30px 24px 26px;
  transition:all .25s ease;
  position:relative;
}
.step-card::before{
  content:"";
  position:absolute;
  top:0;left:26px;right:26px;
  height:3px;
  border-radius:3px;
  background:linear-gradient(90deg,var(--brand),transparent);
  opacity:0;
  transition:.25s;
}
.step-card:hover{
  transform:translateY(-3px);
  border-color:rgba(15,191,159,.5);
  box-shadow:var(--shadow-md);
}
.step-card:hover::before{opacity:1}
.step-index{
  font-size:14px;
  font-weight:700;
  color:var(--brand);
  letter-spacing:.14em;
  margin-bottom:16px;
  display:block;
}
.step-icon{
  width:52px;height:52px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:22px;
  background:linear-gradient(140deg,var(--brand),var(--teal));
  margin-bottom:20px;
  box-shadow:0 10px 20px rgba(15,191,159,.22);
}
.step-card h3{font-size:18px;color:#163B35;margin-bottom:10px}
.step-card p{font-size:14px;color:var(--muted);line-height:1.8}

/* 图文交替 */
.feature-split + .feature-split{margin-top:60px}
.feature-copy{padding-right:28px}
.feature-copy .feature-label{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--brand-dark);
  background:rgba(15,191,159,.1);
  padding:5px 12px;
  border-radius:999px;
  margin-bottom:18px;
}
.feature-copy h3{font-size:26px;color:#123B34;margin-bottom:14px}
.feature-copy p{font-size:15px;color:var(--muted);margin-bottom:20px}
.feature-points{list-style:none;padding:0;margin:0}
.feature-points li{
  display:flex;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid rgba(229,231,235,.8);
  font-size:15px;
  color:#2C403B;
}
.feature-points li:last-child{border:0}
.feature-points li i{
  color:var(--brand);
  margin-top:5px;
  width:18px;
  flex:0 0 18px;
}
.feature-media{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  background:var(--deep-2);
  box-shadow:var(--shadow-md);
}
.feature-media img{
  width:100%;
  height:100%;
  min-height:300px;
  object-fit:cover;
  transition:transform .5s ease;
}
.feature-media:hover img{transform:scale(1.03)}
.feature-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(35deg,rgba(12,27,26,.25),rgba(15,191,159,.08));
}
.feature-note-card{
  position:absolute;
  left:20px;
  bottom:20px;
  right:20px;
  z-index:3;
  background:rgba(255,255,255,.95);
  border-radius:14px;
  padding:13px 17px;
  font-size:13px;
  color:#28524a;
  display:flex;
  gap:10px;
  align-items:center;
  box-shadow:0 10px 28px rgba(0,0,0,.14);
}
.feature-note-card i{color:var(--brand);font-size:17px}

/* 场景 list */
.scenario-list{display:flex;flex-direction:column;gap:16px}
.scenario-card{
  background:#fff;
  border-radius:var(--radius-lg);
  border:1px solid #E4EDE9;
  padding:24px 26px;
  display:flex;
  align-items:flex-start;
  gap:22px;
  position:relative;
  transition:all .25s ease;
}
.scenario-card:hover{
  border-color:rgba(15,191,159,.6);
  box-shadow:var(--shadow-md);
  transform:translateX(4px);
}
.scenario-num{
  font-size:36px;
  font-weight:700;
  color:rgba(15,191,159,.22);
  line-height:1;
  font-variant-numeric:tabular-nums;
  min-width:52px;
  margin-top:4px;
}
.scenario-main{flex:1}
.scenario-main h3{font-size:18px;color:#123B34;margin-bottom:6px}
.scenario-main p{font-size:15px;color:var(--muted);max-width:920px}
.scenario-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:600;
  color:var(--brand-deep);
  background:#EAF8F4;
  padding:5px 14px;
  border-radius:999px;
  white-space:nowrap;
  flex-shrink:0;
  margin-top:8px;
}
.scenario-card .scenario-arrow{
  width:36px;
  height:36px;
  flex:0 0 36px;
  border-radius:12px;
  border:1px solid #D7E7E2;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--brand);
  transition:all .25s;
}
.scenario-card:hover .scenario-arrow{
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
  transform:translateX(3px);
}

/* 深色指标 */
.security-metrics{
  background:linear-gradient(135deg,var(--indigo-deep) 0%,var(--deep-2) 65%,#173B36 100%);
  padding:84px 0;
  color:#fff;
  position:relative;
  overflow:hidden;
}
.security-metrics::before{
  content:"";
  position:absolute;
  width:420px;height:420px;
  background:radial-gradient(circle,rgba(15,191,159,.18),transparent 70%);
  top:-120px;
  right:-100px;
}
.metric-head{
  text-align:center;
  margin-bottom:56px;
}
.metric-head .section-eyebrow{margin-inline:auto}
.metric-title{font-size:32px;color:#fff;font-weight:700}
.metric-head p{color:#ACCAC4;margin-top:12px}
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.metric-card{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.1);
  border-radius:22px;
  padding:32px 24px 28px;
  text-align:center;
  backdrop-filter:blur(6px);
  transition:all .25s;
}
.metric-card:hover{
  background:rgba(255,255,255,.1);
  border-color:rgba(15,191,159,.5);
  transform:translateY(-4px);
}
.metric-icon{
  width:46px;height:46px;
  margin:0 auto 14px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#0C1B1A;
  font-size:20px;
  background:linear-gradient(135deg,#8CEBD5,#3ED1B5);
}
.metric-card:nth-child(2) .metric-icon{
  background:linear-gradient(135deg,#FFB48A,#FF8060);
}
.metric-num{
  font-size:36px;
  font-weight:700;
  color:#fff;
  line-height:1.15;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.metric-num small{font-size:18px;margin-left:2px;color:#A6E8DC}
.metric-label{
  display:block;
  font-size:14px;
  font-weight:600;
  color:#C9EAE3;
  margin-top:10px;
}
.metric-desc{font-size:12px;color:#99BEb7;margin-top:8px;line-height:1.6}
.metric-footer{
  text-align:center;
  margin-top:36px;
  color:#A4C8C2;
  font-size:14px;
}

/* FAQ */
.faq-accordion{
  max-width:920px;
  margin:0 auto;
}
.faq-item{
  background:#fff;
  border:1px solid #E2EAE7 !important;
  border-radius:16px !important;
  margin-bottom:14px;
  overflow:hidden;
  transition:border-color .25s;
}
.faq-item:hover{
  border-color:rgba(15,191,159,.55) !important;
}
.faq-item:has(.show){border-color:var(--brand)!important}
.faq-button{
  width:100%;
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 22px;
  background:#fff;
  border:0;
  font-family:inherit;
  text-align:left;
  color:#143B35;
  font-size:16px;
  font-weight:600;
  border-radius:16px !important;
  box-shadow:none !important;
  transition:background .2s;
}
.faq-button:hover,
.faq-button[aria-expanded="true"]{
  background:#F1FCF8;
  color:var(--brand-deep);
}
.faq-q{
  width:34px;
  height:34px;
  flex:0 0 34px;
  border-radius:10px;
  background:linear-gradient(140deg,var(--brand),var(--teal));
  color:#fff;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
}
.faq-icon{
  margin-left:auto;
  width:30px;
  height:30px;
  border-radius:50%;
  border:1px solid #C9DEDA;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--brand);
  font-size:12px;
  transition:all .25s;
  flex:0 0 30px;
}
.faq-button[aria-expanded="true"] .faq-icon{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
  transform:rotate(45deg);
}
.accordion-body.faq-body{
  padding:0 22px 20px 70px;
  font-size:15px;
  color:var(--muted);
  line-height:1.9;
  border-top:1px solid #ECF3F0;
}
.faq-body-inner{padding-top:16px}

/* CTA 大卡 */
.cta-strip{padding:80px 0 96px}
.cta-card{
  position:relative;
  overflow:hidden;
  background:linear-gradient(120deg,#0FBF9F 0%,#0B8078 60%,#0C6462 100%);
  border-radius:24px;
  padding:52px 56px;
  color:#fff;
  box-shadow:0 20px 55px rgba(11,110,107,.25);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
}
.cta-card::after{
  content:"";
  position:absolute;
  width:380px;height:380px;
  border-radius:50%;
  background:rgba(255,255,255,.07);
  bottom:-190px;
  right:-90px;
}
.cta-card-content{position:relative;z-index:2}
.cta-card-content h2{
  font-size:30px;
  font-weight:700;
  margin-bottom:12px;
}
.cta-card-content p{
  color:rgba(255,255,255,.9);
  max-width:560px;
  font-size:15px;
}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px;position:relative;z-index:2;flex-shrink:0}
.cta-actions .btn-ghost-white{border-color:rgba(255,255,255,.85)}

/* footer */
.site-footer{
  background:#0D1F1D;
  color:#BFCECB;
  padding-top:64px;
  border-top:5px solid var(--brand);
}
.footer-brand .brand-lockup{color:#fff}
.footer-brand .brand-lockup:hover{color:#dff0eb}
.footer-brand .brand-text span{color:#8AA9A4}
.footer-brand-p{
  font-size:15px;
  color:#8FAEAA;
  max-width:360px;
  margin-top:16px;
  line-height:1.8;
}
.footer-title{
  font-size:16px;
  font-weight:600;
  color:#E7F5F2;
  margin-bottom:18px;
  padding-bottom:10px;
  position:relative;
}
.footer-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:34px;
  height:3px;
  border-radius:3px;
  background:var(--brand);
}
.footer-links{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:11px;
}
.footer-links a{
  color:#BFD6D1;
  font-size:14px;
  transition:all .2s;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.footer-links a:hover{
  color:#6DE6CD;
  padding-left:4px;
}
.footer-links li{
  color:#93B2AD;
  font-size:14px;
}
.footer-links li i{color:#52D6BA;width:16px}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding:22px 0;
  margin-top:50px !important;
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  color:#6F918C;
  font-size:13px;
}
.footer-bottom .container{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
}

@media (max-width:1199px){
  .hero-title{font-size:42px}
  .float-one{right:0}
}
@media (max-width:991px){
  .header-inner{flex-wrap:wrap}
  .chip-nav{order:3;flex:0 0 100%;margin:4px 0 0;justify-content:flex-start}
  .header-cta{display:none !important}
  .page-section{padding:72px 0}
  .security-hero{min-height:auto}
  .hero-visual{margin-top:52px}
  .hero-title{font-size:40px}
  .hero-title .split{font-size:30px}
  .step-grid{grid-template-columns:repeat(2,1fr)}
  .metric-grid{grid-template-columns:repeat(2,1fr)}
  .feature-copy{padding-right:0;margin-bottom:28px}
  .cta-card{flex-direction:column;align-items:flex-start;padding:44px}
}
@media (max-width:767px){
  .mobile-toggle{
    display:inline-flex;
    margin-left:auto;
  }
  .chip-nav{
    display:none;
    order:2;
  }
  .header-inner{
    min-height:66px;
    gap:12px;
  }
  .brand-icon{width:40px;height:40px;flex-basis:40px}
  .brand-text strong{font-size:19px}
  .brand-text span{font-size:10px}
  .page-section{padding:54px 0}
  .section-title{font-size:24px}
  .security-hero{padding:56px 0 60px}
  .hero-title{font-size:31px;margin-bottom:16px}
  .hero-title .split{font-size:23px}
  .hero-lead{font-size:15px}
  .hero-visual{min-height:320px}
  .hero-frame{min-height:320px}
  .hero-frame img{height:330px}
  .hero-float{
    left:8px;right:8px;
    max-width:none;
  }
  .float-one{
    position:relative;
    top:auto;
    left:10px;
    right:10px;
    margin-bottom:-30px;
    transform:translateY(-16px);
  }
  .float-two{bottom:-30px;left:15px;right:auto;max-width:280px}
  .step-grid{grid-template-columns:1fr;gap:16px}
  .metric-grid{grid-template-columns:1fr 1fr;gap:14px}
  .metric-num{font-size:30px}
  .metric-card{padding:24px 14px}
  .scenario-card{
    flex-direction:column;
    gap:12px;
    padding:22px;
  }
  .scenario-num{font-size:30px;min-width:auto}
  .scenario-arrow{display:none}
  .faq-button{font-size:14px;padding:16px 16px}
  .accordion-body.faq-body{padding:0 16px 18px 56px}
  .cta-card{padding:34px 22px;border-radius:18px}
  .cta-card-content h2{font-size:24px}
  .cta-actions .btn{width:100%;justify-content:center}
  .footer-bottom .container{flex-direction:column}
}

/* roulang page: category3 */
:root {
      --brand: #0FBF9F;
      --brand-dark: #0A8F80;
      --brand-deep: #0B6E6B;
      --ink: #0C1B1A;
      --ink-2: #122624;
      --orange: #FF7A3C;
      --bg-soft: #F5F7F6;
      --card-bg: #FFFFFF;
      --text: #1F2937;
      --muted: #6B7280;
      --line: #E5E7EB;
      --radius-lg: 20px;
      --radius-md: 16px;
      --radius-sm: 12px;
      --shadow-1: 0 1px 3px rgba(16, 32, 28, 0.08);
      --shadow-2: 0 12px 28px rgba(16, 32, 28, 0.10);
      --font-cn: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "HarmonyOS Sans SC", "Noto Sans CJK SC", sans-serif;
    }

    html {
      scroll-behavior: smooth;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    body {
      font-family: var(--font-cn);
      background: var(--bg-soft);
      color: var(--text);
      line-height: 1.75;
      -webkit-font-smoothing: antialiased;
    }

    .container {
      max-width: 1200px;
    }

    a {
      text-decoration: none;
    }

    img {
      max-width: 100%;
    }

    button,
    input {
      font-family: inherit;
    }

    .section {
      padding: 96px 0;
    }

    .section-sm {
      padding: 64px 0;
    }

    .section-title {
      font-size: 30px;
      font-weight: 700;
      line-height: 1.35;
      letter-spacing: -0.01em;
      color: var(--ink);
      margin-bottom: 12px;
    }

    .section-sub {
      font-size: 18px;
      color: var(--muted);
      margin-bottom: 40px;
    }

    .text-muted {
      color: var(--muted) !important;
    }

    /* Brand */
    .brand-lockup {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--ink);
      white-space: nowrap;
    }

    .brand-lockup:hover .brand-text strong {
      color: var(--brand-dark);
    }

    .brand-icon {
      width: 42px;
      height: 42px;
      border-radius: 13px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, var(--brand), var(--brand-deep));
      color: #fff;
      font-size: 19px;
      box-shadow: 0 6px 14px rgba(15, 191, 159, 0.24);
    }

    .brand-text {
      display: flex;
      flex-direction: column;
      line-height: 1.15;
    }

    .brand-text strong {
      font-size: 20px;
      font-weight: 800;
      color: var(--ink);
      letter-spacing: -0.02em;
    }

    .brand-text span {
      font-size: 12px;
      color: var(--muted);
      letter-spacing: 0.06em;
    }

    /* Header */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 1050;
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(229, 231, 235, 0.8);
    }

    .header-inner {
      min-height: 76px;
      display: flex;
      align-items: center;
      gap: 18px;
    }

    .chip-nav {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-left: auto;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .chip-nav::-webkit-scrollbar {
      display: none;
    }

    .chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 16px;
      border: 1px solid var(--line);
      border-radius: 999px;
      font-size: 14px;
      color: var(--text);
      white-space: nowrap;
      background: #fff;
      transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
    }

    .chip i {
      font-size: 12px;
      opacity: 0.7;
    }

    .chip:hover,
    .chip:focus-visible {
      border-color: var(--brand);
      color: var(--brand-dark);
      background: rgba(15, 191, 159, 0.06);
    }

    .chip:focus-visible {
      outline: 2px solid rgba(15, 191, 159, 0.4);
      outline-offset: 2px;
    }

    .chip.active {
      background: rgba(15, 191, 159, 0.14);
      color: #055e53;
      border-color: rgba(15, 191, 159, 0.45);
      font-weight: 600;
    }

    .btn-header-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 42px;
      padding: 0 20px;
      background: linear-gradient(135deg, var(--brand), var(--brand-dark));
      color: #fff;
      border-radius: var(--radius-sm);
      font-size: 14px;
      font-weight: 600;
      border: 0;
      white-space: nowrap;
      box-shadow: 0 2px 6px rgba(15, 191, 159, 0.25);
      transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
    }

    .btn-header-cta:hover,
    .btn-header-cta:focus-visible {
      color: #fff;
      filter: brightness(1.05);
      transform: translateY(-1px);
      box-shadow: 0 6px 14px rgba(15, 191, 159, 0.32);
    }

    .btn-header-cta:active {
      transform: translateY(1px);
      box-shadow: 0 1px 3px rgba(15, 191, 159, 0.25);
    }

    .menu-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      color: var(--ink);
      font-size: 18px;
      cursor: pointer;
      transition: border-color .2s ease, background .2s ease;
    }

    .menu-toggle:hover {
      border-color: var(--brand);
      background: rgba(15, 191, 159, 0.06);
    }

    /* Buttons */
    .btn-brand {
      --bs-btn-color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: linear-gradient(135deg, var(--brand), var(--brand-dark));
      border: 0;
      border-radius: var(--radius-sm);
      padding: 12px 28px;
      font-size: 16px;
      font-weight: 600;
      color: #fff;
      box-shadow: 0 3px 0 rgba(6, 105, 95, 0.6);
      transition: transform .15s ease, box-shadow .15s ease, filter .2s ease;
    }

    .btn-brand:hover,
    .btn-brand:focus-visible {
      color: #fff;
      filter: brightness(1.04);
      transform: translateY(-2px);
      box-shadow: 0 5px 0 rgba(6, 105, 95, 0.6), 0 12px 24px rgba(15, 191, 159, 0.18);
      outline: none;
    }

    .btn-brand:active {
      transform: translateY(2px);
      box-shadow: 0 1px 0 rgba(6, 105, 95, 0.6);
    }

    .btn-outline-brand {
      --bs-btn-color: var(--brand-dark);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: transparent;
      border: 1.5px solid var(--brand);
      border-radius: var(--radius-sm);
      padding: 11px 26px;
      font-size: 16px;
      font-weight: 600;
      color: var(--brand-dark);
      transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
    }

    .btn-outline-brand:hover,
    .btn-outline-brand:focus-visible {
      background: rgba(15, 191, 159, 0.08);
      color: #05695f;
      transform: translateY(-1px);
      outline: 2px solid rgba(15, 191, 159, 0.3);
      outline-offset: 2px;
    }

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

    .btn-link-brand {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--brand-dark);
      font-weight: 600;
      border: 0;
      background: transparent;
      padding: 6px 0;
      transition: gap .2s ease, color .2s ease;
    }

    .btn-link-brand:hover {
      color: var(--ink);
      gap: 9px;
    }

    /* Hero */
    .login-faq-hero {
      position: relative;
      color: #fff;
      background:
        linear-gradient(120deg, rgba(12, 27, 26, 0.92), rgba(11, 110, 107, 0.62)),
        url('/assets/images/backpic/back-1.png') center / cover no-repeat;
      padding: 110px 0;
      overflow: hidden;
    }

    .login-faq-hero::after {
      content: "";
      position: absolute;
      right: -120px;
      bottom: -160px;
      width: 420px;
      height: 420px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 122, 60, 0.35), rgba(255, 122, 60, 0));
      pointer-events: none;
    }

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

    .hero-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 16px;
      background: rgba(255, 255, 255, 0.14);
      border: 1px solid rgba(255, 255, 255, 0.24);
      border-radius: 999px;
      font-size: 13px;
      letter-spacing: 0.03em;
      color: rgba(255, 255, 255, 0.95);
      margin-bottom: 22px;
    }

    .hero-title {
      font-size: 52px;
      font-weight: 800;
      line-height: 1.22;
      letter-spacing: -0.02em;
      max-width: 720px;
      margin-bottom: 18px;
    }

    .hero-title .text-brand-light {
      color: #5FE3C8;
    }

    .hero-lead {
      font-size: 18px;
      line-height: 1.9;
      max-width: 640px;
      color: rgba(255, 255, 255, 0.86);
      margin-bottom: 36px;
    }

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

    .btn-hero-primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 30px;
      background: var(--orange);
      color: #1b1b1b;
      border: 0;
      border-radius: var(--radius-sm);
      font-weight: 700;
      font-size: 16px;
      box-shadow: 0 4px 0 rgba(172, 72, 22, 0.7);
      transition: transform .15s ease, box-shadow .15s ease, filter .2s ease;
    }

    .btn-hero-primary:hover,
    .btn-hero-primary:focus-visible {
      filter: brightness(0.98);
      transform: translateY(-2px);
      box-shadow: 0 6px 0 rgba(172, 72, 22, 0.7), 0 14px 28px rgba(255, 122, 60, 0.35);
      color: #151515;
    }

    .btn-hero-primary:active {
      transform: translateY(2px);
      box-shadow: 0 1px 0 rgba(172, 72, 22, 0.7);
    }

    .btn-hero-ghost {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 28px;
      border: 1px solid rgba(255, 255, 255, 0.4);
      color: #fff;
      border-radius: var(--radius-sm);
      background: rgba(255, 255, 255, 0.05);
      font-size: 16px;
      font-weight: 600;
      transition: background .2s ease, border-color .2s ease, transform .2s ease;
    }

    .btn-hero-ghost:hover,
    .btn-hero-ghost:focus-visible {
      background: rgba(255, 255, 255, 0.12);
      border-color: rgba(255, 255, 255, 0.7);
      color: #fff;
      transform: translateY(-1px);
    }

    /* Cards */
    .trouble-card {
      height: 100%;
      background: #fff;
      border-radius: var(--radius-md);
      border: 1px solid rgba(229, 231, 235, 0.8);
      padding: 28px 24px;
      transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
    }

    .trouble-card:hover {
      transform: translateY(-4px);
      border-color: rgba(15, 191, 159, 0.45);
      box-shadow: var(--shadow-2);
    }

    .trouble-icon {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      background: rgba(15, 191, 159, 0.12);
      color: var(--brand-dark);
      margin-bottom: 18px;
    }

    .trouble-card h3 {
      font-size: 18px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 10px;
    }

    .trouble-card p {
      color: var(--muted);
      font-size: 15px;
      margin-bottom: 16px;
    }

    .card-link {
      font-size: 14px;
      font-weight: 600;
      color: var(--brand-dark);
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

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

    /* Dark / flow section */
    .flow-section {
      background: linear-gradient(135deg, var(--ink), #103231);
      color: #fff;
      border-radius: 0;
    }

    .flow-title {
      color: #fff;
    }

    .flow-step {
      position: relative;
      padding: 28px 24px;
      height: 100%;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: var(--radius-md);
      transition: background .2s ease, border-color .2s ease, transform .2s ease;
    }

    .flow-step:hover {
      background: rgba(255, 255, 255, 0.09);
      border-color: rgba(15, 191, 159, 0.45);
      transform: translateY(-4px);
    }

    .flow-num {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.08em;
      color: var(--brand);
      text-transform: uppercase;
      display: block;
      margin-bottom: 10px;
    }

    .flow-step h3 {
      font-size: 20px;
      margin-bottom: 12px;
    }

    .flow-step p {
      color: rgba(255, 255, 255, 0.7);
      font-size: 15px;
    }

    .flow-note {
      margin-top: 32px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 20px;
      background: rgba(255, 122, 60, 0.15);
      border: 1px solid rgba(255, 122, 60, 0.35);
      color: #FFC1A5;
      border-radius: 999px;
      font-size: 14px;
    }

    /* Image bilingual area */
    .picture-panel {
      position: relative;
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-1);
      height: 100%;
      min-height: 380px;
    }

    .picture-panel img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      inset: 0;
    }

    .picture-panel .picture-mask {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(12, 27, 26, 0.16), rgba(11, 110, 107, 0.66));
    }

    .picture-badge {
      position: absolute;
      left: 20px;
      bottom: 20px;
      z-index: 2;
      display: flex;
      align-items: center;
      gap: 12px;
      background: rgba(255, 255, 255, 0.15);
      border: 1px solid rgba(255, 255, 255, 0.3);
      backdrop-filter: blur(6px);
      border-radius: 16px;
      padding: 14px 20px;
      color: #fff;
    }

    .picture-badge .num {
      font-size: 28px;
      font-weight: 800;
      color: #fff;
      font-variant-numeric: tabular-nums;
    }

    .picture-badge .label {
      font-size: 13px;
      opacity: 0.85;
    }

    .dual-list {
      display: grid;
      gap: 18px;
    }

    .dual-item {
      display: flex;
      gap: 14px;
      padding: 20px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      transition: border-color .2s ease, background .2s ease;
    }

    .dual-item:hover {
      border-color: rgba(15, 191, 159, 0.55);
      background: rgba(15, 191, 159, 0.03);
    }

    .dual-item i {
      width: 38px;
      height: 38px;
      flex: 0 0 38px;
      border-radius: 12px;
      background: rgba(15, 191, 159, 0.12);
      color: var(--brand-dark);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
    }

    .dual-item h3 {
      font-size: 16px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 4px;
    }

    .dual-item p {
      font-size: 14px;
      color: var(--muted);
      margin: 0;
    }

    /* Metric band */
    .metric-band {
      background: var(--ink-2);
      border-radius: 24px;
      padding: 38px;
      color: #fff;
    }

    .metric-item {
      text-align: center;
    }

    .metric-item .icon {
      font-size: 24px;
      width: 56px;
      height: 56px;
      margin: 0 auto 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 18px;
      background: linear-gradient(135deg, rgba(15, 191, 159, 0.3), rgba(15, 191, 159, 0.12));
      color: #67E4CB;
    }

    .metric-item .value {
      font-size: 30px;
      font-weight: 800;
      color: #fff;
      font-variant-numeric: tabular-nums;
      line-height: 1.3;
    }

    .metric-item .label {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.65);
    }

    /* Faq */
    .faq-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      padding: 26px;
      margin-bottom: 16px;
      transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
    }

    .faq-card:hover {
      border-left: 3px solid var(--brand);
      box-shadow: var(--shadow-1);
    }

    .faq-card summary {
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      cursor: pointer;
      font-size: 17px;
      font-weight: 700;
      color: var(--ink);
      padding: 4px 0;
    }

    .faq-card summary::-webkit-details-marker {
      display: none;
    }

    .faq-card summary i {
      font-size: 19px;
      color: var(--brand-dark);
      flex: 0 0 auto;
      transition: transform .2s ease;
    }

    .faq-card[open] summary i {
      transform: rotate(45deg);
    }

    .faq-card p {
      margin-top: 14px;
      color: #4B5563;
      line-height: 1.85;
    }

    /* CTA */
    .cta-banner {
      background: linear-gradient(120deg, #0FBF9F, #0A8F80 60%, #0B6E6B);
      border-radius: 28px;
      padding: 64px;
      color: #fff;
      position: relative;
      overflow: hidden;
    }

    .cta-banner::after {
      content: "";
      position: absolute;
      right: -50px;
      top: -80px;
      width: 240px;
      height: 240px;
      border: 46px solid rgba(255, 255, 255, 0.09);
      border-radius: 60%;
      transform: rotate(16deg);
    }

    .cta-banner h2 {
      font-size: 32px;
      font-weight: 800;
      line-height: 1.35;
      margin-bottom: 14px;
    }

    .cta-banner p {
      font-size: 17px;
      opacity: 0.9;
      max-width: 560px;
    }

    .footer-bottom .copyright-domain {
      color: rgba(255, 255, 255, 0.5);
    }

    /* Footer */
    .site-footer {
      background: var(--ink);
      color: rgba(255, 255, 255, 0.7);
      padding-top: 72px;
      padding-bottom: 0;
      font-size: 15px;
    }

    .site-footer .row {
      margin-bottom: 24px;
    }

    .footer-brand {
      margin-bottom: 16px;
    }

    .footer-brand .brand-lockup {
      color: #fff;
      margin-bottom: 14px;
    }

    .footer-brand .brand-text strong {
      color: #fff;
    }

    .footer-brand .brand-text span {
      color: rgba(255, 255, 255, 0.55);
    }

    .footer-brand-p {
      color: rgba(255, 255, 255, 0.6);
      font-size: 14px;
      line-height: 1.85;
      max-width: 360px;
    }

    .footer-title {
      color: #fff;
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 16px;
    }

    .footer-links {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 10px;
    }

    .footer-links a {
      color: rgba(255, 255, 255, 0.62);
      font-size: 14px;
      transition: color .2s ease;
    }

    .footer-links a:hover {
      color: var(--brand);
    }

    .footer-links li {
      color: rgba(255, 255, 255, 0.58);
      font-size: 14px;
      line-height: 1.6;
    }

    .footer-links i {
      color: var(--brand);
    }

    .footer-bottom {
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      padding: 24px 0;
      display: flex;
      gap: 12px 28px;
      flex-wrap: wrap;
      font-size: 13px;
      color: rgba(255, 255, 255, 0.42);
    }

    .footer-bottom .container {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 22px;
    }

    @media (min-width: 992px) {
      .menu-toggle {
        display: none;
      }
    }

    @media (max-width: 991.98px) {
      .header-inner {
        flex-wrap: wrap;
        padding-top: 10px;
        padding-bottom: 10px;
      }

      .chip-nav {
        order: 3;
        flex: 0 0 100%;
        margin-left: 0;
        padding-bottom: 2px;
        border-top: 1px solid rgba(229, 231, 235, 0.5);
        padding-top: 10px;
      }

      .btn-header-cta {
        margin-left: auto;
      }
    }

    @media (max-width: 767.98px) {
      .section {
        padding: 64px 0;
      }

      .section-title {
        font-size: 24px;
      }

      .section-sub {
        font-size: 16px;
        margin-bottom: 28px;
      }

      .login-faq-hero {
        padding: 80px 0;
      }

      .hero-title {
        font-size: 33px;
      }

      .hero-lead {
        font-size: 16px;
      }

      .btn-header-cta span {
        display: none;
      }

      .btn-header-cta {
        width: 42px;
        padding: 0;
        font-size: 16px;
      }

      .metric-band {
        padding: 24px;
      }

      .cta-banner {
        padding: 40px 24px;
      }

      .cta-banner h2 {
        font-size: 24px;
      }

      .footer-bottom .container {
        flex-direction: column;
        gap: 4px;
      }
    }

    @media (max-width: 575.98px) {
      .container {
        padding-left: 20px;
        padding-right: 20px;
      }

      .header-inner {
        gap: 10px;
      }

      .brand-icon {
        width: 38px;
        height: 38px;
      }

      .brand-text strong {
        font-size: 18px;
      }

      .chip {
        padding: 8px 12px;
        font-size: 13px;
      }

      .hero-actions .btn-brand,
      .hero-actions .btn-outline-brand {
        width: 100%;
      }

      .flow-step {
        padding: 22px 18px;
      }

      .trouble-card {
        padding: 22px 18px;
      }

      .footer-bottom {
        padding: 18px 0;
      }
    }

    .text-brand {
      color: var(--brand) !important;
    }