/* roulang page: index */
:root {
    --paper: #F6F3EE;
    --white: #FFFFFF;
    --ink: #1C1916;
    --ink-deep: #12100D;
    --bronze: #C9761D;
    --bronze-dark: #9C5512;
    --bronze-soft: #F5E7DA;
    --muted: #8A837B;
    --line: #E8E1D8;
    --cardline: #EAE2D8;
    --radius-sm: 4px;
    --radius-btn: 8px;
    --radius-card: 14px;
    --radius-lg: 18px;
    --shadow-soft: 0 2px 10px rgba(28,25,22, .05);
    --shadow-hover: 0 18px 36px rgba(28,25,22, .09);
    --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-stack);
    font-size: 16px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
div,
section,
article,
header,
footer {
    text-rendering: optimizeLegibility;
}

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

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

img {
    max-width: 100%;
    display: inline-block;
    vertical-align: middle;
}

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

.container {
    max-width: 1200px;
}

section[id] {
    scroll-margin-top: 92px;
}

@media (max-width: 991px) {
    section[id] {
        scroll-margin-top: 70px;
    }
}

/* ---------- Buttons ---------- */
.btn-mk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: var(--radius-btn);
    padding: .75rem 1.5rem;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    border: 1px solid transparent;
    transition: all .2s ease;
}

.btn-mk-bronze {
    background: var(--bronze);
    border-color: var(--bronze);
    color: var(--white) !important;
}

.btn-mk-bronze:hover,
.btn-mk-bronze:active {
    background: var(--bronze-dark);
    border-color: var(--bronze-dark);
    color: var(--white) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(201,118,29,.24);
}

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

.btn-mk-outline:hover {
    background: var(--ink);
    color: var(--white);
}

.btn-mk-white {
    background: var(--white);
    border-color: var(--white);
    color: var(--ink) !important;
}

.btn-mk-white:hover {
    background: #eee6db;
    border-color: #eee6db;
    color: var(--ink) !important;
}

.btn-mk:focus,
.btn:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(201,118,29, .2);
}

/* ---------- Header / Nav ---------- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 76px;
    background: rgba(246,243,238, .92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(232,225,216, .9);
    z-index: 1040;
}

.site-header .logo-area,
.site-header .header-main {
    height: 76px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: var(--ink);
    white-space: nowrap;
}

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

.brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--ink);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: .5px;
    position: relative;
}

.brand-mark::after {
    content: "";
    position: absolute;
    right: -3px;
    top: 5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bronze);
    border: 2px solid var(--paper);
}

.brand-name {
    font-size: 21px;
    font-weight: 750;
    letter-spacing: .01em;
    color: var(--ink);
}

.main-menu {
    list-style: none;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    gap: .25rem;
}

.main-menu>li {
    position: relative;
}

.main-menu>li>a {
    display: inline-flex;
    align-items: center;
    height: 76px;
    padding: 0 .9rem;
    font-size: 15px;
    font-weight: 500;
    color: var(--ink);
    position: relative;
}

.main-menu>li>a::after {
    content: "";
    position: absolute;
    left: .9rem;
    right: .9rem;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--bronze);
    opacity: 0;
    transform: scaleX(.7);
    transition: all .25s ease;
}

.main-menu>li>a:hover {
    color: var(--bronze);
}

.main-menu>li>a.active {
    color: var(--bronze-dark);
}

.main-menu>li>a.active::after,
.main-menu>li>a:hover::after {
    opacity: 1;
    transform: scaleX(1);
}

.main-menu .menu-chevron {
    font-size: .7rem;
    opacity: .7;
    margin-left: .4rem;
}

.dropdown-panel {
    position: absolute;
    top: 68px;
    left: -68px;
    background: var(--white);
    min-width: 430px;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 26px 60px rgba(28,25,22, .13);
    padding: .8rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all .22s ease;
    z-index: 50;
}

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

.dropdown-head {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--muted);
    text-transform: uppercase;
    padding: .35rem .6rem .5rem;
}

.dropdown-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .6rem .65rem;
    border-radius: 8px;
    color: var(--ink);
    transition: background .2s ease;
}

.dropdown-link:hover {
    background: var(--paper);
    color: var(--ink);
}

.dropdown-link-inner {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.dropdown-link strong {
    font-size: 15px;
    font-weight: 650;
}

.dropdown-link em {
    font-style: normal;
    font-size: 13px;
    color: var(--muted);
}

.dropdown-link i {
    color: var(--bronze);
    transition: transform .2s ease;
}

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

/* ---------- Mobile top bar & bottom tab ---------- */
.site-header .mobile-logo {
    display: none;
    align-items: center;
    height: 64px;
}

.mobile-tabbar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 66px;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--white);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 24px rgba(28,25,22, .05);
    z-index: 1100;
    align-items: stretch;
}

.mobile-tabbar .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.2;
    border: none;
    background: transparent;
}

.mobile-tabbar .tab-item i {
    font-size: 18px;
}

.mobile-tabbar .tab-item.active,
.mobile-tabbar .tab-item:hover {
    color: var(--bronze);
}

@media (max-width: 991px) {
    body {
        padding-bottom: 66px;
    }

    .site-header {
        height: 64px;
        padding: 0 0;
    }

    .site-header .header-main {
        height: 64px;
    }

    .site-header .main-menu,
    .site-header .desktop-cta {
        display: none !important;
    }

    .site-header .mobile-logo {
        display: flex;
    }

    .site-header .logo-area {
        height: 64px;
    }

    .site-header .brand-mark {
        width: 32px;
        height: 32px;
    }

    .site-header .brand-name {
        font-size: 19px;
    }

    .mobile-tabbar {
        display: flex;
    }
}

/* ---------- Hero ---------- */
.hero {
    background: linear-gradient(to right, rgba(18,16,13, .92) 0%, rgba(18,16,13, .72) 42%, rgba(18,16,13, .35) 100%), url('/assets/images/backpic/back-1.webp') center/cover no-repeat;
    color: var(--white);
    min-height: 680px;
    display: flex;
    align-items: center;
    padding: 150px 0 90px;
    position: relative;
    overflow: hidden;
}

.hero .hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #f2c58b;
    border: 1px solid rgba(243,190,129, .4);
    border-radius: 999px;
    padding: .45rem 1rem;
    background: rgba(28,25,22, .2);
}

.hero .hero-kicker i {
    font-size: .8rem;
}

.hero-title {
    font-size: 56px;
    line-height: 1.18;
    font-weight: 750;
    letter-spacing: -0.01em;
    color: var(--white);
    margin: 1.35rem 0 1rem;
}

.hero-title .mk-strong {
    color: #F1B87D;
}

.hero-sub {
    font-size: 17px;
    max-width: 640px;
    color: rgba(255,255,255, .88);
    margin-bottom: 2.2rem;
    line-height: 1.9;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
}

.hero-metrics {
    display: flex;
    flex-wrap: wrap;
    margin-top: 3.8rem;
    gap: 2.2rem;
    max-width: 600px;
}

.metric-text {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 14px;
    color: rgba(255,255,255, .82);
}

.metric-text i {
    color: #E8A766;
    font-size: 16px;
}

.hero-deco-line {
    position: absolute;
    width: 360px;
    height: 360px;
    right: -80px;
    bottom: -90px;
    border: 1px dashed rgba(255,255,255, .25);
    border-radius: 50%;
}

.hero-deco-line::before {
    content: "";
    position: absolute;
    left: 0;
    top: 82px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--bronze);
    box-shadow: 0 0 0 8px rgba(201,118,29, .25);
}

@media (max-width: 767px) {
    .hero {
        min-height: 0;
        padding: 130px 0 62px;
    }

    .hero-title {
        font-size: 34px;
        line-height: 1.3;
    }

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

    .hero-metrics {
        gap: 1rem 1.5rem;
    }

    .metric-text {
        font-size: 13px;
    }
}

/* ---------- Sections ---------- */
.section {
    padding: 100px 0;
}

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

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

.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2.6rem;
}

.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: .1em;
    color: var(--bronze-dark);
    text-transform: uppercase;
    margin-bottom: .6rem;
}

.section-eyebrow::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 2px;
    background: var(--bronze);
    border-radius: 2px;
}

.section-title {
    font-size: 34px;
    line-height: 1.28;
    font-weight: 720;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0;
}

.section-desc {
    font-size: 16px;
    color: var(--muted);
    max-width: 700px;
    margin: .5rem 0 0;
    line-height: 1.85;
}

.section-more {
    font-size: 14px;
    font-weight: 600;
    color: var(--bronze);
    white-space: nowrap;
}

.section-more i {
    margin-left: .3rem;
    transition: transform .2s ease;
    display: inline-block;
}

.section-more:hover i {
    transform: translateX(4px);
}

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

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

    .section-desc {
        font-size: 15px;
    }

    .section-head {
        display: block;
    }

    .section-more {
        display: inline-block;
        margin-top: .6rem;
    }
}

/* ---------- About ---------- */
.about-band {
    background: var(--white);
    padding: 100px 0;
}

.about-visual {
    position: relative;
    height: 100%;
    min-height: 460px;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.about-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-visual-card {
    position: absolute;
    left: 22px;
    bottom: 22px;
    right: 22px;
    background: rgba(255,255,255, .95);
    border: 1px solid rgba(232,225,216, .9);
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 1rem;
    backdrop-filter: blur(5px);
}

.about-visual-card .about-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 9px;
    background: var(--bronze-soft);
    color: var(--bronze-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.about-visual-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
}

.about-visual-card small {
    color: var(--muted);
    font-size: 12px;
}

.about-content {
    padding-left: 2rem;
}

.about-lead {
    margin-top: 1.2rem;
    font-size: 17px;
    line-height: 2;
    color: #4a433c;
}

.principle-list {
    margin-top: 2.2rem;
    list-style: none;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.principle-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding-bottom: 1rem;
    border-bottom: 1px dashed var(--line);
}

.principle-num {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 15px;
    font-weight: 700;
    color: var(--bronze);
    background: var(--bronze-soft);
    min-width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    flex-shrink: 0;
}

.principle-body strong {
    display: block;
    font-size: 17px;
    font-weight: 650;
    margin-bottom: .2rem;
}

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

@media (max-width: 991px) {
    .about-band {
        padding: 70px 0;
    }

    .about-visual {
        min-height: 320px;
        margin-bottom: 1.5rem;
    }

    .about-content {
        padding-left: 0;
    }
}

/* ---------- Products ---------- */
.products-band {
    background: var(--paper);
    padding: 100px 0;
}

.prod-feature {
    background: var(--white);
    border: 1px solid var(--cardline);
    border-radius: 18px;
    display: flex;
    min-height: 360px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: box-shadow .25s ease, transform .25s ease;
}

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

.prod-feature__body {
    padding: 3rem 2.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.prod-feature .tagline {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--bronze-soft);
    color: var(--bronze-dark);
    border-radius: 999px;
    padding: .35rem .75rem;
    font-size: 13px;
    font-weight: 600;
    align-self: flex-start;
    margin-bottom: 1.2rem;
}

.prod-feature h3 {
    font-size: 29px;
    font-weight: 720;
    margin-bottom: 1.2rem;
    color: var(--ink);
}

.prod-feature p {
    font-size: 15px;
    color: #5d554c;
    margin-bottom: 1.8rem;
    line-height: 1.9;
}

.prod-feature__media {
    background: var(--ink) center/cover no-repeat;
    min-height: 340px;
    height: 100%;
    position: relative;
}

.prod-feature__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, rgba(18,16,13, 0) 20%, rgba(18,16,13, .04) 100%);
}

.category-card {
    display: block;
    background: var(--white);
    border: 1px solid var(--cardline);
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
    box-shadow: var(--shadow-soft);
    transition: transform .25s ease, box-shadow .25s ease;
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
    color: var(--ink);
}

.category-card__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #e2dbd2;
}

.category-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.category-card:hover .category-card__media img {
    transform: scale(1.04);
}

.category-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(28,25,22, .08), transparent 45%);
}

.category-card__body {
    padding: 1.4rem 1.5rem 1.5rem;
}

.category-card__body h3 {
    font-size: 19px;
    font-weight: 680;
    margin-bottom: .55rem;
    color: var(--ink);
}

.category-card__body p {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.75;
    margin-bottom: 1rem;
}

.category-card__link {
    font-size: 14px;
    font-weight: 600;
    color: var(--bronze);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.category-card__link i {
    transition: transform .2s ease;
}

.category-card:hover .category-card__link i {
    transform: translateX(5px);
}

@media (max-width: 991px) {
    .products-band {
        padding: 70px 0;
    }

    .prod-feature {
        flex-direction: column-reverse;
    }

    .prod-feature__body {
        padding: 1.8rem 1.4rem;
    }

    .prod-feature h3 {
        font-size: 24px;
    }

    .prod-feature__media {
        min-height: 240px;
    }
}

/* ---------- News ---------- */
.news-band {
    background: var(--white);
    padding: 100px 0;
}

.news-spotlight {
    width: 100%;
    border: 1px solid var(--cardline);
    border-radius: 16px;
    background: var(--white);
    height: 100%;
    box-shadow: var(--shadow-soft);
    transition: box-shadow .25s ease, transform .25s ease;
}

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

.news-spotlight .news-spot-card {
    padding: 1.8rem 1.8rem 1.5rem;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.news-spotlight .news-meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 1rem;
}

.news-badge {
    background: var(--bronze-soft);
    color: var(--bronze-dark);
    font-size: 12px;
    font-weight: 650;
    border-radius: var(--radius-sm);
    padding: .25rem .6rem;
}

.news-spotlight h3 {
    font-size: 20px;
    font-weight: 680;
    line-height: 1.5;
    margin-bottom: .75rem;
    color: var(--ink);
}

.news-spotlight h3 a {
    color: var(--ink);
}

.news-spotlight h3 a:hover {
    color: var(--bronze);
}

.news-spotlight p {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.85;
    margin-bottom: 1.3rem;
}

.news-spotlight .news-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    color: var(--muted);
    font-size: 13px;
    border-top: 1px solid var(--line);
    padding-top: 1rem;
}

.news-spotlight .news-footer a {
    font-weight: 600;
    color: var(--bronze);
}

.news-compact-list {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-top: .35rem;
}

.news-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .95rem 0;
    border-top: 1px solid var(--line);
    font-size: 15px;
    color: var(--ink);
    transition: padding .2s ease, background .2s ease;
    border-radius: 8px;
}

.news-row:hover {
    background: var(--paper);
    padding-left: .5rem;
    padding-right: .5rem;
    color: var(--ink);
}

.news-row .news-badge {
    flex-shrink: 0;
}

