/* roulang page: index */
:root{
        --page-bg:#F6F4EF;
        --card-bg:#FFFFFF;
        --primary:#1D5E55;
        --primary-dark:#0D3B36;
        --accent:#C08A3E;
        --gold-light:#E7CDA0;
        --text-strong:#1D2A28;
        --text-sub:#5E6F6B;
        --text-light:#8A9692;
        --border-color:#E5E0D6;
        --radius-card:16px;
        --radius-btn:9px;
        --shadow-sm:0 2px 12px rgba(20,45,42,.06);
        --shadow-lg:0 10px 24px rgba(20,45,42,.10);
        --container-max:1200px;
        --radius-search:999px;
    }
    html{scroll-behavior:smooth;box-sizing:border-box}
    *,*::before,*::after{box-sizing:inherit}
    body{
        margin:0;
        background:var(--page-bg);
        color:var(--text-strong);
        font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",sans-serif;
        font-size:16px;
        line-height:1.85;
        -webkit-font-smoothing:antialiased;
    }
    img{max-width:100%;display:block}
    a{text-decoration:none;color:inherit}
    button,input,textarea{font-family:inherit}
    ::selection{background:rgba(29,94,85,.18);color:var(--primary-dark)}

    .site-container{
        max-width:var(--container-max);
        margin-inline:auto;
        padding-inline:1.25rem;
    }
    .section-pad{padding-block:4.5rem}
    @media(max-width:767.98px){.section-pad{padding-block:2.5rem}}
    .text-gradient{background:linear-gradient(135deg,var(--primary),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}

    /* 通用标题 */
    .section-eyebrow{
        display:inline-flex;
        align-items:center;
        gap:.5rem;
        font-size:.82rem;
        letter-spacing:.14em;
        color:var(--accent);
        font-weight:700;
        margin-bottom:1rem;
        text-transform:uppercase;
    }
    .section-eyebrow::before{
        content:"";
        width:26px;height:2px;
        background:var(--gold-light);
        border-radius:999px;
    }
    .section-title{
        font-size:clamp(1.6rem,3vw,2.2rem);
        line-height:1.35;
        font-weight:700;
        color:var(--text-strong);
        margin:.2rem 0 .8rem;
    }
    .section-lead{
        color:var(--text-sub);
        font-size:1rem;
        max-width:720px;
        margin-bottom:2rem;
    }

    /* 顶部信息条 */
    .top-info{
        background:var(--primary-dark);
        color:#f7f2e8;
        font-size:.82rem;
        letter-spacing:.04em;
        padding:.45rem 0;
    }
    .top-info .site-container{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:1rem;
    }
    .top-info-desc{
        color:#D7DFD6;
        font-size:.78rem;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    /* 主导航 */
    .main-header{
        position:sticky;
        top:0;
        z-index:50;
        background:rgba(246,244,239,.96);
        backdrop-filter:blur(14px);
        border-bottom:1px solid var(--border-color);
    }
    .nav-bar{
        display:grid;
        grid-template-columns:auto 1fr auto;
        align-items:center;
        gap:2rem;
        padding:.9rem 0;
    }
    .brand-logo{
        display:flex;
        align-items:center;
        gap:.6rem;
        color:var(--primary-dark);
        font-weight:800;
        font-size:1.2rem;
        letter-spacing:.02em;
        white-space:nowrap;
    }
    .brand-logo svg{color:var(--primary);flex-shrink:0}
    .brand-sub{
        color:var(--text-light);
        font-weight:600;
        font-size:.78rem;
        display:block;
        letter-spacing:.08em;
    }
    .nav-search{
        max-width:460px;
        width:100%;
        margin-inline:auto;
        position:relative;
        transition:box-shadow .25s ease;
    }
    .nav-search svg{
        position:absolute;
        left:17px;
        top:50%;
        transform:translateY(-50%);
        width:18px;height:18px;
        color:var(--text-light);
        pointer-events:none;
    }
    .nav-search input{
        width:100%;
        height:46px;
        background:#fff;
        border:1px solid #E0DCD2;
        border-radius:var(--radius-search);
        padding:0 120px 0 46px;
        font-size:.95rem;
        color:var(--text-strong);
        transition:border-color .25s,box-shadow .25s;
    }
    .nav-search input::placeholder{color:var(--text-light)}
    .nav-search input:focus{
        outline:none;
        border-color:var(--primary);
        box-shadow:0 0 0 3px rgba(29,94,85,.14);
    }
    .nav-search button{
        position:absolute;
        right:6px;
        top:50%;
        transform:translateY(-50%);
        height:34px;
        border:0;
        background:var(--primary);
        color:#fff;
        font-size:.84rem;
        padding:0 1.05rem;
        border-radius:999px;
        font-weight:600;
        cursor:pointer;
        transition:background .2s,transform .2s;
    }
    .nav-search button:hover{background:var(--primary-dark)}
    .nav-search button:focus-visible{
        outline:3px solid rgba(29,94,85,.3);
        outline-offset:2px;
    }
    .nav-primary{
        display:flex;
        align-items:center;
        gap:.35rem;
        list-style:none;
        margin:0;
        padding:0;
    }
    .nav-primary li{
        position:relative;
        white-space:nowrap;
    }
    .nav-primary a{
        display:inline-flex;
        align-items:center;
        gap:.3rem;
        padding:.55rem .78rem;
        font-size:.9rem;
        color:var(--text-sub);
        font-weight:600;
        border-radius:8px;
        transition:color .2s,background .2s;
    }
    .nav-primary a:hover{color:var(--primary);background:rgba(29,94,85,.07)}
    .nav-primary a:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
    .nav-primary a.active-nav{
        color:var(--primary-dark);
    }
    .nav-primary a.active-nav::after{
        content:"";
        position:absolute;
        left:.6rem;
        right:.6rem;
        bottom:-2px;
        height:3px;
        background:var(--accent);
        border-radius:99px;
    }
    .nav-cta{
        border:1.5px solid var(--primary);
        border-radius:var(--radius-btn);
        color:#fff;
        background:var(--primary) !important;
        padding:.55rem 1.05rem !important;
        transition:background .2s,transform .2s;
    }
    .nav-cta:hover{background:var(--primary-dark) !important;color:#fff;transform:translateY(-1px)}

    .mobile-menu-toggle{
        width:44px;height:44px;
        border-radius:10px;
        border:1px solid var(--border-color);
        background:#fff;
        color:var(--primary-dark);
        display:inline-flex;
        align-items:center;
        justify-content:center;
        cursor:pointer;
        transition:border-color .2s;
    }
    .mobile-menu-toggle:hover{border-color:var(--primary)}
    .mobile-menu-toggle:focus-visible{outline:2px solid var(--primary)}

    .mobile-nav{
        display:none;
        padding:.7rem 1rem 1.25rem;
        border-top:1px solid var(--border-color);
        background:#fffaf3;
    }
    .mobile-nav.open{display:block}
    .mobile-nav a{
        display:block;
        color:var(--text-strong);
        padding:.7rem .4rem;
        border-bottom:1px solid #eee7da;
        font-size:.95rem;
        font-weight:600;
        text-align:left;
    }
    .mobile-nav a:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
    .mobile-nav a.active-mobile{color:var(--primary)}

    /* Hero */
    .hero-section{
        position:relative;
        overflow:hidden;
        background-image:linear-gradient(90deg,rgba(246,244,239,.98) 0%,rgba(246,244,239,.88) 46%,rgba(246,244,239,.42) 100%),url('/assets/images/backpic/back-1.webp');
        background-size:cover;
        background-position:center 35%;
        background-repeat:no-repeat;
        border-bottom:1px solid var(--border-color);
    }
    .hero-grid{
        display:grid;
        grid-template-columns:1.08fr .92fr;
        align-items:center;
        gap:3.5rem;
        padding-block:4.5rem;
    }
    .hero-badge{
        display:inline-flex;
        align-items:center;
        gap:.5rem;
        border:1px solid var(--gold-light);
        background:rgba(255,255,255,.72);
        color:var(--primary-dark);
        padding:.45rem 1.1rem;
        border-radius:999px;
        font-size:.8rem;
        letter-spacing:.08em;
        font-weight:700;
        margin-bottom:1.5rem;
        backdrop-filter:blur(4px);
    }
    .hero-badge span{color:var(--accent)}
    .hero-title{
        font-size:clamp(1.95rem,4.2vw,3rem);
        line-height:1.28;
        font-weight:800;
        color:var(--primary-dark);
        letter-spacing:-.02em;
        margin:.6rem 0 1rem;
    }
    .hero-lead{
        color:var(--text-sub);
        font-size:1.02rem;
        max-width:540px;
        margin-bottom:2rem;
        line-height:1.9;
    }
    .hero-actions{display:flex;gap:.9rem;align-items:center;flex-wrap:wrap}
    .btn{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:.55rem;
        border-radius:var(--radius-btn);
        font-weight:700;
        font-size:.95rem;
        line-height:1;
        padding:.88rem 1.55rem;
        cursor:pointer;
        transition:all .25s ease;
        border:1.5px solid transparent;
    }
    .btn svg{transition:transform .25s ease}
    .btn-primary{
        background:var(--primary);
        color:#fff;
        box-shadow:var(--shadow-sm);
    }
    .btn-primary:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
    .btn-primary:hover svg{transform:translateX(4px)}
    .btn-second{
        background:transparent;
        color:var(--primary-dark);
        border-color:var(--primary);
    }
    .btn-second:hover{
        border-color:var(--primary-dark);
        background:rgba(29,94,85,.06);
        transform:translateY(-2px);
    }
    .btn-ghost{
        border:0;
        background:transparent;
        color:var(--accent);
        padding:0;
        border-radius:0;
        border-bottom:2px solid transparent;
    }
    .btn-ghost:hover{border-color:var(--gold-light);color:var(--primary)}
    .btn:focus-visible{outline:3px solid rgba(29,94,85,.3);outline-offset:2px}
    .hero-proof{
        display:flex;
        gap:1rem;
        margin-top:2.2rem;
        align-items:center;
        color:var(--text-sub);
        font-size:.86rem;
    }
    .hero-proof-divider{width:1px;height:18px;background:var(--border-color)}
    .hero-aside{
        position:relative;
        min-height:400px;
    }
    .hero-aside .blob{
        position:absolute;
        right:2%;
        top:7%;
        width:76%;
        height:88%;
        background:var(--gold-light);
        border-radius:120px 60px 120px 60px;
        opacity:.5;
        transform:rotate(3deg);
        z-index:0;
    }
    .hero-photo{
        position:relative;
        z-index:1;
        aspect-ratio:4/3;
        border-radius:26px;
        overflow:hidden;
        box-shadow:var(--shadow-lg);
        border:6px solid rgba(255,255,255,.8);
        background:#fff;
    }
    .hero-photo img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
    .hero-photo:hover img{transform:scale(1.03)}
    .hero-photo-card{
        position:absolute;
        z-index:2;
        background:#fff;
        box-shadow:var(--shadow-lg);
        border-radius:14px;
        padding:.8rem 1rem;
        color:var(--primary-dark);
        font-weight:700;
        font-size:.85rem;
        display:flex;
        align-items:center;
        gap:.5rem;
        border:1px solid #efe9dc;
    }
    .hero-photo-card.pc{top:20px;left:24px}
    .hero-photo-card.pad{bottom:28px;right:-10px}
    .hero-photo-card svg{color:var(--accent)}
    @media(max-width:1023.98px){
        .nav-bar{grid-template-columns:auto 1fr;gap:1rem}
        .nav-search{order:3;grid-column:1/3;max-width:none;margin-top:.4rem}
        .primary-nav-outer{order:2}
        .nav-cta.nav-desktop-only{display:none}
        .hero-grid{grid-template-columns:1fr;padding-block:3rem;gap:2.2rem}
        .hero-aside{min-height:340px}
        .hero-aside .blob{width:70%;right:2%;top:0}
        .hero-photo-card.pad{right:10px}
    }
    @media(max-width:767.98px){
        .desktop-nav{display:none}
        .brand-sub{display:none}
        .nav-bar{gap:.7rem;padding:.8rem 0}
        .nav-search input{height:44px;font-size:.88rem;padding-left:40px;padding-right:80px}
        .nav-search button{font-size:.78rem;padding:0 .75rem;height:32px}
        .hero-section{background-image:linear-gradient(rgba(246,244,239,.93),rgba(246,244,239,.93)),url('/assets/images/backpic/back-1.webp')}
        .hero-grid{padding-block:2.6rem 2rem}
        .hero-actions .btn{width:100%}
        .hero-proof{flex-wrap:wrap;gap:.55rem}
        .hero-aside{min-height:auto}
        .hero-photo{aspect-ratio:4/3}
    }

    /* 数字指标 */
    .metric-strip{
        display:grid;
        grid-template-columns:repeat(4,1fr);
        gap:1rem;
        background:#fff;
        border:1px solid var(--border-color);
        border-radius:var(--radius-card);
        box-shadow:var(--shadow-sm);
        padding:1.2rem 1.5rem;
        margin-top:-34px;
        position:relative;
        z-index:3;
    }
    .metric-item{
        padding:1.1rem 1rem;
        border-right:1px solid #EEE7DC;
    }
    .metric-item:last-child{border-right:0}
    .metric-item b{
        display:block;
        font-size:1.9rem;
        text-align:center;
        color:var(--primary-dark);
        line-height:1.2;
        font-weight:800;
    }
    .metric-item b small{
        color:var(--accent);
        font-size:1.1rem;
    }
    .metric-item span{
        display:block;
        text-align:center;
        color:var(--text-sub);
        font-size:.84rem;
        margin-top:.2rem;
    }
    @media(max-width:767.98px){
        .metric-strip{grid-template-columns:repeat(2,1fr);padding:1rem;margin-top:-26px}
        .metric-item{border-bottom:1px solid #eee7dc;border-right:0}
        .metric-item:nth-child(odd){border-right:1px solid #eee7dc}
        .metric-item b{font-size:1.5rem}
    }

    /* 通用卡片网格 */
    .card{
        background:var(--card-bg);
        border:1px solid var(--border-color);
        border-radius:var(--radius-card);
        box-shadow:var(--shadow-sm);
        transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
        overflow:hidden;
        height:100%;
        display:flex;
        flex-direction:column;
    }
    .card:hover{
        transform:translateY(-5px);
        box-shadow:var(--shadow-lg);
        border-color:var(--gold-light);
    }
    .card-cover{
        aspect-ratio:4/3;
        overflow:hidden;
        background:#eee8dd;
        position:relative;
    }
    .card-cover img{
        width:100%;
        height:100%;
        object-fit:cover;
        transition:transform .7s ease;
    }
    .card:hover .card-cover img{transform:scale(1.04)}
    .tag-mini{
        display:inline-flex;
        align-items:center;
        background:rgba(192,138,62,.13);
        color:var(--accent);
        border:1px solid rgba(192,138,62,.3);
        border-radius:5px;
        font-size:.73rem;
        padding:.08rem .55rem;
        font-weight:700;
        letter-spacing:.03em;
    }
    .card-body{padding:1.4rem 1.4rem 1.5rem;display:flex;flex-direction:column;flex:1}
    .card-title{
        font-size:1.12rem;
        line-height:1.45;
        color:var(--text-strong);
        margin:.7rem 0 .45rem;
        font-weight:700;
    }
    .card-text{
        color:var(--text-sub);
        font-size:.9rem;
        line-height:1.75;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
    }
    .card-link{
        margin-top:1rem;
        font-weight:700;
        font-size:.88rem;
        color:var(--primary);
        display:inline-flex;
        align-items:center;
        gap:.3rem;
        transition:color .2s,gap .2s;
    }
    .card-link:hover{color:var(--accent);gap:.6rem}

    .icon-primary{
        flex-shrink:0;
        color:var(--primary);
        background:rgba(29,94,85,.08);
        width:46px;
        height:46px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        border-radius:14px;
    }
    .icon-primary i{font-style:normal}

    /* 核心服务 */
    .feature-grid{
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:1.6rem;
        margin-top:2.2rem;
    }
    .feature-item{
        background:#fff;
        border:1px solid var(--border-color);
        border-left:3px solid var(--primary);
        border-radius:15px;
        padding:1.9rem 1.8rem;
        box-shadow:var(--shadow-sm);
        transition:transform .25s ease,border-color .2s ease,box-shadow .25s ease;
    }
    .feature-item:hover{
        transform:translateY(-4px);
        border-left-color:var(--accent);
        box-shadow:var(--shadow-lg);
    }
    .feature-item .feature-title{
        font-size:1.12rem;
        font-weight:700;
        margin:.9rem 0 .5rem;
        color:var(--text-strong);
    }
    .feature-item .feature-text{
        color:var(--text-sub);
        font-size:.9rem;
    }
    .feature-list{
        list-style:none;
        margin:1.1rem 0 0;
        padding:0;
    }
    .feature-list li{
        padding:.32rem 0 .32rem 1.6rem;
        position:relative;
        color:var(--text-sub);
        font-size:.88rem;
        line-height:1.75;
    }
    .feature-list li::before{
        content:"\2713";
        position:absolute;
        left:0;
        color:var(--accent);
        font-weight:700;
    }

    /* 流程步骤 */
    .process-strip{
        display:grid;
        grid-template-columns:repeat(4,1fr);
        gap:1.2rem;
        margin-top:2rem;
    }
    .process-step{
        background:var(--card-bg);
        border:1px solid var(--border-color);
        border-radius:15px;
        padding:1.4rem 1.2rem;
        box-shadow:var(--shadow-sm);
        transition:background .25s ease,transform .25s ease;
        position:relative;
    }
    .process-step:hover{
        background:rgba(192,138,62,.04);
        transform:translateY(-3px);
    }
    .step-num{
        color:var(--gold-light);
        font-size:1.7rem;
        font-weight:800;
        line-height:1;
    }
    .process-step b{
        display:block;
        margin:.7rem 0 .25rem;
        color:var(--primary-dark);
        font-size:1.02rem;
    }
    .process-step p{margin:0;color:var(--text-sub);font-size:.85rem;line-height:1.7}
    @media(max-width:1023.98px){.process-strip{grid-template-columns:repeat(2,1fr)}}
    @media(max-width:767.98px){.feature-grid{grid-template-columns:1fr}.process-strip{grid-template-columns:1fr}}

    /* 横向图文 */
    .split-card{
        display:grid;
        grid-template-columns:1fr 1fr;
        background:#0D3B36;
        border-radius:24px;
        overflow:hidden;
        color:#fff;
    }
    .split-image img{width:100%;height:100%;object-fit:cover;min-height:320px}
    .split-copy{padding:clamp(1.5rem,4vw,3rem)}
    .split-copy h2{color:#fff;font-size:clamp(1.6rem,3vw,2.2rem);margin:.5rem 0 1rem;line-height:1.3}
    .split-copy p{color:#C7D6CF;line-height:1.8;margin-bottom:1rem}
    .split-points{display:flex;flex-direction:column;gap:.7rem;margin:1.2rem 0 1.8rem}
    .split-points div{display:flex;align-items:flex-start;gap:.7rem;color:#F2EFE8}
    .split-points svg{flex-shrink:0;margin-top:.15rem;color:var(--gold-light)}
    @media(max-width:900px){.split-card{grid-template-columns:1fr}.split-image{min-height:240px}.split-image img{min-height:240px}}

    /* 内容动态区 */
    .article-feed{
        display:flex;
        flex-direction:column;
        gap:1.05rem;
        margin-top:1.8rem;
    }
    .article-row{
        display:grid;
        grid-template-columns:176px 1fr auto;
        gap:1.4rem;
        background:#fff;
        border:1px solid var(--border-color);
        border-radius:var(--radius-card);
        padding:.9rem 1rem;
        box-shadow:var(--shadow-sm);
        align-items:center;
        transition:transform .2s ease,box-shadow .3s,border-color .2s;
    }
    .article-thumb{
        width:176px;
        height:112px;
        border-radius:11px;
        overflow:hidden;
        display:block;
        background:#E8E2D7;
    }
    .article-thumb svg{
        background:linear-gradient(135deg,rgba(29,94,85,.1),rgba(192,138,62,.12));
        width:100%;height:100%;padding:1.4rem;
        color:var(--primary);
    }
    .article-row h3{
        font-size:1.02rem;
        line-height:1.5;
        margin:0 0 .45rem;
        color:var(--text-strong);
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
        font-weight:700;
    }
    .article-row p{
        margin:0;
        color:var(--text-sub);
        font-size:.86rem;
        line-height:1.65;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
    }
    .article-meta{
        display:flex;
        align-items:center;
        gap:.7rem;
        margin-top:.45rem;
        font-size:.78rem;
        color:var(--text-light);
    }
    .article-meta time::before{
        content:"\2022";
        margin-right:.6rem;
        color:var(--gold-light);
    }
    .article-more{
        text-align:center;
        margin-top:1.6rem;
    }
    @media(max-width:767.98px){
        .article-row{grid-template-columns:1fr;padding:1rem}
        .article-thumb{width:100%;height:auto;max-height:170px}
        .article-align-right{margin-top:.4rem}
    }
    .empty-state{
        display:flex;
        align-items:center;
        gap:.8rem;
        background:rgba(246,244,239,.5);
        border:1px dashed var(--gold-light);
        border-radius:14px;
        padding:1rem 1.1rem;
        color:var(--text-sub);
    }

    /* 评价轮播 */
    .testimonial-shell{
        background:var(--primary-dark);
        background-image:linear-gradient(120deg,rgba(192,138,62,.08),transparent 42%);
        color:#fff;
        border-radius:24px;
        padding:clamp(1.5rem,4.4vw,3.2rem);
        position:relative;
        overflow:hidden;
    }
    .testimonial-shell .light-line{
        position:absolute;
        left:16%;right:16%;
        height:1px;
        top:0;
        background:linear-gradient(90deg,transparent,var(--gold-light),transparent);
    }
    .testimonial-viewport{overflow:hidden}
    .testimonial-track{
        display:flex;
        transition:transform .55s ease;
    }
    .testimonial-slide{
        flex:0 0 100%;
        padding:.5rem .5rem 1rem;
        max-width:100%;
        box-sizing:border-box;
    }
    .testimonial-content{
        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center;
    }
    .testimonial-slide .quote-svg{
        color:var(--gold-light);
        opacity:.55;
        width:34px;height:34px;
        display:block;
        margin:0 auto .8rem;
    }
    .testimonial-slide blockquote{
        max-width:760px;
        margin:0 auto;
        font-size:1rem;
        line-height:2;
        color:#D9E2DD;
        min-height:84px;
    }
    .testimonial-person{
        display:flex;
        align-items:center;
        gap:.9rem;
        margin-top:1.4rem;
    }
    .testimonial-avatar{
        width:44px;
        height:44px;
        border-radius:50%;
        background:var(--gold-light);
        display:flex;
        align-items:center;
        justify-content:center;
        color:var(--primary-dark);
        font-weight:800;
    }
    .testimonial-person b{display:block;text-align:left;color:#fff;font-size:.92rem}
    .testimonial-person span{display:block;text-align:left;color:#9BB3A9;font-size:.78rem}
    .testimonial-controls{
        display:flex;
        justify-content:center;
        align-items:center;
        gap:1.2rem;
        margin-top:1rem;
        padding-top:1rem;
        border-top:1px solid rgba(255,255,255,.1);
    }
    .testimonial-dots{display:flex;gap:.6rem;align-items:center}
    .dot-btn{
        width:22px;height:4px;
        border-radius:99px;
        border:0;
        background:rgba(255,255,255,.3);
        cursor:pointer;
        transition:background .3s,width .3s;
    }
    .dot-btn.active{width:36px;background:var(--accent)}
    .slide-btn{
        width:38px;height:38px;
        border-radius:50%;
        border:1px solid rgba(255,255,255,.45);
        background:transparent;
        color:#fff;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        cursor:pointer;
        transition:all .25s;
    }
    .slide-btn:hover{background:var(--accent);border-color:var(--accent);color:var(--primary-dark)}
    .slide-btn:focus-visible{outline:3px solid rgba(255,255,255,.5);outline-offset:2px}

    /* 保障条 */
    .guarantee-wrapper{
        background:#fff;
        border:1px solid var(--border-color);
        border-radius:18px;
        padding:1.6rem 1.2rem;
        display:grid;
        grid-template-columns:repeat(4,1fr);
        gap:1.2rem;
        box-shadow:var(--shadow-sm);
    }
    .guarantee-item{
        display:flex;
        align-items:center;
        gap:.7rem;
        padding:0 .5rem;
    }
    .guarantee-item svg{
        color:var(--accent);
        flex-shrink:0;
    }
    .guarantee-item b{color:var(--primary-dark);font-size:.98rem;white-space:nowrap}
    .guarantee-item span{display:block;color:var(--text-light);font-size:.78rem;margin-top:.1rem}
    @media(max-width:1023.98px){.guarantee-wrapper{grid-template-columns:repeat(2,1fr)}}
    @media(max-width:767.98px){.guarantee-wrapper{grid-template-columns:1fr}.guarantee-item{padding:0}}

    /* FAQ */
    .faq-wrap{max-width:820px;margin:1.8rem auto 0;background:#fff;border:1px solid var(--border-color);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-sm)}
    .faq-item{border-bottom:1px solid var(--border-color);padding:0 1.5rem}
    .faq-item:last-child{border-bottom:0}
    .faq-summary{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:1rem;
        padding:1.15rem 0;
        cursor:pointer;
        color:var(--text-strong);
        font-weight:700;
        font-size:.98rem;
        line-height:1.5;
        background:none;
        border:0;
        width:100%;
        text-align:left;
    }
    .faq-summary:hover{color:var(--primary)}
    .faq-item.active .faq-summary{color:var(--primary)}
    .faq-icon{
        width:24px;height:24px;
        flex-shrink:0;
        color:var(--accent);
        transition:transform .3s;
    }
    .faq-item.active .faq-icon{transform:rotate(45deg)}
    .faq-content{
        max-width:100%;
        color:var(--text-sub);
        font-size:.9rem;
        line-height:1.9;
        padding-bottom:1.2rem;
        display:none;
    }
    @media(max-width:767.98px){.faq-wrap{padding:0}.faq-item{padding:0 1rem}}

    /* 双色CTA */
    .cta-panel{
        background:var(--primary-dark);
        background-image:linear-gradient(130deg,rgba(192,138,62,.12),transparent 44%),url('/assets/images/backpic/back-3.png');
        background-size:cover;
        background-position:center;
        border-radius:24px;
        color:#fff;
        padding:clamp(1.8rem,5vw,3.6rem);
        position:relative;
        overflow:hidden;
        box-shadow:var(--shadow-lg);
    }
    .cta-panel::before{
        content:"";
        position:absolute;
        left:0;top:0;bottom:0;width:140px;
        background:linear-gradient(90deg,rgba(192,138,62,.14),transparent);
    }
    .cta-grid{
        display:grid;
        grid-template-columns:1.4fr 1fr;
        gap:2rem;
        align-items:center;
        position:relative;
        z-index:1;
    }
    .cta-title{color:#fff;font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;line-height:1.35;margin-bottom:.8rem}
    .cta-text{color:#C7D8D1;font-size:.95rem;line-height:1.85;margin-bottom:1.4rem}
    .cta-actions{display:flex;flex-wrap:wrap;gap:1rem}
    .btn-gold{background:var(--accent);color:#fff}
    .btn-gold:hover{background:#AA7532;transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.15)}
    .btn-outline-light{border-color:rgba(255,255,255,.7);color:#fff;background:transparent}
    .btn-outline-light:hover{background:rgba(255,255,255,.12);border-color:#fff}
    @media(max-width:900px){.cta-grid{grid-template-columns:1fr}.cta-actions .btn{width:100%}}

    /* footer */
    .site-footer{
        background:var(--primary-dark);
        color:#D8E0D8;
        margin-top:5rem;
        padding:3.4rem 0 0;
    }
    .footer-grid{
        display:grid;
        grid-template-columns:1.5fr 1fr .9fr 1.2fr;
        gap:2rem;
        padding-bottom:2.2rem;
        border-bottom:1px solid rgba(255,255,255,.1);
    }
    .footer-brand .logo-text{
        font-size:1.28rem;
        font-weight:800;
        color:#fff;
        margin-top:1rem;
        margin-bottom:.4rem;
        display:block;
    }
    .footer-brand p{
        color:#9CB6AB;
        font-size:.88rem;
        line-height:1.9;
        max-width:300px;
    }
    .footer-col h4{
        color:#fff;
        font-size:.92rem;
        letter-spacing:.06em;
        margin-bottom:1rem;
        font-weight:700;
    }
    .footer-col ul{
        list-style:none;
        padding:0;
        margin:0;
        display:flex;
        flex-direction:column;
        gap:.25rem;
    }
    .footer-col a{
        display:inline-flex;
        gap:.4rem;
        font-size:.9rem;
        color:var(--text-light);
        background:transparent;
        padding:.28rem 0;
        border-bottom:1px solid transparent;
        transition:color .2s,border-color .2s;
        color:#B9C9C1;
    }
    .footer-col a:hover{color:#fff;border-bottom-color:var(--accent)}
    .footer-contact li{
        padding:.25rem 0;
        list-style:none;
        font-size:.9rem;
        color:#C6D4CD;
    }
    .footer-contact svg{
        color:var(--accent);
        margin-right:.3rem;
        vertical-align:-2px;
    }
    .copyright{
        padding:1.4rem 0 1.5rem;
        font-size:.8rem;
        color:rgba(230,238,233,.65);
        display:flex;
        justify-content:space-between;
        gap:1rem;
        flex-wrap:wrap;
    }
    @media(max-width:979px){.footer-grid{grid-template-columns:1fr 1fr}.copyright{flex-direction:column}}
    @media(max-width:600px){.footer-grid{grid-template-columns:1fr;gap:1.4rem}.footer-page{font-size:.75rem}}

/* roulang page: article */
:root {
            --bg: #F6F4EF;
            --card: #FFFFFF;
            --primary: #1D5E55;
            --primary-dark: #0D3B36;
            --accent: #C08A3E;
            --accent-light: #E7CDA0;
            --text: #1D2A28;
            --text-second: #5E6F6B;
            --text-muted: #8A9692;
            --border: #E5E0D6;
            --radius: 16px;
            --radius-sm: 8px;
            --shadow: 0 2px 12px rgba(20, 45, 42, .06);
            --shadow-hover: 0 10px 24px rgba(20, 45, 42, .10);
            --container: 1200px;
        }

        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }
        html {
            scroll-behavior: smooth;
        }
        body {
            margin: 0;
            font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif;
            background: var(--bg);
            color: var(--text);
            font-size: 16px;
            line-height: 1.8;
            -webkit-font-smoothing: antialiased;
        }
        .site-container {
            max-width: var(--container);
            margin: 0 auto;
            padding: 0 24px;
        }
        img {
            max-width: 100%;
            display: block;
        }
        a {
            color: inherit;
            text-decoration: none;
        }
        button,
        input {
            font-family: inherit;
        }
        button:focus-visible,
        a:focus-visible,
        input:focus-visible {
            outline: 3px solid rgba(29, 94, 85, .3);
            outline-offset: 2px;
        }
        .skip-link {
            position: absolute;
            left: -999px;
            top: 0;
            z-index: 50;
            background: var(--primary-dark);
            color: #fff;
            padding: 8px 16px;
            border-radius: 0 0 8px 0;
        }
        .skip-link:focus {
            left: 0;
        }

        /* ===== Header ===== */
        .top-info {
            background: var(--primary-dark);
            color: rgba(255, 255, 255, .85);
            font-size: 13px;
            letter-spacing: .02em;
        }
        .top-info .site-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            min-height: 36px;
            gap: 16px;
        }
        .top-info-desc {
            color: rgba(255, 255, 255, .6);
        }

        .main-header {
            background: rgba(246, 244, 239, .92);
            border-bottom: 1px solid rgba(229, 224, 214, .7);
            backdrop-filter: blur(8px);
            position: sticky;
            top: 0;
            z-index: 30;
        }
        .nav-bar {
            display: flex;
            align-items: center;
            gap: 22px;
            min-height: 72px;
            flex-wrap: wrap;
        }
        .brand-logo {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            color: var(--primary-dark);
            font-weight: 700;
            font-size: 20px;
            letter-spacing: .02em;
            flex-shrink: 0;
        }
        .brand-logo svg {
            color: var(--accent);
        }
        .brand-sub {
            display: block;
            font-size: 12px;
            font-weight: 400;
            color: var(--text-muted);
            letter-spacing: .06em;
            line-height: 1.2;
        }
        .nav-search {
            flex: 1;
            max-width: 470px;
            margin-left: auto;
            display: flex;
            align-items: center;
            background: #fff;
            border: 1px solid #E0DCD2;
            border-radius: 999px;
            padding: 0 8px 0 18px;
            height: 46px;
            transition: border-color .2s, box-shadow .2s;
            min-width: 220px;
        }
        .nav-search:focus-within {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(29, 94, 85, .14);
        }
        .nav-search svg {
            width: 18px;
            height: 18px;
            color: var(--text-muted);
            flex-shrink: 0;
        }
        .nav-search input {
            border: 0;
            background: transparent;
            flex: 1;
            padding: 0 12px;
            font-size: 14px;
            color: var(--text);
            min-width: 0;
            outline: none;
        }
        .nav-search button {
            border: 0;
            background: var(--primary);
            color: #fff;
            height: 34px;
            padding: 0 18px;
            border-radius: 999px;
            font-size: 14px;
            cursor: pointer;
            transition: background .2s, transform .2s;
            white-space: nowrap;
        }
        .nav-search button:hover {
            background: var(--primary-dark);
        }
        .desktop-nav {
            margin-left: 8px;
        }
        .nav-primary {
            display: flex;
            align-items: center;
            gap: 6px;
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .nav-primary a {
            position: relative;
            display: inline-block;
            padding: 8px 12px;
            color: var(--text-second);
            font-size: 15px;
            font-weight: 500;
            border-radius: 8px;
            transition: color .2s, background .2s;
        }
        .nav-primary a::after {
            content: "";
            position: absolute;
            left: 12px;
            right: 12px;
            bottom: 2px;
            height: 2px;
            background: var(--accent);
            border-radius: 2px;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .22s ease;
        }
        .nav-primary a:hover {
            color: var(--primary);
            background: rgba(29, 94, 85, .05);
        }
        .nav-primary a:hover::after,
        .nav-primary a.active-nav::after {
            transform: scaleX(1);
        }
        .nav-primary a.active-nav {
            color: var(--primary-dark);
            font-weight: 600;
        }
        .mobile-menu-toggle {
            display: none;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 12px;
            color: var(--primary);
            cursor: pointer;
            transition: background .2s, border-color .2s;
            margin-left: auto;
        }
        .mobile-menu-toggle:hover {
            background: var(--primary);
            border-color: var(--primary);
            color: #fff;
        }
        .mobile-menu-panel {
            display: none;
            background: #fff;
            border-top: 1px solid var(--border);
            padding: 8px 24px 26px;
            box-shadow: var(--shadow);
        }
        .mobile-menu-panel.open {
            display: block;
            animation: menuFade .18s ease;
        }
        .mobile-menu-panel a {
            display: block;
            padding: 14px 12px;
            border-radius: 10px;
            font-weight: 500;
            color: var(--text);
            border-bottom: 1px solid #f2efe8;
        }
        .mobile-menu-panel a:hover {
            background: #f4f1ea;
            color: var(--primary);
        }
        .mobile-menu-panel a:last-child {
            border-bottom: 0;
        }
        @keyframes menuFade {
            from {
                opacity: .6;
                transform: translateY(-4px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* ===== Article ===== */
        .article-page {
            padding: 40px 0 0;
        }
        .article-breadcrumb {
            font-size: 14px;
            color: var(--text-muted);
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
            margin-bottom: 26px;
        }
        .article-breadcrumb a {
            color: var(--text-second);
            transition: color .2s;
        }
        .article-breadcrumb a:hover {
            color: var(--primary);
        }
        .article-breadcrumb .crumb-current {
            color: var(--accent);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 300px;
        }
        .article-sheet {
            max-width: 800px;
            margin: 0 auto;
            background: #fff;
            border: 1px solid #eee9df;
            border-radius: 20px;
            box-shadow: var(--shadow);
            padding: clamp(28px, 5vw, 64px);
        }
        .article-head .category-tag {
            display: inline-block;
            background: rgba(192, 138, 62, .12);
            border: 1px solid var(--accent-light);
            color: #9d6f29;
            font-size: 13px;
            font-weight: 600;
            padding: 3px 12px;
            border-radius: 6px;
            margin-bottom: 14px;
            letter-spacing: .03em;
        }
        .article-head h1 {
            font-size: clamp(28px, 4vw, 38px);
            line-height: 1.32;
            font-weight: 700;
            color: var(--primary-dark);
            margin: 0 0 18px;
            letter-spacing: -.01em;
        }
        .article-meta {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px 20px;
            color: var(--text-muted);
            font-size: 14px;
            margin-bottom: 32px;
            padding-bottom: 22px;
            border-bottom: 1px solid var(--border);
        }
        .article-meta .meta-item {
            display: inline-flex;
            align-items: center;
            gap: 7px;
        }
        .article-meta svg {
            width: 16px;
            height: 16px;
            color: var(--accent);
        }
        .article-meta span {
            color: var(--text-second);
        }
        .article-source {
            color: var(--text-muted);
        }

        .post-content {
            color: #263431;
        }
        .post-content p {
            font-size: 16px;
            line-height: 1.95;
            margin: 0 0 1.3em;
        }
        .post-content h2,
        .post-content h3,
        .post-content h4 {
            color: var(--primary-dark);
            margin: 1.6em 0 .7em;
            line-height: 1.45;
        }
        .post-content h2 {
            font-size: 26px;
            border-left: 4px solid var(--accent);
            padding-left: 14px;
        }
        .post-content h3 {
            font-size: 21px;
        }
        .post-content img {
            border-radius: 16px;
            margin: 30px auto;
            max-width: 100%;
            height: auto;
        }
        .post-content blockquote {
            margin: 28px 0;
            padding: 18px 26px;
            background: #f8f5ef;
            border-left: 4px solid var(--primary);
            border-radius: 0 12px 12px 0;
            color: var(--text-second);
            font-style: italic;
            font-size: 15px;
        }
        .post-content blockquote p:last-child {
            margin-bottom: 0;
        }
        .post-content ul,
        .post-content ol {
            padding-left: 24px;
            margin: 0 0 1.4em;
        }
        .post-content li {
            font-size: 16px;
            line-height: 1.95;
            margin-bottom: 6px;
        }
        .post-content a {
            color: var(--primary);
            font-weight: 600;
            text-decoration: underline;
            text-underline-offset: 3px;
            text-decoration-color: var(--accent-light);
            transition: color .2s, text-decoration-color .2s;
        }
        .post-content a:hover {
            color: var(--accent);
            text-decoration-color: var(--accent);
        }
        .post-content code {
            background: #f0ede5;
            padding: 2px 8px;
            border-radius: 6px;
            font-size: .9em;
        }
        .post-content hr {
            border: 0;
            border-top: 1px solid var(--border);
            margin: 36px 0;
        }
        .post-content table {
            width: 100%;
            border-collapse: collapse;
            margin: 0 0 24px;
            font-size: 14px;
        }
        .post-content table th,
        .post-content table td {
            border: 1px solid var(--border);
            padding: 10px 14px;
            text-align: left;
        }
        .post-content table th {
            background: #faf8f3;
            color: var(--primary-dark);
        }

        .article-end-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            align-items: center;
            margin-top: 48px;
            padding-top: 28px;
            border-top: 1px solid var(--border);
        }
        .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            height: 46px;
            padding: 0 22px;
            border-radius: 10px;
            font-size: 15px;
            font-weight: 600;
            transition: all .22s ease;
            cursor: pointer;
            border: 1px solid transparent;
        }
        .btn svg {
            transition: transform .2s;
        }
        .btn-primary {
            background: var(--primary);
            color: #fff;
        }
        .btn-primary:hover {
            background: var(--primary-dark);
            color: #fff;
            transform: translateY(-2px);
            box-shadow: var(--shadow-hover);
        }
        .btn-primary:hover svg {
            transform: translateX(4px);
        }
        .btn-outline {
            background: transparent;
            color: var(--primary);
            border-color: var(--primary);
            position: relative;
        }
        .btn-outline:hover {
            color: var(--accent);
            border-color: var(--accent);
            transform: translateY(-2px);
        }
        .btn-text {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: var(--accent);
            font-size: 15px;
            font-weight: 600;
        }
        .btn-text:hover {
            color: var(--primary-dark);
        }

        /* ===== Empty state ===== */
        .not-found-box {
            max-width: 800px;
            margin: 40px auto 90px;
            background: #fff;
            border: 1px solid #f0e6d6;
            border-radius: 20px;
            text-align: center;
            padding: 70px 30px;
            box-shadow: var(--shadow);
        }
        .not-found-icon {
            width: 64px;
            height: 64px;
            margin: 0 auto 18px;
            border-radius: 18px;
            background: rgba(29, 94, 85, .08);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
        }
        .not-found-box h1 {
            font-size: 24px;
            color: var(--primary-dark);
            margin: 0 0 10px;
        }
        .not-found-box p {
            color: var(--text-second);
            margin: 0 0 28px;
        }

        /* ===== Related ===== */
        .related-section {
            padding: 78px 0 92px;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .6) 100%);
        }
        .related-head {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 30px;
        }
        .related-head .en-label {
            font-size: 13px;
            color: var(--accent);
            letter-spacing: .18em;
            text-transform: uppercase;
            font-weight: 600;
        }
        .related-head h2 {
            font-size: 30px;
            color: var(--primary-dark);
            margin: 2px 0 0;
            font-weight: 700;
        }
        .related-head .rel-arrow {
            color: var(--text-muted);
            font-size: 14px;
        }
        .related-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
        }
        .related-card {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            overflow: hidden;
            transition: transform .24s, box-shadow .24s, border-color .24s;
            display: flex;
            flex-direction: column;
        }
        .related-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-hover);
            border-color: #ddd3c1;
        }
        .related-card .thumb-box {
            aspect-ratio: 4 / 3;
            overflow: hidden;
            background: #e8e3d9;
        }
        .related-card .thumb-box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .35s;
        }
        .related-card:hover .thumb-box img {
            transform: scale(1.04);
        }
        .related-card-body {
            padding: 22px 22px 24px;
            display: flex;
            flex-direction: column;
            flex: 1;
        }
        .related-card-body .mini-cat {
            align-self: flex-start;
            background: rgba(192, 138, 62, .1);
            color: #97702f;
            font-size: 12px;
            font-weight: 600;
            border: 1px solid var(--accent-light);
            border-radius: 4px;
            padding: 2px 10px;
            margin-bottom: 12px;
        }
        .related-card-body h3 {
            font-size: 18px;
            line-height: 1.5;
            color: var(--text);
            margin: 0 0 10px;
            font-weight: 700;
        }
        .related-card-body h3 a:hover {
            color: var(--primary);
        }
        .related-card-body p {
            font-size: 14px;
            color: var(--text-second);
            line-height: 1.75;
            margin: 0 0 20px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .related-card-foot {
            margin-top: auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            border-top: 1px solid #f0ede5;
            padding-top: 16px;
        }
        .related-card-foot .read-more {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: var(--primary);
            font-size: 14px;
            font-weight: 600;
            transition: color .2s;
        }
        .related-card-foot .read-more svg {
            transition: transform .2s;
        }
        .related-card-foot .read-more:hover {
            color: var(--accent);
        }
        .related-card-foot .read-more:hover svg {
            transform: translateX(4px);
        }
        .related-card-foot time {
            font-size: 13px;
            color: var(--text-muted);
            font-variant-numeric: tabular-nums;
        }

        /* ===== CTA ===== */
        .cta-section {
            background: var(--primary-dark);
            color: #fff;
            padding: 76px 0;
            position: relative;
            overflow: hidden;
        }
        .cta-section::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(192, 138, 62, .14), transparent 40%), radial-gradient(circle at 80% 30%, rgba(192, 138, 62, .15), transparent 45%);
            pointer-events: none;
        }
        .cta-flex {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 30px;
            flex-wrap: wrap;
        }
        .cta-copy h2 {
            font-size: clamp(24px, 3.4vw, 34px);
            margin: 0 0 8px;
            font-weight: 700;
            color: #fff;
            letter-spacing: -.01em;
        }
        .cta-copy p {
            margin: 0;
            color: rgba(255, 255, 255, .7);
            max-width: 560px;
        }
        .cta-actions {
            display: flex;
            gap: 14px;
            flex-wrap: wrap;
        }
        .btn-gold {
            background: var(--accent);
            color: #fff;
        }
        .btn-gold:hover {
            background: #a97529;
            box-shadow: 0 8px 22px rgba(192, 138, 62, .24);
            transform: translateY(-2px);
        }
        .btn-white-outline {
            background: transparent;
            border: 1px solid rgba(255, 255, 255, .6);
            color: #fff;
        }
        .btn-white-outline:hover {
            border-color: #fff;
            background: rgba(255, 255, 255, .06);
        }

        /* ===== Footer ===== */
        .site-footer {
            background: #0b2f2b;
            color: rgba(255, 255, 255, .7);
            border-top: 3px solid var(--accent);
        }
        .footer-top {
            padding: 64px 0 30px;
        }
        .footer-grid {
            display: grid;
            grid-template-columns: 1.4fr .8fr .9fr 1.2fr;
            gap: 40px;
        }
        .footer-brand .brand-logo {
            color: #fff;
            margin-bottom: 14px;
        }
        .footer-brand .brand-logo .brand-sub {
            color: rgba(255, 255, 255, .45);
        }
        .footer-brand p {
            font-size: 14px;
            line-height: 1.85;
            margin: 0;
            max-width: 330px;
            color: rgba(255, 255, 255, .6);
        }
        .footer-col h4 {
            color: #fff;
            font-size: 16px;
            margin: 0 0 18px;
            font-weight: 600;
            letter-spacing: .02em;
        }
        .footer-col ul,
        .footer-contact ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .footer-col li {
            margin-bottom: 12px;
        }
        .footer-col a {
            color: rgba(255, 255, 255, .62);
            font-size: 14px;
            transition: color .2s, padding-left .2s;
        }
        .footer-col a:hover {
            color: var(--accent);
            padding-left: 3px;
        }
        .footer-contact li {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
            margin-bottom: 14px;
            color: rgba(255, 255, 255, .62);
        }
        .footer-contact li svg {
            color: var(--accent);
            flex-shrink: 0;
        }
        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, .12);
            padding: 22px 0;
            font-size: 13px;
            color: rgba(255, 255, 255, .4);
        }
        .footer-bottom .site-container {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
        }
        .footer-bottom a {
            color: rgba(255, 255, 255, .45);
            transition: color .2s;
        }
        .footer-bottom a:hover {
            color: var(--accent);
        }

        /* ===== Responsive ===== */
        @media (max-width: 1024px) {
            .nav-search {
                max-width: 340px;
            }
            .desktop-nav {
                display: none;
            }
            .mobile-menu-toggle {
                display: inline-flex;
            }
            .nav-bar {
                flex-wrap: wrap;
                padding: 10px 0;
                gap: 10px;
            }
            .nav-search {
                order: 3;
                flex-basis: 100%;
                max-width: 100%;
                margin-left: 0;
                height: 44px;
            }
            .mobile-menu-panel {
                width: 100%;
            }
            .related-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .footer-grid {
                grid-template-columns: 1fr 1fr;
            }
        }
        @media (max-width: 640px) {
            .site-container {
                padding: 0 18px;
            }
            .top-info {
                display: none;
            }
            .main-header {
                position: relative;
            }
            .brand-logo {
                font-size: 18px;
            }
            .brand-logo svg {
                width: 30px;
                height: 30px;
            }
            .nav-search {
                height: 44px;
            }
            .article-sheet {
                padding: 28px 20px;
                border-radius: 16px;
            }
            .article-breadcrumb {
                font-size: 13px;
            }
            .article-head h1 {
                font-size: 27px;
            }
            .related-grid {
                grid-template-columns: 1fr;
            }
            .cta-section {
                padding: 52px 0;
            }
            .cta-actions,
            .btn {
                width: 100%;
                justify-content: center;
            }
            .footer-grid {
                grid-template-columns: 1fr;
                gap: 30px;
            }
            .footer-top {
                padding: 48px 0 24px;
            }
            .footer-bottom .site-container {
                flex-direction: column;
                text-align: center;
            }
        }
        @media (max-width: 420px) {
            .article-meta {
                gap: 8px 14px;
                font-size: 13px;
            }
            .article-end-actions {
                flex-direction: column;
                align-items: stretch;
            }
            .article-end-actions .btn {
                width: 100%;
                justify-content: center;
            }
        }

/* roulang page: category1 */
:root {
            --bg-body: #F6F4EF;
            --bg-card: #FFFFFF;
            --primary: #1D5E55;
            --primary-dark: #0D3B36;
            --accent: #C08A3E;
            --accent-light: #E7CDA0;
            --text-main: #1D2A28;
            --text-muted: #5E6F6B;
            --text-light: #8A9692;
            --line: #E5E0D6;
            --radius-card: 16px;
            --radius-small: 6px;
            --radius-btn: 10px;
            --shadow-sm: 0 2px 12px rgba(20, 45, 42, 0.06);
            --shadow-lg: 0 10px 24px rgba(20, 45, 42, 0.10);
        }
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        html {
            scroll-behavior: smooth;
        }
        body {
            font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif;
            background: var(--bg-body);
            color: var(--text-main);
            font-size: 15.5px;
            line-height: 1.8;
            -webkit-font-smoothing: antialiased;
        }
        img {
            max-width: 100%;
            display: block;
        }
        a {
            color: inherit;
            text-decoration: none;
        }
        button {
            font-family: inherit;
            cursor: pointer;
            border: none;
        }
        input {
            font-family: inherit;
        }
        .site-container {
            width: min(1220px, calc(100% - 48px));
            margin: 0 auto;
        }
        .top-info {
            background: var(--primary-dark);
            color: rgba(255, 255, 255, 0.78);
            font-size: 13px;
            line-height: 20px;
        }
        .top-info .site-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: 36px;
            gap: 12px;
            flex-wrap: wrap;
        }
        .top-info-desc {
            color: rgba(255, 255, 255, 0.55);
        }
        .main-header {
            background: var(--bg-body);
            border-bottom: 1px solid rgba(231, 205, 160, 0.5);
            position: sticky;
            top: 0;
            z-index: 50;
        }
        .nav-bar {
            display: flex;
            align-items: center;
            gap: 20px;
            padding: 14px 0;
            min-height: 82px;
        }
        .brand-logo {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            color: var(--primary);
            font-size: 21px;
            font-weight: 700;
            line-height: 1.2;
            letter-spacing: .01em;
            flex-shrink: 0;
        }
        .brand-logo svg {
            flex-shrink: 0;
        }
        .brand-sub {
            display: block;
            font-size: 11.5px;
            font-weight: 400;
            letter-spacing: .12em;
            color: var(--text-muted);
            margin-top: 2px;
        }
        .nav-search {
            flex: 1 1 auto;
            max-width: 520px;
            margin-left: 8px;
            margin-right: 8px;
            display: flex;
            align-items: center;
            background: #fff;
            border: 1px solid #E0DCD2;
            border-radius: 999px;
            padding: 0 6px 0 16px;
            height: 48px;
            transition: border-color .25s ease, box-shadow .25s ease;
            min-width: 120px;
        }
        .nav-search:focus-within {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(29, 94, 85, .14);
        }
        .nav-search svg {
            width: 20px;
            height: 20px;
            color: var(--text-light);
            margin-right: 10px;
            flex-shrink: 0;
        }
        .nav-search input {
            border: none;
            outline: none;
            background: transparent;
            flex: 1;
            min-width: 0;
            font-size: 15px;
            color: var(--text-main);
        }
        .nav-search input::placeholder {
            color: #A9B0AD;
        }
        .nav-search button {
            background: var(--primary);
            color: #fff;
            font-size: 14px;
            border-radius: 999px;
            height: 36px;
            padding: 0 18px;
            font-weight: 500;
            transition: background .25s ease, transform .25s ease;
        }
        .nav-search button:hover {
            background: var(--primary-dark);
        }
        .nav-search button:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }
        .desktop-nav {
            margin-left: auto;
            flex-shrink: 0;
        }
        .nav-primary {
            list-style: none;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .nav-primary a {
            display: inline-block;
            padding: 8px 13px;
            font-size: 15px;
            font-weight: 500;
            color: var(--text-main);
            border-radius: 999px;
            transition: color .25s ease, background .25s ease;
            position: relative;
        }
        .nav-primary a:hover {
            color: var(--primary);
            background: rgba(29, 94, 85, .06);
        }
        .nav-primary a:focus-visible {
            outline: 2px solid var(--primary);
            outline-offset: 2px;
        }
        .nav-primary .active-nav {
            color: var(--primary);
            font-weight: 600;
        }
        .nav-primary .active-nav::after {
            content: "";
            position: absolute;
            left: 14px;
            right: 14px;
            bottom: 3px;
            height: 2px;
            border-radius: 999px;
            background: var(--accent);
        }
        .mobile-menu-toggle {
            display: none;
            width: 44px;
            height: 44px;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            color: var(--primary);
            background: transparent;
            margin-left: auto;
        }
        .mobile-menu-toggle:hover {
            background: rgba(29, 94, 85, .08);
        }
        .mobile-menu-toggle:focus-visible {
            outline: 2px solid var(--primary);
            outline-offset: 2px;
        }
        .mobile-nav {
            display: none;
        }
        .mobile-nav-list {
            list-style: none;
            padding: 12px 0 22px;
            border-top: 1px solid var(--line);
        }
        .mobile-nav-list a {
            display: block;
            padding: 13px 4px;
            font-size: 16px;
            font-weight: 500;
            border-bottom: 1px solid rgba(229, 224, 214, .7);
        }
        .mobile-nav-list a:active {
            color: var(--primary);
        }
        @media (max-width: 1023px) {
            .nav-bar {
                flex-wrap: wrap;
                min-height: 0;
                padding: 12px 0 14px;
            }
            .brand-logo {
                order: 1;
            }
            .mobile-menu-toggle {
                order: 2;
                display: inline-flex;
            }
            .nav-search {
                order: 3;
                flex: 1 1 100%;
                max-width: none;
                margin: 10px 0 0;
                height: 46px;
            }
            .desktop-nav {
                display: none;
            }
            .mobile-nav.open {
                display: block;
            }
            .site-container {
                width: min(1220px, calc(100% - 32px));
            }
        }
        .category-hero {
            background:
                linear-gradient(105deg, rgba(10, 47, 43, .96) 0%, rgba(13, 59, 54, .86) 50%, rgba(29, 94, 85, .68) 100%),
                url('/assets/images/backpic/back-1.webp') center center / cover no-repeat;
            color: #fff;
            padding: 76px 0 86px;
            position: relative;
            overflow: hidden;
        }
        .category-hero .hero-line {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border: 1px solid rgba(231, 205, 160, .45);
            background: rgba(255, 255, 255, .05);
            color: #f1e4ce;
            border-radius: 999px;
            padding: 5px 14px;
            font-size: 13px;
            letter-spacing: .04em;
        }
        .category-hero h1 {
            max-width: 780px;
            margin: 22px 0 16px;
            font-size: clamp(30px, 4.2vw, 46px);
            line-height: 1.28;
            font-weight: 700;
            letter-spacing: -0.01em;
        }
        .category-hero h1 .gold {
            color: #edcf9c;
        }
        .category-hero .hero-lead {
            max-width: 720px;
            font-size: 16.5px;
            line-height: 1.9;
            color: rgba(255, 255, 255, .86);
            margin-bottom: 28px;
        }
        .hero-breadcrumb {
            display: flex;
            align-items: center;
            gap: 8px;
            color: rgba(255, 255, 255, .66);
            font-size: 13.5px;
            margin-bottom: 34px;
        }
        .hero-breadcrumb a {
            color: rgba(255, 255, 255, .9);
            transition: color .2s ease;
        }
        .hero-breadcrumb a:hover {
            color: #f2ddb3;
        }
        .btn-group {
            display: flex;
            align-items: center;
            gap: 14px;
            flex-wrap: wrap;
        }
        .btn-primary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            background: var(--primary);
            color: #fff;
            border-radius: var(--radius-btn);
            padding: 13px 28px;
            font-size: 15px;
            font-weight: 600;
            border: 1px solid var(--primary);
            transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
            box-shadow: var(--shadow-sm);
        }
        .btn-primary svg {
            transition: transform .25s ease;
        }
        .btn-primary:hover {
            background: var(--primary-dark);
            color: #fff;
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }
        .btn-primary:hover svg {
            transform: translateX(3px);
        }
        .btn-primary:focus-visible {
            outline: 3px solid rgba(231, 205, 160, .8);
            outline-offset: 2px;
        }
        .btn-ghost-light {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: transparent;
            color: #fff;
            border: 1px solid rgba(255, 255, 255, .55);
            border-radius: var(--radius-btn);
            padding: 13px 26px;
            font-size: 15px;
            font-weight: 500;
            transition: border-color .25s ease, background .25s ease, color .25s ease;
        }
        .btn-ghost-light:hover {
            border-color: var(--accent);
            background: rgba(192, 138, 62, .12);
            color: #f8ecd7;
        }
        .btn-ghost-light:focus-visible {
            outline: 3px solid rgba(255, 255, 255, .35);
            outline-offset: 2px;
        }
        .section-block {
            padding: 80px 0;
        }
        .section-intro {
            max-width: 820px;
            margin: 0 auto 48px;
            text-align: center;
        }
        .section-intro h2 {
            font-size: 30px;
            font-weight: 700;
            line-height: 1.35;
            color: var(--primary-dark);
            margin-bottom: 12px;
        }
        .section-intro p {
            color: var(--text-muted);
            font-size: 16px;
        }
        .gold-rule {
            width: 44px;
            height: 4px;
            border-radius: 999px;
            background: var(--accent);
            margin: 0 auto 22px;
        }
        .intro-white-line {
            width: 44px;
            height: 3px;
            background: var(--accent);
            margin: 14px 0 0;
            border-radius: 999px;
        }
        .service-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 26px;
            margin-top: 6px;
        }
        .service-card {
            background: var(--bg-card);
            border-radius: var(--radius-card);
            overflow: hidden;
            border: 1px solid var(--line);
            box-shadow: var(--shadow-sm);
            transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
            display: flex;
            flex-direction: column;
        }
        .service-card:hover {
            box-shadow: var(--shadow-lg);
            border-color: rgba(192, 138, 62, .42);
            transform: translateY(-4px);
        }
        .service-thumb {
            aspect-ratio: 4 / 3;
            overflow: hidden;
            position: relative;
            background: #EDEBE4;
        }
        .service-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .5s ease;
        }
        .service-card:hover .service-thumb img {
            transform: scale(1.035);
        }
        .service-thumb .cat-tag {
            position: absolute;
            left: 14px;
            top: 14px;
            background: rgba(13, 59, 54, .88);
            color: #f5edd9;
            border-radius: 6px;
            padding: 3px 10px;
            font-size: 12px;
            letter-spacing: .03em;
            backdrop-filter: blur(4px);
        }
        .service-body {
            padding: 22px 22px 24px;
            display: flex;
            flex-direction: column;
            flex: 1;
        }
        .service-body h3 {
            font-size: 19px;
            font-weight: 600;
            color: var(--primary-dark);
            margin-bottom: 9px;
            line-height: 1.4;
        }
        .service-body p {
            color: var(--text-muted);
            font-size: 14.5px;
            line-height: 1.78;
            flex: 1;
        }
        .service-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-top: 18px;
            color: var(--accent);
            font-size: 14px;
            font-weight: 500;
            transition: color .25s ease, gap .25s ease;
        }
        .service-link:hover {
            color: var(--primary);
            gap: 10px;
        }
        .service-link:focus-visible {
            outline: 2px solid var(--primary);
            outline-offset: 2px;
            border-radius: 4px;
        }
        .process-block {
            background: var(--primary-dark);
            color: rgba(255, 255, 255, .85);
        }
        .process-block .section-intro h2 {
            color: #fff;
        }
        .process-block .section-intro p {
            color: rgba(255, 255, 255, .66);
        }
        .process-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-top: 10px;
        }
        .process-item {
            background: rgba(255, 255, 255, .04);
            border: 1px solid rgba(231, 205, 160, .14);
            border-radius: 14px;
            padding: 24px 20px;
            position: relative;
            transition: background .3s ease, transform .3s ease;
        }
        .process-item:hover {
            background: rgba(255, 255, 255, .07);
            transform: translateY(-3px);
        }
        .process-num {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(192, 138, 62, .18);
            border: 1px solid rgba(231, 205, 160, .42);
            color: #f1dba6;
            font-weight: 700;
            margin-bottom: 14px;
        }
        .process-item h3 {
            color: #fff;
            font-size: 17px;
            font-weight: 600;
            margin-bottom: 8px;
        }
        .process-item p {
            font-size: 13.5px;
            line-height: 1.72;
            color: rgba(255, 255, 255, .62);
        }
        .faq-block {
            padding: 84px 0 70px;
        }
        .faq-panel {
            max-width: 840px;
            margin: 0 auto;
        }
        .faq-item {
            border-bottom: 1px solid var(--line);
        }
        .faq-item summary {
            list-style: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            padding: 24px 4px;
            font-size: 17px;
            font-weight: 600;
            color: var(--text-main);
            transition: color .25s ease;
        }
        .faq-item summary::-webkit-details-marker {
            display: none;
        }
        .faq-item summary:hover,
        .faq-item summary:focus-visible {
            color: var(--primary);
            outline: none;
        }
        .faq-item summary:focus-visible {
            box-shadow: 0 0 0 2px rgba(29, 94, 85, .18);
            border-radius: 6px;
        }
        .faq-arrow {
            width: 32px;
            height: 32px;
            border: 1px solid var(--line);
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 19px;
            color: var(--accent);
            background: #fff;
            transition: transform .3s ease, background .3s ease, border-color .3s ease;
            flex-shrink: 0;
            line-height: 1;
        }
        .faq-item[open] .faq-arrow {
            transform: rotate(45deg);
            background: rgba(192, 138, 62, .1);
            border-color: var(--accent);
        }
        .faq-item[open] summary {
            color: var(--primary);
        }
        .faq-answer {
            padding: 0 38px 24px 6px;
            color: var(--text-muted);
            font-size: 14.5px;
            line-height: 1.85;
        }
        .cta-banner {
            background:
                linear-gradient(120deg, rgba(13, 59, 54, .98) 0%, rgba(29, 94, 85, .9) 60%, rgba(13, 59, 54, .92) 100%),
                url('/assets/images/backpic/back-3.png') center / cover no-repeat;
            color: #fff;
        }
        .cta-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 30px;
            padding: 70px 0;
            flex-wrap: wrap;
        }
        .cta-inner .cta-copy {
            max-width: 680px;
        }
        .cta-copy h2 {
            font-size: 28px;
            line-height: 1.4;
            margin-bottom: 10px;
        }
        .cta-copy p {
            color: rgba(255, 255, 255, .7);
            font-size: 15px;
        }
        .cta-actions {
            display: flex;
            gap: 14px;
            flex-wrap: wrap;
        }
        .btn-accent {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            background: var(--accent);
            color: #fff;
            border-radius: var(--radius-btn);
            padding: 13px 28px;
            font-size: 15px;
            font-weight: 600;
            box-shadow: var(--shadow-sm);
            transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
        }
        .btn-accent:hover {
            background: #b57b30;
            box-shadow: var(--shadow-lg);
            transform: translateY(-2px);
        }
        .btn-accent:focus-visible {
            outline: 3px solid rgba(255, 255, 255, .4);
            outline-offset: 2px;
        }
        .btn-ghost-dark {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: transparent;
            color: #fff;
            border: 1px solid rgba(255, 255, 255, .45);
            border-radius: var(--radius-btn);
            padding: 13px 26px;
            font-size: 15px;
            transition: border-color .25s ease, background .25s ease;
        }
        .btn-ghost-dark:hover {
            border-color: var(--accent);
            background: rgba(192, 138, 62, .1);
        }
        .btn-ghost-dark:focus-visible {
            outline: 3px solid rgba(255, 255, 255, .28);
            outline-offset: 2px;
        }
        .site-footer {
            background: var(--primary-dark);
            color: rgba(255, 255, 255, .68);
            padding-top: 66px;
        }
        .footer-grid {
            display: grid;
            grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
            gap: 44px;
            padding-bottom: 48px;
        }
        .footer-brand p {
            font-size: 14px;
            line-height: 1.9;
            max-width: 340px;
            margin-top: 14px;
        }
        .site-footer h4 {
            color: #fff;
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 18px;
            letter-spacing: .02em;
        }
        .site-footer ul {
            list-style: none;
            display: grid;
            gap: 10px;
        }
        .site-footer a {
            color: rgba(255, 255, 255, .62);
            font-size: 14px;
            transition: color .25s ease, padding-left .25s ease;
        }
        .site-footer a:hover {
            color: #f2d59e;
            padding-left: 4px;
        }
        .site-footer a:focus-visible {
            outline: 2px solid #f2d59e;
            outline-offset: 3px;
            border-radius: 4px;
        }
        .footer-contact li {
            display: flex;
            align-items: flex-start;
            gap: 9px;
            font-size: 14px;
            color: rgba(255, 255, 255, .64);
            margin-bottom: 12px;
        }
        .footer-contact svg {
            flex-shrink: 0;
            margin-top: 5px;
            color: var(--accent);
        }
        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, .1);
            padding: 22px 0;
            font-size: 13px;
            color: rgba(255, 255, 255, .42);
        }
        .footer-bottom .site-container {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
        }
        @media (max-width: 1023px) {
            .service-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .process-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .footer-grid {
                grid-template-columns: 1fr 1fr;
                gap: 36px 28px;
            }
        }
        @media (max-width: 767px) {
            .section-block {
                padding: 56px 0;
            }
            .category-hero {
                padding: 54px 0 64px;
            }
            .category-hero .site-container {
                width: calc(100% - 36px);
            }
            .service-grid {
                grid-template-columns: 1fr;
            }
            .service-body {
                padding: 20px 18px 22px;
            }
            .process-grid {
                grid-template-columns: 1fr;
            }
            .faq-block {
                padding: 58px 0 44px;
            }
            .cta-inner {
                flex-direction: column;
                align-items: flex-start;
                padding: 50px 0;
            }
            .cta-actions {
                width: 100%;
            }
            .btn-accent,
            .btn-ghost-dark,
            .btn-primary,
            .btn-ghost-light {
                width: 100%;
                justify-content: center;
            }
            .footer-grid {
                grid-template-columns: 1fr;
                gap: 32px;
            }
            .site-container {
                width: calc(100% - 32px);
            }
        }
        @media (max-width: 480px) {
            .top-info .site-container {
                justify-content: center;
                text-align: center;
                padding: 4px 0;
            }
            .top-info-desc {
                display: none;
            }
            .brand-logo {
                font-size: 18px;
            }
            .nav-search {
                height: 42px;
            }
            .nav-search button {
                padding: 0 14px;
            }
            .btn-group {
                width: 100%;
            }
        }

