/* roulang page: index */
:root {
  --ink: #101414;
  --copper: #B98042;
  --copper-hover: #A96F43;
  --olive-dark: #3D4A43;
  --cream: #F7F4EE;
  --deep-bg: #131716;
  --panel-bg: #FFFFFF;
  --line: #E3DED3;
  --muted-text: #7C7A72;
  --border-light: #EBE6DD;
  --card-shadow: 0 2px 16px rgba(16, 20, 20, 0.04);
  --hover-shadow: 0 16px 40px rgba(16, 20, 20, 0.08);
  --font-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-num: "Inter", "DIN Alternate", "Arial Narrow", sans-serif;
  --radius: 4px;
  --radius-sm: 2px;
  --space-section: 110px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-sans); background: var(--cream); color: var(--ink); line-height: 1.7; margin: 0; -webkit-font-smoothing: antialiased; }
body, p, h1, h2, h3, h4, h5, h6 { text-rendering: optimizeLegibility; }
p: last-child { margin-bottom: 0; }
img { max-width: 100%; height: auto; vertical-align: middle; }
a { color: var(--ink); text-decoration: none; transition: color .25s ease, border-color .25s ease, background-color .25s ease, box-shadow .25s ease; }
a:hover { color: var(--copper); }
ul, ol { margin: 0; padding: 0; list-style: none; }
.container { max-width: 1280px; padding-left: 24px; padding-right: 24px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (min-width: 992px) {
  .mobile-tabbar { display: none !important; }
  .main-content { padding-bottom: 0 !important; }
}
.main-content { padding-bottom: 72px; }
.section { padding: var(--space-section) 0; position: relative; }
.section-sm { padding: 64px 0; }
.section-tight { padding: 48px 0; }

/* 区块标题 */
.section-title-row { display: flex; align-items: flex-start; margin-bottom: 52px; position: relative; }
.section-title-row .index-mark { font-family: var(--font-num); font-size: 14px; font-weight: 600; color: var(--copper); letter-spacing: .12em; writing-mode: vertical-lr; margin-right: 6px; padding-top: 4px; line-height: 1; }
.section-title-row .title-body { border-top: 2px solid var(--ink); padding-top: 16px; flex: 1; }
.section-title-row h2 { font-size: 38px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 10px; line-height: 1.25; }
.section-title-row .sub-heading { color: var(--muted-text); font-size: 16px; max-width: 620px; margin: 0; }
@media (max-width: 767px) {
  :root { --space-section: 64px; }
  .container { padding-left: 16px; padding-right: 16px; }
  .section-title-row { margin-bottom: 32px; }
  .section-title-row .index-mark { font-size: 12px; }
  .section-title-row h2 { font-size: 26px; margin-bottom: 8px; }
}

/* 导航 */
.main-header { background-color: var(--cream); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 1030; }
.main-header .header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 72px; position: relative; }
.logo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo .logo-icon { background: var(--ink); color: var(--cream); font-weight: 800; font-size: 22px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 3px; letter-spacing: -1px; }
.logo .logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.logo .logo-text .logo-name { font-weight: 800; font-size: 20px; letter-spacing: .01em; color: var(--ink); }
.logo .logo-text .logo-sub { font-size: 10px; letter-spacing: .2em; font-weight: 600; color: var(--copper); text-transform: uppercase; }
.nav-list { display: flex; align-items: center; gap: 36px; }
.nav-item { position: relative; }
.nav-item > a { font-size: 15px; font-weight: 500; padding: 12px 0; display: flex; align-items: center; gap: 6px; color: var(--ink); position: relative; }
.nav-item > a::after { content: ""; position: absolute; left: 0; bottom: 4px; width: 0; height: 2px; background-color: var(--copper); transition: width .3s ease; }
.nav-item > a:hover::after, .nav-item.active > a::after { width: 100%; }
.nav-item > a:hover { color: var(--copper); }
.nav-item.active > a { color: var(--ink); font-weight: 700; }
.nav-item .caret { font-size: 10px; opacity: .6; margin-left: -2px; }
.dropdown-menu-custom { display: block; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease, visibility .25s; position: absolute; top: 100%; left: 0; background: var(--panel-bg); border: 1px solid var(--border-light); border-radius: var(--radius); min-width: 220px; padding: 10px; box-shadow: var(--hover-shadow); z-index: 100; }
.nav-item.dropdown:hover .dropdown-menu-custom { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-menu-custom a { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; color: var(--ink); }
.dropdown-menu-custom a i { font-size: 11px; color: var(--copper); opacity: 0; transition: all .25s ease; }
.dropdown-menu-custom a:hover { background: var(--cream); color: var(--copper); }
.dropdown-menu-custom a:hover i { opacity: 1; }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-cta .btn { padding: 8px 20px; font-size: 14px; }
.btn-outline-ink { border: 1px solid var(--ink); background: transparent; color: var(--ink); border-radius: 2px; font-weight: 600; padding: 10px 24px; transition: all .3s ease; }
.btn-outline-ink:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn-copper { background: var(--copper); border: 1px solid var(--copper); color: #fff !important; border-radius: 2px; font-weight: 600; padding: 10px 26px; transition: all .3s ease; }
.btn-copper:hover { background: var(--copper-hover); border-color: var(--copper-hover); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(185, 128, 66, .28); }
.btn-ink { background: var(--ink); border: 1px solid var(--ink); color: var(--cream) !important; border-radius: 2px; font-weight: 600; padding: 10px 26px; transition: all .3s ease; }
.btn-ink:hover { background: #1d2525; border-color: #1d2525; color: #fff !important; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16, 20, 20, .18); }
@media (max-width: 991.98px) {
  .main-header { display: none; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .nav-list { gap: 24px; }
  .nav-cta .btn-outline-ink { display: none; }
}

/* 移动 Tab */
.mobile-tabbar { position: fixed; bottom: 0; left: 0; right: 0; height: 66px; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(10px); border-top: 1px solid var(--line); display: flex; align-items: stretch; justify-content: space-around; z-index: 1050; }
.mobile-tabbar .tab-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 11px; color: #8a8f89; flex: 1; padding: 0 4px; border: none; background: transparent; text-decoration: none; }
.mobile-tabbar .tab-item i { font-size: 17px; line-height: 1; }
.mobile-tabbar .tab-item.active { color: var(--ink); font-weight: 700; }
.mobile-tabbar .tab-item.active i { color: var(--copper); }

/* Hero */
.hero-section { position: relative; padding: 36px 0 0; overflow: hidden; background: var(--cream); }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; min-height: 530px; }
.hero-content { display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2; padding-right: 40px; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--panel-bg); border: 1px solid var(--border-light); border-radius: 3px; padding: 5px 14px; font-size: 12px; font-weight: 600; letter-spacing: .08em; margin-bottom: 26px; color: var(--ink); text-transform: uppercase; width: auto; }
.hero-badge i { color: var(--copper); font-size: 13px; }
.hero-title { font-size: 58px; line-height: 1.18; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 20px; text-align: left; }
.hero-title .accent { color: var(--copper); }
.hero-desc { font-size: 17px; color: #575b56; max-width: 440px; margin-bottom: 34px; line-height: 1.85; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 40px; }
.hero-actions .btn { border-radius: 2px; }
.hero-actions .btn-lg { padding: 13px 36px; font-size: 16px; }
.hero-link-underline { color: var(--ink); font-weight: 600; font-size: 15px; border-bottom: 2px solid var(--copper); padding-bottom: 2px; transition: all .3s ease; }
.hero-link-underline:hover { color: var(--copper); border-bottom-width: 2px; }
.hero-stats { display: flex; gap: 36px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 22px; margin-top: auto; }
.hero-stats .stat-block { display: flex; flex-direction: column; gap: 2px; }
.hero-stats .stat-num { font-family: var(--font-num); font-size: 28px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.hero-stats .stat-num em { font-style: normal; color: var(--copper); font-size: 16px; margin-left: 4px; font-weight: 600; }
.hero-stats .stat-label { font-size: 13px; color: var(--muted-text); }
.hero-media { position: relative; display: flex; align-items: center; justify-content: center; min-height: 480px; }
.hero-media .cover-main { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 4px; box-shadow: 0 16px 48px rgba(16, 20, 20, 0.16); }
.hero-media .hero-bg-deco { position: absolute; top: -24px; left: 12%; width: 76%; height: 80%; background: var(--olive-dark); opacity: .08; transform: rotate(-3deg); border-radius: 3px; z-index: 0; }
.hero-media .media-caption { position: absolute; bottom: 28px; left: 24px; background: var(--ink); color: var(--cream); font-size: 12px; padding: 8px 16px; border-radius: 3px; letter-spacing: .05em; font-weight: 600; z-index: 3; }
@media (max-width: 991.98px) {
  .hero-section { padding-top: 24px; }
  .hero-grid { grid-template-columns: 1fr; gap: 24px; padding-bottom: 40px; min-height: 0; }
  .hero-content { padding-right: 0; }
  .hero-media { min-height: 0; order: 2; }
  .hero-title { font-size: 38px; margin-bottom: 16px; }
  .hero-desc { font-size: 15px; margin-bottom: 28px; }
  .hero-actions { margin-bottom: 28px; }
}
@media (max-width: 575px) {
  .hero-grid { padding-bottom: 24px; }
  .hero-title { font-size: 32px; }
  .hero-stats { gap: 20px; }
}

/* 指标看板 */
.metric-section { background: var(--deep-bg); color: var(--cream); padding: 0; }
.metric-inner { display: grid; grid-template-columns: repeat(5, 1fr); }
.metric-cell { padding: 56px 28px 56px 40px; border-left: 1px solid rgba(255,255,255,.08); position: relative; min-height: 200px; display: flex; flex-direction: column; justify-content: center; }
.metric-cell:first-child { border-left: none; grid-column: span 2; align-items: flex-start; }
.metric-cell.metric-title-cell { border-right: 1px solid rgba(255,255,255,.08); }
.metric-cell .metric-index { font-family: var(--font-num); font-size: 13px; color: var(--copper); font-weight: 600; display: flex; align-items: center; gap: 10px; }
.metric-cell .metric-index::after { content: ""; width: 28px; height: 1px; background: rgba(185,128,66,.6); display: block; }
.metric-cell .metric-number { font-family: var(--font-num); font-size: 54px; font-weight: 800; line-height: 1; margin: 14px 0 10px; color: #fff; letter-spacing: -0.02em; }
.metric-cell .metric-number em { font-style: normal; font-size: 22px; margin-left: 6px; color: var(--copper); font-weight: 600; }
.metric-cell .metric-label { font-size: 13px; color: rgba(255,255,255,.55); margin: 0; }
@media (max-width: 991.98px) {
  .metric-inner { grid-template-columns: repeat(2, 1fr); }
  .metric-cell:first-child { grid-column: span 2; }
  .metric-cell { padding: 36px 24px; border-left: none; border-top: 1px solid rgba(255,255,255,.08); }
  .metric-cell.metric-title-cell { border-right: none; }
  .metric-cell:nth-child(3) { border-top: none; }
  .metric-cell .metric-number { font-size: 44px; }
}
@media (max-width: 576px) {
  .metric-inner { grid-template-columns: 1fr; }
  .metric-cell:first-child { grid-column: span 1; }
  .metric-cell:nth-child(2) { border-top: none; }
  .metric-cell .metric-number { font-size: 42px; }
}

/* 服务矩阵 */
.service-section { position: relative; }
.service-table-row { display: grid; grid-template-columns: 34% 46% 20%; align-items: stretch; border-top: 1px solid var(--ink); }
.service-table-row:last-child { border-bottom: 1px solid var(--ink); }
.service-name-cell { padding: 28px 18px 28px 0; display: flex; flex-direction: column; justify-content: center; }
.service-name-cell .service-idx { font-family: var(--font-num); font-size: 13px; color: var(--copper); letter-spacing: .05em; font-weight: 600; margin-bottom: 10px; }
.service-name-cell h3 { font-size: 24px; font-weight: 700; margin: 0; }
.service-name-cell p { font-size: 14px; color: #6f736e; margin: 8px 0 0; line-height: 1.6; max-width: 320px; }
.service-tags-cell { display: flex; flex-wrap: wrap; align-content: center; align-items: center; gap: 10px; padding: 28px 12px; border-left: 1px solid var(--line); }
.service-tag-item { font-size: 14px; color: var(--ink); background: var(--panel-bg); border: 1px solid var(--line); border-radius: 3px; padding: 6px 18px; display: inline-flex; align-items: center; gap: 6px; font-weight: 500; width: fit-content; transition: all .25s ease; }
.service-tag-item i { font-size: 12px; color: var(--copper); }
.service-tag-item:hover { border-color: var(--copper); color: var(--copper); background: #fff; box-shadow: var(--card-shadow); transform: translateY(-1px); }
.service-link-cell { display: flex; align-items: center; justify-content: flex-end; border-left: 1px solid var(--line); padding: 28px 0 28px 20px; }
.service-link { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; font-size: 14px; transition: all .25s ease; position: relative; }
.service-link .arrow-circle { width: 36px; height: 36px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all .3s ease; font-size: 13px; }
.service-link:hover { color: var(--copper); }
.service-link:hover .arrow-circle { border-color: var(--copper); background: var(--copper); color: #fff; }
.service-row-link { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.service-table-row { position: relative; }
.service-table-row:hover .service-name-cell h3 { color: var(--copper); }
.service-table-row:hover .service-name-cell::before { display: none; }
.service-table-row:hover { background: rgba(255,255,255,0.5); cursor: pointer; }
.btn-text-underline { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: var(--ink); border-bottom: 1px solid var(--copper); padding-bottom: 4px; }
.btn-text-underline i { transition: transform .3s ease; font-size: 12px; color: var(--copper); }
.btn-text-underline:hover { color: var(--copper); }
.btn-text-underline:hover i { transform: translateX(4px); }
@media (max-width: 767px) {
  .service-table-row { display: block; padding: 20px 0 28px; }
  .service-tags-cell { border-left: none; padding: 16px 0 0; }
  .service-link-cell { border-left: none; padding: 16px 0 8px; justify-content: flex-start; }
  .service-name-cell { padding-bottom: 0; }
  .btn-text-underline { font-size: 14px; }
}

/* 普通按钮 */
.btn { border-radius: 2px; font-weight: 600; --bs-btn-focus-shadow-rgb: none; transition: all .3s cubic-bezier(.25,.8,.35,1); }
.btn:focus { box-shadow: 0 0 0 3px rgba(185,128,66,.3); }
.btn-outline-light-copper { border: 1px solid rgba(185,128,66,.4); color: var(--copper); background: transparent; }
.btn-outline-light-copper:hover { background: var(--copper); border-color: var(--copper); color: #fff; }
.btn-light { background: var(--cream); border-color: var(--cream); color: var(--ink); font-weight: 600; }
.btn-light:hover { background: #fff; border-color: #fff; }

/* 对比区 */
.compare-section { background: var(--cream); }
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.compare-col { border-radius: 4px; overflow: hidden; }
.compare-left { background: var(--panel-bg); border: 1px solid var(--border-light); }
.compare-right { background: #f0f1ee; border: 1px solid var(--line); }
.compare-head { padding: 26px 30px 24px; }
.compare-head .cmp-tag { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.compare-left .cmp-tag { color: #91958f; }
.compare-right .cmp-tag { color: var(--copper); }
.compare-head h3 { font-size: 20px; font-weight: 800; margin: 0 0 4px; }
.compare-head p:not(.cmp-tag) { font-size: 13px; color: var(--muted-text); margin: 0; line-height: 1.5; }
.compare-body { padding: 8px 30px 32px; }
.cmp-row { padding: 14px 0; border-top: 1px solid var(--line); }
.compare-body .cmp-row:first-child { border-top: none; }
.cmp-label-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.cmp-label-row .label { font-size: 13px; font-weight: 600; color: #5b605a; }
.cmp-label-row .value { font-family: var(--font-num); font-size: 20px; font-weight: 700; }
.cmp-bar { height: 8px; background: #ECEAE3; border-radius: 20px; overflow: hidden; position: relative; width: 100%; }
.cmp-bar span { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: var(--copper); border-radius: 20px; transition: width .8s cubic-bezier(.22,.65,.36,1); }
.cmp-bar.in-view span { animation: growWidth 1s ease forwards; }
@keyframes growWidth { from { width: 0; } }
@media (max-width: 767px) {
  .compare-grid { grid-template-columns: 1fr; gap: 16px; }
  .compare-head, .compare-body { padding-left: 20px; padding-right: 20px; }
}

/* FAQ */
.faq-section { background: var(--cream); }
.faq-wrap { max-width: 1080px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-question-btn { background: none; border: none; display: flex; align-items: center; justify-content: flex-start; padding: 24px 8px; cursor: pointer; text-align: left; width: 100%; gap: 24px; transition: background .25s ease; color: var(--ink); }
.faq-question-btn:hover { background: rgba(227,222,211,.25); }
.faq-qk-num { font-family: var(--font-num); font-size: 14px; font-weight: 600; color: var(--copper); width: 42px; flex-shrink: 0; }
.faq-question-btn .faq-qtitle { flex: 1; font-size: 17px; font-weight: 600; transition: color .2s; }
.faq-question-btn:hover .faq-qtitle { color: var(--ink); }
.faq-qa-icon { width: 24px; height: 24px; position: relative; margin-left: auto; flex-shrink: 0; }
.faq-qa-icon::before, .faq-qa-icon::after { content: ""; position: absolute; background: var(--ink); transition: all .3s ease; }
.faq-qa-icon::before { top: 11px; left: 4px; width: 16px; height: 2px; }
.faq-qa-icon::after { top: 4px; left: 11px; width: 2px; height: 16px; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .45s ease, margin .3s ease; }
.faq-answer-content { margin: 0 24px 0 74px; padding-bottom: 0; }
.faq-answer-content p { font-size: 15px; color: #5f645e; line-height: 1.85; padding-bottom: 24px; padding-top: 8px; margin: 0; border-top: 1px dashed var(--line); }
.faq-item.open .faq-qa-icon::before { transform: rotate(0deg); }
.faq-item.open .faq-qa-icon::after { transform: rotate(90deg); }
@media (max-width: 576px) {
  .faq-question-btn { gap: 12px; padding: 20px 0; }
  .faq-qk-num { width: 32px; font-size: 13px; }
  .faq-question-btn .faq-qtitle { font-size: 15px; }
  .faq-answer-content { margin: 12px 0 0 44px; }
}

/* 列表区域 */
.insight-section { background: var(--cream); }
.insight-layout { display: grid; grid-template-columns: 1.28fr .72fr; gap: 44px; }
.heading-utility { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.heading-utility .group-title { font-size: 22px; font-weight: 800; }
.article-card { display: flex; gap: 18px; align-items: flex-start; background: var(--panel-bg); border: 1px solid var(--border-light); border-radius: 4px; padding: 20px; transition: all .3s ease; margin-bottom: 16px; position: relative; }
.article-card:last-child { margin-bottom: 0; }
.article-card:hover { border-color: #d3cabc; box-shadow: var(--hover-shadow); transform: translateY(-3px); }
.article-card .acard-thumb { width: 120px; height: 100px; min-width: 120px; object-fit: cover; border-radius: 3px; }
.article-card .acard-body { display: flex; flex-direction: column; justify-content: space-between; height: 100%; min-height: 100px; flex: 1; }
.article-card .acard-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted-text); margin-bottom: 8px; flex-wrap: wrap; }
.article-card .acard-cate { background: rgba(185,128,66,.12); color: var(--copper); font-weight: 600; font-size: 11px; padding: 3px 10px; border-radius: 2px; text-transform: uppercase; letter-spacing: .05em; }
.article-card .acard-date { display: flex; align-items: center; gap: 6px; font-family: var(--font-num); font-size: 12px; }
.article-card .acard-title { font-size: 16px; font-weight: 700; line-height: 1.55; margin-bottom: 6px; }
.article-card .acard-title a { color: var(--ink); }
.article-card .acard-title a:hover { color: var(--copper); }
.article-card .acard-excerpt { font-size: 14px; color: #747872; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 8px; }
.article-card .acard-link { font-size: 13px; color: var(--copper); font-weight: 600; align-self: flex-start; }
.feature-card { background: var(--ink); color: var(--cream); border-radius: 4px; overflow: hidden; position: relative; padding: 0; margin-bottom: 16px; }
.feature-card .feature-inner { padding: 32px; position: relative; z-index: 2; }
.feature-card .feature-deco { position: absolute; bottom: -30px; right: -20px; font-size: 120px; opacity: .08; font-weight: 800; z-index: 0; }
.feature-card h3 { font-size: 20px; font-weight: 800; margin-bottom: 10px; color: #fff; }
.feature-card p { font-size: 14px; color: rgba(255,255,255,.65); line-height: 1.7; margin-bottom: 12px; }
.feature-card .btn-light { margin-top: 4px; }
.mini-list-wrap { background: var(--panel-bg); border: 1px solid var(--border-light); border-radius: 4px; padding: 18px 24px; }
.mini-list-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 16px; }
.mini-list-head .ml-title { font-size: 18px; font-weight: 800; }
.mini-list-head a { font-size: 13px; color: var(--copper); font-weight: 600; }
.mini-list-item { display: flex; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px dashed var(--border-light); }
.mini-list-item:last-child { border-bottom: none; }
.mini-list-item .mini-date { font-family: var(--font-num); font-size: 13px; color: var(--copper); font-weight: 600; min-width: 76px; }
.mini-list-item .mini-title { font-size: 14px; font-weight: 500; color: #595c58; }
.mini-list-item .mini-title a:hover { color: var(--copper); }
.empty-state { border: 2px dashed var(--line); border-radius: 4px; padding: 56px 20px; text-align: center; background: rgba(255,255,255,.3); }
.empty-state .empty-icon { color: var(--line); font-size: 36px; margin-bottom: 10px; }
.empty-state .empty-text { font-size: 15px; color: var(--muted-text); letter-spacing: .05em; }
@media (max-width: 991px) {
  .insight-layout { grid-template-columns: 1fr; }
}

/* CTA / 表单 */
.cta-section { position: relative; }
.cta-section::before { content: ""; position: absolute; inset: 0; background: var(--deep-bg); height: 100%; width: 100%; }
.form-cta-panel { position: relative; z-index: 1; padding: 64px 0 40px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.form-info .form-kicker { color: var(--copper); font-size: 13px; letter-spacing: .16em; font-weight: 700; margin-bottom: 18px; text-transform: uppercase; }
.form-info h2 { color: #f2f1ed; font-size: 42px; font-weight: 800; line-height: 1.3; margin-bottom: 20px; letter-spacing: -0.01em; }
.form-info p { color: rgba(255,255,255,.6); font-size: 15px; line-height: 1.8; max-width: 430px; }
.contact-methods { margin-top: 44px; display: flex; flex-direction: column; gap: 18px; }
.contact-methods .cm-item { display: flex; gap: 14px; align-items: center; color: rgba(255,255,255,.75); font-size: 15px; }
.contact-methods .cm-item i { color: rgba(255,255,255,.5); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.2); border-radius: 3px; font-size: 12px; }
.form-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 4px; padding: 32px; }
.form-card .form-title { color: #fff; font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.form-card .form-sub { color: rgba(255,255,255,.4); font-size: 13px; margin-bottom: 32px; }
.form-control-custom { background: transparent; border: 1px solid rgba(255,255,255,.12); border-radius: 2px; padding: 13px 16px; color: #fff; font-size: 14px; transition: all .25s ease; appearance: none; box-sizing: border-box; }
.form-control-custom:focus { background: transparent; border-color: var(--copper); color: #fff; box-shadow: 0 0 0 3px rgba(185,128,66,.15); outline: none; }
.form-control-custom::placeholder { color: rgba(255,255,255,.35); }
select.form-control-custom option { background: var(--ink); color: #fff; }
.form-label { color: rgba(255,255,255,.45); font-size: 12px; letter-spacing: .05em; font-weight: 600; margin-bottom: 8px; }
.form-help { color: rgba(255,255,255,.35); font-size: 12px; margin-top: 14px; display: block; }
textarea.form-control-custom { min-height: 120px; resize: vertical; }
.btn-copper.btn-lg { padding: 14px 24px; font-size: 15px; }
@media (max-width: 991px) {
  .form-grid { grid-template-columns: 1fr; gap: 40px; }
  .form-card { padding: 24px; }
}

/* footer */
.main-footer { background: var(--deep-bg); color: rgba(255,255,255,.66); padding: 72px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr .8fr 1fr 1fr; gap: 48px; padding-bottom: 48px; }
.footer-logo-footer { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.footer-logo-footer .footer-logo-icon {background: var(--copper); color: #fff; font-weight: 800; font-size: 18px; width: 34px; height: 34px; display:flex; align-items:center; justify-content:center; border-radius: 2px; }
.footer-logo-footer .footer-logo-name {color: #fff; font-weight: 800; font-size: 19px; line-height: 1.2;}
.footer-desc { font-size: 14px; line-height: 1.8; color: rgba(255,255,255,.45); max-width: 380px; }
.footer-quote { font-size: 13px; margin-top: 20px; color: rgba(255,255,255,.35); line-height: 1.7; display: flex; gap: 10px; align-items: flex-start; }
.footer-quote i { color: var(--copper); margin-top: 2px; }
.footer-title-head { color: #fff; font-size: 16px; font-weight: 700; margin-bottom: 24px; margin-top: 0; position: relative; padding-bottom: 14px; }
.footer-title-head::after { content: ''; position: absolute; bottom: 0; left: 0; width: 26px; height: 2px; background: var(--copper); }
.footer-link-list li { margin-bottom: 10px; }
.footer-link-list a { color: rgba(255,255,255,.55); font-size: 14px; transition: all .25s ease; }
.footer-link-list a:hover { color: var(--copper); padding-left: 4px; }
.footer-contact-list li { display: flex; gap: 10px; margin-bottom: 14px; font-size: 14px; color: rgba(255,255,255,.55); align-items: baseline; }
.footer-contact-list li i { color: var(--copper); width: 16px; font-size: 13px; margin-top: 3px;}
.footer-bottom-bar { border-top: 1px solid rgba(255,255,255,.08); padding: 26px 0 36px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.footer-copyright { color: rgba(255,255,255,.3); font-size: 13px; margin: 0; }
.footer-copyright a { color:rgba(255,255,255,.45); }
.footer-copyright a:hover { color: var(--copper); }
.footer-tec { color: rgba(255,255,255,.2); font-size: 12px; }
@media (max-width: 991px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .main-footer { padding-top: 48px; }
}
@media (max-width: 576px) {
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-bar { flex-direction: column; text-align: center; }
}

/* 页脚不在内页中的额外内容 */
.page-main-inner { background: var(--cream); }
.container { max-width: 1280px; margin: 0 auto; }

/* 通用 section 标题 */
.label-text { font-size: 13px; color: var(--copper); letter-spacing: .08em; font-weight: 600; margin-bottom: 8px; display: inline-block; }
.num-text { font-family: var(--font-num); }
.twinkle-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(185,128,66,.15); color: var(--copper); font-size: 12px; font-weight: 600; padding: 5px 14px; border-radius: 2px; letter-spacing: .04em; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* roulang page: article */
:root {
            --ink: #101414;
            --copper: #B98042;
            --copper-dark: #A96F43;
            --deep: #3D4A43;
            --cream: #F7F4EE;
            --dark-bg: #131716;
            --white: #FFFFFF;
            --line: #E3DED3;
            --muted: #7C7A72;
            --radius: 4px;
            --shadow: 0 12px 40px rgba(0, 0, 0, .05);
            --font-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif;
            --font-num: "Inter", "DIN Alternate", "Arial Narrow", sans-serif;
            --section-gap: 96px;
            --container: 1220px;
        }

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

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            font-family: var(--font-sans);
            background: var(--cream);
            color: #232828;
            line-height: 1.75;
            -webkit-font-smoothing: antialiased;
        }

        body::after {
            content: "";
            display: block;
            height: 76px;
            background: transparent;
        }

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

        a {
            color: inherit;
            text-decoration: none;
            transition: color .25s ease, background-color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
        }

        a:hover {
            color: var(--copper-dark);
        }

        button,
        input,
        select,
        textarea {
            font-family: inherit;
        }

        .container {
            max-width: var(--container);
            margin: 0 auto;
            padding-left: 20px;
            padding-right: 20px;
            width: 100%;
        }

        .section-kicker {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: .12em;
            color: var(--copper-dark);
            text-transform: uppercase;
            margin-bottom: 14px;
        }

        .section-kicker::before {
            content: "";
            width: 30px;
            height: 1px;
            background: var(--copper);
            display: inline-block;
        }

        /* buttons */
        .btn {
            border-radius: 2px;
            font-size: 15px;
            font-weight: 600;
            padding: 10px 24px;
            border: 1px solid transparent;
            transition: all .28s ease;
        }

        .btn-sm {
            font-size: 14px;
            padding: 8px 18px;
        }

        .btn-copper {
            background: var(--copper);
            border-color: var(--copper);
            color: #fff;
            box-shadow: 0 6px 18px rgba(185, 128, 66, .20);
        }

        .btn-copper:hover,
        .btn-copper:focus {
            background: var(--copper-dark);
            border-color: var(--copper-dark);
            color: #fff;
            transform: translateY(-2px);
            box-shadow: 0 10px 24px rgba(169, 111, 67, .25);
        }

        .btn-copper:active {
            transform: translateY(0);
        }

        .btn-outline-ink {
            background: transparent;
            border: 1px solid rgba(16, 20, 20, .45);
            color: var(--ink);
        }

        .btn-outline-ink:hover,
        .btn-outline-ink:focus {
            background: var(--ink);
            color: #fff;
            border-color: var(--ink);
        }

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

        .btn-outline-light:hover {
            background: #fff;
            color: var(--ink);
        }

        /* header */
        .main-header {
            background: rgba(247, 244, 238, .94);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-bottom: 1px solid var(--line);
            position: sticky;
            top: 0;
            z-index: 1030;
        }

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

        .logo {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            flex-shrink: 0;
        }

        .logo-icon {
            width: 42px;
            height: 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: var(--ink);
            color: #fff;
            font-weight: 800;
            font-size: 21px;
            font-family: var(--font-num);
            border-radius: 3px;
            letter-spacing: -1px;
            box-shadow: 0 4px 12px rgba(16, 20, 20, .15);
        }

        .logo-text {
            display: flex;
            flex-direction: column;
            line-height: 1.1;
        }

        .logo-name {
            font-weight: 800;
            font-size: 17px;
            color: var(--ink);
            letter-spacing: .02em;
        }

        .logo-sub {
            font-size: 11px;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: var(--muted);
            margin-top: 3px;
            font-family: var(--font-num);
        }

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

        .nav-item>a {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 10px 16px;
            font-size: 15px;
            font-weight: 500;
            color: #3b413f;
            border-radius: 3px;
            transition: all .2s ease;
        }

        .nav-item>a:hover,
        .nav-item.active>a {
            color: var(--ink);
            background: rgba(57, 67, 61, .07);
        }

        .nav-item .caret {
            font-size: 10px;
            margin-left: 2px;
            opacity: .75;
        }

        .dropdown {
            position: relative;
        }

        .dropdown-menu-custom {
            position: absolute;
            top: calc(100% + 10px);
            left: 0;
            min-width: 250px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 6px;
            box-shadow: var(--shadow);
            padding: 8px;
            opacity: 0;
            visibility: hidden;
            transform: translateY(8px);
            transition: all .3s ease;
            z-index: 1050;
        }

        .dropdown-menu-custom a {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 11px 14px;
            border-radius: 4px;
            font-size: 14px;
            color: var(--ink);
            font-weight: 500;
        }

        .dropdown-menu-custom a i {
            font-size: 11px;
            opacity: 0;
            transform: translateX(-6px);
            transition: all .25s ease;
        }

        .dropdown-menu-custom a:hover {
            background: var(--cream);
            color: var(--copper-dark);
        }

        .dropdown-menu-custom a:hover i {
            opacity: 1;
            transform: translateX(0);
        }

        .dropdown:hover .dropdown-menu-custom,
        .dropdown:focus-within .dropdown-menu-custom {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .nav-cta {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* breadcrumb area */
        .breadcrumb-bar {
            background: rgba(227, 222, 211, .25);
            border-bottom: 1px solid var(--line);
            padding: 13px 0;
            font-size: 13px;
            color: var(--muted);
        }

        .breadcrumb-list {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
            margin: 0;
            padding: 0;
            list-style: none;
            width: 100%;
        }

        .breadcrumb-list li {
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }

        .breadcrumb-list li+li::before {
            content: "";
            display: inline-block;
            width: 1px;
            height: 12px;
            background: #c6bfb3;
        }

        .breadcrumb-list a:hover {
            color: var(--copper-dark);
        }

        .breadcrumb-current {
            color: var(--ink);
            font-weight: 600;
            max-width: 520px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* article main */
        .article-main {
            padding: 56px 0 96px;
        }

        .article-shell {
            max-width: 1080px;
        }

        .article-block {
            background: #fff;
            border: 1px solid rgba(227, 222, 211, .7);
            border-radius: 6px;
            padding: 54px 56px 46px;
            box-shadow: 0 2px 18px rgba(0, 0, 0, .025);
            position: relative;
        }

        .article-head {
            text-align: left;
            max-width: 840px;
            margin: 0 auto;
        }

        .article-cate-badge {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 5px 13px;
            background: rgba(185, 128, 66, .10);
            color: var(--copper-dark);
            border: 1px solid rgba(185, 128, 66, .25);
            border-radius: 100px;
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 22px;
        }

        .article-title {
            font-size: 38px;
            line-height: 1.22;
            font-weight: 800;
            letter-spacing: -.02em;
            color: var(--ink);
            margin-bottom: 22px;
            word-break: break-word;
        }

        .article-meta-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px 24px;
            padding-bottom: 26px;
            border-bottom: 1px solid var(--line);
            color: var(--muted);
        }

        .article-meta-row span {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            font-size: 14px;
        }

        .article-meta-row i {
            color: var(--copper);
            width: 14px;
            text-align: center;
        }

        .meta-badge {
            background: #f1ece2;
            color: var(--ink);
            border: none;
            border-radius: 3px;
            padding: 3px 10px;
            font-size: 12px;
            font-weight: 600;
        }

        /* article content */
        .article-content {
            max-width: 800px;
            margin: 0 auto;
            color: #313735;
            font-size: 16px;
            line-height: 1.9;
            word-break: break-word;
        }

        .article-content p {
            margin: 1.35em 0;
        }

        .article-content strong {
            font-weight: 700;
            color: var(--ink);
        }

        .article-content em {
            color: #565d5a;
        }

        .article-content h2 {
            font-size: 25px;
            font-weight: 800;
            line-height: 1.4;
            margin: 2.2em 0 .9em;
            padding-left: 14px;
            border-left: 4px solid var(--copper);
            color: var(--ink);
        }

        .article-content h3 {
            font-size: 20px;
            font-weight: 700;
            margin: 1.8em 0 .8em;
            color: var(--ink);
        }

        .article-content a {
            color: var(--copper-dark);
            text-decoration: underline;
            text-underline-offset: 4px;
            text-decoration-thickness: 1px;
        }

        .article-content a:hover {
            text-decoration-thickness: 2px;
            color: var(--copper);
        }

        .article-content ul,
        .article-content ol {
            margin: 1.2em 0;
            padding-left: 1.45em;
        }

        .article-content li {
            margin: .5em 0;
        }

        .article-content blockquote {
            margin: 1.8em 0;
            padding: 14px 22px;
            background: #f7f2eb;
            border-left: 4px solid var(--copper);
            color: #625e55;
            border-radius: 0 4px 4px 0;
            font-size: 15px;
        }

        .article-content img {
            border-radius: 5px;
            margin: 28px auto;
            max-height: 600px;
            object-fit: cover;
        }

        .article-content img+em,
        .article-content .wp-caption-text {
            text-align: center;
            display: block;
            font-style: normal;
            color: var(--muted);
            font-size: 13px;
            margin-top: -16px;
        }

        .article-content table {
            width: 100%;
            border-collapse: collapse;
            margin: 1.6em 0;
            font-size: 14px;
            background: #fff;
            border: 1px solid var(--line);
        }

        .article-content th,
        .article-content td {
            padding: 10px 12px;
            border: 1px solid var(--line);
        }

        .article-content th {
            background: #f0ece2;
            font-weight: 700;
            color: var(--ink);
        }

        .article-content hr {
            border: 0;
            border-top: 1px solid var(--line);
            margin: 2em 0;
        }

        .article-content pre {
            background: #171b1b;
            color: #dfded7;
            padding: 18px;
            border-radius: 6px;
            overflow-x: auto;
            font-size: 14px;
            line-height: 1.75;
            font-family: "SFMono-Regular", Consolas, monospace;
        }

        .article-content code {
            background: #efebe1;
            color: #5a4b37;
            padding: 2px 7px;
            border-radius: 3px;
            font-size: 14px;
            font-family: "SFMono-Regular", Consolas, monospace;
        }

        .article-content pre code {
            background: transparent;
            color: inherit;
            padding: 0;
        }

        .article-bottom-line {
            max-width: 800px;
            margin: 38px auto 0;
            border-top: 1px solid var(--line);
            padding-top: 20px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            color: var(--muted);
        }

        .article-bottom-line .topic-chip {
            background: #f0ece2;
            padding: 3px 11px;
            border-radius: 100px;
            color: var(--deep);
            font-weight: 500;
            white-space: nowrap;
        }

        /* not found */
        .article-not-found {
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 6px;
            padding: 80px 40px;
            text-align: center;
        }

        .article-not-found-code {
            font-size: 72px;
            font-weight: 800;
            color: var(--line);
            line-height: 1;
            font-family: var(--font-num);
            letter-spacing: -.04em;
        }

        .article-not-found h1 {
            font-size: 28px;
            font-weight: 800;
            margin: 12px 0 8px;
        }

        .article-not-found p {
            color: var(--muted);
            margin-bottom: 24px;
        }

        /* related area */
        .related-section {
            margin-top: 96px;
        }

        .related-head {
            text-align: center;
            max-width: 620px;
            margin: 0 auto 42px;
        }

        .related-head .section-kicker::before {
            margin-right: 0;
        }

        .related-head .section-kicker {
            justify-content: center;
        }

        .related-head h2 {
            font-size: 32px;
            font-weight: 800;
            color: var(--ink);
            margin-top: 0;
            margin-bottom: 10px;
        }

        .related-head p {
            color: var(--muted);
        }

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

        .related-card {
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 6px;
            overflow: hidden;
            transition: transform .35s ease, box-shadow .3s ease, border-color .3s ease;
            display: flex;
            flex-direction: column;
        }

        .related-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow);
            border-color: rgba(185, 128, 66, .35);
        }

        .related-thumb {
            aspect-ratio: 16 / 10;
            overflow: hidden;
            background: #deddd8;
        }

        .related-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .55s ease;
        }

        .related-card:hover .related-thumb img {
            transform: scale(1.04);
        }

        .related-body {
            padding: 24px 24px 20px;
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        .related-body .card-label {
            display: inline-flex;
            width: fit-content;
            background: rgba(185, 128, 66, .1);
            color: var(--copper-dark);
            font-size: 12px;
            font-weight: 600;
            padding: 4px 12px;
            border-radius: 100px;
            margin-bottom: 14px;
            border: 1px solid rgba(185, 128, 66, .15);
        }

        .related-body h3 {
            font-size: 18px;
            font-weight: 700;
            line-height: 1.5;
            margin-bottom: 10px;
        }

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

        .related-body h3 a:hover {
            color: var(--copper-dark);
        }

        .related-body p {
            font-size: 14px;
            color: var(--muted);
            flex: 1;
            margin-bottom: 16px;
        }

        .related-link {
            font-size: 14px;
            font-weight: 600;
            color: var(--ink);
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .related-link i {
            font-size: 12px;
            transition: transform .25s ease;
        }

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

        /* back to list */
        .back-to-list {
            text-align: center;
            margin-top: 54px;
        }

        .back-to-list a {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            color: var(--muted);
            font-size: 14px;
            font-weight: 500;
            padding: 8px 18px;
            border: 1px solid var(--line);
            border-radius: 100px;
            background: #fff;
            transition: all .25s ease;
        }

        .back-to-list a:hover {
            color: var(--ink);
            border-color: rgba(16, 20, 20, .35);
            transform: translateX(2px);
        }

        /* footer */
        .main-footer {
            background: var(--dark-bg);
            color: rgba(255, 255, 255, .72);
            padding-top: 74px;
            padding-bottom: 30px;
            margin-top: 20px;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.3fr .8fr 1fr 1fr;
            gap: 42px;
            margin-bottom: 52px;
        }

        .footer-logo-footer {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 16px;
        }

        .footer-logo-icon {
            width: 34px;
            height: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #fff;
            color: var(--ink);
            font-weight: 800;
            border-radius: 3px;
            font-family: var(--font-num);
        }

        .footer-logo-name {
            font-weight: 700;
            color: #fff;
            font-size: 17px;
            letter-spacing: .02em;
        }

        .footer-desc {
            font-size: 14px;
            line-height: 1.85;
            color: rgba(255, 255, 255, .58);
            max-width: 320px;
            margin-bottom: 18px;
        }

        .footer-quote {
            font-size: 14px;
            color: rgba(255, 255, 255, .82);
            background: rgba(255, 255, 255, .05);
            padding: 10px 14px;
            border-left: 2px solid var(--copper);
            border-radius: 0 3px 3px 0;
            width: fit-content;
        }

        .footer-quote i {
            color: var(--copper);
            font-size: 12px;
            margin-right: 4px;
        }

        .footer-title-head {
            color: #fff;
            font-size: 15px;
            font-weight: 700;
            margin-bottom: 20px;
            letter-spacing: .02em;
        }

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

        .footer-link-list li {
            margin-bottom: 11px;
        }

        .footer-link-list a {
            color: rgba(255, 255, 255, .62);
            font-size: 14px;
            transition: all .25s ease;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .footer-link-list a::before {
            content: "";
            width: 4px;
            height: 4px;
            background: var(--copper);
            border-radius: 50%;
            opacity: 0;
            transition: opacity .2s;
        }

        .footer-link-list a:hover {
            color: #fff;
            transform: translateX(3px);
        }

        .footer-link-list a:hover::before {
            opacity: 1;
        }

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

        .footer-contact-list li {
            display: flex;
            align-items: flex-start;
            gap: 11px;
            font-size: 14px;
            color: rgba(255, 255, 255, .6);
            margin-bottom: 12px;
        }

        .footer-contact-list i {
            width: 14px;
            text-align: center;
            color: var(--copper);
            margin-top: 4px;
            font-size: 13px;
        }

        .footer-bottom-bar {
            border-top: 1px solid rgba(255, 255, 255, .1);
            padding-top: 24px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }

        .footer-copyright {
            margin: 0;
            font-size: 13px;
            color: rgba(255, 255, 255, .45);
        }

        .footer-tec {
            font-size: 12px;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .3);
            font-family: var(--font-num);
        }

        /* mobile tabbar */
        .mobile-tabbar {
            display: none;
        }

        @media (max-width: 991.98px) {
            :root {
                --section-gap: 64px;
            }

            body::after {
                height: 66px;
            }

            .desktop-nav,
            .nav-cta {
                display: none;
            }

            .header-inner {
                min-height: 62px;
            }

            .logo-name {
                font-size: 16px;
            }

            .logo-icon {
                width: 36px;
                height: 36px;
                font-size: 18px;
            }

            .mobile-tabbar {
                display: flex;
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                z-index: 1090;
                background: rgba(16, 20, 20, .96);
                backdrop-filter: blur(15px);
                -webkit-backdrop-filter: blur(15px);
                border-top: 1px solid rgba(255, 255, 255, .07);
                transition: transform .3s ease;
            }

            .mobile-tabbar a {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 3px;
                min-height: 62px;
                color: rgba(255, 255, 255, .55);
                font-size: 11px;
                font-weight: 500;
                border-right: 1px solid rgba(255, 255, 255, .04);
                transition: background-color .2s ease, color .2s ease;
                letter-spacing: .02em;
            }

            .mobile-tabbar a:last-child {
                border-right: none;
            }

            .mobile-tabbar a i {
                font-size: 17px;
            }

            .mobile-tabbar a:hover {
                color: #fff;
                background: rgba(255, 255, 255, .03);
            }

            .mobile-tabbar a.active {
                color: #fff;
                background: #262d2c;
            }

            .mobile-tabbar a.active i {
                color: var(--copper);
            }

            .main-footer {
                padding-bottom: 70px;
            }
        }

        @media (min-width: 992px) and (max-width: 1199.98px) {
            .desktop-nav .nav-item>a {
                padding: 10px 12px;
                font-size: 14px;
            }

            .nav-cta .btn-sm {
                padding: 8px 13px;
                font-size: 13px;
            }
        }

        @media (max-width: 767.98px) {
            .article-main {
                padding: 24px 0 56px;
            }

            .article-block {
                padding: 34px 20px 28px;
                border-radius: 4px;
                border-left: none;
                border-right: none;
            }

            .article-title {
                font-size: 28px;
                line-height: 1.3;
                margin-bottom: 16px;
            }

            .article-meta-row {
                gap: 8px 14px;
                padding-bottom: 18px;
            }

            .article-meta-row span {
                font-size: 13px;
            }

            .article-cate-badge {
                font-size: 12px;
                margin-bottom: 16px;
            }

            .article-content {
                font-size: 15px;
                line-height: 1.85;
            }

            .article-content h2 {
                font-size: 21px;
                margin: 1.8em 0 .7em;
            }

            .article-content h3 {
                font-size: 18px;
            }

            .article-content blockquote {
                padding: 12px 16px;
                font-size: 14px;
            }

            .breadcrumb-bar {
                padding: 10px 0;
                font-size: 12px;
                overflow-x: auto;
                white-space: nowrap;
            }

            .breadcrumb-list {
                flex-wrap: nowrap;
            }

            .breadcrumb-list li {
                flex: 0 0 auto;
            }

            .breadcrumb-current {
                white-space: nowrap;
                max-width: 260px;
                text-overflow: ellipsis;
                overflow: hidden;
            }

            .related-section {
                margin-top: 56px;
            }

            .related-head h2 {
                font-size: 24px;
            }

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

            .related-card {
                flex-direction: row;
                align-items: stretch;
            }

            .related-thumb {
                width: 38%;
                aspect-ratio: 1 / 1.1;
                height: auto;
                flex-shrink: 0;
                border-radius: 0;
            }

            .related-thumb img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .related-body {
                padding: 16px 16px;
            }

            .related-body h3 {
                font-size: 16px;
                margin-bottom: 6px;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }

            .related-body p {
                font-size: 13px;
                display: none;
            }

            .related-body .card-label {
                padding: 2px 9px;
                font-size: 11px;
                margin-bottom: 8px;
            }

            .back-to-list {
                margin-top: 32px;
            }

            .footer-grid {
                grid-template-columns: 1fr;
                gap: 30px;
                margin-bottom: 28px;
            }

            .footer-desc {
                max-width: 100%;
            }

            .footer-bottom-bar {
                padding-bottom: 14px;
            }

            .footer-bottom-bar {
                flex-direction: column;
                align-items: flex-start;
                gap: 8px;
            }
        }

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

            .article-not-found {
                padding: 50px 20px;
            }

            .logo-sub {
                display: none;
            }

            .breadcrumb-current {
                max-width: 220px;
            }

            .mobile-tabbar a {
                min-height: 58px;
            }
        }

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

            .related-card .related-body p {
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
        }

        @media (min-width: 992px) and (max-width: 1199.98px) {
            .footer-grid {
                grid-template-columns: 1.2fr .8fr 1fr 1fr;
                gap: 30px;
            }
        }

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

/* roulang page: category1 */
:root{
  --ink:#101414;
  --copper:#B98042;
  --copper-bright:#C98C54;
  --olive:#3D4A43;
  --bg:#F7F4EE;
  --bg-deep:#131716;
  --card:#FFFFFF;
  --line:#E3DED3;
  --muted:#7C7A72;
  --soft:#9DA49C;
  --radius:4px;
  --radius-sm:2px;
  --shadow-soft:0 14px 44px rgba(16,20,20,.06);
  --shadow-lift:0 16px 44px rgba(16,20,20,.09);
  --ease:cubic-bezier(.22,.61,.36,1);
  --font-zh:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-zh);
  background:var(--bg);
  color:var(--ink);
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  padding-bottom:0;
  overflow-x:hidden;
}
@media(max-width:991.98px){
  body{padding-bottom:72px;}
}
body.modal-open{padding-right:0 !important;}
img{max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;transition:color .25s ease;}
a:hover{color:var(--copper);}
ul,ol{padding-left:0;list-style:none;margin:0;}
.container{max-width:1280px;padding-left:24px;padding-right:24px;}
h1,h2,h3,h4,h5,h6{margin:0 0 .5em;line-height:1.3;font-weight:700;color:inherit;}
p{margin:0 0 1rem;}
.btn{
  border-radius:var(--radius-sm);
  font-weight:600;
  letter-spacing:.01em;
  border:1px solid transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.72rem 1.45rem;
  transition:transform .3s var(--ease),background .3s ease,border-color .3s ease,color .3s ease,box-shadow .3s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn:focus-visible{outline:2px solid var(--copper);outline-offset:3px;box-shadow:none;}
.btn-copper{background:var(--copper);border-color:var(--copper);color:#fff;}
.btn-copper:hover,.btn-copper:focus{background:#a66a2e;border-color:#a66a2e;color:#fff;box-shadow:0 12px 32px rgba(185,128,66,.24);}
.btn-outline-ink{background:transparent;border-color:rgba(16,20,20,.34);color:var(--ink);}
.btn-outline-ink:hover,.btn-outline-ink:focus{background:var(--ink);border-color:var(--ink);color:#fff;}
.btn-outline-light{background:transparent;border-color:rgba(255,255,255,.65);color:#fff;}
.btn-outline-light:hover,.btn-outline-light:focus{background:#fff;border-color:#fff;color:var(--ink);}
.btn-lg{padding:1rem 1.8rem;font-size:1rem;}
.btn-sm{padding:.45rem 1rem;font-size:.875rem;min-height:44px;}
.section-title-kicker{
  display:block;
  font-size:.85rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--copper);
  font-weight:600;
  margin-bottom:.25rem;
}
.main-header{
  position:sticky;
  top:0;
  z-index:1060;
  background:rgba(247,244,238,.92);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid rgba(227,222,211,.8);
}
.header-inner{
  display:flex;
  align-items:center;
  min-height:78px;
  gap:1.5rem;
  position:relative;
}
.logo{display:inline-flex;align-items:center;gap:.65rem;flex-shrink:0;}
.logo-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;height:42px;
  border-radius:var(--radius-sm);
  background:var(--ink);
  color:#fff;
  font-size:1.3rem;
  font-weight:800;
  letter-spacing:-.04em;
  font-family:"DIN Alternate","Arial Narrow",sans-serif;
}
.logo-text{display:flex;flex-direction:column;line-height:1.15;}
.logo-name{font-size:1.08rem;font-weight:800;letter-spacing:.01em;color:var(--ink);white-space:nowrap;}
.logo-sub{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-top:2px;}
.desktop-nav{margin-left:auto;}
.nav-list{display:flex;align-items:center;gap:.25rem;}
.nav-item{position:relative;}
.nav-item > a{
  display:flex;
  align-items:center;
  gap:.35rem;
  padding:.6rem 1.02rem;
  border-radius:var(--radius-sm);
  font-weight:600;
  font-size:.94rem;
  color:var(--ink);
}
.nav-item > a:hover{background:rgba(16,20,20,.04);color:var(--copper);}
.nav-item.active > a{color:var(--copper);}
.nav-item.active > a::after{
  content:"";
  position:absolute;
  left:1.02rem;right:1.02rem;bottom:6px;
  height:2px;
  background:var(--copper);
  border-radius:99px;
}
.caret{font-size:.62rem;transition:transform .3s ease;}
.dropdown:hover .caret{transform:rotate(180deg);}
.dropdown-menu-custom{
  position:absolute;
  left:.5rem;
  top:calc(100% + 14px);
  min-width:248px;
  background:#fff;
  border:1px solid var(--line);
  border-top:3px solid var(--copper);
  box-shadow:var(--shadow-soft);
  border-radius:0 0 var(--radius) var(--radius);
  padding:.6rem;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .25s ease,transform .25s var(--ease),visibility .25s;
  z-index:200;
}
.dropdown:hover .dropdown-menu-custom,.nav-item.dropdown:focus-within .dropdown-menu-custom{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.dropdown-menu-custom a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.85rem 1rem;
  border-radius:var(--radius-sm);
  font-weight:600;
  font-size:.92rem;
  color:var(--ink);
}
.dropdown-menu-custom a:hover{background:var(--bg);color:var(--copper);}
.dropdown-menu-custom a.active-sub{background:rgba(185,128,66,.1);color:var(--copper);}
.dropdown-menu-custom .fa-arrow-right{font-size:.72rem;color:var(--copper);}
.nav-cta{display:flex;align-items:center;gap:.65rem;margin-left:.75rem;}
.nav-cta .btn{white-space:nowrap;}
.page-cat-active{pointer-events:none;}
@media(max-width:1199.98px){
  .nav-item > a{padding:.55rem .78rem;font-size:.9rem;}
  .nav-cta .btn-sm{padding:.4rem .75rem;}
}
@media(max-width:991.98px){
  .main-header{position:sticky;top:0;}
  .header-inner{min-height:66px;}
  .desktop-nav,.nav-cta{display:none;}
  .logo-name{font-size:1rem;}
  .logo-icon{width:36px;height:36px;font-size:1.1rem;}
}
.mobile-tabbar{
  display:flex;
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:1200;
  background:rgba(247,244,238,.96);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  box-shadow:0 -8px 32px rgba(16,20,20,.05);
}
.mobile-tabbar a{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:7px 2px;
  color:#7B7E79;
  font-size:.72rem;
  font-weight:600;
  border-radius:var(--radius);
}
.mobile-tabbar a i{font-size:1.22rem;line-height:1;}
.mobile-tabbar a.active{
  background:var(--ink);
  color:#fff;
}
@media(min-width:992px){
  .mobile-tabbar{display:none;}
}
.page-hero{
  position:relative;
  overflow:hidden;
  background-size:cover;
  background-position:center center;
  min-height:660px;
  display:flex;
  align-items:center;
  color:#fff;
}
.page-hero .container{position:relative;z-index:5;}
.hero-inner{
  max-width:840px;
  padding:90px 0;
}
.hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);
  border-radius:99px;
  padding:.45rem 1rem .45rem .55rem;
  font-size:.88rem;
  font-weight:600;
  letter-spacing:.04em;
  color:#fff;
  margin-bottom:1.6rem;
  backdrop-filter:blur(6px);
}
.hero-eyebrow i{color:var(--copper-bright);}
.hero-eyebrow strong{color:var(--copper-bright);}
.hero-title{
  font-size:clamp(2.35rem, 5vw, 4.3rem);
  line-height:1.14;
  max-width:880px;
  letter-spacing:-.025em;
  margin-bottom:1.2rem;
  overflow-wrap:break-word;
}
.hero-desc{
  font-size:1.08rem;
  line-height:1.9;
  max-width:650px;
  color:rgba(255,255,255,.82);
  margin-bottom:1.9rem;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:1.2rem;}
.hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:1.2rem;
  align-items:center;
  padding-top:1.2rem;
  border-top:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.7);
  font-size:.92rem;
  font-weight:600;
}
.hero-meta span{display:inline-flex;align-items:center;gap:.4rem;}
.hero-meta i{color:var(--copper-bright);}
@media(max-width:767px){
  .page-hero{min-height:480px;}
  .hero-inner{padding:64px 0 54px;}
  .hero-desc{font-size:1rem;}
  .hero-meta{font-size:.84rem;gap:.85rem;}
}
.section-space{padding:110px 0;}
.section-space-sm{padding:72px 0;}
@media(max-width:991px){
  .section-space{padding:70px 0;}
  .section-space-sm{padding:56px 0;}
}
.section-head{display:flex;gap:1.2rem;margin-bottom:54px;position:relative;}
.section-head .hd-index{
  font-family:"DIN Alternate","Arial Narrow",sans-serif;
  font-size:1.2rem;
  color:var(--copper);
  font-weight:700;
  line-height:2rem;
  letter-spacing:.08em;
  flex-shrink:0;
}
.section-head::before{
  content:"";
  position:absolute;
  left:0;
  top:-26px;
  width:52px;
  height:1px;
  background:var(--copper);
}
.section-head h2{font-size:clamp(1.8rem,3vw,2.8rem);font-weight:800;letter-spacing:-.02em;margin-bottom:0;}
.section-head h4{font-size:.9rem;color:var(--muted);font-weight:500;margin-top:.4rem;}
.section-head .head-right{margin-left:auto;align-self:flex-end;font-size:.9rem;color:var(--muted);}
@media(max-width:767px){
  .section-head{margin-bottom:42px;}
}
.intro-visual{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--bg-deep);
  min-height:420px;
}
.intro-visual img{width:100%;height:100%;min-height:420px;object-fit:cover;display:block;opacity:.9;}
.intro-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.8rem;
  box-shadow:var(--shadow-soft);
}
.intro-card h3{font-size:1.1rem;font-weight:700;}
.intro-card .tag-cloud{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1rem;}
.intro-card .tag-item{
  background:var(--bg);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:99px;
  padding:.3rem .85rem;
  font-size:.8rem;
  font-weight:600;
}
.intro-copy p{color:#3A3F3D;font-size:1.02rem;}
@media(max-width:991px){
  .intro-visual,.intro-visual img{min-height:320px;}
}
.service-matrix{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}
.svc-row{
  display:flex;
  align-items:stretch;
  border-bottom:1px solid var(--line);
  transition:background .3s ease;
}
.svc-row:last-child{border-bottom:0;}
.svc-row-left{
  flex:0 0 280px;
  padding:2.2rem 2rem;
  background:transparent;
  border-right:1px solid var(--line);
  transition:background .35s ease;
}
.svc-row:hover .svc-row-left{background:rgba(185,128,66,.06);}
.svc-row-num{font-family:"DIN Alternate",sans-serif;color:var(--copper);font-weight:700;font-size:1rem;}
.svc-row h3{font-size:1.25rem;font-weight:750;margin-top:.35rem;margin-bottom:.4rem;}
.svc-row-tagline{font-size:.9rem;color:var(--muted);line-height:1.75;}
.svc-row-mid{
  flex:1;
  padding:2.2rem 3rem;
  display:flex;
  align-items:center;
  gap:2.6rem;
}
.svc-row-desc{max-width:520px;margin:0;font-size:.98rem;color:#3A3F3D;}
.svc-quick{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem;}
.svc-quick .badge-plain{background:var(--bg);border:1px solid var(--line);border-radius:99px;padding:.28rem .8rem;font-size:.78rem;font-weight:600;color:var(--ink);}
.svc-row-right{
  width:230px;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:0 2.2rem;
  border-left:1px solid var(--line);
}
.svc-row-right .btn{min-width:150px;}
@media(max-width:1199px){
  .svc-row-mid{padding:2rem 2.2rem;gap:1.4rem;}
}
@media(max-width:991px){
  .svc-row{flex-wrap:wrap;}
  .svc-row-left{flex:0 0 100%;border-right:0;border-bottom:1px solid var(--line);padding:1.6rem 1.5rem;}
  .svc-row-mid{padding:1.5rem;}
  .svc-row-right{width:100%;border-left:0;border-top:1px solid var(--line);padding:1.4rem 1.5rem;}
}
.scene-block{
  display:flex;
  align-items:center;
  gap:4rem;
  margin-bottom:6.5rem;
}
.scene-block:last-child{margin-bottom:0;}
.scene-block.reverse{flex-direction:row-reverse;}
.scene-visual{
  flex:0 0 46%;
  border-radius:var(--radius);
  overflow:hidden;
  position:relative;
  background:var(--bg-deep);
  box-shadow:var(--shadow-soft);
}
.scene-visual img{width:100%;height:420px;object-fit:cover;display:block;transition:transform .8s ease;}
.scene-visual:hover img{transform:scale(1.02);}
.scene-tag{
  position:absolute;
  left:1rem;bottom:1rem;
  background:rgba(16,20,20,.62);
  color:#fff;
  padding:.35rem 1rem;
  font-size:.8rem;
  font-weight:600;
  border-radius:99px;
  backdrop-filter:blur(6px);
  letter-spacing:.05em;
}
.scene-copy{padding:1.5rem 0;}
.scene-kick{font-size:.85rem;font-weight:700;letter-spacing:.14em;color:var(--copper);text-transform:uppercase;display:block;margin-bottom:.45rem;}
.scene-copy h3{font-size:clamp(1.5rem,2.8vw,2.2rem);font-weight:800;margin-bottom:1.1rem;letter-spacing:-.02em;}
.scene-copy p{font-size:1rem;line-height:1.95;color:#3A3F3D;max-width:520px;}
.scene-points{display:grid;grid-template-columns:1fr 1fr;gap:.6rem 1.5rem;margin-top:1.5rem;padding:1.4rem 1.5rem;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);font-size:.9rem;font-weight:600;}
.scene-points li{display:flex;gap:.55rem;align-items:center;line-height:1.5;}
.scene-points li i{color:var(--copper);}
@media(max-width:991px){
  .scene-block,.scene-block.reverse{flex-direction:column;align-items:stretch;gap:2rem;margin-bottom:4rem;}
  .scene-visual{flex:none;}
  .scene-visual img{height:340px;}
  .scene-copy{padding:0;}
}
@media(max-width:520px){
  .scene-points{grid-template-columns:1fr;gap:.7rem;}
}
.wf-section{
  background:var(--bg-deep);
  color:rgba(255,255,255,.85);
}
.wf-section .section-head h2{color:#fff;}
.wf-section .section-head h4{color:rgba(255,255,255,.5);}
.wf-section .section-head::before{background:var(--copper);}
.wf-item{
  border-top:1px solid rgba(255,255,255,.12);
  padding:1.6rem .35rem;
  display:flex;
  gap:1.4rem;
  align-items:flex-start;
  transition:background .3s ease,border-color .3s ease;
}
.wf-item:last-child{border-bottom:1px solid rgba(255,255,255,.12);}
.wf-item:hover{border-color:var(--copper);}
.wf-num{
  font-family:"DIN Alternate",sans-serif;
  font-size:1.4rem;
  font-weight:700;
  color:var(--copper);
  min-width:70px;
}
.wf-body h3{font-size:1.2rem;font-weight:700;color:#fff;margin-bottom:.3rem;}
.wf-body p{margin:0;font-size:.95rem;color:rgba(255,255,255,.63);max-width:780px;}
@media(min-width:768px){
  .wf-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:3.5rem;}
  .wf-grid .wf-item:nth-last-child(-n+2){border-bottom:1px solid rgba(255,255,255,.12);}
}
.faq-list{
  border-top:1px solid var(--line);
}
.faq-list details{
  border-bottom:1px solid var(--line);
  transition:background .3s ease;
}
.faq-list details:hover{background:rgba(255,255,255,.55);}
.faq-list details[open]{background:#fff;}
.faq-summary{
  display:flex;
  align-items:center;
  gap:1.25rem;
  cursor:pointer;
  padding:1.5rem .4rem;
  list-style:none;
  transition:padding .3s ease;
}
.faq-summary::-webkit-details-marker{display:none;}
.faq-summary .faq-index{
  font-family:"DIN Alternate",sans-serif;
  font-size:.9rem;
  color:var(--copper);
  font-weight:700;
  min-width:34px;
  letter-spacing:.06em;
}
.faq-summary h3{font-size:1.08rem;font-weight:700;margin-bottom:0;flex:1;}
.faq-plus{
  width:30px;height:30px;
  border:1px solid var(--line);
  background:var(--bg);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  font-size:.9rem;
  color:var(--ink);
  transition:transform .25s var(--ease),background .3s ease,color .3s ease;
}
details[open] .faq-plus{transform:rotate(45deg);background:var(--ink);color:#fff;}
.faq-answer{
  padding:0 1.6rem 1.7rem 4.65rem;
  color:#585D59;
  max-width:860px;
  line-height:1.9;
  animation:answer-in .3s linear both;
}
@keyframes answer-in{
  from{opacity:0;transform:translateY(-4px);}
  to{opacity:1;transform:none;}
}
.faq-answer p{margin-bottom:0;}
@media(max-width:575.98px){
  .faq-summary{padding:1.2rem .2rem;}
  .faq-answer{padding:0 .25rem 1.4rem 3.5rem;}
}
.contact-cta{
  background:
    linear-gradient(100deg,var(--ink) 0%,rgba(16,20,20,.94) 70%,rgba(61,74,67,.88) 100%),
    url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
  border-radius:var(--radius);
  color:#fff;
  padding:clamp(2rem,5vw,4.5rem);
  position:relative;
  overflow:hidden;
}
.contact-cta h2{font-size:clamp(1.8rem,3vw,2.8rem);font-weight:800;letter-spacing:-.02em;color:#fff;}
.contact-cta .contact-note{color:rgba(255,255,255,.68);max-width:480px;font-size:1rem;}
.contact-points{margin-top:1.6rem;}
.contact-points li{display:flex;gap:.75rem;align-items:center;padding:.5rem 0;font-weight:600;font-size:.95rem;}
.contact-points li i{color:var(--copper-bright);}
.lead-form{
  background:var(--card);
  border-radius:var(--radius);
  padding:clamp(1.4rem,3vw,2.3rem);
  color:var(--ink);
  box-shadow:0 24px 80px rgba(0,0,0,.12);
}
.lead-form .form-label{font-size:.9rem;font-weight:700;color:var(--ink);margin-bottom:.35rem;}
.lead-form .form-control{
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:#fff;
  padding:.72rem 1rem;
  color:var(--ink);
  font-size:.95rem;
  box-shadow:none;
  transition:border-color .25s ease,box-shadow .25s ease;
}
.lead-form .form-control:focus{
  border-color:var(--copper);
  box-shadow:0 0 0 4px rgba(185,128,66,.12);
  background:#fff;
}
.lead-form .form-control::placeholder{color:#aba9a3;}
.lead-form select.form-control{cursor:pointer;}
.form-privacy{
  font-size:.8rem;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:.45rem;
  margin-top:.8rem !important;
}
.form-privacy i{color:var(--copper);}
@media(max-width:767.98px){
  .contact-cta{padding:2.2rem 1.4rem;background-position:70% center;}
  .lead-form{padding:1.5rem 1.2rem;}
}
.main-footer{
  background:var(--bg-deep);
  color:rgba(255,255,255,.7);
  margin-top:110px;
  padding:86px 0 0;
}
@media(max-width:991px){
  .main-footer{margin-top:70px;padding-top:58px;}
}
.footer-grid{
  display:grid;
  grid-template-columns:1.7fr 1fr 1fr 1.3fr;
  gap:3rem 2.5rem;
  padding-bottom:3.2rem;
  border-bottom:1px solid rgba(255,255,255,.1);
}
@media(max-width:991px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:2rem;}
}
@media(max-width:575px){
  .footer-grid{grid-template-columns:1fr;}
}
.footer-logo-footer{display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem;}
.footer-logo-icon{
  width:38px;height:38px;
  background:#fff;color:var(--ink);
  border-radius:var(--radius-sm);
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1.2rem;
}
.footer-logo-name{font-size:1.1rem;color:#fff;font-weight:800;letter-spacing:.02em;}
.footer-desc{font-size:.95rem;color:rgba(255,255,255,.55);line-height:1.9;max-width:380px;}
.footer-quote{
  margin-top:1.2rem;
  color:rgba(255,255,255,.66);
  font-size:.9rem;
  border-left:2px solid var(--copper);
  padding-left:.9rem;
}
.footer-quote i{color:var(--copper);margin-right:.35rem;}
.footer-title-head{
  color:#fff;
  font-size:.9rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:1.1rem;
}
.footer-link-list li,.footer-contact-list li{margin-bottom:.62rem;}
.footer-link-list a,.footer-contact-list a{
  color:rgba(255,255,255,.58);
  font-size:.92rem;
  transition:color .25s ease,transform .25s ease;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
}
.footer-link-list a:hover,.footer-contact-list a:hover{color:var(--copper-bright);transform:translateX(2px);}
.footer-contact-list li{color:rgba(255,255,255,.58);font-size:.92rem;display:flex;align-items:flex-start;gap:.65rem;}
.footer-contact-list li i{color:var(--copper);margin-top:.35rem;font-size:.8rem;width:16px;text-align:center;}
.footer-bottom-bar{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:1.7rem 0 1.9rem;
  font-size:.85rem;
  color:rgba(255,255,255,.4);
}
@media(max-width:767px){
  .main-footer{padding-top:52px;}
  .footer-bottom-bar{flex-direction:column;text-align:center;}
}
.reduced-motion-trigger{transition:none !important;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
}

/* roulang page: category2 */
:root {
            --ink: #101414;
            --paper: #F7F4EE;
            --white: #FFFFFF;
            --deep: #131716;
            --deep-soft: #1B211F;
            --copper: #B98042;
            --copper-dark: #A96F43;
            --olive: #3D4A43;
            --line: #E3DED3;
            --line-light: rgba(255, 255, 255, .14);
            --muted: #7C7A72;
            --shadow-soft: 0 12px 40px rgba(0, 0, 0, .05);
            --radius: 4px;
            --radius-card: 6px;
            --space-section: 108px;
            --ease: .35s cubic-bezier(.25, .7, .3, 1);
        }

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

        html {
            scroll-behavior: smooth;
            scroll-padding-top: 96px;
        }

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

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

        ul, ol {
            list-style: none;
        }

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

        a {
            color: inherit;
            text-decoration: none;
            transition: color .2s ease;
        }

        button, input, select, textarea {
            font: inherit;
        }

        .container {
            width: 100%;
            max-width: 1220px;
            margin-inline: auto;
        }

        .skip-link {
            position: absolute;
            left: -999px;
            top: 8px;
            z-index: 2000;
            background: var(--deep);
            color: var(--paper);
            padding: 10px 18px;
            border-radius: 4px;
        }

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

        .main-header {
            position: sticky;
            top: 0;
            z-index: 1050;
            background: rgba(247, 244, 238, .92);
            -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
            border-bottom: 1px solid var(--line);
            transition: background .25s ease, border-color .25s ease;
        }

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

        .logo {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            flex-shrink: 0;
        }

        .logo-icon, .footer-logo-icon {
            display: grid;
            place-items: center;
            width: 42px;
            height: 42px;
            background: var(--deep);
            color: var(--copper);
            font-family: "Inter", "Arial Narrow", sans-serif;
            font-weight: 800;
            font-size: 22px;
            border-radius: 3px;
            letter-spacing: -1px;
            box-shadow: inset 0 0 0 1px rgba(185, 128, 66, .3);
        }

        .logo-text {
            display: flex;
            flex-direction: column;
            line-height: 1.2;
        }

        .logo-name {
            font-size: 17px;
            font-weight: 700;
            color: var(--ink);
            letter-spacing: .01em;
        }

        .logo-sub {
            font-size: 11px;
            color: var(--muted);
            letter-spacing: .12em;
            text-transform: uppercase;
            font-family: "Inter", "DIN Alternate", "Arial Narrow", sans-serif;
        }

        .desktop-nav {
            margin-left: auto;
        }

        .nav-list {
            display: flex;
            align-items: center;
            gap: 34px;
        }

        .nav-item {
            position: relative;
        }

        .nav-item > a {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 15px;
            font-weight: 600;
            color: var(--ink);
            padding: 8px 2px;
            position: relative;
        }

        .nav-item > a::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 0;
            height: 2px;
            background: var(--copper);
            transition: width .25s ease;
        }

        .nav-item:hover > a::after,
        .nav-item.active-cat > a::after {
            width: 100%;
        }

        .nav-item > a .caret {
            font-size: 11px;
            opacity: .65;
            transition: transform .25s ease;
        }

        .nav-item.dropdown:hover > a .caret {
            transform: rotate(180deg);
        }

        .dropdown-menu-custom {
            display: block;
            position: absolute;
            top: calc(100% + 12px);
            left: -18px;
            min-width: 268px;
            background: var(--white);
            border: 1px solid var(--line);
            border-radius: var(--radius-card);
            padding: 10px;
            box-shadow: var(--shadow-soft);
            opacity: 0;
            visibility: hidden;
            transform: translateY(12px);
            transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
            z-index: 1040;
        }

        .nav-item.dropdown:hover .dropdown-menu-custom,
        .nav-item.dropdown:focus-within .dropdown-menu-custom {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .dropdown-menu-custom a {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 12px 14px;
            border-radius: 3px;
            font-size: 14px;
            font-weight: 600;
            color: var(--ink);
            border-bottom: 1px solid rgba(227, 222, 211, .45);
            transition: background .18s ease, color .18s ease, padding-left .18s ease;
        }

        .dropdown-menu-custom a:last-child {
            border-bottom: 0;
        }

        .dropdown-menu-custom a i {
            font-size: 11px;
            opacity: 0;
            transform: translateX(-6px);
            transition: opacity .2s ease, transform .2s ease;
        }

        .dropdown-menu-custom a:hover,
        .dropdown-menu-custom a.current-link {
            background: var(--paper);
            color: var(--copper-dark);
            padding-left: 18px;
        }

        .dropdown-menu-custom a:hover i,
        .dropdown-menu-custom a.current-link i {
            opacity: 1;
            transform: translateX(0);
        }

        .nav-cta {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-left: 28px;
            flex-shrink: 0;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: .8rem 1.45rem;
            border: 1px solid transparent;
            border-radius: var(--radius);
            font-size: 15px;
            font-weight: 600;
            letter-spacing: .02em;
            transition: transform .3s ease, background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
            line-height: 1;
            cursor: pointer;
        }

        .btn:focus-visible {
            outline: 3px solid rgba(185, 128, 66, .28);
            outline-offset: 3px;
        }

        .btn-copper {
            background: var(--copper);
            color: #fff;
            border-color: var(--copper);
        }

        .btn-copper:hover,
        .btn-copper:focus {
            background: var(--copper-dark);
            border-color: var(--copper-dark);
            color: #fff;
            transform: translateY(-2px);
            box-shadow: 0 10px 24px rgba(169, 111, 67, .2);
        }

        .btn-copper:active {
            transform: translateY(0);
            box-shadow: none;
        }

        .btn-outline-ink {
            background: transparent;
            color: var(--ink);
            border-color: var(--ink);
        }

        .btn-outline-ink:hover,
        .btn-outline-ink:focus {
            background: var(--ink);
            color: var(--paper);
            border-color: var(--ink);
            transform: translateY(-2px);
        }

        .btn-sm {
            padding: .65rem 1.06rem;
            font-size: 14px;
        }

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

        .btn-outline-light:hover {
            background: #fff;
            color: var(--ink);
            border-color: #fff;
            transform: translateY(-2px);
        }

        .mobile-tabbar {
            display: none;
        }

        .mobile-service-panel {
            display: none;
        }

        @media (min-width: 992px) {
            .mobile-tabbar,
            .mobile-service-panel {
                display: none !important;
            }
        }

        @media (max-width: 991.98px) {
            .desktop-nav,
            .nav-cta {
                display: none;
            }

            .header-inner {
                min-height: 64px;
            }

            .logo-icon {
                width: 38px;
                height: 38px;
                font-size: 19px;
            }

            .mobile-tabbar {
                display: flex;
                position: fixed;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 1080;
                background: rgba(250, 249, 246, .96);
                -webkit-backdrop-filter: blur(14px);
                backdrop-filter: blur(14px);
                border-top: 1px solid var(--line);
                padding: 6px 0;
                justify-content: space-around;
                box-shadow: 0 -6px 24px rgba(0, 0, 0, .03);
            }

            .tab-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 3px;
                min-width: 56px;
                min-height: 48px;
                padding: 4px 8px;
                background: transparent;
                border: 0;
                color: #7c7a72;
                font-size: 12px;
                font-weight: 500;
                border-radius: 6px;
                transition: color .2s ease, background-color .2s ease;
            }

            .tab-item i {
                font-size: 17px;
            }

            .tab-item:hover,
            .tab-item.is-current {
                color: var(--ink);
                background: rgba(16, 20, 20, .06);
            }

            .mobile-service-panel {
                display: block;
                position: fixed;
                left: 0;
                right: 0;
                bottom: 72px;
                z-index: 1075;
                padding: 10px 12px 16px;
                background: transparent;
                pointer-events: none;
            }

            .mobile-service-panel .panel-inner {
                max-width: 640px;
                margin-inline: auto;
                background: var(--deep);
                color: var(--paper);
                border: 1px solid rgba(255, 255, 255, .22);
                border-radius: 10px;
                padding: 10px;
                box-shadow: 0 18px 60px rgba(0, 0, 0, .22);
                pointer-events: auto;
                transform: translateY(16px);
                opacity: 0;
                transition: opacity .25s ease, transform .25s ease;
            }

            .mobile-service-panel.open .panel-inner {
                opacity: 1;
                transform: translateY(0);
            }

            .mobile-service-panel a {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 12px;
                padding: 14px 14px;
                font-size: 15px;
                font-weight: 600;
                border-bottom: 1px solid rgba(255, 255, 255, .1);
                color: var(--paper);
            }

            .mobile-service-panel a:last-child {
                border-bottom: 0;
            }

            .mobile-service-panel a i {
                font-size: 12px;
                opacity: .6;
            }

            .body-content-bottom-space {
                height: 62px;
            }
        }

        .category-hero {
            position: relative;
            padding: 118px 0 112px;
            background-image: linear-gradient(85deg, rgba(16, 20, 20, .9) 0%, rgba(16, 20, 20, .62) 52%, rgba(16, 20, 20, .35) 100%), url("/assets/images/backpic/back-1.webp");
            background-position: center 60%;
            background-size: cover;
            background-repeat: no-repeat;
            color: var(--paper);
        }

        .category-hero .breadcrumb-simple {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            letter-spacing: .02em;
            color: rgba(247, 244, 238, .72);
            margin-bottom: 44px;
        }

        .category-hero .breadcrumb-simple a {
            color: rgba(247, 244, 238, .82);
        }

        .category-hero .breadcrumb-simple a:hover {
            color: var(--copper);
        }

        .category-hero .breadcrumb-simple .sep {
            opacity: .55;
            font-size: 12px;
        }

        .hero-blocks {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 48px;
        }

        .hero-copy {
            max-width: 680px;
        }

        .hero-kicker {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 12px;
            font-size: 12px;
            font-weight: 600;
            background: rgba(255, 255, 255, .08);
            border: 1px solid rgba(255, 255, 255, .18);
            border-radius: 30px;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: rgba(247, 244, 238, .82);
            margin-bottom: 22px;
        }

        .category-hero h1 {
            font-size: clamp(34px, 4.1vw, 54px);
            font-weight: 800;
            line-height: 1.16;
            letter-spacing: -.02em;
            color: #fff;
            max-width: 760px;
        }

        .category-hero h1 span {
            color: var(--copper);
        }

        .hero-lead {
            max-width: 620px;
            font-size: 17px;
            line-height: 1.9;
            color: rgba(247, 244, 238, .86);
            margin: 22px 0 0;
        }

        .hero-btn-row {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 38px;
        }

        .hero-float-card {
            width: 240px;
            background: rgba(255, 255, 255, .08);
            border: 1px solid rgba(255, 255, 255, .2);
            backdrop-filter: blur(8px);
            padding: 30px 26px;
            border-radius: 8px;
        }

        .hero-float-card strong {
            display: block;
            font-size: 44px;
            font-weight: 800;
            font-family: "Inter", "DIN Alternate", sans-serif;
            color: var(--copper);
        }

        .hero-float-card span {
            display: block;
            margin-top: 8px;
            font-size: 13px;
            color: rgba(247, 244, 238, .78);
        }

        .section-gap {
            padding: var(--space-section) 0;
        }

        .section-dark {
            background: var(--deep);
            color: rgba(247, 244, 238, .92);
        }

        .section-heading {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 28px;
            margin-bottom: 48px;
            position: relative;
        }

        .section-heading h2 {
            font-size: clamp(26px, 2.8vw, 38px);
            font-weight: 800;
            line-height: 1.28;
            color: var(--ink);
            letter-spacing: -.01em;
        }

        .section-heading .section-index {
            font-family: "Inter", "DIN Alternate", sans-serif;
            font-size: 14px;
            color: var(--copper-dark);
            letter-spacing: .18em;
            position: relative;
            padding-left: 20px;
            white-space: nowrap;
            margin-top: 8px;
        }

        .section-heading .section-index::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            width: 12px;
            height: 2px;
            background: var(--copper);
        }

        .section-heading .heading-desc {
            max-width: 520px;
            color: var(--muted);
            font-size: 15px;
            line-height: 1.8;
            text-align: right;
        }

        .section-heading.light h2 {
            color: var(--paper);
        }

        .section-heading.light .section-index {
            color: var(--copper);
        }

        .section-heading.light .heading-desc {
            color: rgba(247, 244, 238, .72);
        }

        .metrics-band {
            background: var(--deep);
            border-block: 1px solid #2A332F;
        }

        .metric-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            border-top: 1px solid var(--line-light);
        }

        .metric-item {
            padding: 34px 28px 34px 0;
            min-height: 148px;
            border-right: 1px solid var(--line-light);
        }

        .metric-item:first-child {
            padding-left: 0;
        }

        .metric-item:last-child {
            border-right: 0;
            padding-left: 28px;
            padding-right: 0;
        }

        .metric-item:nth-child(2) {
            padding-left: 28px;
        }

        .metric-item:nth-child(3) {
            padding-left: 28px;
        }

        .metric-num {
            font-family: "Inter", "DIN Alternate", "Arial Narrow", sans-serif;
            font-size: 50px;
            font-weight: 800;
            letter-spacing: -.04em;
            line-height: 1;
            color: #fff;
            display: flex;
            align-items: baseline;
            gap: 4px;
        }

        .metric-num small {
            font-size: 17px;
            font-weight: 400;
            color: var(--copper);
            margin-left: 3px;
        }

        .metric-item p {
            margin-top: 14px;
            color: rgba(247, 244, 238, .65);
            font-size: 14px;
        }

        .insight-section {
            background: var(--paper);
        }

        .split-row {
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            align-items: center;
            gap: 78px;
        }

        .split-row + .split-row {
            margin-top: 104px;
        }

        .split-row .split-copy {
            padding-left: 34px;
            border-left: 3px solid var(--copper);
        }

        .split-copy .split-label {
            display: block;
            font-family: "Inter", "DIN Alternate", sans-serif;
            font-size: 13px;
            color: var(--copper-dark);
            letter-spacing: .16em;
            text-transform: uppercase;
            margin-bottom: 12px;
        }

        .split-copy h2 {
            font-size: 28px;
            font-weight: 800;
            line-height: 1.4;
            color: var(--ink);
            letter-spacing: -.01em;
        }

        .split-copy > p {
            margin-top: 18px;
            color: #4C4C45;
            font-size: 16px;
            line-height: 1.9;
        }

        .feature-list {
            margin-top: 26px;
            display: grid;
            gap: 14px;
        }

        .feature-list li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 15px;
            color: #3d3d37;
            line-height: 1.6;
        }

        .feature-list i {
            margin-top: 5px;
            color: var(--copper-dark);
            font-size: 14px;
        }

        .split-media {
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 28px 80px rgba(16, 20, 20, .06);
        }

        .split-media img {
            width: 100%;
            aspect-ratio: 4 / 3;
            object-fit: cover;
        }

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

        .scene-list {
            border-top: 1px solid var(--line);
            margin-top: 30px;
        }

        .scene-row {
            display: grid;
            grid-template-columns: 90px 1.05fr 1fr auto;
            grid-template-areas: "no name desc tag";
            align-items: center;
            gap: 18px 30px;
            padding: 34px 0;
            border-bottom: 1px solid var(--line);
            transition: padding-left .3s ease, background-color .25s ease;
        }

        .scene-row:hover {
            padding-left: 16px;
            background: linear-gradient(90deg, rgba(185, 128, 66, .06), transparent 40%);
        }

        .scene-no {
            grid-area: no;
            font-family: "Inter", "DIN Alternate", sans-serif;
            font-size: 15px;
            color: var(--copper-dark);
            letter-spacing: .06em;
        }

        .scene-name {
            grid-area: name;
        }

        .scene-name h3 {
            font-size: 20px;
            font-weight: 700;
            color: var(--ink);
        }

        .scene-name p {
            margin-top: 8px;
            font-size: 14px;
            color: var(--muted);
            line-height: 1.7;
        }

        .scene-desc {
            grid-area: desc;
            font-size: 15px;
            color: #48483f;
            line-height: 1.8;
        }

        .scene-tag {
            grid-area: tag;
            justify-self: end;
            padding: 6px 14px;
            background: var(--paper);
            border: 1px solid var(--line);
            border-radius: 30px;
            font-size: 13px;
            color: var(--olive);
            white-space: nowrap;
            font-weight: 600;
        }

        .process-wrap {
            background: var(--paper);
        }

        .process-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-top: 20px;
        }

        .process-card {
            background: var(--white);
            border: 1px solid var(--line);
            border-radius: var(--radius-card);
            padding: 30px 30px 26px;
            box-shadow: 0 1px 0 rgba(0, 0, 0, .01);
            transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
        }

        .process-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-soft);
            border-color: rgba(185, 128, 66, .35);
        }

        .process-card:nth-child(odd) {
            margin-top: 24px;
        }

        .process-card .step-mark {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-family: "Inter", "DIN Alternate", sans-serif;
            color: var(--copper-dark);
            font-size: 13px;
            letter-spacing: .08em;
        }

        .process-card .step-line {
            width: 34px;
            height: 1px;
            background: var(--copper);
        }

        .process-card h3 {
            margin-top: 22px;
            font-size: 21px;
            font-weight: 700;
            color: var(--ink);
        }

        .process-card p {
            margin-top: 12px;
            color: var(--muted);
            font-size: 15px;
            line-height: 1.8;
        }

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

        .faq-list-wrap {
            max-width: 940px;
            border-top: 1px solid var(--line);
        }

        .faq-details {
            border-bottom: 1px solid var(--line);
        }

        .faq-details summary {
            display: flex;
            align-items: center;
            gap: 20px;
            padding: 24px 12px 24px 0;
            cursor: pointer;
            list-style: none;
            transition: background-color .2s ease;
        }

        .faq-details summary:hover {
            background: linear-gradient(90deg, rgba(185, 128, 66, .04), transparent 60%);
        }

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

        .faq-no {
            width: 36px;
            font-family: "Inter", "DIN Alternate", sans-serif;
            color: var(--copper-dark);
            font-size: 14px;
            text-align: right;
            flex-shrink: 0;
            letter-spacing: .06em;
        }

        .faq-q {
            flex: 1;
            font-size: 17px;
            font-weight: 600;
            color: var(--ink);
        }

        .faq-open {
            display: grid;
            place-items: center;
            width: 30px;
            height: 30px;
            border: 1px solid var(--line);
            border-radius: 50%;
            color: var(--copper-dark);
            font-size: 12px;
            flex-shrink: 0;
            transition: transform .28s ease, background-color .25s ease, color .25s ease;
        }

        .faq-details[open] .faq-open {
            background: var(--copper);
            color: #fff;
            transform: rotate(135deg);
            border-color: var(--copper);
        }

        .faq-answer {
            padding: 0 40px 30px 64px;
            color: var(--muted);
            font-size: 15px;
            line-height: 1.9;
        }

        .case-area {
            background: var(--paper);
        }

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

        .case-card {
            grid-column: span 4;
            background: var(--white);
            border: 1px solid var(--line);
            border-radius: var(--radius-card);
            padding: 8px 8px 22px;
            display: flex;
            flex-direction: column;
            transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
        }

        .case-card:first-child {
            grid-column: span 5;
        }

        .case-card:nth-child(2) {
            grid-column: span 4;
        }

        .case-card:nth-child(3) {
            grid-column: span 3;
        }

        .case-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-soft);
            border-color: rgba(185, 128, 66, .35);
        }

        .case-media {
            overflow: hidden;
            border-radius: 4px;
            background: #f0ede5;
        }

        .case-media img {
            width: 100%;
            aspect-ratio: 4 / 3;
            object-fit: cover;
            transition: transform .55s ease;
        }

        .case-card:hover .case-media img {
            transform: scale(1.04);
        }

        .case-body {
            padding: 20px 14px 0;
        }

        .case-body .tag {
            display: inline-block;
            font-size: 12px;
            font-weight: 600;
            color: var(--olive);
            background: var(--paper);
            padding: 4px 10px;
            border-radius: 30px;
            border: 1px solid var(--line);
        }

        .case-body h3 {
            font-size: 20px;
            font-weight: 700;
            margin: 14px 0 10px;
            color: var(--ink);
        }

        .case-body p {
            color: var(--muted);
            font-size: 14px;
            line-height: 1.8;
        }

        .case-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-top: 18px;
            color: var(--copper-dark);
            font-size: 14px;
            font-weight: 600;
        }

        .case-link i {
            font-size: 12px;
            transition: transform .25s ease;
        }

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

        .contact-section {
            background: var(--deep);
            color: rgba(247, 244, 238, .9);
            border-top: 1px solid var(--line-light);
        }

        .contact-section .section-heading h2 {
            color: var(--paper);
        }

        .contact-intro {
            max-width: 520px;
            margin-top: -22px;
            margin-bottom: 32px;
            color: rgba(247, 244, 238, .72);
            line-height: 1.9;
        }

        .contact-methods li {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 11px 0;
            border-bottom: 1px solid rgba(255, 255, 255, .09);
            font-size: 15px;
            color: rgba(247, 244, 238, .85);
        }

        .contact-methods li i {
            margin-top: 6px;
            color: var(--copper);
            width: 18px;
            font-size: 14px;
            text-align: left;
        }

        .contact-methods strong {
            color: var(--paper);
            font-weight: 600;
        }

        .contact-form-card {
            background: var(--paper);
            color: var(--ink);
            border-radius: 10px;
            padding: 34px 34px 26px;
            box-shadow: 0 18px 60px rgba(0, 0, 0, .22);
        }

        .contact-form-card h3 {
            font-size: 22px;
            font-weight: 800;
            margin-bottom: 24px;
        }

        .form-label {
            display: block;
            font-size: 13px;
            font-weight: 600;
            color: var(--ink);
            margin-bottom: 6px;
            letter-spacing: .01em;
        }

        .form-control,
        .form-select {
            width: 100%;
            background: var(--white);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            padding: 12px 14px;
            font-size: 14px;
            color: var(--ink);
            box-shadow: none;
            transition: border-color .25s ease, box-shadow .25s ease;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: var(--copper-dark);
            box-shadow: 0 0 0 4px rgba(185, 128, 66, .12);
            outline: none;
        }

        .form-control::placeholder {
            color: #9a978f;
        }

        textarea.form-control {
            min-height: 110px;
            resize: vertical;
        }

        .form-note {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            margin-top: 12px;
            font-size: 12px;
            color: var(--muted);
            line-height: 1.6;
        }

        .form-note i {
            margin-top: 3px;
            color: var(--olive);
        }

        .contact-btn {
            margin-top: 18px;
            width: 100%;
        }

        .main-footer {
            background: var(--ink);
            color: rgba(247, 244, 238, .72);
            padding: 70px 0 30px;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.4fr 1fr 1.1fr 1.2fr;
            gap: 56px;
        }

        .footer-logo-footer {
            display: flex;
            align-items: center;
            gap: 12px;
            color: #fff;
            font-weight: 700;
            font-size: 17px;
        }

        .footer-logo-icon {
            background: rgba(255, 255, 255, .07);
            color: var(--copper);
        }

        .footer-desc {
            margin: 20px 0 14px;
            font-size: 14px;
            line-height: 1.9;
            color: rgba(247, 244, 238, .62);
            max-width: 360px;
        }

        .footer-quote {
            font-size: 14px;
            color: rgba(185, 128, 66, .9);
            font-style: italic;
        }

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

        .footer-title-head:after {
            content: "";
            display: block;
            width: 26px;
            height: 2px;
            background: var(--copper);
            margin-top: 8px;
        }

        .footer-link-list li,
        .footer-contact-list li {
            margin-bottom: 10px;
        }

        .footer-link-list a {
            font-size: 14px;
            color: rgba(247, 244, 238, .72);
        }

        .footer-link-list a:hover {
            color: var(--copper);
        }

        .footer-contact-list li {
            font-size: 14px;
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }

        .footer-contact-list i {
            margin-top: 5px;
            color: var(--copper);
            width: 14px;
            font-size: 13px;
            text-align: center;
        }

        .footer-bottom-bar {
            margin-top: 52px;
            padding-top: 22px;
            border-top: 1px solid rgba(255, 255, 255, .12);
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 8px;
            font-size: 13px;
            color: rgba(247, 244, 238, .5);
        }

        .footer-tec {
            letter-spacing: .02em;
        }

        @media (max-width: 1199.98px) {
            .nav-list {
                gap: 20px;
            }

            .nav-cta {
                gap: 8px;
                margin-left: 12px;
            }

            .footer-grid {
                grid-template-columns: 1fr 1fr;
                gap: 44px;
            }
        }

        @media (max-width: 991.98px) {
            :root {
                --space-section: 78px;
            }

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

            .hero-float-card {
                width: 100%;
                max-width: 280px;
            }

            .section-heading {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
                margin-bottom: 32px;
            }

            .section-heading .heading-desc {
                text-align: left;
            }

            .metric-grid {
                grid-template-columns: 1fr 1fr;
                border-top: 1px solid var(--line-light);
            }

            .metric-item,
            .metric-item:first-child,
            .metric-item:last-child,
            .metric-item:nth-child(2),
            .metric-item:nth-child(3) {
                padding: 24px 18px;
                border: 0;
                border-top: 1px solid var(--line-light);
            }

            .metric-item:nth-child(odd) {
                border-right: 1px solid var(--line-light);
                padding-left: 0;
            }

            .metric-item:nth-child(even) {
                padding-right: 0;
                padding-left: 18px;
            }

            .metric-num {
                font-size: 42px;
            }

            .split-row {
                grid-template-columns: 1fr;
                gap: 42px;
            }

            .split-row + .split-row {
                margin-top: 80px;
            }

            .split-row .split-copy {
                padding-left: 22px;
            }

            .case-card,
            .case-card:first-child,
            .case-card:nth-child(2),
            .case-card:nth-child(3) {
                grid-column: span 6;
            }

            .case-card:last-child {
                grid-column: 3 / -3;
            }

            .process-card:nth-child(odd) {
                margin-top: 0;
            }

            .contact-form-card {
                padding: 28px 22px 24px;
            }

            .footer-bottom-bar {
                flex-direction: column;
            }
        }

        @media (max-width: 767.98px) {
            :root {
                --space-section: 64px;
            }

            .category-hero {
                padding: 80px 0 74px;
            }

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

            .category-hero .breadcrumb-simple {
                margin-bottom: 28px;
            }

            .hero-btn-row .btn {
                width: calc(50% - 6px);
            }

            .metric-num {
                font-size: 36px;
            }

            .scene-row {
                grid-template-columns: 48px 1fr;
                grid-template-areas:
                    "no name"
                    "desc desc"
                    "tag tag";
                row-gap: 12px;
                padding: 28px 0;
            }

            .scene-tag {
                justify-self: start;
            }

            .process-grid {
                grid-template-columns: 1fr;
            }

            .case-grid {
                grid-template-columns: 1fr;
            }

            .case-card,
            .case-card:first-child,
            .case-card:nth-child(2),
            .case-card:nth-child(3),
            .case-card:last-child {
                grid-column: 1 / -1;
            }

            .faq-answer {
                padding: 0 0 22px 56px;
            }

            .contact-form-card {
                padding: 26px 18px 22px;
            }

            .footer-grid {
                grid-template-columns: 1fr;
                gap: 32px;
            }
        }

        @media (max-width: 575.98px) {
            body {
                font-size: 15px;
                line-height: 1.8;
            }

            .logo-name {
                font-size: 15px;
            }

            .logo-sub {
                font-size: 10px;
            }

            .category-hero h1 {
                font-size: 27px;
                line-height: 1.25;
            }

            .hero-btn-row {
                display: grid;
                grid-template-columns: 1fr;
                margin-top: 28px;
            }

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

            .metric-grid {
                grid-template-columns: 1fr;
            }

            .metric-item,
            .metric-item:first-child,
            .metric-item:nth-child(2) {
                padding: 20px 0;
                border: 0;
                border-top: 1px solid var(--line-light);
            }

            .metric-item:nth-child(odd) {
                border-right: 0;
                padding-left: 0;
            }

            .metric-item:nth-child(even) {
                padding-left: 0;
            }

            .metric-item:first-child {
                border-top: 0;
            }

            .metric-num {
                font-size: 36px;
            }

            .split-row {
                gap: 30px;
            }

            .split-row + .split-row {
                margin-top: 62px;
            }

            .split-copy h2,
            .section-heading h2 {
                font-size: 24px;
            }

            .scene-desc {
                font-size: 14px;
            }

            .faq-no {
                width: 28px;
            }

            .faq-q {
                font-size: 15px;
            }

            .faq-open {
                width: 25px;
                height: 25px;
            }

            .faq-answer {
                padding-left: 46px;
            }

            .main-footer {
                padding: 48px 0 100px;
            }

            .footer-bottom-bar {
                margin-top: 32px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            html {
                scroll-behavior: auto;
            }

            *, *::before, *::after {
                transition-duration: .01ms !important;
                animation-duration: .01ms !important;
            }
        }

/* roulang page: category3 */
:root{
  --ink:#101414;
  --ink-2:#26302c;
  --copper:#B98042;
  --copper-deep:#A96F43;
  --deep:#3D4A43;
  --cream:#F7F4EE;
  --dark:#131716;
  --white:#FFFFFF;
  --line:#E3DED3;
  --muted:#7C7A72;
  --radius:4px;
  --radius-img:6px;
  --shadow-sm:0 6px 18px rgba(0,0,0,.04);
  --shadow-lg:0 18px 50px rgba(0,0,0,.06);
  --font-cn:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-num:"Inter","DIN Alternate","Arial Narrow",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--font-cn);line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,figure{margin:0 0 16px}
h1,h2,h3{line-height:1.22;font-weight:700}
img{max-width:100%;display:block;border:0}
a{color:inherit;text-decoration:none;transition:color .2s ease,background .2s ease,border-color .2s ease}
ul{list-style:none;margin:0;padding:0}
button,input,select,textarea{font:inherit;color:inherit}
.container{max-width:1240px;width:100%;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}
.site-main{overflow:hidden}

/* buttons */
.btn{border-radius:2px;border:1px solid transparent;font-weight:600;letter-spacing:.02em;padding:.75rem 1.35rem;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;transition:transform .3s ease,background .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease;white-space:nowrap}
.btn:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
.btn-copper{background:var(--copper);color:#fff;border-color:var(--copper)}
.btn-copper:hover{background:var(--copper-deep);border-color:var(--copper-deep);color:#fff;transform:translateY(-2px);box-shadow:0 12px 30px rgba(185,128,66,.2)}
.btn-outline-ink{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-outline-ink:hover{background:var(--ink);color:var(--cream);transform:translateY(-2px)}
.btn-sm{padding:.55rem 1rem;font-size:.9rem}
.btn-lg{padding:.85rem 1.5rem}
.btn-light-solid{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.btn-light-solid:hover{background:#fff;color:var(--ink);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn-text{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;border-bottom:1px solid transparent;padding:.2rem .1rem;color:var(--ink);border-radius:0}
.btn-text i{transition:transform .25s ease}
.btn-text:hover{border-color:var(--copper);color:var(--copper-deep)}
.btn-text:hover i{transform:translateX(4px)}

/* section head */
.section-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:50px;padding-top:20px;border-top:1px solid var(--line)}
.section-head .section-index{font-family:var(--font-num);font-size:.8rem;letter-spacing:.16em;color:var(--copper);font-weight:700;padding-top:4px}
.section-head .section-title-block{flex:1}
.section-head .section-eyebrow{display:block;font-size:.75rem;letter-spacing:.18em;color:var(--muted);text-transform:uppercase;margin-bottom:10px}
.section-head h2{font-size:2rem;margin:0;color:var(--ink)}
@media(max-width:575px){
  .section-head h2{font-size:1.5rem}
  .section-head{margin-bottom:34px}
}

/* top header */
.main-header{
  position:sticky;top:0;z-index:1040;
  background:rgba(247,244,238,.92);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px}
.logo{display:inline-flex;align-items:center;gap:12px;min-width:0}
.logo-icon{
  width:42px;height:42px;flex:0 0 42px;border-radius:2px;
  background:var(--ink);color:var(--cream);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-num);font-size:1.25rem;font-weight:800;letter-spacing:-.02em;
}
.logo-text{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.logo-name{font-weight:700;color:var(--ink);font-size:1rem;letter-spacing:.01em;white-space:nowrap}
.logo-sub{font-family:var(--font-num);font-size:.7rem;letter-spacing:.18em;color:var(--muted);text-transform:uppercase}
.desktop-nav{display:none}
.nav-list{display:flex;align-items:center;gap:6px}
.nav-item{position:relative}
.nav-item>a{
  display:flex;align-items:center;gap:.5rem;padding:.7rem .8rem;
  font-weight:500;color:var(--ink);border-radius:2px;font-size:.95rem;
}
.nav-item>a .caret{font-size:.68rem;color:var(--muted);transition:transform .25s ease}
.nav-item>a:hover{color:var(--copper-deep);background:rgba(185,128,66,.06)}
.nav-item.active>a{color:var(--copper-deep);font-weight:600}
.dropdown-menu-custom{
  position:absolute;top:calc(100% + 14px);left:50%;width:292px;
  background:var(--white);border:1px solid var(--line);border-radius:4px;
  padding:10px;z-index:80;box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translate(-50%,8px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s ease;
}
.dropdown-menu-custom::before{content:"";position:absolute;top:-14px;left:0;right:0;height:16px}
.dropdown:hover .dropdown-menu-custom,
.dropdown:focus-within .dropdown-menu-custom{opacity:1;visibility:visible;transform:translate(-50%,0)}
.dropdown-menu-custom a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:.8rem .9rem;border-radius:3px;font-size:.93rem;font-weight:500;color:var(--ink);
}
.dropdown-menu-custom a i{color:var(--copper);font-size:.85rem;opacity:.8;transition:transform .25s ease}
.dropdown-menu-custom a:hover{background:rgba(185,128,66,.09);color:var(--copper-deep)}
.dropdown-menu-custom a.current-page{color:var(--copper-deep);background:#FBF2E8;font-weight:600}
.dropdown-menu-custom a.current-page i{transform:translateX(3px)}
.nav-cta{display:flex;align-items:center;gap:10px}
@media(min-width:992px){
  .desktop-nav{display:block}
  .nav-cta{display:flex}
}
@media(max-width:1199px){
  .nav-item>a{padding:.6rem .45rem;font-size:.9rem}
  .header-inner{gap:10px}
  .logo-name{white-space:normal}
}
@media(max-width:991px){
  .desktop-nav,.nav-cta{display:none}
}

/* hero */
.category-hero{position:relative;padding:98px 0 90px;overflow:hidden;background:#ECE7DA}
.hero-bg-wrap{position:absolute;inset:0;z-index:0}
.hero-bg-wrap img{width:100%;height:100%;object-fit:cover}
.hero-bg-wrap::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(247,244,238,.98) 0%,rgba(247,244,238,.94) 38%,rgba(247,244,238,.62) 70%,rgba(247,244,238,.3) 100%)}
.hero-layout{position:relative;z-index:2;display:grid;grid-template-columns:1.04fr .96fr;align-items:center;gap:64px}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(185,128,66,.1);border:1px solid rgba(185,128,66,.26);
  color:var(--copper-deep);padding:.35rem .8rem;border-radius:2px;
  font-size:.8rem;font-weight:600;letter-spacing:.05em;
}
.hero-eyebrow i{font-size:.9rem}
.hero-copy h1{font-size:3.15rem;line-height:1.15;font-weight:800;margin:26px 0 22px;letter-spacing:-.02em;color:var(--ink)}
.hero-sub{font-size:1.06rem;line-height:1.85;color:#4B5049;max-width:560px;margin-bottom:30px}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px 22px;margin-bottom:34px}
.hero-trust{display:flex;flex-wrap:wrap;gap:0 30px;padding-top:24px;border-top:1px solid rgba(16,20,20,.16)}
.hero-trust span{display:flex;align-items:baseline;gap:8px;font-size:.85rem;color:var(--muted)}
.hero-trust strong{font-family:var(--font-num);font-size:1.12rem;color:var(--ink);font-weight:700}
.hero-visual{position:relative}
.hero-photo-box{position:relative;z-index:2;border-radius:var(--radius-img);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/3;background:#e1dbcf}
.hero-photo-box img{width:100%;height:100%;object-fit:cover}
.hero-visual::after{content:"";position:absolute;right:-22px;bottom:-22px;width:72%;height:58%;border:1px solid rgba(185,128,66,.4);border-radius:var(--radius-img);z-index:1}
.hero-float-card{
  position:absolute;right:-10px;bottom:22px;z-index:3;background:var(--dark);
  color:#eee8db;padding:18px 22px;max-width:260px;border-radius:4px;
  box-shadow:var(--shadow-lg);
}
.hero-float-card span{display:block;font-size:.75rem;letter-spacing:.14em;color:#A99E8C;margin-bottom:6px;text-transform:uppercase}
.hero-float-card strong{font-size:1.02rem;line-height:1.5;font-weight:600;color:#fff}
@media(max-width:991px){
  .category-hero{padding:64px 0 66px}
  .hero-layout{grid-template-columns:1fr;gap:42px}
  .hero-copy h1{font-size:2.5rem}
  .hero-photo-box{max-width:520px}
  .hero-float-card{right:0}
}
@media(max-width:575px){
  .category-hero{padding:50px 0 52px}
  .hero-copy h1{font-size:1.9rem;letter-spacing:-.01em}
  .hero-sub{font-size:1rem}
  .hero-trust{gap:10px 18px}
  .hero-trust span{width:auto}
  .hero-visual::after{display:none}
  .hero-float-card{position:static;max-width:none;margin-top:18px}
}

/* stats metric band */
.stats-band{
  background:var(--dark);color:#F1ECDF;padding:46px 0;
}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.stat-item{border-left:1px solid rgba(255,255,255,.16);padding:10px 32px 10px 28px}
.stat-item:first-child{border-left:0;padding-left:0}
.stat-num{display:block;font-family:var(--font-num);font-size:2.5rem;line-height:1.1;color:#fff;font-weight:600;letter-spacing:-.02em}
.stat-num small{font-size:1rem;color:#B98042;margin-left:4px;font-weight:600;letter-spacing:0}
.stat-label{display:block;font-size:.85rem;color:#A79D89;margin-top:8px}
@media(max-width:991px){.stat-grid{grid-template-columns:1fr 1fr;gap:26px}.stat-item{border-left:0}.stat-item{padding-left:0}}
@media(max-width:480px){.stat-num{font-size:2rem}}

/* matrix */
.section-content{padding:96px 0}
.section-primary{padding:100px 0;background:var(--cream)}
.matrix-wrap{border-top:1px solid var(--line)}
.matrix-row{
  display:grid;grid-template-columns:1.2fr 1.1fr 142px;gap:32px;align-items:center;
  padding:40px 16px 40px 6px;border-bottom:1px solid var(--line);
  transition:background .3s ease;
  position:relative;
}
.matrix-row:hover{background:rgba(185,128,66,.04)}
.matrix-row::after{content:"";position:absolute;left:0;top:0;height:100%;width:0;background:var(--copper);transition:width .3s ease}
.matrix-row:hover::after{width:3px}
.matrix-left .matrix-label{font-family:var(--font-num);font-size:.75rem;letter-spacing:.18em;color:var(--copper);display:block;margin-bottom:12px}
.matrix-left h3{font-size:1.6rem;margin-bottom:10px}
.matrix-left p{color:var(--muted);font-size:.95rem;line-height:1.8;margin:0;max-width:420px}
.matrix-tags{display:flex;flex-wrap:wrap;gap:10px}
.cap-chip{
  display:inline-flex;align-items:center;gap:.4rem;background:#fff;border:1px solid var(--line);
  color:#504e47;font-size:.84rem;padding:.25rem .7rem;border-radius:2px;line-height:1.6;
}
.cap-chip i{color:var(--copper)}
.matrix-action{display:flex;justify-content:flex-end}
.matrix-link{
  display:inline-flex;align-items:center;gap:.6rem;font-weight:600;color:var(--ink);
  border-bottom:1px solid var(--ink);padding:.1rem 0;white-space:nowrap;
}
.matrix-link i{color:var(--copper)}
.matrix-link:hover{color:var(--copper-deep);border-color:var(--copper-deep)}
@media(max-width:991px){
  .matrix-row{grid-template-columns:1fr;gap:22px;padding:30px 6px}
  .matrix-action{justify-content:flex-start}
  .matrix-left h3{font-size:1.4rem}
  .section-primary{padding:72px 0}
}
@media(max-width:575px){
  .matrix-row{grid-template-columns:1fr}
}

/* process */
.process-section{background:#fff;padding:100px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.process-step{position:relative;padding:6px 18px 0 0}
.process-step::after{content:"";position:absolute;right:14px;top:26px;width:64%;height:1px;background:var(--line)}
.process-step:last-child::after{display:none}
.step-index{font-family:var(--font-num);font-size:.8rem;letter-spacing:.14em;color:var(--copper);display:block;margin-bottom:16px}
.step-icon{
  width:48px;height:48px;border-radius:50%;background:var(--ink);color:var(--cream);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;margin-bottom:24px;
}
.process-step h3{font-size:1.22rem;margin:0 0 12px}
.process-step p{font-size:.9rem;color:var(--muted);line-height:1.75;margin:0;padding-right:10px}
@media(max-width:991px){
  .process-section{padding:72px 0}
  .process-steps{grid-template-columns:1fr 1fr;gap:40px 20px}
  .process-step::after{display:none}
}
@media(max-width:575px){
  .process-steps{grid-template-columns:1fr}
  .process-step{padding-bottom:0}
}

/* scenarios */
.scenario-section{padding:106px 0 96px}
.scenario-row{display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:68px;margin-bottom:80px}
.scenario-row:last-child{margin-bottom:0}
.scenario-media{position:relative}
.scenario-media .img-main{border-radius:var(--radius-img);overflow:hidden;box-shadow:var(--shadow-lg);background:#E6E0D5}
.scenario-media .img-main img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10}
.scenario-media .side-badge{
  position:absolute;left:-18px;top:18px;background:var(--copper);color:#fff;
  font-size:.76rem;font-weight:600;letter-spacing:.08em;padding:.4rem .9rem;
  border-radius:2px;box-shadow:0 8px 20px rgba(185,128,66,.25);
}
.scenario-copy .section-cap{font-family:var(--font-num);font-size:.78rem;letter-spacing:.16em;color:var(--copper);font-weight:700;margin-bottom:12px}
.scenario-copy h2{font-size:2.3rem;margin-bottom:18px;color:var(--ink)}
.scenario-copy p{color:#4B5049;font-size:1rem;line-height:1.85;margin-bottom:22px}
.scenario-points li{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px;color:#3e4a45;font-size:.96rem}
.scenario-points li i{color:var(--copper);margin-top:5px;font-size:.9rem}
.scenario-copy .btn{margin-top:28px}
@media(max-width:991px){
  .scenario-section{padding:76px 0}
  .scenario-row{grid-template-columns:1fr;gap:38px}
  .scenario-media .side-badge{left:8px}
  .scenario-media.img-right{order:2}
  .scenario-copy h2{font-size:1.9rem}
}

/* notice section */
.notice-section{padding:100px 0;background:#F1EDE3}
.notice-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.notice-card{
  background:#fff;border:1px solid var(--line);padding:34px 38px;
  border-radius:3px;transition:transform .3s ease,box-shadow .3s ease;
  border-top:3px solid #fff;
}
.notice-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-top-color:var(--copper)}
.notice-flag{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--copper-deep);background:rgba(185,128,66,.09);
  border-radius:2px;padding:.2rem .65rem;font-size:.8rem;font-weight:600;margin-bottom:20px;
}
.notice-card h3{font-size:1.32rem;margin-bottom:12px}
.notice-card p{color:var(--muted);font-size:.95rem;line-height:1.8;margin:0}
@media(max-width:767px){
  .notice-section{padding:72px 0}
  .notice-grid{grid-template-columns:1fr}
}

/* wide action band */
.action-band{
  background:#131716 url('/assets/images/backpic/back-2.webp') center/cover no-repeat;position:relative;
  padding:105px 0;color:#F3EEE4;text-align:center;
}
.action-band::before{content:"";position:absolute;inset:0;background:rgba(19,23,22,.58);z-index:1}
.action-band .container{position:relative;z-index:2}
.action-band h2{font-size:2.35rem;line-height:1.35;max-width:760px;margin:0 auto 18px;color:#fff}
.action-band p{color:#D6CFC2;max-width:680px;margin:0 auto 34px;font-size:1.02rem}
.action-buttons{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
@media(max-width:575px){
  .action-band{padding:70px 0}
  .action-band h2{font-size:1.75rem}
  .action-buttons .btn{width:100%;}
}

/* faq section */
.faq-box{padding:100px 0;background:#fff}
.faq-wrap{max-width:980px;margin:0 auto}
.faq-item{position:relative;border-bottom:1px solid var(--line)}
.faq-question{
  display:grid;grid-template-columns:46px 1fr 44px;align-items:center;gap:16px;text-align:left;
  width:100%;background:transparent;border:0;padding:25px 6px;font-size:1.02rem;font-weight:600;color:var(--ink);
  transition:background .2s ease,color .2s ease;
}
.faq-question:hover{background:#FBF8F2}
.faq-question .q-num{font-family:var(--font-num);font-size:.86rem;color:var(--copper);font-weight:700;letter-spacing:.06em}
.faq-icon{
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  color:var(--copper);border:1px solid var(--line);border-radius:2px;transition:transform .25s ease,color .2s ease,border-color .2s ease;
}
.faq-icon i{font-size:.75rem}
.faq-question[aria-expanded="true"] .faq-icon{transform:rotate(45deg);border-color:var(--copper);background:var(--copper)}
.faq-question[aria-expanded="true"] .faq-icon i{color:#fff}
.faq-answer{padding:4px 46px 28px 68px;color:#62675F;font-size:.96rem;line-height:1.85}
.faq-answer strong{color:var(--ink)}
@media(max-width:575px){
  .faq-box{padding:72px 0}
  .faq-question{grid-template-columns:34px 1fr 36px;gap:12px;padding:20px 2px;font-size:.92rem}
  .faq-question .q-num{font-size:.75rem}
  .faq-answer{padding:2px 10px 22px 34px}
  .faq-wrap{padding-left:0;padding-right:0}
}

/* contact section */
.contact-area{padding:100px 0}
.contact-layout{display:grid;grid-template-columns:1fr .8fr;gap:60px}
.form-card{
  background:#fff;border:1px solid var(--line);border-top:4px solid var(--copper);
  padding:40px 44px 48px;border-radius:4px;box-shadow:var(--shadow-sm);
}
.form-card h2{font-size:2rem;margin-bottom:10px}
.form-lead{color:var(--muted);font-size:.94rem;margin-bottom:30px}
.form-label{font-size:.86rem;font-weight:600;color:var(--ink);margin-bottom:6px}
.form-label .optional{color:var(--muted);font-weight:400;font-size:.8rem}
.form-control,.form-select{
  width:100%;background:#FAF7F1;border:1px solid var(--line);
  border-radius:3px;padding:.7rem .9rem;min-height:48px;color:var(--ink);
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.form-control::placeholder{color:#ADAAA2}
.form-control:focus,.form-select:focus{
  background:#fff;border-color:var(--copper);box-shadow:0 0 0 4px rgba(185,128,66,.12);
  outline:0;color:var(--ink);
}
textarea.form-control{min-height:106px;resize:vertical}
.btn-submit{background:var(--ink);color:#fff;border-color:var(--ink);padding:.9rem 1.6rem;width:100%;margin-top:10px}
.btn-submit:hover{background:#2D3430;border-color:#2D3430;transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.privacy-note{display:flex;align-items:flex-start;gap:8px;color:#8E8B82;font-size:.77rem;margin-top:14px;line-height:1.6}
.privacy-note i{margin-top:3px;color:var(--copper)}
.contact-aside{padding-top:10px}
.contact-aside h3{font-size:1.7rem;margin-bottom:22px}
.contact-aside .intro{color:var(--muted);line-height:1.85;margin-bottom:30px;font-size:.98rem}
.side-list{display:grid;gap:0}
.side-item{display:flex;align-items:flex-start;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.side-item .side-icon{
  width:42px;height:42px;flex:0 0 42px;border-radius:2px;
  background:rgba(185,128,66,.1);border:1px solid rgba(185,128,66,.2);color:var(--copper-deep);
  display:flex;align-items:center;justify-content:center;font-size:1rem;
}
.side-item .side-txt strong{display:block;font-size:.94rem;margin-bottom:4px}
.side-item .side-txt span{font-size:.85rem;color:var(--muted)}
@media(max-width:991px){
  .contact-area{padding:72px 0}
  .contact-layout{grid-template-columns:1fr;gap:36px}
  .form-card{padding:30px 24px}
  .form-card h2{font-size:1.7rem}
  .contact-aside h3{font-size:1.4rem}
}
@media(max-width:575px){
  .form-card{padding:24px 18px}
}

/* footer */
.main-footer{background:var(--dark);color:#CAC6BC;padding-top:80px}
.footer-grid{display:grid;grid-template-columns:1.35fr .7fr .9fr 1.05fr;gap:56px;padding-bottom:70px}
.footer-logo-footer{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.footer-logo-icon{
  width:40px;height:40px;flex:0 0 40px;display:flex;align-items:center;justify-content:center;
  background:var(--cream);color:var(--ink);font-family:var(--font-num);font-weight:800;font-size:1.16rem;border-radius:2px;
}
.footer-logo-name{font-size:1.1rem;font-weight:700;color:#fff;letter-spacing:.02em}
.footer-desc{font-size:.9rem;line-height:1.85;color:#A9A394;margin-bottom:24px;max-width:380px}
.footer-quote{
  font-size:.9rem;color:#F0EADF;font-weight:400;font-style:italic;
  padding-left:18px;border-left:3px solid var(--copper);
}
.footer-quote i{color:var(--copper);margin-right:4px;font-style:normal;font-size:.9rem}
.footer-title-head{
  font-size:.92rem;color:#fff;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:24px;padding-top:4px;
}
.footer-link-list{display:flex;flex-direction:column;gap:12px}
.footer-link-list a{display:inline-block;color:#A9A394;font-size:.93rem;transition:color .2s ease,transform .2s ease}
.footer-link-list a:hover{color:var(--copper);transform:translateX(3px)}
.footer-contact-list li{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px;font-size:.88rem;color:#A9A394;line-height:1.5}
.footer-contact-list i{color:#B98042;margin-top:5px;width:18px;text-align:center}
.footer-bottom-bar{
  border-top:1px solid rgba(255,255,255,.1);padding:22px 0 30px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.footer-copyright{font-size:.8rem;color:#838479;margin:0}
.footer-copyright a{color:#B98042}
.footer-tec{font-size:.72rem;letter-spacing:.12em;color:#6E6E62;text-transform:uppercase}
@media(max-width:1199px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:767px){
  .footer-grid{grid-template-columns:1fr;gap:42px;padding-bottom:44px}
  .main-footer{padding-top:56px}
  .footer-bottom-bar{justify-content:center}
}
@media(min-width:992px){.footer-bottom-bar{padding-bottom:24px}}

/* mobile bottom tab */
.bottom-tab{
  position:fixed;left:0;right:0;bottom:0;z-index:1090;
  display:flex;background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  box-shadow:0 -6px 20px rgba(0,0,0,.04);
}
.bottom-tab-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;padding:10px 4px 14px;color:#89877D;font-size:.68rem;min-height:62px;
  transition:color .2s ease,background .2s ease;
}
.bottom-tab-item i{font-size:1.14rem;color:#8B8983;transition:transform .2s ease}
.bottom-tab-item span{font-weight:600}
.bottom-tab-item:hover{color:var(--copper-deep);background:#FBF6EE}
.bottom-tab-item.active{color:var(--ink)}
.bottom-tab-item.active i{
  color:#fff;background:var(--ink);border-radius:50%;
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  transform:translateY(-2px);box-shadow:0 5px 14px rgba(0,0,0,.12);font-size:1rem;
}
@media(min-width:992px){.bottom-tab{display:none}}
@media(max-width:991px){
  .site-main{padding-bottom:64px}
  #contact-section{scroll-margin-bottom:70px}
}

/* scroll reveal */
.js .a-reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.js .a-reveal.visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .js .a-reveal{opacity:1;transform:none}
}
section{scroll-margin-top:90px}