.news-row-title {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.news-row time {
    flex-shrink: 0;
    font-size: 13px;
    color: var(--muted);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

.news-row i {
    color: var(--bronze);
    font-size: 13px;
    flex-shrink: 0;
}

.news-empty {
    border: 1px dashed var(--line);
    background: #faf7f2;
    border-radius: 18px;
    padding: 3rem 2rem;
    text-align: center;
    color: var(--muted);
    font-size: 15px;
}

.news-empty i {
    font-size: 2rem;
    color: #c4baae;
    display: block;
    margin-bottom: .8rem;
}

@media (max-width: 767px) {
    .news-band {
        padding: 68px 0;
    }

    .news-row time {
        display: none;
    }
}

/* ---------- Trust ---------- */
.trust-band {
    background: linear-gradient(90deg, rgba(28,25,22, .96), rgba(28,25,22, .88)), url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
    color: var(--white);
    padding: 100px 0;
}

.trust-band .section-title,
.trust-band .section-desc {
    color: var(--white);
}

.trust-title-wrap .section-title {
    color: var(--white);
    font-size: 34px;
    font-weight: 720;
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 2.8rem;
}

.trust-item {
    background: rgba(255,255,255, .04);
    border: 1px solid rgba(255,255,255, .12);
    border-radius: 16px;
    padding: 2.2rem 1.8rem;
}

.trust-icon {
    width: 50px;
    height: 50px;
    border-radius: 11px;
    background: rgba(201,118,29, .2);
    color: #F0B57A;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 1.2rem;
}

.trust-item h3 {
    font-size: 20px;
    font-weight: 650;
    margin-bottom: .6rem;
    color: var(--white);
}

.trust-item p {
    font-size: 15px;
    color: rgba(255,255,255, .75);
    line-height: 1.85;
    margin: 0;
}

@media (max-width: 991px) {
    .trust-band {
        padding: 70px 0;
    }

    .trust-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* ---------- FAQ ---------- */
.faq-band {
    background: var(--paper);
    padding: 100px 0;
}

.custom-accordion .accordion-item {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(28,25,22, .02);
}

.custom-accordion .accordion-button {
    background: var(--white);
    color: var(--ink);
    font-size: 16px;
    font-weight: 600;
    padding: 1.1rem 1.4rem;
    box-shadow: none;
}

.custom-accordion .accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23C9761D'%3E%3Cpath fill-rule='evenodd' d='M8 2a.75.75 0 0 1 .75.75v4.5h4.5a.75.75 0 0 1 0 1.5h-4.5v4.5a.75.75 0 0 1-1.5 0v-4.5h-4.5a.75.75 0 0 1 0-1.5h4.5v-4.5A.75.75 0 0 1 8 2Z'/%3E%3C/svg%3E");
    background-size: 16px;
    transition: transform .2s ease;
}

.custom-accordion .accordion-button:not(.collapsed) {
    background: #FDF9F4;
    color: var(--bronze-dark);
    box-shadow: none;
}

.custom-accordion .accordion-button:not(.collapsed)::after {
    transform: rotate(45deg);
}

.custom-accordion .accordion-button:focus {
    box-shadow: 0 0 0 4px rgba(201,118,29, .16);
    border-color: transparent;
}

.custom-accordion .accordion-body {
    padding: .2rem 1.4rem 1.4rem;
    color: #5D554C;
    font-size: 15px;
    line-height: 1.9;
}

@media (max-width: 767px) {
    .faq-band {
        padding: 68px 0;
    }

    .custom-accordion .accordion-button {
        font-size: 15px;
    }
}

/* ---------- Contact CTA ---------- */
.contact-band {
    background: linear-gradient(100deg, rgba(18,16,13, .96), rgba(18,16,13, .84)), url('/assets/images/backpic/back-3.png') center/cover no-repeat;
    color: var(--white);
    padding: 100px 0;
    position: relative;
}

.contact-band .section-title {
    color: var(--white);
}

.contact-band .contact-tagline {
    color: rgba(255,255,255, .76);
    line-height: 1.9;
    margin: 1.1rem 0 2.4rem;
    max-width: 520px;
}

.contact-meta-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 1.1rem;
}

.contact-meta-list li {
    display: flex;
    align-items: center;
    gap: .9rem;
    color: rgba(255,255,255, .9);
    font-size: 15px;
}

.contact-meta-list i {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: rgba(201,118,29, .2);
    color: #F0B57A;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.contact-form-wrap {
    background: #fff;
    border-radius: 18px;
    padding: 34px;
    color: var(--ink);
    box-shadow: 0 30px 60px rgba(0,0,0, .28);
}

.contact-form-wrap .form-label {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: .35rem;
}

.contact-form-wrap .form-control {
    height: 48px;
    border: 1px solid #DDD3C8;
    border-radius: 10px;
    background: #FBF9F6;
    transition: border-color .2s, box-shadow .2s;
    font-size: 15px;
    color: var(--ink);
}

.contact-form-wrap textarea.form-control {
    height: auto;
    min-height: 108px;
    padding-top: .75rem;
}

.contact-form-wrap .form-control:focus {
    background: var(--white);
    border-color: var(--bronze);
    box-shadow: 0 0 0 4px rgba(201,118,29, .18);
    outline: none;
}

.contact-form-wrap .form-control::placeholder {
    color: #ADA198;
}

.form-tip {
    font-size: 12px;
    color: var(--muted);
    margin-top: .35rem;
}

.form-success {
    display: none;
    font-size: 14px;
    color: #587544;
    background: #EAF3E4;
    padding: .8rem 1rem;
    border-radius: 8px;
    margin-top: .8rem;
}

.form-success.show {
    display: block;
}

.quick-subscribe {
    display: flex;
    gap: .6rem;
    max-width: 440px;
    margin-top: 2.2rem;
}

.quick-subscribe input {
    flex: 1;
    height: 48px;
    border: 1px solid rgba(255,255,255, .3);
    background: rgba(255,255,255, .08);
    border-radius: 8px;
    padding: 0 1rem;
    color: var(--white);
    font-size: 14px;
}

.quick-subscribe input:focus {
    outline: none;
    border-color: #E8A766;
    box-shadow: 0 0 0 4px rgba(201,118,29, .18);
}

.quick-subscribe input::placeholder {
    color: rgba(255,255,255, .55);
}

@media (max-width: 767px) {
    .contact-band {
        padding: 70px 0;
    }

    .contact-form-wrap {
        padding: 22px;
    }
}

/* ---------- Footer ---------- */
.site-footer {
    background: var(--ink-deep);
    color: rgba(255,255,255, .78);
}

.footer-top {
    padding: 80px 0 42px;
    border-bottom: 1px solid rgba(255,255,255, .08);
}

.footer-brand-name {
    font-size: 28px;
    font-weight: 760;
    color: var(--white);
    margin: 0 0 .8rem;
}

.footer-brand-text {
    font-size: 14px;
    line-height: 1.9;
    color: rgba(255,255,255, .62);
    margin-bottom: 1.6rem;
    max-width: 340px;
}

.footer-title {
    font-size: 15px;
    font-weight: 650;
    color: var(--white);
    margin-bottom: 1.4rem;
}

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

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

.footer-links a:hover {
    color: #E8A766;
}

.footer-contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .75rem;
    font-size: 14px;
    color: rgba(255,255,255, .62);
}

.footer-contact-list i {
    width: 22px;
    color: #E8A766;
}

.footer-bottom {
    padding: 22px 0;
    font-size: 13px;
    color: rgba(255,255,255, .44);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem;
}

.icp-text {
    font-size: 12px;
}

@media (max-width: 767px) {
    .site-footer .footer-top {
        padding: 56px 0 26px;
    }

    .footer-title {
        margin-top: .8rem;
    }

    .site-footer {
        padding-bottom: 0;
    }
}

/* roulang page: article */
:root {
    --bg: #F6F3EE;
    --white: #FFFFFF;
    --ink: #1C1916;
    --deep: #12100D;
    --brass: #C9761D;
    --brass-dark: #9C5512;
    --metal: #8A837B;
    --line: #E8E1D8;
    --border-card: #EAE2D8;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-cover: 20px;
    --shadow-sm: 0 2px 10px rgba(28,25,22,.05);
    --shadow-hover: 0 16px 32px rgba(28,25,22,.09);
    --font-sans: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--ink);
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

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

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

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

.container {
    max-width: 1200px;
    padding-left: 24px;
    padding-right: 24px;
}

@media (min-width: 1200px) {
    .container {
        max-width: 1200px;
    }
}

/* -------------------------------------------------- */
/* Header                                              */
/* -------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1045;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--line);
}

.header-main {
    min-height: 76px;
}

.logo-area {
    flex-shrink: 0;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    text-decoration: none;
}

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

.brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--ink);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .06em;
    flex-shrink: 0;
}

.brand-name {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: .02em;
}

.mobile-logo {
    display: none;
}

.main-menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-menu > li {
    list-style: none;
    position: relative;
}

.main-menu > li > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 14px;
    margin: 0 2px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    line-height: 1.2;
    transition: color .2s ease, background .2s ease;
}

.main-menu > li > a:hover {
    color: var(--brass-dark);
    background: rgba(201, 118, 29, .06);
}

.main-menu > li > a.active {
    color: var(--brass);
    font-weight: 600;
}

.main-menu > li > a.active::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 3px;
    height: 2px;
    border-radius: 2px;
    background: var(--brass);
}

.menu-chevron {
    font-size: 11px;
    margin-left: 6px;
    opacity: .75;
}

.nav-drop {
    position: relative;
}

.dropdown-panel {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    width: 410px;
    background: var(--white);
    border: 1px solid var(--border-card);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(28, 25, 22, .16);
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
    z-index: 90;
    text-align: left;
}

.dropdown-head {
    font-size: 13px;
    font-weight: 700;
    color: var(--metal);
    letter-spacing: .06em;
    padding: 6px 8px 14px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 8px;
}

.dropdown-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 10px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--ink);
    transition: background .2s ease;
}

.dropdown-link:hover {
    background: var(--bg);
    color: var(--ink);
}

.dropdown-link-inner {
    display: block;
}

.dropdown-link-inner strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 2px;
}

.dropdown-link-inner em {
    display: block;
    font-style: normal;
    font-size: 13px;
    color: var(--metal);
}

.dropdown-link i {
    font-size: 13px;
    color: var(--brass);
    flex-shrink: 0;
}

.nav-drop:hover .dropdown-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(2px);
}

.header-contact-mini {
    font-size: 13px;
    color: var(--metal);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    white-space: nowrap;
}

.header-contact-mini i {
    color: var(--brass);
}

/* -------------------------------------------------- */
/* Mobile bottom tab                                   */
/* -------------------------------------------------- */
.mobile-tabbar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    background: rgba(255, 255, 255, .98);
    border-top: 1px solid var(--line);
    padding: 0 8px calc(env(safe-area-inset-bottom) + 6px);
    box-shadow: 0 -8px 30px rgba(28, 25, 22, .08);
    backdrop-filter: blur(10px);
    min-height: 64px;
    align-items: center;
    justify-content: space-around;
}

.mobile-tabbar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    padding: 8px 2px 4px;
    gap: 3px;
    font-size: 12px;
    font-weight: 500;
    color: #746B62;
    text-decoration: none;
    border-radius: 10px;
    transition: color .2s ease, background .2s ease;
}

.mobile-tabbar a i {
    font-size: 19px;
    line-height: 1;
}

.mobile-tabbar a.active {
    color: var(--brass);
    font-weight: 600;
}

.mobile-tabbar a.active i {
    background: rgba(201, 118, 29, .12);
    width: 38px;
    height: 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* -------------------------------------------------- */
/* Article hero / top                                  */
/* -------------------------------------------------- */
.article-head {
    position: relative;
    padding: 76px 0 68px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}

.article-head::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('/assets/images/backpic/back-2.webp');
    background-size: cover;
    background-position: center;
    opacity: .06;
    pointer-events: none;
}

.article-head::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 1px;
    height: 42px;
    background: var(--line);
    transform: translateX(-50%);
}

.article-head-inner {
    position: relative;
    z-index: 2;
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.breadcrumb-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
    color: var(--metal);
    margin-bottom: 20px;
}

.breadcrumb-nav a {
    color: var(--brass-dark);
    text-decoration: none;
}

.breadcrumb-nav a:hover {
    color: var(--brass);
}

.breadcrumb-divider {
    color: var(--metal);
    opacity: .5;
}

.article-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--brass-dark);
    background: rgba(201, 118, 29, .1);
    border: 1px solid rgba(201, 118, 29, .2);
    border-radius: 999px;
    padding: 7px 16px;
    margin-bottom: 18px;
}

.article-eyebrow i {
    font-size: 12px;
}

.article-title {
    font-size: clamp(30px, 4.4vw, 44px);
    line-height: 1.25;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.01em;
    margin: 0 0 18px;
    word-break: break-word;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 18px;
    color: var(--metal);
    font-size: 14px;
    margin-bottom: 0;
}

.article-meta .meta-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--brass);
    opacity: .5;
}

.article-meta .meta-category {
    color: var(--brass-dark);
    font-weight: 600;
}

.article-summary {
    max-width: 700px;
    margin: 26px auto 0;
    padding-left: 18px;
    text-align: left;
    font-size: 16px;
    line-height: 1.85;
    color: #55504A;
    border-left: 2px solid var(--brass);
}

/* -------------------------------------------------- */
/* Article body                                        */
/* -------------------------------------------------- */
.article-body-section {
    background: var(--bg);
    padding: 66px 0 90px;
}

.article-card {
    background: var(--white);
    border: 1px solid var(--border-card);
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
    padding: clamp(28px, 5vw, 60px);
    margin-bottom: 28px;
}

.article-content {
    font-size: 17px;
    line-height: 1.9;
    color: var(--ink);
    word-break: break-word;
}

.article-content > * + * {
    margin-top: 1.2em;
}

.article-content p {
    margin: 0 0 1.2em;
    line-height: 1.9;
    color: #2A2622;
    text-align: justify;
}

.article-content h2 {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.4;
    margin: 1.9em 0 .7em;
    color: var(--ink);
    padding-bottom: .35em;
    border-bottom: 1px solid var(--line);
}

.article-content h3 {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.45;
    margin: 1.6em 0 .6em;
    color: var(--ink);
}

.article-content h4 {
    font-size: 18px;
    font-weight: 700;
    margin: 1.5em 0 .5em;
    color: var(--ink);
}

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

.article-content a:hover {
    color: var(--brass);
}

.article-content ul,
.article-content ol {
    margin: 1em 0 1.4em;
    padding-left: 1.6em;
}

.article-content li {
    padding-left: .2em;
    margin-bottom: .55em;
}

.article-content blockquote {
    margin: 1.8em 0;
    padding: 18px 22px;
    background: var(--bg);
    border-left: 3px solid var(--brass);
    border-radius: 0 12px 12px 0;
    color: #4E4842;
    font-style: normal;
}

.article-content blockquote p:last-child {
    margin-bottom: 0;
}

.article-content figure {
    margin: 2em 0;
}

.article-content figure img {
    border-radius: 14px;
    width: 100%;
    border: 1px solid var(--border-card);
}

.article-content figcaption {
    margin-top: 8px;
    text-align: center;
    font-size: 13px;
    color: var(--metal);
    line-height: 1.6;
}

.article-content img {
    border-radius: 14px;
    width: auto;
    max-width: 100%;
    border: 1px solid var(--border-card);
}

.article-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.8em 0;
    font-size: 15px;
}

.article-content table th,
.article-content table td {
    border: 1px solid var(--line);
    padding: 11px 14px;
    text-align: left;
}

.article-content table th {
    background: var(--bg);
    font-weight: 700;
}

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

.article-content code {
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--brass-dark);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: .9em;
}

.article-tail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 52px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
}

.back-news-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 11px 20px;
    text-decoration: none;
    transition: all .2s ease;
}

.back-news-link i {
    color: var(--brass);
}

.back-news-link:hover {
    background: var(--white);
    border-color: var(--brass);
    color: var(--brass-dark);
    transform: translateY(-2px);
}

.article-tags {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--metal);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 6px 10px;
}

/* -------------------------------------------------- */
/* Empty state                                          */
/* -------------------------------------------------- */
.cms-empty {
    padding: 48px 12px;
    text-align: center;
}

.cms-empty .empty-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 24px;
    color: var(--brass);
}

.cms-empty h2 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 6px;
}

.cms-empty p {
    color: var(--metal);
    font-size: 15px;
    margin-bottom: 18px;
}

/* -------------------------------------------------- */
/* Article CTA                                         */
/* -------------------------------------------------- */
.article-cta {
    background: var(--deep);
    color: #fff;
    padding: 78px 0;
    position: relative;
    overflow: hidden;
}

.article-cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 118, 29, .7), transparent);
}

.article-cta::after {
    content: "";
    position: absolute;
    right: -6%;
    top: 20%;
    width: 300px;
    height: 300px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 50%;
    pointer-events: none;
}

.cta-headline {
    font-size: clamp(24px, 2.8vw, 32px);
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 10px;
    color: #fff;
}

.cta-copy {
    font-size: 15px;
    color: rgba(255,255,255,.62);
    max-width: 420px;
}

.cta-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: flex-end;
}

/* -------------------------------------------------- */
/* Related products                                    */
/* -------------------------------------------------- */
.related-section {
    background: var(--bg);
    padding: 96px 0 100px;
}

.related-heading {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 46px;
}

.related-heading .sec-label {
    font-size: 13px;
    letter-spacing: .14em;
    color: var(--brass-dark);
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 10px;
}

.related-heading h2 {
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 12px;
    letter-spacing: -.01em;
}

.related-heading p {
    color: var(--metal);
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 0;
}

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

.related-card {
    background: var(--white);
    border: 1px solid var(--border-card);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
    text-decoration: none;
    color: var(--ink);
}

.related-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    border-color: rgba(201, 118, 29, .35);
    color: var(--ink);
}

.related-media {
    aspect-ratio: 16/8.8;
    overflow: hidden;
    background: var(--bg);
    position: relative;
}

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

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

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

.related-body h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    line-height: 1.4;
}

.related-body p {
    font-size: 14px;
    color: var(--metal);
    line-height: 1.7;
    margin: 0 0 6px;
    flex: 1;
}

.related-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--brass-dark);
}

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

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

.push-card {
    grid-column: span 1;
}

/* -------------------------------------------------- */
/* Buttons                                             */
/* -------------------------------------------------- */
.btn {
    border-radius: 8px;
    font-weight: 600;
    padding: 12px 24px;
    font-size: 15px;
    line-height: 1.4;
    transition: all .22s ease;
    border: 1px solid transparent;
    text-decoration: none;
}

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

.btn-primary:hover,
.btn-primary:focus {
    background: var(--brass-dark);
    border-color: var(--brass-dark);
    color: #fff;
    box-shadow: 0 10px 24px rgba(201, 118, 29, .22);
    transform: translateY(-1px);
}

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

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

.btn-dark-ghost {
    background: transparent;
    border: 1px solid rgba(28, 25, 22, .3);
    color: var(--ink);
}

.btn-dark-ghost:hover {
    border-color: var(--brass);
    color: var(--brass-dark);
    background: rgba(201, 118, 29, .04);
}

/* -------------------------------------------------- */
/* Footer                                              */
/* -------------------------------------------------- */
.site-footer {
    background: var(--deep);
    color: rgba(255, 255, 255, .78);
    padding: 72px 0 0;
    position: relative;
    overflow: hidden;
}