/* roulang page: category2 */
:root{
    --page-bg:#F6F4EF; --card-bg:#FFFFFF; --primary:#1D5E55; --dark:#0D3B36;
    --accent:#C08A3E; --accent-light:#E7CDA0; --text-main:#1D2A28; --text-sub:#5E6F6B;
    --text-mut:#8A9692; --line:#E5E0D6; --radius-lg:16px; --radius-md:10px; --radius-sm:6px;
    --shadow-sm:0 2px 12px rgba(20,45,42,.06); --shadow-md:0 10px 24px rgba(20,45,42,.10);
  }
  html{scroll-behavior:smooth}
  body{background:var(--page-bg);color:var(--text-main);font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",sans-serif;line-height:1.8;font-size:16px;-webkit-font-smoothing:antialiased}
  *{margin:0;padding:0;box-sizing:border-box}
  img{max-width:100%;display:block;object-fit:cover}
  a{text-decoration:none;color:inherit}
  input,button{font-family:inherit;outline:none}
  ul{list-style:none}
  .site-container{max-width:1280px;margin:0 auto;padding-left:20px;padding-right:20px}
  @media(min-width:768px){.site-container{padding-left:32px;padding-right:32px}}
  @media(min-width:1024px){.site-container{padding-left:48px;padding-right:48px}}
  :focus-visible{outline:3px solid rgba(29,94,85,.35);outline-offset:2px;border-radius:4px}
  .section-space{padding-top:64px;padding-bottom:64px}
  @media(min-width:768px){.section-space{padding-top:80px;padding-bottom:80px}}
  .eyebrow{display:inline-flex;align-items:center;gap:.35rem;font-size:13px;font-weight:600;letter-spacing:.05em;color:var(--accent);background:rgba(192,138,62,.10);border:1px solid rgba(192,138,62,.25);padding:.25rem .8rem;border-radius:999px;margin-bottom:1.1rem}
  .section-title{font-size:1.8rem;font-weight:700;line-height:1.3;margin-bottom:1.2rem;color:var(--text-main)}
  @media(min-width:768px){.section-title{font-size:2.1rem}}
  .section-sub{font-size:1rem;color:var(--text-sub);line-height:1.8;max-width:720px}
  .card{background:var(--card-bg);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:transform .25s ease,box-shadow .25s ease;padding:1.5rem}
  .card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;font-weight:600;border-radius:10px;padding:.72rem 1.5rem;font-size:16px;line-height:1.2;border:1px solid transparent;cursor:pointer;transition:all .22s ease}
  .btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}
  .btn-primary i{transition:transform .22s ease}
  .btn-primary:hover{background:var(--dark);border-color:var(--dark);transform:translateY(-1px);box-shadow:0 8px 20px rgba(13,59,54,.14)}
  .btn-primary:hover i{transform:translateX(4px)}
  .btn-outline{background:transparent;color:var(--primary);border-color:var(--primary)}
  .btn-outline:hover{background:rgba(29,94,85,.06);border-color:var(--dark);color:var(--dark)}
  .btn-gold{background:var(--accent);color:#fff;border-color:var(--accent)}
  .btn-gold:hover{background:#a9752c;transform:translateY(-2px);box-shadow:0 10px 22px rgba(192,138,62,.24)}
  .tag{display:inline-flex;align-items:center;background:rgba(192,138,62,.10);border:1px solid rgba(192,138,62,.35);color:#976a2c;font-size:12px;font-weight:600;padding:.15rem .75rem;border-radius:999px;letter-spacing:.02em}
  .icon-badge{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(29,94,85,.10);color:var(--primary);font-size:1.3rem;margin-bottom:1rem}
  .text-gold{color:var(--accent)}
  /* nav */
  .top-info{background:var(--dark);color:rgba(255,255,255,.85);font-size:13px;padding:.4rem 0}
  .top-info .site-container{display:flex;justify-content:space-between;align-items:center;gap:.75rem;flex-wrap:wrap}
  .main-header{background:var(--page-bg);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60;backdrop-filter:blur(8px)}
  .nav-bar{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;padding:.8rem 0;flex-wrap:wrap}
  .brand-logo{display:flex;align-items:center;gap:.6rem;font-size:1.35rem;font-weight:800;color:var(--text-main);letter-spacing:-.02em;white-space:nowrap}
  .brand-logo svg{color:var(--primary)}
  .brand-sub{display:block;font-size:.7rem;font-weight:500;color:var(--text-mut);letter-spacing:.04em;margin-top:-4px}
  .nav-search{flex:1 1 100%;display:flex;align-items:center;background:#fff;border:1px solid #E0DCD2;border-radius:999px;height:46px;padding:0 .9rem;margin:.5rem 0 0;transition:border .2s,box-shadow .2s;order:3}
  .nav-search svg{width:18px;height:18px;color:var(--text-mut);margin-right:.6rem;flex-shrink:0}
  .nav-search input{flex:1;border:0;background:transparent;font-size:15px;color:var(--text-main);min-width:0}
  .nav-search input::placeholder{color:var(--text-mut)}
  .nav-search button{background:var(--primary);border:0;color:#fff;border-radius:999px;font-size:14px;padding:.35rem 1.1rem;font-weight:600;cursor:pointer;transition:background .2s;flex-shrink:0}
  .nav-search button:hover{background:var(--dark)}
  .nav-search:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(29,94,85,.14)}
  .desktop-nav{display:none;flex:1;justify-content:flex-end}
  .nav-primary{display:flex;gap:.5rem}
  .nav-primary a{display:inline-block;padding:.45rem .9rem;font-size:15px;font-weight:600;color:var(--text-main);border-radius:6px;transition:all .2s;white-space:nowrap}
  .nav-primary a:hover{color:var(--primary);background:rgba(29,94,85,.07)}
  .nav-primary a.active-nav{color:var(--primary);box-shadow:0 2px 0 0 var(--primary)}
  .mobile-menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--line);background:#fff;border-radius:10px;color:var(--text-main);cursor:pointer}
  .mobile-menu{display:none;padding:0 0 .8rem}
  .mobile-menu.open{display:block}
  .mobile-menu .mobile-nav-inner{display:flex;flex-direction:column;gap:.15rem;border-top:1px dashed var(--line);padding-top:.8rem}
  .mobile-menu a{display:block;padding:.85rem .5rem;font-weight:600;border-radius:8px;color:var(--text-main);font-size:1rem;border-bottom:1px solid rgba(229,224,214,.7)}
  .mobile-menu a:hover{background:rgba(29,94,85,.06);color:var(--primary)}
  .mobile-menu a.active-nav{color:var(--primary);background:rgba(29,94,85,.08);border-left:3px solid var(--primary)}
  .mobile-menu .m-search{margin-bottom:.6rem}
  .mobile-menu .m-search .nav-search{order:0;margin:.5rem 0}
  @media(min-width:1024px){
    .nav-bar{flex-wrap:nowrap}
    .nav-search{flex:0 0 38%;margin:0;order:0}
    .desktop-nav{display:flex}
    .mobile-menu-toggle{display:none}
  }
  /* page hero */
  .cat-hero{background:linear-gradient(135deg,#0D3B36 0%,#145048 68%,#1D5E55 100%);color:#fff;padding:3.2rem 0 4rem;position:relative;overflow:hidden}
  .cat-hero:after{content:'';position:absolute;top:0;right:0;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle at center,rgba(231,205,160,.16) 0%,transparent 70%);pointer-events:none}
  .cat-hero .site-container{position:relative;z-index:2}
  .cat-hero .breadcrumb{font-size:14px;color:rgba(255,255,255,.66);margin-bottom:1.2rem}
  .cat-hero .breadcrumb a{color:rgba(255,255,255,.9)}
  .cat-hero .breadcrumb a:hover{color:#fff}
  .cat-hero h1{font-size:2.1rem;line-height:1.25;font-weight:800;margin-bottom:1.2rem;color:#fff;max-width:850px}
  @media(min-width:768px){.cat-hero h1{font-size:2.6rem}}
  .cat-hero .lead{font-size:1.05rem;line-height:1.9;color:rgba(255,255,255,.82);max-width:860px;margin-bottom:1.6rem}
  .hero-meta{display:flex;flex-wrap:wrap;gap:.6rem}
  .hero-meta span{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);padding:.3rem .9rem;border-radius:999px;font-size:13px;color:rgba(255,255,255,.9)}
  /* quick nav anchor */
  .quick-links{background:var(--dark);border-bottom:1px solid rgba(255,255,255,.08)}
  .quick-links .site-container{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6rem .8rem;padding-top:.7rem;padding-bottom:.7rem}
  .quick-links span{color:#D8C9A8;font-size:14px;font-weight:600;letter-spacing:.04em}
  .quick-links a{color:rgba(255,255,255,.82);font-size:14px;padding:.3rem .7rem;border-radius:6px;border:1px solid rgba(255,255,255,.15);transition:all .2s;white-space:nowrap}
  .quick-links a:hover{background:var(--accent);border-color:var(--accent);color:#fff}
  /* section with alternate background */
  .bg-white{background:#fff}
  .bg-soft{background:#FBFAF7}
  .index-block{display:grid;grid-template-columns:1fr;gap:2rem}
  @media(min-width:1024px){.index-block{grid-template-columns:1.2fr .8fr}}
  .module-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1.2rem 0;box-shadow:none;transition:box-shadow .2s}
  .module-card:hover{box-shadow:var(--shadow-sm)}
  .module-card h3{font-size:1.1rem;font-weight:700;padding:0 1.2rem 0.8rem;border-bottom:1px dashed var(--line);display:flex;align-items:center;justify-content:space-between;gap:.5rem}
  .module-card ul{display:flex;flex-direction:column}
  .module-card li{border-bottom:1px solid var(--line);padding:.85rem 1.2rem;transition:background .18s;position:relative}
  .module-card li:last-child{border-bottom:0}
  .module-card li:hover{background:rgba(192,138,62,.04)}
  .module-card a{display:flex;justify-content:space-between;align-items:center;gap:1rem}
  .module-card .m-title{font-weight:600;color:var(--text-main)}
  .module-card .m-title small{display:block;font-weight:400;color:var(--text-sub);font-size:.87rem;line-height:1.65;margin-top:.2rem}
  .module-card .m-arrow{color:var(--accent);opacity:.7;transition:all .2s}
  .module-card li:hover .m-arrow{opacity:1;transform:translateX(4px)}
  .module-number{color:#cda35e;font-weight:600;}
  /* dual col lists */
  .split-row{display:grid;grid-template-columns:1fr;gap:1.2rem 2rem}
  @media(min-width:768px){.split-row{grid-template-columns:1fr 1fr}}
  .list-card{border-bottom:1px solid var(--line);padding:1.05rem .2rem;display:flex;align-items:flex-start;gap:1rem;transition:background .2s;border-radius:8px}
  .list-card:hover{background:rgba(29,94,85,.03)}
  .list-card .num{font-size:1.4rem;font-weight:800;color:#C9C0B0;flex-shrink:0;min-width:42px;line-height:1.2}
  .list-card h3{font-size:1rem;font-weight:700;color:var(--text-main);line-height:1.5}
  .list-card p{margin-top:.3rem;font-size:.9rem;color:var(--text-sub);line-height:1.75}
  .list-card .detail-link{display:inline-block;margin-top:.5rem;color:var(--primary);font-size:.88rem;font-weight:600}
  .list-card .detail-link:hover{color:var(--accent)}
  /* feature grid */
  .feature-grid{display:grid;grid-template-columns:1fr;gap:1.3rem;margin-top:2rem}
  @media(min-width:640px){.feature-grid{grid-template-columns:repeat(2,1fr)}}
  @media(min-width:1024px){.feature-grid{grid-template-columns:repeat(4,1fr)}}
  .feature-tile{background:transparent;padding:1.4rem 1rem 1.1rem;border-radius:14px;border:1px solid var(--line);transition:all .25s}
  .feature-tile:hover{border-color:rgba(29,94,85,.25);background:#fff;transform:translateY(-3px);box-shadow:var(--shadow-sm)}
  .feature-tile .icon{width:48px;height:48px;background:rgba(29,94,85,.09);border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;color:var(--primary);margin-bottom:.9rem}
  .feature-tile h3{font-size:1rem;font-weight:700;margin-bottom:.35rem}
  .feature-tile p{font-size:.88rem;line-height:1.7;color:var(--text-sub)}
  /* scenario chips */
  .chip-cloud{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.5rem 0 .8rem}
  .chip-cloud li{background:#fff;border:1px solid var(--line);border-radius:999px;padding:.45rem 1.1rem;font-size:14px;transition:all .2s;color:var(--text-main);font-weight:500}
  .chip-cloud li:hover{border-color:var(--primary);color:var(--primary);background:rgba(29,94,85,.04)}
  /* step layout */
  .step-wrap{display:grid;grid-template-columns:1fr;gap:1.6rem;margin-top:2.3rem}
  @media(min-width:768px){.step-wrap{grid-template-columns:repeat(3,1fr)}}
  .step-item{position:relative;padding:1.7rem 1.5rem;background:#FBFAF7;border-radius:14px;border:1px solid transparent;transition:border .2s}
  .step-item:before{content:'';position:absolute;top:-1px;left:1.5rem;right:1.5rem;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent-light));opacity:.5}
  .step-num{font-size:.9rem;font-weight:800;color:var(--accent);letter-spacing:.05em;margin-bottom:.4rem}
  .step-item h3{font-size:1.1rem;font-weight:700;margin-bottom:.35rem}
  .step-item p{color:var(--text-sub);line-height:1.7}
  /* data band */
  .data-band{background:var(--dark);color:#fff;padding:2.2rem 0}
  .data-band .data-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;text-align:center}
  @media(min-width:768px){.data-band .data-grid{grid-template-columns:repeat(4,1fr)}}
  .data-grid .data-item strong{font-size:1.8rem;font-weight:800;color:#fff;line-height:1.2;display:block}
  .data-grid .data-item span{color:rgba(255,255,255,.65);font-size:14px}
  .data-grid .data-item strong small{font-size:1.05rem;font-weight:700;color:var(--accent)}
  /* scenario blocks */
  .cen-block{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center;margin:2.5rem 0}
  @media(min-width:768px){.cen-block{grid-template-columns:1fr 1fr;gap:3rem}}
  .cen-image{border-radius:18px;overflow:hidden;box-shadow:var(--shadow-sm);position:relative}
  .cen-image img{width:100%;height:240px}
  @media(min-width:768px){.cen-image img{height:270px}}
  /* FAQ */
  .faq-list{max-width:860px;margin:2rem auto 0;background:transparent}
  .faq-item{border-bottom:1px solid var(--line)}
  .faq-item:first-child{border-top:1px solid var(--line)}
  .faq-q{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.15rem .2rem;cursor:pointer}
  .faq-q span{font-size:1.02rem;font-weight:700;color:var(--text-main)}
  .faq-q .faq-icon{color:var(--accent);font-size:1.15rem;transition:transform .3s;flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}
  .faq-item.open .faq-icon{transform:rotate(45deg);color:var(--primary)}
  .faq-item.open .faq-q span{color:var(--primary)}
  .faq-a{display:none;padding:.2rem 1.5rem 1.2rem .2rem;color:var(--text-sub);font-size:.95rem;line-height:1.85}
  .faq-item.open .faq-a{display:block}
  /* CTA */
  .cta-wrap{background:var(--dark);border-radius:22px;overflow:hidden;color:#fff;padding:2.4rem 1.8rem;position:relative;box-shadow:0 25px 50px -12px rgba(13,59,54,.45)}
  @media(min-width:768px){.cta-wrap{padding:3.4rem 3.5rem;display:flex;align-items:center;justify-content:space-between;gap:2rem}}
  .cta-wrap:after{content:'';position:absolute;bottom:-45px;left:0;width:180px;height:180px;border-radius:50%;background:rgba(192,138,62,.13);pointer-events:none}
  .cta-wrap h2{font-size:1.7rem;font-weight:800;margin-bottom:.6rem}
  @media(min-width:768px){.cta-wrap h2{font-size:2rem}}
  .cta-wrap p{color:rgba(255,255,255,.75);max-width:680px;margin-bottom:1.2rem}
  .cta-wrap .cta-buttons{position:relative;z-index:2;flex-shrink:0;display:flex;flex-direction:column;gap:.7rem}
  @media(min-width:480px){.cta-wrap .cta-buttons{flex-direction:row}}
  /* footer */
  .site-footer{background:var(--dark);color:rgba(255,255,255,.75);padding:3.5rem 0 1.8rem}
  .footer-grid{display:grid;grid-template-columns:1fr;gap:2rem}
  @media(min-width:768px){.footer-grid{grid-template-columns:1.3fr 1fr 1fr 1.2fr}}
  .footer-brand p{font-size:.9rem;line-height:1.8;margin-top:.6rem;max-width:300px}
  .footer-col h4{font-size:1.05rem;color:#fff;font-weight:700;margin-bottom:1rem;position:relative;padding-bottom:.45rem}
  .footer-col h4:after{content:'';position:absolute;bottom:0;left:0;width:28px;height:2px;background:var(--accent)}
  .footer-col ul{display:flex;flex-direction:column;gap:.55rem}
  .footer-col a{color:rgba(255,255,255,.65);font-size:.93rem;transition:all .2s}
  .footer-col a:hover{color:#fff;padding-left:4px}
  .footer-contact li{display:flex;gap:.5rem;margin-bottom:.7rem;font-size:.9rem;color:rgba(255,255,255,.58);align-items:flex-start}
  .footer-contact svg{flex-shrink:0;margin-top:.4rem}
  .footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:1.5rem;margin-top:2.5rem;font-size:14px;text-align:center;color:rgba(255,255,255,.45);line-height:1.8}
  .footer-bottom a{color:rgba(255,255,255,.75);margin:0 .2rem}
  .btn-light{background:var(--accent);color:#fff}
  .btn-light:hover{background:#fff;color:var(--primary);border-color:#fff}
  .btn-white-outline{border:1px solid rgba(255,255,255,.55)}
  .btn-white-outline:hover{border-color:#fff;background:transparent;color:#fff}
  .phone-cap{color:var(--accent);font-weight:800;font-size:1.2rem}
  @media(max-width:520px){
    .section-title{font-size:1.55rem}
    .cat-hero h1{font-size:1.75rem}
    .nav-bar{gap:.7rem}
    .brand-logo{font-size:1.1rem}
    .brand-logo .brand-sub{font-size:.65rem}
    .cta-wrap h2{font-size:1.4rem}
  }