.site-footer::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 118, 29, .6), transparent);
}

.footer-top {
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.footer-brand-name {
    color: #fff;
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 14px;
    letter-spacing: .02em;
}

.footer-brand-text {
    color: rgba(255, 255, 255, .55);
    font-size: 14px;
    line-height: 1.9;
    max-width: 340px;
}

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

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

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a,
.footer-contact-list li {
    color: rgba(255, 255, 255, .58);
    font-size: 14px;
    text-decoration: none;
    transition: color .2s ease;
    line-height: 1.6;
}

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

.footer-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

.footer-contact-list i {
    color: var(--brass);
    margin-top: 4px;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 22px 0;
    color: rgba(255, 255, 255, .45);
    font-size: 13px;
}

.footer-bottom .icp-text {
    color: rgba(255, 255, 255, .35);
}

/* -------------------------------------------------- */
/* Media queries                                       */
/* -------------------------------------------------- */
@media (max-width: 991.98px) {
    .header-main {
        min-height: 64px;
    }

    .main-menu {
        display: none;
    }

    .header-contact-mini {
        display: none;
    }

    .desktop-logo {
        display: none;
    }

    .mobile-logo {
        display: inline-flex;
    }

    .site-header {
        position: static;
    }

    .mobile-tabbar {
        display: flex;
    }

    body {
        padding-bottom: 78px;
    }

    .article-head {
        padding: 52px 0 52px;
    }

    .article-body-section {
        padding: 44px 0 54px;
    }

    .article-card {
        padding: 24px 20px;
        border-radius: 16px;
    }

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

    .related-section {
        padding: 64px 0 70px;
    }

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

    .cta-btn-group {
        justify-content: flex-start;
        margin-top: 22px;
    }

    .article-cta {
        padding: 60px 0;
    }
}

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

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

    .article-title {
        font-size: 27px;
        line-height: 1.35;
    }

    .article-summary {
        font-size: 15px;
        padding-left: 14px;
        margin-top: 20px;
    }

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

    .dropdown-head {
        font-size: 12px;
    }

    .nav-drop:hover .dropdown-panel {
        display: none;
    }

    .btn {
        width: 100%;
    }

    .cta-btn-group .btn {
        width: auto;
    }

    .breadcrumb-nav {
        font-size: 13px;
        gap: 7px;
    }

    .article-content h2 {
        font-size: 22px;
    }

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

    .article-tags {
        justify-content: flex-start;
    }

    .related-heading {
        margin-bottom: 32px;
    }

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

    .related-body h3 {
        font-size: 17px;
    }
}

/* roulang page: category1 */
:root {
            --paper: #F6F3EE;
            --white: #FFFFFF;
            --ink: #1C1916;
            --deep: #12100D;
            --dark: #16120E;
            --brand: #C9761D;
            --brand-dark: #9C5512;
            --brand-soft: rgba(201, 118, 29, .1);
            --muted: #8A837B;
            --line: #E8E1D8;
            --cardline: #EAE2D8;
            --white-line: rgba(255, 255, 255, .12);
            --radius-sm: 4px;
            --radius-btn: 8px;
            --radius-card: 14px;
            --radius-large: 18px;
            --shadow-1: 0 2px 10px rgba(28, 25, 22, .05);
            --shadow-2: 0 16px 32px rgba(28, 25, 22, .09);
            --font-stack: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", Arial, sans-serif;
        }

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

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            font-family: var(--font-stack);
            background: var(--paper);
            color: var(--ink);
            line-height: 1.75;
            padding-top: 76px;
            -webkit-font-smoothing: antialiased;
        }

        body.page-category {
            background: var(--paper);
        }

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

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

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

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            color: var(--ink);
            font-weight: 700;
            line-height: 1.32;
        }

        .container {
            max-width: 1200px;
            padding-left: 24px;
            padding-right: 24px;
        }

        .btn {
            border-radius: var(--radius-btn);
            font-weight: 600;
            font-size: 15px;
            padding: 12px 24px;
            transition: all .2s ease;
        }

        .btn-mk {
            background: var(--brand);
            border: 1px solid var(--brand);
            color: #fff;
        }

        .btn-mk:hover,
        .btn-mk:focus {
            background: var(--brand-dark);
            border-color: var(--brand-dark);
            color: #fff;
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(156, 85, 18, .18);
        }

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

        .btn-outline-ink:hover,
        .btn-outline-ink:focus {
            background: rgba(255, 255, 255, .08);
            border-color: #fff;
            color: #fff;
            transform: translateY(-2px);
        }

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

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

        .section {
            padding: 100px 0;
        }

        .section-head {
            max-width: 720px;
            margin-bottom: 48px;
        }

        .section-head.center {
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }

        .section-code {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-family: "SFMono-Regular", Consolas, "Roboto Mono", monospace;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: .08em;
            color: var(--brand);
            text-transform: uppercase;
            margin-bottom: 16px;
        }

        .section-code::before {
            content: "";
            width: 22px;
            height: 1px;
            background: var(--brand);
            display: inline-block;
        }

        .section-head.center .section-code::after {
            content: "";
            width: 22px;
            height: 1px;
            background: var(--brand);
            display: inline-block;
        }

        .section-head h2 {
            font-size: 34px;
            margin-bottom: 16px;
        }

        .section-head p {
            color: var(--muted);
            font-size: 17px;
            margin: 0;
        }

        /* ====== Header ====== */
        .site-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 76px;
            z-index: 1050;
            background: rgba(255, 255, 255, .96);
            border-bottom: 1px solid rgba(28, 25, 22, .06);
            box-shadow: 0 2px 12px rgba(28, 25, 22, .04);
            backdrop-filter: blur(14px);
        }

        .site-header .container {
            height: 100%;
        }

        .header-main {
            height: 76px;
        }

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

        .brand-mark {
            width: 38px;
            height: 38px;
            background: var(--ink);
            border-radius: 10px;
            color: #fff;
            font-size: 15px;
            font-weight: 800;
            letter-spacing: .4px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
        }

        .brand-name {
            font-size: 21px;
            font-weight: 700;
            color: var(--ink);
            letter-spacing: .02em;
        }

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

        .main-menu>ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            align-items: center;
            gap: 34px;
        }

        .main-menu a {
            color: var(--ink);
            font-size: 15px;
            font-weight: 600;
            padding: 26px 0 24px;
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            text-decoration: none;
        }

        .main-menu a::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 10px;
            height: 2px;
            width: 0;
            background: var(--brand);
            transition: width .24s ease;
        }

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

        .main-menu a:hover::after,
        .main-menu li.active>a::after {
            width: 26px;
        }

        .main-menu li.active>a,
        .main-menu li.current-cat>a {
            color: var(--brand);
        }

        .menu-chevron {
            font-size: 11px;
            color: var(--muted);
            margin-left: 2px;
        }

        .nav-drop {
            position: relative;
        }

        .dropdown-panel {
            position: absolute;
            top: calc(100% + 14px);
            left: 50%;
            transform: translateX(-50%) translateY(4px);
            min-width: 380px;
            padding: 14px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 14px;
            box-shadow: 0 22px 48px rgba(28, 25, 22, .13);
            opacity: 0;
            visibility: hidden;
            transition: all .22s ease;
            z-index: 1060;
        }

        .nav-drop:hover .dropdown-panel,
        .nav-drop:focus-within .dropdown-panel {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(0);
        }

        .dropdown-head {
            font-size: 13px;
            font-weight: 700;
            color: var(--muted);
            padding: 8px 12px 10px;
            letter-spacing: .06em;
            text-transform: uppercase;
        }

        .dropdown-link {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            padding: 11px 12px;
            margin-bottom: 2px;
            border-radius: 10px;
            color: var(--ink);
            text-decoration: none;
            transition: background .2s ease;
        }

        .dropdown-link:hover {
            background: var(--paper);
            color: var(--ink);
        }

        .dropdown-link.current-drop {
            background: var(--brand-soft);
            color: var(--brand-dark);
        }

        .dropdown-link-inner {
            display: flex;
            flex-direction: column;
            line-height: 1.5;
        }

        .dropdown-link-inner strong {
            font-size: 15px;
            font-weight: 700;
        }

        .dropdown-link-inner em {
            font-style: normal;
            font-size: 13px;
            color: var(--muted);
        }

        .dropdown-link>.fa-arrow-right {
            color: var(--brand);
            font-size: 13px;
            opacity: .8;
        }

        /* ====== Mobile bottom nav ====== */
        .mobile-bottom-nav {
            display: none;
        }

        @media (max-width: 991.98px) {
            body {
                padding-bottom: calc(74px + env(safe-area-inset-bottom));
                padding-top: 66px;
            }

            .site-header {
                height: 66px;
            }

            .header-main {
                height: 66px;
            }

            .main-menu {
                display: none;
            }

            .brand-mark {
                width: 34px;
                height: 34px;
                border-radius: 9px;
            }

            .brand-name {
                font-size: 19px;
            }

            .mobile-bottom-nav {
                display: flex;
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                height: calc(66px + env(safe-area-inset-bottom));
                background: #fff;
                border-top: 1px solid #EEE8E0;
                z-index: 1050;
                padding: 4px 4px env(safe-area-inset-bottom);
                box-shadow: 0 -6px 20px rgba(28, 25, 22, .06);
            }

            .mobile-bottom-nav a {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                color: #77706A;
                text-decoration: none;
                font-size: 12px;
                font-weight: 600;
                gap: 3px;
                border-radius: 10px;
                transition: color .2s ease, background .2s ease;
                padding: 3px 0;
            }

            .mobile-bottom-nav a .tab-icon {
                font-size: 17px;
                line-height: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                height: 24px;
            }

            .mobile-bottom-nav a.active,
            .mobile-bottom-nav a:hover {
                color: var(--brand);
            }

            .mobile-bottom-nav a.active {
                background: rgba(201, 118, 29, .07);
            }
        }

        /* ====== Category Hero ====== */
        .category-hero {
            position: relative;
            background-color: var(--deep);
            color: #fff;
            overflow: hidden;
            padding: 116px 0 96px;
        }

        .category-hero-bg {
            position: absolute;
            inset: 0;
            background-image: url('/assets/images/backpic/back-1.webp');
            background-size: cover;
            background-position: center;
            opacity: .36;
        }

        .category-hero::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(18, 16, 13, .85) 0%, rgba(18, 16, 13, .5) 60%, rgba(18, 16, 13, .28) 100%);
        }

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

        .hero-breadcrumb {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 26px;
            font-size: 14px;
            color: rgba(255, 255, 255, .68);
        }

        .hero-breadcrumb a {
            color: rgba(255, 255, 255, .82);
            text-decoration: none;
            transition: color .2s ease;
        }

        .hero-breadcrumb a:hover {
            color: #F4B97A;
        }

        .hero-breadcrumb i {
            font-size: 11px;
            opacity: .6;
        }

        .hero-breadcrumb .current {
            color: #F4B97A;
        }

        .hero-tag {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(201, 118, 29, .18);
            border: 1px solid rgba(244, 185, 122, .32);
            color: #F4B97A;
            font-size: 14px;
            font-weight: 600;
            padding: 6px 14px;
            border-radius: 100px;
            margin-bottom: 20px;
        }

        .category-hero h1 {
            color: #fff;
            font-size: 54px;
            line-height: 1.18;
            margin-bottom: 22px;
            max-width: 780px;
        }

        .category-hero-intro {
            max-width: 690px;
            font-size: 18px;
            line-height: 1.9;
            color: rgba(255, 255, 255, .78);
            margin-bottom: 32px;
        }

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

        .hero-mini-list {
            display: flex;
            flex-wrap: wrap;
            gap: 14px 30px;
            padding: 0;
            margin: 0;
            list-style: none;
            color: rgba(255, 255, 255, .76);
            font-size: 14px;
        }

        .hero-mini-list li {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .hero-mini-list i {
            color: #F4B97A;
            font-size: 13px;
        }

        /* ====== Product Intro ====== */
        .product-intro {
            background: var(--paper);
            padding: 110px 0;
        }

        .eyebrow {
            display: inline-block;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: .14em;
            color: var(--brand);
            text-transform: uppercase;
            margin-bottom: 12px;
        }

        .product-intro h2 {
            font-size: 32px;
            line-height: 1.35;
            margin-bottom: 18px;
        }

        .product-intro p.lead-intro {
            font-size: 17px;
            color: #4D4740;
            line-height: 1.9;
        }

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

        .intro-check li {
            position: relative;
            padding-left: 28px;
            margin-bottom: 12px;
            color: #37332E;
            font-size: 16px;
        }

        .intro-check li::before {
            content: "\f00c";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            position: absolute;
            left: 0;
            top: 2px;
            width: 18px;
            height: 18px;
            background: var(--brand-soft);
            color: var(--brand-dark);
            border-radius: 50%;
            font-size: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .intro-figure {
            position: relative;
            border-radius: var(--radius-large);
            overflow: hidden;
            box-shadow: var(--shadow-2);
            background: var(--white);
        }

        .intro-figure img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            min-height: 380px;
        }

        .intro-figure-caption {
            position: absolute;
            left: 18px;
            right: 18px;
            bottom: 18px;
            background: rgba(18, 16, 13, .82);
            backdrop-filter: blur(8px);
            border-radius: 12px;
            padding: 12px 18px;
            color: rgba(255, 255, 255, .86);
            font-size: 14px;
            line-height: 1.6;
        }

        .intro-figure-caption span {
            color: #F4B97A;
            font-weight: 700;
        }

        /* ====== Features ====== */
        .feature-section {
            background: var(--white);
            padding: 100px 0;
            border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
        }

        .feature-card {
            background: var(--paper);
            border: 1px solid var(--cardline);
            border-radius: var(--radius-card);
            padding: 32px 30px;
            height: 100%;
            transition: transform .24s ease, box-shadow .24s ease;
        }

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

        .feature-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 52px;
            height: 52px;
            border-radius: 12px;
            background: var(--brand-soft);
            color: var(--brand-dark);
            font-size: 20px;
            margin-bottom: 22px;
        }

        .feature-card h3 {
            font-size: 20px;
            margin-bottom: 14px;
        }

        .feature-card p {
            color: #5A544C;
            margin: 0;
            font-size: 15px;
            line-height: 1.85;
        }

        /* ====== Spec Section ====== */
        .spec-section {
            background: var(--deep);
            color: #fff;
            padding: 110px 0;
            position: relative;
            overflow: hidden;
        }

        .spec-section .section-code,
        .spec-section .section-head h2 {
            color: #fff;
        }

        .spec-section .section-code::before,
        .spec-section .section-head.center .section-code::after {
            background: #F4B97A;
        }

        .spec-section .section-head p {
            color: rgba(255, 255, 255, .6);
        }

        .spec-card {
            background: rgba(255, 255, 255, .04);
            border: 1px solid var(--white-line);
            border-radius: var(--radius-card);
            padding: 30px 26px;
            height: 100%;
            transition: border-color .2s ease, background .2s ease;
        }

        .spec-card:hover {
            background: rgba(255, 255, 255, .07);
            border-color: rgba(244, 185, 122, .28);
        }

        .spec-card i {
            color: #F4B97A;
            font-size: 24px;
            margin-bottom: 18px;
        }

        .spec-card h3 {
            color: #fff;
            font-size: 18px;
            margin-bottom: 12px;
        }

        .spec-card p {
            color: rgba(255, 255, 255, .58);
            font-size: 14px;
            line-height: 1.75;
            margin: 0;
        }

        .spec-divider {
            border: 0;
            border-top: 1px solid var(--white-line);
            margin: 30px 0;
            opacity: 1;
        }

        /* ====== Scenario section ====== */
        .scenario-section {
            background: var(--paper);
            padding: 110px 0;
        }

        .scenario-card {
            background: #fff;
            border: 1px solid var(--cardline);
            border-radius: var(--radius-card);
            padding: 26px 22px;
            height: 100%;
            transition: transform .2s ease, box-shadow .2s ease;
            position: relative;
        }

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

        .scenario-num {
            font-family: "SFMono-Regular", Consolas, monospace;
            font-size: 13px;
            font-weight: 700;
            color: var(--brand);
            letter-spacing: .04em;
            margin-bottom: 18px;
        }

        .scenario-card h3 {
            font-size: 18px;
            margin-bottom: 12px;
        }

        .scenario-card p {
            font-size: 14px;
            color: #5A544C;
            line-height: 1.8;
            margin: 0;
        }

        .scenario-card::after {
            content: "";
            width: 34px;
            height: 3px;
            border-radius: 10px;
            background: var(--brand);
            opacity: .22;
            position: absolute;
            left: 22px;
            top: 0;
        }

        /* ====== Other Category ====== */
        .other-category-section {
            background: #fff;
            padding: 100px 0;
            border-top: 1px solid var(--line);
        }

        .other-cat-card {
            display: flex;
            align-items: center;
            gap: 18px;
            background: var(--paper);
            border: 1px solid var(--cardline);
            border-radius: var(--radius-card);
            padding: 22px 24px;
            height: 100%;
            color: var(--ink);
            transition: all .22s ease;
            position: relative;
            overflow: hidden;
        }

        .other-cat-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-2);
            color: var(--ink);
            border-color: rgba(201, 118, 29, .3);
        }

        .other-cat-icon {
            flex: 0 0 48px;
            width: 48px;
            height: 48px;
            background: var(--brand-soft);
            color: var(--brand-dark);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }

        .other-cat-card strong {
            font-size: 17px;
            display: block;
            line-height: 1.4;
        }

        .other-cat-card span {
            font-size: 14px;
            color: var(--muted);
            display: block;
            line-height: 1.5;
        }

        .other-cat-arrow {
            margin-left: auto;
            color: var(--brand);
        }

        /* ====== Process ====== */
        .process-section {
            background: var(--paper);
            padding: 110px 0;
        }

        .process-step {
            text-align: center;
            padding: 28px 26px;
            background: #fff;
            border: 1px solid var(--cardline);
            border-radius: var(--radius-card);
            height: 100%;
            position: relative;
            transition: transform .2s ease, box-shadow .2s ease;
        }

        .process-step:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-2);
        }

        .process-step-count {
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--brand);
            color: #fff;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            font-size: 13px;
            font-weight: 700;
            line-height: 28px;
        }

        .process-step .process-icon {
            font-size: 28px;
            color: var(--brand);
            margin: 14px 0 16px;
        }

        .process-step h3 {
            font-size: 18px;
            margin-bottom: 10px;
        }

        .process-step p {
            color: var(--muted);
            font-size: 14px;
            margin: 0;
            line-height: 1.8;
        }

        .process-arrow {
            text-align: center;
            color: var(--brand);
            font-size: 18px;
            padding-top: 60px;
        }

        /* ====== FAQ ====== */
        .faq-section {
            background: #fff;
            padding: 110px 0;
            border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
        }

        .faq-panel {
            max-width: 860px;
            margin: 0 auto;
        }

        .accordion-item {
            background: var(--paper);
            border: 1px solid var(--line) !important;
            border-radius: 14px !important;
            margin-bottom: 12px;
            overflow: hidden;
            box-shadow: none;
        }

        .accordion-button {
            background: transparent;
            color: var(--ink);
            font-weight: 700;
            font-size: 16px;
            border: 0;
            box-shadow: none;
            padding: 20px 22px;
        }

        .accordion-button:not(.collapsed) {
            background: rgba(201, 118, 29, .05);
            color: var(--ink);
            box-shadow: none;
        }

        .accordion-button:focus {
            box-shadow: 0 0 0 3px rgba(201, 118, 29, .15);
            border-color: rgba(201, 118, 29, .4);
        }

        .accordion-button::after {
            background-image: none;
            content: "\f067";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            font-size: 13px;
            color: var(--brand);
            width: 24px;
            height: 24px;
            background: rgba(201, 118, 29, .08);
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

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

        .accordion-body {
            padding: 0 22px 20px;
            color: #4D4740;
            font-size: 15px;
            line-height: 1.85;
        }

        /* ====== Quick CTA ====== */
        .quick-cta {
            background: var(--deep);
            padding: 80px 0;
        }

        .quick-cta-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 30px;
            flex-wrap: wrap;
            background: rgba(255, 255, 255, .05);
            border: 1px solid var(--white-line);
            border-radius: 18px;
            padding: 40px 42px;
        }

        .quick-cta-text h2 {
            color: #fff;
            font-size: 28px;
            margin-bottom: 12px;
        }

        .quick-cta-text p {
            color: rgba(255, 255, 255, .66);
            font-size: 15px;
            margin: 0;
            max-width: 640px;
        }

        .quick-cta-actions {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            flex-shrink: 0;
        }

        /* ====== Footer ====== */
        .site-footer {
            background: #12100D;
            color: rgba(255, 255, 255, .72);
            border-top: 3px solid var(--brand);
            padding: 76px 0 28px;
        }

        .site-footer a {
            color: rgba(255, 255, 255, .64);
            transition: color .2s ease;
        }

        .site-footer a:hover {
            color: #F4B97A;
        }

        .footer-brand-name {
            color: #fff;
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 14px;
        }

        .footer-brand-text {
            font-size: 14px;
            line-height: 1.9;
            color: rgba(255, 255, 255, .54);
        }

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

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

        .footer-links li {
            margin-bottom: 10px;
        }

        .footer-links a {
            font-size: 14px;
            color: rgba(255, 255, 255, .64);
        }

        .footer-links a:hover {
            color: #F4B97A;
        }

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

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

        .footer-contact-list i {
            color: var(--brand);
            margin-top: 5px;
        }

        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, .1);
            margin-top: 50px;
            padding-top: 22px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 10px;
            font-size: 13px;
            color: rgba(255, 255, 255, .36);
        }

        .icp-text {
            color: rgba(255, 255, 255, .28);
        }

        /* Focus states */
        a:focus-visible,
        button:focus-visible {
            outline: 3px solid rgba(201, 118, 29, .35);
            outline-offset: 3px;
        }

        /* ====== Responsive ====== */
        @media (max-width: 991.98px) {
            .section {
                padding: 80px 0;
            }

            .product-intro,
            .scenario-section,
            .process-section,
            .feature-section,
            .spec-section,
            .other-category-section,
            .faq-section {
                padding: 80px 0;
            }

            .category-hero {
                padding: 84px 0 68px;
            }

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

            .category-hero-intro {
                font-size: 17px;
            }

            .section-head h2 {
                font-size: 30px;
            }

            .process-arrow {
                transform: rotate(90deg);
                padding-top: 0;
                padding-bottom: 10px;
            }

            .quick-cta-box {
                padding: 30px;
            }
        }

        @media (max-width: 767.98px) {
            .category-hero h1 {
                font-size: 31px;
            }

            .category-hero-intro {
                font-size: 16px;
            }

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

            .hero-mini-list {
                flex-direction: column;
                gap: 10px;
            }

            .section-head h2 {
                font-size: 27px;
            }

            .product-intro h2 {
                font-size: 26px;
            }

            .section {
                padding: 68px 0;
            }

            .product-intro,
            .scenario-section,
            .process-section,
            .feature-section,
            .spec-section,
            .other-category-section,
            .faq-section {
                padding: 68px 0;
            }

            .intro-figure img {
                min-height: 260px;
            }

            .spec-card,
            .feature-card,
            .scenario-card {
                padding: 22px 20px;
            }

            .quick-cta {
                padding: 60px 0;
            }

            .quick-cta-box {
                flex-direction: column;
                align-items: stretch;
                gap: 20px;
            }

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

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

            .footer-bottom {
                justify-content: center;
                text-align: center;
            }
        }

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

            .main-menu {
                display: none;
            }

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

            .category-hero-intro {
                font-size: 15px;
                line-height: 1.85;
            }

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

            .feature-card h3,
            .scenario-card h3 {
                font-size: 17px;
            }
        }

/* roulang page: category2 */
:root {
            --paper: #F6F3EE;
            --white: #FFFFFF;
            --ink: #1C1916;
            --dark-warm: #12100D;
            --brass: #C9761D;
            --brass-dark: #9C5512;
            --metal: #8A837B;
            --line: #E8E1D8;
            --border: #EAE2D8;
            --shadow: 0 2px 10px rgba(28,25,22,.05);
            --shadow-hover: 0 16px 32px rgba(28,25,22,.09);
            --radius-small: 4px;
            --radius-btn: 8px;
            --radius-card: 14px;
            --radius-large: 18px;
            --radius-hero: 20px;
            --font-family: "PingFang SC","HarmonyOS Sans SC","Microsoft YaHei UI","Microsoft YaHei",system-ui,-apple-system,sans-serif;
            --mono: "SF Mono",Consolas,"Roboto Mono",monospace;
        }

        *, *::before, *::after { box-sizing: border-box; }
        html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
        body {
            margin: 0;
            font-family: var(--font-family);
            background-color: var(--paper);
            color: var(--ink);
            line-height: 1.7;
            font-size: 16px;
            overflow-x: hidden;
        }
        img { max-width: 100%; height: auto; display: block; }
        a { color: var(--brass); text-decoration: none; transition: color .25s; }
        a:hover { color: var(--brass-dark); }
        .container { max-width: 1200px; width: 100%; padding-left: 20px; padding-right: 20px; }
        h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.3; margin-bottom: .5em; }
        p { color: #3D3832; }
        .text-muted { color: var(--metal) !important; }
        .section-padding { padding: 96px 0; }
        .bg-paper { background: var(--paper); }
        .bg-white { background: var(--white); }

        /* ---------- 按钮 ---------- */
        .btn-brass {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            background: var(--brass);
            color: #fff !important;
            border: 1px solid var(--brass);
            border-radius: var(--radius-btn);
            padding: 12px 28px;
            font-size: 15px;
            font-weight: 600;
            line-height: 1.4;
            transition: all .25s ease;
            cursor: pointer;
            text-decoration: none;
        }
        .btn-brass:hover { background: var(--brass-dark); border-color: var(--brass-dark); color: #fff; box-shadow: 0 8px 20px rgba(201,118,29,.24); }
        .btn-brass:focus-visible { outline: 3px solid rgba(201,118,29,.35); outline-offset: 2px; }
        .btn-outline-dark-t {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            background: transparent;
            color: var(--ink);
            border: 1px solid #B9B0A5;
            border-radius: var(--radius-btn);
            padding: 12px 26px;
            font-size: 15px;
            font-weight: 600;
            transition: all .25s ease;
            text-decoration: none;
        }
        .btn-outline-dark-t:hover { border-color: var(--ink); background: rgba(28,25,22,.04); color: var(--ink); }
        .btn-white-line {
            background: rgba(255,255,255,.08);
            color: #F6F3EE;
            border: 1px solid rgba(255,255,255,.4);
            border-radius: var(--radius-btn);
            padding: 12px 28px;
            font-size: 15px;
            font-weight: 600;
            transition: all .25s;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
        }
        .btn-white-line:hover { background: rgba(255,255,255,.18); border-color: #fff; color: #fff; }

        /* ---------- 顶栏/导航 ---------- */
        .site-header {
            position: sticky;
            top: 0;
            z-index: 1030;
            background: rgba(255, 255, 255, 0.92);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--line);
            height: 76px;
            display: flex;
            align-items: center;
        }
        .site-header .nav-scroll { box-shadow: var(--shadow); }
        .header-main { width: 100%; position: relative; }
        .logo-area .brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
        .brand-mark {
            width: 36px; height: 36px;
            background: var(--brass);
            color: #fff;
            font-weight: 700;
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px 8px 8px 2px;
            letter-spacing: -0.5px;
            font-family: var(--mono);
        }
        .brand-name { font-weight: 700; font-size: 22px; color: var(--ink); letter-spacing: .5px; }
        .brand-name::after { content: ""; display: block; width: 20px; height: 2px; background: var(--brass); margin-top: 2px; border-radius: 2px; }
        .mobile-logo { display: flex; }
        .main-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 34px; }
        .main-menu > li { position: relative; list-style: none; }
        .main-menu > li > a {
            display: flex;
            align-items: center;
            gap: 6px;
            color: var(--ink);
            font-size: 15px;
            font-weight: 500;
            padding: 8px 0;
            position: relative;
            text-decoration: none;
            transition: color .25s;
        }
        .main-menu > li > a::after {
            content: "";
            position: absolute;
            left: 50%; bottom: -2px;
            transform: translateX(-50%);
            width: 0; height: 2px;
            background: var(--brass);
            border-radius: 2px;
            transition: width .25s;
        }
        .main-menu > li > a:hover { color: var(--brass); }
        .main-menu > li > a.summary { font-weight: bold; }
        .main-menu > li > a.summary { font-weight: bold; }
        .main-menu > li > a:hover::after,
        .main-menu > li > a.active::after { width: 22px; }
        .main-menu > li > a.active { color: var(--brass); font-weight: 600; }
        .header-right { display: flex; align-items: center; gap: 16px; }
        .header-cta {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border: 1px solid var(--brass);
            background: var(--brass);
            color: #fff;
            padding: 9px 22px;
            border-radius: 50px;
            font-size: 14px;
            font-weight: 600;
            transition: all .25s;
            text-decoration: none;
        }
        .header-cta:hover { background: var(--brass-dark); border-color: var(--brass-dark); color: #fff; }
        .menu-chevron { font-size: 10px; color: var(--metal); transition: transform .25s; }
        .nav-drop:hover .menu-chevron { transform: rotate(180deg); }
        .nav-drop .dropdown-panel {
            position: absolute;
            top: calc(100% + 2px);
            left: 50%;
            transform: translateX(-50%);
            width: 420px;
            background: var(--white);
            border: 1px solid var(--line);
            border-radius: 12px;
            box-shadow: 0 20px 44px rgba(28, 25, 22, 0.10);
            padding: 18px;
            opacity: 0;
            visibility: hidden;
            transition: all .28s ease;
            z-index: 1200;
            text-align: left;
        }
        .nav-drop:hover .dropdown-panel { opacity: 1; visibility: visible; }
        .dropdown-head {
            font-size: 13px;
            letter-spacing: .3em;
            text-transform: uppercase;
            color: var(--metal);
            margin-bottom: 6px;
            padding: 0 10px;
            border-left: 3px solid var(--brass);
            padding-left: 13px;
        }
        .dropdown-link {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 14px 14px;
            border-radius: 10px;
            text-decoration: none;
            transition: background .22s;
        }
        .dropdown-link + .dropdown-link { border-top: 1px solid #F2EDE6; border-top-left-radius: 0; border-top-right-radius: 0; }
        .dropdown-link:hover { background: rgba(201, 118, 29, .05); }
        .dropdown-link:hover strong { color: var(--brass); }
        .dropdown-link strong { display: block; font-size: 15px; color: var(--ink); font-weight: 600; margin-bottom: 4px; }
        .dropdown-link em { font-size: 13px; color: var(--metal); font-style: normal; display: block; line-height: 1.5; }
        .dropdown-link i { color: var(--brass); opacity: 0; margin-right: 0; transition: opacity .22s, all .25s; }
        .dropdown-link:hover i { opacity: 1; margin-right: -4px; }
        .dropdown-link-inner { display: flex; flex-direction: column; padding-right: 20px; width: 100%; }

        /* ---------- 页脚 ---------- */
        .site-footer { background: var(--dark-warm); color: #C8C0B8; padding: 72px 0 0; border-top: 3px solid var(--brass); }
        .site-footer .footer-top { padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.08); }
        .footer-brand-name { font-size: 30px; font-weight: 700; color: #F4EFE8; margin-bottom: 14px; }
        .footer-brand-name::after { content: ""; display: block; width: 28px; height: 2px; background: var(--brass); margin-top: 8px; }
        .footer-brand-text { color: rgba(255,255,255,.62); line-height: 1.85; font-size: 15px; margin-bottom: 14px; max-width: 360px; }
        .footer-title { font-size: 15px; text-transform: uppercase; letter-spacing: .1em; color: #E8E1D8; margin-bottom: 18px; font-weight: 600; border-left: 2px solid var(--brass); padding-left: 10px; }
        .footer-links { list-style: none; margin: 0; padding: 0; }
        .footer-links li { margin-bottom: 10px; }
        .footer-links a { color: rgba(255,255,255,.58); font-size: 14px; line-height: 1.8; text-decoration: none; transition: all .25s; }
        .footer-links a:hover { color: var(--brass); padding-left: 4px; }
        .footer-contact-list { list-style: none; margin: 0; padding: 0; }
        .footer-contact-list li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; color: rgba(255,255,255,.58); font-size: 14px; }
        .footer-contact-list li i { color: var(--brass); margin-top: 5px; }
        .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 20px 0 28px; color: rgba(255,255,255,.4); font-size: 13px; gap: 12px; }
        .footer-bottom .icp-text { color: rgba(255,255,255,.28); }

        /* ---------- 底部移动导航 ---------- */
        .bottom-tabbar {
            display: none;
            position: fixed;
            bottom: 0; left: 0; right: 0;
            z-index: 1100;
            background: rgba(255,255,255,.97);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-top: 1px solid var(--line);
            padding: 6px env(safe-area-inset-right) calc(6px + env(safe-area-inset-bottom)) env(safe-area-inset-left);
            box-shadow: 0 -6px 20px rgba(0,0,0,.05);
        }
        .bottom-tabbar .tabbar-inner { display: flex; max-width: 600px; margin: 0 auto; }
        .bottom-tabbar .tab-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 3px;
            padding: 5px 0;
            font-size: 11px;
            color: #A79E95;
            text-decoration: none;
            transition: color .2s;
            font-weight: 500;
            border-radius: 10px;
            background: transparent;
        }
        .bottom-tabbar .tab-item i { font-size: 19px; line-height: 1; }
        .bottom-tabbar .tab-item.active { color: var(--brass); font-weight: 600; }
        .bottom-tabbar .tab-item:hover { color: var(--brass-dark); }

        /* ---------- 分类页 Hero ---------- */
        .cat-hero {
            position: relative;
            background: var(--dark-warm);
            background-image: linear-gradient(rgba(18,16,13,.86), rgba(18,16,13,.78)), url('/assets/images/backpic/back-2.webp');
            background-size: cover;
            background-position: center;
            padding: 118px 0 126px;
            color: #F4EFE8;
            margin-bottom: 0;
            overflow: hidden;
        }
        .cat-hero::after {
            content: "";
            position: absolute;
            right: -120px;
            top: 50%;
            transform: translateY(-50%);
            width: 380px;
            height: 380px;
            border-radius: 50%;
            border: 2px dashed rgba(255,255,255,.12);
            opacity: .5;
            pointer-events: none;
        }
        .cat-hero::before {
            content: "";
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            width: 200px;
            height: 200px;
            border-radius: 50%;
            border: 1px solid rgba(201,118,29,.5);
            opacity: .5;
            pointer-events: none;
        }
        .hero-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(244,239,232,.55); margin-bottom: 18px; }
        .hero-breadcrumb a { color: rgba(244,239,232,.55); text-decoration: none; transition: color .2s; }
        .hero-breadcrumb a:hover { color: var(--brass); }
        .hero-breadcrumb i { font-size: 10px; color: rgba(244,239,232,.3); }
        .cat-hero .tag-line { display: inline-block; color: var(--brass); font-size: 14px; letter-spacing: .08em; font-weight: 600; margin-bottom: 12px; border: 1px solid rgba(201,118,29,.4); padding: 5px 14px; border-radius: 50px; background: rgba(201,118,29,.1); }
        .cat-hero h1 { font-size: 45px; line-height: 1.15; color: #FFFFFF; margin-bottom: 18px; font-weight: 700; letter-spacing: -0.3px; max-width: 850px; }
        .cat-hero p.hero-subtitle { font-size: 18px; color: rgba(244,239,232,.8); line-height: 1.8; max-width: 690px; margin-bottom: 28px; }
        .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 18px; }

        /* ---------- 分类模块通用 ---------- */
        .crumb-lite { display: flex; align-items: center; gap: 8px; color: var(--metal); font-size: 13px; margin-bottom: 10px; }
        .crumb-lite a { color: var(--metal); text-decoration: none; }
        .crumb-lite a:hover { color: var(--brass); }
        .section-label { display: inline-block; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); font-weight: 600; margin-bottom: 10px; border: 1px solid rgba(201,118,29,.25); background: rgba(201,118,29,.08); padding: 4px 10px; border-radius: 50px; }
        .section-pretitle { display: block; color: var(--brass); font-size: 14px; letter-spacing: .1em; margin-bottom: 8px; font-weight: 600; }
        h2.section-title { font-size: 34px; font-weight: 700; color: var(--ink); margin-bottom: 12px; line-height: 1.3; letter-spacing: -0.2px; }
        .section-desc { font-size: 16px; color: #555046; max-width: 640px; margin-bottom: 36px; line-height: 1.85; }
        .text-center .section-desc { margin-left: auto; margin-right: auto; }

        /* ---------- 卡片 ---------- */
        .feature-card {
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: var(--radius-card);
            padding: 32px 28px;
            height: 100%;
            transition: all .3s ease;
            box-shadow: var(--shadow);
            position: relative;
            overflow: hidden;
        }
        .feature-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
        .feature-card .icon-pack { width: 48px; height: 48px; background: #FCF1E6; border-radius: 12px; margin-bottom: 16px; display: flex; justify-content: center; align-items: center; }
        .feature-card .icon-pack i { color: var(--brass); font-size: 20px; }
        .feature-card h3 { font-weight: 600; font-size: 18px; margin-bottom: 8px; color: var(--ink); }
        .feature-card p { color: var(--metal); font-size: 14px; line-height: 1.7; margin-bottom: 0; }

        .spec-panel {
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: var(--radius-card);
            box-shadow: var(--shadow);
            overflow: hidden;
            height: 100%;
            transition: all .3s;
        }
        .spec-panel:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
        .spec-panel .spec-heading {
            padding: 22px 24px;
            border-bottom: 1px solid var(--line);
            background: #FBF8F2;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .spec-panel .spec-heading i { color: var(--brass); font-size: 22px; }
        .spec-panel .spec-heading h3 { font-size: 16px; font-weight: 600; margin: 0; color: var(--ink); }
        .panel-list { list-style: none; padding: 18px 24px; margin: 0; }
        .panel-list li { padding: 10px 0; border-bottom: 1px dashed #F0EAE1; display: flex; justify-content: space-between; gap: 18px; font-size: 14px; color: var(--ink); flex-wrap: wrap; }
        .panel-list li:last-child { border-bottom: none; }
        .panel-list .term { color: var(--metal); font-weight: 400; }
        .panel-list .desc { font-weight: 500; text-align: right; }

        .app-card {
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: var(--radius-large);
            overflow: hidden;
            height: 100%;
            transition: all .3s;
            box-shadow: var(--shadow);
        }
        .app-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
        .app-card .app-image { height: 180px; background-color: #EAE3D9; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; }
        .app-card .tag-industry { position: absolute; left: 16px; top: 14px; display: inline-block; background: rgba(18,16,13,.72); color: #fff; font-size: 12px; padding: 3px 10px; border-radius: 4px; backdrop-filter: blur(6px); }
        .app-card .app-body { padding: 22px; }
        .app-card .app-body h3 { font-size: 18px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
        .app-card .app-body p { font-size: 14px; color: var(--metal); margin-bottom: 0; line-height: 1.7; }

        .flow-steps {
            position: relative;
            counter-reset: flowCounter;
        }
        .flow-step {
            position: relative;
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: var(--radius-card);
            padding: 28px 24px 26px 26px;
            padding-left: 66px;
            margin-bottom: 14px;
            box-shadow: var(--shadow);
            counter-increment: flowCounter;
            min-height: 130px;
            transition: all .25s;
        }
        .flow-step:hover { box-shadow: var(--shadow-hover); }
        .flow-step::before {
            content: "0" counter(flowCounter);
            position: absolute;
            left: 20px;
            top: 22px;
            font-family: var(--mono);
            color: var(--brass);
            font-weight: 700;
            font-size: 24px;
        }
        .flow-step::after {
            content: "";
            position: absolute;
            left: 28px;
            top: 50px;
            width: 1px;
            height: calc(100% - 28px);
            background: #E7D8C4;
        }
        .flow-step:last-child::after { display: none; }
        .flow-step h3 { font-size: 17px; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
        .flow-step p { font-size: 14px; color: var(--metal); margin-bottom: 4px; }

        /* ---------- 分类切换条 ---------- */
        .category-switch {
            border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
            background: var(--paper);
        }
        .category-switch-inner {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px;
            justify-content: center;
            padding: 16px 0;
        }
        .category-switch-inner .cat-related-label { font-size: 14px; color: var(--metal); margin-right: 4px; font-weight: 500; }
        .category-switch-inner .cat-pill {
            padding: 8px 22px;
            border: 1px solid var(--line);
            border-radius: 50px;
            background: var(--white);
            color: var(--ink);
            font-size: 14px;
            font-weight: 500;
            text-decoration: none;
            transition: all .22s;
        }
        .category-switch-inner .cat-pill:hover { border-color: var(--brass); color: var(--brass); }
        .category-switch-inner .cat-pill.current-key { background: var(--brass); color: #fff; border-color: var(--brass); font-weight: 600; pointer-events: none; }

        /* ---------- FAQ ---------- */
        .faq-section { background: var(--paper); }
        .faq-item {
            background: var(--white);
            border: 1px solid var(--line);
            border-radius: var(--radius-card);
            padding: 0;
            margin-bottom: 0 !important;
            transition: box-shadow .25s;
            box-shadow: none;
        }
        .faq-item:not(:last-child) { border-bottom: 1px solid var(--line); }
        .faq-item + .faq-item { margin-top: 12px; }
        .faq-item .faq-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; width: 100%; background: transparent; border: none; padding: 21px 22px; text-align: left; font-size: 16px; font-weight: 600; color: var(--ink); cursor: pointer; position: relative; }
        .faq-item .faq-header:hover { color: var(--brass); }
        .faq-item .faq-mark { flex: 0 0 22px; display: inline-flex; align-items: center; justify-content: center; color: var(--brass); font-size: 16px; font-weight: 400; border-radius: 50%; transition: all .3s; margin-top: 2px; }
        .faq-item .faq-body { padding: 0 22px 20px; color: #4B453E; font-size: 14px; line-height: 1.85; max-width: 860px; }
        .faq-item .faq-body p:last-child { margin-bottom: 0; }
        .accordion-button:not(.collapsed) .faq-mark { transform: rotate(45deg); }
        .accordion-button.collapsed .faq-mark::before { content: "+"; }
        .accordion-button:not(.collapsed) .faq-mark::before { content: "×"; font-size: 20px; }

        /* ---------- CTA ---------- */
        .cta-board {
            background: var(--dark-warm);
            border-radius: var(--radius-large);
            padding: 54px 40px;
            position: relative;
            overflow: hidden;
        }
        .cta-board::after {
            content: "";
            position: absolute; right: -50px; bottom: -50px;
            width: 200px; height: 200px;
            border-radius: 50%;
            border: 2px dashed rgba(255,255,255,.14);
            pointer-events: none;
        }
        .cta-board::before {
            content: "";
            position: absolute; right: 40px; bottom: 10px;
            width: 110px; height: 110px;
            border-radius: 4px;
            border: 1px solid rgba(201,118,29,.3);
            transform: rotate(45deg);
            pointer-events: none;
        }
        .cta-board h2 { color: #fff; font-size: 27px; font-weight: 700; margin-bottom: 8px; line-height: 1.5; }
        .cta-board p { color: rgba(244,239,232,.6); margin-bottom: 8px; }

        .inline-form .form-control {
            height: 51px;
            background: rgba(255,255,255,.08);
            border: 1px solid rgba(255,255,255,.3);
            border-radius: var(--radius-btn);
            color: #F4EFE8;
            font-size: 14px;
            padding-left: 18px;
            transition: border-color .25s, box-shadow .25s, background .25s;
        }
        .inline-form .form-control:focus { background: rgba(255,255,255,.14); border-color: var(--brass); box-shadow: 0 0 0 3px rgba(201,118,29,.25); color: #fff; }
        .inline-form .form-control::placeholder { color: rgba(255,255,255,.6); }
        .inline-form .btn-brass { height: 51px; white-space: nowrap; }

        .contact-strip { background: var(--paper); }
        .contact-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 34px 32px; height: 100%; box-shadow: var(--shadow); transition: all .3s; }
        .contact-card:hover { box-shadow: var(--shadow-hover); }
        .contact-card .contact-icon { width: 44px; height: 44px; border-radius: 10px; background: rgba(201,118,29,.12); color: var(--brass); display: flex; justify-content: center; align-items: center; font-size: 18px; margin-bottom: 17px; }
        .contact-card h3 { font-size: 17px; font-weight: 600; margin-bottom: 9px; color: var(--ink); }
        .contact-card p { color: var(--metal); font-size: 14px; margin-bottom: 0; line-height: 1.75; }

        /* ---------- 滚动导航样式 ---------- */
        .main-menu > li.li-products { font-weight: normal; }

        /* ---------- 资料下载/参数 ---------- */
        .table-spec-box { overflow-x: auto; }
        .table-spec-box table { width: 100%; font-size: 14px; }
        .table-spec-box th { background: #F2EBDF; font-size: 13px; color: #5F574E; font-weight: 600; border: none; padding: 12px 14px; vertical-align: middle; }
        .table-spec-box td { background: #fff; border-bottom: 1px solid #E2D9CF; padding: 13px 14px; color: #3D3832; vertical-align: middle; }
        .table-spec-box tr:last-child td { border-bottom: none; }
        .table-wrap { border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; }

        .measure-bloc {
            background: var(--dark-warm);
            color: #fff;
            border-radius: var(--radius-large);
            padding: 32px 36px;
            position: relative;
            border: 1px solid rgba(255,255,255,.08);
        }
        .measure-bloc::before {
            content: "";
            position: absolute; right: -20px; bottom: -20px;
            width: 120px; height: 120px;
            border-radius: 50%;
            border: 1px solid rgba(201,118,29,.25);
            pointer-events: none;
        }
        .measure-num { font-size: 38px; font-family: var(--mono); font-weight: 700; color: var(--brass); line-height: 1; margin-bottom: 6px; }
        .measure-label { font-size: 15px; color: rgba(255,255,255,.75); font-weight: 500; }

        .bg-lighten { background: rgba(255,255,255,.35); }
        .alt-bg { background: var(--white); }

        @media (max-width: 991.98px) {
            .section-padding { padding: 72px 0; }
            .site-header { height: auto; min-height: 64px; padding-top: 8px; padding-bottom: 8px; }
            .site-header .main-menu { display: none; }
            .header-main { min-height: 0; }
            .mobile-logo .brand-mark { width: 32px; height: 32px; font-size: 14px; }
            .mobile-logo .brand-name { font-size: 19px; line-height: 1.3; }
            .brand-name::after { display: none; }
            .header-right .header-cta { display: none; }
            .bottom-tabbar { display: block; }
            .site-footer { padding-bottom: calc(50px + env(safe-area-inset-bottom)); }
            .cat-hero h1 { font-size: 32px; }
            .cat-hero { padding: 84px 0 92px; }
            .cat-hero p.hero-subtitle { font-size: 16px; }
        }

        @media (max-width: 767.98px) {
            .section-padding { padding: 58px 0; }
            .section-title { font-size: 27px; }
            .section-desc { font-size: 15px; }
            .cat-hero h1 { font-size: 28px; line-height: 1.3; }
            .cat-hero { padding: 66px 0 72px; }
            .hero-actions .btn-brass { width: auto; }
            .feature-card { padding: 24px 20px; }
            .cta-board { padding: 40px 24px; }
            .cta-board h2 { font-size: 22px; }
            .btn-brass { width: 100%; }
            .cat-hero p.hero-subtitle { font-size: 15px; }
            .breadcrumb-lite { font-size: 14px; }
            .site-header { height: auto; position: sticky; top: 0; min-height: 60px; }
            body { font-size: 15px; }
            .site-footer { padding-top: 48px; }
            .footer-top .col-6, .footer-top .col-12 { flex: 0 0 100%; max-width: 100%; }
            .footer-top .col-6 { flex: 0 0 100%; max-width: 100%; }
            .flow-step { padding-left: 58px; }
            .flow-step::before { left: 15px; font-size: 22px; }
            .flow-step::after { left: 23px; top: 45px; }
            .header-logo .brand-name { font-size: 18px; }
        }

        @media (max-width: 480px) {
            .hero-actions .btn-outline-dark-t { width: 100%; margin-top: 0; }
            .hero-actions { display: flex; }
            .section-padding { padding: 48px 0; }
        }

        /* Bootstrap 覆盖 */
        .accordion-button:not(.collapsed) { color: var(--ink); background: #fff; box-shadow: none; }
        .accordion-button:focus { box-shadow: none; }
        .accordion-button { background: #fff; }
        .accordion-button::after { display: none; }
        .form-control { border-radius: var(--radius-btn); padding: 13px 18px; }
        .form-control:focus { border-color: var(--brass); box-shadow: 0 0 0 3px rgba(201,118,29,.18); }
        .img-card { border-radius: 18px; overflow: hidden; }

/* roulang page: category3 */
/* ===== MK官网 全站设计变量 ===== */
        :root {
            --bg-paper: #F6F3EE;
            --surface: #FFFFFF;
            --ink: #1C1916;
            --ink-800: #2A251F;
            --dark: #12100D;
            --dark-soft: #1E1A16;
            --accent: #C9761D;
            --accent-dark: #9C5512;
            --accent-soft: #FDF0E2;
            --muted: #8A837B;
            --line: #E8E1D8;
            --card-line: #EAE2D8;
            --radius-xs: 4px;
            --radius-sm: 8px;
            --radius-md: 14px;
            --radius-lg: 18px;
            --shadow-sm: 0 2px 10px rgba(28, 25, 22, .05);
            --shadow-md: 0 12px 28px rgba(28, 25, 22, .07);
            --shadow-lg: 0 16px 32px rgba(28, 25, 22, .09);
            --shadow-accent: 0 10px 24px rgba(201, 118, 29, .22);
        }

        /* ===== Reset / Base ===== */
        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }
        html {
            scroll-behavior: smooth;
            scroll-padding-top: 90px;
        }
        body {
            margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
            font-size: 16px;
            line-height: 1.75;
            color: var(--ink);
            background: var(--bg-paper);
            -webkit-font-smoothing: antialiased;
        }
        a {
            color: inherit;
            text-decoration: none;
            transition: color .25s ease;
        }
        a:hover {
            color: var(--accent);
        }
        img {
            max-width: 100%;
            height: auto;
            display: block;
        }
        ul,
        ol {
            padding-left: 0;
            list-style: none;
        }
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            margin-top: 0;
            font-weight: 700;
            line-height: 1.3;
            letter-spacing: -.01em;
        }
        p {
            margin-top: 0;
        }
        input,
        select,
        textarea,
        button {
            font: inherit;
        }
        button:focus,
        input:focus,
        textarea:focus {
            outline: none;
        }

        .container {
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
        }

        .section-gap {
            padding: 110px 0;
        }
        .section-gap-sm {
            padding: 72px 0;
        }
        .bg-muted {
            background: #FBF8F3;
        }
        .bg-paper {
            background: var(--bg-paper);
        }
        .bg-white {
            background: #fff;
        }
        .section-head {
            max-width: 800px;
            margin-bottom: 56px;
        }
        .section-head .sec-kicker {
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--accent);
            font-size: 14px;
            font-weight: 600;
            letter-spacing: .08em;
            text-transform: uppercase;
        }
        .section-head .sec-kicker::before {
            content: "";
            width: 28px;
            height: 2px;
            background: var(--accent);
            display: inline-block;
        }
        .section-head h2 {
            font-size: 34px;
            line-height: 1.22;
            color: var(--ink);
            margin: 14px 0 16px;
        }
        .section-head p {
            color: var(--muted);
            font-size: 17px;
            max-width: 680px;
            margin-bottom: 0;
        }

        /* ===== Buttons ===== */
        .mk-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-weight: 600;
            font-size: 15px;
            line-height: 1;
            padding: 15px 28px;
            border-radius: var(--radius-sm);
            border: 1px solid transparent;
            transition: all .3s ease;
            cursor: pointer;
        }
        .mk-btn i {
            font-size: 14px;
            transition: transform .25s ease;
        }
        .mk-btn-brass {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
            box-shadow: var(--shadow-accent);
        }
        .mk-btn-brass:hover {
            background: var(--accent-dark);
            border-color: var(--accent-dark);
            color: #fff;
            transform: translateY(-2px);
        }
        .mk-btn-brass:hover i {
            transform: translateX(3px);
        }
        .mk-btn-ghost {
            background: transparent;
            color: #fff;
            border-color: rgba(255, 255, 255, .55);
        }
        .mk-btn-ghost:hover {
            color: var(--accent);
            border-color: var(--accent);
            background: rgba(255, 255, 255, .08);
        }
        .mk-btn-dark {
            background: var(--ink);
            color: #fff;
            border-color: var(--ink);
        }
        .mk-btn-dark:hover {
            background: var(--dark);
            color: #fff;
            transform: translateY(-2px);
        }
        .mk-btn:active {
            transform: translateY(0);
        }

        /* ===== Header ===== */
        .site-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1080;
            background: rgba(246, 243, 238, .92);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border-bottom: 1px solid rgba(232, 225, 216, .85);
            transition: box-shadow .3s, background .3s;
            height: 76px;
            display: flex;
            align-items: center;
        }
        .site-header.scrolled {
            box-shadow: var(--shadow-md);
        }
        .header-main {
            gap: 26px;
        }
        .brand {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            color: var(--ink);
            flex-shrink: 0;
        }
        .brand-mark {
            width: 38px;
            height: 38px;
            border-radius: 9px;
            background: var(--accent);
            color: #fff;
            font-weight: 800;
            font-size: 15px;
            letter-spacing: -.02em;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 10px rgba(201, 118, 29, .3);
        }
        .brand-name {
            font-size: 21px;
            font-weight: 800;
            letter-spacing: -.01em;
            line-height: 1.2;
        }
        .mobile-logo {
            display: none;
        }

        .main-menu {
            margin-left: auto;
        }
        .main-nav-list {
            display: flex;
            align-items: center;
            gap: 36px;
            margin: 0;
            padding: 0;
        }
        .main-nav-list>li {
            position: relative;
        }
        .main-nav-list>li>a {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-weight: 500;
            font-size: 15px;
            color: #3A352F;
            padding: 10px 0 8px;
            position: relative;
        }
        .main-nav-list>li>a:hover {
            color: var(--accent);
        }
        .main-nav-list>li>a.active {
            color: var(--accent);
        }
        .main-nav-list>li>a.active::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 26px;
            height: 2px;
            border-radius: 2px;
            background: var(--accent);
        }

        .menu-chevron {
            font-size: 10px;
            margin-left: 2px;
            color: var(--muted);
        }
        .nav-drop:hover .menu-chevron {
            color: var(--accent);
            transform: rotate(180deg);
        }
        .menu-chevron {
            transition: transform .25s ease;
        }
        .dropdown-panel {
            position: absolute;
            top: calc(100% + 8px);
            left: 50%;
            width: 520px;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 20px 50px rgba(18, 16, 13, .14);
            border: 1px solid var(--line);
            padding: 14px;
            opacity: 0;
            visibility: hidden;
            transform: translateX(-50%) translateY(12px);
            transition: all .3s ease;
            z-index: 1090;
        }
        .nav-drop:hover .dropdown-panel,
        .nav-drop:focus-within .dropdown-panel {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(0);
        }
        .dropdown-panel::before {
            content: "";
            position: absolute;
            top: -6px;
            left: 50%;
            transform: translateX(-50%) rotate(45deg);
            width: 12px;
            height: 12px;
            background: #fff;
            border-left: 1px solid var(--line);
            border-top: 1px solid var(--line);
        }
        .dropdown-head {
            font-size: 13px;
            font-weight: 700;
            color: var(--muted);
            padding: 10px 14px 8px;
            letter-spacing: .06em;
        }
        .dropdown-link {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            padding: 12px 14px;
            border-radius: 10px;
            transition: background .2s, transform .2s;
        }
        .dropdown-link:hover {
            background: #FCF8F2;
            transform: translateX(2px);
        }
        .dropdown-link.current {
            background: var(--accent-soft);
        }
        .dropdown-link-inner {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .dropdown-link-inner strong {
            font-size: 15px;
            font-weight: 700;
            color: var(--ink);
        }
        .dropdown-link-inner em {
            font-style: normal;
            font-size: 13px;
            color: var(--muted);
        }
        .dropdown-link>i {
            color: var(--accent);
            font-size: 13px;
            flex-shrink: 0;
        }
        .header-contact {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-weight: 600;
            font-size: 14px;
            color: var(--ink);
            background: #fff;
            border: 1px solid var(--card-line);
            border-radius: 8px;
            padding: 10px 18px;
            margin-left: 8px;
            transition: all .3s ease;
            color: var(--dark);
        }
        .header-contact:hover {
            border-color: var(--accent);
            color: var(--accent);
        }

        /* ===== Mobile Bottom Nav ===== */
        .mobile-bottom-nav {
            display: none;
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1100;
            background: rgba(255, 255, 255, .97);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-top: 1px solid var(--line);
            padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
            box-shadow: 0 -6px 20px rgba(28, 25, 22, .06);
            justify-content: space-around;
        }
        .m-nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 3px;
            font-size: 11px;
            font-weight: 500;
            color: var(--muted);
            padding: 8px 4px 4px;
            border-radius: 8px;
            min-width: 48px;
            position: relative;
        }
        .m-nav-item i {
            font-size: 18px;
            display: block;
        }
        .m-nav-item.active {
            color: var(--accent);
        }
        .m-nav-item.active::before {
            content: "";
            width: 20px;
            height: 2px;
            border-radius: 2px;
            background: var(--accent);
            position: absolute;
            top: 0;
        }
        .m-nav-item:hover {
            color: var(--accent-dark);
        }

        /* ===== Category Hero ===== */
        .cat-hero {
            position: relative;
            color: #fff;
            padding: 156px 0 104px;
            background: linear-gradient(100deg, rgba(18, 16, 13, .92) 8%, rgba(18, 16, 13, .68) 58%, rgba(18, 16, 13, .26) 100%), url('/assets/images/backpic/back-3.png') center/cover no-repeat;
            overflow: hidden;
        }
        .cat-hero::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            right: 0;
            height: 140px;
            background: linear-gradient(180deg, rgba(18, 16, 13, 0), var(--bg-paper));
        }
        .cat-hero .container {
            position: relative;
            z-index: 2;
        }
        .cat-hero-grid {
            display: grid;
            grid-template-columns: 1.1fr .9fr;
            gap: 48px;
            align-items: center;
        }
        .breadcrumb-line {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            color: rgba(255, 255, 255, .66);
            margin-bottom: 18px;
        }
        .breadcrumb-line a {
            color: rgba(255, 255, 255, .8);
        }
        .breadcrumb-line a:hover {
            color: var(--accent);
        }
        .breadcrumb-line i {
            font-size: 10px;
            color: rgba(255, 255, 255, .38);
        }
        .hero-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            font-weight: 600;
            background: rgba(255, 255, 255, .1);
            border: 1px solid rgba(255, 255, 255, .14);
            padding: 6px 14px;
            border-radius: 30px;
            color: rgba(255, 255, 255, .88);
            letter-spacing: .02em;
            margin-bottom: 18px;
            backdrop-filter: blur(6px);
        }
        .hero-pill i {
            color: var(--accent);
        }
        .cat-hero h1 {
            font-size: 50px;
            line-height: 1.14;
            margin-bottom: 18px;
            letter-spacing: -.02em;
            font-weight: 750;
        }
        .cat-hero h1 .hero-mark {
            color: var(--accent);
        }
        .cat-hero-lead {
            font-size: 17px;
            line-height: 1.9;
            color: rgba(255, 255, 255, .78);
            max-width: 530px;
            margin-bottom: 32px;
        }
        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            align-items: center;
        }
        .hero-specs {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-top: 44px;
            border-top: 1px solid rgba(255, 255, 255, .16);
            padding-top: 22px;
        }
        .hero-spec-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            color: rgba(255, 255, 255, .76);
            font-size: 14px;
        }
        .hero-spec-item i {
            color: var(--accent);
            margin-top: 5px;
            width: 16px;
            text-align: center;
        }
        .hero-visual {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 26px 60px rgba(0, 0, 0, .32);
            border: 1px solid rgba(255, 255, 255, .14);
        }
        .hero-visual img {
            width: 100%;
            height: 410px;
            object-fit: cover;
        }
        .hero-visual::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(18, 16, 13, 0), rgba(18, 16, 13, .18));
        }
        .hero-visual-tag {
            position: absolute;
            left: 18px;
            top: 18px;
            background: rgba(255, 255, 255, .88);
            color: var(--ink);
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .04em;
            padding: 7px 14px;
            border-radius: 6px;
            backdrop-filter: blur(6px);
            z-index: 2;
        }
        .hero-visual-caption {
            position: absolute;
            left: 18px;
            right: 18px;
            bottom: 16px;
            color: #fff;
            z-index: 2;
            font-size: 14px;
            font-weight: 600;
            text-shadow: 0 2px 10px rgba(0, 0, 0, .4);
        }

        /* ===== Intro ===== */
        .intro-section {
            position: relative;
            padding: 104px 0 90px;
        }
        .intro-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 68px;
            align-items: center;
        }
        .intro-visual {
            border-radius: 18px;
            overflow: hidden;
            box-shadow: var(--shadow-lg);
            position: relative;
        }
        .intro-visual img {
            width: 100%;
            height: 450px;
            object-fit: cover;
        }
        .intro-visual .intro-num {
            position: absolute;
            right: 24px;
            bottom: -22px;
            width: 82px;
            height: 82px;
            background: var(--accent);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            font-weight: 700;
            color: #fff;
            box-shadow: 0 12px 22px rgba(201, 118, 29, .26);
            border: 4px solid #fff;
            letter-spacing: .02em;
        }
        .intro-head .sec-kicker {
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--accent);
            font-size: 14px;
            font-weight: 700;
            letter-spacing: .08em;
        }
        .intro-head .sec-kicker::before {
            content: "";
            width: 24px;
            height: 2px;
            background: var(--accent);
        }
        .intro-head h2 {
            font-size: 34px;
            line-height: 1.28;
            margin: 16px 0 20px;
        }
        .intro-head p {
            font-size: 16px;
            color: #514A42;
            margin-bottom: 18px;
        }
        .intro-features {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px;
            margin-top: 26px;
        }
        .intro-item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            background: #fff;
            border: 1px solid var(--card-line);
            border-radius: 12px;
            padding: 14px 16px;
        }
        .intro-item i {
            width: 20px;
            color: var(--accent);
            margin-top: 5px;
        }
        .intro-item span {
            color: var(--ink);
            font-weight: 600;
            font-size: 14px;
            line-height: 1.6;
        }
        .intro-item em {
            display: block;
            font-style: normal;
            font-weight: 400;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.6;
        }

        /* ===== Product Line ===== */
        .product-line-section {
            padding: 100px 0;
            background: var(--bg-paper);
            border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
        }
        .series-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 18px;
        }
        .series-card {
            background: #fff;
            border: 1px solid var(--card-line);
            border-radius: var(--radius-md);
            padding: 24px;
            transition: all .3s ease;
            position: relative;
        }
        .series-card:hover {
            box-shadow: var(--shadow-lg);
            transform: translateY(-5px);
            border-color: rgba(201, 118, 29, .36);
        }
        .series-card--lg {
            grid-column: span 3;
            padding: 0;
            overflow: hidden;
        }
        .series-card--lg .series-media {
            height: 180px;
            overflow: hidden;
        }
        .series-card--lg .series-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .series-card--mid {
            grid-column: span 2;
            padding: 30px;
            background: #fff;
        }
        .series-card--sm {
            grid-column: span 2;
        }
        .series-card--full {
            grid-column: span 6;
            padding: 0;
            display: flex;
            background: #fff;
            margin-top: 2px;
        }
        @media (min-width: 992px) {
            .series-grid .series-card:nth-child(1) {
                grid-column: span 3;
            }
            .series-grid .series-card:nth-child(2) {
                grid-column: span 3;
            }
            .series-grid .series-card:nth-child(3) {
                grid-column: span 2;
            }
            .series-grid .series-card:nth-child(4) {
                grid-column: span 2;
            }
            .series-grid .series-card:nth-child(5) {
                grid-column: span 2;
            }
            .series-grid .series-card:nth-child(6) {
                grid-column: span 6;
            }
        }
        .series-ico {
            width: 50px;
            height: 50px;
            background: var(--accent-soft);
            color: var(--accent-dark);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 21px;
            margin-bottom: 16px;
        }
        .series-card h3 {
            font-size: 20px;
            margin: 12px 0 8px;
        }
        .series-card p {
            font-size: 14px;
            color: var(--muted);
            line-height: 1.8;
            margin-bottom: 14px;
        }
        .series-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        .series-tags span {
            font-size: 12px;
            background: #F7F3EE;
            color: #6C655D;
            border-radius: 5px;
            padding: 4px 9px;
            font-weight: 500;
            border: 1px solid var(--line);
        }
        .series-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            font-weight: 700;
            color: var(--accent);
            margin-top: 16px;
        }
        .series-link i {
            font-size: 12px;
            transition: transform .25s ease;
        }
        .series-link:hover i {
            transform: translateX(4px);
        }
        .full-width-card {
            display: grid;
            grid-template-columns: .8fr 1.2fr;
            overflow: hidden;
            min-height: 0;
        }
        .full-width-media {
            overflow: hidden;
            min-height: 240px;
            height: 100%;
        }
        .full-width-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .full-width-copy {
            padding: 28px 34px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        /* ===== Spec Band ===== */
        .spec-band {
            border-radius: 20px;
            background: var(--dark);
            color: #fff;
            padding: 60px 52px;
            position: relative;
            overflow: hidden;
            margin: -60px 0 0;
        }
        .spec-band::before {
            content: "";
            position: absolute;
            right: -120px;
            top: -120px;
            width: 320px;
            height: 320px;
            border: 1px solid rgba(255, 255, 255, .08);
            border-radius: 50%;
            box-shadow: 0 0 0 36px rgba(255, 255, 255, .02), 0 0 0 76px rgba(255, 255, 255, .02);
        }
        .spec-band::after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 5px;
            height: 100%;
            background: var(--accent);
            border-radius: 8px 0 0 8px;
        }
        .spec-band-row {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 28px;
            position: relative;
            z-index: 2;
        }
        .spec-item {
            padding-right: 22px;
            border-right: 1px solid rgba(255, 255, 255, .14);
        }
        .spec-item:last-child {
            border-right: 0;
        }
        .spec-item i {
            color: var(--accent);
            font-size: 22px;
            margin-bottom: 14px;
            display: block;
        }
        .spec-item strong {
            display: block;
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 5px;
            letter-spacing: .01em;
        }
        .spec-item span {
            font-size: 14px;
            color: rgba(255, 255, 255, .65);
            line-height: 1.65;
            display: block;
        }

        /* ===== Scene  ===== */
        .scene-section {
            padding: 108px 0 90px;
            background: #fff;
        }
        .scene-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 22px;
        }
        .scene-block {
            position: relative;
            min-height: 390px;
            border-radius: 18px;
            overflow: hidden;
            background: var(--dark);
        }
        .scene-block img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: .72;
            transition: opacity .5s ease;
        }
        .scene-block:hover img {
            opacity: .82;
        }
        .scene-block::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(200deg, rgba(18, 16, 13, .05) 20%, rgba(18, 16, 13, .82) 96%);
            z-index: 1;
        }
        .scene-copy {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 34px;
            color: #fff;
            z-index: 2;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .scene-copy .scene-label {
            font-size: 13px;
            font-weight: 700;
            color: var(--accent);
        }
        .scene-copy h3 {
            font-size: 24px;
            margin-bottom: 4px;
        }
        .scene-copy p {
            font-size: 14px;
            color: rgba(255, 255, 255, .78);
            margin: 0;
            max-width: 440px;
        }

        /* ===== Guide / Step ===== */
        .guide-section {
            padding: 100px 0;
            background: var(--bg-paper);
        }
        .guide-wrap {
            background: #fff;
            border: 1px solid var(--card-line);
            border-radius: 18px;
            padding: 48px;
            box-shadow: var(--shadow-sm);
            display: grid;
            grid-template-columns: 1fr 1.3fr;
            gap: 48px;
            align-items: center;
        }
        .guide-head .sec-kicker {
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--accent);
            font-weight: 700;
            font-size: 14px;
            letter-spacing: .06em;
        }
        .guide-head .sec-kicker::before {
            content: "";
            width: 24px;
            height: 2px;
            background: var(--accent);
        }
        .guide-head h2 {
            font-size: 30px;
            margin: 14px 0 16px;
        }
        .guide-head p {
            color: var(--muted);
            line-height: 1.85;
        }
        .guide-head .guide-note {
            background: var(--accent-soft);
            border-left: 3px solid var(--accent);
            border-radius: 8px;
            padding: 16px 18px;
            color: #6B3B0C;
            font-size: 14px;
            margin-top: 22px;
            line-height: 1.8;
        }
        .guide-steps {
            position: relative;
            padding-left: 0;
            margin: 0;
        }
        .guide-steps li {
            display: flex;
            align-items: flex-start;
            gap: 18px;
            padding: 26px 0 10px;
            border-bottom: 1px dashed var(--line);
            position: relative;
            padding-left: 4px;
        }
        .guide-steps li:last-child {
            border-bottom: 0;
        }
        .step-no {
            flex: 0 0 auto;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: var(--ink);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 15px;
            position: relative;
            z-index: 1;
        }
        .guide-steps li:nth-child(1) .step-no {
            background: var(--accent);
        }
        .step-copy strong {
            display: block;
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 4px;
            color: var(--ink);
        }
        .step-copy span {
            color: var(--muted);
            font-size: 14px;
            line-height: 1.75;
            display: block;
        }

        /* ===== Other Categories ===== */
        .other-cat-section {
            padding: 96px 0;
        }
        .other-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
        }
        .other-card {
            background: #fff;
            border: 1px solid var(--card-line);
            border-radius: 16px;
            overflow: hidden;
            transition: all .35s ease;
        }
        .other-card:hover {
            box-shadow: var(--shadow-lg);
            transform: translateY(-6px);
        }
        .other-card-img {
            overflow: hidden;
            height: 190px;
            background: #ddd;
        }
        .other-card-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .55s ease;
        }
        .other-card:hover .other-card-img img {
            transform: scale(1.05);
        }
        .other-card-body {
            padding: 20px 22px;
        }
        .other-card-body h3 {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 8px;
        }
        .other-card-body p {
            color: var(--muted);
            font-size: 14px;
            line-height: 1.8;
            margin-bottom: 14px;
        }
        .other-card-body .series-link {
            margin-top: 0;
        }

        /* ===== CTA quick ===== */
        .quick-cta {
            border-radius: 22px;
            background: linear-gradient(130deg, #1A1713, #12100D 70%);
            color: #fff;
            padding: 62px 58px;
            display: grid;
            grid-template-columns: 1fr 1.1fr;
            gap: 40px;
            position: relative;
            overflow: hidden;
            margin-top: -40px;
            z-index: 2;
        }
        .quick-cta::after {
            content: "";
            position: absolute;
            right: -150px;
            top: -100px;
            width: 340px;
            height: 340px;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, .1);
            box-shadow: 0 0 0 45px rgba(255, 255, 255, .03);
        }
        .quick-cta h2 {
            font-size: 32px;
            line-height: 1.3;
            margin-bottom: 16px;
        }
        .quick-cta .sub {
            color: rgba(255, 255, 255, .66);
            line-height: 1.85;
            font-size: 15px;
        }
        .quick-cta .advantage-line {
            display: flex;
            flex-wrap: wrap;
            gap: 24px;
            margin-top: 24px;
            font-size: 14px;
            color: rgba(255, 255, 255, .7);
        }
        .quick-cta .advantage-line i {
            color: var(--accent);
            margin-right: 6px;
        }
        .quick-cta .cta-card {
            background: rgba(255, 255, 255, .06);
            border: 1px solid rgba(255, 255, 255, .18);
            border-radius: 16px;
            padding: 24px;
            z-index: 2;
            position: relative;
        }
        .cta-card form {
            display: grid;
            grid-template-columns: 1fr 1fr auto;
            gap: 12px;
        }
        .cta-card .form-control,
        .cta-card input[type="text"],
        .cta-card input[type="tel"] {
            background: #fff;
            border: 1px solid #DED5CB;
            border-radius: 9px;
            height: 50px;
            padding: 0 16px;
            font-size: 15px;
            color: var(--ink);
        }
        .cta-card input::placeholder {
            color: #A79B8D;
        }
        .cta-card .mk-btn {
            height: 50px;
            padding: 0 22px;
            white-space: nowrap;
        }
        .cta-form-note {
            margin-top: 12px;
            font-size: 12px;
            color: rgba(255, 255, 255, .5);
        }

        /* ===== FAQ ===== */
        .faq-section {
            padding: 100px 0 60px;
            background: #fff;
        }
        .faq-wrap {
            max-width: 880px;
            margin: 0 auto;
        }
        .accordion-item {
            background: #fff;
            border: 1px solid var(--line) !important;
            margin-bottom: 14px;
            border-radius: 14px !important;
            overflow: hidden;
            padding: 0;
        }
        .accordion-button {
            background: #fff;
            color: var(--ink);
            font-size: 16px;
            font-weight: 700;
            padding: 20px 24px;
            box-shadow: none !important;
            border: 0;
            gap: 10px;
        }
        .accordion-button:not(.collapsed) {
            background: #FCF8F2;
            color: var(--ink);
        }
        .accordion-button:focus,
        .accordion-button:active {
            box-shadow: none;
            border-color: transparent;
        }
        .accordion-button::after {
            background-image: none;
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            content: "\f067";
            width: 30px;
            height: 30px;
            background: var(--accent-soft);
            color: var(--accent);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            transition: all .3s ease;
        }
        .accordion-button:not(.collapsed)::after {
            content: "\f068";
            transform: none;
            background: var(--accent);
            color: #fff;
        }
        .accordion-body {
            padding: 0 24px 22px;
            color: #5A534B;
            line-height: 1.9;
            font-size: 15px;
            background: #FCF8F2;
        }

        /* ===== Footer ===== */
        .site-footer {
            background: var(--dark);
            color: rgba(255, 255, 255, .74);
            font-size: 15px;
            margin-top: 0;
        }
        .footer-top {
            padding: 74px 0 42px;
            border-top: 4px solid var(--accent);
        }
        .footer-brand-name {
            font-size: 24px;
            color: #fff;
            font-weight: 800;
            margin-bottom: 12px;
        }
        .footer-brand-text {
            color: rgba(255, 255, 255, .52);
            font-size: 14px;
            line-height: 2;
            margin-bottom: 18px;
            max-width: 360px;
        }
        .footer-title {
            font-size: 16px;
            color: #fff;
            font-weight: 700;
            margin-bottom: 18px;
            padding-bottom: 6px;
            position: relative;
        }
        .footer-title::after {
            content: "";
            width: 20px;
            height: 2px;
            background: var(--accent);
            position: absolute;
            bottom: 0;
            left: 0;
        }
        .footer-links li {
            margin-bottom: 10px;
        }
        .footer-links a,
        .footer-contact-list li {
            color: rgba(255, 255, 255, .55);
            font-size: 14px;
            transition: all .25s ease;
        }
        .footer-links a:hover {
            color: #fff;
            padding-left: 4px;
        }
        .footer-contact-list li {
            margin-bottom: 12px;
            display: flex;
            gap: 10px;
        }
        .footer-contact-list i {
            color: var(--accent);
            margin-top: 5px;
            width: 16px;
        }
        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, .1);
            padding: 20px 0 28px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 13px;
            color: rgba(255, 255, 255, .45);
            flex-wrap: wrap;
            gap: 12px;
        }
        .footer-bottom .icp-text {
            color: rgba(255, 255, 255, .35);
        }

        /* ===== responsive ===== */
        @media (max-width: 1199.98px) {
            .container {
                max-width: 100%;
                padding-left: 28px;
                padding-right: 28px;
            }
            .cat-hero h1 {
                font-size: 44px;
            }
            .hero-visual img {
                height: 380px;
            }
            .cta-card form {
                grid-template-columns: 1fr 1fr;
            }
            .cta-card .mk-btn {
                width: 100%;
                grid-column: span 2;
            }
        }
        @media (max-width: 991.98px) {
            body {
                padding-bottom: 70px;
            }
            .section-gap {
                padding: 76px 0;
            }
            .site-header {
                height: 68px;
                background: rgba(246, 243, 238, .96);
            }
            .main-menu {
                display: none;
            }
            .desktop-header-cta {
                display: none !important;
            }
            .mobile-logo {
                display: inline-flex;
            }
            .mobile-bottom-nav {
                display: flex;
            }
            .header-main {
                width: 100%;
            }
            .cat-hero {
                padding: 126px 0 92px;
            }
            .cat-hero-grid {
                grid-template-columns: 1fr;
                gap: 40px;
            }
            .cat-hero h1 {
                font-size: 40px;
            }
            .hero-visual img {
                height: 340px;
            }
            .intro-grid {
                grid-template-columns: 1fr;
                gap: 40px;
            }
            .intro-visual img {
                height: 360px;
            }
            .spec-band {
                padding: 46px 34px;
            }
            .spec-band-row {
                grid-template-columns: 1fr 1fr;
                gap: 30px 12px;
            }
            .spec-item:nth-child(2) {
                border-right: 0;
            }
            .scene-grid {
                grid-template-columns: 1fr;
            }
            .guide-wrap {
                grid-template-columns: 1fr;
                padding: 34px;
                gap: 36px;
            }
            .other-grid {
                grid-template-columns: 1fr;
                gap: 18px;
            }
            .quick-cta {
                grid-template-columns: 1fr;
                padding: 40px 30px;
            }
            .full-width-card {
                grid-template-columns: 1fr;
            }
            .intro-features {
                grid-template-columns: 1fr;
            }
            .footer-top {
                padding: 56px 0 30px;
            }
        }
        @media (max-width: 767.98px) {
            .container {
                padding-left: 20px;
                padding-right: 20px;
            }
            .cat-hero {
                padding: 112px 0 80px;
            }
            .cat-hero h1 {
                font-size: 32px;
            }
            .cat-hero-lead {
                font-size: 15px;
            }
            .hero-specs {
                gap: 14px;
            }
            .section-head h2 {
                font-size: 26px;
            }
            .intro-head h2 {
                font-size: 26px;
            }
            .intro-visual img {
                height: 280px;
            }
            .series-grid {
                grid-template-columns: 1fr;
            }
            .series-card--lg,
            .series-card--mid,
            .series-card--sm,
            .series-card--full,
            .series-grid .series-card:nth-child(n) {
                grid-column: span 1;
            }
            .full-width-card {
                grid-template-columns: 1fr;
            }
            .full-width-media img {
                height: 220px;
            }
            .spec-band {
                padding: 38px 24px;
                border-radius: 16px;
            }
            .spec-band-row {
                grid-template-columns: 1fr 1fr;
            }
            .spec-item {
                border-right: 0;
            }
            .spec-item i {
                font-size: 18px;
            }
            .scene-block {
                min-height: 300px;
            }
            .scene-copy {
                padding: 22px;
            }
            .scene-copy h3 {
                font-size: 20px;
            }
            .guide-wrap {
                padding: 26px 20px;
            }
            .guide-head h2 {
                font-size: 25px;
            }
            .guide-steps li {
                gap: 12px;
            }
            .step-no {
                width: 42px;
                height: 42px;
                font-size: 14px;
            }
            .quick-cta {
                border-radius: 16px;
                padding: 30px 22px;
            }
            .quick-cta h2 {
                font-size: 24px;
            }
            .cta-card form {
                grid-template-columns: 1fr;
            }
            .cta-card .mk-btn {
                grid-column: span 1;
            }
            .footer-bottom {
                justify-content: center;
                text-align: center;
                flex-direction: column;
            }
        }
        @media (max-width: 480px) {
            .hero-actions .mk-btn {
                width: 100%;
            }
            .hero-specs .hero-spec-item {
                width: calc(50% - 12px);
            }
            .m-nav-item {
                font-size: 10px;
            }
            .m-nav-item i {
                font-size: 17px;
            }
            .brand-name {
                font-size: 19px;
            }
            .cat-hero h1 {
                font-size: 29px;
            }
            .section-head h2 {
                font-size: 24px;
            }
            .intro-item {
                padding: 13px;
            }
        }

/* roulang page: category4 */
:root {
            --paper: #F6F3EE;
            --white: #FFFFFF;
            --ink: #1C1916;
            --deep: #12100D;
            --brass: #C9761D;
            --brass-dark: #9C5512;
            --brass-soft: rgba(201, 118, 29, .12);
            --gray: #8A837B;
            --line: #E8E1D8;
            --card-line: #EAE2D8;
            --radius-sm: 4px;
            --radius: 8px;
            --radius-card: 14px;
            --radius-large: 18px;
            --shadow-sm: 0 2px 10px rgba(28, 25, 22, .05);
            --shadow-hover: 0 16px 32px rgba(28, 25, 22, .09);
            --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
            --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        }

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

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

        body {
            margin: 0;
            background: var(--paper);
            color: #2A2621;
            font-family: var(--font-sans);
            font-size: 16px;
            line-height: 1.75;
            text-rendering: optimizeLegibility;
            -webkit-font-smoothing: antialiased;
        }

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

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

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

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

        .section-block {
            padding: 96px 0;
        }

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

        @media (max-width: 991px) {
            .section-block {
                padding: 64px 0;
            }
            body {
                padding-bottom: 70px;
            }
        }

        .section-head {
            max-width: 860px;
            margin-bottom: 48px;
        }

        .section-label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 2px;
            color: var(--brass);
            text-transform: uppercase;
            margin-bottom: 14px;
        }

        .section-label::before {
            content: "";
            display: inline-block;
            width: 28px;
            height: 1px;
            background: var(--brass);
            opacity: .65;
        }

        .section-label.no-line::before {
            display: none;
        }

        .section-title {
            font-size: clamp(28px, 4vw, 38px);
            font-weight: 700;
            line-height: 1.25;
            letter-spacing: .5px;
            color: var(--ink);
            margin: 0 0 14px;
        }

        .section-lead {
            font-size: 17px;
            color: #625C53;
            line-height: 1.85;
            margin: 0;
        }

        /* Header */
        .site-header {
            position: sticky;
            top: 0;
            z-index: 1080;
            background: rgba(255, 255, 255, .94);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border-bottom: 1px solid var(--line);
            box-shadow: 0 2px 14px rgba(28, 25, 22, .03);
        }

        .header-main {
            height: 76px;
        }

        .logo-area .brand {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 6px 0;
        }

        .brand-mark {
            display: inline-grid;
            place-items: center;
            width: 38px;
            height: 38px;
            background: var(--brass);
            color: #fff;
            font-family: var(--font-mono);
            font-size: 13px;
            font-weight: 700;
            border-radius: 10px;
            letter-spacing: .5px;
            box-shadow: 0 4px 12px rgba(201, 118, 29, .25);
        }

        .brand-name {
            font-size: 20px;
            font-weight: 700;
            color: var(--ink);
            letter-spacing: .5px;
            line-height: 1.2;
        }

        .main-menu {
            margin-left: auto;
        }

        .main-menu>ul {
            display: flex;
            align-items: center;
            list-style: none;
            margin: 0;
            padding: 0;
            gap: 4px;
        }

        .main-menu>ul>li {
            position: relative;
            list-style: none;
        }

        .main-menu>ul>li>a {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 14px;
            font-size: 15px;
            font-weight: 600;
            color: #37322D;
            border-radius: 8px;
            transition: color .2s, background .2s;
        }

        .main-menu>ul>li>a:hover {
            color: var(--brass);
        }

        .main-menu>ul>li.current>a,
        .main-menu>ul>li.active>a {
            color: var(--brass);
            position: relative;
        }

        .main-menu>ul>li.current>a::after,
        .main-menu>ul>li.active>a::after {
            content: "";
            position: absolute;
            left: 14px;
            right: 14px;
            bottom: 2px;
            height: 2px;
            background: var(--brass);
            border-radius: 2px;
        }

        .menu-chevron {
            font-size: 11px;
            margin-left: 2px;
            opacity: .65;
        }

        .dropdown-panel {
            display: block;
            position: absolute;
            top: calc(100% + 12px);
            left: 50%;
            width: 660px;
            transform: translateX(-50%) translateY(8px);
            background: var(--white);
            border: 1px solid var(--line);
            border-radius: var(--radius-card);
            box-shadow: var(--shadow-hover);
            padding: 18px;
            opacity: 0;
            visibility: hidden;
            transition: opacity .22s ease, transform .22s ease, visibility .22s;
            z-index: 1090;
        }

        .nav-drop::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 100%;
            height: 14px;
        }

        .nav-drop:hover .dropdown-panel,
        .nav-drop:focus-within .dropdown-panel {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(0);
        }

        .dropdown-head {
            padding: 10px 12px 14px;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 2px;
            color: var(--gray);
            border-bottom: 1px solid var(--line);
            margin-bottom: 12px;
        }

        .dropdown-link {
            display: flex;
            align-items: center;
            padding: 12px;
            border-radius: 12px;
            background: transparent;
            transition: background .2s, transform .2s;
        }

        .dropdown-link:hover {
            background: var(--paper);
            transform: translateX(2px);
        }

        .dropdown-link.is-current {
            background: var(--brass-soft);
        }

        .dropdown-link-inner {
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        .dropdown-link strong {
            color: var(--ink);
            font-size: 15px;
            font-weight: 700;
            line-height: 1.4;
        }

        .dropdown-link em {
            display: block;
            font-style: normal;
            font-size: 13px;
            color: var(--gray);
            margin-top: 2px;
        }

        .dropdown-link i {
            color: var(--brass);
            opacity: .75;
            margin-left: 10px;
        }

        @media (max-width: 991px) {
            .main-menu {
                display: none;
            }
            .header-main {
                height: 64px;
            }
            .brand-name {
                font-size: 19px;
            }
            .brand-mark {
                width: 34px;
                height: 34px;
                font-size: 12px;
            }
        }

        /* Mobile bottom navigation */
        .mobile-bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: calc(66px + env(safe-area-inset-bottom));
            padding-bottom: env(safe-area-inset-bottom);
            display: none;
            align-items: center;
            justify-content: space-around;
            background: rgba(255, 255, 255, .97);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-top: 1px solid var(--line);
            z-index: 1100;
        }

        .m-tab {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 3px;
            height: 100%;
            font-size: 11.5px;
            font-weight: 600;
            color: var(--gray);
            line-height: 1.2;
        }

        .m-tab i {
            font-size: 18px;
        }

        .m-tab.active {
            color: var(--brass);
        }

        .m-tab.active i {
            transform: translateY(-1px);
        }

        @media (max-width: 991px) {
            .mobile-bottom-nav {
                display: flex;
            }
        }

        /* Hero */
        .cat-hero {
            position: relative;
            color: #fff;
            padding: 84px 0 70px;
            background:
                linear-gradient(105deg, rgba(18, 16, 13, .95) 0%, rgba(32, 26, 21, .85) 48%, rgba(70, 49, 30, .62) 100%),
                url('/assets/images/backpic/back-1.webp') center / cover no-repeat;
        }

        .cat-hero::after {
            content: "";
            position: absolute;
            right: 0;
            bottom: 0;
            width: 420px;
            height: 180px;
            background: radial-gradient(circle at 80% 80%, rgba(201, 118, 29, .18), transparent 72%);
            pointer-events: none;
        }

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

        .hero-breadcrumb-list {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px;
            list-style: none;
            margin: 0 0 22px;
            padding: 0;
            font-size: 13px;
            color: rgba(255, 255, 255, .62);
        }

        .hero-breadcrumb-list li+li::before {
            content: "/";
            display: inline-block;
            margin-right: 6px;
            color: rgba(255, 255, 255, .35);
        }

        .hero-breadcrumb-list a {
            color: rgba(255, 255, 255, .78);
            transition: color .2s;
        }

        .hero-breadcrumb-list a:hover {
            color: #E8B17E;
        }

        .hero-cat-tag {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            font-weight: 600;
            color: #F2C098;
            background: rgba(201, 118, 29, .14);
            border: 1px solid rgba(201, 118, 29, .35);
            padding: 5px 14px;
            border-radius: 100px;
            margin-bottom: 22px;
        }

        .hero-cat-tag .dot {
            width: 6px;
            height: 6px;
            display: inline-block;
            background: #E49A4D;
            border-radius: 50%;
        }

        .cat-hero h1 {
            margin: 0 0 20px;
            color: #fff;
            font-size: clamp(32px, 5vw, 56px);
            font-weight: 700;
            line-height: 1.16;
            letter-spacing: .8px;
        }

        .cat-hero h1 .hero-brand-word {
            display: block;
            color: #E2A35F;
            font-size: .78em;
            margin-top: 4px;
            letter-spacing: 2px;
        }

        .cat-hero .hero-desc {
            max-width: 650px;
            font-size: 17px;
            color: rgba(255, 255, 255, .84);
            line-height: 1.9;
            margin-bottom: 32px;
        }

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

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border-radius: 10px;
            padding: 12px 24px;
            font-weight: 600;
            font-size: 14px;
            line-height: 1.4;
            border: 1px solid transparent;
            transition: background .2s, border-color .2s, color .2s, transform .2s, box-shadow .2s;
        }

        .btn:focus-visible {
            outline: 3px solid rgba(201, 118, 29, .28);
            outline-offset: 2px;
        }

        .btn-brass {
            background: var(--brass);
            border-color: var(--brass);
            color: #fff;
            box-shadow: 0 8px 20px rgba(201, 118, 29, .22);
        }

        .btn-brass:hover {
            background: var(--brass-dark);
            border-color: var(--brass-dark);
            color: #fff;
            transform: translateY(-2px);
            box-shadow: 0 12px 24px rgba(201, 118, 29, .28);
        }

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

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

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

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

        .hero-spec-strip {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 24px;
            margin-top: 56px;
            padding-top: 24px;
            border-top: 1px solid rgba(255, 255, 255, .15);
        }

        .hero-spec-item .spec-field {
            display: block;
            font-size: 13px;
            color: rgba(255, 255, 255, .62);
        }

        .hero-spec-item .spec-value {
            display: block;
            font-weight: 700;
            color: #F6E7D8;
            font-size: 17px;
            margin-top: 4px;
        }

        @media (max-width: 991px) {
            .hero-spec-strip {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 18px;
                margin-top: 40px;
            }
            .cat-hero {
                padding: 60px 0 54px;
            }
        }

        @media (max-width: 520px) {
            .hero-actions .btn {
                width: 100%;
            }
            .hero-spec-strip {
                gap: 14px;
            }
        }

        /* Intro / composition */
        .intro-row {
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            align-items: center;
            gap: 60px;
        }

        .intro-media {
            position: relative;
            border-radius: var(--radius-large);
            overflow: hidden;
            box-shadow: var(--shadow-hover);
        }

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

        .intro-media::after {
            content: "";
            position: absolute;
            inset: 0;
            border: 1px solid rgba(255, 255, 255, .55);
            border-radius: inherit;
            pointer-events: none;
        }

        .intro-note {
            display: flex;
            align-items: center;
            gap: 12px;
            background: var(--paper);
            border-radius: 12px;
            padding: 12px 16px;
            font-size: 14px;
            color: #5C554E;
            margin-top: 20px;
            border-left: 3px solid var(--brass);
        }

        .intro-note i {
            color: var(--brass);
            font-size: 18px;
        }

        .intro-list {
            list-style: none;
            padding: 0;
            margin: 26px 0 0;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .intro-list li {
            position: relative;
            padding-left: 26px;
            color: #3E3934;
            font-size: 15.5px;
            line-height: 1.7;
        }

        .intro-list li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 10px;
            width: 9px;
            height: 9px;
            background: var(--brass);
            border-radius: 50%;
            opacity: .75;
        }

        @media (max-width: 991px) {
            .intro-row {
                grid-template-columns: 1fr;
                gap: 40px;
            }
        }

        /* Module cards */
        .module-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
        }

        .module-card {
            background: var(--white);
            border: 1px solid var(--line);
            border-radius: var(--radius-card);
            padding: 28px 24px;
            box-shadow: var(--shadow-sm);
            transition: transform .25s ease, box-shadow .25s ease, border-color .25s;
            position: relative;
        }

        .module-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-hover);
            border-color: rgba(201, 118, 29, .28);
        }

        .module-icon {
            width: 48px;
            height: 48px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--brass);
            background: var(--brass-soft);
            border: 1px solid rgba(201, 118, 29, .16);
            border-radius: 12px;
            font-size: 21px;
            margin-bottom: 20px;
        }

        .module-card h3 {
            font-size: 19px;
            font-weight: 700;
            color: var(--ink);
            margin: 0 0 10px;
        }

        .module-card p {
            margin: 0;
            font-size: 14.5px;
            color: var(--gray);
            line-height: 1.8;
        }

        .param-wrap {
            margin-top: 52px;
            border: 1px solid var(--line);
            border-radius: var(--radius-large);
            background: var(--white);
            padding: 22px 26px;
            box-shadow: var(--shadow-sm);
        }

        .param-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin: 0;
            list-style: none;
            padding: 0;
        }

        .param-grid li {
            padding-left: 14px;
            border-left: 2px solid rgba(201, 118, 29, .28);
        }

        .param-grid span {
            display: block;
            font-size: 13px;
            color: var(--gray);
        }

        .param-grid strong {
            display: block;
            font-weight: 700;
            font-size: 16px;
            color: var(--ink);
            font-family: var(--font-mono);
            margin-top: 6px;
        }

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

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

        /* Industry applications */
        .industry-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
        }

        .industry-card {
            background: var(--white);
            border: 1px solid var(--line);
            border-radius: var(--radius-large);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            transition: transform .25s, box-shadow .25s;
        }

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

        .industry-card-img {
            aspect-ratio: 4 / 3;
            overflow: hidden;
            background: #EFEAE3;
        }

        .industry-card-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .5s ease;
        }

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

        .industry-card-body {
            padding: 20px 18px 22px;
        }

        .industry-card-body h3 {
            font-size: 17px;
            font-weight: 700;
            color: var(--ink);
            margin-bottom: 8px;
        }

        .industry-card-body p {
            font-size: 14px;
            color: var(--gray);
            line-height: 1.7;
            margin: 0;
        }

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

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

        /* Flow process */
        .flow-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 22px;
            counter-reset: flowCounter;
        }

        .flow-step {
            background: var(--white);
            border: 1px solid var(--line);
            border-radius: var(--radius-card);
            padding: 26px 22px 24px;
            position: relative;
            box-shadow: var(--shadow-sm);
        }

        .flow-step .step-num {
            font-family: var(--font-mono);
            font-size: 12px;
            font-weight: 700;
            color: var(--brass);
            letter-spacing: 1px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .flow-step .step-num::before {
            content: "";
            width: 18px;
            height: 1px;
            background: var(--brass);
        }

        .flow-step h3 {
            font-size: 18px;
            font-weight: 700;
            color: var(--ink);
            margin: 12px 0 9px;
        }

        .flow-step p {
            font-size: 14px;
            color: var(--gray);
            line-height: 1.75;
            margin: 0;
        }

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

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

        /* Other categories */
        .cross-category-panel {
            background: var(--deep);
            border-radius: var(--radius-large);
            padding: 36px;
            color: #fff;
            overflow: hidden;
            position: relative;
        }

        .cross-category-panel::after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 290px;
            height: 100%;
            background: radial-gradient(circle at 80% 50%, rgba(201, 118, 29, .24), transparent 66%);
        }

        .cross-item {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 20px 0;
            border-bottom: 1px solid rgba(255, 255, 255, .12);
            color: #fff;
            transition: padding-left .25s, background .2s, color .2s;
            border-radius: 8px;
        }

        .cross-item:hover {
            color: #EEB277;
            padding-left: 10px;
            background: rgba(255, 255, 255, .03);
        }

        .cross-item.no-link {
            cursor: default;
            color: #E5B27F;
        }

        .cross-item.no-link:hover {
            padding-left: 0;
            background: transparent;
            color: #E5B27F;
        }

        .cross-item-icon {
            width: 42px;
            height: 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(255, 255, 255, .18);
            border-radius: 10px;
            color: #E2A35F;
            font-size: 17px;
        }

        .cross-item strong {
            display: block;
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 2px;
        }

        .cross-item span {
            display: block;
            font-size: 13.5px;
            color: rgba(255, 255, 255, .6);
        }

        .cross-current-tag {
            margin-left: auto;
            white-space: nowrap;
            font-size: 12.5px;
            color: #F2C098;
            background: rgba(201, 118, 29, .16);
            padding: 4px 10px;
            border-radius: 100px;
        }

        @media (max-width: 768px) {
            .cross-category-panel {
                padding: 26px 20px;
            }
            .cross-item span {
                font-size: 13px;
            }
            .cross-current-tag {
                display: none;
            }
        }

        /* FAQ */
        .custom-accordion .accordion-item {
            border: 1px solid var(--line);
            border-radius: 14px !important;
            background: var(--white);
            margin-bottom: 14px;
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }

        .custom-accordion .accordion-button {
            background: transparent;
            color: var(--ink);
            font-size: 16px;
            font-weight: 600;
            padding: 20px 22px;
            box-shadow: none;
            border: 0;
            transition: color .2s, background .2s;
        }

        .custom-accordion .accordion-button:not(.collapsed) {
            background: rgba(201, 118, 29, .05);
            color: var(--ink);
        }

        .custom-accordion .accordion-button:focus {
            box-shadow: none;
            outline: 2px solid rgba(201, 118, 29, .25);
            outline-offset: -2px;
        }

        .custom-accordion .accordion-button::after {
            content: "\2b";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            background: none;
            width: auto;
            height: auto;
            color: var(--brass);
            font-size: 18px;
            transition: transform .2s;
        }

        .custom-accordion .accordion-button:not(.collapsed)::after {
            content: "\f068";
            transform: none;
        }

        .custom-accordion .accordion-body {
            padding: 0 22px 22px;
            font-size: 15px;
            color: #5D564F;
            border-top: 1px dashed var(--line);
        }

        .custom-accordion .accordion-body p {
            margin: 18px 0 0;
            line-height: 1.9;
        }

        /* Quick CTA */
        .quick-cta-section {
            position: relative;
            background: var(--deep);
            color: #fff;
            padding: 72px 0;
            border-top: 1px solid rgba(201, 118, 29, .25);
        }

        .quick-cta-section::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 1px;
            background: rgba(255, 255, 255, .08);
        }

        .quick-cta-inner {
            display: grid;
            grid-template-columns: 1.2fr .8fr;
            align-items: center;
            gap: 40px;
        }

        .quick-cta-icon {
            width: 52px;
            height: 52px;
            color: #F0B178;
            background: rgba(201, 118, 29, .15);
            border: 1px solid rgba(201, 118, 29, .3);
            border-radius: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            margin-bottom: 16px;
        }

        .quick-cta-inner h2 {
            font-size: clamp(22px, 3vw, 30px);
            font-weight: 700;
            color: #fff;
            margin-bottom: 12px;
            line-height: 1.35;
        }

        .quick-cta-inner p {
            color: rgba(255, 255, 255, .7);
            font-size: 15px;
            line-height: 1.85;
            margin: 0;
        }

        .quick-cta-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        @media (max-width: 991px) {
            .quick-cta-inner {
                grid-template-columns: 1fr;
            }
            .quick-cta-actions .btn {
                width: 100%;
            }
        }

        /* Footer */
        .site-footer {
            background: var(--deep);
            color: rgba(255, 255, 255, .78);
            padding: 70px 0 26px;
        }

        .site-footer .footer-top {
            padding-bottom: 40px;
            border-bottom: 1px solid rgba(255, 255, 255, .08);
        }

        .footer-brand-name {
            font-size: 24px;
            font-weight: 700;
            color: #fff;
            margin: 0 0 18px;
            letter-spacing: .5px;
        }

        .footer-brand-text {
            color: rgba(255, 255, 255, .62);
            font-size: 14.5px;
            line-height: 1.9;
            max-width: 360px;
        }

        .footer-title {
            font-size: 15px;
            color: #fff;
            font-weight: 600;
            margin: 4px 0 16px;
            letter-spacing: .3px;
        }

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

        .footer-links li,
        .footer-contact-list li {
            margin-bottom: 10px;
            font-size: 14px;
            color: rgba(255, 255, 255, .62);
        }

        .footer-links a {
            color: rgba(255, 255, 255, .62);
            transition: color .2s, padding-left .2s;
        }

        .footer-links a:hover {
            color: #E2A35F;
            padding-left: 4px;
        }

        .footer-contact-list li i {
            width: 18px;
            color: #C9761D;
            margin-right: 6px;
        }

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

        .site-footer .icp-text {
            color: rgba(255, 255, 255, .28);
        }

        /* Bootstrap overrides */
        .accordion.custom-accordion {
            --bs-accordion-border-width: 0;
            --bs-accordion-active-bg: transparent;
            --bs-accordion-btn-focus-box-shadow: none;
            --bs-accordion-inner-border-radius: 14px;
            --bs-accordion-border-radius: 14px;
        }